From df84ce51b761798dcfcdb2e4ee3ec3b08df72407 Mon Sep 17 00:00:00 2001
From: Rafal <qyloxe@gmail.com>
Date: Wed, 22 Apr 2020 00:04:03 +0200
Subject: [PATCH 1/9] fix: eslint - key in v-for, no empty css rulesets

---
 src/App.vue                         | 12 ++++++------
 src/components/VueBlock.vue         |  6 ++++--
 src/components/VueBlockProperty.vue |  4 +++-
 src/components/VueLink.vue          |  4 ++--
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6029f6ef..d3e27c16 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,9 +12,9 @@
     <VueBlockProperty :property="selectedBlockProperty" @save="saveProperty"/>
     <label>
       <select name="type" v-model="selectedType">
-        <template v-for="type in selectBlocksType">
-          <optgroup :label="type">
-            <option v-for="block in filteredBlocks(type)" :value="block.name">{{block.title || block.name}}</option>
+        <template v-for="(type, index) in selectBlocksType">
+          <optgroup :label="type" :key="index">
+            <option v-for="(block, index) in filteredBlocks(type)" :value="block.name" :key="index">{{block.title || block.name}}</option>
           </optgroup>
         </template>
       </select>
@@ -28,9 +28,9 @@
     <ul id="contextMenu" ref="contextMenu" tabindex="-1" v-show="contextMenu.isShow"
         @blur="closeContextMenu"
         :style="{top: contextMenu.top + 'px', left: contextMenu.left + 'px'}">
-      <template v-for="type in selectBlocksType">
-        <li class="label">{{type}}</li>
-        <li v-for="block in filteredBlocks(type)"
+      <template v-for="(type, index) in selectBlocksType">
+        <li class="label" :key="index">{{type}}</li>
+        <li v-for="(block, index) in filteredBlocks(type)" :key="index"
             @click="addBlockContextMenu(block.name)">{{block.title || block.name}}
         </li>
       </template>
diff --git a/src/components/VueBlock.vue b/src/components/VueBlock.vue
index a074c7ec..0975d34f 100644
--- a/src/components/VueBlock.vue
+++ b/src/components/VueBlock.vue
@@ -5,7 +5,7 @@
       <a class="delete" @click="deleteBlock">x</a>
     </header>
     <div class="inputs">
-      <div class="input" v-for="(slot, index) in inputs">
+      <div class="input" v-for="(slot, index) in inputs" :key="index">
         <div class="circle inputSlot" :class="{active: slot.active}"
              @mouseup="slotMouseUp($event, index)"
              @mousedown="slotBreak($event, index)"></div>
@@ -13,7 +13,7 @@
       </div>
     </div>
     <div class="outputs">
-      <div class="output" v-for="(slot, index) in outputs">
+      <div class="output" v-for="(slot, index) in outputs" :key="index">
         <div class="circle" :class="{active: slot.active}"
              @mousedown="slotMouseDown($event, index)"></div>
         {{slot.label}}
@@ -256,8 +256,10 @@
       overflow: hidden;
       font-size: @ioFontSize;
 
+      /* empty ruleset..
       &:last-child {
       }
+      */
     }
 
     .input {
diff --git a/src/components/VueBlockProperty.vue b/src/components/VueBlockProperty.vue
index d2bce0ec..1e62fbfd 100644
--- a/src/components/VueBlockProperty.vue
+++ b/src/components/VueBlockProperty.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="blocks-properties">
-    <div class="property" v-for="p in properties">
+    <div class="property" v-for="(p, index) in properties" :key="index">
       <label :for="p.name">{{p.label||p.name}}:</label>
       <br>
       <input type="text" v-model="p.value">
@@ -47,8 +47,10 @@
 
     background: #ffffff;
     border: 1px solid red;
+    /* empty ruleset..
     .property {
 
     }
+    */
   }
 </style>
diff --git a/src/components/VueLink.vue b/src/components/VueLink.vue
index 7faf68df..09523530 100644
--- a/src/components/VueLink.vue
+++ b/src/components/VueLink.vue
@@ -1,11 +1,11 @@
 <template>
   <svg width="100%" height="100%">
-    <g v-for="p in renderedPathes" >
+    <g v-for="(p, index) in renderedPathes" :key="index">
       <path v-if="outline" :d="p.data" :style="p.outlineStyle"></path>
       <path :d="p.data" :style="p.style"></path>
     </g>
     <g>
-      <path v-for="a in renderedArrows"
+      <path v-for="(a, index) in renderedArrows" :key="index"
         d="M -1 -1 L 0 1 L 1 -1 z"
         :style="a.style"
         :transform="a.transform"></path>

From 464b279b3e3e4928a6e4045fbec440c109bb9f9b Mon Sep 17 00:00:00 2001
From: Rafal <qyloxe@gmail.com>
Date: Wed, 22 Apr 2020 00:22:32 +0200
Subject: [PATCH 2/9] fix to fix v-fors

---
 src/App.vue                         | 4 ++--
 src/components/VueBlock.vue         | 4 ++--
 src/components/VueBlockProperty.vue | 2 +-
 src/components/VueLink.vue          | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d3e27c16..ce23ad74 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,7 @@
       <select name="type" v-model="selectedType">
         <template v-for="(type, index) in selectBlocksType">
           <optgroup :label="type" :key="index">
