logicflow 使用自定义节点 发现graphData内的node对应的节点对象的properties内有width和height属性

[fuyuanrong]

`import LogicFlow, { h, RectNode, RectNodeModel } from '@logicflow/core';

class CustomRectModel extends RectNodeModel {
initNodeData(data: LogicFlow.NodeConfig<LogicFlow.PropertiesType>): void {
super.initNodeData(data);
this.width = 100;
this.height = 80;
}
getNodeStyle() {
const style = super.getNodeStyle();
// 修改节点的样式
return style;
}
}

const defaultIcon: string = 'M439.264 208a16 16 0 0 0-16 16v67.968a239.744 239.744 0 0 0-46.496 26.896l-58.912-34a16 16 0 0 0-21.856 5.856l-80 138.56a16 16 0 0 0 5.856 21.856l58.896 34a242.624 242.624 0 0 0 0 53.728l-58.88 34a16 16 0 0 0-6.72 20.176l0.848 1.68 80 138.56a16 16 0 0 0 21.856 5.856l58.912-34a239.744 239.744 0 0 0 46.496 26.88V800a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16v-67.968a239.744 239.744 0 0 0 46.512-26.896l58.912 34a16 16 0 0 0 21.856-5.856l80-138.56a16 16 0 0 0-4.288-20.832l-1.568-1.024-58.896-34a242.624 242.624 0 0 0 0-53.728l58.88-34a16 16 0 0 0 6.72-20.176l-0.848-1.68-80-138.56a16 16 0 0 0-21.856-5.856l-58.912 34a239.744 239.744 0 0 0-46.496-26.88V224a16 16 0 0 0-16-16h-160z m32 48h96v67.376l28.8 12.576c13.152 5.76 25.632 12.976 37.184 21.52l25.28 18.688 58.448-33.728 48 83.136-58.368 33.68 3.472 31.2a194.624 194.624 0 0 1 0 43.104l-3.472 31.2 58.368 33.68-48 83.136-58.432-33.728-25.296 18.688c-11.552 8.544-24.032 15.76-37.184 21.52l-28.8 12.576V768h-96v-67.376l-28.784-12.576c-13.152-5.76-25.632-12.976-37.184-21.52l-25.28-18.688-58.448 33.728-48-83.136 58.368-33.68-3.472-31.2a194.624 194.624 0 0 1 0-43.104l3.472-31.2-58.368-33.68 48-83.136 58.432 33.728 25.296-18.688a191.744 191.744 0 0 1 37.184-21.52l28.8-12.576V256z m47.28 144a112 112 0 1 0 0 224 112 112 0 0 0 0-224z m0 48a64 64 0 1 1 0 128 64 64 0 0 1 0-128z'

class customRectView extends RectNode {
private getLabelShape() {
const { model } = this.props;
const { x, y, width, height } = model;
const style = model.getNodeStyle();
return h(
'svg',
{
x: x - width / 2 + 5,
y: y - height / 2 + 5,
width: 25,
height: 25,
viewBox: '0 0 1274 1024',
},
h('path', {
fill: style.stroke,
d: defaultIcon,
})
);
}
//自定义节点外观
getShape() {
const { model } = this.props;
const { x, y, width, height, radius } = model;
const style = model.getNodeStyle();
return h('g', {}, [
h('rect', {
...style,
x: x - width / 2,
y: y - height / 2,
width,
height,
rx: radius,
ry: radius,
}),
this.getLabelShape(),
]);
}
}
//数据源节点
export default {
type: 'bpmn:ServiceTask',
view: customRectView,
model: CustomRectModel,
text: '',
};`