vue blocks

vue-blocks

데모

데모

기본 사용

 < template >
  < div id =" app " >
    < VueBlocksContainer
      ref =" container "
      :blocksContent =" blocks "
      :scene.sync =" scene "
      class =" container " />
  </ div >
</ template >

< script >
  import VueBlocksContainer from '...path.../vue-blocks/src'

  export default {
    name : 'App' ,
    components : {
      VueBlocksContainer
    } ,
    data : function ( ) {
      return {
        blocks : [
          {
            name : 'test' ,
            title : 'Test block' ,
            family : 'Test' ,
            description : 'Description text' ,
            fields : [
              {
                name : 'in1' ,
                type : 'event' ,
                attr : 'input'
              } ,
              {
                name : 'in2' ,
                type : 'event' ,
                attr : 'input'
              } ,
              {
                name : 'out1' ,
                type : 'event' ,
                attr : 'output'
              } ,
              {
                name : 'out2' ,
                type : 'event' ,
                attr : 'output'
              }
            ]
          }
        ] ,
        scene : {
          blocks : [
            {
              id : 1 ,
              x : 0 ,
              y : 0 ,
              name : 'test' ,
              title : 'Test block' ,
              values : {
                property : [
                  {
                    name : 'message' ,
                    type : 'string'
                  }
                ]
              }
            } ,
            {
              id : 2 ,
              x : 0 ,
              y : 50 ,
              name : 'test' ,
              title : 'Test block 2' ,
              values : {
                property : [
                  {
                    name : 'message' ,
                    type : 'string'
                  }
                ]
              }
            }
          ] ,
          links : [ ] ,
          container : {
            centerX : 0 ,
            centerY : 0 ,
            scale : 1
          }
        }
      }
    }
  }
</ script >


< style >
  html, body {
    margin: 0;
    padding: 0;
  }

  html {
    width: 100vw;
    height: 100vh;
  }

  body,
  #app,
  .container {
    width: 100%;
    height: 100%;
  }
</ style >

소품

블록 컨텐츠

유형 : Array.<Node>
필수 : true
기본: []

객체 Node :

 {
  name: 'name-node',
  title: 'Title node',
  family: 'family - just for grouping',
  description: 'Description text',
  fields: Array.<NodeField>
}

객체 NodeField :

 {
  name: 'name',
  type: 'type-name', // not used
  attr: 'attribute' // input/output or custom
  'other': - for custom
}

사용자 정의 속성은 scene.blocks[index].values.YourAttrName 에서 사용할 수 있습니다

장면

유형 : Object
필수 : false
기본:

 {
  blocks: [],
  links: [],
  container: {}
}

객체 Scene :

 {
  blocks: Array.<Block>,
  links: Array.<BlockLinks>,
  container: {
   centerX: number
   centerY: number
   scale: number
  }
}

객체 Block :

 {
  id: number,
  x: number,
  y: number,
  name: string,
  title: string,
  values: {
    customAttribute: [ // show "NodeField"
      name: NodeField (without name and attr fields)
    ]
  }
}

객체 BlockLinks :

 {
  id: number, // ID
  originID: number, // Origin block ID
  originSlot: number, // Origin block slot number
  targetID: number, // Target block ID
  targetSlot: number // Target block slot number
}

설정 설정

 # install dependencies
npm install

# serve with hot reload at localhost:8080
npm run serve

# build for production with minification
npm run build

# build for github pages
npm run build:docs

특허

MIT 라이센스