@gct-paas/design 0.1.4-dev.7 → 0.1.4-dev.9

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, object, 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<{
+        width: number;
+        height: number;
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    }, IPosRect | {
+        width: number;
+        height: number;
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    }>;
+    selectRect: import('vue').Ref<{
+        width: number;
+        height: number;
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    }, IPosRect | {
+        width: number;
+        height: number;
+        top: number;
+        right: number;
+        bottom: number;
+        left: 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<{
+            'background-color': string;
+            'clip-path': string;
+            display: string;
+            width: string;
+            height: string;
+            top: string;
+            left: 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: "select" | "hover";
+        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,167 @@
+import { defineComponent, createVNode, withDirectives, vShow, ref, computed } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+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 { DesignItemAttribute } from '../../../constant/index.mjs';
+import '../../../hooks/design-view/design-state.mjs';
+import '@gct-paas/schema';
+import 'lodash-es';
+import '../../../hooks/design-view/layout/useScope.mjs';
+import '../../../hooks/design-view/global/useGlobal.mjs';
+import '@vueuse/core';
+import '../../../hooks/develop/useCacheHistory.mjs';
+import 'ant-design-vue';
+import '../../../hooks/design-view/widget/useSelectedWidget.mjs';
+import '../../../hooks/design-view/widget/useWidget.mjs';
+import '../../../hooks/design-view/page/usePage.mjs';
+import '../../../hooks/design-view/page/usePageOccupy.mjs';
+import '../../../hooks/design-view/layout/useToolkit.mjs';
+import { useDesignViewController } from '../../../hooks/use-design-view-controller/use-design-view-controller.mjs';
+import '../../../hooks/use-model-field/use-model-field.mjs';
+import 'qx-util';
+import './design-item-highlighter.css';/* empty css                              */
+
+/**
+ * 组件暴露的属性
+ *
+ * @export
+ * @interface DesignItemHighlighterBinding
+ */
+
+const DesignItemHighlighter = /* @__PURE__ */ defineComponent({
+  name: 'DesignItemHighlighter',
+  components: {
+    DesignItemHighlighterContainer
+  },
+  setup(_) {
+    const ns = useNamespace('design-item-highlighter');
+    const c = useDesignViewController();
+    const store = c.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) {
+          // 如果 hover 元素和选中元素相同，则取消 hover
+          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)]);
+  }
+});
+
+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 {
+  background-color: rgba(49, 104, 236, 0.08);
+  border: 2px dashed var(--ant-primary-color);
+  z-index: 1;
+}
+
+.gct-design-item-highlighter-container--select {
+  border: 2px solid var(--ant-primary-color);
+  z-index: 2;
+}
+
+.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<{
+        'background-color': string;
+        'clip-path': string;
+        display: string;
+        width: string;
+        height: string;
+        top: string;
+        left: 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: "select" | "hover";
+    posEl: HTMLDivElement | null;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,224 @@
+import { defineComponent, createVNode, ref, computed, watch, onUnmounted } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { toRefs, useElementBounding, useMutationObserver, useResizeObserver } from '@vueuse/core';
+import { maxBy, minBy } from 'lodash-es';
+import '../../../hooks/design-view/design-state.mjs';
+import '@gct-paas/schema';
+import '../../../hooks/design-view/layout/useScope.mjs';
+import '../../../hooks/design-view/global/useGlobal.mjs';
+import '../../../hooks/develop/useCacheHistory.mjs';
+import 'ant-design-vue';
+import '../../../hooks/design-view/widget/useSelectedWidget.mjs';
+import '../../../hooks/design-view/widget/useWidget.mjs';
+import '../../../hooks/design-view/page/usePage.mjs';
+import '../../../hooks/design-view/page/usePageOccupy.mjs';
+import '../../../hooks/design-view/layout/useToolkit.mjs';
+import { useDesignViewController } from '../../../hooks/use-design-view-controller/use-design-view-controller.mjs';
+import '../../../hooks/use-model-field/use-model-field.mjs';
+import 'qx-util';
+import './design-item-highlighter-container.css';/* empty css                                        */
+
+function getAllScrollParents(element) {
+  const scrollParents = [];
+  let parent = element;
+  while (parent = parent.parentElement) {
+    // 遍历所有祖先元素
+    if (parent instanceof HTMLElement && (parent.offsetWidth < parent.scrollWidth || parent.offsetHeight < parent.scrollHeight)) {
+      // 如果元素的实际宽度小于滚动宽度，或实际高度小于滚动高度，则认为该元素是可以滚动的
+      scrollParents.push(parent);
+    }
+  }
+  return scrollParents;
+}
+const DesignItemHighlighterContainer = /* @__PURE__ */ defineComponent({
+  name: 'DesignItemHighlighterContainer',
+  props: {
+    mode: {
+      type: String,
+      default: 'hover'
+    },
+    posEl: {
+      type: Object,
+      default: null
+    },
+    changeHalfRect: {
+      type: Function
+    },
+    changePosRect: {
+      type: Function
+    }
+  },
+  setup(props) {
+    const ns = useNamespace('design-item-highlighter-container');
+    const c = useDesignViewController();
+    const {
+      posEl
+    } = toRefs(props);
+    const elRect = useElementBounding(posEl);
+    useMutationObserver(posEl, () => {
+      changeSorts();
+    }, {
+      attributes: true
+    });
+    useResizeObserver(posEl, () => {
+      changeSorts();
+    });
+    const store = c.store;
+
+    // 所有可以滚动的元素
+    const scrollEls = ref([]);
+
+    // 默认遮罩偏移
+    const defRect = -2;
+    const halfRect = ref({
+      top: defRect,
+      right: defRect,
+      bottom: defRect,
+      left: defRect
+    });
+    const styleConfig = computed(() => {
+      if (posEl.value) {
+        if (props.changePosRect) {
+          props.changePosRect({
+            width: elRect.width.value,
+            height: elRect.height.value,
+            top: elRect.top.value,
+            left: elRect.left.value,
+            right: elRect.right.value,
+            bottom: elRect.bottom.value
+          });
+        }
+        return {
+          display: store.isDragging ? 'none' : 'block',
+          width: elRect.width.value + 'px',
+          height: elRect.height.value + 'px',
+          top: elRect.top.value + 'px',
+          left: elRect.left.value + 'px'
+        };
+      }
+      if (props.changePosRect) {
+        props.changePosRect({
+          width: 0,
+          height: 0,
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        });
+      }
+      return {
+        display: 'none',
+        width: '0',
+        height: '0',
+        top: '0',
+        left: '0'
+      };
+    });
+    const changeSorts = () => {
+      if (posEl.value) {
+        const oldSorts = [...scrollEls.value];
+        scrollEls.value = getAllScrollParents(posEl.value);
+        const removeSorts = oldSorts.filter(el => !scrollEls.value.includes(el));
+        const addSorts = scrollEls.value.filter(el => !oldSorts.includes(el));
+        // 取消所有滚动条元素的滚动事件订阅
+        removeSorts.forEach(el => {
+          el.removeEventListener('scroll', onScroll);
+        });
+        addSorts.forEach(el => {
+          el.addEventListener('scroll', onScroll);
+        });
+        calcHalfRect();
+      }
+    };
+    const calcHalfRect = () => {
+      if (scrollEls.value.length > 0 && posEl.value) {
+        const rect = posEl.value.getBoundingClientRect();
+        // 计算所有父的最低可视高度
+        const topScrollEl = maxBy(scrollEls.value, el => el.getBoundingClientRect().top);
+        const topScrollRect = topScrollEl.getBoundingClientRect();
+        const top = rect.top - topScrollRect.top + 4;
+        const rightScrollEl = minBy(scrollEls.value, el => el.getBoundingClientRect().right);
+        const rightScrollRect = rightScrollEl.getBoundingClientRect();
+        const right = rightScrollRect.right - rect.right + 4;
+        const bottomScrollEl = minBy(scrollEls.value, el => el.getBoundingClientRect().bottom);
+        const bottomScrollRect = bottomScrollEl.getBoundingClientRect();
+        const bottom = bottomScrollRect.bottom - rect.bottom + 4;
+        const leftScrollEl = maxBy(scrollEls.value, el => el.getBoundingClientRect().left);
+        const leftScrollRect = leftScrollEl.getBoundingClientRect();
+        const left = rect.left - leftScrollRect.left + 4;
+        halfRect.value = {
+          top: top >= 0 ? defRect : Math.abs(top),
+          right: right >= 0 ? defRect : Math.abs(right),
+          bottom: bottom >= 0 ? defRect : Math.abs(bottom),
+          left: left >= 0 ? defRect : Math.abs(left)
+        };
+      } else {
+        halfRect.value = {
+          top: defRect,
+          right: defRect,
+          bottom: defRect,
+          left: defRect
+        };
+      }
+      if (props.changeHalfRect) {
+        props.changeHalfRect(halfRect.value);
+      }
+      return halfRect.value;
+    };
+    function onScroll() {
+      calcHalfRect();
+    }
+    let t = -1;
+    let an = -1;
+    watch(posEl, () => {
+      changeSorts();
+      if (t !== -1) {
+        clearTimeout(t);
+        t = -1;
+      }
+      if (an !== -1) {
+        cancelAnimationFrame(an);
+        an = -1;
+      }
+      if (posEl.value) {
+        // 无法完全覆盖所有元素变化场景，临时使用 setInterval 进行更新
+        t = setInterval(() => {
+          elRect.update();
+        }, 50);
+        an = requestAnimationFrame(() => {
+          elRect.update();
+        });
+      }
+    });
+    onUnmounted(() => {
+      clearInterval(t);
+    });
+
+    // 需要计算是上边隐藏 or 下边隐藏 or 全隐藏
+    // 选中的时候需要计算一次，有可能本身就是半隐藏状态
+    // 还需要考虑横向滚动条
+    const styleObj = computed(() => {
+      const style = {
+        ...styleConfig.value,
+        'background-color': store.isDragging || props.mode === 'select' ? 'transparent' : '',
+        'clip-path': `inset(${halfRect.value.top}px ${halfRect.value.right}px ${halfRect.value.bottom}px ${halfRect.value.left}px)`
+      };
+      return style;
+    });
+    return {
+      ns,
+      styleObj,
+      calcHalfRect
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "style": this.styleObj,
+      "class": [this.ns.b(), this.ns.m(this.mode)]
+    }, [createVNode("div", {
+      "class": [this.ns.e('mask')]
+    }, null)]);
+  }
+});
+
+export { DesignItemHighlighterContainer };