先提交一波

project/oms/apps/develop/AppDataModel/element.js

@@ -1,26 +1,103 @@
-import {HtmlNode, HtmlNodeModel} from '@logicflow/core'
+import {h, HtmlNode, HtmlNodeModel} from '@logicflow/core'
 
 class DataView extends HtmlNode {
+  getAnchorShape(anchorData) {
+    const {x, y, type} = anchorData;
+    return h("rect", {
+      x: x - 5,
+      y: y - 5,
+      width: 10,
+      height: 10,
+      className: `custom-anchor ${type === "left" ? "incomming-anchor" : "outgoing-anchor"}`
+    });
+  }
+
   setHtml(rootEl) {
-    super.setHtml(rootEl);
-    const {properties: {name = "实体对象", props = []}} = this.props.model
+    const {type, properties: {id = "实体对象", props = []}} = this.props.model
     const el = document.createElement('div');
-    el.className = 'modelElement';
+    el.className = type == 'main' ? 'modelElement main' : 'modelElement';
     el.innerHTML = `
-    <b class="mar-b8">${name}</b>
-    <div class="content pad-h8">
-      <div> ${props.map(e => `<div><b>${e.prop}</b>  ${e.name}</div>`).join('')}</div>
+    <b>${id}</b>
+    <div class="content pad-8">
+      ${props.map(e => `<div flex><b class="fill sherk">${e.columnName}</b><span class="mar-l8">${e.columnComment}</span></div>`).join('')}
     </div>`;
+    rootEl.setAttribute('class', "pad-8")
+    rootEl.style.boxSizing = 'border-box'
     rootEl.innerHTML = ''
     rootEl.appendChild(el);
-    this.props.model.height = el.offsetHeight
+    this.props.model.height = el.offsetHeight + 16
+    this.props.model.width = el.offsetWidth + 16
   }
 }
 
 class DataModel extends HtmlNodeModel {
+  getAnchorStyle(anchorInfo) {
+    const style = super.getAnchorStyle();
+    if (anchorInfo.type === "left") {
+      style.fill = "red";
+      style.hover.fill = "transparent";
+      style.hover.stroke = "transpanrent";
+      style.className = "lf-hide-default";
+    } else {
+      style.fill = "green";
+    }
+    return style;
+  }
+
+  getDefaultAnchor() {
+    const {
+      id,
+      x,
+      y,
+      width,
+      height,
+      properties: {props, isConnection}
+    } = this;
+    const anchors = [];
+    props?.forEach((field, index) => {
+      if (isConnection) {
+        anchors.push({
+          x: x - width / 2 + 6,
+          y: y - height / 2 + 58 + index * 20,
+          id: `${id}_${field.columnName}`,
+          edgeAddable: false,
+          type: "left"
+        });
+      }
+    });
+    return anchors;
+  }
+
   setAttributes() {
     this.text.editable = false
-    this.width = 160
+  }
+}
+
+class MainModel extends DataModel {
+  initNodeData(data) {
+    super.initNodeData(data);
+  }
+
+  getDefaultAnchor() {
+    const {
+      id,
+      x,
+      y,
+      width,
+      height,
+      properties: {props}
+    } = this;
+    const anchors = [];
+    props?.forEach((field, index) => {
+      anchors.push({
+        x: x + width / 2 - 6,
+        y: y - height / 2 + 58 + index * 20,
+        id: `${id}_${index}_right`,
+        type: "right",
+        field
+      });
+    });
+    return anchors;
   }
 }
 
@@ -30,5 +107,6 @@ export class ModelElement {
   constructor({lf}) {
     this.lf = lf
     lf.register({type: "model", model: DataModel, view: DataView})
+    lf.register({type: "main", model: MainModel, view: DataView})
   }
 }