@gct-paas/core-web 0.1.6-dev.5 → 0.1.6-dev.7

package/es/modules/relationship-diagram-config/plumb-plugin/blank-endpoint-renderer.mjs

@@ -0,0 +1,27 @@
+import { ArrowEndpoint } from "./arrow-endpoint.mjs";
+import { registerEndpointRenderer, svg } from "@jsplumb/browser-ui";
+//#region src/modules/relationship-diagram-config/plumb-plugin/blank-endpoint-renderer.ts
+var calcPoints = (direction) => {
+	if (direction === "left") return "0,3 6,0 6,6";
+	else return "0,0 6,3 0,6";
+};
+var register = () => {
+	registerEndpointRenderer(ArrowEndpoint.type, {
+		makeNode: (ep, _style) => {
+			const { direction } = ep.params || {};
+			return svg.node("polygon", {
+				points: calcPoints(direction),
+				"stroke-width": 1
+			});
+		},
+		updateNode: (ep, node) => {
+			const { direction } = ep.params || {};
+			svg.attr(node, {
+				points: calcPoints(direction),
+				"stroke-width": 1
+			});
+		}
+	});
+};
+//#endregion
+export { register };

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

@@ -0,0 +1,3 @@
+export type { ArrowEndpointParams, ComputedArrowEndpoint, } from './arrow-endpoint';
+export { ArrowEndpoint, ArrowEndpointHandler } from './arrow-endpoint';
+export { register } from './blank-endpoint-renderer';

package/es/modules/relationship-diagram-config/plumb-plugin/index.mjs

@@ -0,0 +1,2 @@
+import "./arrow-endpoint.mjs";
+import "./blank-endpoint-renderer.mjs";

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

@@ -0,0 +1,132 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-diagram-config-default-link__line-hover {
+  color: red;
+}
+
+.gct-diagram-config-default-link-custom-overlay-line {
+  cursor: pointer;
+}
+.gct-diagram-config-default-link-custom-overlay-line__not-special-line {
+  width: 50px;
+  height: 10px;
+}
+
+.gct-diagram-config-default-link-custom-overlay-line__special-line {
+  width: 10px;
+  height: 80px;
+}
+
+.gct-diagram-config-default-link-custom-overlay {
+  position: relative;
+  cursor: pointer;
+}
+.gct-diagram-config-default-link-custom-overlay .iconfont {
+  display: none;
+  width: 16px;
+  height: 16px;
+}
+.gct-diagram-config-default-link-custom-overlay .iconfont.delete-action:hover {
+  color: #F54547;
+}
+.gct-diagram-config-default-link-custom-overlay .iconfont.reverse-action:hover {
+  color: #3168EC;
+}
+.gct-diagram-config-default-link-custom-overlay__not-special-line {
+  width: 16px;
+  height: 50px;
+}
+.gct-diagram-config-default-link-custom-overlay__not-special-line .iconfont.delete-action {
+  position: absolute;
+  bottom: 9px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.gct-diagram-config-default-link-custom-overlay__not-special-line .iconfont.reverse-action {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.gct-diagram-config-default-link-custom-overlay.jtk-hover .iconfont {
+  display: block;
+}
+.gct-diagram-config-default-link-custom-overlay__special-line {
+  width: 50px;
+  height: 16px;
+}
+.gct-diagram-config-default-link-custom-overlay__special-line .iconfont.delete-action {
+  position: absolute;
+  top: 50%;
+  left: 5px;
+  transform: translateY(-50%);
+}
+.gct-diagram-config-default-link-custom-overlay__special-line .iconfont.reverse-action {
+  position: absolute;
+  top: 50%;
+  right: 5px;
+  transform: translateY(-50%);
+}

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

@@ -0,0 +1,21 @@
+import { ConnectParams } from '@jsplumb/browser-ui';
+import { ILinkProvider, IRelationshipDiagramLink } from '../../interface';
+import { RelationshipDiagramConfigController } from '../../relationship-diagram-config.controller';
+/**
+ * 默认连线适配器
+ *
+ * @author zhanghanrui
+ * @date 2024-06-25 19:06:34
+ * @export
+ * @class DefaultLinkProvider
+ * @implements {ILinkProvider}
+ */
+export declare class DefaultLinkProvider implements ILinkProvider {
+    type: "default";
+    protected ns: import('@gct-paas/core').Namespace;
+    sourceHandle: string;
+    deleteMessage: string;
+    protected reverse(c: RelationshipDiagramConfigController, link: IRelationshipDiagramLink): void;
+    options(c: RelationshipDiagramConfigController, link: IRelationshipDiagramLink): ConnectParams<Element>;
+    click(c: RelationshipDiagramConfigController, link: IRelationshipDiagramLink): void;
+}

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;
+}