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

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

@@ -0,0 +1,121 @@
+import { LinkType } from "./constant/index.mjs";
+import "./relationship-diagram-config.controller.mjs";
+import { uuid } from "@jsplumb/browser-ui";
+//#region src/modules/relationship-diagram-config/link.controller.ts
+/**
+* 连线控制器
+*
+* @author zhanghanrui
+* @date 2024-06-25 14:06:19
+* @export
+* @class LinkController
+*/
+var LinkController = class {
+	c;
+	constructor(c) {
+		this.c = c;
+	}
+	/**
+	* 创建连线
+	*
+	* @author zhanghanrui
+	* @date 2024-06-26 16:06:24
+	* @param {IData} data
+	* @return {*}  {IRelationshipDiagramLink}
+	*/
+	create(data) {
+		const i = this.c.state.links.length;
+		const link = {
+			id: uuid(),
+			i,
+			type: LinkType.DEFAULT,
+			reverse: false,
+			return: (i + 1) % this.c.config.lineCount === 0,
+			startLine: Math.floor(i / 3) + 1,
+			dashed: false,
+			...data
+		};
+		this.c.state.links.push(link);
+		setTimeout(() => {
+			this.c.connect(link);
+		}, 0);
+		return link;
+	}
+	/**
+	* 更新连线数据
+	*
+	* @author zhanghanrui
+	* @date 2024-06-25 14:06:51
+	* @param {IRelationshipDiagramLink} link
+	*/
+	update(link) {
+		const data = this.get(link.id);
+		if (data) {
+			this.clearLinks([link]);
+			Object.assign(data, link);
+			this.c.connect(link);
+		}
+	}
+	/**
+	* 获取连线数据
+	*
+	* @author zhanghanrui
+	* @date 2024-06-25 14:06:43
+	* @param {string} id
+	* @return {*}  {(IRelationshipDiagramLink | null)}
+	*/
+	get(id) {
+		return this.c.state.links.find((link) => link.id === id) ?? null;
+	}
+	/**
+	* 根据起始节点查找连线
+	*
+	* @author zhanghanrui
+	* @date 2024-06-25 14:06:19
+	* @param {string} source
+	* @return {*}  {(IRelationshipDiagramLink | null)}
+	*/
+	getBySource(source) {
+		return this.c.state.links.find((link) => link.source === source) ?? null;
+	}
+	/**
+	* 根据结束节点查找连线
+	*
+	* @author zhanghanrui
+	* @date 2024-06-25 14:06:50
+	* @param {string} target
+	* @return {*}  {(IRelationshipDiagramLink | null)}
+	*/
+	getByTarget(target) {
+		return this.c.state.links.find((link) => link.target === target) ?? null;
+	}
+	/**
+	* 删除连线数据，删除当前指定连线后所有数据
+	*
+	* @author zhanghanrui
+	* @date 2024-06-25 14:06:48
+	* @param {string} id
+	*/
+	delete(id) {
+		const i = this.c.state.links.findIndex((link) => link.id === id);
+		if (i !== -1) {
+			const links = this.c.state.links.splice(i, this.c.state.links.length);
+			this.clearLinks(links);
+		}
+	}
+	/**
+	* 清除已经绘制的连线
+	*
+	* @author zhanghanrui
+	* @date 2024-06-27 13:06:08
+	* @protected
+	* @param {IRelationshipDiagramLink[]} links
+	*/
+	clearLinks(links) {
+		this.c.plumb.getConnections().forEach((item) => {
+			if (links.find((_) => item.data.id === _.id)) this.c.plumb.deleteConnection(item);
+		});
+	}
+};
+//#endregion
+export { LinkController };

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

