@tmagic/editor 1.0.6 → 1.1.0-beta.2

package/dist/tmagic-editor.es.js

@@ -1,16 +1,16 @@
 import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, ref, watchEffect, inject, markRaw, createElementBlock, createVNode, withCtx, withModifiers, createCommentVNode, createTextVNode, toDisplayString, watch, onMounted, onUnmounted, reactive, toRaw, createElementVNode, renderSlot, Fragment, normalizeClass, resolveDynamicComponent, renderList, normalizeProps, mergeProps, getCurrentInstance, nextTick, Teleport, toHandlers, createSlots, provide } from 'vue';
 import serialize from 'serialize-javascript';
-import { Delete, Pointer, Close, Plus, Edit, ArrowDown, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Files, DocumentCopy, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons';
+import { Delete, Pointer, Close, Plus, Edit, ArrowDown, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Files, DocumentCopy, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
 import { throttle, cloneDeep, mergeWith, random } from 'lodash-es';
 import * as monaco from 'monaco-editor';
+import StageCore, { GHOST_EL_ID_PREFIX, GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS } from '@tmagic/stage';
 import { NodeType } from '@tmagic/schema';
-import { toLine, isPop, getNodePath, isNumber, isPage } from '@tmagic/utils';
+import { toLine, isPop, getNodePath, isNumber, isPage, removeClassNameByClassName, addClassName } from '@tmagic/utils';
 import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import Gesto from 'gesto';
 import { ElMessage } from 'element-plus';
 import KeyController from 'keycon';
-import StageCore, { GuidesType } from '@tmagic/stage';
 
 if (typeof global === "undefined") {
   window.global = window;
@@ -750,56 +750,50 @@ const getNodeIndex = (node, parent) => {
   const items = parent?.items || [];
   return items.findIndex((item) => `${item.id}` === `${node.id}`);
 };
-const toRelative = (node) => {
-  node.style = {
-    ...node.style || {},
-    position: "relative",
-    top: 0,
-    left: 0
-  };
-  return node;
-};
-const setTop2Middle = (node, parentNode, stage) => {
-  const style = node.style || {};
+const getRelativeStyle = (style = {}) => ({
+  ...style,
+  position: "relative",
+  top: 0,
+  left: 0
+});
+const getMiddleTop = (style = {}, parentNode, stage) => {
   let height = style.height || 0;
   if (!stage || typeof style.top !== "undefined" || !parentNode.style)
-    return style;
+    return style.top;
   if (!isNumber(height)) {
     height = 0;
   }
   const { height: parentHeight } = parentNode.style;
   if (isPage(parentNode)) {
     const { scrollTop = 0, wrapperHeight } = stage.mask;
-    style.top = (wrapperHeight - height) / 2 + scrollTop;
-  } else {
-    style.top = (parentHeight - height) / 2;
+    return (wrapperHeight - height) / 2 + scrollTop;
   }
-  return style;
+  return (parentHeight - height) / 2;
 };
-const initPosition = (node, layout, parentNode, stage) => {
+const getInitPositionStyle = (style = {}, layout, parentNode, stage) => {
   if (layout === Layout.ABSOLUTE) {
-    node.style = {
+    return {
+      ...style,
       position: "absolute",
-      ...setTop2Middle(node, parentNode, stage)
+      top: getMiddleTop(style, parentNode, stage)
     };
-    return node;
   }
   if (layout === Layout.RELATIVE) {
-    return toRelative(node);
+    return getRelativeStyle(style);
   }
-  return node;
+  return style;
 };
 const setLayout = (node, layout) => {
   node.items?.forEach((child) => {
     if (isPop(child))
       return;
-    child.style = child.style || {};
-    if (child.style.position === "fixed")
+    const style = child.style || {};
+    if (style.position === "fixed")
       return;
     if (layout !== Layout.RELATIVE) {
-      child.style.position = "absolute";
+      style.position = "absolute";
     } else {
-      toRelative(child);
+      child.style = getRelativeStyle(style);
       child.style.right = "auto";
       child.style.bottom = "auto";
     }
@@ -816,11 +810,10 @@ const change2Fixed = (node, root) => {
     offset.left = offset.left + globalThis.parseFloat(value.style?.left || 0);
     offset.top = offset.top + globalThis.parseFloat(value.style?.top || 0);
   });
-  node.style = {
+  return {
     ...node.style || {},
     ...offset
   };
-  return node;
 };
 const Fixed2Other = async (node, root, getLayout) => {
   const path = getNodePath(node.id, root.items);
@@ -835,20 +828,20 @@ const Fixed2Other = async (node, root, getLayout) => {
     offset.left = offset.left - globalThis.parseFloat(value.style?.left || 0);
     offset.top = offset.top - globalThis.parseFloat(value.style?.top || 0);
   });
+  const style = node.style || {};
   const parent = path.pop();
   if (!parent) {
-    return toRelative(node);
+    return getRelativeStyle(style);
   }
   const layout = await getLayout(parent);
   if (layout !== Layout.RELATIVE) {
-    node.style = {
-      ...node.style || {},
+    return {
+      ...style,
       ...offset,
       position: "absolute"
     };
-    return node;
   }
-  return toRelative(node);
+  return getRelativeStyle(style);
 };
 const getGuideLineFromCache = (key) => {
   if (!key)
@@ -863,6 +856,16 @@ const getGuideLineFromCache = (key) => {
   }
   return [];
 };
+const fixNodeLeft = (config, parent, doc) => {
+  if (!doc || !config.style || !isNumber(config.style.left))
+    return config.style?.left;
+  const el = doc.getElementById(`${config.id}`);
+  const parentEl = doc.getElementById(`${parent.id}`);
+  if (el && parentEl && el.offsetWidth + config.style?.left > parentEl.offsetWidth) {
+    return parentEl.offsetWidth - el.offsetWidth;
+  }
+  return config.style.left;
+};
 
 const log = (...args) => {
 };
@@ -888,6 +891,7 @@ class Editor$1 extends BaseService {
       "paste",
       "alignCenter",
       "moveLayer",
+      "moveToContainer",
       "move",
       "undo",
       "redo",
@@ -1027,13 +1031,22 @@ class Editor$1 extends BaseService {
     if (!parentNode)
       throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
     const layout = await this.getLayout(toRaw(parentNode), addNode);
-    const newNode = initPosition({ ...toRaw(await propsService.getPropsValue(type, config2)) }, layout, parentNode, this.get("stage"));
+    const newNode = { ...toRaw(await propsService.getPropsValue(type, config2)) };
+    newNode.style = getInitPositionStyle(newNode.style, layout, parentNode, this.get("stage"));
     if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) {
       throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
     }
     parentNode?.items?.push(newNode);
     const stage = this.get("stage");
-    await stage?.add({ config: cloneDeep(newNode), root: cloneDeep(this.get("root")) });
+    const root = this.get("root");
+    await stage?.add({ config: cloneDeep(newNode), root: cloneDeep(root) });
+    if (layout === Layout.ABSOLUTE) {
+      const fixedLeft = fixNodeLeft(newNode, parentNode, stage?.renderer.contentWindow?.document);
+      if (typeof fixedLeft !== "undefined") {
+        newNode.style.left = fixedLeft;
+        await stage?.update({ config: cloneDeep(newNode), root: cloneDeep(root) });
+      }
+    }
     await this.select(newNode);
     this.addModifiedNodeId(newNode.id);
     if (!isPage2) {
@@ -1060,7 +1073,7 @@ class Editor$1 extends BaseService {
       throw new Error("\u627E\u4E0D\u8981\u5220\u9664\u7684\u8282\u70B9");
     parent.items?.splice(index, 1);
     const stage = this.get("stage");
-    stage?.remove({ id: node.id, root: this.get("root") });
+    stage?.remove({ id: node.id, root: cloneDeep(this.get("root")) });
     if (node.type === NodeType.PAGE) {
       this.state.pageLength -= 1;
       if (root.items[0]) {
@@ -1121,7 +1134,7 @@ class Editor$1 extends BaseService {
     if (`${newConfig.id}` === `${this.get("node").id}`) {
       this.set("node", newConfig);
     }
-    this.get("stage")?.update({ config: cloneDeep(newConfig), root: this.get("root") });
+    this.get("stage")?.update({ config: cloneDeep(newConfig), root: cloneDeep(this.get("root")) });
     if (newConfig.type === NodeType.PAGE) {
       this.set("page", newConfig);
     }
@@ -1140,7 +1153,7 @@ class Editor$1 extends BaseService {
     parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
     await this.update(parent);
     await this.select(node);
-    this.get("stage")?.update({ config: cloneDeep(node), root: this.get("root") });
+    this.get("stage")?.update({ config: cloneDeep(node), root: cloneDeep(this.get("root")) });
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
   }
@@ -1192,7 +1205,10 @@ class Editor$1 extends BaseService {
       node.style.left = (parent.style.width - node.style.width) / 2;
     }
     await this.update(node);
-    this.get("stage")?.update({ config: cloneDeep(toRaw(node)), root: this.get("root") });
+    this.get("stage")?.update({
+      config: cloneDeep(toRaw(node)),
+      root: cloneDeep(this.get("root"))
+    });
     this.addModifiedNodeId(config2.id);
     this.pushHistoryState();
     return config2;
@@ -1209,7 +1225,37 @@ class Editor$1 extends BaseService {
     } else {
       brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
     }
-    this.get("stage")?.update({ config: cloneDeep(toRaw(parent)), root: this.get("root") });
+    this.get("stage")?.update({
+      config: cloneDeep(toRaw(parent)),
+      root: cloneDeep(this.get("root"))
+    });
+  }
+  async moveToContainer(config2, targetId) {
+    const { node, parent } = this.getNodeInfo(config2.id, false);
+    const target = this.getNodeById(targetId, false);
+    const stage = this.get("stage");
+    if (node && parent && stage) {
+      const root = cloneDeep(this.get("root"));
+      const index = getNodeIndex(node, parent);
+      parent.items?.splice(index, 1);
+      await stage.remove({ id: node.id, root });
+      const layout = await this.getLayout(target);
+      const newConfig = mergeWith(cloneDeep(node), config2, (objValue, srcValue) => {
+        if (Array.isArray(srcValue)) {
+          return srcValue;
+        }
+      });
+      newConfig.style = getInitPositionStyle(newConfig.style, layout, target, stage);
+      target.items.push(newConfig);
+      await stage.select(targetId);
+      await stage.update({ config: cloneDeep(target), root });
+      await this.select(newConfig);
+      stage.select(newConfig.id);
+      this.addModifiedNodeId(target.id);
+      this.addModifiedNodeId(parent.id);
+      this.pushHistoryState();
+      return newConfig;
+    }
   }
   async undo() {
     const value = historyService.undo();
@@ -1281,12 +1327,12 @@ class Editor$1 extends BaseService {
     }, 0);
   }
   async toggleFixedPosition(dist, src, root) {
-    let newConfig = cloneDeep(dist);
+    const newConfig = cloneDeep(dist);
     if (!isPop(src) && newConfig.style?.position) {
       if (isFixed(newConfig) && !isFixed(src)) {
-        newConfig = change2Fixed(newConfig, root);
+        newConfig.style = change2Fixed(newConfig, root);
       } else if (!isFixed(newConfig) && isFixed(src)) {
-        newConfig = await Fixed2Other(newConfig, root, this.getLayout);
+        newConfig.style = await Fixed2Other(newConfig, root, this.getLayout);
       }
     }
     return newConfig;
@@ -2190,11 +2236,16 @@ const _sfc_main$b = defineComponent({
   setup() {
     const searchText = ref("");
     const services = inject("services");
+    const stageOptions = inject("stageOptions");
+    const stage = computed(() => services?.editorService.get("stage"));
     const list = computed(() => services?.componentListService.getList().map((group) => ({
       ...group,
       items: group.items.filter((item) => item.text.includes(searchText.value))
     })));
     const collapseValue = computed(() => Array(list.value?.length).fill(1).map((x, i) => i));
+    let timeout;
+    let clientX;
+    let clientY;
     return {
       searchText,
       collapseValue,
@@ -2215,6 +2266,43 @@ const _sfc_main$b = defineComponent({
             ...data
           }).replace(/"(\w+)":\s/g, "$1: "));
         }
+      },
+      dragendHandler() {
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+          timeout = void 0;
+        }
+        const doc = stage.value?.renderer.contentWindow?.document;
+        if (doc && stageOptions) {
+          removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
+        }
+        clientX = 0;
+        clientY = 0;
+      },
+      dragHandler(e) {
+        if (e.clientX !== clientX || e.clientY !== clientY) {
+          clientX = e.clientX;
+          clientY = e.clientY;
+          if (timeout) {
+            globalThis.clearTimeout(timeout);
+            timeout = void 0;
+          }
+          return;
+        }
+        if (timeout)
+          return;
+        timeout = globalThis.setTimeout(async () => {
+          if (!stageOptions || !stage.value)
+            return;
+          const doc = stage.value.renderer.contentWindow?.document;
+          const els = stage.value.getElementsFromPoint(e);
+          for (const el of els) {
+            if (doc && !el.id.startsWith(GHOST_EL_ID_PREFIX) && await stageOptions.isContainer(el)) {
+              addClassName(el, doc, stageOptions?.containerHighlightClassName);
+              break;
+            }
+          }
+        }, stageOptions?.containerHighlightDuration);
       }
     };
   }
@@ -2262,7 +2350,9 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
                       draggable: "true",
                       key: item.type,
                       onClick: ($event) => _ctx.appendComponent(item),
-                      onDragstart: ($event) => _ctx.dragstartHandler(item, $event)
+                      onDragstart: ($event) => _ctx.dragstartHandler(item, $event),
+                      onDragend: _cache[1] || (_cache[1] = (...args) => _ctx.dragendHandler && _ctx.dragendHandler(...args)),
+                      onDrag: _cache[2] || (_cache[2] = (...args) => _ctx.dragHandler && _ctx.dragHandler(...args))
                     }, [
                       createVNode(_component_m_icon, {
                         icon: item.icon
@@ -3471,6 +3561,9 @@ const _sfc_main$2 = defineComponent({
         runtimeUrl: stageOptions.runtimeUrl,
         zoom: zoom.value,
         autoScrollIntoView: stageOptions.autoScrollIntoView,
+        isContainer: stageOptions.isContainer,
+        containerHighlightClassName: stageOptions.containerHighlightClassName,
+        containerHighlightDuration: stageOptions.containerHighlightDuration,
         canSelect: (el, event, stop) => {
           const elCanSelect = stageOptions.canSelect(el);
           if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
@@ -3495,6 +3588,10 @@ const _sfc_main$2 = defineComponent({
         services?.editorService.highlight(el.id);
       });
       stage?.on("update", (ev) => {
+        if (ev.parentEl) {
+          services?.editorService.moveToContainer({ id: ev.el.id, style: ev.style }, ev.parentEl.id);
+          return;
+        }
         services?.editorService.update({ id: ev.el.id, style: ev.style });
       });
       stage?.on("sort", (ev) => {
@@ -3566,20 +3663,38 @@ const _sfc_main$2 = defineComponent({
       },
       async dropHandler(e) {
         e.preventDefault();
-        if (e.dataTransfer && page.value && stageContainer.value && stage) {
+        const doc = stage?.renderer.contentWindow?.document;
+        const parentEl = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
+        let parent = page.value;
+        if (parentEl) {
+          parent = services?.editorService.getNodeById(parentEl.id, false);
+        }
+        if (e.dataTransfer && parent && stageContainer.value && stage) {
           const config = eval(`(${e.dataTransfer.getData("data")})`);
-          const layout = await services?.editorService.getLayout(page.value);
+          const layout = await services?.editorService.getLayout(parent);
           const containerRect = stageContainer.value.getBoundingClientRect();
           const { scrollTop, scrollLeft } = stage.mask;
+          const { style = {} } = config;
+          let top = 0;
+          let left = 0;
+          let position = "relative";
           if (layout === Layout.ABSOLUTE) {
-            config.style = {
-              ...config.style || {},
-              position: "absolute",
-              top: e.clientY - containerRect.top + scrollTop,
-              left: e.clientX - containerRect.left + scrollLeft
-            };
+            position = "absolute";
+            top = e.clientY - containerRect.top + scrollTop;
+            left = e.clientX - containerRect.left + scrollLeft;
+            if (parentEl && doc) {
+              const { left: parentLeft, top: parentTop } = getOffset(parentEl);
+              left = left - calcValueByFontsize(doc, parentLeft);
+              top = top - calcValueByFontsize(doc, parentTop);
+            }
           }
-          services?.editorService.add(config, page.value);
+          config.style = {
+            ...style,
+            position,
+            top,
+            left
+          };
+          services?.editorService.add(config, parent);
         }
       }
     };
@@ -3940,6 +4055,18 @@ const _sfc_main = defineComponent({
       type: Function,
       default: (el) => Boolean(el.id)
     },
+    isContainer: {
+      type: Function,
+      default: (el) => el.classList.contains("magic-ui-container")
+    },
+    containerHighlightClassName: {
+      type: String,
+      default: CONTAINER_HIGHLIGHT_CLASS
+    },
+    containerHighlightDuration: {
+      type: Number,
+      default: 800
+    },
     stageRect: {
       type: [String, Object]
     },
@@ -4006,7 +4133,10 @@ const _sfc_main = defineComponent({
       render: props.render,
       moveableOptions: props.moveableOptions,
       canSelect: props.canSelect,
-      updateDragEl: props.updateDragEl
+      updateDragEl: props.updateDragEl,
+      isContainer: props.isContainer,
+      containerHighlightClassName: props.containerHighlightClassName,
+      containerHighlightDuration: props.containerHighlightDuration
     }));
     return services;
   }
@@ -4089,5 +4219,5 @@ var index = {
   }
 };
 
-export { COPY_STORAGE_KEY, ComponentListPanel, DEFAULT_CONFIG, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, Keys, LayerOffset, LayerPanel, Layout, PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, ToolButton, V_GUIDE_LINE_STORAGE_KEY, change2Fixed, debug, index as default, editorService, error, eventsService, fillConfig, generatePageName, generatePageNameByApp, getConfig, getDefaultPropsValue, getGuideLineFromCache, getNodeIndex, getPageList, getPageNameList, historyService, info, initPosition, isFixed, log, propsService, setConfig, setLayout, toRelative, uiService, warn };
+export { COPY_STORAGE_KEY, ComponentListPanel, DEFAULT_CONFIG, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, Keys, LayerOffset, LayerPanel, Layout, PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, ToolButton, V_GUIDE_LINE_STORAGE_KEY, change2Fixed, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, generatePageName, generatePageNameByApp, getConfig, getDefaultPropsValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getRelativeStyle, historyService, info, isFixed, log, propsService, setConfig, setLayout, uiService, warn };
 //# sourceMappingURL=tmagic-editor.es.js.map