Added nodeComponent property to FlowyNode.

src/App.vue

@@ -46,6 +46,7 @@
           :beforeAdd="beforeAdd"
           :beforeMove="beforeMove"
           :onEnterDragFn="onEnter"
+          :node-component='DemoNode'
         ></flowy>
       </div>
     </div>
@@ -55,90 +56,100 @@
 <script>
 /* eslint-disable vue/no-unused-components */
 /* eslint-disable no-unused-vars */
-import Vue from 'vue';
-import find from 'lodash/find';
 import findIndex from 'lodash/findIndex';
 import generateId from './lib/generateId';
 import nodes from './demo_data/simple';
 import blocks from './demo_data/sampleBlocks';
 
+import DemoNode from './demo_components/DemoNode.vue';
+
 
 export default {
   name: 'app',
-  components: {
 
-  },
+  DemoNode,
+
   data: () => ({
     holder: [],
     dragging: false,
     blocks,
     nodes,
     newDraggingBlock: null,
   }),
+
   methods: {
     onDragStartNewBlock(event) {
       console.log('onDragStartNewBlock', event);
       this.newDraggingBlock = event;
     },
+
     onDragStopNewBlock(event) {
       console.log('onDragStopNewBlock', event);
       this.newDraggingBlock = null;
     },
+
     onDropBlock(_event) {
 
     },
+
     beforeAdd() {
       console.log('before add');
       return true;
     },
+
     afterAdd() {
 
     },
+
     onEnterDrop(event) {
       console.log('entered drop');
       return true;
     },
+
     beforeMove({ to, from }) {
       console.log(to, from);
       if (from && from.id === '1') {
         return false;
       }
       return true;
     },
+
     onEnter() {
 
     },
+
     addNode(_event) {
       const id = this.generateId();
       this.nodes.push({
         ..._event.node,
         id,
       });
     },
+
     remove(event) {
       const nodeIndex = findIndex(this.nodes, { id: event.node.id });
       this.nodes.splice(nodeIndex, 1);
     },
+
     move(event) {
       console.log('move', event);
       const { dragged, to } = event;
       dragged.parentId = to.id;
     },
+
     add(event) {
       const id = generateId();
       this.nodes.push({
         id,
         ...event.node,
       });
     },
+
     onDragStart(event) {
       console.log('onDragStart', event);
       this.dragging = true;
     },
   },
-  watch: {
-
-  },
 };
 </script>
 

src/components/Flowy.vue

@@ -6,27 +6,26 @@
     }'
   >
     <div id='flowy-tree'>
-      <FlowyNode
-        v-bind='{ ...$props }'
-        v-on='{ ...$listeners }'
-        :node='node'
-        :key='node.id'
-        v-for='node in parentNodes'
-        @drag-start='onDragStart($event)'
-        @drag-stop='onDragStop($event)'
-        @enter-drop='onEnterDrop($event)'
-        :before-move='onBeforeMove'
-        :before-add='onBeforeAdd'
-        :is-dragging='dragging'
-      >
-      </FlowyNode>
+      <template v-for='node in parentNodes'>
+        <FlowyNode
+          v-bind='{ ...$props }'
+          v-on='{ ...$listeners }'
+          :node='node'
+          :key='node.id'
+          @drag-start='onDragStart($event)'
+          @drag-stop='onDragStop($event)'
+          @enter-drop='onEnterDrop($event)'
+          :before-move='onBeforeMove'
+          :before-add='onBeforeAdd'
+          :is-dragging='dragging'
+        />
+      </template>
     </div>
   </div>
 </template>
 
 <script>
 /* eslint-disable no-unused-vars */
