mce 0.15.33 → 0.15.35

package/README.md

@@ -100,8 +100,7 @@ npm i mce
 <template>
   <div style="width: 100vw; height: 100vh">
     <EditorLayout :editor="editor">
-      <template #selector="{ box }" />
-      <template #transformer="{ box }" />
+      <template #selection />
       <template #floatbar />
       <template #drawboard />
       <EditorLayoutItem position="top" :size="56" />

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

@@ -1,12 +1,6 @@
-import type { OrientedBoundingBox } from '../types';
+import type { Slots } from '../editor';
 import { Editor } from '../editor';
-type __VLS_Slots = {
-    'selector'?: (props: {
-        box: OrientedBoundingBox;
-    }) => void;
-    'transformer'?: (props: {
-        box: Partial<OrientedBoundingBox>;
-    }) => void;
+type __VLS_Slots = Slots & {
     'floatbar'?: () => void;
     'floatbar-top'?: () => void;
     'floatbar-bottom'?: () => void;

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

@@ -33,8 +33,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>> & Readonly<{
     "onUpdate:opened"?: ((value: boolean) => any) | undefined;
 }>, {
-    active: boolean;
     root: boolean;
+    active: boolean;
     indent: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/{Selector.vue.d.ts → Selection.vue.d.ts}

@@ -1,9 +1,4 @@
-import type { TransformableValue } from './shared/TransformControls.vue';
-import { Aabb2D } from 'modern-canvas';
-type __VLS_Props = {
-    resizeStrategy?: 'lockAspectRatio' | 'lockAspectRatioDiagonal';
-    selectedArea?: Aabb2D;
-};
+import type { TransformValue } from './shared/TransformControls.vue';
 declare var __VLS_14: {
     box: {
         left: number;
@@ -14,7 +9,7 @@ declare var __VLS_14: {
         borderRadius: number;
     };
 }, __VLS_16: {
-    box: {
+    transform: {
         left: number;
         top: number;
         width: number;
@@ -24,17 +19,16 @@ declare var __VLS_14: {
     };
 };
 type __VLS_Slots = {} & {
-    transformable?: (props: typeof __VLS_14) => any;
+    transform?: (props: typeof __VLS_14) => any;
 } & {
     default?: (props: typeof __VLS_16) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
-    transformable: Readonly<import("vue").ShallowRef<({
+declare const __VLS_base: import("vue").DefineComponent<{}, {
+    transformControls: Readonly<import("vue").ShallowRef<({
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: {
             readonly tag?: string | any;
-            readonly modelValue?: Partial<TransformableValue> | undefined;
             readonly color?: string | undefined;
             readonly movable?: boolean | undefined;
             readonly rotatable?: boolean | undefined;
@@ -45,15 +39,19 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
             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 scale?: [number, number] | undefined;
+            readonly offset?: [number, number] | undefined;
             readonly hideUi?: boolean | undefined;
-            readonly handles?: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[] | undefined;
             readonly initialSize?: boolean | undefined;
             readonly borderStyle?: "solid" | "dashed" | undefined;
-            readonly tipFormat?: ((type: "size") => string) | undefined;
-            readonly onMove?: ((args_0: TransformableValue, args_1: TransformableValue) => any) | undefined;
-            readonly onStart?: ((args_0: TransformableValue) => any) | undefined;
-            readonly onEnd?: ((args_0: TransformableValue) => any) | undefined;
-            readonly "onUpdate:modelValue"?: ((args_0: TransformableValue) => any) | undefined;
+            readonly tip?: string | ((type: "size") => string) | undefined;
+            readonly modelValue?: Partial<TransformValue> | undefined;
+            readonly modelModifiers?: Partial<Record<string, true>> | undefined;
+            readonly onMove?: ((args_0: TransformValue, args_1: TransformValue) => any) | undefined;
+            readonly onStart?: ((args_0: TransformValue) => any) | undefined;
+            readonly onEnd?: ((args_0: TransformValue) => any) | undefined;
+            readonly "onUpdate:modelValue"?: ((value: Partial<TransformValue> | undefined) => any) | undefined;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
         $attrs: {
             [x: string]: unknown;
@@ -67,11 +65,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         $root: import("vue").ComponentPublicInstance | null;
         $parent: import("vue").ComponentPublicInstance | null;
         $host: Element | null;
-        $emit: ((event: "move", args_0: TransformableValue, args_1: TransformableValue) => void) & ((event: "start", args_0: TransformableValue) => void) & ((event: "end", args_0: TransformableValue) => void) & ((event: "update:modelValue", args_0: TransformableValue) => void);
+        $emit: ((event: "move", args_0: TransformValue, args_1: TransformValue) => void) & ((event: "start", args_0: TransformValue) => void) & ((event: "end", args_0: TransformValue) => void) & ((event: "update:modelValue", value: Partial<TransformValue> | undefined) => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<{
             tag?: string | any;
-            modelValue?: Partial<TransformableValue>;
             color?: string;
             movable?: boolean;
             rotatable?: boolean;
@@ -82,33 +79,40 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
             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")[];
+            scale?: [number, number];
+            offset?: [number, number];
             hideUi?: boolean;
-            handles?: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[];
             initialSize?: boolean;
             borderStyle?: "solid" | "dashed";
-            tipFormat?: (type: "size") => string;
+            tip?: string | ((type: "size") => string);
+        } & {
+            modelValue?: Partial<TransformValue>;
+            modelModifiers?: Partial<Record<string, true>>;
         }> & Readonly<{
-            onMove?: ((args_0: TransformableValue, args_1: TransformableValue) => any) | undefined;
-            onStart?: ((args_0: TransformableValue) => any) | undefined;
-            onEnd?: ((args_0: TransformableValue) => any) | undefined;
-            "onUpdate:modelValue"?: ((args_0: TransformableValue) => any) | undefined;
+            onMove?: ((args_0: TransformValue, args_1: TransformValue) => any) | undefined;
+            onStart?: ((args_0: TransformValue) => any) | undefined;
+            onEnd?: ((args_0: TransformValue) => any) | undefined;
+            "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-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br") | undefined, ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br") | undefined>;
+            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>;
             transforming: import("vue").Ref<boolean, boolean>;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-            move: (args_0: TransformableValue, args_1: TransformableValue) => any;
-            start: (args_0: TransformableValue) => any;
-            end: (args_0: TransformableValue) => any;
-            "update:modelValue": (args_0: TransformableValue) => any;
+            move: (args_0: TransformValue, args_1: TransformValue) => any;
+            start: (args_0: TransformValue) => any;
+            end: (args_0: TransformValue) => any;
+            "update:modelValue": (value: Partial<TransformValue> | undefined) => any;
         }, string, {
+            offset: [number, number];
+            scale: [number, number];
             movable: boolean;
             rotatable: boolean;
             resizable: boolean;
             tag: string | any;
             threshold: number;
             handleShape: "rect" | "circle";
-            handles: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[];
+            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")[];
         }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -130,16 +134,17 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         $nextTick: typeof import("vue").nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
     } & Readonly<{
+        offset: [number, number];
+        scale: [number, number];
         movable: boolean;
         rotatable: boolean;
         resizable: boolean;
         tag: string | any;
         threshold: number;
         handleShape: "rect" | "circle";
-        handles: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[];
+        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")[];
     }> & Omit<Readonly<{
         tag?: string | any;
-        modelValue?: Partial<TransformableValue>;
         color?: string;
         movable?: boolean;
         rotatable?: boolean;
@@ -150,24 +155,36 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         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")[];
+        scale?: [number, number];
+        offset?: [number, number];
         hideUi?: boolean;
-        handles?: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[];
         initialSize?: boolean;
         borderStyle?: "solid" | "dashed";
-        tipFormat?: (type: "size") => string;
+        tip?: string | ((type: "size") => string);
+    } & {
+        modelValue?: Partial<TransformValue>;
+        modelModifiers?: Partial<Record<string, true>>;
     }> & Readonly<{
-        onMove?: ((args_0: TransformableValue, args_1: TransformableValue) => any) | undefined;
-        onStart?: ((args_0: TransformableValue) => any) | undefined;
-        onEnd?: ((args_0: TransformableValue) => any) | undefined;
-        "onUpdate:modelValue"?: ((args_0: TransformableValue) => any) | undefined;
-    }>, "transforming" | "start" | "activeHandle" | ("movable" | "rotatable" | "resizable" | "tag" | "threshold" | "handleShape" | "handles")> & import("vue").ShallowUnwrapRef<{
+        onMove?: ((args_0: TransformValue, args_1: TransformValue) => any) | undefined;
+        onStart?: ((args_0: TransformValue) => any) | undefined;
+        onEnd?: ((args_0: TransformValue) => any) | undefined;
+        "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-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br") | undefined, ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br") | undefined>;
+        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>;
         transforming: import("vue").Ref<boolean, boolean>;
     }> & {} & import("vue").ComponentCustomProperties & {} & {
         $slots: {
             default?: (props: {
-                value: Partial<TransformableValue> | undefined;
+                value: {
+                    left: number;
+                    top: number;
+                    width: number;
+                    height: number;
+                    rotate: number;
+                    borderRadius: number;
+                };
                 props: {
                     onPointerdown: (event?: MouseEvent, index?: number) => boolean;
                 };
@@ -190,7 +207,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         $data: {};
         $props: {
             readonly tag?: string | any;
-            readonly modelValue?: Partial<TransformableValue> | undefined;
             readonly color?: string | undefined;
             readonly movable?: boolean | undefined;
             readonly rotatable?: boolean | undefined;
@@ -201,15 +217,19 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
             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 scale?: [number, number] | undefined;
+            readonly offset?: [number, number] | undefined;
             readonly hideUi?: boolean | undefined;
-            readonly handles?: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[] | undefined;
             readonly initialSize?: boolean | undefined;
             readonly borderStyle?: "solid" | "dashed" | undefined;
-            readonly tipFormat?: ((type: "size") => string) | undefined;
-            readonly onMove?: ((args_0: TransformableValue, args_1: TransformableValue) => any) | undefined;
-            readonly onStart?: ((args_0: TransformableValue) => any) | undefined;
-            readonly onEnd?: ((args_0: TransformableValue) => any) | undefined;
-            readonly "onUpdate:modelValue"?: ((args_0: TransformableValue) => any) | undefined;
+            readonly tip?: string | ((type: "size") => string) | undefined;
+            readonly modelValue?: Partial<TransformValue> | undefined;
+            readonly modelModifiers?: Partial<Record<string, true>> | undefined;
+            readonly onMove?: ((args_0: TransformValue, args_1: TransformValue) => any) | undefined;
+            readonly onStart?: ((args_0: TransformValue) => any) | undefined;
+            readonly onEnd?: ((args_0: TransformValue) => any) | undefined;
+            readonly "onUpdate:modelValue"?: ((value: Partial<TransformValue> | undefined) => any) | undefined;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
         $attrs: {
             [x: string]: unknown;
@@ -223,11 +243,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         $root: import("vue").ComponentPublicInstance | null;
         $parent: import("vue").ComponentPublicInstance | null;
         $host: Element | null;
-        $emit: ((event: "move", args_0: TransformableValue, args_1: TransformableValue) => void) & ((event: "start", args_0: TransformableValue) => void) & ((event: "end", args_0: TransformableValue) => void) & ((event: "update:modelValue", args_0: TransformableValue) => void);
+        $emit: ((event: "move", args_0: TransformValue, args_1: TransformValue) => void) & ((event: "start", args_0: TransformValue) => void) & ((event: "end", args_0: TransformValue) => void) & ((event: "update:modelValue", value: Partial<TransformValue> | undefined) => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<{
             tag?: string | any;
-            modelValue?: Partial<TransformableValue>;
             color?: string;
             movable?: boolean;
             rotatable?: boolean;
@@ -238,33 +257,40 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
             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")[];
+            scale?: [number, number];
+            offset?: [number, number];
             hideUi?: boolean;
-            handles?: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[];
             initialSize?: boolean;
             borderStyle?: "solid" | "dashed";
-            tipFormat?: (type: "size") => string;
+            tip?: string | ((type: "size") => string);
+        } & {
+            modelValue?: Partial<TransformValue>;
+            modelModifiers?: Partial<Record<string, true>>;
         }> & Readonly<{
-            onMove?: ((args_0: TransformableValue, args_1: TransformableValue) => any) | undefined;
-            onStart?: ((args_0: TransformableValue) => any) | undefined;
-            onEnd?: ((args_0: TransformableValue) => any) | undefined;
-            "onUpdate:modelValue"?: ((args_0: TransformableValue) => any) | undefined;
+            onMove?: ((args_0: TransformValue, args_1: TransformValue) => any) | undefined;
+            onStart?: ((args_0: TransformValue) => any) | undefined;
+            onEnd?: ((args_0: TransformValue) => any) | undefined;
+            "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-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br") | undefined, ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br") | undefined>;
+            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>;
             transforming: import("vue").Ref<boolean, boolean>;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-            move: (args_0: TransformableValue, args_1: TransformableValue) => any;
-            start: (args_0: TransformableValue) => any;
-            end: (args_0: TransformableValue) => any;
-            "update:modelValue": (args_0: TransformableValue) => any;
+            move: (args_0: TransformValue, args_1: TransformValue) => any;
+            start: (args_0: TransformValue) => any;
+            end: (args_0: TransformValue) => any;
+            "update:modelValue": (value: Partial<TransformValue> | undefined) => any;
         }, string, {
+            offset: [number, number];
+            scale: [number, number];
             movable: boolean;
             rotatable: boolean;
             resizable: boolean;
             tag: string | any;
             threshold: number;
             handleShape: "rect" | "circle";
-            handles: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[];
+            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")[];
         }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -286,16 +312,17 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         $nextTick: typeof import("vue").nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
     } & Readonly<{
+        offset: [number, number];
+        scale: [number, number];
         movable: boolean;
         rotatable: boolean;
         resizable: boolean;
         tag: string | any;
         threshold: number;
         handleShape: "rect" | "circle";
-        handles: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[];
+        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")[];
     }> & Omit<Readonly<{
         tag?: string | any;
-        modelValue?: Partial<TransformableValue>;
         color?: string;
         movable?: boolean;
         rotatable?: boolean;
@@ -306,24 +333,36 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         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")[];
+        scale?: [number, number];
+        offset?: [number, number];
         hideUi?: boolean;
-        handles?: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[];
         initialSize?: boolean;
         borderStyle?: "solid" | "dashed";
-        tipFormat?: (type: "size") => string;
+        tip?: string | ((type: "size") => string);
+    } & {
+        modelValue?: Partial<TransformValue>;
+        modelModifiers?: Partial<Record<string, true>>;
     }> & Readonly<{
-        onMove?: ((args_0: TransformableValue, args_1: TransformableValue) => any) | undefined;
-        onStart?: ((args_0: TransformableValue) => any) | undefined;
-        onEnd?: ((args_0: TransformableValue) => any) | undefined;
-        "onUpdate:modelValue"?: ((args_0: TransformableValue) => any) | undefined;
-    }>, "transforming" | "start" | "activeHandle" | ("movable" | "rotatable" | "resizable" | "tag" | "threshold" | "handleShape" | "handles")> & import("vue").ShallowUnwrapRef<{
+        onMove?: ((args_0: TransformValue, args_1: TransformValue) => any) | undefined;
+        onStart?: ((args_0: TransformValue) => any) | undefined;
+        onEnd?: ((args_0: TransformValue) => any) | undefined;
+        "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-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br") | undefined, ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br") | undefined>;
+        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>;
         transforming: import("vue").Ref<boolean, boolean>;
     }> & {} & import("vue").ComponentCustomProperties & {} & {
         $slots: {
             default?: (props: {
-                value: Partial<TransformableValue> | undefined;
+                value: {
+                    left: number;
+                    top: number;
+                    width: number;
+                    height: number;
+                    rotate: number;
+                    borderRadius: number;
+                };
                 props: {
                     onPointerdown: (event?: MouseEvent, index?: number) => boolean;
                 };
@@ -342,9 +381,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
             }) => any;
         };
     }) | null>>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    selectedArea: Aabb2D;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, 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;

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

@@ -1,3 +1,11 @@
-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>;
+import type { Element2D } from 'modern-canvas';
+type __VLS_ModelProps = {
+    modelValue?: Element2D;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Element2D | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Element2D | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,11 +1,14 @@
-import type { OrientedBoundingBox } from '../../types';
-export interface TransformableValue extends OrientedBoundingBox {
+export interface TransformValue {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    rotate: number;
     borderRadius: number;
 }
 type Handle = 'move' | 'resize-t' | 'resize-r' | 'resize-b' | 'resize-l' | 'resize-tl' | 'resize-tr' | 'resize-bl' | 'resize-br' | 'rotate-tl' | 'rotate-tr' | 'rotate-bl' | 'rotate-br' | 'round-tl' | 'round-tr' | 'round-bl' | 'round-br';
 type __VLS_Props = {
     tag?: string | any;
-    modelValue?: Partial<TransformableValue>;
     color?: string;
     movable?: boolean;
     rotatable?: boolean;
@@ -16,15 +19,29 @@ type __VLS_Props = {
     resizeStrategy?: 'lockAspectRatio' | 'lockAspectRatioDiagonal';
     handleStrategy?: 'point';
     handleShape?: 'rect' | 'circle';
-    hideUi?: boolean;
     handles?: Handle[];
+    scale?: [number, number];
+    offset?: [number, number];
+    hideUi?: boolean;
     initialSize?: boolean;
     borderStyle?: 'solid' | 'dashed';
-    tipFormat?: (type: 'size') => string;
+    tip?: string | ((type: 'size') => string);
 };
 declare function start(event?: MouseEvent, index?: number): boolean;
+type __VLS_ModelProps = {
+    modelValue?: Partial<TransformValue>;
+    'modelModifiers'?: Partial<Record<string, true>>;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_8: {
-    value: Partial<TransformableValue> | undefined;
+    value: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        rotate: number;
+        borderRadius: number;
+    };
     props: {
         onPointerdown: typeof start;
     };
@@ -44,21 +61,23 @@ type __VLS_Slots = {} & {
 } & {
     svg?: (props: typeof __VLS_15) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     start: typeof start;
     activeHandle: import("vue").Ref<Handle | undefined, Handle | undefined>;
     transforming: import("vue").Ref<boolean, boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    move: (args_0: TransformableValue, args_1: TransformableValue) => any;
-    start: (args_0: TransformableValue) => any;
-    end: (args_0: TransformableValue) => any;
-    "update:modelValue": (args_0: TransformableValue) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onMove?: ((args_0: TransformableValue, args_1: TransformableValue) => any) | undefined;
-    onStart?: ((args_0: TransformableValue) => any) | undefined;
-    onEnd?: ((args_0: TransformableValue) => any) | undefined;
-    "onUpdate:modelValue"?: ((args_0: TransformableValue) => any) | undefined;
+    move: (args_0: TransformValue, args_1: TransformValue) => any;
+    start: (args_0: TransformValue) => any;
+    end: (args_0: TransformValue) => any;
+    "update:modelValue": (value: Partial<TransformValue> | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onMove?: ((args_0: TransformValue, args_1: TransformValue) => any) | undefined;
+    onStart?: ((args_0: TransformValue) => any) | undefined;
+    onEnd?: ((args_0: TransformValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Partial<TransformValue> | undefined) => any) | undefined;
 }>, {
+    offset: [number, number];
+    scale: [number, number];
     movable: boolean;
     rotatable: boolean;
     resizable: boolean;

package/dist/editor.d.ts

@@ -1,8 +1,9 @@
+import type { EffectScope } from '@vue/reactivity';
 import type { RemovableRef } from '@vueuse/core';
 import type { ObservableEvents } from 'modern-idoc';
-import type { App, InjectionKey } from 'vue';
+import type { App, ComponentPublicInstance, InjectionKey } from 'vue';
 import type { Mixin } from './mixin';
-import type { OverlayPluginComponent, PanelPluginComponent, Plugin, PluginComponent, PluginObject } from './plugin';
+import type { Plugin, PluginComponent, PluginObject } from './plugin';
 import { Observable } from 'modern-idoc';
 export interface Options extends Mce.Options {
     debug?: boolean;
@@ -13,26 +14,30 @@ export interface Editor extends Mce.Editor {
 }
 export interface Events extends Mce.Events, ObservableEvents {
 }
+export interface Slots extends Mce.Slots {
+}
+export type EditorComponent = PluginComponent & {
+    plugin: string;
+    indexInPlugin: number;
+};
 export declare class Editor extends Observable<Events> {
     static injectionKey: InjectionKey<Editor>;
     debug: import("vue").Ref<boolean, boolean>;
     config: RemovableRef<Mce.Config>;
     onEmit?: <K extends keyof Events & string>(event: K, ...args: Events[K]) => void;
     plugins: Map<string, PluginObject>;
-    pluginsComponents: import("vue").ComputedRef<{
-        overlay: OverlayPluginComponent[];
-        panel: PanelPluginComponent[];
-    }>;
+    protected _pluginComponentTypes: string[];
+    components: import("vue").ComputedRef<EditorComponent[]>;
+    componentRefs: import("vue").Ref<Record<string, (HTMLElement | ComponentPublicInstance | null)[]>, Record<string, (HTMLElement | ComponentPublicInstance | null)[]>>;
     protected _setups: (() => void | Promise<void>)[];
     constructor(options?: Options);
     protected _setupObservable(): void;
-    getPlugins: (type: PluginComponent["type"]) => PluginComponent[];
     log: (...args: any[]) => void;
     emit: <K extends keyof Events & string>(event: K, ...args: Events[K]) => this;
     protected _setupOptions(options: Options): void;
-    protected _useMixins(mixins: Mixin[], options: Options): void;
-    use(plugins: Plugin[], options: Options): void;
-    protected _setuped: boolean;
+    mixin(mixin: Mixin | Mixin[], options?: Options): void;
+    use(plugin: Plugin | Plugin[], options: Options): void;
+    protected _effectScope?: EffectScope;
     setup: () => Promise<void>;
     install: (app: App) => void;
 }