feat: add html node

Author: towersxu

packages/core/index.html

@@ -43,6 +43,30 @@
       border: 2px solid #000;
       background: #fff;
     }
+    .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;
+    }
   </style>
 </head>
 
@@ -70,6 +94,42 @@
 
     <!-- 自定义节点 -->
     <script>
+      class UmlModel extends HtmlNodeModel {
+        setAttributes() {
+          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) {
+          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);
+        }
+      }
       // square
       class SquareModel extends RectNodeModel {
         setAttributes() {
@@ -275,14 +335,18 @@
           view: Connection,
           model: LineEdgeModel,
         })
-
+        lf.register({
+          type: 'uml',
+          view: UmlNode,
+          model: UmlModel,
+        })
         lf.setTheme({});
         lf.setDefaultEdgeType('polyline');
 
         lf.render({
           nodes: [
             {
-              type: 'rect',
+              type: 'uml',
               x: 100,
               y: 100,
               id: 10,
@@ -378,21 +442,6 @@
             }
           ]
         });
-
-        // console.log(lf.graphModel);
-        // lf.createEdge({
-        //   sourceNodeId: 10,
-        //   targetNodeId: 11,
-        //   // text: '222',
-        // });
-        // lf.updateText('edge_2222', '你是打算啊')
-        // lf.createEdge({
-        //   sourceNodeId: 10,
-        //   targetNodeId: 50,
-        //   text: '222',
-        //   type: 'bezier'
-        // });
-        // console.log(lf.graphModel);
       }
     </script>
 

packages/core/src/LogicFlow.tsx

@@ -274,6 +274,11 @@ export default class LogicFlow {
       view: _View.DiamondNode,
       model: _Model.DiamondNodeModel,
     });
+    this._registerElement({
+      type: 'html',
+      view: _View.HtmlNode,
+      model: _Model.HtmlNodeModel,
+    });
   }
 
   // 全局操作----------------------------------------------

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

@@ -0,0 +1,33 @@
+import { computed, observable } from 'mobx';
+import { Point } from '../../type';
+import BaseNodeModel from './BaseNodeModel';
+import { ModelType } from '../../constant/constant';
+import GraphModel from '../GraphModel';
+import { defaultTheme } from '../../constant/DefaultTheme';
+
+class HtmlNodeModel extends BaseNodeModel {
+  modelType = ModelType.RECT_NODE;
+  @observable radius = defaultTheme.rect.radius;
+
+  constructor(data, graphModel: GraphModel) {
+    super(data, graphModel, 'rect');
+  }
+
+  @computed get anchors(): Point[] {
+    const {
+      anchorsOffset, x, y, width, height,
+    } = this;
+    if (anchorsOffset && anchorsOffset.length > 0) {
+      return this.getAnchorsByOffset();
+    }
+    return [
+      { x, y: y - height / 2 },
+      { x: x + width / 2, y },
+      { x, y: y + height / 2 },
+      { x: x - width / 2, y },
+    ];
+  }
+}
+
+export { HtmlNodeModel };
+export default HtmlNodeModel;

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

@@ -5,3 +5,4 @@ export * from './EllipseNodeModel';
 export * from './PolygonNodeModel';
 export * from './RectNodeModel';
 export * from './TextNodeModel';
+export * from './HtmlNodeModel';

packages/core/src/view/node/HtmlNode.tsx

@@ -0,0 +1,57 @@
+import { h } from 'preact';
+import BaseNode from './BaseNode';
+import { RectNodeModel } from '../../model';
+import GraphModel from '../../model/GraphModel';
+import EventEmitter from '../../event/eventEmitter';
+
+type IProps = {
+  model: RectNodeModel;
+  graphModel: GraphModel;
+  eventCenter: EventEmitter;
+};
+
+export default class HtmlNode extends BaseNode {
+  rootElId: string;
+  constructor(props) {
+    super(props);
+    this.rootElId = `htmlNode_${props.model.id}`;
+  }
+  get rootEl() {
+    return document.querySelector(`#${this.rootElId}`) as HTMLElement;
+  }
+  getShapeStyle() {
+    const attributes = super.getShapeStyle();
+    const { model: { radius } } = this.props as IProps;
+    return {
+      ...attributes,
+      radius,
+    };
+  }
+  getAttributes() {
+    const attributes = super.getAttributes();
+    const style = this.getShapeStyle();
+    return {
+      ...attributes,
+      ...style,
+    };
+  }
+  setHtml(rootEl: HTMLElement) {
+    rootEl.appendChild(document.createElement('div'));
+  }
+  componentDidMount() {
+    this.setHtml(this.rootEl);
+  }
+  getShape() {
+    const attributes = this.getAttributes();
+    const { x, y, width, height } = attributes;
+    return (
+      <foreignObject
+        x={x - width / 2}
+        y={y - height / 2}
+        width={width}
+        height={height}
+        id={this.rootElId}
+      />
+    );
+  }
+}

packages/core/src/view/node/index.ts

@@ -5,6 +5,7 @@ import PolygonNode from './PolygonNode';
 import DiamondNode from './DiamondNode';
 import EllipseNode from './EllipseNode';
 import TextNode from './TextNode';
+import HtmlNode from './HtmlNode';
 
 export {
   BaseNode,
@@ -14,4 +15,5 @@ export {
   DiamondNode,
   EllipseNode,
   TextNode,
+  HtmlNode,
 };