-            <option v-for="(block, index) in filteredBlocks(type)" :value="block.name" :key="index">{{block.title || block.name}}</option>
+            <option v-for="block in filteredBlocks(type)" :value="block.name" :key="block.id">{{block.title || block.name}}</option>
           </optgroup>
         </template>
       </select>
@@ -30,7 +30,7 @@
         :style="{top: contextMenu.top + 'px', left: contextMenu.left + 'px'}">
       <template v-for="(type, index) in selectBlocksType">
         <li class="label" :key="index">{{type}}</li>
-        <li v-for="(block, index) in filteredBlocks(type)" :key="index"
+        <li v-for="block in filteredBlocks(type)" :key="block.id"
             @click="addBlockContextMenu(block.name)">{{block.title || block.name}}
         </li>
       </template>
diff --git a/src/components/VueBlock.vue b/src/components/VueBlock.vue
index 0975d34f..fa54f1a7 100644
--- a/src/components/VueBlock.vue
+++ b/src/components/VueBlock.vue
@@ -5,7 +5,7 @@
       <a class="delete" @click="deleteBlock">x</a>
     </header>
     <div class="inputs">
-      <div class="input" v-for="(slot, index) in inputs" :key="index">
+      <div class="input" v-for="(slot, index) in inputs" :key="'i'+index">
         <div class="circle inputSlot" :class="{active: slot.active}"
              @mouseup="slotMouseUp($event, index)"
              @mousedown="slotBreak($event, index)"></div>
@@ -13,7 +13,7 @@
       </div>
     </div>
     <div class="outputs">
-      <div class="output" v-for="(slot, index) in outputs" :key="index">
+      <div class="output" v-for="(slot, index) in outputs" :key="'o'+index">
         <div class="circle" :class="{active: slot.active}"
              @mousedown="slotMouseDown($event, index)"></div>
         {{slot.label}}
diff --git a/src/components/VueBlockProperty.vue b/src/components/VueBlockProperty.vue
index 1e62fbfd..f833f8e3 100644
--- a/src/components/VueBlockProperty.vue
+++ b/src/components/VueBlockProperty.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="blocks-properties">
-    <div class="property" v-for="(p, index) in properties" :key="index">
+    <div class="property" v-for="(p, index) in properties" :key="'p'+index">
       <label :for="p.name">{{p.label||p.name}}:</label>
       <br>
       <input type="text" v-model="p.value">
diff --git a/src/components/VueLink.vue b/src/components/VueLink.vue
index 09523530..add74f72 100644
--- a/src/components/VueLink.vue
+++ b/src/components/VueLink.vue
@@ -1,11 +1,11 @@
 <template>
   <svg width="100%" height="100%">
-    <g v-for="(p, index) in renderedPathes" :key="index">
+    <g v-for="(p, index) in renderedPathes" :key="'g'+index">
       <path v-if="outline" :d="p.data" :style="p.outlineStyle"></path>
       <path :d="p.data" :style="p.style"></path>
     </g>
     <g>
-      <path v-for="(a, index) in renderedArrows" :key="index"
+      <path v-for="(a, index) in renderedArrows" :key="'a'+index"
         d="M -1 -1 L 0 1 L 1 -1 z"
         :style="a.style"
         :transform="a.transform"></path>

From 08f4d6e10229e31e369d71c7e320c08aa5793a09 Mon Sep 17 00:00:00 2001
From: Rafal <qyloxe@gmail.com>
Date: Wed, 22 Apr 2020 01:03:34 +0200
Subject: [PATCH 3/9] custom styles for links

---
 README.md                             | 13 +++++++++++-
 src/App.vue                           | 14 ++++++++++++-
 src/components/VueBlocksContainer.vue | 30 ++++++++++++++++++---------
 3 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 7701ba75..5c26fdf1 100644
--- a/README.md
+++ b/README.md
@@ -203,7 +203,18 @@ Object `BlockLinks`:
   originID: number, // Origin block ID
   originSlot: number, // Origin block slot number
   targetID: number, // Target block ID
