├── .browserslistrc
├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── docs
    ├── css
    │   └── app.77376fe9.css
    ├── favicon.ico
    ├── index.html
    └── js
    │   ├── app.76c2ed65.js
    │   ├── app.76c2ed65.js.map
    │   ├── chunk-vendors.a25a9b30.js
    │   └── chunk-vendors.a25a9b30.js.map
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── components
    │   ├── VueBlock.vue
    │   ├── VueBlockProperty.vue
    │   ├── VueBlocksContainer.vue
    │   └── VueLink.vue
    ├── helpers
    │   ├── dom.js
    │   └── mouse.js
    ├── index.js
    └── main.js
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Maurizio Bonani
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ## Vue-Blocks
  2 | 
  3 | ### Demo
  4 | 
  5 | [Demo](https://ghostiam.github.io/vue-blocks/index.html)
  6 | 
  7 | ### Basic usage
  8 | 
  9 | ``` html
 10 | <template>
 11 |   <div id="app">
 12 |     <VueBlocksContainer
 13 |       ref="container"
 14 |       :blocksContent="blocks"
 15 |       :scene.sync="scene"
 16 |       class="container"/>
 17 |   </div>
 18 | </template>
 19 | 
 20 | <script>
 21 |   import VueBlocksContainer from '...path.../vue-blocks/src'
 22 | 
 23 |   export default {
 24 |     name: 'App',
 25 |     components: {
 26 |       VueBlocksContainer
 27 |     },
 28 |     data: function () {
 29 |       return {
 30 |         blocks: [
 31 |           {
 32 |             name: 'test',
 33 |             title: 'Test block',
 34 |             family: 'Test',
 35 |             description: 'Description text',
 36 |             fields: [
 37 |               {
 38 |                 name: 'in1',
 39 |                 type: 'event',
 40 |                 attr: 'input'
 41 |               },
 42 |               {
 43 |                 name: 'in2',
 44 |                 type: 'event',
 45 |                 attr: 'input'
 46 |               },
 47 |               {
 48 |                 name: 'out1',
 49 |                 type: 'event',
 50 |                 attr: 'output'
 51 |               },
 52 |               {
 53 |                 name: 'out2',
 54 |                 type: 'event',
 55 |                 attr: 'output'
 56 |               }
 57 |             ]
 58 |           }
 59 |         ],
 60 |         scene: {
 61 |           blocks: [
 62 |             {
 63 |               id: 1,
 64 |               x: 0,
 65 |               y: 0,
 66 |               name: 'test',
 67 |               title: 'Test block',
 68 |               values: {
 69 |                 property: [
 70 |                   {
 71 |                     name: 'message',
 72 |                     type: 'string'
 73 |                   }
 74 |                 ]
 75 |               }
 76 |             },
 77 |             {
 78 |               id: 2,
 79 |               x: 0,
 80 |               y: 50,
 81 |               name: 'test',
 82 |               title: 'Test block 2',
 83 |               values: {
 84 |                 property: [
 85 |                   {
 86 |                     name: 'message',
 87 |                     type: 'string'
 88 |                   }
 89 |                 ]
 90 |               }
 91 |             }
 92 |           ],
 93 |           links: [],
 94 |           container: {
 95 |             centerX: 0,
 96 |             centerY: 0,
 97 |             scale: 1
 98 |           }
 99 |         }
100 |       }
101 |     }
102 |   }
103 | </script>
104 | 
105 | 
106 | <style>
107 |   html, body {
108 |     margin: 0;
109 |     padding: 0;
110 |   }
111 | 
112 |   html {
113 |     width: 100vw;
114 |     height: 100vh;
115 |   }
116 | 
117 |   body,
118 |   #app,
119 |   .container {
120 |     width: 100%;
121 |     height: 100%;
122 |   }
123 | </style>
124 | ```
125 | 
126 | ### Props
127 | 
128 | #### blocksContent
129 | 
130 | Type: `Array.<Node>`<br>
131 | Required: `true`<br>
132 | Default: `[]`
133 | 
134 | Object `Node`:
135 | ```
136 | {
137 |   name: 'name-node',
138 |   title: 'Title node',
139 |   family: 'family - just for grouping',
140 |   description: 'Description text',
141 |   fields: Array.<NodeField>
142 | }
143 | ```
144 | 
145 | Object `NodeField`: 
146 | ```
147 | {
148 |   name: 'name',
149 |   type: 'type-name', // not used
150 |   attr: 'attribute' // input/output or custom
151 |   'other': - for custom
152 | }
153 | ```
154 | 
155 | Custom attributes are available in `scene.blocks[index].values.YourAttrName`
156 | 
157 | #### scene
158 | 
159 | Type: `Object`<br>
160 | Required: `false`<br>
161 | Default: 
162 | ```
163 | {
164 |   blocks: [],
165 |   links: [],
166 |   container: {}
167 | }
168 | ```
169 | 
170 | Object `Scene`:
171 | ```
172 | {
173 |   blocks: Array.<Block>,
174 |   links: Array.<BlockLinks>,
175 |   container: {
176 |    centerX: number
177 |    centerY: number
178 |    scale: number
179 |   }
180 | }
181 | ```
182 | 
183 | Object `Block`:
184 | ```
185 | {
186 |   id: number,
187 |   x: number,
188 |   y: number,
189 |   name: string,
190 |   title: string,
191 |   values: {
192 |     customAttribute: [ // show "NodeField"
193 |       name: NodeField (without name and attr fields)
194 |     ]
195 |   }
196 | }
197 | ```
198 | 
199 | Object `BlockLinks`:
200 | ```
201 | {
202 |   id: number, // ID
203 |   originID: number, // Origin block ID
204 |   originSlot: number, // Origin block slot number
205 |   targetID: number, // Target block ID
206 |   targetSlot: number // Target block slot number
207 | }
208 | ```
209 | 
210 | ## Build Setup
211 | 
212 | ``` bash
213 | # install dependencies
214 | npm install
215 | 
216 | # serve with hot reload at localhost:8080
217 | npm run serve
218 | 
219 | # build for production with minification
220 | npm run build
221 | 
222 | # build for github pages
223 | npm run build:docs
224 | 
225 | ```
226 | 
227 | ## License
228 | 
229 | [MIT license](LICENSE)
230 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/docs/css/app.77376fe9.css:
--------------------------------------------------------------------------------
1 | .vue-block[data-v-9a4bcc94]{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #000;background:#fff;z-index:1;opacity:.9;cursor:move}.vue-block.selected[data-v-9a4bcc94]{border:1px solid red;z-index:2}.vue-block>header[data-v-9a4bcc94]{background:#bfbfbf;text-align:center}.vue-block>header>.delete[data-v-9a4bcc94]{color:red;cursor:pointer;float:right;position:absolute;right:5px}.vue-block .inputs[data-v-9a4bcc94],.vue-block .outputs[data-v-9a4bcc94]{padding:2px 0;display:block;width:50%}.vue-block .inputs>[data-v-9a4bcc94],.vue-block .outputs>[data-v-9a4bcc94]{width:100%}.vue-block .circle[data-v-9a4bcc94]{-webkit-box-sizing:border-box;box-sizing:border-box;margin-top:3px;width:10px;height:10px;border:1px solid rgba(0,0,0,.5);border-radius:100%;cursor:crosshair}.vue-block .circle.active[data-v-9a4bcc94]{background:#ff0}.vue-block .inputs[data-v-9a4bcc94]{float:left;text-align:left;margin-left:-6px}.vue-block .input[data-v-9a4bcc94],.vue-block .output[data-v-9a4bcc94]{height:16px;overflow:hidden;font-size:14px}.vue-block .input[data-v-9a4bcc94]{float:left}.vue-block .input .circle[data-v-9a4bcc94]{float:left;margin-right:2px}.vue-block .input .circle[data-v-9a4bcc94]:hover{background:#0f0}.vue-block .input .circle:hover.active[data-v-9a4bcc94]{background:red}.vue-block .outputs[data-v-9a4bcc94]{float:right;text-align:right;margin-right:-6px}.vue-block .output[data-v-9a4bcc94]{float:right}.vue-block .output .circle[data-v-9a4bcc94]{float:right;margin-left:2px}.vue-block .output .circle[data-v-9a4bcc94]:hover{background:#0f0}.vue-container[data-v-cd11bc44]{position:relative;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.blocks-properties[data-v-d11cfc5a]{position:absolute;right:0;top:0;width:300px;min-height:200px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10px;background:#fff;border:1px solid red}body,html{margin:0;padding:0}html{width:100vw;height:100vh}body{width:100%;height:100%}#app{width:calc(100% - 40px);height:calc(100% - 40px);padding:20px 0 0 20px}.container{width:100%;height:calc(100% - 50px);border:1px solid #000}#contextMenu{position:absolute;z-index:1000;background:#fff;border:1px solid #000;padding:5px;margin:0}#contextMenu li{list-style:none}#contextMenu li.label{color:grey;font-size:90%}#contextMenu:focus{outline:none}


--------------------------------------------------------------------------------
/docs/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ghostiam/vue-blocks/87b89587c9d27a0a0ba8c3fb1dfe2c27eb15e748/docs/favicon.ico


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><title>vue-blocks</title><link href=css/app.77376fe9.css rel=preload as=style><link href=js/app.76c2ed65.js rel=preload as=script><link href=js/chunk-vendors.a25a9b30.js rel=preload as=script><link href=css/app.77376fe9.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-blocks doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.a25a9b30.js></script><script src=js/app.76c2ed65.js></script></body></html>


--------------------------------------------------------------------------------
/docs/js/app.76c2ed65.js:
--------------------------------------------------------------------------------
1 | (function(t){function e(e){for(var i,r,l=e[0],a=e[1],c=e[2],h=0,d=[];h<l.length;h++)r=l[h],Object.prototype.hasOwnProperty.call(o,r)&&o[r]&&d.push(o[r][0]),o[r]=0;for(i in a)Object.prototype.hasOwnProperty.call(a,i)&&(t[i]=a[i]);u&&u(e);while(d.length)d.shift()();return s.push.apply(s,c||[]),n()}function n(){for(var t,e=0;e<s.length;e++){for(var n=s[e],i=!0,l=1;l<n.length;l++){var a=n[l];0!==o[a]&&(i=!1)}i&&(s.splice(e--,1),t=r(r.s=n[0]))}return t}var i={},o={app:0},s=[];function r(e){if(i[e])return i[e].exports;var n=i[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=t,r.c=i,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)r.d(n,i,function(e){return t[e]}.bind(null,i));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="";var l=window["webpackJsonp"]=window["webpackJsonp"]||[],a=l.push.bind(l);l.push=e,l=l.slice();for(var c=0;c<l.length;c++)e(l[c]);var u=a;s.push([0,"chunk-vendors"]),n()})({0:function(t,e,n){t.exports=n("56d7")},"0361":function(t,e,n){"use strict";var i=n("6bcd"),o=n.n(i);o.a},"0b0d":function(t,e,n){},2395:function(t,e,n){},3230:function(t,e,n){"use strict";var i=n("0b0d"),o=n.n(i);o.a},"477d":function(t,e,n){"use strict";var i=n("d8da"),o=n.n(i);o.a},"56d7":function(t,e,n){"use strict";n.r(e);n("e260"),n("e6cf"),n("cca6"),n("a79d");var i=n("2b0e"),o=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{attrs:{id:"app"}},[n("VueBlocksContainer",{ref:"container",staticClass:"container",attrs:{blocksContent:t.blocks,scene:t.scene},on:{"update:scene":function(e){t.scene=e},blockSelect:t.selectBlock,blockDeselect:t.deselectBlock},nativeOn:{contextmenu:function(e){return t.showContextMenu(e)},click:function(e){return t.closeContextMenu(e)}}}),n("VueBlockProperty",{attrs:{property:t.selectedBlockProperty},on:{save:t.saveProperty}}),n("label",[n("select",{directives:[{name:"model",rawName:"v-model",value:t.selectedType,expression:"selectedType"}],attrs:{name:"type"},on:{change:function(e){var n=Array.prototype.filter.call(e.target.options,(function(t){return t.selected})).map((function(t){var e="_value"in t?t._value:t.value;return e}));t.selectedType=e.target.multiple?n:n[0]}}},[t._l(t.selectBlocksType,(function(e){return[n("optgroup",{attrs:{label:e}},t._l(t.filteredBlocks(e),(function(e){return n("option",{domProps:{value:e.name}},[t._v(t._s(e.title||e.name))])})),0)]}))],2)]),n("button",{on:{click:function(e){return e.stopPropagation(),t.addBlock(e)}}},[t._v("Add")]),t._v(" | "),n("label",{attrs:{for:"useContextMenu"}},[n("input",{directives:[{name:"model",rawName:"v-model",value:t.useContextMenu,expression:"useContextMenu"}],attrs:{type:"checkbox",id:"useContextMenu"},domProps:{checked:Array.isArray(t.useContextMenu)?t._i(t.useContextMenu,null)>-1:t.useContextMenu},on:{change:function(e){var n=t.useContextMenu,i=e.target,o=!!i.checked;if(Array.isArray(n)){var s=null,r=t._i(n,s);i.checked?r<0&&(t.useContextMenu=n.concat([s])):r>-1&&(t.useContextMenu=n.slice(0,r).concat(n.slice(r+1)))}else t.useContextMenu=o}}}),t._v("Use right click for Add blocks ")]),n("ul",{directives:[{name:"show",rawName:"v-show",value:t.contextMenu.isShow,expression:"contextMenu.isShow"}],ref:"contextMenu",style:{top:t.contextMenu.top+"px",left:t.contextMenu.left+"px"},attrs:{id:"contextMenu",tabindex:"-1"},on:{blur:t.closeContextMenu}},[t._l(t.selectBlocksType,(function(e){return[n("li",{staticClass:"label"},[t._v(t._s(e))]),t._l(t.filteredBlocks(e),(function(e){return n("li",{on:{click:function(n){return t.addBlockContextMenu(e.name)}}},[t._v(t._s(e.title||e.name)+" ")])}))]}))],2)],1)},s=[],r=(n("4de4"),n("7db0"),n("c975"),n("d81d"),n("d3b7"),n("ddb0"),n("3c4e")),l=n.n(r),a=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-container"},[n("VueLink",{attrs:{lines:t.lines}}),t._l(t.blocks,(function(e){return n("VueBlock",t._b({key:e.id,attrs:{options:t.optionsForChild},on:{update:t.updateScene,linkingStart:function(n){return t.linkingStart(e,n)},linkingStop:function(n){return t.linkingStop(e,n)},linkingBreak:function(n){return t.linkingBreak(e,n)},select:function(n){return t.blockSelect(e)},delete:function(n){return t.blockDelete(e)}}},"VueBlock",e,!1,!0))}))],2)},c=[],u=(n("a4d3"),n("e01a"),n("d28b"),n("99af"),n("4160"),n("45fc"),n("b0c0"),n("3ca3"),n("159b"),n("2909"));function h(t){var e=t.getBoundingClientRect(),n=window.pageYOffset,i=window.pageXOffset,o=e.top+n,s=e.left+i;return{top:Math.round(o),left:Math.round(s)}}var d={getOffsetRect:h};function p(t,e){var n=e.pageX||e.clientX+document.documentElement.scrollLeft,i=e.pageY||e.clientY+document.documentElement.scrollTop,o=h(t),s=n-o.left,r=i-o.top;return{x:s,y:r}}var f={getMousePosition:p},m=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-block",class:{selected:t.selected},style:t.style},[n("header",{style:t.headerStyle},[t._v(" "+t._s(t.title)+" "),n("a",{staticClass:"delete",on:{click:t.deleteBlock}},[t._v("x")])]),n("div",{staticClass:"inputs"},t._l(t.inputs,(function(e,i){return n("div",{staticClass:"input"},[n("div",{staticClass:"circle inputSlot",class:{active:e.active},on:{mouseup:function(e){return t.slotMouseUp(e,i)},mousedown:function(e){return t.slotBreak(e,i)}}}),t._v(" "+t._s(e.label)+" ")])})),0),n("div",{staticClass:"outputs"},t._l(t.outputs,(function(e,i){return n("div",{staticClass:"output"},[n("div",{staticClass:"circle",class:{active:e.active},on:{mousedown:function(e){return t.slotMouseDown(e,i)}}}),t._v(" "+t._s(e.label)+" ")])})),0)])},y=[],v=(n("a9e3"),{name:"VueBlock",props:{x:{type:Number,default:0,validator:function(t){return"number"===typeof t}},y:{type:Number,default:0,validator:function(t){return"number"===typeof t}},selected:Boolean,title:{type:String,default:"Title"},inputs:Array,outputs:Array,options:{type:Object}},created:function(){this.mouseX=0,this.mouseY=0,this.lastMouseX=0,this.lastMouseY=0,this.linking=!1,this.dragging=!1},mounted:function(){document.documentElement.addEventListener("mousemove",this.handleMove,!0),document.documentElement.addEventListener("mousedown",this.handleDown,!0),document.documentElement.addEventListener("mouseup",this.handleUp,!0)},beforeDestroy:function(){document.documentElement.removeEventListener("mousemove",this.handleMove,!0),document.documentElement.removeEventListener("mousedown",this.handleDown,!0),document.documentElement.removeEventListener("mouseup",this.handleUp,!0)},data:function(){return{width:this.options.width,hasDragged:!1}},methods:{handleMove:function(t){if(this.mouseX=t.pageX||t.clientX+document.documentElement.scrollLeft,this.mouseY=t.pageY||t.clientY+document.documentElement.scrollTop,this.dragging&&!this.linking){var e=this.mouseX-this.lastMouseX,n=this.mouseY-this.lastMouseY;this.lastMouseX=this.mouseX,this.lastMouseY=this.mouseY,this.moveWithDiff(e,n),this.hasDragged=!0}},handleDown:function(t){this.mouseX=t.pageX||t.clientX+document.documentElement.scrollLeft,this.mouseY=t.pageY||t.clientY+document.documentElement.scrollTop,this.lastMouseX=this.mouseX,this.lastMouseY=this.mouseY;var e=t.target||t.srcElement;this.$el.contains(e)&&1===t.which&&(this.dragging=!0,this.$emit("select"),t.preventDefault&&t.preventDefault())},handleUp:function(){this.dragging&&(this.dragging=!1,this.hasDragged&&(this.save(),this.hasDragged=!1)),this.linking&&(this.linking=!1)},slotMouseDown:function(t,e){this.linking=!0,this.$emit("linkingStart",e),t.preventDefault&&t.preventDefault()},slotMouseUp:function(t,e){this.$emit("linkingStop",e),t.preventDefault&&t.preventDefault()},slotBreak:function(t,e){this.linking=!0,this.$emit("linkingBreak",e),t.preventDefault&&t.preventDefault()},save:function(){this.$emit("update")},deleteBlock:function(){this.$emit("delete")},moveWithDiff:function(t,e){var n=this.x+t/this.options.scale,i=this.y+e/this.options.scale;this.$emit("update:x",n),this.$emit("update:y",i)}},computed:{style:function(){return{top:this.options.center.y+this.y*this.options.scale+"px",left:this.options.center.x+this.x*this.options.scale+"px",width:this.width+"px",transform:"scale("+this.options.scale+")",transformOrigin:"top left"}},headerStyle:function(){return{height:this.options.titleHeight+"px"}}}}),g=v,k=(n("3230"),n("2877")),x=Object(k["a"])(g,m,y,!1,null,"9a4bcc94",null),b=x.exports,S=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("svg",{attrs:{width:"100%",height:"100%"}},[t._l(t.renderedPathes,(function(e){return n("g",[t.outline?n("path",{style:e.outlineStyle,attrs:{d:e.data}}):t._e(),n("path",{style:e.style,attrs:{d:e.data}})])})),n("g",t._l(t.renderedArrows,(function(t){return n("path",{style:t.style,attrs:{d:"M -1 -1 L 0 1 L 1 -1 z",transform:t.transform}})})),0)],2)},D=[],M={props:{lines:{type:Array,default:function(){return[]}},outline:{type:Boolean,default:!1}},methods:{distance:function(t,e,n,i){return Math.sqrt((n-t)*(n-t)+(i-e)*(i-e))},computeConnectionPoint:function(t,e,n,i,o){var s=this.distance(t,e,n,i),r={x:t,y:e},l={x:t+.25*s,y:e},a={x:n-.25*s,y:i},c={x:n,y:i},u=(1-o)*(1-o)*(1-o),h=(1-o)*(1-o)*3*o,d=3*(1-o)*(o*o),p=o*o*o,f=u*r.x+h*l.x+d*a.x+p*c.x,m=u*r.y+h*l.y+d*a.y+p*c.y;return{x:f,y:m}}},computed:{renderedPathes:function(){var t=this;if(!this.lines)return[];var e=[];return this.lines.forEach((function(n){var i=.25*t.distance(n.x1,n.y1,n.x2,n.y2);e.push({data:"M ".concat(n.x1,", ").concat(n.y1," C ").concat(n.x1+i,", ").concat(n.y1,", ").concat(n.x2-i,", ").concat(n.y2,", ").concat(n.x2,", ").concat(n.y2),style:n.style,outlineStyle:n.outlineStyle})})),e},renderedArrows:function(){var t=this;if(!this.lines)return[];var e=[];return this.lines.forEach((function(n){var i=t.computeConnectionPoint(n.x1,n.y1,n.x2,n.y2,.5),o=t.computeConnectionPoint(n.x1,n.y1,n.x2,n.y2,.51),s=-Math.atan2(o.x-i.x,o.y-i.y),r=180*(s>=0?s:2*Math.PI+s)/Math.PI;e.push({transform:"translate(".concat(i.x,", ").concat(i.y,") rotate(").concat(r,")"),style:{stroke:n.style.stroke,strokeWidth:2*n.style.strokeWidth,fill:n.style.stroke}})})),e}}},w=M,C=Object(k["a"])(w,S,D,!1,null,"56aa24a8",null),B=C.exports,E={name:"VueBlockContainer",components:{VueBlock:b,VueLink:B},props:{blocksContent:{type:Array,default:function(){return[]}},scene:{type:Object,default:{blocks:[],links:[],container:{}}},options:{type:Object}},mounted:function(){document.documentElement.addEventListener("mousemove",this.handleMove,!0),document.documentElement.addEventListener("mousedown",this.handleDown,!0),document.documentElement.addEventListener("mouseup",this.handleUp,!0),document.documentElement.addEventListener("wheel",this.handleWheel,!0),this.centerX=this.$el.clientWidth/2,this.centerY=this.$el.clientHeight/2,this.importBlocksContent(),this.importScene()},beforeDestroy:function(){document.documentElement.removeEventListener("mousemove",this.handleMove,!0),document.documentElement.removeEventListener("mousedown",this.handleDown,!0),document.documentElement.removeEventListener("mouseup",this.handleUp,!0),document.documentElement.removeEventListener("wheel",this.handleWheel,!0)},created:function(){this.mouseX=0,this.mouseY=0,this.lastMouseX=0,this.lastMouseY=0,this.minScale=.2,this.maxScale=5,this.linking=!1,this.linkStartData=null,this.inputSlotClassName="inputSlot",this.defaultScene={blocks:[],links:[],container:{}}},data:function(){return{dragging:!1,centerX:0,centerY:0,scale:1,nodes:[],blocks:[],links:[],tempLink:null,selectedBlock:null,hasDragged:!1}},computed:{optionsForChild:function(){return{width:200,titleHeight:20,scale:this.scale,inputSlotClassName:this.inputSlotClassName,center:{x:this.centerX,y:this.centerY}}},container:function(){return{centerX:this.centerX,centerY:this.centerY,scale:this.scale}},lines:function(){var t=this,e=[],n=!0,i=!1,o=void 0;try{for(var s,r=function(){var n=s.value,i=t.blocks.find((function(t){return t.id===n.originID})),o=t.blocks.find((function(t){return t.id===n.targetID}));if(!i||!o)return console.log("Remove invalid link",n),t.removeLink(n.id),"continue";if(i.id===o.id)return console.log("Loop detected, remove link",n),t.removeLink(n.id),"continue";var r=t.getConnectionPos(i,n.originSlot,!1),l=t.getConnectionPos(o,n.targetSlot,!0);if(!r||!l)return console.log("Remove invalid link (slot not exist)",n),t.removeLink(n.id),"continue";var a=r.x,c=r.y,u=l.x,h=l.y;e.push({x1:a,y1:c,x2:u,y2:h,style:{stroke:"#F85",strokeWidth:4*t.scale,fill:"none"},outlineStyle:{stroke:"#666",strokeWidth:6*t.scale,strokeOpacity:.6,fill:"none"}})},l=this.links[Symbol.iterator]();!(n=(s=l.next()).done);n=!0)r()}catch(a){i=!0,o=a}finally{try{n||null==l.return||l.return()}finally{if(i)throw o}}return this.tempLink&&(this.tempLink.style={stroke:"#8f8f8f",strokeWidth:4*this.scale,fill:"none"},e.push(this.tempLink)),e}},methods:{handleMove:function(t){var e=f.getMousePosition(this.$el,t);if(this.mouseX=e.x,this.mouseY=e.y,this.dragging){var n=this.mouseX-this.lastMouseX,i=this.mouseY-this.lastMouseY;this.lastMouseX=this.mouseX,this.lastMouseY=this.mouseY,this.centerX+=n,this.centerY+=i,this.hasDragged=!0}if(this.linking&&this.linkStartData){var o=this.getConnectionPos(this.linkStartData.block,this.linkStartData.slotNumber,!1);this.tempLink={x1:o.x,y1:o.y,x2:this.mouseX,y2:this.mouseY}}},handleDown:function(t){var e=t.target||t.srcElement;if((e===this.$el||e.matches("svg, svg *"))&&1===t.which){this.dragging=!0;var n=f.getMousePosition(this.$el,t);this.mouseX=n.x,this.mouseY=n.y,this.lastMouseX=this.mouseX,this.lastMouseY=this.mouseY,this.deselectAll(),t.preventDefault&&t.preventDefault()}},handleUp:function(t){var e=t.target||t.srcElement;this.dragging&&(this.dragging=!1,this.hasDragged&&(this.updateScene(),this.hasDragged=!1)),!this.$el.contains(e)||"string"===typeof e.className&&-1!==e.className.indexOf(this.inputSlotClassName)||(this.linking=!1,this.tempLink=null,this.linkStartData=null)},handleWheel:function(t){var e=t.target||t.srcElement;if(this.$el.contains(e)){t.preventDefault&&t.preventDefault();var n=Math.pow(1.1,-.01*t.deltaY);if(this.scale*=n,this.scale<this.minScale)return void(this.scale=this.minScale);if(this.scale>this.maxScale)return void(this.scale=this.maxScale);var i={x:this.mouseX,y:this.mouseY},o=(i.x-this.centerX)*(n-1),s=(i.y-this.centerY)*(n-1);this.centerX-=o,this.centerY-=s,this.updateScene()}},getConnectionPos:function(t,e,n){if(t&&-1!==e){var i=0,o=0;if(i+=t.x,o+=t.y,o+=this.optionsForChild.titleHeight,n&&t.inputs.length>e);else{if(n||!(t.outputs.length>e))return void console.error("slot "+e+" not found, is input: "+n,t);i+=this.optionsForChild.width}return o+=11,o+=16*e,i*=this.scale,o*=this.scale,i+=this.centerX,o+=this.centerY,{x:i,y:o}}},linkingStart:function(t,e){this.linkStartData={block:t,slotNumber:e};var n=this.getConnectionPos(this.linkStartData.block,this.linkStartData.slotNumber,!1);this.tempLink={x1:n.x,y1:n.y,x2:this.mouseX,y2:this.mouseY},this.linking=!0},linkingStop:function(t,e){if(this.linkStartData&&t&&e>-1){this.links=this.links.filter((function(n){return!(n.targetID===t.id&&n.targetSlot===e)}));var n=Math.max.apply(Math,[0].concat(Object(u["a"])(this.links.map((function(t){return t.id})))));this.linkStartData.block.id!==t.id&&(this.links.push({id:n+1,originID:this.linkStartData.block.id,originSlot:this.linkStartData.slotNumber,targetID:t.id,targetSlot:e}),this.updateScene())}this.linking=!1,this.tempLink=null,this.linkStartData=null},linkingBreak:function(t,e){if(t&&e>-1){var n=this.links.find((function(n){return n.targetID===t.id&&n.targetSlot===e}));if(n){var i=this.blocks.find((function(t){return t.id===n.originID}));this.links=this.links.filter((function(n){return!(n.targetID===t.id&&n.targetSlot===e)})),this.linkingStart(i,n.originSlot),this.updateScene()}}},removeLink:function(t){this.links=this.links.filter((function(e){return!(e.id===t)}))},addNewBlock:function(t,e,n){var i=Math.max.apply(Math,[0].concat(Object(u["a"])(this.blocks.map((function(t){return t.id}))))),o=this.nodes.find((function(e){return e.name===t}));if(o){var s=this.createBlock(o,i+1);void 0===e||void 0===n?(e=(this.$el.clientWidth/2-this.centerX)/this.scale,n=(this.$el.clientHeight/2-this.centerY)/this.scale):(e=(e-this.centerX)/this.scale,n=(n-this.centerY)/this.scale),s.x=e,s.y=n,this.blocks.push(s),this.updateScene()}},createBlock:function(t,e){var n=[],i=[],o={};return t.fields.forEach((function(t){if("input"===t.attr)n.push({name:t.name,label:t.label||t.name});else if("output"===t.attr)i.push({name:t.name,label:t.label||t.name});else{o[t.attr]||(o[t.attr]={});var e=l()({},t);delete e["name"],delete e["attr"],o[t.attr][t.name]||(o[t.attr][t.name]={}),o[t.attr][t.name]=e}})),{id:e,x:0,y:0,selected:!1,name:t.name,title:t.title||t.name,inputs:n,outputs:i,values:o}},deselectAll:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;this.blocks.forEach((function(n){n.id!==e&&n.selected&&t.blockDeselect(n)}))},blockSelect:function(t){t.selected=!0,this.selectedBlock=t,this.deselectAll(t.id),this.$emit("blockSelect",t)},blockDeselect:function(t){t.selected=!1,t&&this.selectedBlock&&this.selectedBlock.id===t.id&&(this.selectedBlock=null),this.$emit("blockDeselect",t)},blockDelete:function(t){var e=this;t.selected&&this.blockDeselect(t),this.links.forEach((function(n){n.originID!==t.id&&n.targetID!==t.id||e.removeLink(n.id)})),this.blocks=this.blocks.filter((function(e){return e.id!==t.id})),this.updateScene()},prepareBlocks:function(t){var e=this;return t.map((function(t){var n=e.nodes.find((function(e){return e.name===t.name}));if(!n)return null;var i=e.createBlock(n,t.id);return i=l()(i,t,{arrayMerge:function(t,e){return 0===e.length?t:e}}),i})).filter((function(t){return!!t}))},prepareBlocksLinking:function(t,e){if(!t)return[];var n=[];return t.forEach((function(t){var i=e.filter((function(e){return e.targetID===t.id})),o=e.filter((function(e){return e.originID===t.id}));t.inputs.forEach((function(e,n){t.inputs[n].active=i.some((function(t){return t.targetSlot===n}))})),t.outputs.forEach((function(e,n){t.outputs[n].active=o.some((function(t){return t.originSlot===n}))})),n.push(t)})),n},importBlocksContent:function(){this.blocksContent&&(this.nodes=l()([],this.blocksContent))},importScene:function(){var t=this,e=l()(this.defaultScene,this.scene),n=this.prepareBlocks(e.blocks);if(n=this.prepareBlocksLinking(n,e.links),this.selectedBlock){var i=n.find((function(e){return t.selectedBlock.id===e.id}));i&&(i.selected=!0)}this.blocks=n,this.links=l()([],e.links);var o=e.container;o.centerX&&(this.centerX=o.centerX),o.centerY&&(this.centerY=o.centerY),o.scale&&(this.scale=o.scale)},exportScene:function(){var t=l()([],this.blocks),e=t.map((function(t){return delete t["inputs"],delete t["outputs"],delete t["selected"],t}));return{blocks:e,links:this.links,container:this.container}},updateScene:function(){this.$emit("update:scene",this.exportScene())}},watch:{blocksContent:function(){this.importBlocksContent()},scene:function(){this.importScene()}}},_=E,Y=(n("477d"),Object(k["a"])(_,a,c,!1,null,"cd11bc44",null)),I=Y.exports,X=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"blocks-properties"},[t._l(t.properties,(function(e){return n("div",{staticClass:"property"},[n("label",{attrs:{for:e.name}},[t._v(t._s(e.label||e.name)+":")]),n("br"),n("input",{directives:[{name:"model",rawName:"v-model",value:e.value,expression:"p.value"}],attrs:{type:"text"},domProps:{value:e.value},on:{input:function(n){n.target.composing||t.$set(e,"value",n.target.value)}}})])})),n("button",{on:{click:function(e){return e.preventDefault(),t.save(e)}}},[t._v("Save")])],2)},P=[],$={name:"VueBlockProperty",props:["property"],data:function(){return{properties:[]}},methods:{loadProperties:function(){this.properties=this.property},save:function(){this.$emit("save",this.properties)}},watch:{property:function(){this.loadProperties()}}},L=$,O=(n("0361"),Object(k["a"])(L,X,P,!1,null,"d11cfc5a",null)),T=O.exports,A={name:"App",components:{VueBlocksContainer:I,VueBlockProperty:T},data:function(){return{blocks:[{name:"text",title:"Text",family:"Animations",description:"Show text",fields:[{name:"text",label:"Text",type:"string",attr:"property"},{name:"delay",label:"Delay (s)",type:"number",attr:"property"},{name:"Show",type:"event",attr:"input"},{name:"Hide",type:"event",attr:"input"},{name:"onShow",type:"event",attr:"output"},{name:"onHide",type:"event",attr:"output"}]},{name:"animation",title:"Animation",family:"Animations",description:"Show animation",fields:[{name:"animation",label:"Animation",type:"animation",attr:"property"},{name:"Play",type:"event",attr:"input"},{name:"Stop",type:"event",attr:"input"},{name:"onEnd",type:"event",attr:"output"}]},{name:"Chat message",family:"Events",description:"",fields:[{name:"message",label:"Activation message",type:"string",attr:"property"},{name:"onMessage",type:"event",attr:"output"}]},{name:"delay",title:"Delay",family:"Time",description:"",fields:[{name:"delay",label:"Delay (s)",type:"number",attr:"property",value:1},{name:"input",type:"event",attr:"input"},{name:"output",type:"event",attr:"output"}]},{name:"shortcuts",title:"Shortcuts",family:"Events",description:"Press shortcut for call event",fields:[{name:"keys",label:"Activation keys",type:"keys",attr:"property"},{name:"onPress",type:"event",attr:"output"}]},{name:"splitter",title:"Splitter",family:"Helpers",description:"Press shortcut for call event",fields:[{name:"input",type:"event",attr:"input"},{name:"output",type:"event",attr:"output"},{name:"output",type:"event",attr:"output"},{name:"output",type:"event",attr:"output"},{name:"output",type:"event",attr:"output"}]}],scene:{blocks:[{id:2,x:-700,y:-69,name:"Chat message",title:"Chat message",values:{property:[{name:"message",type:"string"}]}},{id:4,x:-157,y:-68.5,name:"text",title:"Text",values:{property:{text:{label:"Text",type:"string"}}}},{id:5,x:136,y:-48.5,name:"text",title:"Text",values:{property:{text:{label:"Text",type:"string"}}}},{id:6,x:-440,y:-15.5,name:"delay",title:"Delay",values:{property:{delay:{label:"Delay (s)",type:"number",value:1}}}},{id:7,x:-694,y:60.5,name:"shortcuts",title:"Shortcuts",values:{property:{keys:{label:"Activation keys",type:"keys"}}}},{id:8,x:-163,y:59.5,name:"text",title:"Text",values:{property:{text:{label:"Text",type:"string"}}}},{id:9,x:-429,y:125.5,name:"delay",title:"Delay",values:{property:{delay:{label:"Delay (s)",type:"number",value:1}}}},{id:10,x:126,y:127.5,name:"text",title:"Text",values:{property:{text:{label:"Text",type:"string"}}}},{id:11,x:-856,y:252.5,name:"shortcuts",title:"Shortcuts",values:{property:{keys:{label:"Activation keys",type:"keys"}}}},{id:12,x:-616,y:319.5,name:"delay",title:"Delay",values:{property:{delay:{label:"Delay (s)",type:"number",value:1}}}},{id:13,x:-381,y:252.5,name:"text",title:"Text",values:{property:{text:{label:"Text",type:"string"}}}},{id:14,x:166,y:266.5,name:"text",title:"Text",values:{property:{text:{label:"Text",type:"string"}}}},{id:15,x:-149,y:269.5,name:"delay",title:"Delay",values:{property:{delay:{label:"Delay (s)",type:"number",value:1}}}},{id:16,x:413,y:267.5,name:"animation",title:"Animation",values:{property:{animation:{label:"Animation",type:"animation"}}}},{id:17,x:13,y:380.5,name:"delay",title:"Delay",values:{property:{delay:{label:"Delay (s)",type:"number",value:1}}}}],links:[{id:3,originID:2,originSlot:0,targetID:4,targetSlot:0},{id:6,originID:7,originSlot:0,targetID:8,targetSlot:0},{id:7,originID:7,originSlot:0,targetID:9,targetSlot:0},{id:8,originID:9,originSlot:0,targetID:10,targetSlot:0},{id:9,originID:9,originSlot:0,targetID:8,targetSlot:1},{id:10,originID:2,originSlot:0,targetID:6,targetSlot:0},{id:11,originID:6,originSlot:0,targetID:4,targetSlot:1},{id:12,originID:4,originSlot:1,targetID:5,targetSlot:0},{id:13,originID:11,originSlot:0,targetID:13,targetSlot:0},{id:14,originID:11,originSlot:0,targetID:12,targetSlot:0},{id:15,originID:12,originSlot:0,targetID:13,targetSlot:1},{id:16,originID:13,originSlot:1,targetID:15,targetSlot:0},{id:17,originID:15,originSlot:0,targetID:14,targetSlot:0},{id:18,originID:14,originSlot:0,targetID:16,targetSlot:0},{id:19,originID:14,originSlot:1,targetID:16,targetSlot:1},{id:20,originID:15,originSlot:0,targetID:17,targetSlot:0},{id:21,originID:17,originSlot:0,targetID:14,targetSlot:1}],container:{centerX:1042,centerY:140,scale:1}},selectedBlock:null,selectedType:"delay",useContextMenu:!0,contextMenu:{isShow:!1,mouseX:0,mouseY:0,top:0,left:0}}},computed:{selectedBlockProperty:function(){return this.selectedBlock&&this.selectedBlock.values&&this.selectedBlock.values.property?this.selectedBlock.values.property:null},selectBlocksType:function(){return this.blocks.map((function(t){return t.family})).filter((function(t,e,n){return n.indexOf(t)===e}))}},methods:{selectBlock:function(t){console.log("select",t),this.selectedBlock=t},deselectBlock:function(t){console.log("deselect",t),this.selectedBlock=null},filteredBlocks:function(t){return this.blocks.filter((function(e){return e.family===t}))},addBlock:function(){console.log(this.selectedType),this.$refs.container.addNewBlock(this.selectedType)},saveProperty:function(t){var e=this;console.log(t);var n=this.scene,i=n.blocks.find((function(t){return t.id===e.selectedBlock.id}));i.values.property=t,this.scene=l()({},n)},showContextMenu:function(t){this.useContextMenu&&(t.preventDefault&&t.preventDefault(),this.contextMenu.isShow=!0,this.contextMenu.mouseX=t.x,this.contextMenu.mouseY=t.y,this.$nextTick((function(){this.setMenu(t.y,t.x),this.$refs.contextMenu.focus()})))},setMenu:function(t,e){var n=5,i=this.$refs.contextMenu,o=this.$refs.container.$el.getBoundingClientRect(),s=o.right-i.offsetWidth-n,r=o.bottom-i.offsetHeight-n;console.log(this.$refs.container),console.log(o),e>s&&(e=s),t>r&&(t=r),this.contextMenu.top=t,this.contextMenu.left=e},addBlockContextMenu:function(t){var e=d.getOffsetRect(this.$refs.container.$el),n=this.contextMenu.mouseX-e.left,i=this.contextMenu.mouseY-e.top;this.$refs.container.addNewBlock(t,n,i),this.closeContextMenu()},closeContextMenu:function(){this.contextMenu.isShow=!1}},watch:{blocks:function(t){console.log("blocks",JSON.stringify(t))},scene:function(t){console.log("scene",JSON.stringify(t))}}},N=A,j=(n("7c55"),Object(k["a"])(N,o,s,!1,null,null,null)),W=j.exports;i["a"].config.productionTip=!1,new i["a"]({render:function(t){return t(W)}}).$mount("#app")},"6bcd":function(t,e,n){},"7c55":function(t,e,n){"use strict";var i=n("2395"),o=n.n(i);o.a},d8da:function(t,e,n){}});
2 | //# sourceMappingURL=app.76c2ed65.js.map


