Awesome Open Source
Awesome Open Source

Vue-Blocks

Demo

Demo

Basic usage

<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>

Props

blocksContent

Type: Array.<Node>
Required: true
Default: []

Object Node:

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

Object NodeField:

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

Custom attributes are available in scene.blocks[index].values.YourAttrName

scene

Type: Object
Required: false
Default:

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

Object Scene:

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

Object Block:

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

Object 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
}

Build Setup

# 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

License

MIT license


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Vue (84,289
Graph (3,801
Vuejs2 (2,651
Editor (2,641
Workflow (2,324
Block (416
Dataflow (334
Related Projects