102 lines
2.5 KiB
JavaScript
102 lines
2.5 KiB
JavaScript
|
import { GroupNodeModel } from '@logicflow/extension';
|
|||
|
|
// 导入 Vue 相关方法，用于渲染组件
|
|||
|
|
import { createApp, h, nextTick } from "vue";
|
|||
|
|
import { HtmlNode, h as svgH } from "@logicflow/core";
|
|||
|
|
import ElementPlus from "element-plus";
|
|||
|
|
// @ts-ignore
|
|||
|
|
import SelectAreaNode from './selectAreaNode.vue';
|
|||
|
|
|
|||
|
|
class SelectAreaModel extends GroupNodeModel {
|
|||
|
|
|
|||
|
|
initNodeData(data) {
|
|||
|
|
super.initNodeData(data);
|
|||
|
|
this.children = new Set(data.children || [])
|
|||
|
|
this.zIndex = 0;
|
|||
|
|
this.isGroup = true;
|
|||
|
|
this.resizable = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getDefaultAnchor() {
|
|||
|
|
return []
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
isAllowAppendIn() {
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class SelectAreaView extends HtmlNode {
|
|||
|
|
resizeObserver = null;
|
|||
|
|
isMounted; // 标记组件是否已挂载
|
|||
|
|
r; // 渲染函数
|
|||
|
|
app; // Vue 应用实例
|
|||
|
|
container = null;
|
|||
|
|
|
|||
|
|
static reusePool = new Map(); // 节点复用池
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 构造函数
|
|||
|
|
* @param props 传递给节点的属性，包括模型、图模型等
|
|||
|
|
*/
|
|||
|
|
constructor(props) {
|
|||
|
|
super(props);
|
|||
|
|
this.initVueApp(props);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
initVueApp(props) {
|
|||
|
|
this.isMounted = false;
|
|||
|
|
|
|||
|
|
this.hideAnchor = false;
|
|||
|
|
this.autoExpand = true; // 防止锚点被折叠
|
|||
|
|
this.anchorsPreset = "default"; // 重置锚点预设
|
|||
|
|
// 创建 元素的渲染函数
|
|||
|
|
this.r = h(SelectAreaNode, {
|
|||
|
|
model: props.model,
|
|||
|
|
graphModel: props.graphModel,
|
|||
|
|
properties: {
|
|||
|
|
...props.model.getProperties(),
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 创建 Vue 应用实例，并指定渲染函数
|
|||
|
|
this.app = createApp({
|
|||
|
|
render: () => this.r,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 将 HTML 内容设置到指定的根元素上
|
|||
|
|
* @param rootEl 根元素
|
|||
|
|
*/
|
|||
|
|
async setHtml(rootEl) {
|
|||
|
|
const nodeId = this.props.model.id;
|
|||
|
|
if (SelectAreaView.reusePool.has(nodeId)) {
|
|||
|
|
rootEl.appendChild(SelectAreaView.reusePool.get(nodeId));
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!this.isMounted) {
|
|||
|
|
this.isMounted = true;
|
|||
|
|
this.container = document.createElement("div");
|
|||
|
|
this.container.style.width = "100%"; // 关键：确保容器自适应内容
|
|||
|
|
this.container.style.height = "100%"; // 关键：确保容器自适应内容
|
|||
|
|
|
|||
|
|
rootEl.appendChild(this.container);
|
|||
|
|
this.app.use(ElementPlus); // 关键：单独注册ElementPlus
|
|||
|
|
this.app.mount(this.container);
|
|||
|
|
SelectAreaView.reusePool.set(nodeId, this.container);
|
|||
|
|
} else {
|
|||
|
|
this.r.component.props.properties = this.props.model.getProperties();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 导出方法注册
|
|||
|
|
export function registerSelectAreaNode(lf) {
|
|||
|
|
lf.register({
|
|||
|
|
type: "selectArea",
|
|||
|
|
view: SelectAreaView,
|
|||
|
|
model: SelectAreaModel,
|
|||
|
|
});
|
|||
|
|
}
|