Vue-Blocks

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

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

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

scene

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

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

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

{
 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