--------------------------------------------------------------------------------
/docs/js/app.76c2ed65.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/components/VueBlockProperty.vue?7bdc","webpack:///./src/components/VueBlock.vue?ff9a","webpack:///./src/components/VueBlocksContainer.vue?866e","webpack:///./src/App.vue?9633","webpack:///./src/components/VueBlocksContainer.vue?5564","webpack:///./src/helpers/dom.js","webpack:///./src/helpers/mouse.js","webpack:///./src/components/VueBlock.vue?ced8","webpack:///src/components/VueBlock.vue","webpack:///./src/components/VueBlock.vue?572f","webpack:///./src/components/VueBlock.vue","webpack:///./src/components/VueLink.vue?6d54","webpack:///src/components/VueLink.vue","webpack:///./src/components/VueLink.vue?f029","webpack:///./src/components/VueLink.vue","webpack:///src/components/VueBlocksContainer.vue","webpack:///./src/components/VueBlocksContainer.vue?ac94","webpack:///./src/components/VueBlocksContainer.vue","webpack:///./src/components/VueBlockProperty.vue?ee17","webpack:///src/components/VueBlockProperty.vue","webpack:///./src/components/VueBlockProperty.vue?c570","webpack:///./src/components/VueBlockProperty.vue","webpack:///src/App.vue","webpack:///./src/App.vue?a7d1","webpack:///./src/App.vue","webpack:///./src/main.js","webpack:///./src/App.vue?74c1"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","Object","prototype","hasOwnProperty","call","installedChunks","push","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","window","oldJsonpFunction","slice","_vm","this","_h","$createElement","_c","_self","attrs","ref","staticClass","blocks","scene","on","$event","selectBlock","deselectBlock","nativeOn","showContextMenu","closeContextMenu","selectedBlockProperty","saveProperty","directives","rawName","expression","$$selectedVal","Array","filter","target","options","selected","map","val","_value","selectedType","multiple","_l","type","filteredBlocks","block","domProps","_v","_s","title","stopPropagation","addBlock","isArray","useContextMenu","_i","$$a","$$el","$$c","checked","$$v","$$i","concat","contextMenu","style","top","left","addBlockContextMenu","staticRenderFns","lines","_b","id","optionsForChild","updateScene","linkingStart","linkingStop","linkingBreak","blockSelect","blockDelete","getOffsetRect","element","box","getBoundingClientRect","scrollTop","pageYOffset","scrollLeft","pageXOffset","Math","round","getMousePosition","event","mouseX","pageX","clientX","document","documentElement","mouseY","pageY","clientY","offset","x","y","class","deleteBlock","slot","index","active","slotMouseUp","slotBreak","label","slotMouseDown","component","_e","a","transform","link","originID","targetID","originBlock","targetBlock","console","log","originLinkPos","targetLinkPos","x1","y1","x2","y2","stroke","strokeWidth","fill","outlineStyle","strokeOpacity","composing","$set","preventDefault","save","Vue","config","productionTip","render","h","App","$mount"],"mappings":"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","file":"js/app.76c2ed65.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t\"app\": 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \tvar jsonpArray = window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// add entry module to deferred list\n \tdeferredModules.push([0,\"chunk-vendors\"]);\n \t// run deferred modules when ready\n \treturn checkDeferredModules();\n","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueBlockProperty.vue?vue&type=style&index=0&id=d11cfc5a&lang=less&scoped=true&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueBlockProperty.vue?vue&type=style&index=0&id=d11cfc5a&lang=less&scoped=true&\"","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueBlock.vue?vue&type=style&index=0&id=9a4bcc94&lang=less&scoped=true&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueBlock.vue?vue&type=style&index=0&id=9a4bcc94&lang=less&scoped=true&\"","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueBlocksContainer.vue?vue&type=style&index=0&id=cd11bc44&lang=less&scoped=true&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueBlocksContainer.vue?vue&type=style&index=0&id=cd11bc44&lang=less&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"app\"}},[_c('VueBlocksContainer',{ref:\"container\",staticClass:\"container\",attrs:{\"blocksContent\":_vm.blocks,\"scene\":_vm.scene},on:{\"update:scene\":function($event){_vm.scene=$event},\"blockSelect\":_vm.selectBlock,\"blockDeselect\":_vm.deselectBlock},nativeOn:{\"contextmenu\":function($event){return _vm.showContextMenu($event)},\"click\":function($event){return _vm.closeContextMenu($event)}}}),_c('VueBlockProperty',{attrs:{\"property\":_vm.selectedBlockProperty},on:{\"save\":_vm.saveProperty}}),_c('label',[_c('select',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.selectedType),expression:\"selectedType\"}],attrs:{\"name\":\"type\"},on:{\"change\":function($event){var $$selectedVal = Array.prototype.filter.call($event.target.options,function(o){return o.selected}).map(function(o){var val = \"_value\" in o ? o._value : o.value;return val}); _vm.selectedType=$event.target.multiple ? $$selectedVal : $$selectedVal[0]}}},[_vm._l((_vm.selectBlocksType),function(type){return [_c('optgroup',{attrs:{\"label\":type}},_vm._l((_vm.filteredBlocks(type)),function(block){return _c('option',{domProps:{\"value\":block.name}},[_vm._v(_vm._s(block.title || block.name))])}),0)]})],2)]),_c('button',{on:{\"click\":function($event){$event.stopPropagation();return _vm.addBlock($event)}}},[_vm._v(\"Add\")]),_vm._v(\" | \"),_c('label',{attrs:{\"for\":\"useContextMenu\"}},[_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.useContextMenu),expression:\"useContextMenu\"}],attrs:{\"type\":\"checkbox\",\"id\":\"useContextMenu\"},domProps:{\"checked\":Array.isArray(_vm.useContextMenu)?_vm._i(_vm.useContextMenu,null)>-1:(_vm.useContextMenu)},on:{\"change\":function($event){var $$a=_vm.useContextMenu,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.useContextMenu=$$a.concat([$$v]))}else{$$i>-1&&(_vm.useContextMenu=$$a.slice(0,$$i).concat($$a.slice($$i+1)))}}else{_vm.useContextMenu=$$c}}}}),_vm._v(\"Use right click for Add blocks \")]),_c('ul',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.contextMenu.isShow),expression:\"contextMenu.isShow\"}],ref:\"contextMenu\",style:({top: _vm.contextMenu.top + 'px', left: _vm.contextMenu.left + 'px'}),attrs:{\"id\":\"contextMenu\",\"tabindex\":\"-1\"},on:{\"blur\":_vm.closeContextMenu}},[_vm._l((_vm.selectBlocksType),function(type){return [_c('li',{staticClass:\"label\"},[_vm._v(_vm._s(type))]),_vm._l((_vm.filteredBlocks(type)),function(block){return _c('li',{on:{\"click\":function($event){return _vm.addBlockContextMenu(block.name)}}},[_vm._v(_vm._s(block.title || block.name)+\" \")])})]})],2)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"vue-container\"},[_c('VueLink',{attrs:{\"lines\":_vm.lines}}),_vm._l((_vm.blocks),function(block){return _c('VueBlock',_vm._b({key:block.id,attrs:{\"options\":_vm.optionsForChild},on:{\"update\":_vm.updateScene,\"linkingStart\":function($event){return _vm.linkingStart(block, $event)},\"linkingStop\":function($event){return _vm.linkingStop(block, $event)},\"linkingBreak\":function($event){return _vm.linkingBreak(block, $event)},\"select\":function($event){return _vm.blockSelect(block)},\"delete\":function($event){return _vm.blockDelete(block)}}},'VueBlock',block,false,true))})],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","/**\n * @param element {HTMLElement}\n * @return {{top: number, left: number}}\n */\nexport function getOffsetRect (element) {\n  let box = element.getBoundingClientRect()\n\n  let scrollTop = window.pageYOffset\n  let scrollLeft = window.pageXOffset\n\n  let top = box.top + scrollTop\n  let left = box.left + scrollLeft\n\n  return {top: Math.round(top), left: Math.round(left)}\n}\n\nexport default {\n  getOffsetRect\n}\n","import {getOffsetRect} from './dom'\n\n/**\n * @param event {MouseEvent}\n * @param element {HTMLElement}\n * @return {{x: number, y: number}}\n */\nexport function getMousePosition (element, event) {\n  let mouseX = event.pageX || event.clientX + document.documentElement.scrollLeft\n  let mouseY = event.pageY || event.clientY + document.documentElement.scrollTop\n\n  let offset = getOffsetRect(element)\n  let x = mouseX - offset.left\n  let y = mouseY - offset.top\n\n  return {\n    x: x,\n    y: y\n  }\n}\n\nexport default {\n  getMousePosition\n}\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"vue-block\",class:{selected: _vm.selected},style:(_vm.style)},[_c('header',{style:(_vm.headerStyle)},[_vm._v(\" \"+_vm._s(_vm.title)+\" \"),_c('a',{staticClass:\"delete\",on:{\"click\":_vm.deleteBlock}},[_vm._v(\"x\")])]),_c('div',{staticClass:\"inputs\"},_vm._l((_vm.inputs),function(slot,index){return _c('div',{staticClass:\"input\"},[_c('div',{staticClass:\"circle inputSlot\",class:{active: slot.active},on:{\"mouseup\":function($event){return _vm.slotMouseUp($event, index)},\"mousedown\":function($event){return _vm.slotBreak($event, index)}}}),_vm._v(\" \"+_vm._s(slot.label)+\" \")])}),0),_c('div',{staticClass:\"outputs\"},_vm._l((_vm.outputs),function(slot,index){return _c('div',{staticClass:\"output\"},[_c('div',{staticClass:\"circle\",class:{active: slot.active},on:{\"mousedown\":function($event){return _vm.slotMouseDown($event, index)}}}),_vm._v(\" \"+_vm._s(slot.label)+\" \")])}),0)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"vue-block\" :class=\"{selected: selected}\" :style=\"style\">\n    <header :style=\"headerStyle\">\n      {{title}}\n      <a class=\"delete\" @click=\"deleteBlock\">x</a>\n    </header>\n    <div class=\"inputs\">\n      <div class=\"input\" v-for=\"(slot, index) in inputs\">\n        <div class=\"circle inputSlot\" :class=\"{active: slot.active}\"\n             @mouseup=\"slotMouseUp($event, index)\"\n             @mousedown=\"slotBreak($event, index)\"></div>\n        {{slot.label}}\n      </div>\n    </div>\n    <div class=\"outputs\">\n      <div class=\"output\" v-for=\"(slot, index) in outputs\">\n        <div class=\"circle\" :class=\"{active: slot.active}\"\n             @mousedown=\"slotMouseDown($event, index)\"></div>\n        {{slot.label}}\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n  export default {\n    name: 'VueBlock',\n    props: {\n      x: {\n        type: Number,\n        default: 0,\n        validator: function (val) {\n          return typeof val === 'number'\n        }\n      },\n      y: {\n        type: Number,\n        default: 0,\n        validator: function (val) {\n          return typeof val === 'number'\n        }\n      },\n      selected: Boolean,\n      title: {\n        type: String,\n        default: 'Title'\n      },\n      inputs: Array,\n      outputs: Array,\n\n      options: {\n        type: Object\n      }\n    },\n    created () {\n      this.mouseX = 0\n      this.mouseY = 0\n\n      this.lastMouseX = 0\n      this.lastMouseY = 0\n\n      this.linking = false\n      this.dragging = false\n    },\n    mounted () {\n      document.documentElement.addEventListener('mousemove', this.handleMove, true)\n      document.documentElement.addEventListener('mousedown', this.handleDown, true)\n      document.documentElement.addEventListener('mouseup', this.handleUp, true)\n    },\n    beforeDestroy () {\n      document.documentElement.removeEventListener('mousemove', this.handleMove, true)\n      document.documentElement.removeEventListener('mousedown', this.handleDown, true)\n      document.documentElement.removeEventListener('mouseup', this.handleUp, true)\n    },\n    data () {\n      return {\n        width: this.options.width,\n        hasDragged: false\n      }\n    },\n    methods: {\n      handleMove (e) {\n        this.mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft\n        this.mouseY = e.pageY || e.clientY + document.documentElement.scrollTop\n\n        if (this.dragging && !this.linking) {\n          let diffX = this.mouseX - this.lastMouseX\n          let diffY = this.mouseY - this.lastMouseY\n\n          this.lastMouseX = this.mouseX\n          this.lastMouseY = this.mouseY\n\n          this.moveWithDiff(diffX, diffY)\n\n          this.hasDragged = true\n        }\n      },\n      handleDown (e) {\n        this.mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft\n        this.mouseY = e.pageY || e.clientY + document.documentElement.scrollTop\n\n        this.lastMouseX = this.mouseX\n        this.lastMouseY = this.mouseY\n\n        const target = e.target || e.srcElement\n        if (this.$el.contains(target) && e.which === 1) {\n          this.dragging = true\n\n          this.$emit('select')\n\n          if (e.preventDefault) e.preventDefault()\n        }\n      },\n      handleUp () {\n        if (this.dragging) {\n          this.dragging = false\n\n          if (this.hasDragged) {\n            this.save()\n            this.hasDragged = false\n          }\n        }\n\n        if (this.linking) {\n          this.linking = false\n        }\n      },\n      // Slots\n      slotMouseDown (e, index) {\n        this.linking = true\n\n        this.$emit('linkingStart', index)\n        if (e.preventDefault) e.preventDefault()\n      },\n      slotMouseUp (e, index) {\n        this.$emit('linkingStop', index)\n        if (e.preventDefault) e.preventDefault()\n      },\n      slotBreak (e, index) {\n        this.linking = true\n\n        this.$emit('linkingBreak', index)\n        if (e.preventDefault) e.preventDefault()\n      },\n      save () {\n        this.$emit('update')\n      },\n      deleteBlock () {\n        this.$emit('delete')\n      },\n      moveWithDiff (diffX, diffY) {\n        let left = this.x + diffX / this.options.scale\n        let top = this.y + diffY / this.options.scale\n\n        this.$emit('update:x', left)\n        this.$emit('update:y', top)\n      }\n    },\n    computed: {\n      style () {\n        return {\n          top: this.options.center.y + this.y * this.options.scale + 'px',\n          left: this.options.center.x + this.x * this.options.scale + 'px',\n          width: this.width + 'px',\n          transform: 'scale(' + (this.options.scale + '') + ')',\n          transformOrigin: 'top left'\n        }\n      },\n      headerStyle () {\n        return {\n          height: this.options.titleHeight + 'px'\n        }\n      }\n    }\n  }\n</script>\n\n<style lang=\"less\" scoped>\n  @blockBorder: 1px;\n\n  @ioPaddingInner: 2px 0;\n  @ioHeight: 16px;\n  @ioFontSize: 14px;\n\n  @circleBorder: 1px;\n  @circleSize: 10px;\n  @circleMargin: 2px; // left/right\n\n  @circleNewColor: #00FF00;\n  @circleRemoveColor: #FF0000;\n  @circleConnectedColor: #FFFF00;\n\n  .vue-block {\n    position: absolute;\n    box-sizing: border-box;\n    border: @blockBorder solid black;\n    background: white;\n    z-index: 1;\n    opacity: 0.9;\n    cursor: move;\n\n    &.selected {\n      border: @blockBorder solid red;\n      z-index: 2;\n    }\n\n    > header {\n      background: #bfbfbf;\n      text-align: center;\n\n      > .delete {\n        color: red;\n        cursor: pointer;\n        float: right;\n        position: absolute;\n        right: 5px;\n      }\n    }\n\n    .inputs, .outputs {\n      padding: @ioPaddingInner;\n\n      display: block;\n      width: 50%;\n\n      > * {\n        width: 100%;\n      }\n    }\n\n    .circle {\n      box-sizing: border-box;\n      margin-top: @ioHeight / 2 - @circleSize / 2;\n\n      width: @circleSize;\n      height: @circleSize;\n\n      border: @circleBorder solid rgba(0, 0, 0, 0.5);\n      border-radius: 100%;\n\n      cursor: crosshair;\n      &.active {\n        background: @circleConnectedColor;\n      }\n    }\n\n    .inputs {\n      float: left;\n      text-align: left;\n\n      margin-left: -(@circleSize/2 + @blockBorder);\n    }\n\n    .input, .output {\n      height: @ioHeight;\n      overflow: hidden;\n      font-size: @ioFontSize;\n\n      &:last-child {\n      }\n    }\n\n    .input {\n      float: left;\n\n      .circle {\n        float: left;\n        margin-right: @circleMargin;\n\n        &:hover {\n          background: @circleNewColor;\n\n          &.active {\n            background: @circleRemoveColor;\n          }\n        }\n      }\n    }\n\n    .outputs {\n      float: right;\n      text-align: right;\n\n      margin-right: -(@circleSize/2 + @blockBorder);\n    }\n\n    .output {\n      float: right;\n\n      .circle {\n        float: right;\n        margin-left: @circleMargin;\n\n        &:hover {\n          background: @circleNewColor;\n        }\n      }\n    }\n  }\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueBlock.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueBlock.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./VueBlock.vue?vue&type=template&id=9a4bcc94&scoped=true&\"\nimport script from \"./VueBlock.vue?vue&type=script&lang=js&\"\nexport * from \"./VueBlock.vue?vue&type=script&lang=js&\"\nimport style0 from \"./VueBlock.vue?vue&type=style&index=0&id=9a4bcc94&lang=less&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"9a4bcc94\",\n  null\n  \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('svg',{attrs:{\"width\":\"100%\",\"height\":\"100%\"}},[_vm._l((_vm.renderedPathes),function(p){return _c('g',[(_vm.outline)?_c('path',{style:(p.outlineStyle),attrs:{\"d\":p.data}}):_vm._e(),_c('path',{style:(p.style),attrs:{\"d\":p.data}})])}),_c('g',_vm._l((_vm.renderedArrows),function(a){return _c('path',{style:(a.style),attrs:{\"d\":\"M -1 -1 L 0 1 L 1 -1 z\",\"transform\":a.transform}})}),0)],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <svg width=\"100%\" height=\"100%\">\n    <g v-for=\"p in renderedPathes\" >\n      <path v-if=\"outline\" :d=\"p.data\" :style=\"p.outlineStyle\"></path>\n      <path :d=\"p.data\" :style=\"p.style\"></path>\n    </g>\n    <g>\n      <path v-for=\"a in renderedArrows\"\n        d=\"M -1 -1 L 0 1 L 1 -1 z\"\n        :style=\"a.style\"\n        :transform=\"a.transform\"></path>\n    </g>\n  </svg>\n</template>\n\n<script>\n  export default {\n    props: {\n      lines: {\n        type: Array,\n        default () {\n          return []\n        }\n      },\n      outline: {\n        type: Boolean,\n        default: false\n      }\n    },\n    methods: {\n      distance (x1, y1, x2, y2) {\n        return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1))\n      },\n      computeConnectionPoint (x1, y1, x2, y2, t) {\n        let dist = this.distance(x1, y1, x2, y2)\n        let p0 = {x: x1, y: y1}\n        let p1 = {x: x1 + dist * 0.25, y: y1}\n        let p2 = {x: x2 - dist * 0.25, y: y2}\n        let p3 = {x: x2, y: y2}\n\n        let c1 = (1 - t) * (1 - t) * (1 - t)\n        let c2 = 3 * ((1 - t) * (1 - t)) * t\n        let c3 = 3 * (1 - t) * (t * t)\n        let c4 = t * t * t\n\n        let x = c1 * p0.x + c2 * p1.x + c3 * p2.x + c4 * p3.x\n        let y = c1 * p0.y + c2 * p1.y + c3 * p2.y + c4 * p3.y\n        return {x: x, y: y}\n      }\n    },\n    computed: {\n      renderedPathes () {\n        if (!this.lines) {\n          return []\n        }\n\n        let pathes = []\n        this.lines.forEach(l => {\n          let dist = this.distance(l.x1, l.y1, l.x2, l.y2) * 0.25\n          pathes.push({\n            data: `M ${l.x1}, ${l.y1} C ${(l.x1 + dist)}, ${l.y1}, ${(l.x2 - dist)}, ${l.y2}, ${l.x2}, ${l.y2}`,\n            style: l.style,\n            outlineStyle: l.outlineStyle\n          })\n        })\n\n        return pathes\n      },\n      renderedArrows () {\n        if (!this.lines) {\n          return []\n        }\n\n        let arrows = []\n        this.lines.forEach(l => {\n          // l.x1, l.y1, l.x2, l.y2\n          let pos = this.computeConnectionPoint(l.x1, l.y1, l.x2, l.y2, 0.5)\n          let pos2 = this.computeConnectionPoint(l.x1, l.y1, l.x2, l.y2, 0.51)\n\n          let angle = -Math.atan2(pos2.x - pos.x, pos2.y - pos.y)\n          let degrees = (angle >= 0 ? angle : (2 * Math.PI + angle)) * 180 / Math.PI\n\n          arrows.push({\n            transform: `translate(${pos.x}, ${pos.y}) rotate(${degrees})`,\n            style: {\n              stroke: l.style.stroke,\n              strokeWidth: l.style.strokeWidth * 2,\n              fill: l.style.stroke\n            }\n          })\n        })\n\n        return arrows\n      }\n    }\n  }\n</script>\n\n<style scoped>\n\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueLink.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueLink.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./VueLink.vue?vue&type=template&id=56aa24a8&scoped=true&\"\nimport script from \"./VueLink.vue?vue&type=script&lang=js&\"\nexport * from \"./VueLink.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"56aa24a8\",\n  null\n  \n)\n\nexport default component.exports","<template>\n  <div class=\"vue-container\">\n    <VueLink :lines=\"lines\"/>\n    <VueBlock v-for=\"block in blocks\"\n              :key=\"block.id\"\n              v-bind.sync=\"block\"\n              :options=\"optionsForChild\"\n              @update=\"updateScene\"\n              @linkingStart=\"linkingStart(block, $event)\"\n              @linkingStop=\"linkingStop(block, $event)\"\n              @linkingBreak=\"linkingBreak(block, $event)\"\n              @select=\"blockSelect(block)\"\n              @delete=\"blockDelete(block)\"\n    />\n  </div>\n</template>\n\n<script>\n  import merge from 'deepmerge'\n  import mouseHelper from '../helpers/mouse'\n\n  import VueBlock from './VueBlock'\n  import VueLink from './VueLink'\n\n  export default {\n    name: 'VueBlockContainer',\n    components: {\n      VueBlock,\n      VueLink\n    },\n    props: {\n      blocksContent: {\n        type: Array,\n        default () {\n          return []\n        }\n      },\n      scene: {\n        type: Object,\n        default: {blocks: [], links: [], container: {}}\n      },\n      options: {\n        type: Object\n      }\n    },\n    mounted () {\n      document.documentElement.addEventListener('mousemove', this.handleMove, true)\n      document.documentElement.addEventListener('mousedown', this.handleDown, true)\n      document.documentElement.addEventListener('mouseup', this.handleUp, true)\n      document.documentElement.addEventListener('wheel', this.handleWheel, true)\n\n      this.centerX = this.$el.clientWidth / 2\n      this.centerY = this.$el.clientHeight / 2\n\n      this.importBlocksContent()\n      this.importScene()\n    },\n    beforeDestroy () {\n      document.documentElement.removeEventListener('mousemove', this.handleMove, true)\n      document.documentElement.removeEventListener('mousedown', this.handleDown, true)\n      document.documentElement.removeEventListener('mouseup', this.handleUp, true)\n      document.documentElement.removeEventListener('wheel', this.handleWheel, true)\n    },\n    created () {\n      this.mouseX = 0\n      this.mouseY = 0\n\n      this.lastMouseX = 0\n      this.lastMouseY = 0\n\n      this.minScale = 0.2\n      this.maxScale = 5\n\n      this.linking = false\n      this.linkStartData = null\n\n      this.inputSlotClassName = 'inputSlot'\n\n      this.defaultScene = {\n        blocks: [],\n        links: [],\n        container: {}\n      }\n    },\n    data () {\n      return {\n        dragging: false,\n        //\n        centerX: 0,\n        centerY: 0,\n        scale: 1,\n        //\n        nodes: [],\n        blocks: [],\n        links: [],\n        //\n        tempLink: null,\n        selectedBlock: null,\n        hasDragged: false\n      }\n    },\n    computed: {\n      optionsForChild () {\n        return {\n          width: 200,\n          titleHeight: 20,\n          scale: this.scale,\n          inputSlotClassName: this.inputSlotClassName,\n          center: {\n            x: this.centerX,\n            y: this.centerY\n          }\n        }\n      },\n      container () {\n        return {\n          centerX: this.centerX,\n          centerY: this.centerY,\n          scale: this.scale\n        }\n      },\n      // Links calculate\n      lines () {\n        let lines = []\n\n        for (let link of this.links) {\n          let originBlock = this.blocks.find(block => {\n            return block.id === link.originID\n          })\n\n          let targetBlock = this.blocks.find(block => {\n            return block.id === link.targetID\n          })\n\n          if (!originBlock || !targetBlock) {\n            console.log('Remove invalid link', link)\n            this.removeLink(link.id)\n            continue\n          }\n\n          if (originBlock.id === targetBlock.id) {\n            console.log('Loop detected, remove link', link)\n            this.removeLink(link.id)\n            continue\n          }\n\n          let originLinkPos = this.getConnectionPos(originBlock, link.originSlot, false)\n          let targetLinkPos = this.getConnectionPos(targetBlock, link.targetSlot, true)\n\n          if (!originLinkPos || !targetLinkPos) {\n            console.log('Remove invalid link (slot not exist)', link)\n            this.removeLink(link.id)\n            continue\n          }\n\n          let x1 = originLinkPos.x\n          let y1 = originLinkPos.y\n\n          let x2 = targetLinkPos.x\n          let y2 = targetLinkPos.y\n\n          lines.push({\n            x1: x1,\n            y1: y1,\n            x2: x2,\n            y2: y2,\n            style: {\n              stroke: '#F85',\n              strokeWidth: 4 * this.scale,\n              fill: 'none'\n            },\n            outlineStyle: {\n              stroke: '#666',\n              strokeWidth: 6 * this.scale,\n              strokeOpacity: 0.6,\n              fill: 'none'\n            }\n          })\n        }\n\n        if (this.tempLink) {\n          this.tempLink.style = {\n            stroke: '#8f8f8f',\n            strokeWidth: 4 * this.scale,\n            fill: 'none'\n          }\n\n          lines.push(this.tempLink)\n        }\n\n        return lines\n      }\n    },\n    methods: {\n      // Events\n      /** @param e {MouseEvent} */\n      handleMove (e) {\n        let mouse = mouseHelper.getMousePosition(this.$el, e)\n        this.mouseX = mouse.x\n        this.mouseY = mouse.y\n\n        if (this.dragging) {\n          let diffX = this.mouseX - this.lastMouseX\n          let diffY = this.mouseY - this.lastMouseY\n\n          this.lastMouseX = this.mouseX\n          this.lastMouseY = this.mouseY\n\n          this.centerX += diffX\n          this.centerY += diffY\n\n          this.hasDragged = true\n        }\n\n        if (this.linking && this.linkStartData) {\n          let linkStartPos = this.getConnectionPos(this.linkStartData.block, this.linkStartData.slotNumber, false)\n          this.tempLink = {\n            x1: linkStartPos.x,\n            y1: linkStartPos.y,\n            x2: this.mouseX,\n            y2: this.mouseY\n          }\n        }\n      },\n      handleDown (e) {\n        const target = e.target || e.srcElement\n        if ((target === this.$el || target.matches('svg, svg *')) && e.which === 1) {\n          this.dragging = true\n\n          let mouse = mouseHelper.getMousePosition(this.$el, e)\n          this.mouseX = mouse.x\n          this.mouseY = mouse.y\n\n          this.lastMouseX = this.mouseX\n          this.lastMouseY = this.mouseY\n\n          this.deselectAll()\n          if (e.preventDefault) e.preventDefault()\n        }\n      },\n      handleUp (e) {\n        const target = e.target || e.srcElement\n\n        if (this.dragging) {\n          this.dragging = false\n\n          if (this.hasDragged) {\n            this.updateScene()\n            this.hasDragged = false\n          }\n        }\n\n        if (this.$el.contains(target) && (typeof target.className !== 'string' || target.className.indexOf(this.inputSlotClassName) === -1)) {\n          this.linking = false\n          this.tempLink = null\n          this.linkStartData = null\n        }\n      },\n      handleWheel (e) {\n        const target = e.target || e.srcElement\n        if (this.$el.contains(target)) {\n          if (e.preventDefault) e.preventDefault()\n\n          let deltaScale = Math.pow(1.1, e.deltaY * -0.01)\n          this.scale *= deltaScale\n\n          if (this.scale < this.minScale) {\n            this.scale = this.minScale\n            return\n          } else if (this.scale > this.maxScale) {\n            this.scale = this.maxScale\n            return\n          }\n\n          let zoomingCenter = {\n            x: this.mouseX,\n            y: this.mouseY\n          }\n\n          let deltaOffsetX = (zoomingCenter.x - this.centerX) * (deltaScale - 1)\n          let deltaOffsetY = (zoomingCenter.y - this.centerY) * (deltaScale - 1)\n\n          this.centerX -= deltaOffsetX\n          this.centerY -= deltaOffsetY\n\n          this.updateScene()\n        }\n      },\n      // Processing\n      getConnectionPos (block, slotNumber, isInput) {\n        if (!block || slotNumber === -1) {\n          return undefined\n        }\n\n        let x = 0\n        let y = 0\n\n        x += block.x\n        y += block.y\n\n        y += this.optionsForChild.titleHeight\n\n        if (isInput && block.inputs.length > slotNumber) {\n        } else if (!isInput && block.outputs.length > slotNumber) {\n          x += this.optionsForChild.width\n        } else {\n          console.error('slot ' + slotNumber + ' not found, is input: ' + isInput, block)\n          return undefined\n        }\n\n        // (height / 2 + blockBorder + padding)\n        y += (16 / 2 + 1 + 2)\n        //  + (height * slotNumber)\n        y += (16 * slotNumber)\n\n        x *= this.scale\n        y *= this.scale\n\n        x += this.centerX\n        y += this.centerY\n\n        return {x: x, y: y}\n      },\n      // Linking\n      linkingStart (block, slotNumber) {\n        this.linkStartData = {block: block, slotNumber: slotNumber}\n        let linkStartPos = this.getConnectionPos(this.linkStartData.block, this.linkStartData.slotNumber, false)\n        this.tempLink = {\n          x1: linkStartPos.x,\n          y1: linkStartPos.y,\n          x2: this.mouseX,\n          y2: this.mouseY\n        }\n\n        this.linking = true\n      },\n      linkingStop (targetBlock, slotNumber) {\n        if (this.linkStartData && targetBlock && slotNumber > -1) {\n          this.links = this.links.filter(value => {\n            return !(value.targetID === targetBlock.id && value.targetSlot === slotNumber)\n          })\n\n          let maxID = Math.max(0, ...this.links.map(function (o) {\n            return o.id\n          }))\n\n          // skip if looping\n          if (this.linkStartData.block.id !== targetBlock.id) {\n            this.links.push({\n              id: maxID + 1,\n              originID: this.linkStartData.block.id,\n              originSlot: this.linkStartData.slotNumber,\n              targetID: targetBlock.id,\n              targetSlot: slotNumber\n            })\n            this.updateScene()\n          }\n        }\n\n        this.linking = false\n        this.tempLink = null\n        this.linkStartData = null\n      },\n      linkingBreak (targetBlock, slotNumber) {\n        if (targetBlock && slotNumber > -1) {\n          let findLink = this.links.find(value => {\n            return value.targetID === targetBlock.id && value.targetSlot === slotNumber\n          })\n\n          if (findLink) {\n            let findBlock = this.blocks.find(value => {\n              return value.id === findLink.originID\n            })\n\n            this.links = this.links.filter(value => {\n              return !(value.targetID === targetBlock.id && value.targetSlot === slotNumber)\n            })\n\n            this.linkingStart(findBlock, findLink.originSlot)\n\n            this.updateScene()\n          }\n        }\n      },\n      removeLink (linkID) {\n        this.links = this.links.filter(value => {\n          return !(value.id === linkID)\n        })\n      },\n      // Blocks\n      addNewBlock (nodeName, x, y) {\n        let maxID = Math.max(0, ...this.blocks.map(function (o) {\n          return o.id\n        }))\n\n        let node = this.nodes.find(n => {\n          return n.name === nodeName\n        })\n\n        if (!node) {\n          return\n        }\n        let block = this.createBlock(node, maxID + 1)\n\n        // if x or y not set, place block to center\n        if (x === undefined || y === undefined) {\n          x = (this.$el.clientWidth / 2 - this.centerX) / this.scale\n          y = (this.$el.clientHeight / 2 - this.centerY) / this.scale\n        } else {\n          x = (x - this.centerX) / this.scale\n          y = (y - this.centerY) / this.scale\n        }\n\n        block.x = x\n        block.y = y\n        this.blocks.push(block)\n\n        this.updateScene()\n      },\n      createBlock (node, id) {\n        let inputs = []\n        let outputs = []\n        let values = {}\n\n        node.fields.forEach(field => {\n          if (field.attr === 'input') {\n            inputs.push({\n              name: field.name,\n              label: field.label || field.name\n            })\n          } else if (field.attr === 'output') {\n            outputs.push({\n              name: field.name,\n              label: field.label || field.name\n            })\n          } else {\n            if (!values[field.attr]) {\n              values[field.attr] = {}\n            }\n\n            let newField = merge({}, field)\n            delete newField['name']\n            delete newField['attr']\n\n            if (!values[field.attr][field.name]) {\n              values[field.attr][field.name] = {}\n            }\n\n            values[field.attr][field.name] = newField\n          }\n        })\n\n        return {\n          id: id,\n          x: 0,\n          y: 0,\n          selected: false,\n          name: node.name,\n          title: node.title || node.name,\n          inputs: inputs,\n          outputs: outputs,\n          values: values\n        }\n      },\n      deselectAll (withoutID = null) {\n        this.blocks.forEach((value) => {\n          if (value.id !== withoutID && value.selected) {\n            this.blockDeselect(value)\n          }\n        })\n      },\n      // Events\n      blockSelect (block) {\n        block.selected = true\n        this.selectedBlock = block\n        this.deselectAll(block.id)\n        this.$emit('blockSelect', block)\n      },\n      blockDeselect (block) {\n        block.selected = false\n\n        if (block &&\n          this.selectedBlock &&\n          this.selectedBlock.id === block.id\n        ) {\n          this.selectedBlock = null\n        }\n\n        this.$emit('blockDeselect', block)\n      },\n      blockDelete (block) {\n        if (block.selected) {\n          this.blockDeselect(block)\n        }\n        this.links.forEach(l => {\n          if (l.originID === block.id || l.targetID === block.id) {\n            this.removeLink(l.id)\n          }\n        })\n        this.blocks = this.blocks.filter(b => {\n          return b.id !== block.id\n        })\n        this.updateScene()\n      },\n      //\n      prepareBlocks (blocks) {\n        return blocks.map(block => {\n          let node = this.nodes.find(n => {\n            return n.name === block.name\n          })\n\n          if (!node) {\n            return null\n          }\n\n          let newBlock = this.createBlock(node, block.id)\n\n          newBlock = merge(newBlock, block, {\n            arrayMerge: (d, s) => {\n              return s.length === 0 ? d : s\n            }\n          })\n\n          return newBlock\n        }).filter(b => {\n          return !!b\n        })\n      },\n      prepareBlocksLinking (blocks, links) {\n        if (!blocks) {\n          return []\n        }\n\n        let newBlocks = []\n\n        blocks.forEach(block => {\n          let inputs = links.filter(link => {\n            return link.targetID === block.id\n          })\n\n          let outputs = links.filter(link => {\n            return link.originID === block.id\n          })\n\n          block.inputs.forEach((s, index) => {\n            // is linked\n            block.inputs[index].active = inputs.some(i => i.targetSlot === index)\n          })\n\n          block.outputs.forEach((s, index) => {\n            // is linked\n            block.outputs[index].active = outputs.some(i => i.originSlot === index)\n          })\n\n          newBlocks.push(block)\n        })\n\n        return newBlocks\n      },\n      importBlocksContent () {\n        if (this.blocksContent) {\n          this.nodes = merge([], this.blocksContent)\n        }\n      },\n      importScene () {\n        let scene = merge(this.defaultScene, this.scene)\n\n        let blocks = this.prepareBlocks(scene.blocks)\n        blocks = this.prepareBlocksLinking(blocks, scene.links)\n\n        // set last selected after update blocks from props\n        if (this.selectedBlock) {\n          let block = blocks.find(b => this.selectedBlock.id === b.id)\n          if (block) {\n            block.selected = true\n          }\n        }\n\n        this.blocks = blocks\n        this.links = merge([], scene.links)\n\n        let container = scene.container\n        if (container.centerX) {\n          this.centerX = container.centerX\n        }\n        if (container.centerY) {\n          this.centerY = container.centerY\n        }\n        if (container.scale) {\n          this.scale = container.scale\n        }\n      },\n      exportScene () {\n        let clonedBlocks = merge([], this.blocks)\n        let blocks = clonedBlocks.map(value => {\n          delete value['inputs']\n          delete value['outputs']\n          delete value['selected']\n\n          return value\n        })\n\n        return {\n          blocks: blocks,\n          links: this.links,\n          container: this.container\n        }\n      },\n      updateScene () {\n        this.$emit('update:scene', this.exportScene())\n      }\n    },\n    watch: {\n      blocksContent () {\n        this.importBlocksContent()\n      },\n      scene () {\n        this.importScene()\n      }\n    }\n  }\n</script>\n\n<style lang=\"less\" scoped>\n  .vue-container {\n    position: relative;\n    overflow: hidden;\n    box-sizing: border-box;\n  }\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueBlocksContainer.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueBlocksContainer.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./VueBlocksContainer.vue?vue&type=template&id=cd11bc44&scoped=true&\"\nimport script from \"./VueBlocksContainer.vue?vue&type=script&lang=js&\"\nexport * from \"./VueBlocksContainer.vue?vue&type=script&lang=js&\"\nimport style0 from \"./VueBlocksContainer.vue?vue&type=style&index=0&id=cd11bc44&lang=less&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"cd11bc44\",\n  null\n  \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"blocks-properties\"},[_vm._l((_vm.properties),function(p){return _c('div',{staticClass:\"property\"},[_c('label',{attrs:{\"for\":p.name}},[_vm._v(_vm._s(p.label||p.name)+\":\")]),_c('br'),_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(p.value),expression:\"p.value\"}],attrs:{\"type\":\"text\"},domProps:{\"value\":(p.value)},on:{\"input\":function($event){if($event.target.composing){ return; }_vm.$set(p, \"value\", $event.target.value)}}})])}),_c('button',{on:{\"click\":function($event){$event.preventDefault();return _vm.save($event)}}},[_vm._v(\"Save\")])],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"blocks-properties\">\n    <div class=\"property\" v-for=\"p in properties\">\n      <label :for=\"p.name\">{{p.label||p.name}}:</label>\n      <br>\n      <input type=\"text\" v-model=\"p.value\">\n    </div>\n    <button @click.prevent=\"save\">Save</button>\n  </div>\n</template>\n\n<script>\n  export default {\n    name: 'VueBlockProperty',\n    props: ['property'],\n    data () {\n      return {\n        properties: []\n      }\n    },\n    methods: {\n      loadProperties () {\n        this.properties = this.property\n      },\n      save () {\n        this.$emit('save', this.properties)\n      }\n    },\n    watch: {\n      property () {\n        this.loadProperties()\n      }\n    }\n  }\n</script>\n\n<style lang=\"less\" scoped>\n  .blocks-properties {\n    position: absolute;\n    right: 0;\n    top: 0;\n\n    width: 300px;\n    min-height: 200px;\n    box-sizing: border-box;\n    padding: 10px;\n\n    background: #ffffff;\n    border: 1px solid red;\n    .property {\n\n    }\n  }\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueBlockProperty.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueBlockProperty.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./VueBlockProperty.vue?vue&type=template&id=d11cfc5a&scoped=true&\"\nimport script from \"./VueBlockProperty.vue?vue&type=script&lang=js&\"\nexport * from \"./VueBlockProperty.vue?vue&type=script&lang=js&\"\nimport style0 from \"./VueBlockProperty.vue?vue&type=style&index=0&id=d11cfc5a&lang=less&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"d11cfc5a\",\n  null\n  \n)\n\nexport default component.exports","<template>\n  <div id=\"app\">\n    <VueBlocksContainer\n            @contextmenu.native=\"showContextMenu\"\n            @click.native=\"closeContextMenu\"\n            ref=\"container\"\n            :blocksContent=\"blocks\"\n            :scene.sync=\"scene\"\n            @blockSelect=\"selectBlock\"\n            @blockDeselect=\"deselectBlock\"\n            class=\"container\"/>\n    <VueBlockProperty :property=\"selectedBlockProperty\" @save=\"saveProperty\"/>\n    <label>\n      <select name=\"type\" v-model=\"selectedType\">\n        <template v-for=\"type in selectBlocksType\">\n          <optgroup :label=\"type\">\n            <option v-for=\"block in filteredBlocks(type)\" :value=\"block.name\">{{block.title || block.name}}</option>\n          </optgroup>\n        </template>\n      </select>\n    </label>\n    <button @click.stop=\"addBlock\">Add</button>\n    |\n    <label for=\"useContextMenu\">\n      <input type=\"checkbox\" v-model=\"useContextMenu\" id=\"useContextMenu\">Use right click for Add blocks\n    </label>\n\n    <ul id=\"contextMenu\" ref=\"contextMenu\" tabindex=\"-1\" v-show=\"contextMenu.isShow\"\n        @blur=\"closeContextMenu\"\n        :style=\"{top: contextMenu.top + 'px', left: contextMenu.left + 'px'}\">\n      <template v-for=\"type in selectBlocksType\">\n        <li class=\"label\">{{type}}</li>\n        <li v-for=\"block in filteredBlocks(type)\"\n            @click=\"addBlockContextMenu(block.name)\">{{block.title || block.name}}\n        </li>\n      </template>\n    </ul>\n  </div>\n</template>\n\n<script>\n  import merge from 'deepmerge'\n\n  import VueBlocksContainer from './components/VueBlocksContainer'\n  import VueBlockProperty from './components/VueBlockProperty'\n  import domHelper from './helpers/dom'\n\n  export default {\n    name: 'App',\n    components: {\n      VueBlocksContainer,\n      VueBlockProperty\n    },\n    data: function () {\n      return {\n        blocks: [\n          {\n            name: 'text',\n            title: 'Text',\n            family: 'Animations',\n            description: 'Show text',\n            fields: [\n              {\n                name: 'text',\n                label: 'Text',\n                type: 'string',\n                attr: 'property'\n              },\n              {\n                name: 'delay',\n                label: 'Delay (s)',\n                type: 'number',\n                attr: 'property'\n              },\n              {\n                name: 'Show',\n                type: 'event',\n                attr: 'input'\n              },\n              {\n                name: 'Hide',\n                type: 'event',\n                attr: 'input'\n              },\n              {\n                name: 'onShow',\n                type: 'event',\n                attr: 'output'\n              },\n              {\n                name: 'onHide',\n                type: 'event',\n                attr: 'output'\n              }\n            ]\n          },\n          {\n            name: 'animation',\n            title: 'Animation',\n            family: 'Animations',\n            description: 'Show animation',\n            fields: [\n              {\n                name: 'animation',\n                label: 'Animation',\n                type: 'animation',\n                attr: 'property'\n              },\n              {\n                name: 'Play',\n                type: 'event',\n                attr: 'input'\n              },\n              {\n                name: 'Stop',\n                type: 'event',\n                attr: 'input'\n              },\n              {\n                name: 'onEnd',\n                type: 'event',\n                attr: 'output'\n              }\n            ]\n          },\n          {\n            name: 'Chat message',\n            family: 'Events',\n            description: '',\n            fields: [\n              {\n                name: 'message',\n                label: 'Activation message',\n                type: 'string',\n                attr: 'property'\n              },\n              {\n                name: 'onMessage',\n                type: 'event',\n                attr: 'output'\n              }\n            ]\n          },\n          {\n            name: 'delay',\n            title: 'Delay',\n            family: 'Time',\n            description: '',\n            fields: [\n              {\n                name: 'delay',\n                label: 'Delay (s)',\n                type: 'number',\n                attr: 'property',\n                value: 1.0\n              },\n              {\n                name: 'input',\n                type: 'event',\n                attr: 'input'\n              },\n              {\n                name: 'output',\n                type: 'event',\n                attr: 'output'\n              }\n            ]\n          },\n          {\n            name: 'shortcuts',\n            title: 'Shortcuts',\n            family: 'Events',\n            description: 'Press shortcut for call event',\n            fields: [\n              {\n                name: 'keys',\n                label: 'Activation keys',\n                type: 'keys',\n                attr: 'property'\n              },\n              {\n                name: 'onPress',\n                type: 'event',\n                attr: 'output'\n              }\n            ]\n          },\n          {\n            name: 'splitter',\n            title: 'Splitter',\n            family: 'Helpers',\n            description: 'Press shortcut for call event',\n            fields: [\n              {\n                name: 'input',\n                type: 'event',\n                attr: 'input'\n              },\n              {\n                name: 'output',\n                type: 'event',\n                attr: 'output'\n              },\n              {\n                name: 'output',\n                type: 'event',\n                attr: 'output'\n              },\n              {\n                name: 'output',\n                type: 'event',\n                attr: 'output'\n              },\n              {\n                name: 'output',\n                type: 'event',\n                attr: 'output'\n              }\n            ]\n          }\n        ],\n        scene: {\n          blocks: [\n            {\n              id: 2,\n              x: -700,\n              y: -69,\n              name: 'Chat message',\n              title: 'Chat message',\n              values: {\n                property: [\n                  {\n                    name: 'message',\n                    type: 'string'\n                  }\n                ]\n              }\n            },\n            {\n              id: 4,\n              x: -157,\n              y: -68.5,\n              name: 'text',\n              title: 'Text',\n              values: {\n                property: {\n                  text: {\n                    label: 'Text',\n                    type: 'string'\n                  }\n                }\n              }\n            },\n            {\n              id: 5,\n              x: 136,\n              y: -48.5,\n              name: 'text',\n              title: 'Text',\n              values: {\n                property: {\n                  text: {\n                    label: 'Text',\n                    type: 'string'\n                  }\n                }\n              }\n            },\n            {\n              id: 6,\n              x: -440,\n              y: -15.5,\n              name: 'delay',\n              title: 'Delay',\n              values: {\n                property: {\n                  delay: {\n                    label: 'Delay (s)',\n                    type: 'number',\n                    value: 1\n                  }\n                }\n              }\n            },\n            {\n              id: 7,\n              x: -694,\n              y: 60.5,\n              name: 'shortcuts',\n              title: 'Shortcuts',\n              values: {\n                property: {\n                  keys: {\n                    label: 'Activation keys',\n                    type: 'keys'\n                  }\n                }\n              }\n            },\n            {\n              id: 8,\n              x: -163,\n              y: 59.5,\n              name: 'text',\n              title: 'Text',\n              values: {\n                property: {\n                  text: {\n                    label: 'Text',\n                    type: 'string'\n                  }\n                }\n              }\n            },\n            {\n              id: 9,\n              x: -429,\n              y: 125.5,\n              name: 'delay',\n              title: 'Delay',\n              values: {\n                property: {\n                  delay: {\n                    label: 'Delay (s)',\n                    type: 'number',\n                    value: 1\n                  }\n                }\n              }\n            },\n            {\n              id: 10,\n              x: 126,\n              y: 127.5,\n              name: 'text',\n              title: 'Text',\n              values: {\n                property: {\n                  text: {\n                    label: 'Text',\n                    type: 'string'\n                  }\n                }\n              }\n            },\n            {\n              id: 11,\n              x: -856,\n              y: 252.5,\n              name: 'shortcuts',\n              title: 'Shortcuts',\n              values: {\n                property: {\n                  keys: {\n                    label: 'Activation keys',\n                    type: 'keys'\n                  }\n                }\n              }\n            },\n            {\n              id: 12,\n              x: -616,\n              y: 319.5,\n              name: 'delay',\n              title: 'Delay',\n              values: {\n                property: {\n                  delay: {\n                    label: 'Delay (s)',\n                    type: 'number',\n                    value: 1\n                  }\n                }\n              }\n            },\n            {\n              id: 13,\n              x: -381,\n              y: 252.5,\n              name: 'text',\n              title: 'Text',\n              values: {\n                property: {\n                  text: {\n                    label: 'Text',\n                    type: 'string'\n                  }\n                }\n              }\n            },\n            {\n              id: 14,\n              x: 166,\n              y: 266.5,\n              name: 'text',\n              title: 'Text',\n              values: {\n                property: {\n                  text: {\n                    label: 'Text',\n                    type: 'string'\n                  }\n                }\n              }\n            },\n            {\n              id: 15,\n              x: -149,\n              y: 269.5,\n              name: 'delay',\n              title: 'Delay',\n              values: {\n                property: {\n                  delay: {\n                    label: 'Delay (s)',\n                    type: 'number',\n                    value: 1\n                  }\n                }\n              }\n            },\n            {\n              id: 16,\n              x: 413,\n              y: 267.5,\n              name: 'animation',\n              title: 'Animation',\n              values: {\n                property: {\n                  animation: {\n                    label: 'Animation',\n                    type: 'animation'\n                  }\n                }\n              }\n            },\n            {\n              id: 17,\n              x: 13,\n              y: 380.5,\n              name: 'delay',\n              title: 'Delay',\n              values: {\n                property: {\n                  delay: {\n                    label: 'Delay (s)',\n                    type: 'number',\n                    value: 1\n                  }\n                }\n              }\n            }\n          ],\n          links: [\n            {\n              id: 3,\n              originID: 2,\n              originSlot: 0,\n              targetID: 4,\n              targetSlot: 0\n            },\n            {\n              id: 6,\n              originID: 7,\n              originSlot: 0,\n              targetID: 8,\n              targetSlot: 0\n            },\n            {\n              id: 7,\n              originID: 7,\n              originSlot: 0,\n              targetID: 9,\n              targetSlot: 0\n            },\n            {\n              id: 8,\n              originID: 9,\n              originSlot: 0,\n              targetID: 10,\n              targetSlot: 0\n            },\n            {\n              id: 9,\n              originID: 9,\n              originSlot: 0,\n              targetID: 8,\n              targetSlot: 1\n            },\n            {\n              id: 10,\n              originID: 2,\n              originSlot: 0,\n              targetID: 6,\n              targetSlot: 0\n            },\n            {\n              id: 11,\n              originID: 6,\n              originSlot: 0,\n              targetID: 4,\n              targetSlot: 1\n            },\n            {\n              id: 12,\n              originID: 4,\n              originSlot: 1,\n              targetID: 5,\n              targetSlot: 0\n            },\n            {\n              id: 13,\n              originID: 11,\n              originSlot: 0,\n              targetID: 13,\n              targetSlot: 0\n            },\n            {\n              id: 14,\n              originID: 11,\n              originSlot: 0,\n              targetID: 12,\n              targetSlot: 0\n            },\n            {\n              id: 15,\n              originID: 12,\n              originSlot: 0,\n              targetID: 13,\n              targetSlot: 1\n            },\n            {\n              id: 16,\n              originID: 13,\n              originSlot: 1,\n              targetID: 15,\n              targetSlot: 0\n            },\n            {\n              id: 17,\n              originID: 15,\n              originSlot: 0,\n              targetID: 14,\n              targetSlot: 0\n            },\n            {\n              id: 18,\n              originID: 14,\n              originSlot: 0,\n              targetID: 16,\n              targetSlot: 0\n            },\n            {\n              id: 19,\n              originID: 14,\n              originSlot: 1,\n              targetID: 16,\n              targetSlot: 1\n            },\n            {\n              id: 20,\n              originID: 15,\n              originSlot: 0,\n              targetID: 17,\n              targetSlot: 0\n            },\n            {\n              id: 21,\n              originID: 17,\n              originSlot: 0,\n              targetID: 14,\n              targetSlot: 1\n            }\n          ],\n          container: {\n            centerX: 1042,\n            centerY: 140,\n            scale: 1\n          }\n        },\n        selectedBlock: null,\n        selectedType: 'delay',\n        useContextMenu: true,\n        contextMenu: {\n          isShow: false,\n          mouseX: 0,\n          mouseY: 0,\n          top: 0,\n          left: 0\n        }\n      }\n    },\n    computed: {\n      selectedBlockProperty () {\n        if (!this.selectedBlock || !this.selectedBlock.values || !this.selectedBlock.values.property) {\n          return null\n        }\n\n        return this.selectedBlock.values.property\n      },\n      selectBlocksType () {\n        return this.blocks.map(b => {\n          return b.family\n        }).filter((value, index, array) => {\n          return array.indexOf(value) === index\n        })\n      }\n    },\n    methods: {\n      selectBlock (block) {\n        console.log('select', block)\n        this.selectedBlock = block\n      },\n      deselectBlock (block) {\n        console.log('deselect', block)\n        this.selectedBlock = null\n      },\n      filteredBlocks (type) {\n        return this.blocks.filter(value => {\n          return value.family === type\n        })\n      },\n      addBlock () {\n        console.log(this.selectedType)\n        this.$refs.container.addNewBlock(this.selectedType)\n      },\n      saveProperty (val) {\n        console.log(val)\n\n        let scene = this.scene\n        let block = scene.blocks.find(b => {\n          return b.id === this.selectedBlock.id\n        })\n        block.values.property = val\n\n        this.scene = merge({}, scene)\n      },\n      showContextMenu (e) {\n        if (!this.useContextMenu) return\n        if (e.preventDefault) e.preventDefault()\n\n        this.contextMenu.isShow = true\n        this.contextMenu.mouseX = e.x\n        this.contextMenu.mouseY = e.y\n\n        this.$nextTick(function () {\n          this.setMenu(e.y, e.x)\n          this.$refs.contextMenu.focus()\n        })\n      },\n      setMenu (top, left) {\n        let border = 5\n        let contextMenuEl = this.$refs.contextMenu\n        let containerElRect = this.$refs.container.$el.getBoundingClientRect()\n        let largestWidth = containerElRect.right - contextMenuEl.offsetWidth - border\n        let largestHeight = containerElRect.bottom - contextMenuEl.offsetHeight - border\n\n        console.log(this.$refs.container)\n        console.log(containerElRect)\n\n        if (left > largestWidth) left = largestWidth\n        if (top > largestHeight) top = largestHeight\n\n        this.contextMenu.top = top\n        this.contextMenu.left = left\n      },\n      addBlockContextMenu (name) {\n        let offset = domHelper.getOffsetRect(this.$refs.container.$el)\n        let x = this.contextMenu.mouseX - offset.left\n        let y = this.contextMenu.mouseY - offset.top\n\n        this.$refs.container.addNewBlock(name, x, y)\n        this.closeContextMenu()\n      },\n      closeContextMenu () {\n        this.contextMenu.isShow = false\n      }\n    },\n    watch: {\n      blocks (newValue) {\n        console.log('blocks', JSON.stringify(newValue))\n      },\n      scene (newValue) {\n        console.log('scene', JSON.stringify(newValue))\n      }\n    }\n  }\n</script>\n\n<style lang=\"less\">\n  html, body {\n    margin: 0;\n    padding: 0;\n  }\n\n  html {\n    width: 100vw;\n    height: 100vh;\n  }\n\n  body {\n    width: 100%;\n    height: 100%;\n  }\n\n  #app {\n    width: ~\"calc(100% - 40px)\";\n    height: ~\"calc(100% - 40px)\";\n    padding: 20px 0 0 20px;\n  }\n\n  .container {\n    width: 100%;\n    height: ~\"calc(100% - 50px)\";\n    border: 1px solid black;\n  }\n\n  #contextMenu {\n    position: absolute;\n    z-index: 1000;\n    background: white;\n    border: 1px solid black;\n    padding: 5px;\n    margin: 0;\n\n    li {\n      &.label {\n        color: gray;\n        font-size: 90%;\n      }\n      list-style: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n  }\n</style>\n","import mod from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./App.vue?vue&type=template&id=97ed66de&\"\nimport script from \"./App.vue?vue&type=script&lang=js&\"\nexport * from \"./App.vue?vue&type=script&lang=js&\"\nimport style0 from \"./App.vue?vue&type=style&index=0&lang=less&\"\n\n\n/* normalize component */\nimport normalizer from \"!../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","import Vue from 'vue'\nimport App from './App.vue'\n\nVue.config.productionTip = false\n\nnew Vue({\n    render: h => h(App),\n}).$mount('#app')\n","import mod from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&lang=less&\"; export default mod; export * from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&lang=less&\""],"sourceRoot":""}


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-blocks",
 3 |   "version": "1.0.0",
 4 |   "description": "Vue2 dataflow graph editor",
 5 |   "author": "Vladislav Fursov <ghostrussian@gmail.com>",
 6 |   "private": false,
 7 |   "scripts": {
 8 |     "serve": "vue-cli-service serve",
 9 |     "build": "vue-cli-service build",
10 |     "build:docs": "rimraf ./docs/* && vue-cli-service build && mv ./dist/* ./docs/"
11 |   },
12 |   "dependencies": {
13 |     "core-js": "^3.6.4",
14 |     "deepmerge": "^4.2.2",
15 |     "vue": "^2.6.11"
16 |   },
17 |   "devDependencies": {
18 |     "@vue/cli-plugin-babel": "~4.2.0",
19 |     "@vue/cli-service": "~4.2.0",
20 |     "less": "^3.0.4",
21 |     "less-loader": "^5.0.0",
22 |     "rimraf": "^3.0.2",
23 |     "vue-template-compiler": "^2.6.11"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ghostiam/vue-blocks/87b89587c9d27a0a0ba8c3fb1dfe2c27eb15e748/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <VueBlocksContainer
  4 |             @contextmenu.native="showContextMenu"
  5 |             @click.native="closeContextMenu"
  6 |             ref="container"
  7 |             :blocksContent="blocks"
  8 |             :scene.sync="scene"
  9 |             @blockSelect="selectBlock"
 10 |             @blockDeselect="deselectBlock"
 11 |             class="container"/>
 12 |     <VueBlockProperty :property="selectedBlockProperty" @save="saveProperty"/>
 13 |     <label>
 14 |       <select name="type" v-model="selectedType">
 15 |         <template v-for="type in selectBlocksType">
 16 |           <optgroup :label="type">
 17 |             <option v-for="block in filteredBlocks(type)" :value="block.name">{{block.title || block.name}}</option>
 18 |           </optgroup>
 19 |         </template>
 20 |       </select>
 21 |     </label>
 22 |     <button @click.stop="addBlock">Add</button>
 23 |     |
 24 |     <label for="useContextMenu">
 25 |       <input type="checkbox" v-model="useContextMenu" id="useContextMenu">Use right click for Add blocks
 26 |     </label>
 27 | 
 28 |     <ul id="contextMenu" ref="contextMenu" tabindex="-1" v-show="contextMenu.isShow"
 29 |         @blur="closeContextMenu"
 30 |         :style="{top: contextMenu.top + 'px', left: contextMenu.left + 'px'}">
 31 |       <template v-for="type in selectBlocksType">
 32 |         <li class="label">{{type}}</li>
 33 |         <li v-for="block in filteredBlocks(type)"
 34 |             @click="addBlockContextMenu(block.name)">{{block.title || block.name}}
 35 |         </li>
 36 |       </template>
 37 |     </ul>
 38 |   </div>
 39 | </template>
 40 | 
 41 | <script>
 42 |   import merge from 'deepmerge'
 43 | 
 44 |   import VueBlocksContainer from './components/VueBlocksContainer'
 45 |   import VueBlockProperty from './components/VueBlockProperty'
 46 |   import domHelper from './helpers/dom'
 47 | 
 48 |   export default {
 49 |     name: 'App',
 50 |     components: {
 51 |       VueBlocksContainer,
 52 |       VueBlockProperty
 53 |     },
 54 |     data: function () {
 55 |       return {
 56 |         blocks: [
 57 |           {
 58 |             name: 'text',
 59 |             title: 'Text',
 60 |             family: 'Animations',
 61 |             description: 'Show text',
 62 |             fields: [
 63 |               {
 64 |                 name: 'text',
 65 |                 label: 'Text',
 66 |                 type: 'string',
 67 |                 attr: 'property'
 68 |               },
 69 |               {
 70 |                 name: 'delay',
 71 |                 label: 'Delay (s)',
 72 |                 type: 'number',
 73 |                 attr: 'property'
 74 |               },
 75 |               {
 76 |                 name: 'Show',
 77 |                 type: 'event',
 78 |                 attr: 'input'
 79 |               },
 80 |               {
 81 |                 name: 'Hide',
 82 |                 type: 'event',
 83 |                 attr: 'input'
 84 |               },
 85 |               {
 86 |                 name: 'onShow',
 87 |                 type: 'event',
 88 |                 attr: 'output'
 89 |               },
 90 |               {
 91 |                 name: 'onHide',
 92 |                 type: 'event',
 93 |                 attr: 'output'
 94 |               }
 95 |             ]
 96 |           },
 97 |           {
 98 |             name: 'animation',
 99 |             title: 'Animation',
100 |             family: 'Animations',
101 |             description: 'Show animation',
102 |             fields: [
103 |               {
104 |                 name: 'animation',
105 |                 label: 'Animation',
106 |                 type: 'animation',
107 |                 attr: 'property'
108 |               },
109 |               {
110 |                 name: 'Play',
111 |                 type: 'event',
112 |                 attr: 'input'
113 |               },
114 |               {
115 |                 name: 'Stop',
116 |                 type: 'event',
117 |                 attr: 'input'
118 |               },
119 |               {
120 |                 name: 'onEnd',
121 |                 type: 'event',
122 |                 attr: 'output'
123 |               }
124 |             ]
125 |           },
126 |           {
127 |             name: 'Chat message',
128 |             family: 'Events',
129 |             description: '',
130 |             fields: [
131 |               {
132 |                 name: 'message',
133 |                 label: 'Activation message',
134 |                 type: 'string',
135 |                 attr: 'property'
136 |               },
137 |               {
138 |                 name: 'onMessage',
139 |                 type: 'event',
140 |                 attr: 'output'
141 |               }
142 |             ]
143 |           },
144 |           {
145 |             name: 'delay',
146 |             title: 'Delay',
147 |             family: 'Time',
148 |             description: '',
149 |             fields: [
150 |               {
151 |                 name: 'delay',
152 |                 label: 'Delay (s)',
153 |                 type: 'number',
154 |                 attr: 'property',
155 |                 value: 1.0
156 |               },
157 |               {
158 |                 name: 'input',
159 |                 type: 'event',
160 |                 attr: 'input'
161 |               },
162 |               {
163 |                 name: 'output',
164 |                 type: 'event',
165 |                 attr: 'output'
166 |               }
167 |             ]
168 |           },
169 |           {
170 |             name: 'shortcuts',
171 |             title: 'Shortcuts',
172 |             family: 'Events',
173 |             description: 'Press shortcut for call event',
174 |             fields: [
175 |               {
176 |                 name: 'keys',
177 |                 label: 'Activation keys',
178 |                 type: 'keys',
179 |                 attr: 'property'
180 |               },
181 |               {
182 |                 name: 'onPress',
183 |                 type: 'event',
184 |                 attr: 'output'
185 |               }
186 |             ]
187 |           },
188 |           {
189 |             name: 'splitter',
190 |             title: 'Splitter',
191 |             family: 'Helpers',
192 |             description: 'Press shortcut for call event',
193 |             fields: [
194 |               {
195 |                 name: 'input',
196 |                 type: 'event',
197 |                 attr: 'input'
198 |               },
199 |               {
200 |                 name: 'output',
201 |                 type: 'event',
202 |                 attr: 'output'
203 |               },
204 |               {
205 |                 name: 'output',
206 |                 type: 'event',
207 |                 attr: 'output'
208 |               },
209 |               {
210 |                 name: 'output',
211 |                 type: 'event',
212 |                 attr: 'output'
213 |               },
214 |               {
215 |                 name: 'output',
216 |                 type: 'event',
217 |                 attr: 'output'
218 |               }
219 |             ]
220 |           }
221 |         ],
222 |         scene: {
223 |           blocks: [
224 |             {
225 |               id: 2,
226 |               x: -700,
227 |               y: -69,
228 |               name: 'Chat message',
229 |               title: 'Chat message',
230 |               values: {
231 |                 property: [
232 |                   {
233 |                     name: 'message',
234 |                     type: 'string'
235 |                   }
236 |                 ]
237 |               }
238 |             },
239 |             {
240 |               id: 4,
241 |               x: -157,
242 |               y: -68.5,
243 |               name: 'text',
244 |               title: 'Text',
245 |               values: {
246 |                 property: {
247 |                   text: {
248 |                     label: 'Text',
249 |                     type: 'string'
250 |                   }
251 |                 }
252 |               }
253 |             },
254 |             {
255 |               id: 5,
256 |               x: 136,
257 |               y: -48.5,
258 |               name: 'text',
259 |               title: 'Text',
260 |               values: {
261 |                 property: {
262 |                   text: {
263 |                     label: 'Text',
264 |                     type: 'string'
265 |                   }
266 |                 }
267 |               }
268 |             },
269 |             {
270 |               id: 6,
271 |               x: -440,
272 |               y: -15.5,
273 |               name: 'delay',
274 |               title: 'Delay',
275 |               values: {
276 |                 property: {
277 |                   delay: {
278 |                     label: 'Delay (s)',
279 |                     type: 'number',
280 |                     value: 1
281 |                   }
282 |                 }
283 |               }
284 |             },
285 |             {
286 |               id: 7,
287 |               x: -694,
288 |               y: 60.5,
289 |               name: 'shortcuts',
290 |               title: 'Shortcuts',
291 |               values: {
292 |                 property: {
293 |                   keys: {
294 |                     label: 'Activation keys',
295 |                     type: 'keys'
296 |                   }
297 |                 }
298 |               }
299 |             },
300 |             {
301 |               id: 8,
302 |               x: -163,
303 |               y: 59.5,
304 |               name: 'text',
305 |               title: 'Text',
306 |               values: {
307 |                 property: {
308 |                   text: {
309 |                     label: 'Text',
310 |                     type: 'string'
311 |                   }
312 |                 }
313 |               }
314 |             },
315 |             {
316 |               id: 9,
317 |               x: -429,
318 |               y: 125.5,
319 |               name: 'delay',
320 |               title: 'Delay',
321 |               values: {
322 |                 property: {
323 |                   delay: {
324 |                     label: 'Delay (s)',
325 |                     type: 'number',
326 |                     value: 1
327 |                   }
328 |                 }
329 |               }
330 |             },
331 |             {
332 |               id: 10,
333 |               x: 126,
334 |               y: 127.5,
335 |               name: 'text',
336 |               title: 'Text',
337 |               values: {
338 |                 property: {
339 |                   text: {
340 |                     label: 'Text',
341 |                     type: 'string'
342 |                   }
343 |                 }
344 |               }
345 |             },
346 |             {
347 |               id: 11,
348 |               x: -856,
349 |               y: 252.5,
350 |               name: 'shortcuts',
351 |               title: 'Shortcuts',
352 |               values: {
353 |                 property: {
354 |                   keys: {
355 |                     label: 'Activation keys',
356 |                     type: 'keys'
357 |                   }
358 |                 }
359 |               }
360 |             },
361 |             {
362 |               id: 12,
363 |               x: -616,
364 |               y: 319.5,
365 |               name: 'delay',
366 |               title: 'Delay',
367 |               values: {
368 |                 property: {
369 |                   delay: {
370 |                     label: 'Delay (s)',
371 |                     type: 'number',
372 |                     value: 1
373 |                   }
374 |                 }
375 |               }
376 |             },
377 |             {
378 |               id: 13,
379 |               x: -381,
380 |               y: 252.5,
381 |               name: 'text',
382 |               title: 'Text',
383 |               values: {
384 |                 property: {
385 |                   text: {
386 |                     label: 'Text',
387 |                     type: 'string'
388 |                   }
389 |                 }
390 |               }
391 |             },
392 |             {
393 |               id: 14,
394 |               x: 166,
395 |               y: 266.5,
396 |               name: 'text',
397 |               title: 'Text',
398 |               values: {
399 |                 property: {
400 |                   text: {
401 |                     label: 'Text',
402 |                     type: 'string'
403 |                   }
404 |                 }
405 |               }
406 |             },
407 |             {
408 |               id: 15,
409 |               x: -149,
410 |               y: 269.5,
411 |               name: 'delay',
412 |               title: 'Delay',
413 |               values: {
414 |                 property: {
415 |                   delay: {
416 |                     label: 'Delay (s)',
417 |                     type: 'number',
418 |                     value: 1
419 |                   }
420 |                 }
421 |               }
422 |             },
423 |             {
424 |               id: 16,
425 |               x: 413,
426 |               y: 267.5,
427 |               name: 'animation',
428 |               title: 'Animation',
429 |               values: {
430 |                 property: {
431 |                   animation: {
432 |                     label: 'Animation',
433 |                     type: 'animation'
434 |                   }
435 |                 }
436 |               }
437 |             },
438 |             {
439 |               id: 17,
440 |               x: 13,
441 |               y: 380.5,
442 |               name: 'delay',
443 |               title: 'Delay',
444 |               values: {
445 |                 property: {
446 |                   delay: {
447 |                     label: 'Delay (s)',
448 |                     type: 'number',
449 |                     value: 1
450 |                   }
451 |                 }
452 |               }
453 |             }
454 |           ],
455 |           links: [
456 |             {
457 |               id: 3,
458 |               originID: 2,
459 |               originSlot: 0,
460 |               targetID: 4,
461 |               targetSlot: 0
462 |             },
463 |             {
464 |               id: 6,
465 |               originID: 7,
466 |               originSlot: 0,
467 |               targetID: 8,
468 |               targetSlot: 0
469 |             },
470 |             {
471 |               id: 7,
472 |               originID: 7,
473 |               originSlot: 0,
474 |               targetID: 9,
475 |               targetSlot: 0
476 |             },
477 |             {
478 |               id: 8,
479 |               originID: 9,
480 |               originSlot: 0,
481 |               targetID: 10,
482 |               targetSlot: 0
483 |             },
484 |             {
485 |               id: 9,
486 |               originID: 9,
487 |               originSlot: 0,
488 |               targetID: 8,
489 |               targetSlot: 1
490 |             },
491 |             {
492 |               id: 10,
493 |               originID: 2,
494 |               originSlot: 0,
495 |               targetID: 6,
496 |               targetSlot: 0
497 |             },
498 |             {
499 |               id: 11,
500 |               originID: 6,
501 |               originSlot: 0,
502 |               targetID: 4,
503 |               targetSlot: 1
504 |             },
505 |             {
506 |               id: 12,
507 |               originID: 4,
508 |               originSlot: 1,
509 |               targetID: 5,
510 |               targetSlot: 0
511 |             },
512 |             {
513 |               id: 13,
514 |               originID: 11,
515 |               originSlot: 0,
516 |               targetID: 13,
517 |               targetSlot: 0
518 |             },
519 |             {
520 |               id: 14,
521 |               originID: 11,
522 |               originSlot: 0,
523 |               targetID: 12,
524 |               targetSlot: 0
525 |             },
526 |             {
527 |               id: 15,
528 |               originID: 12,
529 |               originSlot: 0,
530 |               targetID: 13,
531 |               targetSlot: 1
532 |             },
533 |             {
534 |               id: 16,
535 |               originID: 13,
536 |               originSlot: 1,
537 |               targetID: 15,
538 |               targetSlot: 0
539 |             },
540 |             {
541 |               id: 17,
542 |               originID: 15,
543 |               originSlot: 0,
544 |               targetID: 14,
545 |               targetSlot: 0
546 |             },
547 |             {
548 |               id: 18,
549 |               originID: 14,
550 |               originSlot: 0,
551 |               targetID: 16,
552 |               targetSlot: 0
553 |             },
554 |             {
555 |               id: 19,
556 |               originID: 14,
557 |               originSlot: 1,
558 |               targetID: 16,
559 |               targetSlot: 1
560 |             },
561 |             {
562 |               id: 20,
563 |               originID: 15,
564 |               originSlot: 0,
565 |               targetID: 17,
566 |               targetSlot: 0
567 |             },
568 |             {
569 |               id: 21,
570 |               originID: 17,
571 |               originSlot: 0,
572 |               targetID: 14,
573 |               targetSlot: 1
574 |             }
575 |           ],
576 |           container: {
577 |             centerX: 1042,
578 |             centerY: 140,
579 |             scale: 1
580 |           }
581 |         },
582 |         selectedBlock: null,
583 |         selectedType: 'delay',
584 |         useContextMenu: true,
585 |         contextMenu: {
586 |           isShow: false,
587 |           mouseX: 0,
588 |           mouseY: 0,
589 |           top: 0,
590 |           left: 0
591 |         }
592 |       }
593 |     },
594 |     computed: {
595 |       selectedBlockProperty () {
596 |         if (!this.selectedBlock || !this.selectedBlock.values || !this.selectedBlock.values.property) {
597 |           return null
598 |         }
599 | 
600 |         return this.selectedBlock.values.property
601 |       },
602 |       selectBlocksType () {
603 |         return this.blocks.map(b => {
604 |           return b.family
605 |         }).filter((value, index, array) => {
606 |           return array.indexOf(value) === index
607 |         })
608 |       }
609 |     },
610 |     methods: {
611 |       selectBlock (block) {
612 |         console.log('select', block)
613 |         this.selectedBlock = block
614 |       },
615 |       deselectBlock (block) {
616 |         console.log('deselect', block)
617 |         this.selectedBlock = null
618 |       },
619 |       filteredBlocks (type) {
620 |         return this.blocks.filter(value => {
621 |           return value.family === type
622 |         })
623 |       },
624 |       addBlock () {
625 |         console.log(this.selectedType)
626 |         this.$refs.container.addNewBlock(this.selectedType)
627 |       },
628 |       saveProperty (val) {
629 |         console.log(val)
630 | 
631 |         let scene = this.scene
632 |         let block = scene.blocks.find(b => {
633 |           return b.id === this.selectedBlock.id
634 |         })
635 |         block.values.property = val
636 | 
637 |         this.scene = merge({}, scene)
638 |       },
639 |       showContextMenu (e) {
640 |         if (!this.useContextMenu) return
641 |         if (e.preventDefault) e.preventDefault()
642 | 
643 |         this.contextMenu.isShow = true
644 |         this.contextMenu.mouseX = e.x
645 |         this.contextMenu.mouseY = e.y
646 | 
647 |         this.$nextTick(function () {
648 |           this.setMenu(e.y, e.x)
649 |           this.$refs.contextMenu.focus()
650 |         })
651 |       },
652 |       setMenu (top, left) {
653 |         let border = 5
654 |         let contextMenuEl = this.$refs.contextMenu
655 |         let containerElRect = this.$refs.container.$el.getBoundingClientRect()
656 |         let largestWidth = containerElRect.right - contextMenuEl.offsetWidth - border
657 |         let largestHeight = containerElRect.bottom - contextMenuEl.offsetHeight - border
658 | 
659 |         console.log(this.$refs.container)
660 |         console.log(containerElRect)
661 | 
662 |         if (left > largestWidth) left = largestWidth
663 |         if (top > largestHeight) top = largestHeight
664 | 
665 |         this.contextMenu.top = top
666 |         this.contextMenu.left = left
667 |       },
668 |       addBlockContextMenu (name) {
669 |         let offset = domHelper.getOffsetRect(this.$refs.container.$el)
670 |         let x = this.contextMenu.mouseX - offset.left
671 |         let y = this.contextMenu.mouseY - offset.top
672 | 
673 |         this.$refs.container.addNewBlock(name, x, y)
674 |         this.closeContextMenu()
675 |       },
676 |       closeContextMenu () {
677 |         this.contextMenu.isShow = false
678 |       }
679 |     },
680 |     watch: {
681 |       blocks (newValue) {
682 |         console.log('blocks', JSON.stringify(newValue))
683 |       },
684 |       scene (newValue) {
685 |         console.log('scene', JSON.stringify(newValue))
686 |       }
687 |     }
688 |   }
689 | </script>
690 | 
691 | <style lang="less">
692 |   html, body {
693 |     margin: 0;
694 |     padding: 0;
695 |   }
696 | 
697 |   html {
698 |     width: 100vw;
699 |     height: 100vh;
700 |   }
701 | 
702 |   body {
703 |     width: 100%;
704 |     height: 100%;
705 |   }
706 | 
707 |   #app {
708 |     width: ~"calc(100% - 40px)";
709 |     height: ~"calc(100% - 40px)";
710 |     padding: 20px 0 0 20px;
711 |   }
712 | 
713 |   .container {
714 |     width: 100%;
715 |     height: ~"calc(100% - 50px)";
716 |     border: 1px solid black;
717 |   }
718 | 
719 |   #contextMenu {
720 |     position: absolute;
721 |     z-index: 1000;
722 |     background: white;
723 |     border: 1px solid black;
724 |     padding: 5px;
725 |     margin: 0;
726 | 
727 |     li {
728 |       &.label {
729 |         color: gray;
730 |         font-size: 90%;
731 |       }
732 |       list-style: none;
733 |     }
734 | 
735 |     &:focus {
736 |       outline: none;
737 |     }
738 |   }
739 | </style>
740 | 


