feat: base nodes

Author: towersxu

public/images/fetch.svg

@@ -4,7 +4,6 @@ import LogicFlow from '@logicflow/core'
 import '@logicflow/core/dist/style/index.css'
 import NodeRedExtension from './node-red/index'
 import './node-red/style.css'
-import Palette from './Palette.vue'
 
 export default {
  setup() {
@@ -23,47 +22,30 @@ export default {
  color: '#eeeeee'
  }
  },
+ keyboard: {
+ enabled: true,
+ },
+ // keyboard: true,
  plugins: [
  NodeRedExtension
  ]
  })
  this.lf.render({
  nodes: [
  {
- id: 'id1',
- type: 'function-node',
- x: 350,
- y: 150,
- text: '开始节点啊啊撒'
+ type: 'start-node',
+ x: 220,
+ y: 200,
+ text: '开始'
  },
- {
- id: 'id2',
- type: 'switch-node',
- x: 550,
- y: 150,
- text: 'switch'
- }
  ]
  })
- },
- methods: {
- setProperties () {
- this.lf.setProperties('id1', {
- color: 'green',
- })
- }
- },
- components: {
- Palette
  }
 }
 </script>
 
 <template>
  <div class="flow-chart">
- <Palette class="flow-chart-palette">
- <button @click="setProperties">11</button>
- </Palette>
  <div ref="container" class="container"></div>
  </div>
 </template>

public/images/start.svg

@@ -0,0 +1,18 @@
+import { BezierEdge, BezierEdgeModel } from "@logicflow/core";
+
+class FlowLinkModel extends BezierEdgeModel {
+ getEdgeStyle() {
+ const style = super.getEdgeStyle();
+ style.strokeWidth = 3;
+ style.stroke = this.isSelected ? '#ff7f0e' : '#999';
+ return style;
+ }
+}
+class FlowLink extends BezierEdge {}
+
+export default {
+ type: 'flow-link',
+ view: FlowLink,
+ model: FlowLinkModel
+}
+

src/components/FlowChart.vue

@@ -1,13 +1,31 @@
-import FunctionNode from "./nodes/FunctionNode"
-import SwitchNode from "./nodes/SwitchNode"
-// import ConditionNode from "./nodes/ConditionNode"
+import { createApp } from 'vue';
+import FunctionNode from "./nodes/FunctionNode";
+import SwitchNode from "./nodes/SwitchNode";
+import StartNode from "./nodes/StartNode";
+import FetchNode from "./nodes/FetchNode";
+import FlowLink from "./FlowLink";
+import Palette from './tools/Palette.vue';
 
 class NodeRedExtension {
  static pluginName = 'NodeRedExtension'
  constructor ({ lf }) {
- lf.register(FunctionNode)
- lf.register(SwitchNode)
- // lf.register(ConditionNode)
+ lf.register(FunctionNode);
+ lf.register(SwitchNode);
+ lf.register(StartNode);
+ lf.register(FetchNode);
+ lf.register(FlowLink);
+ lf.setDefaultEdgeType('flow-link');
+ this.app = createApp(Palette, {
+ lf
+ })
+ }
+ render(lf, domOverlay) {
+ const node = document.createElement('div')
+ node.className = 'node-red-palette'
+ domOverlay.appendChild(node)
+ setTimeout(() => {
+ this.app.mount(node)
+ })
  }
 }
 

src/components/Palette.vue

@@ -20,7 +20,12 @@ class RedNodeModel extends RectNodeModel {
  */
  setAttributes() {
  if (this.text.value) {
- this.width = 30 + getBytesLength(this.text.value) * 9;
+ let width = 30 + getBytesLength(this.text.value) * 9;
+ width = Math.ceil(width / 20) * 20;
+ if (width < 100) {
+ width = 100;
+ }
+ this.width = width;
  }
  }
  /**

src/components/node-red/FlowLink.js

@@ -0,0 +1,32 @@
+import { h } from '@logicflow/core'
+import BaseNode from "./BaseNode"
+
+class FetchNode 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/fetch.svg'
+ })
+ }
+}
+
+class FetchNodeModel extends BaseNode.model {
+ getNodeStyle() {
+ const style = super.getNodeStyle()
+ style.fill = 'rgb(231, 231, 174)';
+ return style
+ }
+}
+
+export default {
+ type: 'fetch-node',
+ model: FetchNodeModel,
+ view: FetchNode
+}