-import find from 'lodash/find';
 import filter from 'lodash/filter';
 
 export default {
@@ -45,6 +44,8 @@ export default {
       type: Function,
       default: () => true,
     },
+
+    nodeComponent: Object,
   },
 
   data() {
@@ -128,7 +129,12 @@ export default {
 
 .flowy-node {
   transition: all 0.3s;
-  @extend .flex, .flex-col, .flex-no-wrap, .items-center, .relative, .overflow-visible
+  @extend .flex,
+    .flex-col,
+    .flex-no-wrap,
+    .items-center,
+    .relative,
+    .overflow-visible;
 }
 
 .node-dropzone {
@@ -177,7 +183,6 @@ export default {
   justify-content: center;
 }
 
-
 .items-center {
   align-items: center;
 }

src/components/FlowyBlock.vue

@@ -1,10 +1,11 @@
-<template lang="html">
-  <div class="flowy-block mr-24px relative">
-    <slot></slot>
+<template lang='html'>
+  <div class='flowy-block mr-24px relative'>
+    <slot />
+
     <component
-      :is="component"
-      v-bind="{ ...$props, ...$attrs, ...passedProps }"
-      ref="block"
+      :is='component'
+      v-bind='{ ...$props, ...$attrs, ...passedProps }'
+      ref='block'
     />
   </div>
 </template>
@@ -13,44 +14,34 @@
 /* eslint-disable no-unused-vars */
 
 export default {
+  name: 'FlowyBlock',
+
   props: {
     node: {
       type: Object,
       required: true,
     },
+
     remove: {
       type: Function,
       required: true,
     },
-  },
-  data() {
-    return {
-
-    };
-  },
-  mounted() {
 
+    nodeComponent: Object,
   },
-  destroyed() {
 
-  },
   computed: {
     component() {
-      return this.node.nodeComponent;
-      // return find(this.blocks, { name: this.node.block }).name;
+      const { nodeComponent } = this.node;
+      // If component exists in dataset, use it - if not, use prop
+      return nodeComponent || this.nodeComponent;
     },
+
     passedProps() {
       return this.node.data;
     },
   },
-  methods: {
-    onDragEnd(_event) {
-
-    },
-    onDragStart(_event) {
 
-    },
-  },
   render(c) {
     const item = this.$scopedSlots.default()[0];
     return item;

src/components/FlowyNode.vue

@@ -1,5 +1,7 @@
 <template lang="html">
-  <div class="flowy-node ">
+  <div class="flowy-node " :class='computedClass'>
+    <div class='flex-row'>
+
     <draggable
       class="flowy-draggable"
       group="flowy"
@@ -10,7 +12,7 @@
       :data="{ draggingNode: node }"
     >
       <!-- the node itself -->
-      <flowy-block
+      <FlowyBlock
         :data="node"
         class="draggable"
         :remove="removeNode"
@@ -47,17 +49,17 @@
         >
           <template #default="scope">
             <div :class="scope" class="node-dropzone">
-              <div class=""></div>
+              <div />
             </div>
           </template>
         </dropzone>
-      </flowy-block>
+      </FlowyBlock>
     </draggable>
 
     <!-- children tree -->
     <div class="flowy-tree flex flex-row flex-no-wrap overflow-visible mt-64px">
-      <template v-for="(child, index) in children">
-        <flowy-node
+      <template v-for="(child, index) in children.filter(e => !e.horizontal)">
+        <FlowyNode
           v-bind="{ ...$props }"
           v-on="{ ...$listeners }"
           :index="index"
@@ -69,21 +71,21 @@
         />
       </template>
     </div>
+    </div>
   </div>
 </template>
 
 <script>
 /* eslint-disable */
 /* eslint-disable no-unused-vars */
-import find from "lodash/find";
 import filter from "lodash/filter";
-import isNil from "lodash/isNil";
 import get from "lodash/get";
 import cloneDeep from "lodash/cloneDeep";
 
 import ConnectorLine from "./ConnectorLine";
 import DropIndicator from "./DropIndicator";
 
+
 function getOffset(el) {
   const rect = el.getBoundingClientRect();
   return {
@@ -115,6 +117,8 @@ export default {
       required: true,
     },
 
+    horizontal: Boolean,
+
     nodes: {
       type: Array,
       required: true,
@@ -138,6 +142,8 @@ export default {
     isDragging: {
       type: Boolean,
     },
+
+    nodeComponent: Object,
   },
 
   data() {
@@ -174,6 +180,11 @@ export default {
       return this.xPosProxy;
     },
 
+    computedClass() {
+      console.debug(this.node);
+      if (this.node.horizontal) return "node-horizontal";
+    },
+
     hasChildren() {
       return this.children.length > 0;
     },
@@ -237,7 +248,7 @@ export default {
     },
 
     linePathDown() {
-      const lineHeight = this.lineTotalHeight
+      const lineHeight = this.lineTotalHeight;
       return `M0 0L0 ${lineHeight / 2}L0 ${lineHeight / 2}L0 ${lineHeight / 2}`;
     },
 
@@ -311,9 +322,7 @@ export default {
 
       // Move node
 
-      const isNew = (draggingNode === false)
-
-
+      const isNew = draggingNode === false;
 
       if (draggingNode === false) {
         // not dragging from existing node (so dragged from new node list)