Commit 4363e0a

committed

feat: add vue html node

1 parent a776535 commit 4363e0aCopy full SHA for 4363e0a

File tree

+87

-1

lines changed

+87

-1

lines changed

Lines changed: 12 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -85,6 +85,12 @@ export default {`
`85`	`85`	`y: 300,`
`86`	`86`	`text: 'function'`
`87`	`87`	`},`
	`88`	`+ {`
	`89`	`+ id: 'node_8',`
	`90`	`+ type: 'vue-html',`
	`91`	`+ x: 400,`
	`92`	`+ y: 100`
	`93`	`+ }`
`88`	`94`	`],`
`89`	`95`	`edges: [`
`90`	`96`	`{`
`@@ -129,13 +135,18 @@ export default {`
`129`	`135`	`type: 'flow-link',`
`130`	`136`	`sourceNodeId: 'node_5',`
`131`	`137`	`targetNodeId: 'node_7'`
`132`		`- },`
	`138`	`+ }`
`133`	`139`	`]`
`134`	`140`	`})`
`135`	`141`	`this.lf.on('node-red:start', () => {`
`136`	`142`	`// todo: 让流程跑起来`
`137`	`143`	`console.log('我要开始执行流程了')`
`138`	`144`	`})`
	`145`	`+ this.lf.on('vue-node:click', (data ) => {`
	`146`	`+ this.lf.setProperties(data.id, {`
	`147`	`+ t: ++data.val`
	`148`	`+ })`
	`149`	`+ })`
`139`	`150`	`}`
`140`	`151`	`}`
`141`	`152`	`</script>`

Lines changed: 2 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@ import FetchNode from "./nodes/FetchNode";`
`6`	`6`	`import DelayNode from "./nodes/DelayNode";`
`7`	`7`	`import FlowLink from "./FlowLink";`
`8`	`8`	`import Palette from './tools/Palette.vue';`
	`9`	`+import VueHtmlNode from './nodes/VueHtmlNode';`
`9`	`10`
`10`	`11`	`class NodeRedExtension {`
`11`	`12`	`static pluginName = 'NodeRedExtension'`
`@@ -16,6 +17,7 @@ class NodeRedExtension {`
`16`	`17`	`lf.register(FetchNode);`
`17`	`18`	`lf.register(FlowLink);`
`18`	`19`	`lf.register(DelayNode);`
	`20`	`+ lf.register(VueHtmlNode);`
`19`	`21`	`lf.setDefaultEdgeType('flow-link');`
`20`	`22`	`this.app = createApp(Palette, {`
`21`	`23`	`lf`

Lines changed: 51 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,51 @@`
	`1`	`+import { HtmlNode, HtmlNodeModel } from "@logicflow/core";`
	`2`	`+import { createApp } from 'vue';`
	`3`	`+import VueNode from './VueNode.vue';`
	`4`	`+`
	`5`	`+class VueHtmlNode extends HtmlNode {`
	`6`	`+ constructor (props) {`
	`7`	`+ super(props)`
	`8`	`+ this.app = createApp(VueNode)`
	`9`	`+ }`
	`10`	`+ setHtml(rootEl) {`
	`11`	`+ const node = document.createElement('div')`
	`12`	`+ const { model, graphModel } = this.props;`
	`13`	`+ const properties = model.getProperties();`
	`14`	`+ rootEl.appendChild(node)`
	`15`	`+ if (!this.isMounted) {`
	`16`	`+ this.app.mount(node)`
	`17`	`+ this.app._instance.emitsOptions['btn:click'] = (val) => {`
	`18`	`+ graphModel.eventCenter.emit('vue-node:click', {`
	`19`	`+ id: model.id,`
	`20`	`+ val`
	`21`	`+ })`
	`22`	`+ }`
	`23`	`+ this.isMounted = true`
	`24`	`+ } else {`
	`25`	`+ this.app._instance.props.properties = properties`
	`26`	`+ }`
	`27`	`+ }`
	`28`	`+}`
	`29`	`+`
	`30`	`+class VueHtmlNodeModel extends HtmlNodeModel {`
	`31`	`+ setAttributes() {`
	`32`	`+ this.width = 300;`
	`33`	`+ this.height = 32;`
	`34`	`+ this.text.editable = false;`
	`35`	`+ }`
	`36`	`+ getOutlineStyle() {`
	`37`	`+ const style = super.getOutlineStyle();`
	`38`	`+ style.stroke = 'none';`
	`39`	`+ style.hover.stroke = 'none';`
	`40`	`+ return style;`
	`41`	`+ }`
	`42`	`+ getDefaultAnchor() {`
	`43`	`+ return []`
	`44`	`+ }`
	`45`	`+}`
	`46`	`+`
	`47`	`+export default {`
	`48`	`+ type: 'vue-html',`
	`49`	`+ model: VueHtmlNodeModel,`
	`50`	`+ view: VueHtmlNode`
	`51`	`+}`

Lines changed: 22 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,22 @@`
	`1`	`+<template>`
	`2`	`+ <div class="demo-collapse">`
	`3`	`+ <el-button @click="$emit('btn:click', properties.t)">vue_html_node: click_me_{{properties.t}}</el-button>`
	`4`	`+ </div>`
	`5`	`+</template>`
	`6`	`+`
	`7`	`+<script>`
	`8`	`+export default {`
	`9`	`+ props: {`
	`10`	`+ properties: {`
	`11`	`+ type: Object,`
	`12`	`+ default: () => ({`
	`13`	`+ t: 1`
	`14`	`+ })`
	`15`	`+ },`
	`16`	`+ },`
	`17`	`+ emits: ['btn:click']`
	`18`	`+}`
	`19`	`+</script>`
	`20`	`+<style scoped>`
	`21`	`+`
	`22`	`+</style>`

Whitespace-only changes.

Comments

(0)