--------------------------------------------------------------------------------
/src/components/VueBlock.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vue-block" :class="{selected: selected}" :style="style">
  3 |     <header :style="headerStyle">
  4 |       {{title}}
  5 |       <a class="delete" @click="deleteBlock">x</a>
  6 |     </header>
  7 |     <div class="inputs">
  8 |       <div class="input" v-for="(slot, index) in inputs">
  9 |         <div class="circle inputSlot" :class="{active: slot.active}"
 10 |              @mouseup="slotMouseUp($event, index)"
 11 |              @mousedown="slotBreak($event, index)"></div>
 12 |         {{slot.label}}
 13 |       </div>
 14 |     </div>
 15 |     <div class="outputs">
 16 |       <div class="output" v-for="(slot, index) in outputs">
 17 |         <div class="circle" :class="{active: slot.active}"
 18 |              @mousedown="slotMouseDown($event, index)"></div>
 19 |         {{slot.label}}
 20 |       </div>
 21 |     </div>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 |   export default {
 27 |     name: 'VueBlock',
 28 |     props: {
 29 |       x: {
 30 |         type: Number,
 31 |         default: 0,
 32 |         validator: function (val) {
 33 |           return typeof val === 'number'
 34 |         }
 35 |       },
 36 |       y: {
 37 |         type: Number,
 38 |         default: 0,
 39 |         validator: function (val) {
 40 |           return typeof val === 'number'
 41 |         }
 42 |       },
 43 |       selected: Boolean,
 44 |       title: {
 45 |         type: String,
 46 |         default: 'Title'
 47 |       },
 48 |       inputs: Array,
 49 |       outputs: Array,
 50 | 
 51 |       options: {
 52 |         type: Object
 53 |       }
 54 |     },
 55 |     created () {
 56 |       this.mouseX = 0
 57 |       this.mouseY = 0
 58 | 
 59 |       this.lastMouseX = 0
 60 |       this.lastMouseY = 0
 61 | 
 62 |       this.linking = false
 63 |       this.dragging = false
 64 |     },
 65 |     mounted () {
 66 |       document.documentElement.addEventListener('mousemove', this.handleMove, true)
 67 |       document.documentElement.addEventListener('mousedown', this.handleDown, true)
 68 |       document.documentElement.addEventListener('mouseup', this.handleUp, true)
 69 |     },
 70 |     beforeDestroy () {
 71 |       document.documentElement.removeEventListener('mousemove', this.handleMove, true)
 72 |       document.documentElement.removeEventListener('mousedown', this.handleDown, true)
 73 |       document.documentElement.removeEventListener('mouseup', this.handleUp, true)
 74 |     },
 75 |     data () {
 76 |       return {
 77 |         width: this.options.width,
 78 |         hasDragged: false
 79 |       }
 80 |     },
 81 |     methods: {
 82 |       handleMove (e) {
 83 |         this.mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft
 84 |         this.mouseY = e.pageY || e.clientY + document.documentElement.scrollTop
 85 | 
 86 |         if (this.dragging && !this.linking) {
 87 |           let diffX = this.mouseX - this.lastMouseX
 88 |           let diffY = this.mouseY - this.lastMouseY
 89 | 
 90 |           this.lastMouseX = this.mouseX
 91 |           this.lastMouseY = this.mouseY
 92 | 
 93 |           this.moveWithDiff(diffX, diffY)
 94 | 
 95 |           this.hasDragged = true
 96 |         }
 97 |       },
 98 |       handleDown (e) {
 99 |         this.mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft
100 |         this.mouseY = e.pageY || e.clientY + document.documentElement.scrollTop
101 | 
102 |         this.lastMouseX = this.mouseX
103 |         this.lastMouseY = this.mouseY
104 | 
105 |         const target = e.target || e.srcElement
106 |         if (this.$el.contains(target) && e.which === 1) {
107 |           this.dragging = true
108 | 
109 |           this.$emit('select')
110 | 
111 |           if (e.preventDefault) e.preventDefault()
112 |         }
113 |       },
114 |       handleUp () {
115 |         if (this.dragging) {
116 |           this.dragging = false
117 | 
118 |           if (this.hasDragged) {
119 |             this.save()
120 |             this.hasDragged = false
121 |           }
122 |         }
123 | 
124 |         if (this.linking) {
125 |           this.linking = false
126 |         }
127 |       },
128 |       // Slots
129 |       slotMouseDown (e, index) {
130 |         this.linking = true
131 | 
132 |         this.$emit('linkingStart', index)
133 |         if (e.preventDefault) e.preventDefault()
134 |       },
135 |       slotMouseUp (e, index) {
136 |         this.$emit('linkingStop', index)
137 |         if (e.preventDefault) e.preventDefault()
138 |       },
139 |       slotBreak (e, index) {
140 |         this.linking = true
141 | 
142 |         this.$emit('linkingBreak', index)
143 |         if (e.preventDefault) e.preventDefault()
144 |       },
145 |       save () {
146 |         this.$emit('update')
147 |       },
148 |       deleteBlock () {
149 |         this.$emit('delete')
150 |       },
151 |       moveWithDiff (diffX, diffY) {
152 |         let left = this.x + diffX / this.options.scale
153 |         let top = this.y + diffY / this.options.scale
154 | 
155 |         this.$emit('update:x', left)
156 |         this.$emit('update:y', top)
157 |       }
158 |     },
159 |     computed: {
160 |       style () {
161 |         return {
162 |           top: this.options.center.y + this.y * this.options.scale + 'px',
163 |           left: this.options.center.x + this.x * this.options.scale + 'px',
164 |           width: this.width + 'px',
165 |           transform: 'scale(' + (this.options.scale + '') + ')',
166 |           transformOrigin: 'top left'
167 |         }
168 |       },
169 |       headerStyle () {
170 |         return {
171 |           height: this.options.titleHeight + 'px'
172 |         }
173 |       }
174 |     }
175 |   }
176 | </script>
177 | 
178 | <style lang="less" scoped>
179 |   @blockBorder: 1px;
180 | 
181 |   @ioPaddingInner: 2px 0;
182 |   @ioHeight: 16px;
183 |   @ioFontSize: 14px;
184 | 
185 |   @circleBorder: 1px;
186 |   @circleSize: 10px;
187 |   @circleMargin: 2px; // left/right
188 | 
189 |   @circleNewColor: #00FF00;
190 |   @circleRemoveColor: #FF0000;
191 |   @circleConnectedColor: #FFFF00;
192 | 
193 |   .vue-block {
194 |     position: absolute;
195 |     box-sizing: border-box;
196 |     border: @blockBorder solid black;
197 |     background: white;
198 |     z-index: 1;
199 |     opacity: 0.9;
200 |     cursor: move;
201 | 
202 |     &.selected {
203 |       border: @blockBorder solid red;
204 |       z-index: 2;
205 |     }
206 | 
207 |     > header {
208 |       background: #bfbfbf;
209 |       text-align: center;
210 | 
211 |       > .delete {
212 |         color: red;
213 |         cursor: pointer;
214 |         float: right;
215 |         position: absolute;
216 |         right: 5px;
217 |       }
218 |     }
219 | 
220 |     .inputs, .outputs {
221 |       padding: @ioPaddingInner;
222 | 
223 |       display: block;
224 |       width: 50%;
225 | 
226 |       > * {
227 |         width: 100%;
228 |       }
229 |     }
230 | 
231 |     .circle {
232 |       box-sizing: border-box;
233 |       margin-top: @ioHeight / 2 - @circleSize / 2;
234 | 
235 |       width: @circleSize;
236 |       height: @circleSize;
237 | 
238 |       border: @circleBorder solid rgba(0, 0, 0, 0.5);
239 |       border-radius: 100%;
240 | 
241 |       cursor: crosshair;
242 |       &.active {
243 |         background: @circleConnectedColor;
244 |       }
245 |     }
246 | 
247 |     .inputs {
248 |       float: left;
249 |       text-align: left;
250 | 
251 |       margin-left: -(@circleSize/2 + @blockBorder);
252 |     }
253 | 
254 |     .input, .output {
255 |       height: @ioHeight;
256 |       overflow: hidden;
257 |       font-size: @ioFontSize;
258 | 
259 |       &:last-child {
260 |       }
261 |     }
262 | 
263 |     .input {
264 |       float: left;
265 | 
266 |       .circle {
267 |         float: left;
268 |         margin-right: @circleMargin;
269 | 
270 |         &:hover {
271 |           background: @circleNewColor;
272 | 
273 |           &.active {
274 |             background: @circleRemoveColor;
275 |           }
276 |         }
277 |       }
278 |     }
279 | 
280 |     .outputs {
281 |       float: right;
282 |       text-align: right;
283 | 
284 |       margin-right: -(@circleSize/2 + @blockBorder);
285 |     }
286 | 
287 |     .output {
288 |       float: right;
289 | 
290 |       .circle {
291 |         float: right;
292 |         margin-left: @circleMargin;
293 | 
294 |         &:hover {
295 |           background: @circleNewColor;
296 |         }
297 |       }
298 |     }
299 |   }
300 | </style>
301 | 


