@gct-paas/core-web 0.1.6-dev.1 → 0.1.6-dev.11

package/es/modules/relationship-diagram-config/providers/default-link-provider/default-link-provider.mjs

@@ -0,0 +1,184 @@
+import { ArrowEndpoint } from "../../plumb-plugin/arrow-endpoint.mjs";
+import "../../plumb-plugin/index.mjs";
+import { ConnectionDirection, LinkType, NodeType } from "../../constant/index.mjs";
+import "../../relationship-diagram-config.controller.mjs";
+import './default-link-provider.css';/* empty css                            */
+import { t, useNamespace } from "@gct-paas/core";
+import { Modal as Modal$1 } from "ant-design-vue";
+import { DotEndpoint, FlowchartConnector } from "@jsplumb/browser-ui";
+//#region src/modules/relationship-diagram-config/providers/default-link-provider/default-link-provider.ts
+/**
+* 默认连线适配器
+*
+* @author zhanghanrui
+* @date 2024-06-25 19:06:34
+* @export
+* @class DefaultLinkProvider
+* @implements {ILinkProvider}
+*/
+var DefaultLinkProvider = class {
+	type = LinkType.DEFAULT;
+	ns = useNamespace("diagram-config-default-link");
+	sourceHandle = "handle-select";
+	deleteMessage = "sys.pageDesigner.dataLinkage.confirm.title";
+	reverse(c, link) {
+		let data = null;
+		if (link.reverse) data = c.node.get(link.target, 0, true);
+		else data = c.node.get(link.source, 0, true);
+		if (data) {
+			if (link.reverse !== true) c.node.cache.reverseClear(data, ConnectionDirection.FORWARD);
+			else c.node.cache.reverseClear(data, ConnectionDirection.REVERSE);
+			c.node.update(Object.assign(data, {
+				value: null,
+				label: null,
+				noSelectField: link.reverse === true ? false : true
+			}));
+			if (!link.reverse) {
+				if (c.node.cache.reverseReset(data, ConnectionDirection.REVERSE)) return;
+			} else if (c.node.cache.reverseReset(data, ConnectionDirection.FORWARD)) return;
+			if (!link.reverse) c.node.create({
+				type: NodeType.REVERSE,
+				reverse: true
+			}, {
+				type: LinkType.VIRTUAL,
+				reverse: true,
+				dashed: true
+			});
+		}
+	}
+	options(c, link) {
+		let anchors = link.reverse ? ["Left", [
+			1,
+			.5,
+			0,
+			0,
+			0,
+			14
+		]] : ["Right", [
+			0,
+			.5,
+			0,
+			0,
+			0,
+			14
+		]];
+		if (link.return) anchors = link.startLine % 2 === 1 ? ["Right", "Right"] : ["Left", "Left"];
+		else if (link.startLine % 2 === 0) anchors = link.reverse ? ["Right", [
+			0,
+			.5,
+			0,
+			0,
+			0,
+			14
+		]] : ["Left", [
+			1,
+			.5,
+			0,
+			0,
+			0,
+			14
+		]];
+		let direction = "right";
+		if (link.startLine % 2 === 1) direction = link.return || link.reverse ? "left" : "right";
+		else direction = link.return || link.reverse ? "right" : "left";
+		return {
+			hoverClass: this.ns.e("line-hover"),
+			paintStyle: {
+				strokeWidth: 1,
+				stroke: "#3168EC",
+				dashstyle: "0"
+			},
+			endpointStyle: { fill: "#3168EC" },
+			anchors,
+			connector: {
+				type: FlowchartConnector.type,
+				options: {
+					stub: [0, 25],
+					cornerRadius: 10
+				}
+			},
+			endpoints: [{
+				type: DotEndpoint.type,
+				options: { radius: 3 }
+			}, {
+				type: ArrowEndpoint.type,
+				options: { direction }
+			}],
+			overlays: [{
+				type: "Custom",
+				options: {
+					id: "change",
+					location: .5,
+					create: () => {
+						const div = document.createElement("div");
+						div.classList.add(this.ns.b("custom-overlay-line"));
+						if (link.return === true) div.classList.add(this.ns.be("custom-overlay-line", "special-line"));
+						else div.classList.add(this.ns.be("custom-overlay-line", "not-special-line"));
+						return div;
+					}
+				}
+			}, {
+				type: "Custom",
+				options: {
+					id: "delete",
+					location: .5,
+					create: () => {
+						const div = document.createElement("div");
+						div.classList.add(this.ns.b("custom-overlay"));
+						if (link.return === true) div.classList.add(this.ns.be("custom-overlay", "special-line"));
+						else div.classList.add(this.ns.be("custom-overlay", "not-special-line"));
+						if (link.type !== LinkType.VIRTUAL || link.reverse === true) {
+							const iEl = document.createElement("i");
+							iEl.className = "iconfont icon-caiqie1 delete-action";
+							iEl.onclick = (e) => {
+								e.stopPropagation();
+								Modal$1.confirm({
+									title: t(this.deleteMessage),
+									content: t("sys.pageDesigner.dataLinkage.confirm.content"),
+									onOk: () => {
+										if (link.reverse !== true) {
+											const sourceNode = c.node.get(link.source, 0, true);
+											if (sourceNode) {
+												c.node.cache.clear(sourceNode);
+												c.node.update(Object.assign(sourceNode, {
+													value: null,
+													label: null
+												}));
+											}
+										} else {
+											const targetNode = c.node.get(link.target, 0, true);
+											if (targetNode) {
+												c.node.cache.reverseClear(targetNode);
+												c.node.update(Object.assign(targetNode, {
+													value: null,
+													label: null,
+													noSelectField: false
+												}));
+											}
+										}
+									}
+								});
+							};
+							div.appendChild(iEl);
+						}
+						if (c.config.oneDirection === true && link.i === 0 || c.config.oneDirection === false && (c.config.reverseCount == null || link.i >= c.config.reverseCount)) {
+							const iEl2 = document.createElement("i");
+							iEl2.className = "iconfont icon-qiehuan1 reverse-action";
+							iEl2.onclick = (e) => {
+								e.stopPropagation();
+								this.reverse(c, link);
+							};
+							div.appendChild(iEl2);
+						}
+						return div;
+					}
+				}
+			}]
+		};
+	}
+	click(c, link) {
+		if (c.config.oneDirection === true && link.i === 0 || c.config.oneDirection === false && (c.config.reverseCount == null || link.i >= c.config.reverseCount)) this.reverse(c, link);
+	}
+};
+//#endregion
+export { DefaultLinkProvider };

