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

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

@@ -0,0 +1,179 @@
+@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-drag-item {
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+}
+.gct-design-drag-item__item-mask {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
+.gct-design-drag-item.is-dragging .gct-design-drag-item__dragging-mask {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(82, 82, 82, 0.2);
+}
+
+.gct-design-drag-item.is-expansion {
+  border: 1px dashed var(--ant-primary-color);
+}
+.gct-design-drag-item.is-expansion .gct-design-drag-item__indicator {
+  display: none;
+}
+
+.gct-design-drag-item[is-action-dragging=true] .gct-design-drag-item__dragging-mask {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(82, 82, 82, 0.2);
+}
+
+.gct-design-drag-item-indicator {
+  position: absolute;
+  background-color: white;
+  z-index: 1;
+  display: none;
+}
+.gct-design-drag-item-indicator__horizontal {
+  width: 100%;
+  height: 4px;
+  left: 0;
+}
+.gct-design-drag-item-indicator__horizontal.is-before {
+  top: -2px;
+}
+
+.gct-design-drag-item-indicator__horizontal.is-after {
+  bottom: -2px;
+}
+
+.gct-design-drag-item-indicator__horizontal--line {
+  height: 2px;
+  width: 100%;
+  background-color: var(--ant-primary-color);
+  margin-top: 1px;
+}
+
+.gct-design-drag-item-indicator__horizontal--start-line {
+  background-color: var(--ant-primary-color);
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 2px;
+  height: 100%;
+}
+
+.gct-design-drag-item-indicator__horizontal--end-line {
+  background-color: var(--ant-primary-color);
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 2px;
+  height: 100%;
+}
+
+.gct-design-drag-item-indicator__vertical {
+  height: 100%;
+  width: 4px;
+  top: 0;
+}
+.gct-design-drag-item-indicator__vertical.is-before {
+  left: -2px;
+}
+
+.gct-design-drag-item-indicator__vertical.is-after {
+  right: -2px;
+}
+
+.gct-design-drag-item-indicator__vertical--line {
+  height: 100%;
+  width: 2px;
+  background-color: var(--ant-primary-color);
+  margin-left: 1px;
+}
+
+.gct-design-drag-item-indicator__vertical--start-line {
+  background-color: var(--ant-primary-color);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+}
+
+.gct-design-drag-item-indicator__vertical--end-line {
+  background-color: var(--ant-primary-color);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+}
+
+.gct-design-drag-item-indicator.is-shallow-over {
+  display: block;
+}

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

@@ -0,0 +1,55 @@
+import { PropType } from 'vue';
+import { IDesignNode, IDesignNodeData, IDragCollect, IDropCollect, INodeProvider } from '../../../interface';
+export declare const DesignDragItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    group: {
+        type: StringConstructor;
+        required: true;
+    };
+    parent: {
+        type: PropType<IDesignNode>;
+    };
+    direction: {
+        type: PropType<"vertical" | "horizontal">;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    data: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    elRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    provider: INodeProvider<IDesignNode<IDesignNodeData>>;
+    isActive: import('vue').ComputedRef<boolean>;
+    isHover: import('vue').ComputedRef<boolean>;
+    isExpansion: import('vue').Ref<boolean, boolean>;
+    style: import('vue').ComputedRef<IObject | null>;
+    dragCollect: import('vue').Ref<IDragCollect, IDragCollect>;
+    dropCollect: import('vue').Ref<IDropCollect, IDropCollect>;
+    isBeforeHover: import('vue').Ref<boolean, boolean>;
+    onActive: (e: MouseEvent) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    group: {
+        type: StringConstructor;
+        required: true;
+    };
+    parent: {
+        type: PropType<IDesignNode>;
+    };
+    direction: {
+        type: PropType<"vertical" | "horizontal">;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    data: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,293 @@
+import { defineComponent, createVNode, mergeProps, ref, computed, watch, onMounted, nextTick } from 'vue';
+import { useDrag, useDrop } from 'vue3-dnd';
+import { clone } from 'lodash-es';
+import { toRefs } from '@vueuse/core';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import { useNamespace, calcStyle } from '@gct-paas/core';
+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 { DesignItemAttribute, DesignViewPrefix, InsertNodeMode } from '../../../constant/index.mjs';
+import { NodeRegister } from '../../../register/node/node.register.mjs';
+import { isCanCrop } from '../../../utils/can-drop/can-drop.mjs';
+import '../../../provider/design-editor-node/design-editor-node.provider.mjs';
+import '../../../utils/find-deep-types/find-deep-types.mjs';
+import '../../../utils/field-attrs/basicAttrs.mjs';
+import './design-drag-item.css';/* empty css                       */
+
+const DesignDragItem = /* @__PURE__ */ defineComponent({
+  name: 'DesignDragItem',
+  props: {
+    group: {
+      type: String,
+      required: true
+    },
+    parent: {
+      type: Object
+    },
+    direction: {
+      type: String,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace('design-drag-item');
+    const c = useDesignViewController();
+    const store = c.store;
+    const elRef = ref(null);
+    const isBeforeHover = ref(false);
+    const provider = NodeRegister.get(props.data.type, store.prefix);
+    const isActive = computed(() => {
+      return store.selected?.id === props.data.id;
+    });
+    const isHover = computed(() => {
+      return store.hoverId === props.data.id;
+    });
+    const isExpansion = ref(false);
+    if (props.parent) {
+      watch(() => store.count, () => {
+        // 父展开时子项也需同步 UI 展开模式呈现
+        isExpansion.value = store.isDragging && store.expansions.has(props.parent.id);
+      });
+    }
+    const {
+      data
+    } = toRefs(props.data);
+    const style = computed(() => {
+      if (provider.isCustomStyle === true) {
+        return null;
+      }
+      return calcStyle(data.value);
+    });
+    const [dragCollect, drag, preview] = useDrag({
+      type: DesignViewPrefix.CUSTOM_HOME,
+      item: () => {
+        // 开启正在拖拽状态
+        store.setDragging(true);
+        return {
+          id: props.data.id,
+          group: props.group,
+          index: props.index,
+          data: clone(props.data),
+          mode: 'move',
+          types: c.types(props.data)
+        };
+      },
+      collect: monitor => {
+        return {
+          canDrag: monitor.canDrag(),
+          isDragging: monitor.isDragging()
+        };
+      },
+      end: async (_, monitor) => {
+        store.setDragging(false);
+        const r = monitor.getDropResult();
+        if (r && r.asyncDrop) {
+          const result = await r.asyncDrop;
+          if (result && result.success && result.group !== props.group) ;
+        }
+        c.dropEnd();
+      },
+      options: {
+        dropEffect: 'move'
+      }
+    });
+    const [dropCollect, drop] = useDrop({
+      accept: DesignViewPrefix.CUSTOM_HOME,
+      collect(monitor) {
+        return {
+          handlerId: monitor.getHandlerId(),
+          canDrop: monitor.canDrop(),
+          isShallowOver: monitor.isOver({
+            shallow: true
+          }),
+          isOver: monitor.isOver()
+        };
+      },
+      hover(item, monitor) {
+        if (monitor.canDrop() === false || dragCollect.value.isDragging === true) {
+          return;
+        }
+        const isOver = monitor.isOver({
+          shallow: true
+        });
+        if (props.data.id === item.id) {
+          return;
+        }
+        if (isOver) {
+          const rect = elRef.value.getBoundingClientRect();
+          const offset = monitor.getClientOffset();
+          let difference = 0;
+          if (props.direction === 'vertical') {
+            const {
+              top,
+              height
+            } = rect;
+            const {
+              y
+            } = offset;
+            const half = height / 2;
+            difference = y - top - half;
+            if (difference < 0) {
+              isBeforeHover.value = true;
+            } else {
+              isBeforeHover.value = false;
+            }
+          }
+          if (props.direction === 'horizontal') {
+            const {
+              left,
+              width
+            } = rect;
+            const {
+              x
+            } = offset;
+            const half = width / 2;
+            difference = x - left - half;
+            if (difference < 0) {
+              isBeforeHover.value = true;
+            } else {
+              isBeforeHover.value = false;
+            }
+          }
+        }
+      },
+      canDrop(item, _monitor) {
+        if (dragCollect.value.isDragging === true) {
+          return false;
+        }
+        return isCanCrop(props.parent, store, item);
+      },
+      drop(item, monitor) {
+        if (monitor.canDrop() === false || monitor.isOver({
+          shallow: true
+        }) === false || dragCollect.value.isDragging === true) {
+          return;
+        }
+        const asyncDrop = async () => {
+          let _data = item.data;
+          const p = NodeRegister.get(_data.type, store.prefix);
+          if (p.beforeDrop) {
+            const data = await p.beforeDrop(c, item);
+            if (!data) {
+              return {
+                group: props.group,
+                success: false
+              };
+            }
+            _data = data;
+          }
+          const success = store.insertNode(isBeforeHover.value ? InsertNodeMode.BEFORE : InsertNodeMode.AFTER, props.data, _data);
+          if (success) {
+            if (p.afterDrop) {
+              const flag = await p.afterDrop(c, item);
+              if (!flag) {
+                return {
+                  group: props.group,
+                  success: false
+                };
+              }
+            }
+            const data = store.getNode(item.id);
+            if (data) {
+              nextTick(() => {
+                store.setActive(data);
+              });
+            }
+            return {
+              group: props.group,
+              success: true
+            };
+          }
+          return {
+            group: props.group,
+            success: false
+          };
+        };
+        return {
+          asyncDrop: asyncDrop()
+        };
+      }
+    });
+    drag(elRef);
+    drop(elRef);
+    onMounted(() => {
+      if (preview) {
+        preview(getEmptyImage(), {
+          captureDraggingState: true
+        });
+      }
+    });
+    const onActive = e => {
+      e.stopPropagation();
+      store.setActive(props.data);
+    };
+    watch(dropCollect, _ => {
+      if (_.canDrop && _.isShallowOver) {
+        store.dropContainer = props.parent || null;
+        c.setExpansion([props.data.id]);
+      }
+    });
+    return {
+      ns,
+      elRef,
+      provider,
+      isActive,
+      isHover,
+      isExpansion,
+      style,
+      dragCollect,
+      dropCollect,
+      isBeforeHover,
+      onActive
+    };
+  },
+  render() {
+    return createVNode("div", mergeProps({
+      "ref": "elRef",
+      "id": this.data.id
+    }, {
+      [DesignItemAttribute.NODE_ID_TAG]: this.data.id,
+      [DesignItemAttribute.ACTIVE_TAG]: true,
+      [DesignItemAttribute.DESIGN_NAME]: this.data.label,
+      [DesignItemAttribute.DRAG_GROUP_TYPE]: this.provider.type,
+      [DesignItemAttribute.GROUP_TAG]: this.group,
+      [DesignItemAttribute.INDEX_TAG]: this.index,
+      [DesignItemAttribute.SELECTOR_INDEX]: this.provider.selectorIndex ?? 0
+    }, {
+      "class": [this.ns.b(), this.ns.is('dragging', this.dragCollect.isDragging), this.ns.is('can-drop', this.dropCollect.canDrop), this.ns.is('shallow-over', this.dropCollect.isShallowOver), this.ns.is('active', this.isActive), this.ns.is('hover', this.isHover), this.ns.is('expansion', this.isExpansion)],
+      "style": this.style,
+      "onClick": this.onActive
+    }), [this.$slots.default?.(), this.provider.isDrag ? createVNode("div", {
+      "class": this.ns.e('dragging-mask')
+    }, null) : null, this.provider.isDrop && this.isExpansion !== true ? createVNode("div", {
+      "class": [this.ns.b('indicator'), this.ns.be('indicator', this.direction), this.ns.is('shallow-over', !this.dragCollect?.isDragging && this.dropCollect.isShallowOver && this.dropCollect.canDrop), this.ns.is('before', this.dropCollect.isShallowOver && this.isBeforeHover), this.ns.is('after', this.dropCollect.isShallowOver && !this.isBeforeHover)]
+    }, [createVNode("div", {
+      "class": [this.ns.bem('indicator', this.direction, 'start-line')]
+    }, null), createVNode("div", {
+      "class": [this.ns.bem('indicator', this.direction, 'line')]
+    }, null), createVNode("div", {
+      "class": [this.ns.bem('indicator', this.direction, 'end-line')]
+    }, null)]) : null]);
+  }
+});
+
+export { DesignDragItem };

package/es/components/design/design-drop-container/design-drop-container.css

@@ -0,0 +1,103 @@
+@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-drop-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border: 1px solid transparent;
+  overflow-y: auto;
+}
+.gct-design-drop-container.is-over {
+  background-color: #ccc;
+}
+
+.gct-design-drop-container.is-expansion {
+  border: 1px dashed var(--ant-primary-color);
+  padding: 4px;
+}
+
+.gct-design-drop-container.is-not-children {
+  background-color: #FCFCFD;
+  border: 2px dashed #DBDBDB;
+}
+
+.gct-design-drop-container__drag-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+  width: 100%;
+  font-size: 14px;
+  color: #C3C3C3;
+}
+
+.gct-design-drop-container__drop-mask {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  color: rgb(93, 100, 116);
+  background-color: rgba(49, 104, 236, 0.24);
+  pointer-events: none;
+}