@@ -0,0 +1,102 @@
+import { IRelationshipDiagramNode } from './interface';
+import { RelationshipDiagramConfigController } from './relationship-diagram-config.controller';
+import { CacheController } from './cache.controller';
+/**
+ * 节点控制器
+ *
+ * @author zhanghanrui
+ * @date 2024-06-25 14:06:28
+ * @export
+ * @class NodeController
+ */
+export declare class NodeController {
+    /**
+     * 节点切换缓存
+     *
+     * @author zhanghanrui
+     * @date 2024-06-30 12:06:00
+     * @type {CacheController}
+     */
+    readonly cache: CacheController;
+    protected readonly c: RelationshipDiagramConfigController;
+    constructor(c: RelationshipDiagramConfigController);
+    /**
+     * 创建节点
+     *
+     * @author zhanghanrui
+     * @date 2024-06-28 15:06:36
+     * @param {IData} data
+     * @param {IData} [link={}] 创建节点时会同步创建连线
+     * @return {*}  {(IRelationshipDiagramNode | null)}
+     */
+    create(data: IData, link?: IData): IRelationshipDiagramNode | null;
+    /**
+     * 更新节点信息
+     *
+     * @author zhanghanrui
+     * @date 2024-06-29 15:06:40
+     * @param {IRelationshipDiagramNode} node
+     * @return {*}  {void}
+     */
+    update(node: IRelationshipDiagramNode): void;
+    /**
+     * 获取节点数据
+     *
+     * @author zhanghanrui
+     * @date 2024-06-28 13:06:48
+     * @param {string} id
+     * @param {number} [offset=0]
+     * @param {boolean} [isClone=true]
+     * @return {*}  {(IRelationshipDiagramNode | null)}
+     */
+    get(id: string, offset?: number, isClone?: boolean): IRelationshipDiagramNode | null;
+    /**
+     * 设置值，重新赋值一下，避免无法触发界面重绘
+     *
+     * @author zhanghanrui
+     * @date 2024-06-27 19:06:31
+     * @param {IRelationshipDiagramNode} node
+     */
+    set(node: IRelationshipDiagramNode): void;
+    /**
+     * 删除节点数据，会删除节点以及之后所有的节点数据
+     *
+     * @author zhanghanrui
+     * @date 2024-06-28 13:06:06
+     * @param {string} id
+     * @param {boolean} [deleteLine=true] 默认同时删除连线
+     */
+    delete(id: string, deleteLine?: boolean): void;
+    /**
+     * 节点绘制完毕
+     *
+     * @author zhanghanrui
+     * @date 2024-06-25 14:06:08
+     * @param {string} _id
+     */
+    mounted(_id: string): void;
+    /**
+     * 节点销毁
+     *
+     * @author zhanghanrui
+     * @date 2024-06-25 14:06:16
+     * @param {string} _id
+     */
+    unmounted(_id: string): void;
+    /**
+     * 设置节点
+     *
+     * @author zhanghanrui
+     * @date 2024-06-29 16:06:58
+     * @param {IRelationshipDiagramNode[]} nodes
+     */
+    setNodes(nodes: IRelationshipDiagramNode[], isSetFirst?: boolean): void;
+    /**
+     * 当前所有节点引用
+     *
+     * @author zhanghanrui
+     * @date 2024-06-30 12:06:41
+     * @return {*}  {IRelationshipDiagramNode[]}
+     */
+    getNodes(): IRelationshipDiagramNode[];
+}

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

