111 lines
2.6 KiB
JavaScript
111 lines
2.6 KiB
JavaScript
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) {
|
|
const {type, properties: {id = "实体对象", props = []}} = this.props.model
|
|
const el = document.createElement('div');
|
|
el.className = type == 'main' ? 'modelElement main' : 'modelElement';
|
|
el.innerHTML = `
|
|
<b>${id}</b>
|
|
<div class="content pad-8">
|
|
${props.map(e => `<div flex><b class="fill sherk">${e.field}</b><span class="mar-l8 w160 nowrap-text">${e.fieldName||"-"}</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 + 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}
|
|
} = this;
|
|
const anchors = [];
|
|
props?.forEach((field, index) => {
|
|
anchors.push({
|
|
x: x - width / 2 + 6,
|
|
y: y - height / 2 + 58 + index * 20,
|
|
id: `${id}@${field.field}`,
|
|
edgeAddable: false,
|
|
type: "left"
|
|
});
|
|
});
|
|
return anchors;
|
|
}
|
|
|
|
setAttributes() {
|
|
this.text.editable = false
|
|
}
|
|
}
|
|
|
|
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}@${field.field}`,
|
|
type: "right",
|
|
field
|
|
});
|
|
});
|
|
return anchors;
|
|
}
|
|
}
|
|
|
|
export class ModelElement {
|
|
static pluginName = "modelElement";
|
|
|
|
constructor({lf}) {
|
|
this.lf = lf
|
|
lf.register({type: "model", model: DataModel, view: DataView})
|
|
lf.register({type: "main", model: MainModel, view: DataView})
|
|
}
|
|
}
|