mce 0.15.4 → 0.15.5

package/dist/index.js

@@ -693,10 +693,6 @@ class Doc extends Model {
       }
       this.transact(() => {
         this._debug(`addChild ${child.id}`, child.name, newIndex);
-        if (!isReactive(child)) {
-          child = reactive(child);
-          node.children[newIndex] = child;
-        }
         this._proxyNode(child);
         childrenIds.insert(newIndex, [child.id]);
       });
@@ -788,6 +784,12 @@ class Doc extends Model {
       this.undoManager.addToScope(yNode);
     }
     if (!this._nodeMap.has(id)) {
+      if (!isReactive(node)) {
+        node = reactive(node);
+        if (node.parent) {
+          node.parent.children[node.getIndex()] = node;
+        }
+      }
       this._nodeMap.set(id, node);
       yNode.set("parentId", node.parent?.id);
       node.on("parented", () => {
@@ -937,7 +939,7 @@ const _0_context = defineMixin((editor) => {
   function isFrame(value) {
     return isElement(value) && value.meta.inEditorIs === "Frame";
   }
-  function isRootFrame(value) {
+  function isTopLevelFrame(value) {
     return isFrame(value) && Boolean(value.parent?.equal(root.value));
   }
   function isVisible(node) {
@@ -980,7 +982,7 @@ const _0_context = defineMixin((editor) => {
     isRoot,
     isElement,
     isFrame,
-    isRootFrame,
+    isTopLevelFrame,
     isVisible,
     setVisible,
     isLock,
@@ -2539,7 +2541,8 @@ const _4_2_frame = defineMixin((editor) => {
     emit,
     selection,
     frames,
-    config
+    config,
+    isTopLevelFrame
   } = editor;
   function setCurrentFrame(index = currentFrameIndex.value) {
     index = Math.max(0, Math.min(frames.value.length - 1, index));
@@ -2553,31 +2556,32 @@ const _4_2_frame = defineMixin((editor) => {
     emit("setCurrentFrame", index, oldIndex);
   }
   function handleElementInsideFrame(element) {
-    const source = element.getGlobalAabb();
-    const aArea = source.getArea();
+    const frame1 = element.findAncestor((node) => isTopLevelFrame(node));
+    const aabb1 = element.getGlobalAabb();
+    const area1 = aabb1.getArea();
     let flag = true;
     for (let i = 0, len = frames.value.length; i < len; i++) {
-      const frame = frames.value[i];
-      if (element.equal(frame)) {
+      const frame2 = frames.value[i];
+      if (frame2.equal(element)) {
         continue;
       }
-      const target = frame.getGlobalAabb();
-      if (source && target) {
-        if (source.getIntersectionRect(target).getArea() > aArea * 0.5) {
-          if (!element.findAncestor((ancestor) => ancestor.equal(frame))) {
-            frame.appendChild(element);
-            element.style.left = source.x - target.x;
-            element.style.top = source.y - target.y;
+      const aabb2 = frame2.getGlobalAabb();
+      if (aabb1 && aabb2) {
+        if (aabb1.getIntersectionRect(aabb2).getArea() > area1 * 0.5) {
+          if (!frame2.equal(frame1)) {
+            frame2.appendChild(element);
+            element.style.left = aabb1.x - aabb2.x;
+            element.style.top = aabb1.y - aabb2.y;
           }
           flag = false;
           break;
         }
       }
     }
-    if (flag && element.parent && !element.parent.equal(root.value)) {
+    if (flag && frame1) {
       root.value.moveChild(element, 0);
-      element.style.left = source.x;
-      element.style.top = source.y;
+      element.style.left = aabb1.x;
+      element.style.top = aabb1.y;
     }
   }
   Object.assign(editor, {
@@ -4401,7 +4405,8 @@ const _frame = definePlugin((editor) => {
             name: t("frame"),
             meta: {
               inPptIs: "GroupShape",
-              inEditorIs: "Frame"
+              inEditorIs: "Frame",
+              inCanvasIs: "Element2D"
             }
           }, {
             position: start,
@@ -15134,7 +15139,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const {
       pluginsComponents,
       isElement,
-      isRootFrame,
+      isTopLevelFrame,
       config,
       drawboardDom,
       renderEngine,
@@ -15213,7 +15218,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           hovered = result;
         }
       }
-      if (!(isElement(hovered) && !isRootFrame(hovered))) {
+      if (!(isElement(hovered) && !isTopLevelFrame(hovered))) {
         hovered = void 0;
         cursor = void 0;
       }
@@ -15228,7 +15233,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         allowRootFrame = false
       } = options;
       function isIncluded(node) {
-        return isElement(node) && (allowRootFrame || !isRootFrame(node));
+        return isElement(node) && (allowRootFrame || !isTopLevelFrame(node));
       }
       const drawing = state.value === "drawing";
       const hand = state.value === "hand";

package/dist/mixins/0.context.d.ts

@@ -45,7 +45,7 @@ declare global {
             isRoot: (value: any) => value is Node;
             isElement: (value: any) => value is Element2D;
             isFrame: (value: any) => value is Element2D;
-            isRootFrame: (value: any) => value is Element2D;
+            isTopLevelFrame: (value: any) => value is Element2D;
             isVisible: (node: Node) => boolean;
             setVisible: (node: Node, visible: boolean) => void;
             isLock: (node: Node) => boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.15.4",
+  "version": "0.15.5",
   "description": "The headless canvas editor framework. only the ESM.",
   "author": "wxm",
   "license": "MIT",