mce 0.16.7 → 0.17.1

package/README.md

@@ -32,40 +32,55 @@ npm i mce
 <script setup lang="ts">
   import { Editor, EditorLayout, EditorLayoutItem } from 'mce'
   import 'mce/styles'
+  import gif from '@mce/gif'
   import mp4 from '@mce/mp4'
   import openxml from '@mce/openxml'
   import pdf from '@mce/pdf'
   import svg from '@mce/svg'
+  import gifWorkerUrl from 'modern-gif/worker?url'
 
   const editor = new Editor({
     plugins: [
+      gif(),
       mp4(),
-      openxml(),
-      pdf(),
       svg(),
+      pdf(),
+      openxml(),
     ],
-    theme: 'system',
-    watermark: '/example.jpg',
-    checkerboard: true,
-    checkerboardStyle: 'grid',
-    pixelGrid: true,
-    pixelate: true,
-    camera: true,
-    ruler: true,
-    scrollbar: true,
-    toolbelt: true,
-    statusbar: true,
-    frameGap: 48,
-    typographyStrategy: 'autoHeight',
-    handleShape: 'rect',
-    screenCenterOffset: { left: 0, top: 0, right: 0, bottom: 0 },
-    localDb: false,
+    gifWorkerUrl,
+    locale: { locale: 'en' },
+    viewport: {
+      camera: { enabled: true },
+      zoom: { strategy: 'contain' },
+      screenPadding: { left: 0, top: 0, right: 0, bottom: 0 },
+    },
+    canvas: {
+      checkerboard: { enabled: true, style: 'grid' },
+      pixelGrid: { enabled: true },
+      frame: { outline: false },
+      watermark: {
+        url: '/example.jpg',
+        width: 100,
+        alpha: 0.05,
+        rotation: 0.5236,
+      },
+    },
+    ui: {
+      ruler: { visible: true },
+      scrollbar: { visible: true },
+      statusbar: { visible: true },
+      toolbelt: { visible: true },
+      madeWith: { visible: false },
+    },
+    typography: {
+      strategy: 'autoHeight',
+      defaultFont: {
+        family: 'SourceHanSansCN-Normal',
+        src: '/fonts/SourceHanSansCN-Normal.woff',
+      },
+    },
     customUpload: async (blob) => URL.createObjectURL(blob),
     customContextMenu: (menu) => menu,
-    locale: {
-      locale: 'zhHans', // default 'en'
-    },
-    defaultFont: { family: 'SourceHanSansCN-Normal', src: '/SourceHanSansCN-Normal.woff' },
     doc: {
       children: [
         { foreground: '/example.png', style: { rotate: 60, left: 200, top: 10, width: 50, height: 50 } },

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

@@ -9,10 +9,7 @@ type __VLS_Slots = Slots & {
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     editor: typeof Editor;
-    resizeStrategy: {
-        type: import("vue").PropType<import("../composables").ResizeStrategy>;
-        default: import("../composables").ResizeStrategy;
-    };
+    resizeStrategy: import("vue").PropType<import("../composables").ResizeStrategy>;
     activeStrategy: {
         type: import("vue").PropType<import("../composables").ActiveStrategy>;
         default: import("../composables").ActiveStrategy;
@@ -27,10 +24,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     editor: typeof Editor;
-    resizeStrategy: {
-        type: import("vue").PropType<import("../composables").ResizeStrategy>;
-        default: import("../composables").ResizeStrategy;
-    };
+    resizeStrategy: import("vue").PropType<import("../composables").ResizeStrategy>;
     activeStrategy: {
         type: import("vue").PropType<import("../composables").ActiveStrategy>;
         default: import("../composables").ActiveStrategy;
@@ -44,7 +38,6 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: import("../composables").HoverStrategy;
     };
 }>> & Readonly<{}>, {
-    resizeStrategy: import("../composables").ResizeStrategy;
     activeStrategy: import("../composables").ActiveStrategy;
     doubleclickStrategy: import("../composables").DoubleclickStrategy;
     hoverStrategy: import("../composables").HoverStrategy;

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

@@ -1,10 +1,14 @@
 import type { Element2D } from 'modern-canvas';
+type __VLS_Props = {
+    outline?: boolean;
+};
 type __VLS_ModelProps = {
     modelValue: Element2D;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: Element2D) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: Element2D) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,6 +1,19 @@
-declare function clean(): void;
-declare const __VLS_export: import("vue").DefineComponent<{}, {
-    clean: typeof clean;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_ModelProps = {
+    'refLines': {
+        x: number[];
+        y: number[];
+    };
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:refLines": (value: {
+        x: number[];
+        y: number[];
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:refLines"?: ((value: {
+        x: number[];
+        y: number[];
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -13,10 +13,11 @@ type __VLS_Slots = {} & {
     transform?: (props: typeof __VLS_25) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {
-    transformControls: Readonly<import("vue").ShallowRef<({
+    transform: Readonly<import("vue").ShallowRef<({
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: {
+            readonly ui?: boolean | undefined;
             readonly tag?: string | any;
             readonly color?: string | undefined;
             readonly movable?: boolean | undefined;
@@ -25,22 +26,22 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             readonly resizable?: boolean | undefined;
             readonly roundable?: boolean | undefined;
             readonly threshold?: number | undefined;
-            readonly resizeStrategy?: "lockAspectRatio" | "lockAspectRatioDiagonal" | undefined;
-            readonly handleStrategy?: "point" | undefined;
+            readonly resizeStrategy?: "free" | "lockAspectRatio" | undefined;
+            readonly lockAspectRatioStrategy?: "all" | "diagonal" | undefined;
+            readonly handleStyle?: "8-points" | "4-points" | undefined;
             readonly handleShape?: "rect" | "circle" | undefined;
-            readonly handles?: ("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "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 handles?: ("move" | "resize-b" | "resize-r" | "resize-l" | "resize-t" | "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 scale?: [number, number] | undefined;
             readonly offset?: [number, number] | undefined;
-            readonly hideUi?: boolean | undefined;
             readonly initialSize?: boolean | undefined;
             readonly borderStyle?: "solid" | "dashed" | undefined;
             readonly tip?: string | ((type: "size") => string) | undefined;
-            readonly modelValue?: Partial<import("./shared/TransformControls.vue").TransformValue> | undefined;
+            readonly modelValue?: Partial<Mce.TransformValue> | undefined;
             readonly modelModifiers?: Partial<Record<string, true>> | undefined;
-            readonly onMove?: ((args_0: import("./shared/TransformControls.vue").TransformValue, args_1: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
-            readonly onStart?: ((args_0: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
-            readonly onEnd?: ((args_0: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
-            readonly "onUpdate:modelValue"?: ((value: Partial<import("./shared/TransformControls.vue").TransformValue> | undefined) => any) | undefined;
+            readonly onMove?: ((context: Mce.TransformContext) => any) | undefined;
+            readonly onStart?: ((context: Mce.TransformContext) => any) | undefined;
+            readonly onEnd?: ((context: Mce.TransformContext) => any) | undefined;
+            readonly "onUpdate:modelValue"?: ((value: Partial<Mce.TransformValue> | undefined) => any) | undefined;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
         $attrs: {
             [x: string]: unknown;
@@ -54,9 +55,10 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         $root: import("vue").ComponentPublicInstance | null;
         $parent: import("vue").ComponentPublicInstance | null;
         $host: Element | null;
-        $emit: ((event: "move", args_0: import("./shared/TransformControls.vue").TransformValue, args_1: import("./shared/TransformControls.vue").TransformValue) => void) & ((event: "start", args_0: import("./shared/TransformControls.vue").TransformValue) => void) & ((event: "end", args_0: import("./shared/TransformControls.vue").TransformValue) => void) & ((event: "update:modelValue", value: Partial<import("./shared/TransformControls.vue").TransformValue> | undefined) => void);
+        $emit: ((event: "move", context: Mce.TransformContext) => void) & ((event: "start", context: Mce.TransformContext) => void) & ((event: "end", context: Mce.TransformContext) => void) & ((event: "update:modelValue", value: Partial<Mce.TransformValue> | undefined) => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<{
+            ui?: boolean;
             tag?: string | any;
             color?: string;
             movable?: boolean;
@@ -65,43 +67,46 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             resizable?: boolean;
             roundable?: boolean;
             threshold?: number;
-            resizeStrategy?: "lockAspectRatio" | "lockAspectRatioDiagonal";
-            handleStrategy?: "point";
+            resizeStrategy?: "free" | "lockAspectRatio";
+            lockAspectRatioStrategy?: "all" | "diagonal";
+            handleStyle?: "8-points" | "4-points";
             handleShape?: "rect" | "circle";
-            handles?: ("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "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-b" | "resize-r" | "resize-l" | "resize-t" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[];
             scale?: [number, number];
             offset?: [number, number];
-            hideUi?: boolean;
             initialSize?: boolean;
             borderStyle?: "solid" | "dashed";
             tip?: string | ((type: "size") => string);
         } & {
-            modelValue?: Partial<import("./shared/TransformControls.vue").TransformValue>;
+            modelValue?: Partial<Mce.TransformValue>;
             modelModifiers?: Partial<Record<string, true>>;
         }> & Readonly<{
-            onMove?: ((args_0: import("./shared/TransformControls.vue").TransformValue, args_1: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
-            onStart?: ((args_0: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
-            onEnd?: ((args_0: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
-            "onUpdate:modelValue"?: ((value: Partial<import("./shared/TransformControls.vue").TransformValue> | undefined) => any) | undefined;
+            onMove?: ((context: Mce.TransformContext) => any) | undefined;
+            onStart?: ((context: Mce.TransformContext) => any) | undefined;
+            onEnd?: ((context: Mce.TransformContext) => any) | undefined;
+            "onUpdate:modelValue"?: ((value: Partial<Mce.TransformValue> | undefined) => any) | undefined;
         }>, {
             start: (event?: MouseEvent, index?: number) => boolean;
-            activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "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-l" | "resize-r" | "resize-b" | "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-b" | "resize-r" | "resize-l" | "resize-t" | "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-b" | "resize-r" | "resize-l" | "resize-t" | "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>;
             transforming: import("vue").Ref<boolean, boolean>;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-            move: (args_0: import("./shared/TransformControls.vue").TransformValue, args_1: import("./shared/TransformControls.vue").TransformValue) => any;
-            start: (args_0: import("./shared/TransformControls.vue").TransformValue) => any;
-            end: (args_0: import("./shared/TransformControls.vue").TransformValue) => any;
-            "update:modelValue": (value: Partial<import("./shared/TransformControls.vue").TransformValue> | undefined) => any;
+            move: (context: Mce.TransformContext) => any;
+            start: (context: Mce.TransformContext) => any;
+            end: (context: Mce.TransformContext) => any;
+            "update:modelValue": (value: Partial<Mce.TransformValue> | undefined) => any;
         }, string, {
             offset: [number, number];
             scale: [number, number];
+            ui: boolean;
+            threshold: number;
             movable: boolean;
             rotatable: boolean;
             resizable: boolean;
-            threshold: number;
             tag: string | any;
+            resizeStrategy: "free" | "lockAspectRatio";
+            lockAspectRatioStrategy: "all" | "diagonal";
             handleShape: "rect" | "circle";
-            handles: ("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "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-b" | "resize-r" | "resize-l" | "resize-t" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[];
         }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -125,14 +130,18 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
     } & Readonly<{
         offset: [number, number];
         scale: [number, number];
+        ui: boolean;
+        threshold: number;
         movable: boolean;
         rotatable: boolean;
         resizable: boolean;
-        threshold: number;
         tag: string | any;
+        resizeStrategy: "free" | "lockAspectRatio";
+        lockAspectRatioStrategy: "all" | "diagonal";
         handleShape: "rect" | "circle";
-        handles: ("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "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-b" | "resize-r" | "resize-l" | "resize-t" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[];
     }> & Omit<Readonly<{
+        ui?: boolean;
         tag?: string | any;
         color?: string;
         movable?: boolean;
@@ -141,27 +150,27 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         resizable?: boolean;
         roundable?: boolean;
         threshold?: number;
-        resizeStrategy?: "lockAspectRatio" | "lockAspectRatioDiagonal";
-        handleStrategy?: "point";
+        resizeStrategy?: "free" | "lockAspectRatio";
+        lockAspectRatioStrategy?: "all" | "diagonal";
+        handleStyle?: "8-points" | "4-points";
         handleShape?: "rect" | "circle";
-        handles?: ("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "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-b" | "resize-r" | "resize-l" | "resize-t" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[];
         scale?: [number, number];
         offset?: [number, number];
-        hideUi?: boolean;
         initialSize?: boolean;
         borderStyle?: "solid" | "dashed";
         tip?: string | ((type: "size") => string);
     } & {
-        modelValue?: Partial<import("./shared/TransformControls.vue").TransformValue>;
+        modelValue?: Partial<Mce.TransformValue>;
         modelModifiers?: Partial<Record<string, true>>;
     }> & Readonly<{
-        onMove?: ((args_0: import("./shared/TransformControls.vue").TransformValue, args_1: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
-        onStart?: ((args_0: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
-        onEnd?: ((args_0: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: Partial<import("./shared/TransformControls.vue").TransformValue> | undefined) => any) | undefined;
-    }>, "transforming" | "start" | "activeHandle" | ("offset" | "scale" | "movable" | "rotatable" | "resizable" | "threshold" | "tag" | "handleShape" | "handles")> & import("vue").ShallowUnwrapRef<{
+        onMove?: ((context: Mce.TransformContext) => any) | undefined;
+        onStart?: ((context: Mce.TransformContext) => any) | undefined;
+        onEnd?: ((context: Mce.TransformContext) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: Partial<Mce.TransformValue> | undefined) => any) | undefined;
+    }>, "transforming" | "start" | "activeHandle" | ("offset" | "scale" | "ui" | "threshold" | "movable" | "rotatable" | "resizable" | "tag" | "resizeStrategy" | "lockAspectRatioStrategy" | "handleShape" | "handles")> & import("vue").ShallowUnwrapRef<{
         start: (event?: MouseEvent, index?: number) => boolean;
-        activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "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-l" | "resize-r" | "resize-b" | "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-b" | "resize-r" | "resize-l" | "resize-t" | "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-b" | "resize-r" | "resize-l" | "resize-t" | "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>;
         transforming: import("vue").Ref<boolean, boolean>;
     }> & {} & import("vue").ComponentCustomProperties & {} & {
         $slots: {
@@ -195,6 +204,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: {
+            readonly ui?: boolean | undefined;
             readonly tag?: string | any;
             readonly color?: string | undefined;
             readonly movable?: boolean | undefined;
@@ -203,22 +213,22 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             readonly resizable?: boolean | undefined;
             readonly roundable?: boolean | undefined;
             readonly threshold?: number | undefined;
-            readonly resizeStrategy?: "lockAspectRatio" | "lockAspectRatioDiagonal" | undefined;
-            readonly handleStrategy?: "point" | undefined;
+            readonly resizeStrategy?: "free" | "lockAspectRatio" | undefined;
+            readonly lockAspectRatioStrategy?: "all" | "diagonal" | undefined;
+            readonly handleStyle?: "8-points" | "4-points" | undefined;
             readonly handleShape?: "rect" | "circle" | undefined;
-            readonly handles?: ("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "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 handles?: ("move" | "resize-b" | "resize-r" | "resize-l" | "resize-t" | "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 scale?: [number, number] | undefined;
             readonly offset?: [number, number] | undefined;
-            readonly hideUi?: boolean | undefined;
             readonly initialSize?: boolean | undefined;
             readonly borderStyle?: "solid" | "dashed" | undefined;
             readonly tip?: string | ((type: "size") => string) | undefined;
-            readonly modelValue?: Partial<import("./shared/TransformControls.vue").TransformValue> | undefined;
+            readonly modelValue?: Partial<Mce.TransformValue> | undefined;
             readonly modelModifiers?: Partial<Record<string, true>> | undefined;
-            readonly onMove?: ((args_0: import("./shared/TransformControls.vue").TransformValue, args_1: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
-            readonly onStart?: ((args_0: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
-            readonly onEnd?: ((args_0: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
-            readonly "onUpdate:modelValue"?: ((value: Partial<import("./shared/TransformControls.vue").TransformValue> | undefined) => any) | undefined;
+            readonly onMove?: ((context: Mce.TransformContext) => any) | undefined;
+            readonly onStart?: ((context: Mce.TransformContext) => any) | undefined;
+            readonly onEnd?: ((context: Mce.TransformContext) => any) | undefined;
+            readonly "onUpdate:modelValue"?: ((value: Partial<Mce.TransformValue> | undefined) => any) | undefined;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
         $attrs: {
             [x: string]: unknown;
@@ -232,9 +242,10 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         $root: import("vue").ComponentPublicInstance | null;
         $parent: import("vue").ComponentPublicInstance | null;
         $host: Element | null;
-        $emit: ((event: "move", args_0: import("./shared/TransformControls.vue").TransformValue, args_1: import("./shared/TransformControls.vue").TransformValue) => void) & ((event: "start", args_0: import("./shared/TransformControls.vue").TransformValue) => void) & ((event: "end", args_0: import("./shared/TransformControls.vue").TransformValue) => void) & ((event: "update:modelValue", value: Partial<import("./shared/TransformControls.vue").TransformValue> | undefined) => void);
+        $emit: ((event: "move", context: Mce.TransformContext) => void) & ((event: "start", context: Mce.TransformContext) => void) & ((event: "end", context: Mce.TransformContext) => void) & ((event: "update:modelValue", value: Partial<Mce.TransformValue> | undefined) => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<{
+            ui?: boolean;
             tag?: string | any;
             color?: string;
             movable?: boolean;
@@ -243,43 +254,46 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             resizable?: boolean;
             roundable?: boolean;
             threshold?: number;
-            resizeStrategy?: "lockAspectRatio" | "lockAspectRatioDiagonal";
-            handleStrategy?: "point";
+            resizeStrategy?: "free" | "lockAspectRatio";
+            lockAspectRatioStrategy?: "all" | "diagonal";
+            handleStyle?: "8-points" | "4-points";
             handleShape?: "rect" | "circle";
-            handles?: ("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "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-b" | "resize-r" | "resize-l" | "resize-t" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[];
             scale?: [number, number];
             offset?: [number, number];
-            hideUi?: boolean;
             initialSize?: boolean;
             borderStyle?: "solid" | "dashed";
             tip?: string | ((type: "size") => string);
         } & {
-            modelValue?: Partial<import("./shared/TransformControls.vue").TransformValue>;
+            modelValue?: Partial<Mce.TransformValue>;
             modelModifiers?: Partial<Record<string, true>>;
         }> & Readonly<{
-            onMove?: ((args_0: import("./shared/TransformControls.vue").TransformValue, args_1: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
-            onStart?: ((args_0: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
-            onEnd?: ((args_0: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
-            "onUpdate:modelValue"?: ((value: Partial<import("./shared/TransformControls.vue").TransformValue> | undefined) => any) | undefined;
+            onMove?: ((context: Mce.TransformContext) => any) | undefined;
+            onStart?: ((context: Mce.TransformContext) => any) | undefined;
+            onEnd?: ((context: Mce.TransformContext) => any) | undefined;
+            "onUpdate:modelValue"?: ((value: Partial<Mce.TransformValue> | undefined) => any) | undefined;
         }>, {
             start: (event?: MouseEvent, index?: number) => boolean;
-            activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "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-l" | "resize-r" | "resize-b" | "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-b" | "resize-r" | "resize-l" | "resize-t" | "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-b" | "resize-r" | "resize-l" | "resize-t" | "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>;
             transforming: import("vue").Ref<boolean, boolean>;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-            move: (args_0: import("./shared/TransformControls.vue").TransformValue, args_1: import("./shared/TransformControls.vue").TransformValue) => any;
-            start: (args_0: import("./shared/TransformControls.vue").TransformValue) => any;
-            end: (args_0: import("./shared/TransformControls.vue").TransformValue) => any;
-            "update:modelValue": (value: Partial<import("./shared/TransformControls.vue").TransformValue> | undefined) => any;
+            move: (context: Mce.TransformContext) => any;
+            start: (context: Mce.TransformContext) => any;
+            end: (context: Mce.TransformContext) => any;
+            "update:modelValue": (value: Partial<Mce.TransformValue> | undefined) => any;
         }, string, {
             offset: [number, number];
             scale: [number, number];
+            ui: boolean;
+            threshold: number;
             movable: boolean;
             rotatable: boolean;
             resizable: boolean;
-            threshold: number;
             tag: string | any;
+            resizeStrategy: "free" | "lockAspectRatio";
+            lockAspectRatioStrategy: "all" | "diagonal";
             handleShape: "rect" | "circle";
-            handles: ("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "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-b" | "resize-r" | "resize-l" | "resize-t" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[];
         }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -303,14 +317,18 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
     } & Readonly<{
         offset: [number, number];
         scale: [number, number];
+        ui: boolean;
+        threshold: number;
         movable: boolean;
         rotatable: boolean;
         resizable: boolean;
-        threshold: number;
         tag: string | any;
+        resizeStrategy: "free" | "lockAspectRatio";
+        lockAspectRatioStrategy: "all" | "diagonal";
         handleShape: "rect" | "circle";
-        handles: ("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "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-b" | "resize-r" | "resize-l" | "resize-t" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[];
     }> & Omit<Readonly<{
+        ui?: boolean;
         tag?: string | any;
         color?: string;
         movable?: boolean;
@@ -319,27 +337,27 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         resizable?: boolean;
         roundable?: boolean;
         threshold?: number;
-        resizeStrategy?: "lockAspectRatio" | "lockAspectRatioDiagonal";
-        handleStrategy?: "point";
+        resizeStrategy?: "free" | "lockAspectRatio";
+        lockAspectRatioStrategy?: "all" | "diagonal";
+        handleStyle?: "8-points" | "4-points";
         handleShape?: "rect" | "circle";
-        handles?: ("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "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-b" | "resize-r" | "resize-l" | "resize-t" | "resize-tl" | "resize-tr" | "resize-bl" | "resize-br" | "rotate-tl" | "rotate-tr" | "rotate-bl" | "rotate-br" | "round-tl" | "round-tr" | "round-bl" | "round-br")[];
         scale?: [number, number];
         offset?: [number, number];
-        hideUi?: boolean;
         initialSize?: boolean;
         borderStyle?: "solid" | "dashed";
         tip?: string | ((type: "size") => string);
     } & {
-        modelValue?: Partial<import("./shared/TransformControls.vue").TransformValue>;
+        modelValue?: Partial<Mce.TransformValue>;
         modelModifiers?: Partial<Record<string, true>>;
     }> & Readonly<{
-        onMove?: ((args_0: import("./shared/TransformControls.vue").TransformValue, args_1: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
-        onStart?: ((args_0: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
-        onEnd?: ((args_0: import("./shared/TransformControls.vue").TransformValue) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: Partial<import("./shared/TransformControls.vue").TransformValue> | undefined) => any) | undefined;
-    }>, "transforming" | "start" | "activeHandle" | ("offset" | "scale" | "movable" | "rotatable" | "resizable" | "threshold" | "tag" | "handleShape" | "handles")> & import("vue").ShallowUnwrapRef<{
+        onMove?: ((context: Mce.TransformContext) => any) | undefined;
+        onStart?: ((context: Mce.TransformContext) => any) | undefined;
+        onEnd?: ((context: Mce.TransformContext) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: Partial<Mce.TransformValue> | undefined) => any) | undefined;
+    }>, "transforming" | "start" | "activeHandle" | ("offset" | "scale" | "ui" | "threshold" | "movable" | "rotatable" | "resizable" | "tag" | "resizeStrategy" | "lockAspectRatioStrategy" | "handleShape" | "handles")> & import("vue").ShallowUnwrapRef<{
         start: (event?: MouseEvent, index?: number) => boolean;
-        activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-l" | "resize-r" | "resize-b" | "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-l" | "resize-r" | "resize-b" | "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-b" | "resize-r" | "resize-l" | "resize-t" | "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-b" | "resize-r" | "resize-l" | "resize-t" | "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>;
         transforming: import("vue").Ref<boolean, boolean>;
     }> & {} & import("vue").ComponentCustomProperties & {} & {
         $slots: {