@gct-paas/core-web 0.1.6-dev.2 → 0.1.6-dev.21

package/es/modules/relationship-diagram-config/relationship-diagram-config.css

@@ -0,0 +1,113 @@
+@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-relationship-diagram-config {
+  position: relative;
+}
+
+.gct-relationship-diagram-config-custom-overlay {
+  position: relative;
+  width: 50px;
+  height: 50px;
+  cursor: pointer;
+}
+.gct-relationship-diagram-config-custom-overlay .iconfont {
+  display: none;
+  width: 16px;
+  height: 16px;
+}
+.gct-relationship-diagram-config-custom-overlay .iconfont.delete-action:hover {
+  color: #F54547;
+}
+.gct-relationship-diagram-config-custom-overlay .iconfont.reverse-action:hover {
+  color: #3168EC;
+}
+.gct-relationship-diagram-config-custom-overlay__not-special-line .iconfont.delete-action {
+  position: absolute;
+  bottom: 9px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.gct-relationship-diagram-config-custom-overlay__not-special-line .iconfont.reverse-action {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.gct-relationship-diagram-config-custom-overlay.jtk-hover .iconfont {
+  display: block;
+}
+.gct-relationship-diagram-config-custom-overlay__special-line .iconfont.delete-action {
+  position: absolute;
+  top: 50%;
+  left: 5px;
+  transform: translateY(-50%);
+}
+.gct-relationship-diagram-config-custom-overlay__special-line .iconfont.reverse-action {
+  position: absolute;
+  top: 50%;
+  right: 5px;
+  transform: translateY(-50%);
+}

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

@@ -0,0 +1,102 @@
+import { PropType } from 'vue';
+import { RelationshipDiagramConfigController } from './relationship-diagram-config.controller';
+import { IRelationshipDiagramNode, IRelationshipDiagramOptions } from './interface';
+/**
+ * 关系图配置
+ */
+export declare const RelationshipDiagramConfig: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    context: {
+        type: PropType<IData>;
+        default: () => {};
+    };
+    items: {
+        type: {
+            (arrayLength: number): IRelationshipDiagramNode[];
+            (...items: IRelationshipDiagramNode[]): IRelationshipDiagramNode[];
+            new (arrayLength: number): IRelationshipDiagramNode[];
+            new (...items: IRelationshipDiagramNode[]): IRelationshipDiagramNode[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            readonly [Symbol.species]: ArrayConstructor;
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+        };
+        default: () => never[];
+    };
+    config: {
+        type: PropType<IRelationshipDiagramOptions>;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    elRef: import('vue').Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+    c: RelationshipDiagramConfigController;
+    lastId: string;
+    isEnd: (item: IRelationshipDiagramNode, i: number) => boolean;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:items"[], "update:items", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    context: {
+        type: PropType<IData>;
+        default: () => {};
+    };
+    items: {
+        type: {
+            (arrayLength: number): IRelationshipDiagramNode[];
+            (...items: IRelationshipDiagramNode[]): IRelationshipDiagramNode[];
+            new (arrayLength: number): IRelationshipDiagramNode[];
+            new (...items: IRelationshipDiagramNode[]): IRelationshipDiagramNode[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            readonly [Symbol.species]: ArrayConstructor;
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+        };
+        default: () => never[];
+    };
+    config: {
+        type: PropType<IRelationshipDiagramOptions>;
+    };
+}>> & Readonly<{
+    "onUpdate:items"?: ((...args: any[]) => any) | undefined;
+}>, {
+    context: IData;
+    items: IRelationshipDiagramNode[];
+}, {}, {
+    DiagramConfigItemContainer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        i: {
+            type: NumberConstructor;
+            required: true;
+        };
+        id: {
+            type: StringConstructor;
+            required: true;
+        };
+    }>, {
+        ns: import('@gct-paas/core').Namespace;
+        calcPosStyle: () => {
+            top: string;
+            left: string;
+        };
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("mounted" | "unmounted")[], "mounted" | "unmounted", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        i: {
+            type: NumberConstructor;
+            required: true;
+        };
+        id: {
+            type: StringConstructor;
+            required: true;
+        };
+    }>> & Readonly<{
+        onMounted?: ((...args: any[]) => any) | undefined;
+        onUnmounted?: ((...args: any[]) => any) | undefined;
+    }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default RelationshipDiagramConfig;

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

@@ -0,0 +1,104 @@
+import { ArrowEndpointHandler } from "./plumb-plugin/arrow-endpoint.mjs";
+import { register } from "./plumb-plugin/blank-endpoint-renderer.mjs";
+import "./plumb-plugin/index.mjs";
+import { ControllerTag, NodeType } from "./constant/index.mjs";
+import { RegisterUtil } from "./utils/register/register.mjs";
+import { RelationshipDiagramConfigController } from "./relationship-diagram-config.controller.mjs";
+import { DiagramConfigItemContainer } from "./components/diagram-config-item-container/diagram-config-item-container.mjs";
+import "./components/index.mjs";
+import './relationship-diagram-config.css';/* empty css                                  */
+import { createVNode, defineComponent, h, onMounted, provide, reactive, ref, resolveComponent, watch } from "vue";
+import { cloneDeep } from "lodash-es";
+import { useNamespace } from "@gct-paas/core";
+import { EndpointFactory, uuid } from "@jsplumb/browser-ui";
+//#region src/modules/relationship-diagram-config/relationship-diagram-config.tsx
+/**
+* 关系图配置
+*/
+var RelationshipDiagramConfig = /* @__PURE__ */ defineComponent({
+	name: "RelationshipDiagramConfig",
+	components: { DiagramConfigItemContainer },
+	props: {
+		context: {
+			type: Object,
+			default: () => {
+				return {};
+			}
+		},
+		items: {
+			type: Array,
+			default: () => []
+		},
+		config: { type: Object }
+	},
+	emits: ["update:items"],
+	setup(props, { emit }) {
+		register();
+		EndpointFactory.registerHandler(ArrowEndpointHandler);
+		const ns = useNamespace("relationship-diagram-config");
+		const elRef = ref();
+		const lastId = uuid();
+		const { fieldModelKey } = props.context;
+		const c = new RelationshipDiagramConfigController();
+		c.state = reactive(c.state);
+		if (props.config) Object.assign(c.config, props.config);
+		provide(ControllerTag.ROOT, c);
+		watch(() => props.items, () => {
+			if (JSON.stringify(props.items) !== JSON.stringify(c.state.nodes)) {
+				c.clearAll();
+				if (props.items && props.items.length > 0) c.node.setNodes(cloneDeep(props.items));
+			}
+		}, { immediate: true });
+		watch(() => c.state.nodes, () => {
+			emit("update:items", cloneDeep(c.state.nodes));
+		}, { deep: true });
+		const isEnd = (item, i) => {
+			return item.modelKey === fieldModelKey || c.config.max && c.config.max === i + 1 || item.reverse === true;
+		};
+		onMounted(() => {
+			c.initPlumb(elRef.value);
+			c.connectAll();
+		});
+		return {
+			ns,
+			elRef,
+			c,
+			lastId,
+			isEnd
+		};
+	},
+	render() {
+		const lastNode = this.c.state.nodes[this.c.state.nodes.length - 1];
+		const lastIndex = this.c.state.nodes.length - 1;
+		const endProvider = RegisterUtil.getNode(NodeType.VIRTUAL);
+		return createVNode("div", {
+			"ref": "elRef",
+			"class": this.ns.b()
+		}, [this.c.state.nodes.map((node, i) => {
+			const provider = RegisterUtil.getNode(node.type || NodeType.DEFAULT);
+			return createVNode(DiagramConfigItemContainer, {
+				"key": node.id,
+				"i": i,
+				"id": node.id,
+				"onMounted": () => this.c.node.mounted(node.id),
+				"onUnmounted": () => this.c.node.unmounted(node.id)
+			}, { default: () => [provider ? h(resolveComponent(provider.component), {
+				key: node.id,
+				context: this.context,
+				i,
+				data: node,
+				isEnd: this.isEnd(node, i)
+			}) : `为找到节点适配器类型：${node.type}`] });
+		}), this.isEnd(lastNode, lastIndex) ? null : createVNode(DiagramConfigItemContainer, {
+			"key": lastNode.id,
+			"i": lastIndex + 1,
+			"id": this.lastId
+		}, { default: () => [endProvider ? h(resolveComponent(endProvider.component), {
+			beforeNodeId: lastNode.id,
+			i: lastIndex + 1,
+			id: this.lastId
+		}) : `为找到虚拟节点适配器`] })]);
+	}
+});
+//#endregion
+export { RelationshipDiagramConfig, RelationshipDiagramConfig as default };

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

@@ -0,0 +1,44 @@
+import { IRelationshipDiagramLink, IRelationshipDiagramNode } from './interface';
+/**
+ * 界面状态
+ *
+ * @author zhanghanrui
+ * @date 2024-06-25 10:06:07
+ * @export
+ * @class RelationshipDiagramConfigState
+ */
+export declare class RelationshipDiagramConfigState {
+    /**
+     * 是否已经初始化
+     *
+     * @default false
+     * @author zhanghanrui
+     * @date 2024-06-25 10:06:08
+     * @type {boolean}
+     */
+    initialized: boolean;
+    /**
+     * 当前已经准备完成节点数量
+     *
+     * @author zhanghanrui
+     * @date 2024-06-25 14:06:14
+     * @type {number}
+     */
+    nodeCount: number;
+    /**
+     * 设计节点
+     *
+     * @author zhanghanrui
+     * @date 2024-06-25 10:06:59
+     * @type {IRelationshipDiagramNode[]}
+     */
+    nodes: IRelationshipDiagramNode[];
+    /**
+     * 连线
+     *
+     * @author zhanghanrui
+     * @date 2024-06-25 10:06:09
+     * @type {IRelationshipDiagramLink[]}
+     */
+    links: IRelationshipDiagramLink[];
+}

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

@@ -0,0 +1,46 @@
+//#region src/modules/relationship-diagram-config/relationship-diagram-config.state.ts
+/**
+* 界面状态
+*
+* @author zhanghanrui
+* @date 2024-06-25 10:06:07
+* @export
+* @class RelationshipDiagramConfigState
+*/
+var RelationshipDiagramConfigState = class {
+	/**
+	* 是否已经初始化
+	*
+	* @default false
+	* @author zhanghanrui
+	* @date 2024-06-25 10:06:08
+	* @type {boolean}
+	*/
+	initialized = false;
+	/**
+	* 当前已经准备完成节点数量
+	*
+	* @author zhanghanrui
+	* @date 2024-06-25 14:06:14
+	* @type {number}
+	*/
+	nodeCount = 0;
+	/**
+	* 设计节点
+	*
+	* @author zhanghanrui
+	* @date 2024-06-25 10:06:59
+	* @type {IRelationshipDiagramNode[]}
+	*/
+	nodes = [];
+	/**
+	* 连线
+	*
+	* @author zhanghanrui
+	* @date 2024-06-25 10:06:09
+	* @type {IRelationshipDiagramLink[]}
+	*/
+	links = [];
+};
+//#endregion
+export { RelationshipDiagramConfigState };

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

@@ -0,0 +1 @@
+export { RegisterUtil } from './register/register';

package/es/modules/relationship-diagram-config/utils/register/register.d.ts

@@ -0,0 +1,71 @@
+import { ILinkProvider, INodeProvider } from '../../interface';
+/**
+ * 注册中心
+ *
+ * @author zhanghanrui
+ * @date 2024-06-25 19:06:06
+ * @export
+ * @class RegisterUtil
+ */
+export declare class RegisterUtil {
+    /**
+     * 连线适配器
+     *
+     * @author zhanghanrui
+     * @date 2024-06-25 19:06:55
+     * @protected
+     * @static
+     * @type {Map<string, ILinkProvider>}
+     */
+    protected static link: Map<string, ILinkProvider>;
+    /**
+     * 节点适配器
+     *
+     * @author zhanghanrui
+     * @date 2024-06-25 20:06:35
+     * @protected
+     * @static
+     * @type {Map<string, INodeProvider>}
+     */
+    protected static node: Map<string, INodeProvider>;
+    /**
+     * 注册连线适配器
+     *
+     * @author zhanghanrui
+     * @date 2024-06-25 19:06:11
+     * @static
+     * @param {string} key
+     * @param {ILinkProvider} link
+     */
+    static registerLink(key: string, link: ILinkProvider): void;
+    /**
+     * 获取连线适配器
+     *
+     * @author zhanghanrui
+     * @date 2024-06-25 19:06:17
+     * @static
+     * @param {string} key
+     * @return {*}  {(ILinkProvider | undefined)}
+     */
+    static getLink(key: string): ILinkProvider | undefined;
+    /**
+     * 注册节点适配器
+     *
+     * @author zhanghanrui
+     * @date 2024-06-25 20:06:02
+     * @static
+     * @param {string} key
+     * @param {INodeProvider} node
+     */
+    static registerNode(key: string, node: INodeProvider): void;
+    /**
+     * 获取节点适配器
+     *
+     * @author zhanghanrui
+     * @date 2024-06-25 20:06:09
+     * @static
+     * @param {string} key
+     * @return {*}  {(INodeProvider | undefined)}
+     */
+    static getNode(key: string): INodeProvider | undefined;
+}

package/es/modules/relationship-diagram-config/utils/register/register.mjs

@@ -0,0 +1,81 @@
+//#region src/modules/relationship-diagram-config/utils/register/register.ts
+/**
+* 注册中心
+*
+* @author zhanghanrui
+* @date 2024-06-25 19:06:06
+* @export
+* @class RegisterUtil
+*/
+var RegisterUtil = class RegisterUtil {
+	/**
+	* 连线适配器
+	*
+	* @author zhanghanrui
+	* @date 2024-06-25 19:06:55
+	* @protected
+	* @static
+	* @type {Map<string, ILinkProvider>}
+	*/
+	static link = /* @__PURE__ */ new Map();
+	/**
+	* 节点适配器
+	*
+	* @author zhanghanrui
+	* @date 2024-06-25 20:06:35
+	* @protected
+	* @static
+	* @type {Map<string, INodeProvider>}
+	*/
+	static node = /* @__PURE__ */ new Map();
+	/**
+	* 注册连线适配器
+	*
+	* @author zhanghanrui
+	* @date 2024-06-25 19:06:11
+	* @static
+	* @param {string} key
+	* @param {ILinkProvider} link
+	*/
+	static registerLink(key, link) {
+		RegisterUtil.link.set(key, link);
+	}
+	/**
+	* 获取连线适配器
+	*
+	* @author zhanghanrui
+	* @date 2024-06-25 19:06:17
+	* @static
+	* @param {string} key
+	* @return {*}  {(ILinkProvider | undefined)}
+	*/
+	static getLink(key) {
+		return RegisterUtil.link.get(key);
+	}
+	/**
+	* 注册节点适配器
+	*
+	* @author zhanghanrui
+	* @date 2024-06-25 20:06:02
+	* @static
+	* @param {string} key
+	* @param {INodeProvider} node
+	*/
+	static registerNode(key, node) {
+		RegisterUtil.node.set(key, node);
+	}
+	/**
+	* 获取节点适配器
+	*
+	* @author zhanghanrui
+	* @date 2024-06-25 20:06:09
+	* @static
+	* @param {string} key
+	* @return {*}  {(INodeProvider | undefined)}
+	*/
+	static getNode(key) {
+		return RegisterUtil.node.get(key);
+	}
+};
+//#endregion
+export { RegisterUtil };