--------------------------------------------------------------------------------
/src/components/VueBlockProperty.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="blocks-properties">
 3 |     <div class="property" v-for="p in properties">
 4 |       <label :for="p.name">{{p.label||p.name}}:</label>
 5 |       <br>
 6 |       <input type="text" v-model="p.value">
 7 |     </div>
 8 |     <button @click.prevent="save">Save</button>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 |   export default {
14 |     name: 'VueBlockProperty',
15 |     props: ['property'],
16 |     data () {
17 |       return {
18 |         properties: []
19 |       }
20 |     },
21 |     methods: {
22 |       loadProperties () {
23 |         this.properties = this.property
24 |       },
25 |       save () {
26 |         this.$emit('save', this.properties)
27 |       }
28 |     },
29 |     watch: {
30 |       property () {
31 |         this.loadProperties()
32 |       }
33 |     }
34 |   }
35 | </script>
36 | 
37 | <style lang="less" scoped>
38 |   .blocks-properties {
39 |     position: absolute;
40 |     right: 0;
41 |     top: 0;
42 | 
43 |     width: 300px;
44 |     min-height: 200px;
45 |     box-sizing: border-box;
46 |     padding: 10px;
47 | 
48 |     background: #ffffff;
49 |     border: 1px solid red;
50 |     .property {
51 | 
52 |     }
53 |   }
54 | </style>
55 | 