package/es/modules/relationship-diagram-config/providers/default-node-provider/default-node-provider.d.ts

@@ -0,0 +1,14 @@
+import { INodeProvider } from '../../interface';
+/**
+ * 默认节点
+ *
+ * @author zhanghanrui
+ * @date 2024-06-25 20:06:31
+ * @export
+ * @class DefaultNodeProvider
+ * @implements {INodeProvider}
+ */
+export declare class DefaultNodeProvider implements INodeProvider {
+    type: string;
+    component: string;
+}

package/es/modules/relationship-diagram-config/providers/default-node-provider/default-node-provider.mjs

@@ -0,0 +1,17 @@
+import { NodeType } from "../../constant/index.mjs";
+//#region src/modules/relationship-diagram-config/providers/default-node-provider/default-node-provider.ts
+/**
+* 默认节点
+*
+* @author zhanghanrui
+* @date 2024-06-25 20:06:31
+* @export
+* @class DefaultNodeProvider
+* @implements {INodeProvider}
+*/
+var DefaultNodeProvider = class {
+	type = NodeType.DEFAULT;
+	component = "DiagramConfigItem";
+};
+//#endregion
+export { DefaultNodeProvider };

package/es/modules/relationship-diagram-config/providers/index.d.ts

@@ -0,0 +1,5 @@
+export { DefaultLinkProvider } from './default-link-provider/default-link-provider';
+export { DefaultNodeProvider } from './default-node-provider/default-node-provider';
+export { ReverseNodeProvider } from './reverse-node-provider/reverse-node-provider';
+export { VirtualLinkProvider } from './virtual-link-provider/virtual-link-provider';
+export { VirtualNodeProvider } from './virtual-node-provider/virtual-node-provider';

