new things

README.md

@@ -29,14 +29,13 @@ npm run lint
 See [Configuration Reference](https://cli.vuejs.org/config/).
 
 ## TODO
-
-- Css style, we cannot see clear everything add more boerders and thing
+- Start node create, icon color and shape?
+- Test change edges to our red.
+- Try to put a border that has better contrast.
+- try a simple verison for the logo, just logo and options after that.
 - Potential node should have the same properties as the one get from panel.
 - Edges badged should have border be in the middle.
 - Menu should not select when click in options.
-- Create logo and put in the menu bar.
-- Create end nodes
-- Create Start Node.
 - Tools panels.
 - Choose type of edge (should we allow add arbitrary ones or depending on the target?)
 - Don´t allow delete the start and end nodes.

src/components/DiagramEditor.vue

@@ -12,6 +12,8 @@ import 'diagram-maker/dist/diagramMaker.css'
 import { produce } from 'immer'
 import { DiagramMaker, ConnectorPlacement, PositionAnchor } from 'diagram-maker'
 import Node from './Node.vue'
+import NodeStart from './NodeStart.vue'
+import NodeEnd from './NodeEnd.vue'
 import Edge from './Edge.vue'
 import LibraryPanel from './LibraryPanel.vue'
 
@@ -57,9 +59,13 @@ export default {
     },
     createNode (node, container) {
       var NodeClass = Vue.extend(Node)
+      if (NodeEnd.isEndNode(node)) {
+        NodeClass = Vue.extend(NodeEnd)
+      } else if (NodeStart.isStartNode(node)) {
+        NodeClass = Vue.extend(NodeStart)
+      }
       var instance = new NodeClass({
         propsData: {
-          counterValue: 3,
           dispatch: (event) => this.diagram.api.dispatch(event),
           node
         }

src/components/InnerNode.vue

@@ -5,17 +5,17 @@
       </div>
       <div class="dm-node-text">
         <div class="text-head">{{ adapter_id }}</div>
-        <div class="text-little">{{ adapter_name }}</div>
+        <div v-if="adapter_name != null" class="text-little">{{ adapter_name }}</div>
       </div>
     </div>
 </template>
 
 <script>
 export default {
-  props: ['adapter_id', 'adapter_name'],
+  props: ['adapter_id', 'adapter_name', 'icon_class'],
   data () {
     return {
-      icon: 'el-icon-help'
+      icon: (this.icon_class != null) ? this.icon_class : 'el-icon-help'
     }
   },
   computed: {}
@@ -24,20 +24,20 @@ export default {
 
 <style>
 .dm-node-wrap {
-  padding: 10px;
+  padding: 10px 15px;
 }
 
 .dm-node-icon {
     display: inline-block;
     vertical-align:middle;
     font-size: 24px;
-    color: #abb5c5;
+    color: #f77f80;
 }
 
 .dm-node-text {
     display: inline-block;
     vertical-align:middle;
-    margin-left: 10px;
+    margin-left: 7px;
 }
 
 .text-head {

src/components/LibraryPanel.vue

@@ -44,7 +44,7 @@ export default {
   color: #909399;
   font-size: 13px;
   font-weight: bold;
-  padding: 20px 0px 13px 0px;
+  padding: 20px 0px 0px;
 }
 .dm-panel .dm-content {
   padding: 0px;
@@ -60,4 +60,7 @@ export default {
 .panel-inset {
  padding: 10px 20px;
 }
+.panel-inset .node-adapter {
+  margin-top: 10px;
+}
 </style>

src/components/NodeEnd.vue

@@ -0,0 +1,50 @@
+<template>
+    <div :class="style" ref="adapter-node">
+      <InnerNode :adapter_id="adapter_id" :icon_class="icon"></InnerNode>
+    </div>
+</template>
+
+<script>
+import InnerNode from './InnerNode.vue'
+
+const ICONS = {
+  node_success: 'el-icon-success',
+  node_fail: 'el-icon-error'
+}
+
+export default {
+  isEndNode: function (node) {
+    if (node.typeId === 'node_success' || node.typeId === 'node_fail') {
+      return true
+    }
+    return false
+  },
+  components: { InnerNode },
+  props: ['node'],
+  data () {
+    return {
+      adapter_id: this.node.consumerData.adapter_id,
+      icon: ICONS[this.node.typeId],
+      style: 'node-adapter node-end ' + this.node.typeId
+    }
+  }
+}
+</script>
+
+<style>
+.node-adapter.node-end  {
+  border-radius: 30px;
+}
+.node-adapter.node-end .dm-node-wrap {
+  padding: 6px 15px;
+}
+.node-adapter.node-end.node_success .dm-node-icon {
+  color: #67C23A;
+}
+.node-adapter.node-end.node_fail .dm-node-icon {
+  color: #E6A23C;
+}
+.node-adapter.node-end .text-head {
+  padding-bottom: 2px;
+}
+</style>

src/components/NodeStart.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="node-adapter node-start" ref="adapter-node">
+      <InnerNode :adapter_id="adapter_id" :adapter_name="adapter_name" icon_class="el-icon-s-flag"></InnerNode>
+    </div>
+</template>
+
+<script>
+import InnerNode from './InnerNode.vue'
+
+export default {
+  isStartNode: function (node) {
+    return (node.typeId === 'node_start')
+  },
+  components: { InnerNode },
+  props: ['node'],
+  data () {
+    return {
+      adapter_id: this.node.consumerData.adapter_id,
+      adapter_name: this.node.consumerData.adapter_name
+    }
+  }
+}
+</script>
+
+<style>
+.node-adapter {
+  border: 1px solid #e6e6e6 !important;
+  background-color: white;
+  border-radius: 6px;
+}
+
+.dm-node .dm-content {
+  z-index: 0;
+}
+</style>

src/diagram/data.js

@@ -1,35 +1,65 @@
 export default {
   nodes: {
-    start: {
-      id: 'start',
-      typeId: 'node-start',
+    START: {
+      id: 'START',
+      typeId: 'node_start',
       diagramMakerData: {
         position: { x: 100, y: 100 },
+        size: { width: 130, height: 55 }
+      },
+      consumerData: {
+        adapter_id: 'START',
+        adapter_name: null
+      }
+    },
+    OTP: {
+      id: 'OTP',
+      typeId: 'node_adapter',
+      diagramMakerData: {
+        position: { x: 400, y: 100 },
         size: { width: 165, height: 55 }
       },
       consumerData: {
         adapter_id: 'OTP',
         adapter_name: 'OTP adapter'
       }
     },
-    end: {
-      id: 'end',
-      typeId: 'node-end',
+    SUCCESS: {
+      id: 'SUCCESS',
+      typeId: 'node_success',
       diagramMakerData: {
-        position: { x: 400, y: 100 },
-        size: { width: 165, height: 55 }
+        position: { x: 700, y: 107 },
+        size: { width: 130, height: 43 }
       },
       consumerData: {
-        adapter_id: 'Password',
-        adapter_name: 'Security number'
+        adapter_id: 'SUCCESS',
+        adapter_name: null
+      }
+    },
+    FAIL: {
+      id: 'FAIL',
+      typeId: 'node_fail',
+      diagramMakerData: {
+        position: { x: 700, y: 170 },
+        size: { width: 130, height: 43 }
+      },
+      consumerData: {
+        adapter_id: 'FAIL',
+        adapter_name: null
       }
     }
   },
   edges: {
     edge1: {
       id: 'edge1',
-      src: 'start',
-      dest: 'end',
+      src: 'OTP',
+      dest: 'SUCCESS',
+      diagramMakerData: { }
+    },
+    edge2: {
+      id: 'edge2',
+      src: 'START',
+      dest: 'OTP',
       diagramMakerData: { }
     }
   }

src/diagram/node-config.js

@@ -1,15 +1,19 @@
 import { VisibleConnectorTypes } from 'diagram-maker'
 
 export default {
-  'node-start': {
-    size: { width: 165, height: 55 },
-    visibleConnectorTypes: VisibleConnectorTypes.OUTPUT_ONLY
+  node_adapter: {
+    size: { width: 165, height: 55 }
   },
-  'node-end': {
-    size: { width: 165, height: 55 },
+  node_success: {
+    size: { width: 130, height: 43 },
     visibleConnectorTypes: VisibleConnectorTypes.INPUT_ONLY
   },
-  'node-adapter': {
-    size: { width: 165, height: 55 }
+  node_fail: {
+    size: { width: 130, height: 43 },
+    visibleConnectorTypes: VisibleConnectorTypes.INPUT_ONLY
+  },
+  node_start: {
+    size: { width: 165, height: 55 },
+    visibleConnectorTypes: VisibleConnectorTypes.OUTPUT_ONLY
   }
 }