-  targetSlot: number // Target block slot number
+  targetSlot: number, // Target block slot number
+  style: { // OPTIONAL svg path style
+    stroke: string, // default: '#F00'
+    strokeWidth: number, // default: 4 - multiplied by current scale
+    fill: string // default: 'none'
+  },
+  outlineStyle: { // OPTIONAL svg path outline style
+    stroke: string, // default: '#0F0'
+    strokeWidth: number, // default: 6 - multiplied by current scale
+    strokeOpacity: number, // default: 0.6
+    fill: string // default: 'none'
+  }
 }
 ```
 
diff --git a/src/App.vue b/src/App.vue
index ce23ad74..ae72a12e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -458,7 +458,19 @@
               originID: 2,
               originSlot: 0,
               targetID: 4,
-              targetSlot: 0
+              targetSlot: 0,
+              style: {
+                stroke: '#F00',
+                strokeWidth: 4,
+                fill: 'none',
+                strokeDasharray: '10, 5'
+              },
+              outlineStyle: {
+                stroke: '#0F0',
+                strokeWidth: 6,
+                strokeOpacity: 0.6,
+                fill: 'none'
+              }
             },
             {
               id: 6,
diff --git a/src/components/VueBlocksContainer.vue b/src/components/VueBlocksContainer.vue
index feb76f37..2ed2267b 100644
--- a/src/components/VueBlocksContainer.vue
+++ b/src/components/VueBlocksContainer.vue
@@ -159,22 +159,32 @@
           let x2 = targetLinkPos.x
           let y2 = targetLinkPos.y
 
-          lines.push({
-            x1: x1,
-            y1: y1,
-            x2: x2,
-            y2: y2,
-            style: {
+          const style = {
+            ...{
               stroke: '#F85',
-              strokeWidth: 4 * this.scale,
+              strokeWidth: 4,
               fill: 'none'
             },
-            outlineStyle: {
+            ...link.style
+          }
+          style.strokeWidth *= this.scale
+          const outlineStyle = {
+            ...{
               stroke: '#666',
-              strokeWidth: 6 * this.scale,
+              strokeWidth: 6,
               strokeOpacity: 0.6,
               fill: 'none'
-            }
+            },
+            ...link.outlineStyle
+          }
+          outlineStyle.strokeWidth *= this.scale
+          lines.push({
+            x1: x1,
+            y1: y1,
+            x2: x2,
+            y2: y2,
+            style: style,
+            outlineStyle: outlineStyle
           })
         }
 

From 56ce06eb9d385163414a066618c0c07cdc51d85d Mon Sep 17 00:00:00 2001
From: Rafal <qyloxe@gmail.com>
Date: Wed, 22 Apr 2020 02:29:10 +0200
Subject: [PATCH 4/9] feat: custom styles for blocks fix links names

---
 README.md                             | 15 ++++++-
 src/App.vue                           | 22 ++++++++--
 src/components/VueBlock.vue           | 62 +++++++++++++++++++++++----
 src/components/VueBlocksContainer.vue | 18 ++++----
 src/components/VueLink.vue            | 18 ++++----
 5 files changed, 103 insertions(+), 32 deletions(-)

diff --git a/README.md b/README.md
index 5c26fdf1..ab3548eb 100644
--- a/README.md
+++ b/README.md
@@ -192,6 +192,17 @@ Object `Block`:
     customAttribute: [ // show "NodeField"
       name: NodeField (without name and attr fields)
     ]
+  },
+  styleBlock: { // OPTIONAL block styles
+  },
+  styleHeader: { OPTIONAL header styles
+  },
+  styleDelete: { OPTIONAL delete button styles
+  },
+  deleteMark: 'del', OPTIONAL delete button content - default: unicode character "✖"
+  styleInputs: { OPTIONAL inputs styles
+  },
+  styleOutputs: { OPTIONAL outputs styles
   }
 }
 ```
@@ -204,12 +215,12 @@ Object `BlockLinks`:
   originSlot: number, // Origin block slot number
   targetID: number, // Target block ID
   targetSlot: number, // Target block slot number