@@ -0,0 +1,189 @@
+import { LinkType, NodeType } from "./constant/index.mjs";
+import { CacheController } from "./cache.controller.mjs";
+import "./relationship-diagram-config.controller.mjs";
+import { clone, uuid } from "@jsplumb/browser-ui";
+//#region src/modules/relationship-diagram-config/node.controller.ts
+/**
+* 节点控制器
+*
+* @author zhanghanrui
+* @date 2024-06-25 14:06:28
+* @export
+* @class NodeController
+*/
+var NodeController = class {
+	/**
+	* 节点切换缓存
+	*
+	* @author zhanghanrui
+	* @date 2024-06-30 12:06:00
+	* @type {CacheController}
+	*/
+	cache;
+	c;
+	constructor(c) {
+		this.c = c;
+		this.cache = new CacheController(c);
+	}
+	/**
+	* 创建节点
+	*
+	* @author zhanghanrui
+	* @date 2024-06-28 15:06:36
+	* @param {IData} data
+	* @param {IData} [link={}] 创建节点时会同步创建连线
+	* @return {*}  {(IRelationshipDiagramNode | null)}
+	*/
+	create(data, link = {}) {
+		if (this.c.config.max != null && this.c.config.max <= this.c.state.nodes.length) {
+			console.warn("节点数量已达到最大值");
+			return null;
+		}
+		if (this.c.config.reverseMax != null) {
+			if (this.c.state.nodes.filter((node) => node.type === NodeType.REVERSE).length >= this.c.config.reverseMax) {
+				console.warn("反向节点数量已达到最大值");
+				return null;
+			}
+		}
+		const node = {
+			id: uuid(),
+			type: NodeType.DEFAULT,
+			noSelectField: false,
+			reverse: false,
+			...data
+		};
+		const beforeNode = this.c.state.nodes[this.c.state.nodes.length - 1];
+		this.c.state.nodes.push(node);
+		setTimeout(() => {
+			this.c.link.create({
+				source: link.reverse ? node.id : beforeNode.id,
+				target: link.reverse ? beforeNode.id : node.id,
+				...link
+			});
+		}, 0);
+		return node;
+	}
+	/**
+	* 更新节点信息
+	*
+	* @author zhanghanrui
+	* @date 2024-06-29 15:06:40
+	* @param {IRelationshipDiagramNode} node
+	* @return {*}  {void}
+	*/
+	update(node) {
+		const data = this.get(node.id, 0, false);
+		if (data) this.set(Object.assign(data, node));
+	}
+	/**
+	* 获取节点数据
+	*
+	* @author zhanghanrui
+	* @date 2024-06-28 13:06:48
+	* @param {string} id
+	* @param {number} [offset=0]
+	* @param {boolean} [isClone=true]
+	* @return {*}  {(IRelationshipDiagramNode | null)}
+	*/
+	get(id, offset = 0, isClone = true) {
+		const i = this.c.state.nodes.findIndex((node) => node.id === id);
+		if (i !== -1 && this.c.state.nodes.length > i + offset) {
+			if (isClone) return clone(this.c.state.nodes[i + offset]);
+			return this.c.state.nodes[i + offset];
+		}
+		return null;
+	}
+	/**
+	* 设置值，重新赋值一下，避免无法触发界面重绘
+	*
+	* @author zhanghanrui
+	* @date 2024-06-27 19:06:31
+	* @param {IRelationshipDiagramNode} node
+	*/
+	set(node) {
+		const i = this.c.state.nodes.findIndex((_) => _.id === node.id);
+		if (i !== -1) {
+			this.c.state.nodes[i] = node;
+			this.c.state.nodes = this.c.state.nodes;
+		}
+	}
+	/**
+	* 删除节点数据，会删除节点以及之后所有的节点数据
+	*
+	* @author zhanghanrui
+	* @date 2024-06-28 13:06:06
+	* @param {string} id
+	* @param {boolean} [deleteLine=true] 默认同时删除连线
+	*/
+	delete(id, deleteLine = true) {
+		const i = this.c.state.nodes.findIndex((node) => node.id === id);
+		if (i !== -1) {
+			this.c.state.nodes.splice(i, this.c.state.nodes.length);
+			if (deleteLine) {
+				const deleteLink = this.c.link.getBySource(id);
+				if (deleteLink) this.c.link.delete(deleteLink.id);
+				const deleteReverseLink = this.c.link.getByTarget(id);
+				if (deleteReverseLink) this.c.link.delete(deleteReverseLink.id);
+			}
+		}
+	}
+	/**
+	* 节点绘制完毕
+	*
+	* @author zhanghanrui
+	* @date 2024-06-25 14:06:08
+	* @param {string} _id
+	*/
+	mounted(_id) {
+		this.c.state.nodeCount += 1;
+	}
+	/**
+	* 节点销毁
+	*
+	* @author zhanghanrui
+	* @date 2024-06-25 14:06:16
+	* @param {string} _id
+	*/
+	unmounted(_id) {
+		this.c.state.nodeCount -= 1;
+	}
+	/**
+	* 设置节点
+	*
+	* @author zhanghanrui
+	* @date 2024-06-29 16:06:58
+	* @param {IRelationshipDiagramNode[]} nodes
+	*/
+	setNodes(nodes, isSetFirst = true) {
+		if (nodes.length > 0) {
+			if (isSetFirst) this.c.state.nodes.push(...nodes);
+			let before = nodes.shift();
+			if (!isSetFirst) this.c.state.nodes.push(...nodes);
+			nodes.forEach((_) => {
+				if (_.reverse) this.c.link.create({
+					source: _.id,
+					target: before.id,
+					reverse: true,
+					type: _.value ? LinkType.DEFAULT : LinkType.VIRTUAL
+				});
+				else this.c.link.create({
+					source: before.id,
+					target: _.id
+				});
+				before = _;
+			});
+		}
+	}
+	/**
+	* 当前所有节点引用
+	*
+	* @author zhanghanrui
+	* @date 2024-06-30 12:06:41
+	* @return {*}  {IRelationshipDiagramNode[]}
+	*/
+	getNodes() {
+		return this.c.state.nodes;
+	}
+};
+//#endregion
+export { NodeController };

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