--------------------------------------------------------------------------------
/src/components/VueBlocksContainer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vue-container">
  3 |     <VueLink :lines="lines"/>
  4 |     <VueBlock v-for="block in blocks"
  5 |               :key="block.id"
  6 |               v-bind.sync="block"
  7 |               :options="optionsForChild"
  8 |               @update="updateScene"
  9 |               @linkingStart="linkingStart(block, $event)"
 10 |               @linkingStop="linkingStop(block, $event)"
 11 |               @linkingBreak="linkingBreak(block, $event)"
 12 |               @select="blockSelect(block)"
 13 |               @delete="blockDelete(block)"
 14 |     />
 15 |   </div>
 16 | </template>
 17 | 
 18 | <script>
 19 |   import merge from 'deepmerge'
 20 |   import mouseHelper from '../helpers/mouse'
 21 | 
 22 |   import VueBlock from './VueBlock'
 23 |   import VueLink from './VueLink'
 24 | 
 25 |   export default {
 26 |     name: 'VueBlockContainer',
 27 |     components: {
 28 |       VueBlock,
 29 |       VueLink
 30 |     },
 31 |     props: {
 32 |       blocksContent: {
 33 |         type: Array,
 34 |         default () {
 35 |           return []
 36 |         }
 37 |       },
 38 |       scene: {
 39 |         type: Object,
 40 |         default: {blocks: [], links: [], container: {}}
 41 |       },
 42 |       options: {
 43 |         type: Object
 44 |       }
 45 |     },
 46 |     mounted () {
 47 |       document.documentElement.addEventListener('mousemove', this.handleMove, true)
 48 |       document.documentElement.addEventListener('mousedown', this.handleDown, true)
 49 |       document.documentElement.addEventListener('mouseup', this.handleUp, true)
 50 |       document.documentElement.addEventListener('wheel', this.handleWheel, true)
 51 | 
 52 |       this.centerX = this.$el.clientWidth / 2
 53 |       this.centerY = this.$el.clientHeight / 2
 54 | 
 55 |       this.importBlocksContent()
 56 |       this.importScene()
 57 |     },
 58 |     beforeDestroy () {
 59 |       document.documentElement.removeEventListener('mousemove', this.handleMove, true)
 60 |       document.documentElement.removeEventListener('mousedown', this.handleDown, true)
 61 |       document.documentElement.removeEventListener('mouseup', this.handleUp, true)
 62 |       document.documentElement.removeEventListener('wheel', this.handleWheel, true)
 63 |     },
 64 |     created () {
 65 |       this.mouseX = 0
 66 |       this.mouseY = 0
 67 | 
 68 |       this.lastMouseX = 0
 69 |       this.lastMouseY = 0
 70 | 
 71 |       this.minScale = 0.2
 72 |       this.maxScale = 5
 73 | 
 74 |       this.linking = false
 75 |       this.linkStartData = null
 76 | 
 77 |       this.inputSlotClassName = 'inputSlot'
 78 | 
 79 |       this.defaultScene = {
 80 |         blocks: [],
 81 |         links: [],
 82 |         container: {}
 83 |       }
 84 |     },
 85 |     data () {
 86 |       return {
 87 |         dragging: false,
 88 |         //
 89 |         centerX: 0,
 90 |         centerY: 0,
 91 |         scale: 1,
 92 |         //
 93 |         nodes: [],
 94 |         blocks: [],
 95 |         links: [],
 96 |         //
 97 |         tempLink: null,
 98 |         selectedBlock: null,
 99 |         hasDragged: false
100 |       }
101 |     },
102 |     computed: {
103 |       optionsForChild () {
104 |         return {
105 |           width: 200,
106 |           titleHeight: 20,
107 |           scale: this.scale,
108 |           inputSlotClassName: this.inputSlotClassName,
109 |           center: {
110 |             x: this.centerX,
111 |             y: this.centerY
112 |           }
113 |         }
114 |       },
115 |       container () {
116 |         return {
117 |           centerX: this.centerX,
118 |           centerY: this.centerY,
119 |           scale: this.scale
120 |         }
121 |       },
122 |       // Links calculate
123 |       lines () {
124 |         let lines = []
125 | 
126 |         for (let link of this.links) {
127 |           let originBlock = this.blocks.find(block => {
128 |             return block.id === link.originID
129 |           })
130 | 
131 |           let targetBlock = this.blocks.find(block => {
132 |             return block.id === link.targetID
133 |           })
134 | 
135 |           if (!originBlock || !targetBlock) {
136 |             console.log('Remove invalid link', link)
137 |             this.removeLink(link.id)
138 |             continue
139 |           }
140 | 
141 |           if (originBlock.id === targetBlock.id) {
142 |             console.log('Loop detected, remove link', link)
143 |             this.removeLink(link.id)
144 |             continue
145 |           }
146 | 
147 |           let originLinkPos = this.getConnectionPos(originBlock, link.originSlot, false)
148 |           let targetLinkPos = this.getConnectionPos(targetBlock, link.targetSlot, true)
149 | 
150 |           if (!originLinkPos || !targetLinkPos) {
151 |             console.log('Remove invalid link (slot not exist)', link)
152 |             this.removeLink(link.id)
153 |             continue
154 |           }
155 | 
156 |           let x1 = originLinkPos.x
157 |           let y1 = originLinkPos.y
158 | 
159 |           let x2 = targetLinkPos.x
160 |           let y2 = targetLinkPos.y
161 | 
162 |           lines.push({
163 |             x1: x1,
164 |             y1: y1,
165 |             x2: x2,
166 |             y2: y2,
167 |             style: {
168 |               stroke: '#F85',
169 |               strokeWidth: 4 * this.scale,
170 |               fill: 'none'
171 |             },
172 |             outlineStyle: {
173 |               stroke: '#666',
174 |               strokeWidth: 6 * this.scale,
175 |               strokeOpacity: 0.6,
176 |               fill: 'none'
177 |             }
178 |           })
179 |         }
180 | 
181 |         if (this.tempLink) {
182 |           this.tempLink.style = {
183 |             stroke: '#8f8f8f',
184 |             strokeWidth: 4 * this.scale,
185 |             fill: 'none'
186 |           }
187 | 
188 |           lines.push(this.tempLink)
189 |         }
190 | 
191 |         return lines
192 |       }
193 |     },
194 |     methods: {
195 |       // Events
196 |       /** @param e {MouseEvent} */
197 |       handleMove (e) {
198 |         let mouse = mouseHelper.getMousePosition(this.$el, e)
199 |         this.mouseX = mouse.x
200 |         this.mouseY = mouse.y
201 | 
202 |         if (this.dragging) {
203 |           let diffX = this.mouseX - this.lastMouseX
204 |           let diffY = this.mouseY - this.lastMouseY
205 | 
206 |           this.lastMouseX = this.mouseX
207 |           this.lastMouseY = this.mouseY
208 | 
209 |           this.centerX += diffX
210 |           this.centerY += diffY
211 | 
212 |           this.hasDragged = true
213 |         }
214 | 
215 |         if (this.linking && this.linkStartData) {
216 |           let linkStartPos = this.getConnectionPos(this.linkStartData.block, this.linkStartData.slotNumber, false)
217 |           this.tempLink = {
218 |             x1: linkStartPos.x,
219 |             y1: linkStartPos.y,
220 |             x2: this.mouseX,
221 |             y2: this.mouseY
222 |           }
223 |         }
224 |       },
225 |       handleDown (e) {
226 |         const target = e.target || e.srcElement
227 |         if ((target === this.$el || target.matches('svg, svg *')) && e.which === 1) {
228 |           this.dragging = true
229 | 
230 |           let mouse = mouseHelper.getMousePosition(this.$el, e)
231 |           this.mouseX = mouse.x
232 |           this.mouseY = mouse.y
233 | 
234 |           this.lastMouseX = this.mouseX
235 |           this.lastMouseY = this.mouseY
236 | 
237 |           this.deselectAll()
238 |           if (e.preventDefault) e.preventDefault()
239 |         }
240 |       },
241 |       handleUp (e) {
242 |         const target = e.target || e.srcElement
243 | 
244 |         if (this.dragging) {
245 |           this.dragging = false
246 | 
247 |           if (this.hasDragged) {
248 |             this.updateScene()
249 |             this.hasDragged = false
250 |           }
251 |         }
252 | 
253 |         if (this.$el.contains(target) && (typeof target.className !== 'string' || target.className.indexOf(this.inputSlotClassName) === -1)) {
254 |           this.linking = false
255 |           this.tempLink = null
256 |           this.linkStartData = null
257 |         }
258 |       },
259 |       handleWheel (e) {
260 |         const target = e.target || e.srcElement
261 |         if (this.$el.contains(target)) {
262 |           if (e.preventDefault) e.preventDefault()
263 | 
264 |           let deltaScale = Math.pow(1.1, e.deltaY * -0.01)
265 |           this.scale *= deltaScale
266 | 
267 |           if (this.scale < this.minScale) {
268 |             this.scale = this.minScale
269 |             return
270 |           } else if (this.scale > this.maxScale) {
271 |             this.scale = this.maxScale
272 |             return
273 |           }
274 | 
275 |           let zoomingCenter = {
276 |             x: this.mouseX,
277 |             y: this.mouseY
278 |           }
279 | 
280 |           let deltaOffsetX = (zoomingCenter.x - this.centerX) * (deltaScale - 1)
281 |           let deltaOffsetY = (zoomingCenter.y - this.centerY) * (deltaScale - 1)
282 | 
283 |           this.centerX -= deltaOffsetX
284 |           this.centerY -= deltaOffsetY
285 | 
286 |           this.updateScene()
287 |         }
288 |       },
289 |       // Processing
290 |       getConnectionPos (block, slotNumber, isInput) {
291 |         if (!block || slotNumber === -1) {
292 |           return undefined
293 |         }
294 | 
295 |         let x = 0
296 |         let y = 0
297 | 
298 |         x += block.x
299 |         y += block.y
300 | 
301 |         y += this.optionsForChild.titleHeight
302 | 
303 |         if (isInput && block.inputs.length > slotNumber) {
304 |         } else if (!isInput && block.outputs.length > slotNumber) {
305 |           x += this.optionsForChild.width
306 |         } else {
307 |           console.error('slot ' + slotNumber + ' not found, is input: ' + isInput, block)
308 |           return undefined
309 |         }
310 | 
311 |         // (height / 2 + blockBorder + padding)
312 |         y += (16 / 2 + 1 + 2)
313 |         //  + (height * slotNumber)
314 |         y += (16 * slotNumber)
315 | 
316 |         x *= this.scale
317 |         y *= this.scale
318 | 
319 |         x += this.centerX
320 |         y += this.centerY
321 | 
322 |         return {x: x, y: y}
323 |       },
324 |       // Linking
325 |       linkingStart (block, slotNumber) {
326 |         this.linkStartData = {block: block, slotNumber: slotNumber}
327 |         let linkStartPos = this.getConnectionPos(this.linkStartData.block, this.linkStartData.slotNumber, false)
328 |         this.tempLink = {
329 |           x1: linkStartPos.x,
330 |           y1: linkStartPos.y,
331 |           x2: this.mouseX,
332 |           y2: this.mouseY
333 |         }
334 | 
335 |         this.linking = true
336 |       },
337 |       linkingStop (targetBlock, slotNumber) {
338 |         if (this.linkStartData && targetBlock && slotNumber > -1) {
339 |           this.links = this.links.filter(value => {
340 |             return !(value.targetID === targetBlock.id && value.targetSlot === slotNumber)
341 |           })
342 | 
343 |           let maxID = Math.max(0, ...this.links.map(function (o) {
344 |             return o.id
345 |           }))
346 | 
347 |           // skip if looping
348 |           if (this.linkStartData.block.id !== targetBlock.id) {
349 |             this.links.push({
350 |               id: maxID + 1,
351 |               originID: this.linkStartData.block.id,
352 |               originSlot: this.linkStartData.slotNumber,
353 |               targetID: targetBlock.id,
354 |               targetSlot: slotNumber
355 |             })
356 |             this.updateScene()
357 |           }
358 |         }
359 | 
360 |         this.linking = false
361 |         this.tempLink = null
362 |         this.linkStartData = null
363 |       },
364 |       linkingBreak (targetBlock, slotNumber) {
365 |         if (targetBlock && slotNumber > -1) {
366 |           let findLink = this.links.find(value => {
367 |             return value.targetID === targetBlock.id && value.targetSlot === slotNumber
368 |           })
369 | 
370 |           if (findLink) {
371 |             let findBlock = this.blocks.find(value => {
372 |               return value.id === findLink.originID
373 |             })
374 | 
375 |             this.links = this.links.filter(value => {
376 |               return !(value.targetID === targetBlock.id && value.targetSlot === slotNumber)
377 |             })
378 | 
379 |             this.linkingStart(findBlock, findLink.originSlot)
380 | 
381 |             this.updateScene()
382 |           }
383 |         }
384 |       },
385 |       removeLink (linkID) {
386 |         this.links = this.links.filter(value => {
387 |           return !(value.id === linkID)
388 |         })
389 |       },
390 |       // Blocks
391 |       addNewBlock (nodeName, x, y) {
392 |         let maxID = Math.max(0, ...this.blocks.map(function (o) {
393 |           return o.id
394 |         }))
395 | 
396 |         let node = this.nodes.find(n => {
397 |           return n.name === nodeName
398 |         })
399 | 
400 |         if (!node) {
401 |           return
402 |         }
403 |         let block = this.createBlock(node, maxID + 1)
404 | 
405 |         // if x or y not set, place block to center
406 |         if (x === undefined || y === undefined) {
407 |           x = (this.$el.clientWidth / 2 - this.centerX) / this.scale
408 |           y = (this.$el.clientHeight / 2 - this.centerY) / this.scale
409 |         } else {
410 |           x = (x - this.centerX) / this.scale
411 |           y = (y - this.centerY) / this.scale
412 |         }
413 | 
414 |         block.x = x
415 |         block.y = y
416 |         this.blocks.push(block)
417 | 
418 |         this.updateScene()
419 |       },
420 |       createBlock (node, id) {
421 |         let inputs = []
422 |         let outputs = []
423 |         let values = {}
424 | 
425 |         node.fields.forEach(field => {
426 |           if (field.attr === 'input') {
427 |             inputs.push({
428 |               name: field.name,
429 |               label: field.label || field.name
430 |             })
431 |           } else if (field.attr === 'output') {
432 |             outputs.push({
433 |               name: field.name,
434 |               label: field.label || field.name
435 |             })
436 |           } else {
437 |             if (!values[field.attr]) {
438 |               values[field.attr] = {}
439 |             }
440 | 
441 |             let newField = merge({}, field)
442 |             delete newField['name']
443 |             delete newField['attr']
444 | 
445 |             if (!values[field.attr][field.name]) {
446 |               values[field.attr][field.name] = {}
447 |             }
448 | 
449 |             values[field.attr][field.name] = newField
450 |           }
451 |         })
452 | 
453 |         return {
454 |           id: id,
455 |           x: 0,
456 |           y: 0,
457 |           selected: false,
458 |           name: node.name,
459 |           title: node.title || node.name,
460 |           inputs: inputs,
461 |           outputs: outputs,
462 |           values: values
463 |         }
464 |       },
465 |       deselectAll (withoutID = null) {
466 |         this.blocks.forEach((value) => {
467 |           if (value.id !== withoutID && value.selected) {
468 |             this.blockDeselect(value)
469 |           }
470 |         })
471 |       },
472 |       // Events
473 |       blockSelect (block) {
474 |         block.selected = true
475 |         this.selectedBlock = block
476 |         this.deselectAll(block.id)
477 |         this.$emit('blockSelect', block)
478 |       },
479 |       blockDeselect (block) {
480 |         block.selected = false
481 | 
482 |         if (block &&
483 |           this.selectedBlock &&
484 |           this.selectedBlock.id === block.id
485 |         ) {
486 |           this.selectedBlock = null
487 |         }
488 | 
489 |         this.$emit('blockDeselect', block)
490 |       },
491 |       blockDelete (block) {
492 |         if (block.selected) {
493 |           this.blockDeselect(block)
494 |         }
495 |         this.links.forEach(l => {
496 |           if (l.originID === block.id || l.targetID === block.id) {
497 |             this.removeLink(l.id)
498 |           }
499 |         })
500 |         this.blocks = this.blocks.filter(b => {
501 |           return b.id !== block.id
502 |         })
503 |         this.updateScene()
504 |       },
505 |       //
506 |       prepareBlocks (blocks) {
507 |         return blocks.map(block => {
508 |           let node = this.nodes.find(n => {
509 |             return n.name === block.name
510 |           })
511 | 
512 |           if (!node) {
513 |             return null
514 |           }
515 | 
516 |           let newBlock = this.createBlock(node, block.id)
517 | 
518 |           newBlock = merge(newBlock, block, {
519 |             arrayMerge: (d, s) => {
520 |               return s.length === 0 ? d : s
521 |             }
522 |           })
523 | 
524 |           return newBlock
525 |         }).filter(b => {
526 |           return !!b
527 |         })
528 |       },
529 |       prepareBlocksLinking (blocks, links) {
530 |         if (!blocks) {
531 |           return []
532 |         }
533 | 
534 |         let newBlocks = []
535 | 
536 |         blocks.forEach(block => {
537 |           let inputs = links.filter(link => {
538 |             return link.targetID === block.id
539 |           })
540 | 
541 |           let outputs = links.filter(link => {
542 |             return link.originID === block.id
543 |           })
544 | 
545 |           block.inputs.forEach((s, index) => {
546 |             // is linked
547 |             block.inputs[index].active = inputs.some(i => i.targetSlot === index)
548 |           })
549 | 
550 |           block.outputs.forEach((s, index) => {
551 |             // is linked
552 |             block.outputs[index].active = outputs.some(i => i.originSlot === index)
553 |           })
554 | 
555 |           newBlocks.push(block)
556 |         })
557 | 
558 |         return newBlocks
559 |       },
560 |       importBlocksContent () {
561 |         if (this.blocksContent) {
562 |           this.nodes = merge([], this.blocksContent)
563 |         }
564 |       },
565 |       importScene () {
566 |         let scene = merge(this.defaultScene, this.scene)
567 | 
568 |         let blocks = this.prepareBlocks(scene.blocks)
569 |         blocks = this.prepareBlocksLinking(blocks, scene.links)
570 | 
571 |         // set last selected after update blocks from props
572 |         if (this.selectedBlock) {
573 |           let block = blocks.find(b => this.selectedBlock.id === b.id)
574 |           if (block) {
575 |             block.selected = true
576 |           }
577 |         }
578 | 
579 |         this.blocks = blocks
580 |         this.links = merge([], scene.links)
581 | 
582 |         let container = scene.container
583 |         if (container.centerX) {
584 |           this.centerX = container.centerX
585 |         }
586 |         if (container.centerY) {
587 |           this.centerY = container.centerY
588 |         }
589 |         if (container.scale) {
590 |           this.scale = container.scale
591 |         }
592 |       },
593 |       exportScene () {
594 |         let clonedBlocks = merge([], this.blocks)
595 |         let blocks = clonedBlocks.map(value => {
596 |           delete value['inputs']
597 |           delete value['outputs']
598 |           delete value['selected']
599 | 
600 |           return value
601 |         })
602 | 
603 |         return {
604 |           blocks: blocks,
605 |           links: this.links,
606 |           container: this.container
607 |         }
608 |       },
609 |       updateScene () {
610 |         this.$emit('update:scene', this.exportScene())
611 |       }
612 |     },
613 |     watch: {
614 |       blocksContent () {
615 |         this.importBlocksContent()
616 |       },
617 |       scene () {
618 |         this.importScene()
619 |       }
620 |     }
621 |   }
622 | </script>
623 | 
624 | <style lang="less" scoped>
625 |   .vue-container {
626 |     position: relative;
627 |     overflow: hidden;
628 |     box-sizing: border-box;
629 |   }
630 | </style>
631 | 


