@gct-paas/design 0.1.5-dev.6 → 0.1.5-dev.8

package/es/components/design/design-item-actions/design-item-actions.mjs

@@ -0,0 +1,147 @@
+import { DesignItemActionTag, DesignItemAttribute, DesignViewPrefix } from "../../../constant/index.mjs";
+import { NodeRegister } from "../../../register/node/node.register.mjs";
+import "../../../register/index.mjs";
+import { useDesignViewController } from "../../../hooks/use-design-view-controller/use-design-view-controller.mjs";
+import "../../../hooks/index.mjs";
+import './design-item-actions.css';/* empty css                          */
+import { clone } from "lodash-es";
+import { useNamespace } from "@gct-paas/core";
+import { computed, createVNode, defineComponent, ref, resolveComponent, toRefs, vShow, watch, withDirectives } from "vue";
+import { useElementBounding } from "@vueuse/core";
+import { useDrag } from "vue3-dnd";
+//#region src/components/design/design-item-actions/design-item-actions.tsx
+var DesignItemActions = /* @__PURE__ */ defineComponent({
+	name: "DesignItemActions",
+	props: {
+		top: {
+			type: Number,
+			default: 0
+		},
+		left: {
+			type: Number,
+			default: 0
+		},
+		selectEl: { type: HTMLDivElement },
+		halfRect: {
+			type: Object,
+			required: true
+		}
+	},
+	setup(props) {
+		const ns = useNamespace("design-item-actions");
+		const c = useDesignViewController();
+		const elRef = ref(null);
+		const dragRef = ref(null);
+		const { width, height } = useElementBounding(elRef);
+		const { selectEl } = toRefs(props);
+		const selectRef = computed(() => {
+			return props.selectEl;
+		});
+		const isShow = computed(() => {
+			if (!selectEl.value) return true;
+			const { top, right, bottom, left } = props.halfRect;
+			return !(top > 0 || right > 0 || bottom - selectEl.value.clientHeight > 0 || left - selectEl.value.clientWidth > 0);
+		});
+		const style = computed(() => {
+			return {
+				opacity: c.store.isDragging || isShow.value !== true ? 0 : 1,
+				top: `${props.top - height.value}px`,
+				left: `${props.left - width.value}px`
+			};
+		});
+		const provider = ref(null);
+		watch(() => c.store.selected, () => {
+			if (c.store.selected) provider.value = NodeRegister.get(c.store.selected.type, c.store.prefix);
+			else provider.value = null;
+		});
+		const actions = computed(() => {
+			if (provider.value) return provider.value.actions || [];
+			return [];
+		});
+		const onAction = (e, action) => {
+			if (c.store.selected) {
+				e.stopPropagation();
+				if (provider.value && provider.value.onClick) {
+					if (provider.value.onClick(c, c.store.selected, action)) return;
+				}
+				const pKey = c.store.getParentKey(c.store.selected.id);
+				switch (action.tag) {
+					case DesignItemActionTag.DELETE:
+						c.store.deleteNode(c.store.selected);
+						if (pKey) c.store.setActive(c.store.getNode(pKey));
+						else c.store.setActive(c.store.pageNode);
+						break;
+					case DesignItemActionTag.SELECT_PARENT:
+						if (pKey) c.store.setActive(c.store.getNode(pKey));
+						else c.store.setActive(c.store.pageNode);
+						break;
+					default: break;
+				}
+			}
+		};
+		const [_, drag] = useDrag({
+			type: DesignViewPrefix.CUSTOM_HOME,
+			item: () => {
+				c.store.setDragging(true);
+				const el = document.getElementById(c.store.selected.id);
+				return {
+					data: clone(c.store.selected),
+					group: el.getAttribute(DesignItemAttribute.GROUP_TAG),
+					id: c.store.selected.id,
+					index: Number(el.getAttribute(DesignItemAttribute.INDEX_TAG)),
+					mode: "move",
+					types: c.types(c.store.selected)
+				};
+			},
+			collect: (monitor) => {
+				const isDragging = monitor.isDragging();
+				if (selectRef.value) {
+					if (isDragging) selectRef.value.setAttribute("is-action-dragging", "true");
+				}
+				return {
+					canDrag: monitor.canDrag(),
+					isDragging
+				};
+			},
+			end: async (_, monitor) => {
+				c.store.setDragging(false);
+				const r = monitor.getDropResult();
+				if (r && r.asyncDrop) {
+					const result = await r.asyncDrop;
+					if (result && result.success) {}
+				}
+				selectRef.value.removeAttribute("is-action-dragging");
+				c.dropEnd();
+			},
+			options: { dropEffect: "move" }
+		});
+		drag(dragRef);
+		return () => {
+			return createVNode("div", {
+				"ref": elRef,
+				"class": ns.b(),
+				"style": style.value,
+				"onClick": (e) => e.stopPropagation()
+			}, [
+				createVNode("div", { "class": ns.e("mask") }, null),
+				withDirectives(createVNode("span", {
+					"ref": dragRef,
+					"class": [ns.e("item"), ns.em("item", "drag")]
+				}, [createVNode("i", { "class": "iconfont icon-yidong" }, null)]), [[vShow, provider.value?.isDrag === true]]),
+				actions.value.map((action) => {
+					const content = createVNode("i", {
+						"title": action.tooltip,
+						"class": `iconfont ${action.icon}`,
+						"onClick": (e) => onAction(e, action)
+					}, null);
+					return createVNode("span", { "class": ns.e("item") }, [action.tooltip ? createVNode(resolveComponent("a-tooltip"), { "placement": "top" }, {
+						title: () => action.tooltip,
+						default: () => content
+					}) : content]);
+				})
+			]);
+		};
+	}
+});
+//#endregion
+export { DesignItemActions };