@@ -0,0 +1,23 @@
+import { Endpoint, EndpointHandler, EndpointRepresentation, EndpointRepresentationParams } from '@jsplumb/browser-ui';
+/**
+ * @public
+ */
+export interface ArrowEndpointParams extends EndpointRepresentationParams {
+    /**
+     * 箭头指向
+     *
+     * @default 'right'
+     * @author zhanghanrui
+     * @date 2024-04-14 14:04:09
+     * @type {('left' | 'right')}
+     */
+    direction: 'left' | 'right';
+}
+export type ComputedArrowEndpoint = [number, number, number, number];
+export declare class ArrowEndpoint extends EndpointRepresentation<ComputedArrowEndpoint> {
+    params?: ArrowEndpointParams;
+    constructor(endpoint: Endpoint, params?: ArrowEndpointParams);
+    static type: string;
+    type: string;
+}
+export declare const ArrowEndpointHandler: EndpointHandler<ArrowEndpoint, ComputedArrowEndpoint>;

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

@@ -0,0 +1,33 @@
+import { EndpointRepresentation } from "@jsplumb/browser-ui";
+//#region src/modules/relationship-diagram-config/plumb-plugin/arrow-endpoint.ts
+var ArrowEndpoint = class ArrowEndpoint extends EndpointRepresentation {
+	params;
+	constructor(endpoint, params) {
+		super(endpoint, params);
+		this.params = params;
+	}
+	static type = "Arrow";
+	type = ArrowEndpoint.type;
+};
+var ArrowEndpointHandler = {
+	type: ArrowEndpoint.type,
+	cls: ArrowEndpoint,
+	compute: (ep, anchorPoint, _orientation, _endpointStyle) => {
+		const { direction } = ep.params || {};
+		ep.x = anchorPoint.curX - (direction === "left" ? 0 : 4);
+		ep.y = anchorPoint.curY - 2.6;
+		ep.w = 6;
+		ep.h = 6;
+		return [
+			anchorPoint.curX,
+			anchorPoint.curY,
+			0,
+			0
+		];
+	},
+	getParams: (_ep) => {
+		return {};
+	}
+};
+//#endregion
+export { ArrowEndpoint, ArrowEndpointHandler };

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

@@ -0,0 +1 @@
+export declare const register: () => void;

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