package/es/modules/relationship-diagram-config/providers/index.mjs

@@ -0,0 +1,5 @@
+import "./default-link-provider/default-link-provider.mjs";
+import "./default-node-provider/default-node-provider.mjs";
+import "./reverse-node-provider/reverse-node-provider.mjs";
+import "./virtual-link-provider/virtual-link-provider.mjs";
+import "./virtual-node-provider/virtual-node-provider.mjs";

package/es/modules/relationship-diagram-config/providers/reverse-node-provider/reverse-node-provider.d.ts

@@ -0,0 +1,14 @@
+import { INodeProvider } from '../../interface';
+/**
+ * 最后的虚拟节点
+ *
+ * @author zhanghanrui
+ * @date 2024-06-25 20:06:31
+ * @export
+ * @class ReverseNodeProvider
+ * @implements {INodeProvider}
+ */
+export declare class ReverseNodeProvider implements INodeProvider {
+    type: string;
+    component: string;
+}

package/es/modules/relationship-diagram-config/providers/reverse-node-provider/reverse-node-provider.mjs

@@ -0,0 +1,17 @@
+import { NodeType } from "../../constant/index.mjs";
+//#region src/modules/relationship-diagram-config/providers/reverse-node-provider/reverse-node-provider.ts
+/**
+* 最后的虚拟节点
+*
+* @author zhanghanrui
+* @date 2024-06-25 20:06:31
+* @export
+* @class ReverseNodeProvider
+* @implements {INodeProvider}
+*/
+var ReverseNodeProvider = class {
+	type = NodeType.REVERSE;
+	component = "DiagramConfigItemReverse";
+};
+//#endregion
+export { ReverseNodeProvider };

package/es/modules/relationship-diagram-config/providers/virtual-link-provider/virtual-link-provider.d.ts

@@ -0,0 +1,16 @@
+import { ConnectParams } from '@jsplumb/browser-ui';
+import { IRelationshipDiagramLink } from '../../interface';
+import { RelationshipDiagramConfigController } from '../../relationship-diagram-config.controller';
+import { DefaultLinkProvider } from '../default-link-provider/default-link-provider';
+/**
+ * 虚拟连线
+ *
+ * @author zhanghanrui
+ * @date 2024-06-27 16:06:04
+ * @export
+ * @class VirtualLinkProvider
+ * @extends {DefaultLinkProvider}
+ */
+export declare class VirtualLinkProvider extends DefaultLinkProvider {
+    options(c: RelationshipDiagramConfigController, link: IRelationshipDiagramLink): ConnectParams<Element>;
+}

package/es/modules/relationship-diagram-config/providers/virtual-link-provider/virtual-link-provider.mjs

@@ -0,0 +1,26 @@
+import "../../relationship-diagram-config.controller.mjs";
+import { DefaultLinkProvider } from "../default-link-provider/default-link-provider.mjs";
+//#region src/modules/relationship-diagram-config/providers/virtual-link-provider/virtual-link-provider.ts
+/**
+* 虚拟连线
+*
+* @author zhanghanrui
+* @date 2024-06-27 16:06:04
+* @export
+* @class VirtualLinkProvider
+* @extends {DefaultLinkProvider}
+*/
+var VirtualLinkProvider = class extends DefaultLinkProvider {
+	options(c, link) {
+		const opts = super.options(c, link);
+		opts.paintStyle = {
+			strokeWidth: 1,
+			stroke: "#C3C3C3",
+			dashstyle: "4 4"
+		};
+		opts.endpointStyle = { fill: "#C3C3C3" };
+		return opts;
+	}
+};
+//#endregion
+export { VirtualLinkProvider };