-  style: { // OPTIONAL svg path style
+  styleLink: { // OPTIONAL svg path styles
     stroke: string, // default: '#F00'
     strokeWidth: number, // default: 4 - multiplied by current scale
     fill: string // default: 'none'
   },
-  outlineStyle: { // OPTIONAL svg path outline style
+  styleOutline: { // OPTIONAL svg path outline styles
     stroke: string, // default: '#0F0'
     strokeWidth: number, // default: 6 - multiplied by current scale
     strokeOpacity: number, // default: 0.6
diff --git a/src/App.vue b/src/App.vue
index ae72a12e..2c80f8e6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -225,7 +225,7 @@
               id: 2,
               x: -700,
               y: -69,
-              name: 'Chat message',
+              name: 'text',
               title: 'Chat message',
               values: {
                 property: [
@@ -234,6 +234,22 @@
                     type: 'string'
                   }
                 ]
+              },
+              styleBlock: {
+                backgroundColor: "yellow"
+              },
+              styleHeader: {
+                backgroundColor: "green"
+              },
+              styleDelete: {
+                color: "black"
+              },
+              deleteMark: 'del',
+              styleInputs: {
+                fontWeight: 'bolder'
+              },
+              styleOutputs: {
+                fontWeight: 'lighter'
               }
             },
             {
@@ -459,13 +475,13 @@
               originSlot: 0,
               targetID: 4,
               targetSlot: 0,
-              style: {
+              styleLink: {
                 stroke: '#F00',
                 strokeWidth: 4,
                 fill: 'none',
                 strokeDasharray: '10, 5'
               },
-              outlineStyle: {
+              styleOutline: {
                 stroke: '#0F0',
                 strokeWidth: 6,
                 strokeOpacity: 0.6,
diff --git a/src/components/VueBlock.vue b/src/components/VueBlock.vue
index fa54f1a7..cfde9f7e 100644
--- a/src/components/VueBlock.vue
+++ b/src/components/VueBlock.vue
@@ -2,9 +2,9 @@
   <div class="vue-block" :class="{selected: selected}" :style="style">
     <header :style="headerStyle">
       {{title}}
-      <a class="delete" @click="deleteBlock">x</a>
+      <span class="delete" @click="deleteBlock" :style="deleteStyle">{{deleteMark}}</span>
     </header>
-    <div class="inputs">
+    <div class="inputs" :style="inputsStyle">
       <div class="input" v-for="(slot, index) in inputs" :key="'i'+index">
         <div class="circle inputSlot" :class="{active: slot.active}"
              @mouseup="slotMouseUp($event, index)"
@@ -12,7 +12,7 @@
         {{slot.label}}
       </div>
     </div>
-    <div class="outputs">
+    <div class="outputs" :style="outputsStyle">
       <div class="output" v-for="(slot, index) in outputs" :key="'o'+index">
         <div class="circle" :class="{active: slot.active}"
              @mousedown="slotMouseDown($event, index)"></div>
@@ -50,6 +50,25 @@
 
       options: {
         type: Object
+      },
+      styleBlock: {
+        type: Object
+      },
+      styleHeader: {
+        type: Object
+      },
+      deleteMark: {
+        type: String,
+        default: '✖'
+      },
+      styleDelete: {
+        type: Object
+      },
+      styleInputs: {
+        type: Object
+      },
+      styleOutputs: {
+        type: Object
       }
     },
     created () {
@@ -159,16 +178,40 @@
     computed: {
       style () {
         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'
+          ...{
+            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'
+          },
+          ...this.styleBlock
         }
       },
       headerStyle () {
         return {
-          height: this.options.titleHeight + 'px'
+          ...{
+            height: this.options.titleHeight + 'px'
+          },
+          ...this.styleHeader
+        }
+      },
+      deleteStyle () {
+        return {
+          ...{},
+          ...this.styleDelete
+        }
+      },
+      inputsStyle () {
+        return {
+          ...{},
+          ...this.styleInputs
+        }
+      },
+      outputsStyle () {
+        return {
+          ...{},
+          ...this.styleOutputs
         }
       }
     }
@@ -214,6 +257,7 @@
         float: right;
         position: absolute;
         right: 5px;
+        top: -2px;
       }
     }
 
diff --git a/src/components/VueBlocksContainer.vue b/src/components/VueBlocksContainer.vue
index 2ed2267b..2eadd6a7 100644
--- a/src/components/VueBlocksContainer.vue
+++ b/src/components/VueBlocksContainer.vue
@@ -159,37 +159,37 @@
           let x2 = targetLinkPos.x
           let y2 = targetLinkPos.y
 
-          const style = {
+          const styleLink = {
             ...{
               stroke: '#F85',
               strokeWidth: 4,
               fill: 'none'
             },
-            ...link.style
+            ...link.styleLink
           }
-          style.strokeWidth *= this.scale
-          const outlineStyle = {
+          styleLink.strokeWidth *= this.scale
+          const styleOutline = {
             ...{
               stroke: '#666',
               strokeWidth: 6,
               strokeOpacity: 0.6,
               fill: 'none'
             },
-            ...link.outlineStyle
+            ...link.styleOutline
           }
-          outlineStyle.strokeWidth *= this.scale
+          styleOutline.strokeWidth *= this.scale
           lines.push({
             x1: x1,
             y1: y1,
             x2: x2,
             y2: y2,
-            style: style,
-            outlineStyle: outlineStyle
+            styleLink: styleLink,
+            styleOutline: styleOutline
           })
         }
 
         if (this.tempLink) {
-          this.tempLink.style = {
+          this.tempLink.styleLink = {
             stroke: '#8f8f8f',
             strokeWidth: 4 * this.scale,
             fill: 'none'
diff --git a/src/components/VueLink.vue b/src/components/VueLink.vue
index add74f72..a057bebf 100644
--- a/src/components/VueLink.vue
+++ b/src/components/VueLink.vue
@@ -1,13 +1,13 @@
 <template>
   <svg width="100%" height="100%">
     <g v-for="(p, index) in renderedPathes" :key="'g'+index">
-      <path v-if="outline" :d="p.data" :style="p.outlineStyle"></path>
-      <path :d="p.data" :style="p.style"></path>
+      <path v-if="outline" :d="p.data" :style="p.styleOutline"></path>
+      <path :d="p.data" :style="p.styleLink"></path>
     </g>
     <g>
       <path v-for="(a, index) in renderedArrows" :key="'a'+index"
         d="M -1 -1 L 0 1 L 1 -1 z"
-        :style="a.style"
+        :style="a.styleArrow"
         :transform="a.transform"></path>
     </g>
   </svg>
@@ -59,8 +59,8 @@
           let dist = this.distance(l.x1, l.y1, l.x2, l.y2) * 0.25
           pathes.push({
             data: `M ${l.x1}, ${l.y1} C ${(l.x1 + dist)}, ${l.y1}, ${(l.x2 - dist)}, ${l.y2}, ${l.x2}, ${l.y2}`,
-            style: l.style,
-            outlineStyle: l.outlineStyle
+            styleLink: l.styleLink,
+            styleOutline: l.styleOutline
           })
         })
 
@@ -82,10 +82,10 @@
 
           arrows.push({
             transform: `translate(${pos.x}, ${pos.y}) rotate(${degrees})`,
-            style: {
-              stroke: l.style.stroke,
-              strokeWidth: l.style.strokeWidth * 2,
-              fill: l.style.stroke
+            styleArrow: {
+              stroke: l.styleLink.stroke,
+              strokeWidth: l.styleLink.strokeWidth * 2,
+              fill: l.styleLink.stroke
             }
           })
         })

From e6588562224cb00503f062329dbfd779d60b5b30 Mon Sep 17 00:00:00 2001
From: Rafal <qyloxe@gmail.com>
Date: Wed, 22 Apr 2020 04:11:56 +0200
Subject: [PATCH 5/9] feat: html content property for blocks

---
 src/App.vue                 |  5 ++++-
 src/components/VueBlock.vue | 20 ++++++++++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2c80f8e6..f4bb836e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -227,6 +227,7 @@
               y: -69,
               name: 'text',
               title: 'Chat message',
+              content: 'hello world<hr>this is content<hr>',
               values: {
                 property: [
                   {
@@ -239,7 +240,9 @@
                 backgroundColor: "yellow"
               },
               styleHeader: {
-                backgroundColor: "green"
+                backgroundColor: "green",
+                fontSize: '14px',
+                fontFamily: 'Arial, Verdana'
               },
               styleDelete: {
                 color: "black"
diff --git a/src/components/VueBlock.vue b/src/components/VueBlock.vue
index cfde9f7e..ed59da06 100644
--- a/src/components/VueBlock.vue
+++ b/src/components/VueBlock.vue
@@ -12,6 +12,8 @@
         {{slot.label}}
       </div>
     </div>
+    <div class="content" v-html="content">
+    </div>
     <div class="outputs" :style="outputsStyle">
       <div class="output" v-for="(slot, index) in outputs" :key="'o'+index">
         <div class="circle" :class="{active: slot.active}"
@@ -45,9 +47,12 @@
         type: String,
         default: 'Title'
       },
+      content: {
+        type: String,
+        default: ''
+      },
       inputs: Array,
       outputs: Array,
-
       options: {
         type: Object
       },
@@ -265,13 +270,24 @@
       padding: @ioPaddingInner;
 
       display: block;
-      width: 50%;
+      width: 30%;
 
       > * {
         width: 100%;
       }
     }
 
+    .content {
+      padding: @ioPaddingInner;
+      display: block;
+      width: 40%;
+      float: left;
+      text-align: center;
+      > * {
+        width: 100%;
+      }
+    }
+
     .circle {
       box-sizing: border-box;
       margin-top: @ioHeight / 2 - @circleSize / 2;

From 9f037305026bb0c3307693f43ce08c4c1ffb6e6c Mon Sep 17 00:00:00 2001
From: Rafal <qyloxe@gmail.com>
Date: Wed, 22 Apr 2020 16:09:30 +0200
Subject: [PATCH 6/9] remove empty css remove top header css deleteMark as html

---
 src/App.vue                         | 2 +-
 src/components/VueBlock.vue         | 8 +-------
 src/components/VueBlockProperty.vue | 5 -----
 3 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f4bb836e..586a6511 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -247,7 +247,7 @@
               styleDelete: {
                 color: "black"
               },
-              deleteMark: 'del',
+              deleteMark: '<strong>d</strong><em>el</em>',
               styleInputs: {
                 fontWeight: 'bolder'
               },
diff --git a/src/components/VueBlock.vue b/src/components/VueBlock.vue
index ed59da06..d469915d 100644
--- a/src/components/VueBlock.vue
+++ b/src/components/VueBlock.vue
@@ -2,7 +2,7 @@
   <div class="vue-block" :class="{selected: selected}" :style="style">
     <header :style="headerStyle">
       {{title}}
-      <span class="delete" @click="deleteBlock" :style="deleteStyle">{{deleteMark}}</span>
+      <span class="delete" @click="deleteBlock" :style="deleteStyle" v-html="deleteMark"></span>
     </header>
     <div class="inputs" :style="inputsStyle">
       <div class="input" v-for="(slot, index) in inputs" :key="'i'+index">
@@ -262,7 +262,6 @@
         float: right;
         position: absolute;
         right: 5px;
-        top: -2px;
       }
     }
 
@@ -315,11 +314,6 @@
       height: @ioHeight;
       overflow: hidden;
       font-size: @ioFontSize;
-
-      /* empty ruleset..
-      &:last-child {
-      }
-      */
     }
 
     .input {
diff --git a/src/components/VueBlockProperty.vue b/src/components/VueBlockProperty.vue
index f833f8e3..1ab91826 100644
--- a/src/components/VueBlockProperty.vue
+++ b/src/components/VueBlockProperty.vue
@@ -47,10 +47,5 @@
 
     background: #ffffff;
     border: 1px solid red;
-    /* empty ruleset..
-    .property {
-
-    }
-    */
   }
 </style>

From fde1695ec8d0ea09087371ab031b9b28d8420c39 Mon Sep 17 00:00:00 2001
From: Rafal <qyloxe@gmail.com>
Date: Wed, 22 Apr 2020 16:37:15 +0200
Subject: [PATCH 7/9] feat: verbose console log checkbox

---
 src/App.vue | 34 ++++++++++++++++++++++++++--------
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 586a6511..ece4b059 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,6 +24,9 @@
     <label for="useContextMenu">
       <input type="checkbox" v-model="useContextMenu" id="useContextMenu">Use right click for Add blocks
     </label>
+    <label for="showJSONConsole">
+      <input type="checkbox" v-model="showJSONConsole" id="showJSONConsole">Verbose log on console
+    </label>
 
     <ul id="contextMenu" ref="contextMenu" tabindex="-1" v-show="contextMenu.isShow"
         @blur="closeContextMenu"
@@ -613,6 +616,7 @@
         selectedBlock: null,
         selectedType: 'delay',
         useContextMenu: true,
+        showJSONConsole: false,
         contextMenu: {
           isShow: false,
           mouseX: 0,
@@ -640,11 +644,15 @@
     },
     methods: {
       selectBlock (block) {
-        console.log('select', block)
+        if (this.showJSONConsole) {
+          console.log('select', block)
+        }
         this.selectedBlock = block
       },
       deselectBlock (block) {
-        console.log('deselect', block)
+        if (this.showJSONConsole) {
+          console.log('deselect', block)
+        }
         this.selectedBlock = null
       },
       filteredBlocks (type) {
@@ -653,11 +661,15 @@
         })
       },
       addBlock () {
-        console.log(this.selectedType)
+        if (this.showJSONConsole) {
+          console.log(this.selectedType)
+        }
         this.$refs.container.addNewBlock(this.selectedType)
       },
       saveProperty (val) {
-        console.log(val)
+        if (this.showJSONConsole) {
+          console.log(val)
+        }
 
         let scene = this.scene
         let block = scene.blocks.find(b => {
@@ -687,8 +699,10 @@
         let largestWidth = containerElRect.right - contextMenuEl.offsetWidth - border
         let largestHeight = containerElRect.bottom - contextMenuEl.offsetHeight - border
 
-        console.log(this.$refs.container)
-        console.log(containerElRect)
+        if (this.showJSONConsole) {
+          console.log(this.$refs.container)
+          console.log(containerElRect)
+        }
 
         if (left > largestWidth) left = largestWidth
         if (top > largestHeight) top = largestHeight
@@ -710,10 +724,14 @@
     },
     watch: {
       blocks (newValue) {
-        console.log('blocks', JSON.stringify(newValue))
+        if (this.showJSONConsole) {
+          console.log('blocks', JSON.stringify(newValue, null, 2))
+        }
       },
       scene (newValue) {
-        console.log('scene', JSON.stringify(newValue))
+        if (this.showJSONConsole) {
+          console.log('scene', JSON.stringify(newValue, null, 2))
+        }
       }
     }
   }

From a8465ef479ae73e842a56cb9d0981704731f7600 Mon Sep 17 00:00:00 2001
From: Rafal <qyloxe@gmail.com>
Date: Wed, 22 Apr 2020 22:33:18 +0200
Subject: [PATCH 8/9] feat: default styles at scene level

---
 README.md                             | 86 ++++++++++++++++++++++++++-
 src/App.vue                           | 39 +++++++++++-
 src/components/VueBlock.vue           | 16 ++++-
 src/components/VueBlocksContainer.vue | 72 +++++++++++++++++-----
 4 files changed, 192 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index ab3548eb..3473bcdf 100644
--- a/README.md
+++ b/README.md
@@ -95,6 +95,43 @@
             centerX: 0,
             centerY: 0,
             scale: 1
+          },
+          defaults: { // optional
+            styleBlock: {
+              backgroundColor: "orange"
+            },
+            styleHeader: {
+              backgroundColor: "aliceblue",
+              fontSize: '14px',
+              fontFamily: 'Arial, Verdana'
+            },
+            styleDelete: {
+              color: "black"
+            },
+            deleteMark: '',
+            styleInputs: {
+              fontWeight: 'bolder'
+            },
+            styleOutputs: {
+              fontWeight: 'lighter'
+            },
+            styleLink: {
+              stroke: '#F00',
+              strokeWidth: 4,
+              fill: 'none',
+              strokeDasharray: '10, 5'
+            },
+            styleOutline: {
+              stroke: '#0F0',
+              strokeWidth: 6,
+              strokeOpacity: 0.6,
+              fill: 'none'
+            },
+            styleTempLink: {
+              stroke: '#0000ff',
+              strokeWidth: 4,
+              fill: 'none'
+            }
           }
         }
       }
