docs: html node

Author: towersxu

docs/guide/advance/customNode.md

@@ -419,3 +419,53 @@ lf.render({
 
 在上面的代码中，`getShape`方法返回了一个包含图标的标签，Logic Flow 拿到这个返回值后会直接在`graph`中进行渲染。SVG 元素需要 model 中的实时数据才可以正常显示并使用，现在我们可以通过[getAttributes](/guide/advance/customNode.html#getattributes)方法获取到 model 中的[数据属性](/api/nodeApi.md#数据属性)和[样式属性](/api/nodeApi.html#样式属性)。
 
+## 自定义HTML节点
+
+LogicFlow内置了基础的HTML节点，我们可以利用LogicFlow的自定义机制，实现各种形态的HTML节点，而且HTML节点内部可以使用任意框架进行渲染。
+
+<example
+  :height="280"
+  iframeId="iframe-6"
+  href="/examples/#/advance/custom-node/html"
+/>
+
+```ts
+class UmlModel extends HtmlNodeModel {
+  setAttributes() {
+    this.text.editable = false; // 禁止节点文本编辑
+    // 设置节点宽高和锚点
+    const width = 200;
+    const height = 130;
+    this.width = width;
+    this.height = height;
+    this.anchorsOffset = [
+      [width / 2, 0],
+      [0, height / 2],
+      [-width / 2, 0],
+      [0, -height/2],
+    ]
+  }
+}
+class UmlNode extends HtmlNode {
+  // 重新setHtml方法，想html节点插入任何你想要插入的节点
+  setHtml(rootEl: HTMLElement) {
+    const el = document.createElement('div');
+    el.className = 'uml-wrapper';
+    const html = `
+      <div>
+        <div class="uml-head">Head</div>
+        <div class="uml-body">
+          <div>+ $Name</div>
+          <div>+ $Body</div>
+        </div>
+        <div class="uml-footer">
+          <div>+ setHead(Head $head)</div>
+          <div>+ setBody(Body $body)</div>
+        </div>
+      </div>
+    `
+    el.innerHTML = html;
+    rootEl.appendChild(el);
+  }
+}
+```

docs/guide/basic/node.md

@@ -7,6 +7,7 @@ LogicFlow 的内置节点包括：
 - 菱形(diamond)
 - 多边形(polygon)
 - 文本(text)
+- html节点(html)
 
 ## 节点属性
 
@@ -59,6 +60,11 @@ type Point = [number, number]
 | fontSize | number | ✅ | 字体大小 |
 | fontFamily | string | ✅ | 字体类型 |
 | fontWeight | number / string | ✅ | 字体粗细 |
+
+### html节点
+
+html节点无特殊属性，定制效果需要去view中自己控制。详情请参考自定义节点。
+
 ## 创建节点
 LogicFlow 支持三种创建节点的方式：
 - 数据配置

examples/src/pages/advance/custom-node/html/index.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect } from 'react';
+import LogicFlow from '@logicflow/core';
+import ExampleHeader from '../../../../components/example-header';
+import Uml from './uml';
+
+const config = {
+  stopScrollGraph: true,
+  stopZoomGraph: true,
+  style: {
+    circle: {
+      r: 40
+    }
+  }
+};
+
+const data = {
+  nodes: [
+    {
+      id: 10,
+      type: 'uml',
+      x: 150,
+      y: 90,
+    },
+  ]
+};
+
+export default function CustomNodeAnchorExample() {
+
+  useEffect(() => {
+    const lf = new LogicFlow({
+      ...config,
+      container: document.querySelector('#graph_html') as HTMLElement
+    });
+    lf.register(Uml);
+    lf.render(data);
+  }, []);
+
+  return (
+    <>
+      <ExampleHeader
+        content="自定义HTML节点"
+        githubPath="/advance/custom-node/html/index.tsx"
+      />
+      <div id="graph_html" className="viewport" />
+    </>
+  )
+}

examples/src/pages/advance/custom-node/html/uml.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;
+}

examples/src/pages/advance/custom-node/html/uml.ts

@@ -0,0 +1,48 @@
+import { HtmlNodeModel, HtmlNode } from '@logicflow/core';
+// import HtmlNode from '@logicflow/core';
+import './uml.css';
+
+class UmlModel extends HtmlNodeModel {
+  setAttributes() {
+    this.text.editable = false;
+    const width = 200;
+    const height = 130;
+    this.width = width;
+    this.height = height;
+    this.anchorsOffset = [
+      [width / 2, 0],
+      [0, height / 2],
+      [-width / 2, 0],
+      [0, -height/2],
+    ]
+  }
+}
+class UmlNode extends HtmlNode {
+  setHtml(rootEl: HTMLElement) {
+    console.log(111)
+    const el = document.createElement('div');
+    el.className = 'uml-wrapper';
+    const html = `
+      <div>
+        <div class="uml-head">Head</div>
+        <div class="uml-body">
+          <div>+ $Name</div>
+          <div>+ $Body</div>
+        </div>
+        <div class="uml-footer">
+          <div>+ setHead(Head $head)</div>
+          <div>+ setBody(Body $body)</div>
+        </div>
+      </div>
+    `
+    el.innerHTML = html;
+    rootEl.appendChild(el);
+  }
+}
+
+const uml = {
+  type: 'uml',
+  view: UmlNode,
+  model: UmlModel
+}
+export default uml;

examples/src/routes.tsx

@@ -25,6 +25,7 @@ import Anchor from './pages/advance/custom-node/anchor';
 import Triangle from './pages/advance/custom-node/triangle';
 import Rule from './pages/advance/custom-node/rule';
 import Shape from './pages/advance/custom-node/shape';
+import Html from './pages/advance/custom-node/html';
 import Process from './pages/advance/custom-edge';
 import Event from './pages/advance/event';
 import Approve from './pages/usage/approve';
@@ -52,6 +53,7 @@ export default (
     <Route path="/advance/custom-node/rule" exact component={Rule} />
     <Route path="/advance/custom-node/shape" exact component={Shape} />
     <Route path="/advance/custom-edge/process" exact component={Process} />
+    <Route path="/advance/custom-node/html" exact component={Html} />
     <Route path="/extension/snapshot" exact component={Snapshot} />
     <Route path="/extension/components/control" exact component={Control} />
     <Route path="/extension/components/menu" exact component={Menu} />

packages/core/index.html

@@ -110,7 +110,6 @@
       }
       class UmlNode extends HtmlNode {
         setHtml(rootEl) {
-          console.log(111)
           const el = document.createElement('div');
           el.className = 'uml-wrapper';
           const html = `

packages/core/src/model/node/HtmlNodeModel.ts

@@ -10,7 +10,7 @@ class HtmlNodeModel extends BaseNodeModel {
   @observable radius = defaultTheme.rect.radius;
 
   constructor(data, graphModel: GraphModel) {
-    super(data, graphModel, 'rect');
+    super(data, graphModel, 'html');
   }
 
   @computed get anchors(): Point[] {