--------------------------------------------------------------------------------
/src/components/VueLink.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <svg width="100%" height="100%">
  3 |     <g v-for="p in renderedPathes" >
  4 |       <path v-if="outline" :d="p.data" :style="p.outlineStyle"></path>
  5 |       <path :d="p.data" :style="p.style"></path>
  6 |     </g>
  7 |     <g>
  8 |       <path v-for="a in renderedArrows"
  9 |         d="M -1 -1 L 0 1 L 1 -1 z"
 10 |         :style="a.style"
 11 |         :transform="a.transform"></path>
 12 |     </g>
 13 |   </svg>
 14 | </template>
 15 | 
 16 | <script>
 17 |   export default {
 18 |     props: {
 19 |       lines: {
 20 |         type: Array,
 21 |         default () {
 22 |           return []
 23 |         }
 24 |       },
 25 |       outline: {
 26 |         type: Boolean,
 27 |         default: false
 28 |       }
 29 |     },
 30 |     methods: {
 31 |       distance (x1, y1, x2, y2) {
 32 |         return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1))
 33 |       },
 34 |       computeConnectionPoint (x1, y1, x2, y2, t) {
 35 |         let dist = this.distance(x1, y1, x2, y2)
 36 |         let p0 = {x: x1, y: y1}
 37 |         let p1 = {x: x1 + dist * 0.25, y: y1}
 38 |         let p2 = {x: x2 - dist * 0.25, y: y2}
 39 |         let p3 = {x: x2, y: y2}
 40 | 
 41 |         let c1 = (1 - t) * (1 - t) * (1 - t)
 42 |         let c2 = 3 * ((1 - t) * (1 - t)) * t
 43 |         let c3 = 3 * (1 - t) * (t * t)
 44 |         let c4 = t * t * t
 45 | 
 46 |         let x = c1 * p0.x + c2 * p1.x + c3 * p2.x + c4 * p3.x
 47 |         let y = c1 * p0.y + c2 * p1.y + c3 * p2.y + c4 * p3.y
 48 |         return {x: x, y: y}
 49 |       }
 50 |     },
 51 |     computed: {
 52 |       renderedPathes () {
 53 |         if (!this.lines) {
 54 |           return []
 55 |         }
 56 | 
 57 |         let pathes = []
 58 |         this.lines.forEach(l => {
 59 |           let dist = this.distance(l.x1, l.y1, l.x2, l.y2) * 0.25
 60 |           pathes.push({
 61 |             data: `M ${l.x1}, ${l.y1} C ${(l.x1 + dist)}, ${l.y1}, ${(l.x2 - dist)}, ${l.y2}, ${l.x2}, ${l.y2}`,
 62 |             style: l.style,
 63 |             outlineStyle: l.outlineStyle
 64 |           })
 65 |         })
 66 | 
 67 |         return pathes
 68 |       },
 69 |       renderedArrows () {
 70 |         if (!this.lines) {
 71 |           return []
 72 |         }
 73 | 
 74 |         let arrows = []
 75 |         this.lines.forEach(l => {
 76 |           // l.x1, l.y1, l.x2, l.y2
 77 |           let pos = this.computeConnectionPoint(l.x1, l.y1, l.x2, l.y2, 0.5)
 78 |           let pos2 = this.computeConnectionPoint(l.x1, l.y1, l.x2, l.y2, 0.51)
 79 | 
 80 |           let angle = -Math.atan2(pos2.x - pos.x, pos2.y - pos.y)
 81 |           let degrees = (angle >= 0 ? angle : (2 * Math.PI + angle)) * 180 / Math.PI
 82 | 
 83 |           arrows.push({
 84 |             transform: `translate(${pos.x}, ${pos.y}) rotate(${degrees})`,
 85 |             style: {
 86 |               stroke: l.style.stroke,
 87 |               strokeWidth: l.style.strokeWidth * 2,
 88 |               fill: l.style.stroke
 89 |             }
 90 |           })
 91 |         })
 92 | 
 93 |         return arrows
 94 |       }
 95 |     }
 96 |   }
 97 | </script>
 98 | 
 99 | <style scoped>