package/es/modules/relationship-diagram-config/providers/virtual-node-provider/virtual-node-provider.d.ts

@@ -0,0 +1,14 @@
+import { INodeProvider } from '../../interface';
+/**
+ * 最后的虚拟节点
+ *
+ * @author zhanghanrui
+ * @date 2024-06-25 20:06:31
+ * @export
+ * @class VirtualNodeProvider
+ * @implements {INodeProvider}
+ */
+export declare class VirtualNodeProvider implements INodeProvider {
+    type: string;
+    component: string;
+}

package/es/modules/relationship-diagram-config/providers/virtual-node-provider/virtual-node-provider.mjs

@@ -0,0 +1,17 @@
+import { NodeType } from "../../constant/index.mjs";
+//#region src/modules/relationship-diagram-config/providers/virtual-node-provider/virtual-node-provider.ts
+/**
+* 最后的虚拟节点
+*
+* @author zhanghanrui
+* @date 2024-06-25 20:06:31
+* @export
+* @class VirtualNodeProvider
+* @implements {INodeProvider}
+*/
+var VirtualNodeProvider = class {
+	type = NodeType.VIRTUAL;
+	component = "DiagramConfigItemVirtual";
+};
+//#endregion
+export { VirtualNodeProvider };

package/es/modules/relationship-diagram-config/relationship-diagram-config.controller.d.ts

@@ -0,0 +1,119 @@
+import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
+import { RelationshipDiagramConfigState } from './relationship-diagram-config.state';
+import { NodeController } from './node.controller';
+import { LinkController } from './link.controller';
+import { IRelationshipDiagramLink, IRelationshipDiagramOptions } from './interface';
+import { ModelMetaDTO } from '@gct-paas/api/apaas';
+/**
+ * 图形内控制器
+ *
+ * @author zhanghanrui
+ * @date 2024-06-25 09:06:30
+ * @export
+ * @class RelationshipDiagramConfigController
+ */
+export declare class RelationshipDiagramConfigController {
+    /**
+     * 组件绘制完成后设置
+     *
+     * @author zhanghanrui
+     * @date 2024-06-25 15:06:08
+     * @type {HTMLDivElement}
+     */
+    container: HTMLDivElement;
+    /**
+     * 界面状态
+     *
+     * @author zhanghanrui
+     * @date 2024-06-25 09:06:41
+     * @type {RelationshipDiagramConfigState}
+     */
+    state: RelationshipDiagramConfigState;
+    /**
+     * 画线工具实例
+     *
+     * @author zhanghanrui
+     * @date 2024-06-25 14:06:11
+     * @type {BrowserJsPlumbInstance}
+     */
+    plumb: BrowserJsPlumbInstance;
+    readonly node: NodeController;
+    readonly link: LinkController;
+    /**
+     * 组件配置
+     *
+     * @author zhanghanrui
+     * @date 2024-06-28 15:06:35
+     * @type {IRelationshipDiagramOptions}
+     */
+    readonly config: IRelationshipDiagramOptions;
+    /**
+     * 临时窗口内加载的模型缓存
+     *
+     * @author zhanghanrui
+     * @date 2024-06-28 10:06:43
+     * @protected
+     * @type {IData}
+     */
+    protected modelMap: IData;
+    /**
+     * 临时窗口内加载的引用模型清单缓存
+     *
+     * @author zhanghanrui
+     * @date 2024-06-28 10:06:55
+     * @protected
+     * @type {IData}
+     */
+    protected modelListMap: IData;
+    /**
+     * 初始化画线工具
+     *
+     * @author zhanghanrui
+     * @date 2024-06-25 14:06:25
+     * @param {HTMLDivElement} el
+     */
+    initPlumb(el: HTMLDivElement): void;
+    connectAll(): void;
+    connect(link: IRelationshipDiagramLink): void;
+    /**
+     * 断开连线
+     *
+     * @author zhanghanrui
+     * @date 2024-06-27 17:06:43
+     * @param {IRelationshipDiagramLink} link
+     */
+    disconnect(link: IRelationshipDiagramLink): void;
+    /**
+     * 重绘连线
+     *
+     * @author zhanghanrui
+     * @date 2024-06-26 17:06:31
+     */
+    redraw(count?: number): void;
+    /**
+     * 根据标识查询具体模型，并携带属性
+     *
+     * @author zhanghanrui
+     * @date 2024-06-26 13:06:55
+     * @param {string} modelKey
+     * @return {*}  {Promise<ModelMetaDTO>}
+     */
+    getModel(modelKey: string): Promise<ModelMetaDTO>;
+    /**
+     * 获取引用了指定模型的模型列表
+     *
+     * @author zhanghanrui
+     * @date 2024-06-29 18:06:47
+     * @param {string} modelKey
+     * @param {string} [fieldKey='']
+     * @return {*}  {Promise<ModelMetaDTO[]>}
+     */
+    getModelList(modelKey: string, fieldKey?: string): Promise<ModelMetaDTO[]>;
+    /**
+     * 清空所有
+     *
+     * @author zhanghanrui
+     * @date 2024-06-29 17:06:11
+     */
+    clearAll(): void;
+}