@@ -163,7 +200,8 @@ Default:
 {
   blocks: [],
   links: [],
-  container: {}
+  container: {},
+  defaults: {}
 }
 ```
 
@@ -176,7 +214,8 @@ Object `Scene`:
    centerX: number
    centerY: number
    scale: number
-  }
+  },
+  defaults: Object.<Defaults>
 }
 ```
 
@@ -229,6 +268,49 @@ Object `BlockLinks`:
 }
 ```
 
+Object `Defaults`:
+
+Optional default styles for all objects:
+```
+{
+    styleBlock: {
+      backgroundColor: "orange"
+    },
+    styleHeader: {
+      backgroundColor: "aliceblue",
+      fontSize: '14px',
+      fontFamily: 'Arial, Verdana'
+    },
+    styleDelete: {
+      color: "black"
+    },
+    deleteMark: '',
+    styleInputs: {
+      fontWeight: 'bolder'
+    },
+    styleOutputs: {
+      fontWeight: 'lighter'
+    },
+    styleLink: {
+      stroke: '#F00',
+      strokeWidth: 4, // multiplied by current scale
+      fill: 'none',
+      strokeDasharray: '10, 5'
+    },
+    styleOutline: {
+      stroke: '#0F0',
+      strokeWidth: 6, // multiplied by current scale
+      strokeOpacity: 0.6,
+      fill: 'none'
+    },
+    styleTempLink: {
+      stroke: '#0000ff',
+      strokeWidth: 4, // multiplied by current scale
+      fill: 'none'
+    }
+}
+```
+
 ## Build Setup
 
 ``` bash
