feat: 增加自定义HtmlNode以及添加事件

src/common/customHtmlNode.css

@@ -0,0 +1,24 @@
+.uml-wrapper {
+  background: #68fce2;
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  border: 2px solid #838382;
+  box-sizing: border-box;
+}
+.uml-head {
+  text-align: center;
+  line-height: 30px;
+  font-size: 16px;
+  font-weight: bold;
+}
+.uml-body {
+  border-top: 1px solid #838382;
+  border-bottom: 1px solid #838382;
+  padding: 5px 10px;
+  font-size: 12px;
+}
+.uml-footer {
+  padding: 5px 10px;
+  font-size: 14px;
+}

src/common/customHtmlNode.js

@@ -0,0 +1,44 @@
+import { HtmlNode, HtmlNodeModel } from "@logicflow/core";
+
+class ButtonNode extends HtmlNode {
+  setHtml(rootEl) {
+    const { properties } = this.props.model;
+
+    const el = document.createElement("div");
+    el.className = "uml-wrapper";
+    const html = `
+      <div>
+        <div class="uml-head">Head</div>
+        <div class="uml-body">
+          <div><button onclick="setData()">+</button> ${properties.name}</div>
+          <div>${properties.body}</div>
+        </div>
+        <div class="uml-footer">
+          <div>setHead(Head $head)</div>
+          <div>setBody(Body $body)</div>
+        </div>
+      </div>
+    `;
+    el.innerHTML = html;
+    rootEl.innerHTML = "";
+    rootEl.appendChild(el);
+    window.setData = () => {
+      const { graphModel, model } = this.props;
+      graphModel.eventCenter.emit("custom:button-click", model);
+    };
+  }
+}
+
+class ButtonNodeModel extends HtmlNodeModel {
+  setAttributes() {
+    this.width = 300;
+    this.height = 130;
+    this.text.editable = false;
+  }
+}
+
+export default {
+  type: "button-node",
+  view: ButtonNode,
+  model: ButtonNodeModel
+};

src/components/preact/CustomHtmlNode.tsx

@@ -0,0 +1,60 @@
+import LogicFlow from "@logicflow/core";
+import { useEffect, useRef, useState } from "preact/compat";
+import customHtmlNode from "../../common/customHtmlNode";
+import '../../common/customHtmlNode.css'
+
+const data = {
+  nodes: [
+    {
+      id: "1",
+      type: "button-node",
+      x: 300,
+      y: 100,
+      properties: {
+        name: "hello",
+        body: "world"
+      }
+    }
+  ],
+  edges: []
+}
+
+export default () => {
+  const [, setLf] = useState(null);
+  const rootRef = useRef(null);
+
+  useEffect(() => {
+    if(!rootRef) return;
+
+    const lf = new LogicFlow({
+      container: rootRef.current,
+      grid: true,
+      background: {
+        color: "#f5f5f5",
+      },
+    });
+
+    lf.register(customHtmlNode)
+
+    setLf(lf);
+
+
+    lf.render(data);
+
+    lf.on("custom:button-click", (model) => {
+      lf.setProperties(model.id, {
+        body: "看我呀"
+      });
+    });
+
+    return () => {
+      if(lf) {
+        setLf(null);
+      }
+    }
+  }, [rootRef]);
+
+  return <>
+    <div ref={rootRef} style={{width: '100vw', height: '100vh'}}></div>
+  </>;
+};

src/pages/index.astro

@@ -44,6 +44,7 @@ import Card from "../components/Card.astro";
       <Card href="/LogicFlowDemos/preact/4" title="定义连线类型" body="连线类型： polyline line bezier 等" />
       <Card href="/LogicFlowDemos/preact/5" title="更改连线的样式" body="比如连线的颜色，粗细，文本样式 等" />
       <Card href="/LogicFlowDemos/preact/6" title="主题样式更改" body="基本图形、边、箭头、文字 等" />
+      <Card href="/LogicFlowDemos/preact/7" title="自定义HtmlNode和事件" body="custom:button-click 等" />
     </ul>
   </main>
 </Layout>

src/pages/preact/7.astro

@@ -0,0 +1,7 @@
+---
+import CustomHtmlNode from '../../components/preact/CustomHtmlNode'
+---
+<link rel="stylesheet" href="/LogicFlowDemos/css/logicflow.core.css">
+<link rel="stylesheet" href="/LogicFlowDemos/css.logicflow.extension.css">
+
+<CustomHtmlNode client:only="preact" />