100 | 
101 | </style>
102 | 


--------------------------------------------------------------------------------
/src/helpers/dom.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @param element {HTMLElement}
 3 |  * @return {{top: number, left: number}}
 4 |  */
 5 | export function getOffsetRect (element) {
 6 |   let box = element.getBoundingClientRect()
 7 | 
 8 |   let scrollTop = window.pageYOffset
 9 |   let scrollLeft = window.pageXOffset
10 | 
11 |   let top = box.top + scrollTop
12 |   let left = box.left + scrollLeft
13 | 
14 |   return {top: Math.round(top), left: Math.round(left)}
15 | }
16 | 
17 | export default {
18 |   getOffsetRect
19 | }
20 | 


--------------------------------------------------------------------------------
/src/helpers/mouse.js:
--------------------------------------------------------------------------------
 1 | import {getOffsetRect} from './dom'
 2 | 
 3 | /**
 4 |  * @param event {MouseEvent}
 5 |  * @param element {HTMLElement}
 6 |  * @return {{x: number, y: number}}
 7 |  */
 8 | export function getMousePosition (element, event) {
 9 |   let mouseX = event.pageX || event.clientX + document.documentElement.scrollLeft
10 |   let mouseY = event.pageY || event.clientY + document.documentElement.scrollTop
11 | 
12 |   let offset = getOffsetRect(element)
13 |   let x = mouseX - offset.left
14 |   let y = mouseY - offset.top
15 | 
16 |   return {
17 |     x: x,
18 |     y: y
19 |   }
20 | }
21 | 
22 | export default {
23 |   getMousePosition
24 | }
25 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export {default} from './components/VueBlocksContainer'
2 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |     render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     publicPath: "",
3 | }
4 | 


--------------------------------------------------------------------------------