mce 0.15.38 → 0.15.39

package/README.md

@@ -1,4 +1,4 @@
-<h1 align="center">mce</h1>
+<h1 align="center">ModernCanvasEditor</h1>
 
 <p align="center">
   <a href="https://unpkg.com/mce">
@@ -18,7 +18,7 @@
   </a>
 </p>
 
-<p align="center">The headless canvas editor framework. only the ESM.</p>
+<p align="center">A headless infinite canvas editor framework built on WebGL rendering, supports exporting to image, video, and PPT. Only the ESM.</p>
 
 ## 📦 Install
 

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

@@ -1,3 +1,18 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare var __VLS_11: {
+    scale: number;
+    ok: () => void;
+    cancel: () => void;
+    setAspectRatio: (ratio: 0 | [number, number]) => void;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,9 +1,16 @@
 import type { TransformValue } from './shared/TransformControls.vue';
-declare var __VLS_14: {}, __VLS_21: {};
+declare var __VLS_8: {
+    scale: number;
+    ok: () => void;
+    cancel: () => void;
+    setAspectRatio: (ratio: 0 | [number, number]) => void;
+}, __VLS_10: {}, __VLS_25: {};
 type __VLS_Slots = {} & {
-    transform?: (props: typeof __VLS_14) => any;
+    'foreground-cropper'?: (props: typeof __VLS_8) => any;
 } & {
-    default?: (props: typeof __VLS_21) => any;
+    default?: (props: typeof __VLS_10) => any;
+} & {
+    transform?: (props: typeof __VLS_25) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {
     transformControls: Readonly<import("vue").ShallowRef<({
@@ -21,7 +28,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             readonly resizeStrategy?: "lockAspectRatio" | "lockAspectRatioDiagonal" | undefined;
             readonly handleStrategy?: "point" | undefined;
             readonly handleShape?: "rect" | "circle" | undefined;
-            readonly handles?: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[] | undefined;
+            readonly handles?: ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[] | undefined;
             readonly scale?: [number, number] | undefined;
             readonly offset?: [number, number] | undefined;
             readonly hideUi?: boolean | undefined;
@@ -61,7 +68,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             resizeStrategy?: "lockAspectRatio" | "lockAspectRatioDiagonal";
             handleStrategy?: "point";
             handleShape?: "rect" | "circle";
-            handles?: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
+            handles?: ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
             scale?: [number, number];
             offset?: [number, number];
             hideUi?: boolean;
@@ -78,7 +85,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             "onUpdate:modelValue"?: ((value: Partial<TransformValue> | undefined) => any) | undefined;
         }>, {
             start: (event?: MouseEvent, index?: number) => boolean;
-            activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined, ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined>;
+            activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined, ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined>;
             transforming: import("vue").Ref<boolean, boolean>;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             move: (args_0: TransformValue, args_1: TransformValue) => any;
@@ -94,7 +101,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             tag: string | any;
             threshold: number;
             handleShape: "rect" | "circle";
-            handles: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
+            handles: ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
         }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -124,7 +131,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         tag: string | any;
         threshold: number;
         handleShape: "rect" | "circle";
-        handles: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
+        handles: ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
     }> & Omit<Readonly<{
         tag?: string | any;
         color?: string;
@@ -137,7 +144,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         resizeStrategy?: "lockAspectRatio" | "lockAspectRatioDiagonal";
         handleStrategy?: "point";
         handleShape?: "rect" | "circle";
-        handles?: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
+        handles?: ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
         scale?: [number, number];
         offset?: [number, number];
         hideUi?: boolean;
@@ -154,7 +161,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         "onUpdate:modelValue"?: ((value: Partial<TransformValue> | undefined) => any) | undefined;
     }>, "transforming" | "start" | "activeHandle" | ("offset" | "scale" | "movable" | "rotatable" | "resizable" | "tag" | "threshold" | "handleShape" | "handles")> & import("vue").ShallowUnwrapRef<{
         start: (event?: MouseEvent, index?: number) => boolean;
-        activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined, ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined>;
+        activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined, ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined>;
         transforming: import("vue").Ref<boolean, boolean>;
     }> & {} & import("vue").ComponentCustomProperties & {} & {
         $slots: {
@@ -199,7 +206,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             readonly resizeStrategy?: "lockAspectRatio" | "lockAspectRatioDiagonal" | undefined;
             readonly handleStrategy?: "point" | undefined;
             readonly handleShape?: "rect" | "circle" | undefined;
-            readonly handles?: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[] | undefined;
+            readonly handles?: ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[] | undefined;
             readonly scale?: [number, number] | undefined;
             readonly offset?: [number, number] | undefined;
             readonly hideUi?: boolean | undefined;
@@ -239,7 +246,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             resizeStrategy?: "lockAspectRatio" | "lockAspectRatioDiagonal";
             handleStrategy?: "point";
             handleShape?: "rect" | "circle";
-            handles?: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
+            handles?: ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
             scale?: [number, number];
             offset?: [number, number];
             hideUi?: boolean;
@@ -256,7 +263,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             "onUpdate:modelValue"?: ((value: Partial<TransformValue> | undefined) => any) | undefined;
         }>, {
             start: (event?: MouseEvent, index?: number) => boolean;
-            activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined, ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined>;
+            activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined, ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined>;
             transforming: import("vue").Ref<boolean, boolean>;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             move: (args_0: TransformValue, args_1: TransformValue) => any;
@@ -272,7 +279,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             tag: string | any;
             threshold: number;
             handleShape: "rect" | "circle";
-            handles: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
+            handles: ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
         }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -302,7 +309,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         tag: string | any;
         threshold: number;
         handleShape: "rect" | "circle";
-        handles: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
+        handles: ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
     }> & Omit<Readonly<{
         tag?: string | any;
         color?: string;
@@ -315,7 +322,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         resizeStrategy?: "lockAspectRatio" | "lockAspectRatioDiagonal";
         handleStrategy?: "point";
         handleShape?: "rect" | "circle";
-        handles?: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
+        handles?: ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
         scale?: [number, number];
         offset?: [number, number];
         hideUi?: boolean;
@@ -332,7 +339,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         "onUpdate:modelValue"?: ((value: Partial<TransformValue> | undefined) => any) | undefined;
     }>, "transforming" | "start" | "activeHandle" | ("offset" | "scale" | "movable" | "rotatable" | "resizable" | "tag" | "threshold" | "handleShape" | "handles")> & import("vue").ShallowUnwrapRef<{
         start: (event?: MouseEvent, index?: number) => boolean;
-        activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined, ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined>;
+        activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined, ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined>;
         transforming: import("vue").Ref<boolean, boolean>;
     }> & {} & import("vue").ComponentCustomProperties & {} & {
         $slots: {

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

@@ -2,14 +2,13 @@ import type { ImageFillCropRect } from 'modern-idoc';
 /**
  * TODO 撤回无法重渲
  */
+type View = Record<'left' | 'top' | 'width' | 'height' | 'scaleX' | 'scaleY', number>;
 type __VLS_Props = {
     image: string;
-    minScale?: number;
-    maxScale?: number;
 };
 declare function ok(): void;
 declare function cancel(): void;
-declare function applySourceTransformToStyle(): void;
+declare function setAspectRatio(ratio: 0 | [number, number]): void;
 type __VLS_ModelProps = {
     /**
      * CropRect (value are based on Source !!!)
@@ -41,14 +40,14 @@ type __VLS_ModelProps = {
      *  |----- 0 -----|
      */
     modelValue?: ImageFillCropRect;
-    'style'?: Record<string, any>;
+    'view': View;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_7: {
     scale: number;
     ok: typeof ok;
     cancel: typeof cancel;
-    applySourceTransformToStyle: typeof applySourceTransformToStyle;
+    setAspectRatio: typeof setAspectRatio;
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
@@ -57,28 +56,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     start: () => any;
     end: () => any;
     "update:modelValue": (value: ImageFillCropRect) => any;
-    "update:transform": (args_0: {
-        left: number;
-        top: number;
-        width: number;
-        height: number;
-    }) => any;
-    "update:style": (value: Record<string, any>) => any;
+    "update:view": (value: View) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onStart?: (() => any) | undefined;
     onEnd?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: ImageFillCropRect) => any) | undefined;
-    "onUpdate:transform"?: ((args_0: {
-        left: number;
-        top: number;
-        width: number;
-        height: number;
-    }) => any) | undefined;
-    "onUpdate:style"?: ((value: Record<string, any>) => any) | undefined;
-}>, {
-    minScale: number;
-    maxScale: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    "onUpdate:view"?: ((value: View) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/index.js

@@ -1,15 +1,15 @@
 import { Node as Node$1, Element2D, Timeline, Engine, Camera2D, DrawboardEffect, Aabb2D, IN_BROWSER, clamp, assets, TimelineNode, Video2D, Transform2D, Obb2D, render, Vector2 as Vector2$1, Lottie2D, customNodes, Animation, IN_MAC_OS } from "modern-canvas";
-import { reactive, computed, watch, markRaw, isReactive, ref, onBeforeMount, onScopeDispose, warn, shallowRef, defineComponent, createElementBlock, createCommentVNode, unref, openBlock, normalizeStyle as normalizeStyle$1, toDisplayString, onMounted, createVNode, useAttrs, createBlock, resolveDynamicComponent, normalizeClass, mergeProps, createElementVNode, inject, toValue, getCurrentInstance, provide, useId, onBeforeUnmount, readonly, toRef, onDeactivated, onActivated, useModel, useTemplateRef, withDirectives, withModifiers, vModelText, vShow, nextTick, Fragment, renderList, renderSlot, mergeModels, resolveComponent, withCtx, Teleport, createTextVNode, createSlots, normalizeProps, guardReactiveProps, h, isRef, effectScope, useSlots } from "vue";
+import { reactive, computed, watch, markRaw, isReactive, ref, onBeforeMount, onScopeDispose, warn, shallowRef, defineComponent, unref, openBlock, createElementBlock, normalizeStyle as normalizeStyle$1, toDisplayString, createCommentVNode, onMounted, createVNode, useAttrs, createBlock, resolveDynamicComponent, normalizeClass, mergeProps, createElementVNode, inject, toValue, getCurrentInstance, provide, useId, onBeforeUnmount, readonly, toRef, onDeactivated, onActivated, useModel, useTemplateRef, withDirectives, withModifiers, vModelText, vShow, nextTick, Fragment, renderList, renderSlot, resolveComponent, withCtx, mergeModels, Teleport, createTextVNode, createSlots, normalizeProps, guardReactiveProps, h, isRef, effectScope, useSlots } from "vue";
 import { useFileDialog, useEventListener, isClient, onClickOutside, useDebounceFn, useImage, useResizeObserver as useResizeObserver$1, useLocalStorage } from "@vueuse/core";
 import { getObjectValueByPath, setObjectValueByPath, Observable, Reactivable, idGenerator, property, normalizeTextContent, isCRLF, textContentToString, normalizeCRLF, isEqualObject } from "modern-idoc";
 import { saveAs } from "file-saver";
 import { Fonts } from "modern-font";
 import * as Y from "yjs";
-import { merge, throttle, cloneDeep } from "lodash-es";
+import { merge, throttle, cloneDeep, isEqual } from "lodash-es";
 import { measureText, Text } from "modern-text";
 import { diffChars } from "diff";
 import { vResizeObserver } from "@vueuse/components";
-import { useFloating, offset, flip, shift, autoUpdate } from "@floating-ui/vue";
+import { useFloating, autoUpdate, offset, flip, shift } from "@floating-ui/vue";
 function defineMixin(cb) {
   return cb;
 }
@@ -1085,7 +1085,9 @@ const en = {
   "loading": "Loading",
   "drawing": "Drawing",
   "exporting": "Exporting",
+  "painting": "Painting",
   "selecting": "Selecting",
+  "cropping": "Cropping",
   "selectObject": "Select object",
   "commitChanges": "Commit changes",
   "extend": "Extend",
@@ -1137,6 +1139,7 @@ const en = {
   "paste": "Paste",
   "duplicate": "Duplicate",
   "delete": "Delete",
+  "formatPaint": "Format paint",
   "selectAll": "Select all",
   "selectInverse": "Deselect all",
   "selectNone": "Select none",
@@ -1201,7 +1204,9 @@ const zhHans = {
   "loading": "加载中...",
   "drawing": "绘制中...",
   "exporting": "导出中...",
+  "painting": "格式刷中...",
   "selecting": "选择中...",
+  "cropping": "裁剪中...",
   "selectObject": "选择对象",
   "commitChanges": "提交修改",
   "extend": "扩展",
@@ -1253,6 +1258,7 @@ const zhHans = {
   "paste": "粘贴",
   "duplicate": "创建副本",
   "delete": "删除",
+  "formatPaint": "格式刷",
   "selectAll": "选择全部",
   "selectInverse": "反选全部",
   "selectNone": "取消选择",
@@ -2011,7 +2017,7 @@ const _2_box = defineMixin((editor) => {
     let flag = false;
     element.children.forEach((child) => {
       if (isElement(child)) {
-        const { min: _min, max: _max } = child.getAabb().toMinmax();
+        const { min: _min, max: _max } = child.aabb.toMinmax();
         min.x = Math.min(min.x, _min.x);
         min.y = Math.min(min.y, _min.y);
         max.x = Math.max(max.x, _max.x);
@@ -2029,7 +2035,7 @@ const _2_box = defineMixin((editor) => {
       const aabbs = {};
       element.children.forEach((child, index) => {
         if (isElement(child)) {
-          aabbs[index] = child.getGlobalAabb();
+          aabbs[index] = child.globalAabb;
         }
       });
       element.style.left += box.left;
@@ -2132,7 +2138,7 @@ const _2_box = defineMixin((editor) => {
     } else if (isElement(node)) {
       const style = node.style;
       noop([style.left, style.top, style.width, style.height, style.rotate]);
-      aabb = node.getGlobalAabb();
+      aabb = node.globalAabb;
     } else {
       aabb = new Aabb2D();
     }
@@ -2485,11 +2491,6 @@ function parseHTML(html) {
 }
 const SUPPORTS_POINTER_EVENTS = "PointerEvent" in globalThis;
 class TextEditor extends HTMLElement {
-  _prevSelection;
-  _composition = false;
-  get composition() {
-    return this._composition;
-  }
   static _defined = false;
   static register() {
     if (!this._defined) {
@@ -2899,25 +2900,19 @@ class TextEditor extends HTMLElement {
     return -1;
   }
   _updateSelectionByDom() {
-    if (this._composition) {
-      this.selection = this._prevSelection;
-    } else {
-      const { selectionStart, selectionEnd } = this._textarea;
-      let count2 = 0;
-      const _selection2 = [-1, -1];
-      this._chars.forEach((char, index) => {
-        if (count2 <= selectionStart) {
-          _selection2[0] = index;
-        }
-        if (count2 <= selectionEnd) {
-          _selection2[1] = index;
-        }
-        count2 += char.content.length;
-      });
-      const oldSelection = this.selection;
-      this.selection = _selection2;
-      this._prevSelection = oldSelection;
-    }
+    const { selectionStart, selectionEnd } = this._textarea;
+    let count2 = 0;
+    const _selection2 = [-1, -1];
+    this._chars.forEach((char, index) => {
+      if (count2 <= selectionStart) {
+        _selection2[0] = index;
+      }
+      if (count2 <= selectionEnd) {
+        _selection2[1] = index;
+      }
+      count2 += char.content.length;
+    });
+    this.selection = _selection2;
   }
   _updateDomSelection() {
     let start = 0;
@@ -2953,8 +2948,6 @@ class TextEditor extends HTMLElement {
     this._renderCursor();
   }
   _bindEventListeners() {
-    this._textarea.addEventListener("compositionstart", () => this._composition = true);
-    this._textarea.addEventListener("compositionend", () => this._composition = false);
     this._textarea.addEventListener("keydown", this._onKeydown.bind(this));
     this._textarea.addEventListener("input", this._onInput.bind(this));
     if (SUPPORTS_POINTER_EVENTS) {
@@ -2962,10 +2955,8 @@ class TextEditor extends HTMLElement {
     } else {
       this._textarea.addEventListener("mousedown", this.pointerDown.bind(this));
     }
-    ["keyup", "mouseup", "input", "paste", "cut"].forEach((key) => {
-      this._textarea.addEventListener(key, () => {
-        this._updateSelectionByDom();
-      });
+    ["selectstart", "selectionchange"].forEach((key) => {
+      this._textarea.addEventListener(key, () => this._updateSelectionByDom());
     });
   }
   pointerDown(e) {
@@ -4128,7 +4119,7 @@ const _arrange = definePlugin((editor) => {
     if (len === 1) {
       const parent = elementSelection.value[0]?.parent;
       if (parent && isElement(parent)) {
-        targetAabb = parent.getGlobalAabb();
+        targetAabb = parent.globalAabb;
       }
     } else {
       targetAabb = getAabb(elementSelection.value);
@@ -4137,7 +4128,7 @@ const _arrange = definePlugin((editor) => {
       return;
     }
     elementSelection.value.forEach((el) => {
-      const parentAabb = el.getParent()?.getGlobalAabb?.() ?? new Aabb2D();
+      const parentAabb = el.getParent()?.globalAabb ?? new Aabb2D();
       const hw = el.size.x / 2;
       const hh = el.size.y / 2;
       const cos = Math.cos(el.rotation);
@@ -4174,7 +4165,7 @@ const _arrange = definePlugin((editor) => {
     const items = els.map((el) => {
       return {
         el,
-        aabb: el.getGlobalAabb()
+        aabb: el.globalAabb
       };
     });
     const count2 = items.length;
@@ -4193,7 +4184,7 @@ const _arrange = definePlugin((editor) => {
           const item = sorted[i];
           current += gapSize;
           let top = current;
-          const parentAabb = item.el.getParent()?.getGlobalAabb?.();
+          const parentAabb = item.el.getParent()?.globalAabb;
           if (parentAabb) {
             top = top - parentAabb.top;
           }
@@ -4216,7 +4207,7 @@ const _arrange = definePlugin((editor) => {
           const item = sorted[i];
           current += gapSize;
           let left = current;
-          const parentAabb = item.el.getParent()?.getGlobalAabb?.();
+          const parentAabb = item.el.getParent()?.globalAabb;
           if (parentAabb) {
             left = left - parentAabb.left;
           }
@@ -4279,7 +4270,7 @@ const _autoNest = definePlugin((editor) => {
   function nestIntoFrame(el, options) {
     const pointer = options?.pointer;
     const frame1 = el.findAncestor((node) => isTopFrame(node));
-    const aabb1 = el.getGlobalAabb();
+    const aabb1 = el.globalAabb;
     const area1 = aabb1.getArea();
     let flag = true;
     for (let i = 0, len = frames.value.length; i < len; i++) {
@@ -4287,7 +4278,7 @@ const _autoNest = definePlugin((editor) => {
       if (options?.excluded.has(frame2.instanceId) || frame2.equal(el)) {
         continue;
       }
-      const aabb2 = frame2.getGlobalAabb();
+      const aabb2 = frame2.globalAabb;
       if (pointer ? aabb2.contains(pointer) : aabb1 && aabb1.getIntersectionRect(aabb2).getArea() > area1 * 0.5) {
         if (!frame2.equal(frame1)) {
           let index = frame2.children.length;
@@ -4325,7 +4316,7 @@ const _autoNest = definePlugin((editor) => {
       selectionTransformStart: ({ handle, startEvent, elements }) => {
         if (handle === "move" && !startEvent?.__FROM__) {
           const pointer = getGlobalPointer();
-          const startFrame = frames.value.find((frame) => frame.getGlobalAabb().contains(pointer));
+          const startFrame = frames.value.find((frame) => frame.globalAabb.contains(pointer));
           const idSet = /* @__PURE__ */ new Set();
           elements.forEach((el) => {
             const frame = isTopFrame(el) ? el : el.findAncestor(isTopFrame);
@@ -4703,6 +4694,68 @@ const _edit = definePlugin((editor, options) => {
     }
   };
 });
+const _formatPaint = definePlugin((editor) => {
+  const {
+    elementSelection,
+    getTextFill,
+    getTextStyle,
+    exec,
+    textToFit,
+    state
+  } = editor;
+  let source;
+  function activateFormatPaint() {
+    if (!elementSelection.value?.[0]?.text?.textContent) {
+      return;
+    }
+    const text = elementSelection.value[0].text;
+    const fill = getTextFill();
+    const excludes = ["left", "top", "width", "height"];
+    const fields = Object.keys(text.style ?? {}).filter((key) => !excludes.includes(key));
+    const style = fields.reduce((acc, field) => ({ ...acc, [field]: getTextStyle(field) }), {});
+    source = {
+      ...text,
+      fill,
+      style
+    };
+    exec("setState", "painting");
+    elementSelection.value = [];
+  }
+  function applyFormatPaint(targets = elementSelection.value) {
+    if (!source)
+      return;
+    targets.forEach((target) => {
+      if (target.text?.textContent) {
+        target.text = {
+          ...source,
+          content: [
+            {
+              fragments: [
+                { content: target.text.textContent }
+              ]
+            }
+          ]
+        };
+        textToFit(target);
+      }
+    });
+  }
+  function exitFormatPaint() {
+    source = void 0;
+    state.value === "painting" && exec("setState", void 0);
+  }
+  return {
+    name: "mce:formatPaint",
+    commands: [
+      { command: "formatPaint", handle: activateFormatPaint },
+      { command: "applyFormatPaint", handle: applyFormatPaint },
+      { command: "exitFormatPaint", handle: exitFormatPaint }
+    ],
+    hotkeys: [
+      { command: "formatPaint", key: "CmdOrCtrl+F", when: () => elementSelection.value[0]?.text }
+    ]
+  };
+});
 function makeIconProps() {
   return {
     icon: {
@@ -6842,6 +6895,7 @@ const _menu = definePlugin((editor, options) => {
     canUndo,
     canRedo,
     selection,
+    elementSelection,
     textSelection,
     config,
     exporters,
@@ -6884,7 +6938,8 @@ const _menu = definePlugin((editor, options) => {
     { key: "cut", disabled: !hasSelected.value },
     { key: "paste" },
     { key: "duplicate", disabled: !hasSelected.value },
-    { key: "delete", disabled: !hasSelected.value }
+    { key: "delete", disabled: !hasSelected.value },
+    { key: "formatPaint", disabled: !elementSelection.value[0]?.text?.textContent }
   ].filter(Boolean));
   const selectMenu = computed(() => ({
     key: "select",
@@ -11371,7 +11426,7 @@ const _pen = definePlugin((editor) => {
           }, {
             position: start
           });
-          const parentAabb = el2.getParent()?.getGlobalAabb?.() ?? new Aabb2D();
+          const parentAabb = el2.getParent()?.globalAabb ?? new Aabb2D();
           const path = new Path2D();
           path.moveTo(start.x - parentAabb.x, start.y - parentAabb.y);
           const update2 = () => {
@@ -12857,59 +12912,56 @@ const _hoisted_1$d = { class: "mce-cropper" };
 const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "Cropper",
   props: /* @__PURE__ */ mergeModels({
-    image: {},
-    minScale: { default: 0.1 },
-    maxScale: { default: 3 }
+    image: {}
   }, {
     "modelValue": { default: () => ({}) },
     "modelModifiers": {},
-    "style": { default: () => ({}) },
-    "styleModifiers": {}
+    "view": { required: true },
+    "viewModifiers": {}
   }),
-  emits: /* @__PURE__ */ mergeModels(["start", "end", "update:transform"], ["update:modelValue", "update:style"]),
+  emits: /* @__PURE__ */ mergeModels(["start", "end"], ["update:modelValue", "update:view"]),
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const cropRect = useModel(__props, "modelValue");
-    const styleModel = useModel(__props, "style");
-    const rootBox = ref({ width: 0, height: 0 });
-    const { state: imageRef } = useImage(
-      computed(() => ({
-        src: props.image
-      }))
-    );
-    const backup = cloneDeep(cropRect.value);
-    const canvasRef = useTemplateRef("canvasRef");
-    const computedCropRect = computed({
+    const cropBackup = cloneDeep(cropRect.value);
+    const internalValue = computed({
       get: () => {
         const { left = 0, top = 0, right = 0, bottom = 0 } = cropRect.value;
         return { left, top, right, bottom };
       },
       set: (val) => cropRect.value = val
     });
+    const view = useModel(__props, "view");
+    const viewBackup = cloneDeep(view.value);
     const inverseMat = computed(() => {
-      const { left, top, right, bottom } = computedCropRect.value;
+      const { left, top, right, bottom } = internalValue.value;
       const sx = 1 / (1 - left - right);
       const sy = 1 / (1 - top - bottom);
       const tx = -left;
       const ty = -top;
       return { sx, sy, tx, ty };
     });
+    const rootBox = ref({ width: 0, height: 0 });
+    function onResizeObserver(entries) {
+      const { width, height } = entries[0].contentRect;
+      rootBox.value = { width, height };
+    }
+    function applyInverseMat({ width, height }) {
+      const { sx, sy, tx, ty } = inverseMat.value;
+      const { scaleX = 1, scaleY = 1 } = view.value;
+      return {
+        width: sx * width,
+        height: sy * height,
+        left: tx * scaleX * (sx * width),
+        top: ty * scaleY * (sy * height)
+      };
+    }
     const sourceTransform = computed({
-      get: () => {
-        const { sx, sy, tx, ty } = inverseMat.value;
-        const { scaleX = 1, scaleY = 1 } = styleModel.value;
-        const { width, height } = rootBox.value;
-        return {
-          width: sx * width,
-          height: sy * height,
-          left: tx * scaleX * (sx * width),
-          top: ty * scaleY * (sy * height)
-        };
-      },
+      get: () => applyInverseMat(rootBox.value),
       set: (newValue) => {
         const { width, height } = rootBox.value;
-        const { scaleX = 1, scaleY = 1 } = styleModel.value;
+        const { scaleX = 1, scaleY = 1 } = view.value;
         const transform = {
           sx: newValue.width / width,
           sy: newValue.height / height,
@@ -12922,43 +12974,87 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         const h2 = 1 - 1 / transform.sy;
         const right = w - left;
         const bottom = h2 - top;
-        computedCropRect.value = { left, top, right, bottom };
+        internalValue.value = { left, top, right, bottom };
+      }
+    });
+    const viewEffect = watch(view, (val, old) => {
+      if (!isEqual(val, old)) {
+        const source = applyInverseMat(old);
+        const left = (val.left - old.left - source.left) / source.width;
+        const top = (val.top - old.top - source.top) / source.height;
+        const right = 1 - left - val.width / source.width;
+        const bottom = 1 - top - val.height / source.height;
+        internalValue.value = { left, top, right, bottom };
       }
     });
     const scale = computed({
       get: () => inverseMat.value.sx,
       set: (value) => {
-        const transform = inverseMat.value;
-        const rate = transform.sx / value;
-        const left = -transform.tx;
-        const top = -transform.ty;
-        const w = 1 - 1 / value;
-        const h2 = 1 - 1 / transform.sy * rate;
-        const right = w - left;
-        const bottom = h2 - top;
-        computedCropRect.value = { left, top, right, bottom };
+        const { sx: oldSx, sy: oldSy } = inverseMat.value;
+        const { left: oldLeft, top: oldTop, right: oldRight, bottom: oldBottom } = internalValue.value;
+        const oldViewWidth = 1 - oldLeft - oldRight;
+        const oldViewHeight = 1 - oldTop - oldBottom;
+        const centerX = oldLeft + oldViewWidth * 0.5;
+        const centerY = oldTop + oldViewHeight * 0.5;
+        const newSx = value;
+        const newSy = value * (oldSy / oldSx);
+        const newViewWidth = 1 / newSx;
+        const newViewHeight = 1 / newSy;
+        const newLeft = centerX - newViewWidth * 0.5;
+        const newTop = centerY - newViewHeight * 0.5;
+        const newRight = 1 - newViewWidth - newLeft;
+        const newBottom = 1 - newViewHeight - newTop;
+        internalValue.value = {
+          left: newLeft,
+          top: newTop,
+          right: newRight,
+          bottom: newBottom
+        };
       }
     });
-    onBeforeMount(() => emit("start"));
-    onBeforeUnmount(() => emit("end"));
-    const sourceStyle = computed(() => {
-      const { sx, sy, tx, ty } = inverseMat.value;
-      const { scaleX = 1, scaleY = 1 } = styleModel.value;
-      return {
-        transform: [
-          `scale(${sx}, ${sy})`,
-          `translate(${tx * scaleX * 100}%, ${ty * scaleY * 100}%)`
-        ].join(" ")
+    function ok() {
+      emit("end");
+    }
+    function cancel() {
+      cropRect.value = cropBackup;
+      viewEffect.stop();
+      view.value = viewBackup;
+      ok();
+    }
+    function setAspectRatio(ratio) {
+      const { left = 0, top = 0 } = view.value;
+      const { left: sourceLeft, top: sourceTop, width: sourceWidth, height: sourceHeight } = applyInverseMat(view.value);
+      const aspectRatio = ratio === 0 ? sourceWidth / sourceHeight : ratio[0] / ratio[1];
+      let newViewWidth = sourceWidth;
+      let newViewHeight = sourceWidth / aspectRatio;
+      if (newViewHeight > sourceHeight) {
+        newViewHeight = sourceHeight;
+        newViewWidth = sourceHeight * aspectRatio;
+      }
+      const newViewLeft = left + sourceLeft + (sourceWidth - newViewWidth) / 2;
+      const newViewTop = top + sourceTop + (sourceHeight - newViewHeight) / 2;
+      view.value = {
+        ...view.value,
+        width: newViewWidth,
+        height: newViewHeight,
+        left: newViewLeft,
+        top: newViewTop
       };
-    });
+    }
+    const { state: imageRef } = useImage(
+      computed(() => ({
+        src: props.image
+      }))
+    );
+    const canvasRef = useTemplateRef("canvasRef");
     watch([canvasRef, imageRef], render2);
-    watch(computedCropRect, render2, { deep: true });
-    watch([() => styleModel.value.scaleX, () => styleModel.value.scaleY], render2);
+    watch(internalValue, render2, { deep: true });
+    watch([() => view.value.scaleX, () => view.value.scaleY], render2);
     function render2() {
       const ctx = canvasRef.value?.getContext("2d");
       if (!ctx || !imageRef.value)
         return;
-      const { scaleX = 1, scaleY = 1 } = styleModel.value;
+      const { scaleX = 1, scaleY = 1 } = view.value;
       const { naturalWidth, naturalHeight } = imageRef.value;
       ctx.canvas.width = naturalWidth;
       ctx.canvas.height = naturalHeight;
@@ -12967,35 +13063,13 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       ctx.scale(scaleX, scaleY);
       ctx.drawImage(imageRef.value, 0, 0, naturalWidth, naturalHeight);
     }
-    function ok() {
-      emit("end");
-    }
-    function cancel() {
-      cropRect.value = backup;
-      ok();
-    }
-    function onResizeObserver(entries) {
-      const { width, height } = entries[0].contentRect;
-      rootBox.value = { width, height };
-    }
-    function applySourceTransformToStyle() {
-      const { left = 0, top = 0, width = 0, height = 0 } = styleModel.value;
-      const { sx, sy, tx, ty } = inverseMat.value;
-      cropRect.value = {};
-      styleModel.value = {
-        ...styleModel.value,
-        width: sx * width,
-        height: sy * height,
-        left: left + tx * (sx * width),
-        top: top + ty * (sy * height)
-      };
-      ok();
-    }
+    onBeforeMount(() => emit("start"));
+    onBeforeUnmount(() => emit("end"));
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$d, [
         createElementVNode("div", {
           class: "mce-cropper__source",
-          style: normalizeStyle$1(sourceStyle.value)
+          style: normalizeStyle$1(unref(boundingBoxToStyle)(sourceTransform.value))
         }, [
           createElementVNode("canvas", {
             ref_key: "canvasRef",
@@ -13017,7 +13091,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           scale: scale.value,
           ok,
           cancel,
-          applySourceTransformToStyle
+          setAspectRatio
         })
       ])), [
         [unref(vResizeObserver), onResizeObserver]
@@ -13033,17 +13107,35 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       elementSelection
     } = useEditor();
     const element = computed(() => elementSelection.value[0]);
+    const view = computed({
+      get: () => ({
+        left: element.value.style.left,
+        top: element.value.style.top,
+        width: element.value.style.width,
+        height: element.value.style.height,
+        scaleX: element.value.style.scaleX,
+        scaleY: element.value.style.scaleY
+      }),
+      set: (val) => {
+        element.value.style = { ...element.value.style, ...val };
+      }
+    });
     return (_ctx, _cache) => {
       return unref(state) === "cropping" && element.value?.foreground.isValid() ? (openBlock(), createBlock(_sfc_main$k, {
         key: 0,
         modelValue: element.value.foreground.cropRect,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => element.value.foreground.cropRect = $event),
-        style: normalizeStyle$1(element.value.style.toJSON()),
-        image: element.value.foreground.image,
+        view: view.value,
+        "onUpdate:view": _cache[1] || (_cache[1] = ($event) => view.value = $event),
         class: "pointer-events-auto",
-        "onUpdate:style": _cache[1] || (_cache[1] = (val) => element.value.style.setProperties(val)),
+        image: element.value.foreground.image,
         onEnd: _cache[2] || (_cache[2] = () => state.value = void 0)
-      }, null, 8, ["modelValue", "style", "image"])) : createCommentVNode("", true);
+      }, {
+        default: withCtx((scope) => [
+          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(scope)))
+        ]),
+        _: 3
+      }, 8, ["modelValue", "view", "image"])) : createCommentVNode("", true);
     };
   }
 });
@@ -13155,7 +13247,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       startContext.rotate = 0;
       const aabb = selectionAabb.value;
       elementSelection.value.forEach((el) => {
-        const elAabb = el.getGlobalAabb();
+        const elAabb = el.globalAabb;
         startContext.offsetMap[el.instanceId] = {
           x: (elAabb.x - aabb.x) / aabb.width,
           y: (elAabb.y - aabb.y) / aabb.height
@@ -13241,7 +13333,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           if (handle.startsWith("resize")) {
             const selectionAabb2 = getAabb(els);
             els.forEach((el) => {
-              const parentAabb = el.getParent()?.getGlobalAabb?.() ?? new Aabb2D();
+              const parentAabb = el.getParent()?.globalAabb ?? 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;
@@ -13296,13 +13388,26 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             style: normalizeStyle$1(style)
           }, null, 4);
         }), 128)) : createCommentVNode("", true),
-        unref(state) === "selecting" ? (openBlock(), createElementBlock("div", {
+        unref(state) === "selecting" || unref(state) === "painting" ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: "mce-selection__marquee",
           style: normalizeStyle$1(unref(selectionMarquee).toCssStyle())
         }, null, 4)) : createCommentVNode("", true),
-        transform.value.width && transform.value.height ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+        transform.value.width && transform.value.height ? (openBlock(), createElementBlock("div", {
           key: 2,
+          class: "mce-selection__slot",
+          style: normalizeStyle$1(unref(selectionObbInDrawboard).toCssStyle())
+        }, [
+          createVNode(_sfc_main$j, null, {
+            default: withCtx((scope) => [
+              renderSlot(_ctx.$slots, "foreground-cropper", normalizeProps(guardReactiveProps(scope)))
+            ]),
+            _: 3
+          }),
+          renderSlot(_ctx.$slots, "default")
+        ], 4)) : createCommentVNode("", true),
+        transform.value.width && transform.value.height ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+          key: 3,
           ref: "transformControlsTpl"
         }, unref(config).transformControls, {
           modelValue: transform.value,
@@ -13327,15 +13432,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             ]),
             key: "0"
           } : void 0
-        ]), 1040, ["modelValue", "movable", "resizable", "rotatable", "roundable", "resize-strategy", "scale", "offset"])) : createCommentVNode("", true),
-        transform.value.width && transform.value.height ? (openBlock(), createElementBlock("div", {
-          key: 3,
-          class: "mce-selection__slot",
-          style: normalizeStyle$1(unref(selectionObbInDrawboard).toCssStyle())
-        }, [
-          createVNode(_sfc_main$j),
-          renderSlot(_ctx.$slots, "default")
-        ], 4)) : createCommentVNode("", true)
+        ]), 1040, ["modelValue", "movable", "resizable", "rotatable", "roundable", "resize-strategy", "scale", "offset"])) : createCommentVNode("", true)
       ]);
     };
   }
@@ -13743,7 +13840,7 @@ const _slice = definePlugin((editor) => {
     if (!el || !inEditorIs(el, "Slice")) {
       return;
     }
-    const aabb = el.getGlobalAabb();
+    const aabb = el.globalAabb;
     const doc = to("json", {
       ...options,
       selected: el.parent?.children.filter((node) => !node.equal(el)) ?? []
@@ -14917,7 +15014,7 @@ const _smartGuides = definePlugin((editor) => {
     if (box) {
       const excluded = new Set(elementSelection.value.map((el) => el.instanceId));
       const boxes = parnet.value.children.filter((node) => {
-        return !excluded.has(node.instanceId) && isElement(node) && viewportAabb.value.overlap(node.getGlobalAabb());
+        return !excluded.has(node.instanceId) && isElement(node) && viewportAabb.value.overlap(node.globalAabb);
       }).map((node) => createBox(node)).filter(Boolean);
       const { vLines, hLines } = boxes.reduce(
         (store, box2) => {
@@ -15313,7 +15410,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           height: style.height + offsetStyle.height,
           rotate: (style.rotate + offsetStyle.rotate + 360) % 360
         };
-        const oldAabb = el.getGlobalAabb();
+        const oldAabb = el.globalAabb;
         const shape = el.shape;
         resizeElement(
           el,
@@ -15325,7 +15422,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         newStyle.height = el.style.height;
         Object.assign(el.style, newStyle);
         el.updateGlobalTransform();
-        const aabb = el.getGlobalAabb();
+        const aabb = el.globalAabb;
         const offset2 = {
           left: aabb.left - oldAabb.left,
           top: aabb.top - oldAabb.top,
@@ -15591,6 +15688,40 @@ const _statusbar = definePlugin((editor) => {
     ]
   };
 });
+const _test = definePlugin((editor) => {
+  const {
+    root,
+    exec,
+    drawboardAabb
+  } = editor;
+  function testPerformance(count2 = 500) {
+    root.value.removeChildren();
+    const { width, height } = drawboardAabb.value;
+    for (let i = 0; i < count2; i++) {
+      const size = 10 + Math.random() * 40;
+      const x = Math.random() * (width - size);
+      const y = Math.random() * (height - size);
+      const rect = new Element2D({
+        style: {
+          left: x,
+          top: y,
+          width: size,
+          height: size,
+          backgroundColor: "#FFFFFF",
+          borderColor: "#000000"
+        }
+      });
+      root.value.appendChild(rect);
+    }
+    exec("zoomTo100");
+  }
+  return {
+    name: "mce:test",
+    commands: [
+      { command: "testPerformance", handle: testPerformance }
+    ]
+  };
+});
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "TextEditor",
   setup(__props, { expose: __expose }) {
@@ -16572,6 +16703,7 @@ const plugins = [
   _copyAs,
   _drawingTool,
   _edit,
+  _formatPaint,
   _frame,
   _gif,
   _history,
@@ -16600,6 +16732,7 @@ const plugins = [
   _smartSelection,
   _state,
   _statusbar,
+  _test,
   _text,
   _timeline,
   _toolbelt,
@@ -17202,7 +17335,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
       function onSelectArea() {
         selecting = true;
-        if (state.value !== "selecting") {
+        if (state.value !== "painting" && state.value !== "selecting") {
           state.value = "selecting";
         }
         selectionMarquee.value.x = Math.min(start.x, current.x) - drawboardAabb.value.left;
@@ -17239,7 +17372,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         }
       }
       function canStartDrag() {
-        return !dragging && (Math.abs(current.x - start.x) >= 3 || Math.abs(current.y - start.y) >= 3);
+        return !dragging && state.value !== "painting" && (Math.abs(current.x - start.x) >= 3 || Math.abs(current.y - start.y) >= 3);
       }
       function _onEnginePointerMove(moveEvent) {
         if (drawing || hand) ;
@@ -17274,10 +17407,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             })
           );
         } else if (hand) {
-          camera.value.position.add(
-            Math.round(prev.x - current.x),
-            Math.round(prev.y - current.y)
-          );
+          camera.value.position.add({
+            x: Math.round(prev.x - current.x),
+            y: Math.round(prev.y - current.y)
+          });
         } else {
           if (!inSelection) {
             if (!isIncluded(element)) {
@@ -17299,9 +17432,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         } else if (hand) {
           grabbing.value = false;
         } else {
-          if (state.value) {
-            state.value = void 0;
-          }
           if (!dragging) {
             if (element && !selecting) {
               onActivate();
@@ -17319,6 +17449,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             }
             onHover(downEvent);
           }
+          if (state.value === "painting" || state.value === "selecting") {
+            selectionMarquee.value = new Aabb2D({ x: -1, y: -1, width: 0, height: 0 });
+          }
+          if (state.value === "painting") {
+            exec("applyFormatPaint", selected);
+            if (!(upEvent?.ctrlKey || upEvent?.shiftKey || upEvent?.metaKey)) {
+              exec("exitFormatPaint");
+            }
+          } else if (state.value) {
+            state.value = void 0;
+          }
         }
         renderEngine.value.off("pointermove", _onEnginePointerMove);
         document.removeEventListener("pointermove", _onPointerMove);

package/dist/locale/en.d.ts

@@ -5,7 +5,9 @@ declare const _default: {
     loading: string;
     drawing: string;
     exporting: string;
+    painting: string;
     selecting: string;
+    cropping: string;
     selectObject: string;
     commitChanges: string;
     extend: string;
@@ -57,6 +59,7 @@ declare const _default: {
     paste: string;
     duplicate: string;
     delete: string;
+    formatPaint: string;
     selectAll: string;
     selectInverse: string;
     selectNone: string;

package/dist/locale/zh-Hans.d.ts

@@ -5,7 +5,9 @@ declare const _default: {
     loading: string;
     drawing: string;
     exporting: string;
+    painting: string;
     selecting: string;
+    cropping: string;
     selectObject: string;
     commitChanges: string;
     extend: string;
@@ -57,6 +59,7 @@ declare const _default: {
     paste: string;
     duplicate: string;
     delete: string;
+    formatPaint: string;
     selectAll: string;
     selectInverse: string;
     selectNone: string;

package/dist/plugins/formatPaint.d.ts

@@ -0,0 +1,12 @@
+import type { Element2D } from 'modern-canvas';
+declare global {
+    namespace Mce {
+        interface Commands {
+            formatPaint: () => void;
+            applyFormatPaint: (targets?: Element2D[]) => void;
+            exitFormatPaint: () => void;
+        }
+    }
+}
+declare const _default: import("..").Plugin;
+export default _default;

package/dist/plugins/test.d.ts

@@ -0,0 +1,9 @@
+declare global {
+    namespace Mce {
+        interface Commands {
+            testPerformance: (count?: number) => void;
+        }
+    }
+}
+declare const _default: import("..").Plugin;
+export default _default;

package/dist/typed-global.d.ts

@@ -38,6 +38,7 @@ declare global {
         | 'cropping'
         | 'imageReplacing'
         | 'shapeReplacing'
+        | 'painting'
         | undefined
 
     interface DrawingContext {

package/dist/typed-plugins.d.ts

@@ -30,6 +30,7 @@ import './plugins/autoNest'
 import './plugins/copyAs'
 import './plugins/drawingTool'
 import './plugins/edit'
+import './plugins/formatPaint'
 import './plugins/frame'
 import './plugins/gif'
 import './plugins/history'
@@ -58,6 +59,7 @@ import './plugins/smartGuides'
 import './plugins/smartSelection'
 import './plugins/state'
 import './plugins/statusbar'
+import './plugins/test'
 import './plugins/text'
 import './plugins/timeline'
 import './plugins/toolbelt'

package/dist/web-components/TextEditor.d.ts

@@ -34,9 +34,6 @@ export declare class TextEditor extends HTMLElement implements PropertyAccessor
         color: string;
     };
     protected _showCursor: boolean;
-    protected _prevSelection: [number, number] | undefined;
-    protected _composition: boolean;
-    get composition(): boolean;
     protected static _defined: boolean;
     static register(): void;
     protected _text: Text;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.15.38",
-  "description": "The headless canvas editor framework. only the ESM.",
+  "version": "0.15.39",
+  "description": "A headless infinite canvas editor framework built on WebGL rendering, supports exporting to image, video, and PPT. Only the ESM.",
   "author": "wxm",
   "license": "MIT",
   "homepage": "https://github.com/qq15725/mce",
@@ -55,15 +55,15 @@
     "dist"
   ],
   "dependencies": {
-    "@floating-ui/vue": "^1.1.9",
+    "@floating-ui/vue": "^1.1.10",
     "@vueuse/components": "^14.1.0",
     "@vueuse/core": "^14.1.0",
     "diff": "^8.0.3",
     "file-saver": "^2.0.5",
-    "lodash-es": "^4.17.22",
-    "modern-canvas": "^0.14.39",
+    "lodash-es": "^4.17.23",
+    "modern-canvas": "^0.14.43",
     "modern-font": "^0.4.4",
-    "modern-idoc": "^0.10.10",
+    "modern-idoc": "^0.10.18",
     "modern-text": "^1.10.15",
     "yjs": "^13.6.29"
   },
@@ -94,7 +94,7 @@
     "@vitejs/plugin-vue": "^6.0.3",
     "jiti": "^2.6.1",
     "modern-gif": "^2.0.4",
-    "sass-embedded": "^1.97.2"
+    "sass-embedded": "^1.97.3"
   },
   "scripts": {
     "build:code": "vite build",