feat: add init data

Author: towersxu

public/images/delay.svg

@@ -37,13 +37,105 @@ export default {
  this.lf.render({
  nodes: [
  {
+ id: 'node_1',
  type: 'start-node',
  x: 220,
  y: 200,
- text: '开始'
+ text: 'start'
+ },
+ {
+ id: 'node_2',
+ type: 'fetch-node',
+ x: 420,
+ y: 200,
+ text: 'fetch data'
+ },
+ {
+ id: 'node_3',
+ type: 'function-node',
+ x: 620,
+ y: 200,
+ text: 'function'
+ },
+ {
+ id: 'node_4',
+ type: 'delay-node',
+ x: 420,
+ y: 300,
+ text: 'function'
+ },
+ {
+ id: 'node_5',
+ type: 'switch-node',
+ x: 820,
+ y: 200,
+ text: 'switch'
+ },
+ {
+ id: 'node_6',
+ type: 'function-node',
+ x: 1020,
+ y: 200,
+ text: 'function'
+ },
+ {
+ id: 'node_7',
+ type: 'function-node',
+ x: 1020,
+ y: 300,
+ text: 'function'
+ },
+ ],
+ edges: [
+ {
+ type: 'flow-link',
+ sourceNodeId: 'node_1',
+ targetNodeId: 'node_2'
+ },
+ {
+ type: 'flow-link',
+ sourceNodeId: 'node_2',
+ targetNodeId: 'node_3'
+ },
+ {
+ type: 'flow-link',
+ sourceNodeId: 'node_3',
+ startPoint: {
+ x: 680,
+ y: 200
+ },
+ targetNodeId: 'node_4'
+ },
+ {
+ type: 'flow-link',
+ sourceNodeId: 'node_4',
+ startPoint: {
+ x: 360,
+ y: 300
+ },
+ targetNodeId: 'node_2'
+ },
+ {
+ type: 'flow-link',
+ sourceNodeId: 'node_3',
+ targetNodeId: 'node_5'
+ },
+ {
+ type: 'flow-link',
+ sourceNodeId: 'node_5',
+ targetNodeId: 'node_6'
+ },
+ {
+ type: 'flow-link',
+ sourceNodeId: 'node_5',
+ targetNodeId: 'node_7'
  },
  ]
  })
+ this.lf.on('node-red:start', () => {
+ // todo: 让流程跑起来
+ console.log('我要开始执行流程了')
+ })
  }
 }
 </script>

src/components/FlowChart.vue

@@ -3,6 +3,7 @@ import FunctionNode from "./nodes/FunctionNode";
 import SwitchNode from "./nodes/SwitchNode";
 import StartNode from "./nodes/StartNode";
 import FetchNode from "./nodes/FetchNode";
+import DelayNode from "./nodes/DelayNode";
 import FlowLink from "./FlowLink";
 import Palette from './tools/Palette.vue';
 
@@ -14,6 +15,7 @@ class NodeRedExtension {
  lf.register(StartNode);
  lf.register(FetchNode);
  lf.register(FlowLink);
+ lf.register(DelayNode);
  lf.setDefaultEdgeType('flow-link');
  this.app = createApp(Palette, {
  lf
@@ -23,9 +25,7 @@ class NodeRedExtension {
  const node = document.createElement('div')
  node.className = 'node-red-palette'
  domOverlay.appendChild(node)
- setTimeout(() => {
- this.app.mount(node)
- })
+ this.app.mount(node)
  }
 }
 

src/components/node-red/index.js

@@ -0,0 +1,32 @@
+import { h } from '@logicflow/core'
+import BaseNode from "./BaseNode"
+
+class DelayNode extends BaseNode.view {
+ getIcon () {
+ const {
+ width,
+ height,
+ } = this.props.model;
+ return h('image', {
+ width: 30,
+ height: 30,
+ x: - width / 2,
+ y: - height / 2,
+ href: 'images/delay.svg'
+ })
+ }
+}
+
+class DelayNodeModel extends BaseNode.model {
+ getNodeStyle() {
+ const style = super.getNodeStyle()
+ style.fill = 'rgb(230, 224, 248)';
+ return style
+ }
+}
+
+export default {
+ type: 'delay-node',
+ model: DelayNodeModel,
+ view: DelayNode
+}

src/components/node-red/nodes/DelayNode.js

@@ -3,16 +3,21 @@ import BaseNode from "./BaseNode"
 
 class StartNode extends BaseNode.view {
  getIcon () {
+ const { model, graphModel } = this.props;
  const {
  width,
  height,
- } = this.props.model;
+ } = model;
  return h('image', {
  width: 30,
  height: 30,
  x: - width / 2,
  y: - height / 2,
- href: 'images/start.svg'
+ className: 'node-red-start',
+ href: 'images/start.svg',
+ onClick: () => {
+ graphModel.eventCenter.emit('node-red:start')
+ }
  })
  }
 }

src/components/node-red/nodes/StartNode.js

@@ -16,4 +16,8 @@
  position: absolute;
  left: 0px;
  top: 0px;
+}
+.node-red-start {
+ cursor: pointer;
+ pointer-events: all;
 }

src/components/node-red/style.css

@@ -61,6 +61,12 @@ const baseNodes = ref([
  text: 'switch',
  background: 'rgb(226, 217, 110)',
  icon: 'public/images/switch.svg'
+ },
+ {
+ type: 'delay-node',
+ text: 'delay',
+ background: 'rgb(230, 224, 248)',
+ icon: 'public/images/delay.svg'
  }
 ])
 
@@ -69,6 +75,9 @@ const baseNodes = ref([
 .demo-collapse {
  width: 150px;
 }
+.demo-collapse /deep/ .el-collapse-item__header {
+ text-indent: 20px;
+}
 .red-ui-palette-node {
  cursor: move;
  background: #fff;