@gct-paas/design 0.1.4-dev.8 → 0.1.5-dev.0

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

@@ -1,168 +0,0 @@
-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

@@ -1,164 +0,0 @@
-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/useDesigner.mjs';
-import '../../../hooks/design-view/useGlobal.mjs';
-import '../../../hooks/design-view/usePage.mjs';
-import '../../../hooks/design-view/usePageOccupy.mjs';
-import '../../../hooks/design-view/usePropEditor.mjs';
-import '../../../hooks/design-view/useScope.mjs';
-import '../../../hooks/design-view/useSelectedWidget.mjs';
-import '@gct-paas/schema';
-import '../../../hooks/design-view/useToolkit.mjs';
-import '../../../hooks/design-view/useWidget.mjs';
-import '../../../hooks/develop/useCacheHistory.mjs';
-import { useDesignViewController } from '../../../hooks/use-design-view-controller/use-design-view-controller.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

@@ -1,85 +0,0 @@
-@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

@@ -1,53 +0,0 @@
-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

@@ -1,223 +0,0 @@
-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/useDesigner.mjs';
-import '../../../hooks/design-view/useGlobal.mjs';
-import '../../../hooks/design-view/usePage.mjs';
-import '../../../hooks/design-view/usePageOccupy.mjs';
-import '../../../hooks/design-view/usePropEditor.mjs';
-import '../../../hooks/design-view/useScope.mjs';
-import '../../../hooks/design-view/useSelectedWidget.mjs';
-import '@gct-paas/schema';
-import '../../../hooks/design-view/useToolkit.mjs';
-import '../../../hooks/design-view/useWidget.mjs';
-import '../../../hooks/develop/useCacheHistory.mjs';
-import { useDesignViewController } from '../../../hooks/use-design-view-controller/use-design-view-controller.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 };