mce 0.13.1 → 0.13.2

package/dist/components/Floatbar.vue.d.ts

@@ -16,8 +16,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: import("vue").PropType<("offset" | "flip" | "shift")[]>;
         default: () => string[];
     }, "type" | "default"> & {
-        type: import("vue").PropType<any[] | ("shift" | "offset" | "flip")[]>;
-        default: any[] | ("shift" | "offset" | "flip")[];
+        type: import("vue").PropType<any[] | ("shift" | "flip" | "offset")[]>;
+        default: any[] | ("shift" | "flip" | "offset")[];
     };
     target: import("vue").PropType<{
         x: number;
@@ -42,8 +42,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: import("vue").PropType<("offset" | "flip" | "shift")[]>;
         default: () => string[];
     }, "type" | "default"> & {
-        type: import("vue").PropType<any[] | ("shift" | "offset" | "flip")[]>;
-        default: any[] | ("shift" | "offset" | "flip")[];
+        type: import("vue").PropType<any[] | ("shift" | "flip" | "offset")[]>;
+        default: any[] | ("shift" | "flip" | "offset")[];
     };
     target: import("vue").PropType<{
         x: number;
@@ -57,7 +57,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     offset: number;
     location: import("@floating-ui/vue").Side | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" | "bottom-end" | "bottom-start";
     attach: string | boolean | Element | null | undefined;
-    middlewares: any[] | ("shift" | "offset" | "flip")[];
+    middlewares: any[] | ("shift" | "flip" | "offset")[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/Selector.vue.d.ts

@@ -1,6 +1,6 @@
 import type { AxisAlignedBoundingBox, OrientedBoundingBox } from '../types';
 type __VLS_Props = {
-    resizeStrategy?: 'free' | 'aspectRatio' | 'diagonalAspectRatio';
+    resizeStrategy?: 'aspectRatio' | 'diagonalAspectRatio';
     selectedArea?: AxisAlignedBoundingBox;
 };
 declare var __VLS_12: {
@@ -26,11 +26,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         $props: {
             readonly tag?: string | any;
             readonly modelValue?: Partial<OrientedBoundingBox> | undefined;
-            readonly moveable?: boolean | undefined;
+            readonly movable?: boolean | undefined;
             readonly rotatable?: boolean | undefined;
             readonly resizable?: boolean | undefined;
             readonly threshold?: number | undefined;
-            readonly resizeStrategy?: "free" | "aspectRatio" | "diagonalAspectRatio" | undefined;
+            readonly resizeStrategy?: "aspectRatio" | "diagonalAspectRatio" | undefined;
             readonly handleStrategy?: "default" | "point" | undefined;
             readonly handleShape?: "rect" | "circle" | undefined;
             readonly color?: string | undefined;
@@ -62,11 +62,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         $options: import("vue").ComponentOptionsBase<Readonly<{
             tag?: string | any;
             modelValue?: Partial<OrientedBoundingBox>;
-            moveable?: boolean;
+            movable?: boolean;
             rotatable?: boolean;
             resizable?: boolean;
             threshold?: number;
-            resizeStrategy?: "free" | "aspectRatio" | "diagonalAspectRatio";
+            resizeStrategy?: "aspectRatio" | "diagonalAspectRatio";
             handleStrategy?: "default" | "point";
             handleShape?: "rect" | "circle";
             color?: string;
@@ -93,11 +93,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         }, string, {
             color: string;
             visibility: "visible" | "none" | "auto";
+            movable: boolean;
+            rotatable: boolean;
             resizable: boolean;
             tag: string | any;
-            resizeStrategy: "free" | "aspectRatio" | "diagonalAspectRatio";
-            moveable: boolean;
-            rotatable: boolean;
             threshold: number;
             handleStrategy: "default" | "point";
             handleColor: string;
@@ -125,11 +124,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     } & Readonly<{
         color: string;
         visibility: "visible" | "none" | "auto";
+        movable: boolean;
+        rotatable: boolean;
         resizable: boolean;
         tag: string | any;
-        resizeStrategy: "free" | "aspectRatio" | "diagonalAspectRatio";
-        moveable: boolean;
-        rotatable: boolean;
         threshold: number;
         handleStrategy: "default" | "point";
         handleColor: string;
@@ -137,11 +135,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     }> & Omit<Readonly<{
         tag?: string | any;
         modelValue?: Partial<OrientedBoundingBox>;
-        moveable?: boolean;
+        movable?: boolean;
         rotatable?: boolean;
         resizable?: boolean;
         threshold?: number;
-        resizeStrategy?: "free" | "aspectRatio" | "diagonalAspectRatio";
+        resizeStrategy?: "aspectRatio" | "diagonalAspectRatio";
         handleStrategy?: "default" | "point";
         handleShape?: "rect" | "circle";
         color?: string;
@@ -156,7 +154,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         onEnd?: ((args_0: OrientedBoundingBox) => any) | undefined;
         onStart?: ((args_0: OrientedBoundingBox) => any) | undefined;
         "onUpdate:modelValue"?: ((args_0: OrientedBoundingBox) => any) | undefined;
-    }>, "start" | "transforming" | "activeHandle" | ("color" | "visibility" | "resizable" | "tag" | "resizeStrategy" | "moveable" | "rotatable" | "threshold" | "handleStrategy" | "handleColor" | "handles")> & import("vue").ShallowUnwrapRef<{
+    }>, "start" | "transforming" | "activeHandle" | ("color" | "visibility" | "movable" | "rotatable" | "resizable" | "tag" | "threshold" | "handleStrategy" | "handleColor" | "handles")> & import("vue").ShallowUnwrapRef<{
         start: (event?: MouseEvent, index?: number) => boolean;
         activeHandle: import("vue").Ref<("move" | "rotate-top-left" | "rotate-top-right" | "rotate-bottom-left" | "rotate-bottom-right" | "resize-top" | "resize-right" | "resize-bottom" | "resize-left" | "resize-top-left" | "resize-top-right" | "resize-bottom-left" | "resize-bottom-right") | undefined, ("move" | "rotate-top-left" | "rotate-top-right" | "rotate-bottom-left" | "rotate-bottom-right" | "resize-top" | "resize-right" | "resize-bottom" | "resize-left" | "resize-top-left" | "resize-top-right" | "resize-bottom-left" | "resize-bottom-right") | undefined>;
         transforming: import("vue").Ref<boolean, boolean>;

package/dist/components/shared/Dialog.vue.d.ts

@@ -55,7 +55,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
 }>, {
     attach: string | boolean | Element | null | undefined;
-    middlewares: ("shift" | "offset" | "flip")[];
+    middlewares: ("shift" | "flip" | "offset")[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/shared/Menu.vue.d.ts

@@ -67,7 +67,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     "onClick:item"?: ((item: MenuItem, event: MouseEvent) => any) | undefined;
 }>, {
     attach: string | boolean | Element | null | undefined;
-    middlewares: ("shift" | "offset" | "flip")[];
+    middlewares: ("shift" | "flip" | "offset")[];
     openOnHover: boolean;
     persistent: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/shared/Overlay.vue.d.ts

@@ -60,7 +60,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     "onUpdate:modelValue"?: ((val: boolean) => any) | undefined;
 }>, {
     attach: string | boolean | Element | null | undefined;
-    middlewares: ("shift" | "offset" | "flip")[];
+    middlewares: ("shift" | "flip" | "offset")[];
     modelValue: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/shared/Tooltip.vue.d.ts

@@ -68,7 +68,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     offset: number;
     location: import("@floating-ui/vue").Side | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" | "bottom-end" | "bottom-start";
     attach: string | boolean | Element | null | undefined;
-    middlewares: ("shift" | "offset" | "flip")[];
+    middlewares: ("shift" | "flip" | "offset")[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/shared/Transformable.vue.d.ts

@@ -3,11 +3,11 @@ type Handle = 'move' | 'rotate-top-left' | 'rotate-top-right' | 'rotate-bottom-l
 type __VLS_Props = {
     tag?: string | any;
     modelValue?: Partial<OrientedBoundingBox>;
-    moveable?: boolean;
+    movable?: boolean;
     rotatable?: boolean;
     resizable?: boolean;
     threshold?: number;
-    resizeStrategy?: 'free' | 'aspectRatio' | 'diagonalAspectRatio';
+    resizeStrategy?: 'aspectRatio' | 'diagonalAspectRatio';
     handleStrategy?: 'default' | 'point';
     handleShape?: 'rect' | 'circle';
     color?: string;
@@ -56,11 +56,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
 }>, {
     color: string;
     visibility: "visible" | "none" | "auto";
+    movable: boolean;
+    rotatable: boolean;
     resizable: boolean;
     tag: string | any;
-    resizeStrategy: "free" | "aspectRatio" | "diagonalAspectRatio";
-    moveable: boolean;
-    rotatable: boolean;
     threshold: number;
     handleStrategy: "default" | "point";
     handleColor: string;

package/dist/composables/overlay.d.ts

@@ -34,8 +34,8 @@ export declare const makeMceOverlayProps: <Defaults extends {
         type: PropType<("offset" | "flip" | "shift")[]>;
         default: () => string[];
     }, "type" | "default"> & {
-        type: PropType<unknown extends Defaults["middlewares"] ? ("shift" | "offset" | "flip")[] : ("shift" | "offset" | "flip")[] | Defaults["middlewares"]>;
-        default: unknown extends Defaults["middlewares"] ? ("shift" | "offset" | "flip")[] : ("shift" | "offset" | "flip")[] | Defaults["middlewares"];
+        type: PropType<unknown extends Defaults["middlewares"] ? ("shift" | "flip" | "offset")[] : ("shift" | "flip" | "offset")[] | Defaults["middlewares"]>;
+        default: unknown extends Defaults["middlewares"] ? ("shift" | "flip" | "offset")[] : ("shift" | "flip" | "offset")[] | Defaults["middlewares"];
     };
     target: unknown extends Defaults["target"] ? PropType<{
         x: number;

package/dist/composables/strategy.d.ts

@@ -8,7 +8,7 @@ export interface ActiveStrategyContext {
 }
 export interface HoverStrategyContext extends ActiveStrategyContext {
 }
-export type ResizeStrategy = (element: Element2D) => 'free' | 'aspectRatio' | 'diagonalAspectRatio';
+export type ResizeStrategy = (element: Element2D) => 'aspectRatio' | 'diagonalAspectRatio' | undefined;
 export type ActiveStrategy = (context: ActiveStrategyContext) => {
     element: Element2D | undefined;
     state: Mce.State | undefined;

package/dist/index.js

@@ -1,6 +1,6 @@
+import { Node as Node$1, Element2D, Timeline, Engine, Camera2D, DrawboardEffect, IN_BROWSER, clamp, assets, TimelineNode, Transform2D, DEG_TO_RAD, render, Animation } from "modern-canvas";
 import { ref, computed, watch, markRaw, reactive, warn, shallowRef, onBeforeUnmount, onMounted, inject, provide, defineComponent, createVNode, mergeProps, createElementVNode, toValue, getCurrentInstance, onScopeDispose, createElementBlock, openBlock, Fragment, renderList, unref, normalizeStyle, normalizeClass, readonly, toRef, useId, onDeactivated, onActivated, useAttrs, createBlock, resolveDynamicComponent, useTemplateRef, renderSlot, Teleport, createCommentVNode, mergeModels, useModel, resolveComponent, withCtx, createTextVNode, toDisplayString, createSlots, normalizeProps, guardReactiveProps, onBeforeMount, withDirectives, vShow, vModelText, nextTick, withModifiers, isRef } from "vue";
 import { useFileDialog, useEventListener, isClient, useResizeObserver as useResizeObserver$1, useLocalStorage, onClickOutside, useMouse, useDebounceFn } from "@vueuse/core";
-import { Node as Node$1, Element2D, Timeline, Engine, Camera2D, DrawboardEffect, IN_BROWSER, clamp, assets, TimelineNode, Transform2D, DEG_TO_RAD, render, Animation } from "modern-canvas";
 import { getObjectValueByPath, setObjectValueByPath, Observable, Reactivable, idGenerator, property, normalizeElement, normalizeTextContent } from "modern-idoc";
 import { saveAs } from "file-saver";
 import { Fonts } from "modern-font";
@@ -900,6 +900,13 @@ const _0_context = defineMixin((editor) => {
   const root = computed(() => doc.value.root);
   const nodes = ref([]);
   const nodeIndexMap = reactive(/* @__PURE__ */ new Map());
+  const selection = ref([]);
+  const elementSelection = computed({
+    get: () => selection.value.filter((v) => v instanceof Element2D),
+    set: (val) => selection.value = val
+  });
+  const textSelection = ref();
+  const hoverElement = ref();
   const drawboardPointer = ref();
   const state = ref();
   const stateContext = ref();
@@ -933,6 +940,10 @@ const _0_context = defineMixin((editor) => {
     root,
     nodes,
     nodeIndexMap,
+    selection,
+    elementSelection,
+    textSelection,
+    hoverElement,
     drawboardDom,
     drawboardAabb,
     state,
@@ -945,7 +956,8 @@ const _0_context = defineMixin((editor) => {
   return () => {
     const {
       on,
-      root: root2
+      root: root2,
+      state: state2
     } = editor;
     function updateNodes(value) {
       let node;
@@ -963,30 +975,10 @@ const _0_context = defineMixin((editor) => {
       nodeIndexMap.set(node.id, nodes.value.length - 1);
     }
     on("setDoc", () => updateNodes());
-  };
-});
-const _0_element = defineMixin((editor) => {
-  const selection = ref([]);
-  const elementSelection = computed({
-    get: () => selection.value.filter((v) => v instanceof Element2D),
-    set: (val) => selection.value = val
-  });
-  const hoverElement = ref();
-  const textSelection = ref();
-  Object.assign(editor, {
-    selection,
-    elementSelection,
-    textSelection,
-    hoverElement
-  });
-  return () => {
-    const {
-      state
-    } = editor;
     watch(selection, (value) => {
       window.$$0 = value[0];
     });
-    watch(state, () => {
+    watch(state2, () => {
       textSelection.value = void 0;
       hoverElement.value = void 0;
     });
@@ -1481,7 +1473,9 @@ function createTextElement(content, style) {
       height: box.height
     },
     text: { content: normalizeTextContent(content) },
-    meta: { inPptIs: "Shape" }
+    meta: {
+      inPptIs: "Shape"
+    }
   };
 }
 async function createImageElement(image) {
@@ -1491,7 +1485,10 @@ async function createImageElement(image) {
       ...await getImageSizeFromUrl(image)
     },
     foreground: { image },
-    meta: { inPptIs: "Picture" }
+    meta: {
+      inPptIs: "Picture",
+      lockAspectRatio: true
+    }
   };
 }
 function isClickInsideElement(event, targetDiv) {
@@ -2261,64 +2258,41 @@ const _3_view = defineMixin((editor) => {
 });
 const _4_0_text = defineMixin((editor) => {
   const {
-    config
+    config,
+    isElement
   } = editor;
   function textFontSizeToFit(element) {
     function _handle(element2) {
-      const chars = element2.text.base.characters;
-      let pos = 0;
-      let char;
-      chars.forEach((_char) => {
-        const _pos = _char.lineBox.left + _char.lineBox.width;
-        if (_pos > pos) {
-          char = _char;
-          pos = _pos;
-        }
-      });
-      const style = {};
-      const content = chars.filter((_char) => _char.lineBox.top === char?.lineBox.top).map((char2) => {
-        Object.assign(
-          style,
-          { ...char2.parent.style },
-          { ...char2.parent.parent.style }
-        );
-        return char2.content;
-      }).join("");
+      if (!element2.text.isValid()) {
+        return;
+      }
       const { boundingBox } = measureText({
         style: {
           ...element2.style.toJSON(),
           width: "auto"
         },
-        content: [
-          {
-            fragments: [
-              { ...style, content }
-            ]
-          }
-        ]
+        content: element2.text.content
       });
       const fontSize = (element2.style.fontSize || 12) / 2;
       const scale = (element2.style.width ?? 0) / (boundingBox.width + fontSize);
-      function _scaleStyle(style2) {
-        if (style2.fontSize)
-          style2.fontSize = style2.fontSize * scale;
-        if (style2.letterSpacing)
-          style2.letterSpacing = style2.letterSpacing * scale;
+      function _scaleStyle(style) {
+        if (style.fontSize)
+          style.fontSize = style.fontSize * scale;
+        if (style.letterSpacing)
+          style.letterSpacing = style.letterSpacing * scale;
       }
       _scaleStyle(element2.style);
-      if (element2.text?.isValid?.() && Array.isArray(element2.text?.content)) {
-        element2.text.content.forEach((p) => {
-          _scaleStyle(p);
-          p.fragments.forEach((f) => {
-            _scaleStyle(f);
-          });
+      element2.text.content.forEach((p) => {
+        _scaleStyle(p);
+        p.fragments.forEach((f) => {
+          _scaleStyle(f);
         });
-      }
+      });
       element2.requestRedraw();
     }
     _handle(element);
     element.findOne((descendant) => {
-      if (descendant instanceof Element2D) {
+      if (isElement(descendant)) {
         _handle(descendant);
       }
       return false;
@@ -2333,7 +2307,7 @@ const _4_0_text = defineMixin((editor) => {
       return;
     }
     function _handle(element2) {
-      if (!element2.text?.isValid?.() || typeof element2.text?.content !== "object") {
+      if (!element2.text.isValid()) {
         return;
       }
       const style = element2.style.toJSON();
@@ -2357,7 +2331,7 @@ const _4_0_text = defineMixin((editor) => {
     }
     _handle(element);
     element.findOne((descendant) => {
-      if (descendant instanceof Element2D) {
+      if (isElement(descendant)) {
         _handle(descendant);
       }
       return false;
@@ -2597,23 +2571,6 @@ const _4_2_element = defineMixin((editor) => {
     options.textToFit && textToFit(element);
     options.textFontSizeToFit && textFontSizeToFit(element);
   }
-  function pointerActivateElement(element, event) {
-    if (element && (event?.ctrlKey || event?.shiftKey || event?.metaKey)) {
-      let elements;
-      if (selection.value.length === 1) {
-        elements = [selection.value[0], element];
-      } else {
-        if (selection.value.findIndex((v) => v.equal(element)) > -1) {
-          elements = selection.value.filter((v) => v.equal(element));
-        } else {
-          elements = [...selection.value, element];
-        }
-      }
-      selection.value = elements;
-    } else {
-      selection.value = element ? [element] : [];
-    }
-  }
   function selectArea(areaInDrawboard) {
     const selected = root.value?.children.flatMap((node) => {
       if (isFrame(node)) {
@@ -2632,7 +2589,6 @@ const _4_2_element = defineMixin((editor) => {
     updateElement,
     getElement,
     resizeElement,
-    pointerActivateElement,
     selectArea
   });
 });
@@ -3119,7 +3075,6 @@ const mixins = [
   _0_config,
   _0_config_base,
   _0_context,
-  _0_element,
   _0_font,
   _0_helper,
   _0_locale,
@@ -5184,26 +5139,49 @@ const _layerPosition = definePlugin((editor) => {
   } = editor;
   function align(direction) {
     elementSelection.value.forEach((el) => {
-      const box = el.parent && isElement(el.parent) ? getAabb(el.parent) : rootAabb.value;
-      switch (direction) {
-        case "left":
-          el.style.left = 0;
-          break;
-        case "horizontal-center":
-          el.style.left = (box.width - el.style.width) / 2;
-          break;
-        case "right":
-          el.style.left = box.width - el.style.width;
-          break;
-        case "top":
-          el.style.top = 0;
-          break;
-        case "vertical-center":
-          el.style.top = (box.height - el.style.height) / 2;
-          break;
-        case "bottom":
-          el.style.top = box.height - el.style.height;
-          break;
+      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;
+        }
       }
     });
   }
@@ -6212,14 +6190,10 @@ const makeMceStrategyProps = propsFactory({
   hoverStrategy: Function
 }, "makeMceStrategyProps");
 const defaultResizeStrategy = (element) => {
-  switch (element.meta?.inPptIs) {
-    case "Picture":
-      return "diagonalAspectRatio";
-  }
-  if (element.foreground.isValid()) {
-    return "diagonalAspectRatio";
+  if (element.meta.lockAspectRatio) {
+    return "aspectRatio";
   }
-  return "free";
+  return void 0;
 };
 const defaultActiveStrategy = (context) => {
   const { element, oldElement, isExcluded } = context;
@@ -8133,11 +8107,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   props: {
     tag: { default: "div" },
     modelValue: {},
-    moveable: { type: Boolean, default: true },
+    movable: { type: Boolean, default: true },
     rotatable: { type: Boolean, default: true },
     resizable: { type: Boolean, default: true },
     threshold: { default: 0 },
-    resizeStrategy: { default: "free" },
+    resizeStrategy: {},
     handleStrategy: { default: "default" },
     handleShape: {},
     color: { default: "black" },
@@ -8276,39 +8250,34 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       event?.preventDefault();
       event?.stopPropagation();
       const { left = 0, top = 0, width = 0, height = 0, rotate = 0 } = model.value;
-      const aspectRatio = width && height ? width / height : 0;
-      const anchor = index === void 0 ? { type: "move", x: 0, y: 0, width: 0, height: 0 } : computedHandles.value[index];
-      activeHandle.value = anchor.type;
-      const isMove = anchor.type === "move";
-      const isRotate = anchor.type.startsWith("rotate");
-      const isHorizontal = anchor.type === "resize-left" || anchor.type === "resize-right";
-      const isHorizontalVertical = anchor.type.split("-").length === 2;
+      let aspectRatio = 0;
+      if (width && height) {
+        aspectRatio = width / height;
+      }
+      const handle = index === void 0 ? { type: "move", x: 0, y: 0, width: 0, height: 0 } : computedHandles.value[index];
+      activeHandle.value = handle.type;
+      const isMove = handle.type === "move";
+      const isRotate = handle.type.startsWith("rotate");
+      const isHorizontal = handle.type === "resize-left" || handle.type === "resize-right";
+      const isHorizontalVertical = handle.type.split("-").length === 2;
       const centerPoint = {
         x: left + width / 2,
         y: top + height / 2
       };
-      const startingPointBefore = {
-        x: left,
-        y: top
+      const startPoint = {
+        x: left + handle.x + handle.width / 2,
+        y: top + handle.y + handle.height / 2
       };
-      if (!isMove) {
-        startingPointBefore.x += anchor.x + anchor.width / 2;
-        startingPointBefore.y += anchor.y + anchor.height / 2;
-      }
-      const startingPoint = calcRotation(
-        startingPointBefore,
-        centerPoint,
-        isMove ? 0 : rotate
-      );
-      const symmetricPoint = {
-        x: centerPoint.x * 2 - startingPoint.x,
-        y: centerPoint.y * 2 - startingPoint.y
+      const rotatedStartPoint = rotatePoint(startPoint, centerPoint, rotate);
+      const rotatedSymmetricPoint = {
+        x: centerPoint.x * 2 - rotatedStartPoint.x,
+        y: centerPoint.y * 2 - rotatedStartPoint.y
       };
-      const rotationBefore = Math.atan2(
-        startingPoint.y - centerPoint.y,
-        startingPoint.x - centerPoint.x
+      const startAngle = Math.atan2(
+        rotatedStartPoint.y - centerPoint.y,
+        rotatedStartPoint.x - centerPoint.x
       ) / (Math.PI / 180);
-      let client = event ? { x: event.clientX, y: event.clientY } : void 0;
+      let startClientPoint = event ? { x: event.clientX, y: event.clientY } : void 0;
       function startTransform() {
         transforming.value = true;
         emit("start", model.value);
@@ -8318,81 +8287,67 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       }
       function onMove(event2) {
         const updated = {};
-        if (!client) {
-          client = { x: event2.clientX, y: event2.clientY };
+        if (!startClientPoint) {
+          startClientPoint = { x: event2.clientX, y: event2.clientY };
         }
-        const clientOffset = {
-          x: event2.clientX - client.x,
-          y: event2.clientY - client.y
+        const offset2 = {
+          x: event2.clientX - startClientPoint.x,
+          y: event2.clientY - startClientPoint.y
         };
         if (!transforming.value) {
-          if (Math.abs(clientOffset.x) < props.threshold && Math.abs(clientOffset.y) < props.threshold) {
+          if (Math.abs(offset2.x) < props.threshold && Math.abs(offset2.y) < props.threshold) {
             return;
           }
           startTransform();
         }
-        const cursorPoint = {
-          x: startingPoint.x + clientOffset.x,
-          y: startingPoint.y + clientOffset.y
+        const rotatedCurrentPoint = {
+          x: rotatedStartPoint.x + offset2.x,
+          y: rotatedStartPoint.y + offset2.y
         };
         if (isMove) {
-          if (!props.moveable) {
-            return;
+          if (props.movable) {
+            updated.left = startPoint.x + offset2.x;
+            updated.top = startPoint.y + offset2.y;
           }
-          updated.left = cursorPoint.x;
-          updated.top = cursorPoint.y;
         } else if (isRotate) {
-          const rotationAfter = Math.atan2(
-            cursorPoint.y - centerPoint.y,
-            cursorPoint.x - centerPoint.x
-          ) / (Math.PI / 180);
-          updated.rotate = (rotate + rotationAfter - rotationBefore + 360) % 360;
+          if (props.rotatable) {
+            const endAngle = Math.atan2(
+              rotatedCurrentPoint.y - centerPoint.y,
+              rotatedCurrentPoint.x - centerPoint.x
+            ) / (Math.PI / 180);
+            updated.rotate = (rotate + endAngle - startAngle + 360) % 360;
+          }
         } else if (isHorizontalVertical) {
-          const rotationBefore2 = calcRotation(cursorPoint, startingPoint, -rotate);
-          const rotationAfter = calcRotation(
-            isHorizontal ? { x: rotationBefore2.x, y: startingPoint.y } : { x: startingPoint.x, y: rotationBefore2.y },
-            startingPoint,
-            rotate
-          );
-          const newCenterPoint = {
-            x: rotationAfter.x - (rotationAfter.x - symmetricPoint.x) / 2,
-            y: rotationAfter.y + (symmetricPoint.y - rotationAfter.y) / 2
-          };
-          const hypotenuse = calcHypotenuse(rotationAfter, symmetricPoint);
+          const currentPoint = rotatePoint(rotatedCurrentPoint, centerPoint, -rotate);
+          const newCurrentPoint = isHorizontal ? { x: currentPoint.x, y: startPoint.y } : { x: startPoint.x, y: currentPoint.y };
+          const newRotatedCurrentPoint = rotatePoint(newCurrentPoint, centerPoint, rotate);
+          const hypotenuse = Math.abs(getDistance(newRotatedCurrentPoint, rotatedSymmetricPoint));
           if (isHorizontal) {
             updated.width = hypotenuse;
-            if (aspectRatio && props.resizeStrategy === "aspectRatio") {
+            if (props.resizeStrategy === "aspectRatio" && aspectRatio) {
               updated.height = hypotenuse / aspectRatio;
+            } else {
+              updated.height = height;
             }
           } else {
             updated.height = hypotenuse;
-            if (aspectRatio && props.resizeStrategy === "aspectRatio") {
+            if (props.resizeStrategy === "aspectRatio" && aspectRatio) {
               updated.width = hypotenuse * aspectRatio;
-            }
-          }
-          updated.left = newCenterPoint.x - (isHorizontal ? hypotenuse : width) / 2;
-          updated.top = newCenterPoint.y - (isHorizontal ? height : hypotenuse) / 2;
-        } else {
-          if (aspectRatio && (props.resizeStrategy === "aspectRatio" || props.resizeStrategy === "diagonalAspectRatio")) {
-            let flag = 1;
-            switch (anchor.type) {
-              case "resize-top-right":
-              case "resize-bottom-left":
-                flag = -1;
-                break;
-            }
-            if (clientOffset.x > clientOffset.y) {
-              cursorPoint.x = startingPoint.x + clientOffset.x;
-              cursorPoint.y = startingPoint.y + flag * clientOffset.x / aspectRatio;
             } else {
-              cursorPoint.x = startingPoint.x + flag * clientOffset.y * aspectRatio;
-              cursorPoint.y = startingPoint.y + clientOffset.y;
+              updated.width = width;
             }
           }
-          const newCenterPoint = calcCenter(cursorPoint, symmetricPoint);
+          const newCenterPoint = {
+            x: newRotatedCurrentPoint.x - (newRotatedCurrentPoint.x - rotatedSymmetricPoint.x) / 2,
+            y: newRotatedCurrentPoint.y + (rotatedSymmetricPoint.y - newRotatedCurrentPoint.y) / 2
+          };
+          updated.left = newCenterPoint.x - updated.width / 2;
+          updated.top = newCenterPoint.y - updated.height / 2;
+        } else {
+          const newCenterPoint = getMidpoint(rotatedCurrentPoint, rotatedSymmetricPoint);
           const points = [
-            calcRotation(cursorPoint, newCenterPoint, -rotate),
-            calcRotation(symmetricPoint, newCenterPoint, -rotate)
+            rotatePoint(rotatedCurrentPoint, newCenterPoint, -rotate),
+            rotatePoint(rotatedSymmetricPoint, newCenterPoint, -rotate)
           ];
           const [minX, maxX] = points[0].x > points[1].x ? [points[1].x, points[0].x] : [points[0].x, points[1].x];
           const [minY, maxY] = points[0].y > points[1].y ? [points[1].y, points[0].y] : [points[0].y, points[1].y];
@@ -8400,6 +8355,13 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           updated.height = maxY - minY;
           updated.left = minX;
           updated.top = minY;
+          if ((props.resizeStrategy === "aspectRatio" || props.resizeStrategy === "diagonalAspectRatio") && aspectRatio) {
+            if (updated.width / updated.height > aspectRatio) {
+              updated.width = updated.height * aspectRatio;
+            } else {
+              updated.height = updated.width / aspectRatio;
+            }
+          }
         }
         if ("width" in updated && updated.width <= 0 || "height" in updated && updated.height <= 0) {
           return;
@@ -8433,7 +8395,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         return "move";
       return `url("data:image/svg+xml,${cursors[type](model.value.rotate ?? 0)}") 16 16, pointer`;
     }
-    function calcRotation(point, origin, angle) {
+    function rotatePoint(point, origin, angle) {
       const radian = angle * Math.PI / 180;
       const cos = Math.cos(radian);
       const sin = Math.sin(radian);
@@ -8442,14 +8404,16 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         y: (point.x - origin.x) * sin + (point.y - origin.y) * cos + origin.y
       };
     }
-    function calcCenter(point1, point2) {
+    function getMidpoint(point1, point2) {
       return {
         x: (point2.x + point1.x) / 2,
         y: (point2.y + point1.y) / 2
       };
     }
-    function calcHypotenuse(point1, point2) {
-      return Math.sqrt((point1.x - point2.x) ** 2 + (point1.y - point2.y) ** 2);
+    function getDistance(point1, point2) {
+      const dx = point2.x - point1.x;
+      const dy = point2.y - point1.y;
+      return (dx + dy >= 0 ? 1 : -1) * Math.sqrt(dx * dx + dy * dy);
     }
     onMounted(async () => {
       const vm = getCurrentInstance();
@@ -8514,7 +8478,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             }, null, 4),
             createElementVNode("g", _hoisted_2$5, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value.filter((v) => {
-                return !(!__props.resizable && v.type.startsWith("resize") || !__props.rotatable && v.type.startsWith("rotate") || !__props.moveable && v.type === "move");
+                return !(!__props.resizable && v.type.startsWith("resize") || !__props.rotatable && v.type.startsWith("rotate") || !__props.movable && v.type === "move");
               }), (handle, index) => {
                 return openBlock(), createElementBlock(Fragment, { key: index }, [
                   (__props.handleStrategy === "point" ? handle.type.startsWith("resize") : handle.type === "resize-top-left" || handle.type === "resize-top-right" || handle.type === "resize-bottom-left" || handle.type === "resize-bottom-right") ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
@@ -8641,8 +8605,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         const offsetBox = {
           left: Math.round((val.left - oldBox.left) / zoom.x),
           top: Math.round((val.top - oldBox.top) / zoom.y),
-          width: Math.round((val.width - oldBox.width) / zoom.x),
-          height: Math.round((val.height - oldBox.height) / zoom.y),
+          width: Math.round(Math.max(1, val.width / zoom.x) - oldBox.width / zoom.x),
+          height: Math.round(Math.max(1, val.height / zoom.y) - oldBox.height / zoom.y),
           rotate: Math.round((val.rotate ?? 0) - (oldBox.rotate ?? 0))
         };
         const handle = transformable.value?.activeHandle ?? "move";
@@ -8721,7 +8685,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           modelValue: selectionObb.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectionObb.value = $event),
           visibility: unref(state) !== "selecting" ? "auto" : "none",
-          moveable: unref(elementSelection)[0] && !unref(isLock)(unref(elementSelection)[0]),
+          movable: unref(elementSelection)[0] && !unref(isLock)(unref(elementSelection)[0]),
           "resize-strategy": props.resizeStrategy,
           "handle-shape": unref(config).handleShape,
           class: "mce-selection-obb",
@@ -8737,7 +8701,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["modelValue", "visibility", "moveable", "resize-strategy", "handle-shape", "border-style"])) : createCommentVNode("", true),
+        ]), 1032, ["modelValue", "visibility", "movable", "resize-strategy", "handle-shape", "border-style"])) : createCommentVNode("", true),
         selectionObb.value.width && selectionObb.value.height && _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
           key: 2,
           style: normalizeStyle([{ "position": "absolute" }, unref(boundingBoxToStyle)(selectionObb.value)])
@@ -9489,6 +9453,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const selector = useTemplateRef("selectorTpl");
     const textEditor = useTemplateRef("textEditorTpl");
     const selectedArea = ref({ left: 0, top: 0, width: 0, height: 0 });
+    const resizeStrategy = computed(() => {
+      const first = elementSelection.value[0];
+      if (first) {
+        if (first.text.isValid()) {
+          return "diagonalAspectRatio";
+        }
+        return props.resizeStrategy(first);
+      }
+      return void 0;
+    });
     provideOverlay({
       attach: computed(() => overlayContainer.value)
     });
@@ -9539,28 +9513,28 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       hoverElement.value = hovered;
       setCursor(cursor);
     }
-    function onPointerdown(event) {
-      if (event.srcElement !== drawboardDom.value && event.srcElement.dataset?.pointerdown_to_drawboard === void 0 || camera.value.spaceKey || ![0, 2].includes(event.button)) {
+    function onPointerdown(downEvent) {
+      if (downEvent.srcElement !== drawboardDom.value && downEvent.srcElement.dataset?.pointerdown_to_drawboard === void 0 || camera.value.spaceKey || ![0, 2].includes(downEvent.button)) {
         return;
       }
       const oldElement = elementSelection.value[0];
-      const element = event.target;
-      const start = { x: event.clientX, y: event.clientY };
+      const element = downEvent.target;
+      const start = { x: downEvent.clientX, y: downEvent.clientY };
       let current = { ...start };
       let dragging = false;
       let isUp = false;
       let selected = [];
       let ctxState;
-      const inSelected = isPointInsideAabb({
+      const inSelection = isPointInsideAabb({
         x: start.x + -drawboardAabb.value.left,
         y: start.y + -drawboardAabb.value.top
       }, getAabbInDrawboard(elementSelection.value));
-      if (event.button === 2) {
-        if (!inSelected) {
+      if (downEvent.button === 2) {
+        if (!inSelection) {
           const result = props.activeStrategy({
             element,
             oldElement,
-            event,
+            event: downEvent,
             isExcluded
           });
           if (result && !(result instanceof Element2D)) {
@@ -9572,11 +9546,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         }
         return;
       }
-      function onDrag(event2) {
+      function onDrag(event) {
         const result = props.activeStrategy({
           element,
           oldElement,
-          event: event2,
+          event,
           isExcluded
         });
         if (result && !(result instanceof Element2D)) {
@@ -9602,7 +9576,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         const result = props.activeStrategy({
           element,
           oldElement,
-          event,
+          event: downEvent,
           isExcluded: () => false
         });
         let _element;
@@ -9612,7 +9586,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         } else {
           _element = result;
         }
-        if (_element && (event?.ctrlKey || event?.shiftKey || event?.metaKey)) {
+        if (_element && (downEvent?.ctrlKey || downEvent?.shiftKey || downEvent?.metaKey)) {
           if (elementSelection.value.findIndex((v) => v.equal(_element)) > -1) {
             selected = elementSelection.value.filter((v) => !v.equal(_element));
           } else {
@@ -9625,29 +9599,29 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       function canStartDrag() {
         return !dragging && (Math.abs(current.x - start.x) >= 3 || Math.abs(current.y - start.y) >= 3);
       }
-      function onEngineMove(event2) {
-        if (inSelected) {
+      function onEngineMove(moveEvent) {
+        if (inSelection) {
           if (canStartDrag()) {
             dragging = true;
-            exec("startTransform");
+            exec("startTransform", downEvent);
           }
         } else {
           if (element && !isFrame(element)) {
             if (canStartDrag()) {
               dragging = true;
-              onDrag(event2);
+              onDrag(moveEvent);
               nextTick(() => {
                 if (!isUp) {
-                  exec("startTransform");
+                  exec("startTransform", downEvent);
                 }
               });
             }
           }
         }
       }
-      function onMove(event2) {
-        current = { x: event2.clientX, y: event2.clientY };
-        if (!inSelected) {
+      function onMove(moveEvent) {
+        current = { x: moveEvent.clientX, y: moveEvent.clientY };
+        if (!inSelection) {
           if (!element || isFrame(element)) {
             onSelectArea();
           }
@@ -9672,7 +9646,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               }
             }
           }
-          onHover(event);
+          onHover(downEvent);
         }
         renderEngine.value.off("pointermove", onEngineMove);
         document.removeEventListener("pointermove", onMove);
@@ -9733,7 +9707,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 createVNode(_sfc_main$g, {
                   ref: "selectorTpl",
                   "selected-area": selectedArea.value,
-                  "resize-strategy": unref(elementSelection)[0] ? props.resizeStrategy(unref(elementSelection)[0]) : void 0
+                  "resize-strategy": resizeStrategy.value
                 }, {
                   transformable: withCtx(({ box }) => [
                     renderSlot(_ctx.$slots, "transformer", { box })

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

@@ -1,7 +1,7 @@
 import type { Cursor, Node, Vector2Data } from 'modern-canvas';
 import type { ComputedRef, Ref } from 'vue';
 import type { AxisAlignedBoundingBox } from '../types';
-import { Camera2D, DrawboardEffect, Engine, Timeline } from 'modern-canvas';
+import { Camera2D, DrawboardEffect, Element2D, Engine, Timeline } from 'modern-canvas';
 import { Fonts } from 'modern-font';
 import { Doc } from '../models';
 declare global {
@@ -20,6 +20,10 @@ declare global {
             root: ComputedRef<Node>;
             nodes: Ref<Node[]>;
             nodeIndexMap: Map<string, number>;
+            selection: Ref<Node[]>;
+            elementSelection: Ref<Element2D[]>;
+            textSelection: Ref<any[] | undefined>;
+            hoverElement: Ref<Element2D | undefined>;
             state: Ref<State | undefined>;
             setState: (state: State, context?: StateContext) => void;
             stateContext: Ref<StateContext | undefined>;

package/dist/mixins/4.0.text.d.ts

@@ -1,4 +1,4 @@
-import { Element2D } from 'modern-canvas';
+import type { Element2D } from 'modern-canvas';
 declare global {
     namespace Mce {
         interface Editor {

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

@@ -26,7 +26,6 @@ declare global {
             updateElement: (id: string, properties: Record<string, any>) => void;
             getElement: (id: string) => Element2D | undefined;
             resizeElement: (element: Element2D, width: number, height: number, options?: ResizeElementOptions) => void;
-            pointerActivateElement: (element: Element2D | undefined, event?: MouseEvent | PointerEvent) => void;
             selectArea: (areaInDrawboard: AxisAlignedBoundingBox) => Element2D[];
         }
         interface Events {

package/dist/typed-global.d.ts

@@ -1,3 +1,19 @@
+import 'modern-canvas'
+
+declare module 'modern-canvas' {
+  interface Meta {
+    inPptIs?: 'Pptx' | 'Picture' | 'Shape' | 'GroupShape' | 'Animation'
+    inEditorIs?: 'Doc' | 'Frame' | 'Element' | 'Node'
+    inCanvasIs?: 'Lottie2D' | 'Element2D' | 'Animation'
+    lock?: boolean
+    lockAspectRatio?: boolean
+    movable?: boolean
+    rotatable?: boolean
+    resizable?: boolean
+    transformable?: boolean
+  }
+}
+
 declare global {
   namespace Mce {
     interface Editor {}

package/dist/typed-plugins.d.ts

@@ -6,7 +6,6 @@ import './mixins/0.command'
 import './mixins/0.config'
 import './mixins/0.config/base'
 import './mixins/0.context'
-import './mixins/0.element'
 import './mixins/0.font'
 import './mixins/0.helper'
 import './mixins/0.locale'

package/package.json

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

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

@@ -1,15 +0,0 @@
-import type { Node } from 'modern-canvas';
-import type { Ref } from 'vue';
-import { Element2D } from 'modern-canvas';
-declare global {
-    namespace Mce {
-        interface Editor {
-            selection: Ref<Node[]>;
-            elementSelection: Ref<Element2D[]>;
-            textSelection: Ref<any[] | undefined>;
-            hoverElement: Ref<Element2D | undefined>;
-        }
-    }
-}
-declare const _default: import("..").Mixin;
-export default _default;