package/es/modules/relationship-diagram-config/relationship-diagram-config.controller.mjs

@@ -0,0 +1,199 @@
+import { RelationshipDiagramConfigState } from "./relationship-diagram-config.state.mjs";
+import { NodeController } from "./node.controller.mjs";
+import { LinkController } from "./link.controller.mjs";
+import { RegisterUtil } from "./utils/register/register.mjs";
+import { EVENT_CONNECTION_CLICK, newInstance } from "@jsplumb/browser-ui";
+//#region src/modules/relationship-diagram-config/relationship-diagram-config.controller.ts
+/**
+* 图形内控制器
+*
+* @author zhanghanrui
+* @date 2024-06-25 09:06:30
+* @export
+* @class RelationshipDiagramConfigController
+*/
+var RelationshipDiagramConfigController = class {
+	/**
+	* 组件绘制完成后设置
+	*
+	* @author zhanghanrui
+	* @date 2024-06-25 15:06:08
+	* @type {HTMLDivElement}
+	*/
+	container;
+	/**
+	* 界面状态
+	*
+	* @author zhanghanrui
+	* @date 2024-06-25 09:06:41
+	* @type {RelationshipDiagramConfigState}
+	*/
+	state = new RelationshipDiagramConfigState();
+	/**
+	* 画线工具实例
+	*
+	* @author zhanghanrui
+	* @date 2024-06-25 14:06:11
+	* @type {BrowserJsPlumbInstance}
+	*/
+	plumb;
+	node = new NodeController(this);
+	link = new LinkController(this);
+	/**
+	* 组件配置
+	*
+	* @author zhanghanrui
+	* @date 2024-06-28 15:06:35
+	* @type {IRelationshipDiagramOptions}
+	*/
+	config = {
+		lineCount: 3,
+		oneDirection: true
+	};
+	/**
+	* 临时窗口内加载的模型缓存
+	*
+	* @author zhanghanrui
+	* @date 2024-06-28 10:06:43
+	* @protected
+	* @type {IData}
+	*/
+	modelMap = {};
+	/**
+	* 临时窗口内加载的引用模型清单缓存
+	*
+	* @author zhanghanrui
+	* @date 2024-06-28 10:06:55
+	* @protected
+	* @type {IData}
+	*/
+	modelListMap = {};
+	/**
+	* 初始化画线工具
+	*
+	* @author zhanghanrui
+	* @date 2024-06-25 14:06:25
+	* @param {HTMLDivElement} el
+	*/
+	initPlumb(el) {
+		this.container = el;
+		this.plumb = newInstance({
+			container: el,
+			connectionsDetachable: false,
+			elementsDraggable: false
+		});
+		this.plumb.bind(EVENT_CONNECTION_CLICK, (conn) => {
+			if (conn) {
+				const data = conn.data;
+				const p = RegisterUtil.getLink(data.type);
+				if (p && p.click) p.click(this, data);
+			}
+		});
+	}
+	connectAll() {
+		this.plumb.deleteEveryConnection();
+		this.state.links.forEach((link) => {
+			this.connect(link);
+		});
+	}
+	connect(link) {
+		const linkProvider = RegisterUtil.getLink(link.type);
+		if (!linkProvider) {
+			console.error(`未找到连线适配器类型：[${link.type}]`);
+			return;
+		}
+		const items = Array.from(this.container.children);
+		let source = items.find((el) => el.id === link.source);
+		let target = items.find((el) => el.id === link.target);
+		if (!source || !target) {
+			console.error(`未找到连线源或目标节点：[${link.source}]、[${link.target}]`);
+			return;
+		}
+		if (linkProvider.sourceHandle) source = source.getElementsByClassName(linkProvider.sourceHandle)[0];
+		if (linkProvider.targetHandle) target = target.getElementsByClassName(linkProvider.targetHandle)[0];
+		const _opts = linkProvider.options(this, link);
+		const opts = {
+			data: link,
+			source,
+			target,
+			..._opts
+		};
+		this.plumb.connect(opts);
+	}
+	/**
+	* 断开连线
+	*
+	* @author zhanghanrui
+	* @date 2024-06-27 17:06:43
+	* @param {IRelationshipDiagramLink} link
+	*/
+	disconnect(link) {
+		const connection = this.plumb.getConnections().find((c) => c.data.id === link.id);
+		if (connection) this.plumb.deleteConnection(connection);
+	}
+	/**
+	* 重绘连线
+	*
+	* @author zhanghanrui
+	* @date 2024-06-26 17:06:31
+	*/
+	redraw(count = 0) {
+		if (count > 10) {
+			console.error("重绘失败");
+			return;
+		}
+		setTimeout(() => {
+			if (this.state.nodes.length === this.state.nodeCount) this.connectAll();
+			else this.redraw(count);
+		}, 100);
+	}
+	/**
+	* 根据标识查询具体模型，并携带属性
+	*
+	* @author zhanghanrui
+	* @date 2024-06-26 13:06:55
+	* @param {string} modelKey
+	* @return {*}  {Promise<ModelMetaDTO>}
+	*/
+	async getModel(modelKey) {
+		if (this.modelMap[modelKey]) return this.modelMap[modelKey];
+		const data = await _api.apaas.modelMeta.getDetail({ modelKey });
+		if (data) {
+			this.modelMap[modelKey] = data;
+			return data;
+		}
+		return Promise.reject(/* @__PURE__ */ new Error(`${modelKey} model not found`));
+	}
+	/**
+	* 获取引用了指定模型的模型列表
+	*
+	* @author zhanghanrui
+	* @date 2024-06-29 18:06:47
+	* @param {string} modelKey
+	* @param {string} [fieldKey='']
+	* @return {*}  {Promise<ModelMetaDTO[]>}
+	*/
+	async getModelList(modelKey, fieldKey = "") {
+		const tag = `${modelKey}:${fieldKey}`;
+		if (this.modelListMap[tag]) return this.modelListMap[tag];
+		const data = await _api.apaas.modelMeta.getListModelReferencedBy({ modelKey });
+		if (data) {
+			this.modelListMap[tag] = data;
+			return data;
+		}
+		return Promise.reject(/* @__PURE__ */ new Error(`${tag} model list not found`));
+	}
+	/**
+	* 清空所有
+	*
+	* @author zhanghanrui
+	* @date 2024-06-29 17:06:11
+	*/
+	clearAll() {
+		this.state.links = [];
+		this.state.nodes = [];
+		if (this.plumb) this.plumb.deleteEveryConnection();
+	}
+};
+//#endregion
+export { RelationshipDiagramConfigController };