mce 0.15.29 → 0.15.31

package/dist/index.css

@@ -1173,7 +1173,7 @@
 }.mce-selector__slot {
   position: absolute;
 }
-.mce-selector__parent-element {
+.mce-selector__parent-obb {
   position: absolute;
   pointer-events: none;
   border-width: 1px;
@@ -1192,7 +1192,7 @@
   position: absolute;
   color: rgba(var(--mce-theme-primary), 1);
 }
-.mce-selector__element {
+.mce-selector__obb {
   position: absolute;
   border-width: 1px;
   border-style: solid;

package/dist/index.js

@@ -3450,6 +3450,7 @@ const _4_1_text = defineMixin((editor) => {
 const _4_2_frame = defineMixin((editor) => {
   const {
     frames,
+    isElement,
     isTopFrame,
     selection,
     getAncestorFrame
@@ -3458,7 +3459,7 @@ const _4_2_frame = defineMixin((editor) => {
     let current;
     const node = selection.value[0];
     if (node) {
-      current = isTopFrame(node) ? node : getAncestorFrame(node, true);
+      current = isElement(node) && isTopFrame(node) ? node : getAncestorFrame(node, true);
     }
     const last = frames.value.length - 1;
     let index = frames.value.findIndex((node2) => node2.equal(current));
@@ -3550,8 +3551,8 @@ const _4_3_element = defineMixin((editor) => {
             const newHeight = aspectRatio > 1 ? halfWidth / aspectRatio : halfHeight;
             resizeElement(
               el,
-              newWidth / el.style.width,
-              newHeight / el.style.height,
+              newWidth,
+              newHeight,
               {
                 deep: true,
                 textFontSizeToFit: true
@@ -3663,28 +3664,30 @@ const _4_3_element = defineMixin((editor) => {
     }
     return isArray ? elements : elements[0];
   }
-  function resizeElement(element, scaleX, scaleY, options = {}) {
-    scaleX = Math.abs(scaleX);
-    scaleY = Math.abs(scaleY);
-    function handle(element2) {
-      const style = element2.style;
-      style.left = style.left * scaleX;
-      style.top = style.top * scaleY;
-      style.width = style.width * scaleX;
-      style.height = style.height * scaleY;
-      element2?.requestRender?.();
-    }
-    handle(element);
+  function resizeElement(el, newWidth, newHeight, options = {}) {
+    const scaleX = Math.abs(newWidth / el.style.width);
+    const scaleY = Math.abs(newHeight / el.style.height);
+    function handle(el2, isChild = false) {
+      const style = el2.style;
+      if (isChild) {
+        style.left *= scaleX;
+        style.top *= scaleY;
+      }
+      style.width *= scaleX;
+      style.height *= scaleY;
+      el2?.requestRender?.();
+    }
+    handle(el);
     if (options.deep) {
-      element.findOne((node) => {
+      el.findOne((node) => {
         if (isElement(node)) {
-          handle(node);
+          handle(node, true);
         }
         return false;
       });
     }
-    options.textToFit && textToFit(element);
-    options.textFontSizeToFit && textFontSizeToFit(element, scaleX);
+    options.textToFit && textToFit(el);
+    options.textFontSizeToFit && textFontSizeToFit(el, scaleX);
   }
   function selectArea(areaInDrawboard) {
     const area2 = new Obb2D(areaInDrawboard);
@@ -4267,59 +4270,10 @@ function definePlugin(cb) {
 const _arrange = definePlugin((editor) => {
   const {
     isElement,
-    rootAabb,
     elementSelection,
     selection,
     getAabb
   } = editor;
-  function align(direction) {
-    elementSelection.value.forEach((el) => {
-      if (el.parent && isElement(el.parent)) {
-        const parentAabb = getAabb(el.parent);
-        switch (direction) {
-          case "left":
-            el.style.left = 0;
-            break;
-          case "horizontal-center":
-            el.style.left = (parentAabb.width - el.style.width) / 2;
-            break;
-          case "right":
-            el.style.left = parentAabb.width - el.style.width;
-            break;
-          case "top":
-            el.style.top = 0;
-            break;
-          case "vertical-center":
-            el.style.top = (parentAabb.height - el.style.height) / 2;
-            break;
-          case "bottom":
-            el.style.top = parentAabb.height - el.style.height;
-            break;
-        }
-      } else {
-        switch (direction) {
-          case "left":
-            el.style.left = rootAabb.value.left;
-            break;
-          case "horizontal-center":
-            el.style.left = (rootAabb.value.left + rootAabb.value.width - el.style.width) / 2;
-            break;
-          case "right":
-            el.style.left = rootAabb.value.left + rootAabb.value.width - el.style.width;
-            break;
-          case "top":
-            el.style.top = rootAabb.value.top;
-            break;
-          case "vertical-center":
-            el.style.top = (rootAabb.value.top + rootAabb.value.height - el.style.height) / 2;
-            break;
-          case "bottom":
-            el.style.top = rootAabb.value.top + rootAabb.value.height - el.style.height;
-            break;
-        }
-      }
-    });
-  }
   function zOrder2(target, type) {
     const els = Array.isArray(target) ? target : [target];
     els.forEach((el) => {
@@ -4346,6 +4300,53 @@ const _arrange = definePlugin((editor) => {
       parent.moveChild(el, index);
     });
   }
+  function align(direction) {
+    const len = elementSelection.value.length;
+    if (!len) {
+      return;
+    }
+    let targetAabb;
+    if (len === 1) {
+      const parent = elementSelection.value[0]?.parent;
+      if (parent && isElement(parent)) {
+        targetAabb = parent.getGlobalAabb();
+      }
+    } else {
+      targetAabb = getAabb(elementSelection.value);
+    }
+    if (!targetAabb) {
+      return;
+    }
+    elementSelection.value.forEach((el) => {
+      const parentAabb = el.getParent()?.getGlobalAabb?.() ?? new Aabb2D();
+      const hw = el.size.x / 2;
+      const hh = el.size.y / 2;
+      const cos = Math.cos(el.rotation);
+      const sin = Math.sin(el.rotation);
+      const dx = Math.abs(hw * cos) + Math.abs(hh * sin);
+      const dy = Math.abs(hw * sin) + Math.abs(hh * cos);
+      switch (direction) {
+        case "left":
+          el.style.left = targetAabb.left - parentAabb.left + dx - hw;
+          break;
+        case "horizontal-center":
+          el.style.left = targetAabb.left - parentAabb.left + targetAabb.width / 2 - hw;
+          break;
+        case "right":
+          el.style.left = targetAabb.left - parentAabb.left + targetAabb.width - dx - hw;
+          break;
+        case "top":
+          el.style.top = targetAabb.top - parentAabb.top + dy - hh;
+          break;
+        case "vertical-center":
+          el.style.top = targetAabb.top - parentAabb.top + targetAabb.height / 2 - hh;
+          break;
+        case "bottom":
+          el.style.top = targetAabb.top - parentAabb.top + targetAabb.height - dy - hh;
+          break;
+      }
+    });
+  }
   function bringToFront(target = selection.value) {
     target && zOrder2(target, "bringToFront");
   }
@@ -4395,17 +4396,16 @@ const _autoNest = definePlugin((editor) => {
     exec,
     root
   } = editor;
-  let startFrame;
   let startContext = {};
-  function nestIntoFrame(element, options) {
+  function nestIntoFrame(el, options) {
     const pointer = options?.pointer;
-    const frame1 = element.findAncestor((node) => isTopFrame(node));
-    const aabb1 = element.getGlobalAabb();
+    const frame1 = el.findAncestor((node) => isTopFrame(node));
+    const aabb1 = el.getGlobalAabb();
     const area1 = aabb1.getArea();
     let flag = true;
     for (let i = 0, len = frames.value.length; i < len; i++) {
       const frame2 = frames.value[i];
-      if (frame2.equal(element)) {
+      if (frame2.equal(el)) {
         continue;
       }
       const aabb2 = frame2.getGlobalAabb();
@@ -4415,10 +4415,10 @@ const _autoNest = definePlugin((editor) => {
           if (frame2.equal(options?.parent)) {
             index = options.index;
           }
-          frame2.moveChild(element, index);
-          element.style.left = aabb1.x - aabb2.x;
-          element.style.top = aabb1.y - aabb2.y;
-          element.updateGlobalTransform();
+          frame2.moveChild(el, index);
+          el.style.left = aabb1.x - aabb2.x;
+          el.style.top = aabb1.y - aabb2.y;
+          el.updateGlobalTransform();
           exec("layerScrollIntoView");
         }
         flag = false;
@@ -4430,10 +4430,10 @@ const _autoNest = definePlugin((editor) => {
       if (root.value.equal(options?.parent)) {
         index = options.index;
       }
-      root.value.moveChild(element, index);
-      element.style.left = aabb1.x;
-      element.style.top = aabb1.y;
-      element.updateGlobalTransform();
+      root.value.moveChild(el, index);
+      el.style.left = aabb1.x;
+      el.style.top = aabb1.y;
+      el.updateGlobalTransform();
       exec("layerScrollIntoView");
     }
   }
@@ -4443,20 +4443,10 @@ const _autoNest = definePlugin((editor) => {
       { command: "nestIntoFrame", handle: nestIntoFrame }
     ],
     events: {
-      selectionTransformStart: ({ elements }) => {
-        const pointer = getGlobalPointer();
-        startFrame = frames.value.find((frame) => frame.getGlobalAabb().contains(pointer));
-        const ctx = {};
-        elements.forEach((el) => {
-          ctx[el.instanceId] = {
-            parent: el.getParent(),
-            index: el.getIndex()
-          };
-        });
-        startContext = ctx;
-      },
-      selectionTransforming: ({ handle, startEvent, elements }) => {
+      selectionTransformStart: ({ handle, startEvent, elements }) => {
         if (handle === "move" && !startEvent?.__FROM__) {
+          const pointer = getGlobalPointer();
+          const startFrame = frames.value.find((frame) => frame.getGlobalAabb().contains(pointer));
           const idSet = /* @__PURE__ */ new Set();
           elements.forEach((el) => {
             const frame = isTopFrame(el) ? el : el.findAncestor(isTopFrame);
@@ -4469,11 +4459,25 @@ const _autoNest = definePlugin((editor) => {
             }
           });
           if (idSet.size === 1) {
-            elements.forEach((element) => {
+            const ctx = {};
+            elements.forEach((el) => {
+              ctx[el.instanceId] = {
+                parent: el.getParent(),
+                index: el.getIndex()
+              };
+            });
+            startContext = ctx;
+          }
+        }
+      },
+      selectionTransforming: ({ handle, startEvent, elements }) => {
+        if (handle === "move" && !startEvent?.__FROM__) {
+          if (Object.keys(startContext).length > 0) {
+            elements.forEach((el) => {
               nestIntoFrame(
-                element,
+                el,
                 {
-                  ...startContext[element.instanceId],
+                  ...startContext[el.instanceId],
                   pointer: getGlobalPointer()
                 }
               );
@@ -4483,7 +4487,6 @@ const _autoNest = definePlugin((editor) => {
       },
       selectionTransformEnd: () => {
         startContext = {};
-        startFrame = void 0;
       }
     }
   };
@@ -5690,9 +5693,12 @@ const _group = definePlugin((editor) => {
     elementSelection,
     addElement,
     addElements,
-    doc
+    doc,
+    isElement,
+    inEditorIs,
+    obbToFit
   } = editor;
-  function group(inEditorIs) {
+  function group(inEditorIs2) {
     const elements = elementSelection.value;
     if (!elements.length) {
       return;
@@ -5708,7 +5714,7 @@ const _group = definePlugin((editor) => {
     });
     doc.value.transact(() => {
       addElement({
-        name: inEditorIs === "Frame" ? "Frame" : "Group",
+        name: inEditorIs2 === "Frame" ? "Frame" : "Group",
         style: {
           left: aabb.left,
           top: aabb.top,
@@ -5718,7 +5724,7 @@ const _group = definePlugin((editor) => {
         children,
         meta: {
           inPptIs: "GroupShape",
-          inEditorIs
+          inEditorIs: inEditorIs2
         }
       }, {
         parent,
@@ -5762,7 +5768,19 @@ const _group = definePlugin((editor) => {
       { command: "groupSelection", key: "CmdOrCtrl+G" },
       { command: "frameSelection", key: "Alt+CmdOrCtrl+G" },
       { command: "ungroup", key: "CmdOrCtrl+Backspace" }
-    ]
+    ],
+    events: {
+      selectionTransforming: ({ elements }) => {
+        elements.forEach((el) => {
+          el.findAncestor((ancestor) => {
+            if (isElement(ancestor) && !inEditorIs(ancestor, "Frame")) {
+              obbToFit(ancestor);
+            }
+            return false;
+          });
+        });
+      }
+    }
   };
 });
 const _history = definePlugin((editor) => {
@@ -12418,6 +12436,8 @@ const _shape = definePlugin((editor) => {
         position: start,
         active: true
       });
+      el.style.width = 1;
+      el.style.height = 1;
       return {
         move: (move) => {
           const minX = Math.min(move.x, start.x);
@@ -12426,8 +12446,8 @@ const _shape = definePlugin((editor) => {
           const maxY = Math.max(move.y, start.y);
           el.style.left = minX;
           el.style.top = minY;
-          el.style.width = maxX - minX;
-          el.style.height = maxY - minY;
+          el.style.width = Math.max(1, maxX - minX);
+          el.style.height = Math.max(1, maxY - minY);
         },
         end: () => {
           setActiveDrawingTool(void 0);
@@ -13597,29 +13617,13 @@ const _smartGuides = definePlugin((editor) => {
     state,
     getAabb,
     root,
-    camera
+    camera,
+    viewportAabb
   } = editor;
   const snapThreshold = computed(() => Math.max(1, 5 / camera.value.zoom.x));
   const excluded = computed(() => new Set(elementSelection.value.map((el) => el.id)));
-  const activeBox = computed(() => createBox(selectionAabb.value));
   const parnet = computed(() => elementSelection.value[0]?.parent ?? root.value);
   const parentBox = computed(() => createBox(parnet.value));
-  const boxes = computed(() => {
-    return parnet.value.children.filter((node) => !excluded.value.has(node.id)).map((node) => createBox(node)).filter(Boolean);
-  });
-  const store = computed(() => {
-    return boxes.value.reduce(
-      (store2, box) => {
-        [box.vt, box.vm, box.vb].forEach((val) => store2.vLines.add(val));
-        [box.hl, box.hm, box.hr].forEach((val) => store2.hLines.add(val));
-        return store2;
-      },
-      {
-        vLines: new BSTree((a, b) => a.pos - b.pos),
-        hLines: new BSTree((a, b) => a.pos - b.pos)
-      }
-    );
-  });
   function createBox(node) {
     if (!node)
       return void 0;
@@ -13733,12 +13737,22 @@ const _smartGuides = definePlugin((editor) => {
   const linePairs = ref([]);
   function updateSmartGuides() {
     const _linePairs = [];
-    const box = activeBox.value;
+    const box = createBox(selectionAabb.value);
     if (box) {
-      const {
-        vLines,
-        hLines
-      } = store.value;
+      const boxes = parnet.value.children.filter((node) => {
+        return !excluded.value.has(node.id) && isElement(node) && viewportAabb.value.overlap(node.getGlobalAabb());
+      }).map((node) => createBox(node)).filter(Boolean);
+      const { vLines, hLines } = boxes.reduce(
+        (store, box2) => {
+          [box2.vt, box2.vm, box2.vb].forEach((val) => store.vLines.add(val));
+          [box2.hl, box2.hm, box2.hr].forEach((val) => store.hLines.add(val));
+          return store;
+        },
+        {
+          vLines: new BSTree((a, b) => a.pos - b.pos),
+          hLines: new BSTree((a, b) => a.pos - b.pos)
+        }
+      );
       const areaLine = {
         vt: [],
         vb: [],
@@ -13949,7 +13963,14 @@ const _smartGuides = definePlugin((editor) => {
       { type: "overlay", component: _sfc_main$k }
     ],
     events: {
-      selectionTransforming: updateSmartGuides
+      selectionTransforming: ({ handle }) => {
+        if (handle === "move") {
+          updateSmartGuides();
+        }
+      },
+      selectionTransformEnd: () => {
+        linePairs.value = [];
+      }
     }
   };
 });
@@ -14801,14 +14822,12 @@ const _ui = definePlugin((editor) => {
       const {
         drawboardDom,
         drawboardAabb,
-        drawboardPointer,
-        exec
+        drawboardPointer
       } = editor;
       useResizeObserver$1(drawboardDom, (entries) => {
         const { left: _left, top: _top, width, height } = entries[0].contentRect;
         const { left = _left, top = _top } = drawboardDom.value?.getBoundingClientRect() ?? {};
         drawboardAabb.value = new Aabb2D(left, top, width, height);
-        exec("zoomToFit");
       });
       document.addEventListener("mousemove", (event) => {
         drawboardPointer.value = new Vector2$1(
@@ -15151,11 +15170,13 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       const aabb = selectionAabbInDrawboard.value;
       if (location?.startsWith("top") || location?.startsWith("bottom")) {
         return {
-          minWidth: `${aabb.width}px`
+          "--height": "auto",
+          "--width": `${aabb.width}px`
         };
       } else if (location?.startsWith("left") || location?.startsWith("right")) {
         return {
-          minHeight: `${aabb.height}px`
+          "--height": `${aabb.height}px`,
+          "--width": "auto"
         };
       }
       return {};
@@ -15514,7 +15535,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               rotatedCurrentPoint.y - centerPoint.y,
               rotatedCurrentPoint.x - centerPoint.x
             ) / (Math.PI / 180);
-            updated.rotate = (rotate + endAngle - startAngle + 360) % 360;
+            updated.rotate = rotate + endAngle - startAngle;
           }
         } else if (isRound) {
           const offset2 = rotatePoint2(rotatedOffset, { x: 0, y: 0 }, -rotate);
@@ -16037,8 +16058,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       selectionObb,
       selectionObbInDrawboard,
       camera,
-      obbToFit,
       getObb,
+      getAabb,
       registerCommand,
       unregisterCommand,
       inEditorIs,
@@ -16046,7 +16067,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       config,
       snapThreshold,
       getSnapPoints,
-      hoverElement
+      hoverElement,
+      selectionAabb
     } = useEditor();
     const transformable = useTemplateRef("transformableTpl");
     const startEvent = ref();
@@ -16087,18 +16109,6 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         };
       });
     });
-    const _transform2 = computed(() => {
-      const zoom = camera.value.zoom;
-      const { left, top, width, height, rotationDegrees } = selectionObbInDrawboard.value;
-      return {
-        left,
-        top,
-        width,
-        height,
-        rotate: rotationDegrees,
-        borderRadius: (elementSelection.value[0]?.style.borderRadius ?? 0) * zoom.x
-      };
-    });
     function snap(currentPos, type) {
       const points = getSnapPoints();
       const zoom = camera.value.zoom;
@@ -16135,6 +16145,45 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         elements: elementSelection.value
       };
     }
+    const startContext = {
+      rotate: 0,
+      offsetMap: {}
+    };
+    function onStart() {
+      startContext.rotate = 0;
+      const aabb = selectionAabb.value;
+      elementSelection.value.forEach((el) => {
+        const elAabb = el.getGlobalAabb();
+        startContext.offsetMap[el.instanceId] = {
+          x: (elAabb.x - aabb.x) / aabb.width,
+          y: (elAabb.y - aabb.y) / aabb.height
+        };
+      });
+      emit("selectionTransformStart", createSelectionTransformContext());
+    }
+    function onMove() {
+      if (!state.value) {
+        state.value = "transforming";
+      }
+    }
+    function onEnd() {
+      if (state.value === "transforming") {
+        state.value = void 0;
+      }
+      emit("selectionTransformEnd", createSelectionTransformContext());
+    }
+    const _transform2 = computed(() => {
+      const zoom = camera.value.zoom;
+      const { left, top, width, height, rotationDegrees } = selectionObbInDrawboard.value;
+      return {
+        left,
+        top,
+        width,
+        height,
+        rotate: rotationDegrees,
+        borderRadius: (elementSelection.value[0]?.style.borderRadius ?? 0) * zoom.x
+      };
+    });
     const transform = computed({
       get: () => _transform2.value,
       set: (val) => {
@@ -16161,80 +16210,78 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           rotate: transform2.rotate - (oldTransform.rotate ?? 0),
           borderRadius: transform2.borderRadius - (oldTransform.borderRadius ?? 0) / zoom.y
         };
-        elementSelection.value.forEach((element) => {
-          const style = element.style;
+        const els = elementSelection.value;
+        if (els.length > 1) {
+          if (handle.startsWith("rotate")) {
+            offsetStyle.rotate = transform2.rotate - startContext.rotate;
+            startContext.rotate += offsetStyle.rotate;
+          }
+        }
+        els.forEach((el) => {
+          const style = el.style;
           const newStyle = {
             left: style.left + offsetStyle.left,
             top: style.top + offsetStyle.top,
             width: style.width + offsetStyle.width,
             height: style.height + offsetStyle.height,
-            rotate: style.rotate + offsetStyle.rotate,
+            rotate: (style.rotate + offsetStyle.rotate + 360) % 360,
             borderRadius: Math.round(style.borderRadius + offsetStyle.borderRadius)
           };
           if (handle.startsWith("rotate")) {
             newStyle.rotate = Math.round(newStyle.rotate * 100) / 100;
           } else if (handle.startsWith("resize")) {
             const scale = newStyle.rotate ? 100 : 1;
-            newStyle.width = Math.round(newStyle.width * scale) / scale;
-            newStyle.height = Math.round(newStyle.height * scale) / scale;
-            const shape = element.shape;
+            const newWidth = Math.max(1, Math.round(newStyle.width * scale) / scale);
+            const newHeight = Math.max(1, Math.round(newStyle.height * scale) / scale);
+            const shape = el.shape;
             resizeElement(
-              element,
-              newStyle.width / element.style.width,
-              newStyle.height / element.style.height,
-              inEditorIs(element, "Frame") ? void 0 : shape.isValid() ? { deep: true } : handle.split("-")[1].length > 1 ? { deep: true, textFontSizeToFit: true } : { deep: true, textToFit: true }
+              el,
+              newWidth,
+              newHeight,
+              inEditorIs(el, "Frame") ? void 0 : shape.isValid() ? { deep: true } : handle.split("-")[1].length > 1 ? { deep: true, textFontSizeToFit: true } : { deep: true, textToFit: true }
             );
-            newStyle.width = element.style.width;
-            newStyle.height = element.style.height;
+            newStyle.width = el.style.width;
+            newStyle.height = el.style.height;
           }
           Object.assign(style, newStyle);
-          element.updateGlobalTransform();
-          element.findAncestor((ancestor) => {
-            if (isElement(ancestor) && !inEditorIs(ancestor, "Frame")) {
-              obbToFit(ancestor);
-            }
-            return false;
-          });
+          el.updateGlobalTransform();
         });
+        if (els.length > 1) {
+          if (handle.startsWith("resize")) {
+            const selectionAabb2 = getAabb(els);
+            els.forEach((el) => {
+              const parentAabb = el.getParent()?.getGlobalAabb?.() ?? new Aabb2D();
+              const { x, y } = startContext.offsetMap[el.instanceId];
+              el.style.left = selectionAabb2.left - parentAabb.left + selectionAabb2.width * x;
+              el.style.top = selectionAabb2.top - parentAabb.left + selectionAabb2.height * y;
+            });
+          }
+        }
         emit("selectionTransforming", createSelectionTransformContext());
       }
     });
     const movable = computed(() => {
-      return elementSelection.value.every((element) => {
+      return state.value !== "typing" && elementSelection.value.every((element) => {
         return !isLock(element) && element.meta.movable !== false && element.meta.transformable !== false;
       });
     });
     const resizable = computed(() => {
-      return elementSelection.value.every((element) => {
+      return state.value !== "typing" && elementSelection.value.every((element) => {
         return !isLock(element) && element.meta.resizable !== false && element.meta.transformable !== false;
       });
     });
     const rotatable = computed(() => {
-      return elementSelection.value.every((element) => {
+      return state.value !== "typing" && elementSelection.value.every((element) => {
         return !isLock(element) && element.meta.rotatable !== false && element.meta.transformable !== false;
       });
     });
     const roundable = computed(() => {
-      if (elementSelection.value.length === 1) {
+      if (state.value !== "typing" && elementSelection.value.length === 1) {
         const element = elementSelection.value[0];
         return hoverElement.value?.equal(element) && !isLock(element) && element.foreground.isValid();
       }
       return false;
     });
-    function onStart() {
-      emit("selectionTransformStart", createSelectionTransformContext());
-    }
-    function onMove() {
-      if (!state.value) {
-        state.value = "transforming";
-      }
-    }
-    function onEnd() {
-      if (state.value === "transforming") {
-        state.value = void 0;
-      }
-      emit("selectionTransformEnd", createSelectionTransformContext());
-    }
     function tipFormat() {
       const obb = elementSelection.value.length === 1 ? elementSelection.value[0].style : selectionObb.value;
       return `${Number(obb.width.toFixed(2))} × ${Number(obb.height.toFixed(2))}`;
@@ -16247,44 +16294,43 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         (openBlock(true), createElementBlock(Fragment, null, renderList(parentObbStyles.value, (style, index) => {
           return openBlock(), createElementBlock("div", {
             key: index,
-            class: "mce-selector__parent-element",
+            class: "mce-selector__parent-obb",
             style: normalizeStyle$1({
               borderColor: "currentColor",
               ...style
             })
           }, null, 4);
         }), 128)),
-        unref(state) === "selecting" ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: "mce-selector__selected-area",
-          style: normalizeStyle$1({
-            borderColor: "currentcolor",
-            ...props.selectedArea.toCssStyle()
-          })
-        }, null, 4)) : createCommentVNode("", true),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(selectionObbStyles.value, (style, index) => {
+        unref(state) !== "transforming" ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(selectionObbStyles.value, (style, index) => {
           return openBlock(), createElementBlock("div", {
             key: index,
-            class: "mce-selector__element",
+            class: "mce-selector__obb",
             style: normalizeStyle$1({
               borderColor: "currentcolor",
               ...style
             })
           }, null, 4);
-        }), 128)),
-        transform.value.width && transform.value.height ? (openBlock(), createBlock(_sfc_main$a, mergeProps({
+        }), 128)) : createCommentVNode("", true),
+        unref(state) === "selecting" ? (openBlock(), createElementBlock("div", {
           key: 1,
+          class: "mce-selector__selected-area",
+          style: normalizeStyle$1({
+            borderColor: "currentcolor",
+            ...props.selectedArea.toCssStyle()
+          })
+        }, null, 4)) : createCommentVNode("", true),
+        transform.value.width && transform.value.height ? (openBlock(), createBlock(_sfc_main$a, mergeProps({
+          key: 2,
           ref: "transformableTpl"
         }, unref(config).transformControls, {
           modelValue: transform.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => transform.value = $event),
-          movable: unref(state) !== "typing" && movable.value,
-          resizable: unref(state) !== "typing" && resizable.value,
-          rotatable: unref(state) !== "typing" && rotatable.value,
-          roundable: unref(state) !== "typing" && roundable.value,
+          movable: movable.value,
+          resizable: resizable.value,
+          rotatable: rotatable.value,
+          roundable: roundable.value,
           "resize-strategy": props.resizeStrategy,
           class: "mce-selector__transform",
-          "border-style": unref(elementSelection).length > 1 ? "dashed" : "solid",
           "tip-format": tipFormat,
           onStart,
           onMove,
@@ -16297,9 +16343,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             ]),
             key: "0"
           } : void 0
-        ]), 1040, ["modelValue", "movable", "resizable", "rotatable", "roundable", "resize-strategy", "border-style"])) : createCommentVNode("", true),
+        ]), 1040, ["modelValue", "movable", "resizable", "rotatable", "roundable", "resize-strategy"])) : createCommentVNode("", true),
         transform.value.width && transform.value.height && _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
-          key: 2,
+          key: 3,
           class: "mce-selector__slot",
           style: normalizeStyle$1(unref(boundingBoxToStyle)(transform.value))
         }, [

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

@@ -46,10 +46,10 @@ declare global {
             parseAnchor: (anchor: Anchor, isRtl?: boolean) => ParsedAnchor;
             isNode: (value: any) => value is Node;
             isRoot: (value: any) => value is Node;
-            inEditorIs: (value: Node, inEditorIs?: EditorNodeType) => boolean;
+            inEditorIs: (node: Node, inEditorIs?: EditorNodeType) => boolean;
             isElement: (value: any) => value is Element2D;
-            isFrame: (value: any) => value is Element2D;
-            isTopFrame: (value: any) => value is Element2D;
+            isFrame: (node: Node) => boolean;
+            isTopFrame: (node: Node) => boolean;
             isVisible: (node: Node) => boolean;
             setVisible: (node: Node, visible: boolean) => void;
             isLock: (node: Node) => boolean;

package/dist/mixins/4.3.element.d.ts

@@ -19,7 +19,7 @@ declare global {
         interface Editor {
             addElement: (element: Element, options?: AddElementOptions) => Element2D;
             addElements: (element: Element[], options?: AddElementOptions) => Element2D[];
-            resizeElement: (element: Element2D, width: number, height: number, options?: ResizeElementOptions) => void;
+            resizeElement: (element: Element2D, newWidth: number, newHeight: number, options?: ResizeElementOptions) => void;
             selectArea: (areaInDrawboard: Aabb2D) => Element2D[];
         }
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.15.29",
+  "version": "0.15.31",
   "description": "The headless canvas editor framework. only the ESM.",
   "author": "wxm",
   "license": "MIT",
@@ -63,7 +63,7 @@
     "lodash-es": "^4.17.22",
     "modern-canvas": "^0.14.39",
     "modern-font": "^0.4.4",
-    "modern-idoc": "^0.10.9",
+    "modern-idoc": "^0.10.10",
     "modern-text": "^1.10.15",
     "yjs": "^13.6.29"
   },