diff --git a/src/App.vue b/src/App.vue
index ece4b059..765cd216 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -250,7 +250,7 @@
               styleDelete: {
                 color: "black"
               },
-              deleteMark: '<strong>d</strong><em>el</em>',
+              deleteMark: '<strong>D</strong><em>d</em>',
               styleInputs: {
                 fontWeight: 'bolder'
               },
@@ -611,6 +611,43 @@
             centerX: 1042,
             centerY: 140,
             scale: 1
+          },
+          defaults: {
+            styleBlock: {
+              backgroundColor: "orange"
+            },
+            styleHeader: {
+              backgroundColor: "aliceblue",
+              fontSize: '14px',
+              fontFamily: 'Arial, Verdana'
+            },
+            styleDelete: {
+              color: "black"
+            },
+            deleteMark: '',
+            styleInputs: {
+              fontWeight: 'bolder'
+            },
+            styleOutputs: {
+              fontWeight: 'lighter'
+            },
+            styleLink: {
+              stroke: '#F00',
+              strokeWidth: 4,
+              fill: 'none',
+              strokeDasharray: '10, 5'
+            },
+            styleOutline: {
+              stroke: '#0F0',
+              strokeWidth: 6,
+              strokeOpacity: 0.6,
+              fill: 'none'
+            },
+            styleTempLink: {
+              stroke: '#0000ff',
+              strokeWidth: 4,
+              fill: 'none'
+            }
           }
         },
         selectedBlock: null,