package/es/components/design/design-item-highlighter/design-item-highlighter.css

@@ -0,0 +1,70 @@
+@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-design-item-highlighter {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+}

package/es/components/design/design-item-highlighter/design-item-highlighter.d.ts

@@ -0,0 +1,168 @@
+import { useNamespace } from '@gct-paas/core';
+import { IHalfRect, IPosRect } from '../../../interface';
+/**
+ * 组件暴露的属性
+ *
+ * @export
+ * @interface DesignItemHighlighterBinding
+ */
+export interface DesignItemHighlighterBinding {
+    /**
+     * 样式命名空间
+     *
+     * @author zhanghanrui
+     * @date 2024-07-11 15:07:36
+     * @type {ReturnType<typeof useNamespace>}
+     */
+    ns: ReturnType<typeof useNamespace>;
+    /**
+     * 是否已经激活
+     *
+     * @author zhanghanrui
+     * @date 2024-07-11 15:07:42
+     * @type {boolean}
+     */
+    isHover: boolean;
+    /**
+     * 是否已经有选中
+     *
+     * @author zhanghanrui
+     * @date 2024-07-11 15:07:49
+     * @type {boolean}
+     */
+    isSelect: boolean;
+    /**
+     * 设置 hover 元素
+     *
+     * @author zhanghanrui
+     * @date 2024-07-11 15:07:49
+     */
+    setHover: (el?: HTMLElement) => void;
+    /**
+     * 设置激活态的元素
+     *
+     * @author zhanghanrui
+     * @date 2024-07-11 15:07:20
+     */
+    setSelect: (el?: HTMLElement) => void;
+}
+export declare const DesignItemHighlighter: import('vue').DefineComponent<{}, {
+    ns: import('@gct-paas/core').Namespace;
+    store: import('pinia').Store<string, import('../../..').IDesignViewState, IObject, import('../../..').IDesignViewActions>;
+    rootRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    isHover: import('vue').Ref<boolean, boolean>;
+    isSelect: import('vue').Ref<boolean, boolean>;
+    hoverEl: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    selectEl: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    hoverRect: import('vue').Ref<{
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+        width: number;
+        height: number;
+    }, IPosRect | {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+        width: number;
+        height: number;
+    }>;
+    selectRect: import('vue').Ref<{
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+        width: number;
+        height: number;
+    }, IPosRect | {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+        width: number;
+        height: number;
+    }>;
+    setHover: (el?: HTMLElement) => void;
+    setSelect: (el?: HTMLElement) => void;
+    hoverWidgetName: import('vue').ComputedRef<string>;
+    hoverHalfRect: import('vue').Ref<{
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    }, IHalfRect | {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    }>;
+    actionHalfRect: import('vue').Ref<{
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    }, IHalfRect | {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    }>;
+    onChangeHoverHalfRect: (rect: IHalfRect) => void;
+    onChangeActionHalfRect: (rect: IHalfRect) => void;
+    onChangeHoverPosRect: (rect: IPosRect) => void;
+    onChangeSelectPosRect: (rect: IPosRect) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+    DesignItemHighlighterContainer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        mode: {
+            type: import('vue').PropType<"hover" | "select">;
+            default: string;
+        };
+        posEl: {
+            type: import('vue').PropType<HTMLDivElement | null>;
+            default: null;
+        };
+        changeHalfRect: {
+            type: import('vue').PropType<(opt: IHalfRect) => void>;
+        };
+        changePosRect: {
+            type: import('vue').PropType<(opt: IPosRect) => void>;
+        };
+    }>, {
+        ns: import('@gct-paas/core').Namespace;
+        styleObj: import('vue').ComputedRef<{
+            display: string;
+            width: string;
+            height: string;
+            top: string;
+            left: string;
+            'background-color': string;
+            'clip-path': string;
+        }>;
+        calcHalfRect: () => {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        mode: {
+            type: import('vue').PropType<"hover" | "select">;
+            default: string;
+        };
+        posEl: {
+            type: import('vue').PropType<HTMLDivElement | null>;
+            default: null;
+        };
+        changeHalfRect: {
+            type: import('vue').PropType<(opt: IHalfRect) => void>;
+        };
+        changePosRect: {
+            type: import('vue').PropType<(opt: IPosRect) => void>;
+        };
+    }>> & Readonly<{}>, {
+        mode: "hover" | "select";
+        posEl: HTMLDivElement | null;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/design/design-item-highlighter/design-item-highlighter.mjs

@@ -0,0 +1,155 @@
+import { DesignItemAttribute } from "../../../constant/index.mjs";
+import { useDesignViewController } from "../../../hooks/use-design-view-controller/use-design-view-controller.mjs";
+import "../../../hooks/index.mjs";
+import { DesignItemHighlighterContainer } from "../design-item-highlighter-container/design-item-highlighter-container.mjs";
+import { DesignItemActions } from "../design-item-actions/design-item-actions.mjs";
+import { DesignItemHoverTitle } from "../design-item-hover-title/design-item-hover-title.mjs";
+import './design-item-highlighter.css';/* empty css                              */
+import { useNamespace } from "@gct-paas/core";
+import { computed, createVNode, defineComponent, ref, vShow, withDirectives } from "vue";
+//#region src/components/design/design-item-highlighter/design-item-highlighter.tsx
+/**
+* 组件暴露的属性
+*
+* @export
+* @interface DesignItemHighlighterBinding
+*/
+var DesignItemHighlighter = /* @__PURE__ */ defineComponent({
+	name: "DesignItemHighlighter",
+	components: { DesignItemHighlighterContainer },
+	setup(_) {
+		const ns = useNamespace("design-item-highlighter");
+		const store = useDesignViewController().store;
+		const rootRef = ref(null);
+		const isHover = ref(false);
+		const isSelect = ref(false);
+		const hoverEl = ref(null);
+		const selectEl = ref(null);
+		const hoverRect = ref({
+			top: 0,
+			right: 0,
+			bottom: 0,
+			left: 0,
+			width: 0,
+			height: 0
+		});
+		const selectRect = ref({
+			top: 0,
+			right: 0,
+			bottom: 0,
+			left: 0,
+			width: 0,
+			height: 0
+		});
+		const defRect = -2;
+		const hoverHalfRect = ref({
+			top: defRect,
+			right: defRect,
+			bottom: defRect,
+			left: defRect
+		});
+		const actionHalfRect = ref({
+			top: defRect,
+			right: defRect,
+			bottom: defRect,
+			left: defRect
+		});
+		const setHover = (el) => {
+			if (el && selectEl.value !== el) {
+				isHover.value = true;
+				hoverEl.value = el;
+			} else {
+				isHover.value = false;
+				hoverEl.value = null;
+			}
+		};
+		const setSelect = (el) => {
+			if (el) {
+				if (el === hoverEl.value) {
+					isHover.value = false;
+					hoverEl.value = null;
+				}
+				isSelect.value = true;
+				selectEl.value = el;
+			} else {
+				isSelect.value = false;
+				selectEl.value = null;
+			}
+		};
+		const hoverWidgetName = computed(() => {
+			return hoverEl.value?.getAttribute(DesignItemAttribute.DESIGN_NAME) || "";
+		});
+		function onChangeHoverHalfRect(rect) {
+			hoverHalfRect.value = rect;
+		}
+		function onChangeActionHalfRect(rect) {
+			actionHalfRect.value = rect;
+		}
+		function onChangeHoverPosRect(rect) {
+			hoverRect.value = rect;
+		}
+		function onChangeSelectPosRect(rect) {
+			selectRect.value = rect;
+		}
+		return {
+			ns,
+			store,
+			rootRef,
+			isHover,
+			isSelect,
+			hoverEl,
+			selectEl,
+			hoverRect,
+			selectRect,
+			setHover,
+			setSelect,
+			hoverWidgetName,
+			hoverHalfRect,
+			actionHalfRect,
+			onChangeHoverHalfRect,
+			onChangeActionHalfRect,
+			onChangeHoverPosRect,
+			onChangeSelectPosRect
+		};
+	},
+	render() {
+		return createVNode("div", {
+			"ref": "rootRef",
+			"class": [
+				this.ns.b(),
+				this.ns.is("dragging", this.store.isDragging),
+				this.ns.is("hidden", this.isHover !== true && this.isSelect !== true)
+			]
+		}, [
+			withDirectives(createVNode(DesignItemHoverTitle, {
+				"top": this.hoverRect.top,
+				"left": this.hoverRect.left + this.hoverRect.width,
+				"content": this.hoverWidgetName,
+				"halfRect": this.hoverHalfRect,
+				"hoverEl": this.hoverEl
+			}, null), [[vShow, this.hoverRect && this.hoverWidgetName && this.selectEl != this.hoverEl && this.store.isDragging !== true]]),
+			createVNode(DesignItemActions, {
+				"selectEl": this.selectEl,
+				"class": [this.ns.e("actions"), this.ns.is("show", !!this.selectRect)],
+				"top": this.selectRect.top,
+				"left": this.selectRect.left + this.selectRect.width,
+				"halfRect": this.actionHalfRect
+			}, null),
+			createVNode(DesignItemHighlighterContainer, {
+				"ref": "hoverRef",
+				"posEl": this.hoverEl,
+				"changeHalfRect": this.onChangeHoverHalfRect,
+				"changePosRect": this.onChangeHoverPosRect
+			}, null),
+			createVNode(DesignItemHighlighterContainer, {
+				"ref": "selectRef",
+				"posEl": this.selectEl,
+				"mode": "select",
+				"changeHalfRect": this.onChangeActionHalfRect,
+				"changePosRect": this.onChangeSelectPosRect
+			}, null)
+		]);
+	}
+});
+//#endregion
+export { DesignItemHighlighter };

package/es/components/design/design-item-highlighter-container/design-item-highlighter-container.css

@@ -0,0 +1,85 @@
+@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-design-item-highlighter-container {
+  position: absolute;
+  pointer-events: none;
+}
+.gct-design-item-highlighter-container--hover {
+  z-index: 1;
+  background-color: rgba(49, 104, 236, 0.08);
+  border: 2px dashed var(--ant-primary-color);
+}
+
+.gct-design-item-highlighter-container--select {
+  z-index: 2;
+  border: 2px solid var(--ant-primary-color);
+}
+
+.gct-design-item-highlighter-container__mask {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+}

package/es/components/design/design-item-highlighter-container/design-item-highlighter-container.d.ts

@@ -0,0 +1,53 @@
+import { PropType } from 'vue';
+import { IHalfRect, IPosRect } from '../../../interface';
+export declare const DesignItemHighlighterContainer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    mode: {
+        type: PropType<"hover" | "select">;
+        default: string;
+    };
+    posEl: {
+        type: PropType<HTMLDivElement | null>;
+        default: null;
+    };
+    changeHalfRect: {
+        type: PropType<(opt: IHalfRect) => void>;
+    };
+    changePosRect: {
+        type: PropType<(opt: IPosRect) => void>;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    styleObj: import('vue').ComputedRef<{
+        display: string;
+        width: string;
+        height: string;
+        top: string;
+        left: string;
+        'background-color': string;
+        'clip-path': string;
+    }>;
+    calcHalfRect: () => {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    mode: {
+        type: PropType<"hover" | "select">;
+        default: string;
+    };
+    posEl: {
+        type: PropType<HTMLDivElement | null>;
+        default: null;
+    };
+    changeHalfRect: {
+        type: PropType<(opt: IHalfRect) => void>;
+    };
+    changePosRect: {
+        type: PropType<(opt: IPosRect) => void>;
+    };
+}>> & Readonly<{}>, {
+    mode: "hover" | "select";
+    posEl: HTMLDivElement | null;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;