feat: 支持html节点

Author: towersxu

src/components/FlowChart.vue

@@ -50,9 +50,10 @@ export default {
  id: 'node_123_1',
  type: 'vue-html',
  x: 720,
- y: 700,
+ y: 400,
+ text: '2',
  properties: {
- t: 1
+ t: 3
  }
  },
  {

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

@@ -16,6 +16,11 @@ class RedNodeModel extends RectNodeModel {
  this.iconPosition = ''; // icon位置，left表示左边，'right'表示右边
  this.defaultFill = '#a6bbcf';
  }
+ getData () {
+ const data = super.getData()
+ data.properties.ui = 'node-red'
+ return data
+ }
  /**
  * 动态设置初始化数据
  */

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

@@ -5,36 +5,42 @@ import VueNode from './VueNode.vue';
 class VueHtmlNode extends HtmlNode {
  constructor (props) {
  super(props)
- // const appRef = ref(null)
+ this.isMounted = false
+ this.r = h(VueNode, {
+ properties: props.model.getProperties(),
+ text: props.model.inputData,
+ onBtnClick: (i) => {
+ this.r.component.props.text = String(Number(this.r.component.props.text) + Number(i))
+ }
+ })
+ this.d = h('div', null, [
+ this.r
+ ])
  this.app = createApp({
- render: () => h(VueNode, {
- // ref: appRef,
- title: '312',
- properties: props.model.getProperties(),
- onBtnClick: (i) => {
- console.log(44, i)
- props.model.setProperties({
- t: i++
- })
- }
- })
+ render: () => this.d
  })
  }
  setHtml(rootEl) {
- const node = document.createElement('div')
- // const { model, graphModel } = this.props;
- // const properties = model.getProperties();
- rootEl.appendChild(node)
- this.app.mount(node)
- console.log(34)
+ if (!this.isMounted) {
+ this.isMounted = true
+ const node = document.createElement('div')
+ rootEl.appendChild(node)
+ this.app.mount(node)
+ } else {
+ this.r.component.props.properties = this.props.model.getProperties()
+ }
+ }
+ getText () {
+ return null
  }
 }
 
 class VueHtmlNodeModel extends HtmlNodeModel {
  setAttributes() {
  this.width = 300;
- this.height = 32;
+ this.height = 100;
  this.text.editable = false;
+ this.inputData = this.text.value
  }
  getOutlineStyle() {
  const style = super.getOutlineStyle();
@@ -45,6 +51,11 @@ class VueHtmlNodeModel extends HtmlNodeModel {
  getDefaultAnchor() {
  return []
  }
+ getData () {
+ const data = super.getData()
+ data.text.value = this.inputData
+ return data
+ }
 }
 
 export default {

src/components/node-red/nodes/VueNode.vue

@@ -1,6 +1,10 @@
 <template>
- <div class="demo-collapse">
- <el-button @click="$emit('btnClick', properties.t)">click_me_{{properties.t}}</el-button>
+ <div class="demo-collapse" :style="properties.style">
+ <div>当前值：{{text}}</div>
+ <div class="demo-operator">
+ <el-input @keydown.stop type="text" v-model="increaseFactor" />
+ <el-button @mousedown.stop @click="$emit('btnClick', increaseFactor)">增加</el-button>
+ </div>
  </div>
 </template>
 
@@ -10,22 +14,40 @@ export default {
  properties: {
  type: Object,
  default: () => ({
- t: 1
+ t: 1,
+ style: {}
  })
  },
- title: String,
+ text: String,
+ },
+ data () {
+ return {
+ showTitle: '',
+ increaseFactor: 0
+ }
  },
  emits: ['btnClick'],
  mounted () {
  console.log(this)
  },
- methods: {
- update(properties) {
- console.log(444, properties)
+ watch: {
+ 'properties.t': {
+ handler (val) {
+ this.increaseFactor = val
+ },
+ immediate: true
  }
  }
 }
 </script>
 <style scoped>
-
+.demo-collapse {
+ width: 300px;
+ height: 100px;
+ border: 1px solid #444;
+ box-sizing: border-box;
+}
+.demo-operator {
+ display: flex;
+}
 </style>