diff --git a/src/components/VueBlock.vue b/src/components/VueBlock.vue
index d469915d..e2e6b7a9 100644
--- a/src/components/VueBlock.vue
+++ b/src/components/VueBlock.vue
@@ -2,7 +2,7 @@
   <div class="vue-block" :class="{selected: selected}" :style="style">
     <header :style="headerStyle">
       {{title}}
-      <span class="delete" @click="deleteBlock" :style="deleteStyle" v-html="deleteMark"></span>
+      <span class="delete" @click="deleteBlock" :style="deleteStyle" v-html="getDeleteMark"></span>
     </header>
     <div class="inputs" :style="inputsStyle">
       <div class="input" v-for="(slot, index) in inputs" :key="'i'+index">
@@ -64,7 +64,6 @@
       },
       deleteMark: {
         type: String,
-        default: '✖'
       },
       styleDelete: {
         type: Object
@@ -74,6 +73,9 @@
       },
       styleOutputs: {
         type: Object
+      },
+      defaults: {
+        type: Object
       }
     },
     created () {
@@ -190,32 +192,40 @@
             transform: 'scale(' + (this.options.scale + '') + ')',
             transformOrigin: 'top left'
           },
+          ...this.defaults.styleBlock,
           ...this.styleBlock
         }
       },
+      getDeleteMark () {
+        return this.deleteMark || this.defaults.deleteMark
+      },
       headerStyle () {
         return {
           ...{
             height: this.options.titleHeight + 'px'
           },
+          ...this.defaults.styleHeader,
           ...this.styleHeader
         }
       },
       deleteStyle () {
         return {
           ...{},
+          ...this.defaults.styleDelete,
           ...this.styleDelete
         }
       },
       inputsStyle () {
         return {
           ...{},
+          ...this.defaults.styleInputs,
           ...this.styleInputs
         }
       },
       outputsStyle () {
         return {
           ...{},
+          ...this.defaults.styleOutputs,
           ...this.styleOutputs
         }
       }
@@ -234,6 +244,7 @@
   @circleSize: 10px;
   @circleMargin: 2px; // left/right
 
+  @circleColor: #FFFFFF;
   @circleNewColor: #00FF00;
   @circleRemoveColor: #FF0000;
   @circleConnectedColor: #FFFF00;
@@ -296,6 +307,7 @@
 
       border: @circleBorder solid rgba(0, 0, 0, 0.5);
       border-radius: 100%;
+      background: @circleColor;
 
       cursor: crosshair;
       &.active {
diff --git a/src/components/VueBlocksContainer.vue b/src/components/VueBlocksContainer.vue
index 2eadd6a7..e7d0b6ed 100644
--- a/src/components/VueBlocksContainer.vue
+++ b/src/components/VueBlocksContainer.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="vue-container">
-    <VueLink :lines="lines"/>
+    <VueLink :lines="lines" />
     <VueBlock v-for="block in blocks"
               :key="block.id"
               v-bind.sync="block"
               :options="optionsForChild"
+              :defaults="defaults"
               @update="updateScene"
               @linkingStart="linkingStart(block, $event)"
               @linkingStop="linkingStop(block, $event)"
@@ -37,7 +38,7 @@
       },
       scene: {
         type: Object,
-        default: {blocks: [], links: [], container: {}}
+        default: {blocks: [], links: [], container: {}, defaults: {}}
       },
       options: {
         type: Object
@@ -83,6 +84,7 @@
       }
     },
     data () {
+      const defaults = this.scene.defaults || {}
       return {
         dragging: false,
         //
@@ -93,6 +95,54 @@
         nodes: [],
         blocks: [],
         links: [],
+        defaults: {
+          styleBlock: {
+            ...{},
+            ...defaults.styleBlock
+          },
+          styleHeader: {
+            ...{},
+            ...defaults.styleHeader
+          },
+          styleDelete: {
+            ...{},
+            ...defaults.styleDelete
+          },
+          deleteMark: defaults.deleteMark || '✖',
+          styleInputs: {
+            ...{},
+            ...defaults.styleInputs
+          },
+          styleOutputs: {
+            ...{},
+            ...defaults.styleOutputs
+          },
+          styleLink: {
+            ...{
+              stroke: '#F85',
+              strokeWidth: 4,
+              fill: 'none'
+            },
+            ...defaults.styleLink
+          },
+          styleOutline: {
+            ...{
+              stroke: '#666',
+              strokeWidth: 6,
+              strokeOpacity: 0.6,
+              fill: 'none'
+            },
+            ...defaults.styleOutline
+          },
+          styleTempLink: {
+            ...{
+              stroke: '#8f8f8f',
+              strokeWidth: 4,
+              fill: 'none'
+            },
+            ...defaults.styleTempLink
+          },
+        },
         //
         tempLink: null,
         selectedBlock: null,
@@ -160,21 +210,12 @@
           let y2 = targetLinkPos.y
 
           const styleLink = {
-            ...{
-              stroke: '#F85',
-              strokeWidth: 4,
-              fill: 'none'
-            },
+            ...this.defaults.styleLink,
             ...link.styleLink
           }
           styleLink.strokeWidth *= this.scale
           const styleOutline = {
-            ...{
-              stroke: '#666',
-              strokeWidth: 6,
-              strokeOpacity: 0.6,
-              fill: 'none'
-            },
+            ...this.defaults.styleOutline,
             ...link.styleOutline
           }
           styleOutline.strokeWidth *= this.scale
@@ -190,10 +231,9 @@
 
         if (this.tempLink) {
           this.tempLink.styleLink = {
-            stroke: '#8f8f8f',
-            strokeWidth: 4 * this.scale,
-            fill: 'none'
+            ...this.defaults.styleTempLink
           }
+          this.tempLink.styleLink.strokeWidth *= this.scale
 
           lines.push(this.tempLink)
         }

From cf476eb5d95cf6c0f820e56651497e42590b96e2 Mon Sep 17 00:00:00 2001
From: Rafal <qyloxe@gmail.com>
Date: Wed, 22 Apr 2020 22:55:56 +0200
Subject: [PATCH 9/9] hide console.logs in production

---
 src/App.vue                           |  6 +++---
 src/components/VueBlocksContainer.vue | 19 +++++++++++++++----
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 765cd216..af7c9d78 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -614,15 +614,15 @@
           },
           defaults: {
             styleBlock: {
-              backgroundColor: "orange"
+              backgroundColor: 'orange'
             },
             styleHeader: {
-              backgroundColor: "aliceblue",
+              backgroundColor: 'aliceblue',
               fontSize: '14px',
               fontFamily: 'Arial, Verdana'
             },
             styleDelete: {
-              color: "black"
+              color: 'black'
             },
             deleteMark: '',
             styleInputs: {
diff --git a/src/components/VueBlocksContainer.vue b/src/components/VueBlocksContainer.vue
index e7d0b6ed..98cfd925 100644
--- a/src/components/VueBlocksContainer.vue
+++ b/src/components/VueBlocksContainer.vue
@@ -105,7 +105,9 @@
             ...defaults.styleHeader
           },
           styleDelete: {
-            ...{},
+            ...{
+              color: 'red'
+            },
             ...defaults.styleDelete
           },
           deleteMark: defaults.deleteMark || '✖',
@@ -150,6 +152,9 @@
       }
     },
     computed: {
+      isProduction () {
+        return process.env.NODE_ENV === "production"
+      },
       optionsForChild () {
         return {
           width: 200,
@@ -183,13 +188,17 @@
           })
 
           if (!originBlock || !targetBlock) {
-            console.log('Remove invalid link', link)
+            if (!this.isProduction) {
+              console.log('Remove invalid link', link)
+            }
             this.removeLink(link.id)
             continue
           }
 
           if (originBlock.id === targetBlock.id) {
-            console.log('Loop detected, remove link', link)
+            if (!this.isProduction) {
+              console.log('Loop detected, remove link', link)
+            }
             this.removeLink(link.id)
             continue
           }
@@ -198,7 +207,9 @@
           let targetLinkPos = this.getConnectionPos(targetBlock, link.targetSlot, true)
 
           if (!originLinkPos || !targetLinkPos) {
-            console.log('Remove invalid link (slot not exist)', link)
+            if (!this.isProduction) {
+              console.log('Remove invalid link (slot not exist)', link)
+            }
             this.removeLink(link.id)
             continue
           }