mce 0.12.5 → 0.13.1

package/README.md

@@ -46,14 +46,15 @@ npm i mce
     ],
     theme: 'system',
     viewMode: 'edgeless',
-    clipboard: true,
+    watermark: '/example.jpg',
     checkerboard: true,
+    checkerboardStyle: 'grid',
     pixelGrid: true,
+    pixelate: true,
     camera: true,
     ruler: true,
     scrollbar: true,
     statusbar: true,
-    wheelZoom: false,
     frameGap: 48,
     typographyStrategy: 'autoHeight',
     handleShape: 'rect',
@@ -61,6 +62,9 @@ npm i mce
     localDb: false,
     customUpload: async (blob) => URL.createObjectURL(blob),
     customContextMenu: (menu) => menu,
+    locale: {
+      locale: 'zhHans', // default 'en'
+    },
     defaultFont: { family: 'SourceHanSansCN-Normal', src: '/SourceHanSansCN-Normal.woff' },
     doc: {
       children: [

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

@@ -12,6 +12,13 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: import("vue").PropType<number>;
         default: number;
     };
+    middlewares: Omit<{
+        type: import("vue").PropType<("offset" | "flip" | "shift")[]>;
+        default: () => string[];
+    }, "type" | "default"> & {
+        type: import("vue").PropType<any[] | ("shift" | "offset" | "flip")[]>;
+        default: any[] | ("shift" | "offset" | "flip")[];
+    };
     target: import("vue").PropType<{
         x: number;
         y: number;
@@ -31,6 +38,13 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: import("vue").PropType<number>;
         default: number;
     };
+    middlewares: Omit<{
+        type: import("vue").PropType<("offset" | "flip" | "shift")[]>;
+        default: () => string[];
+    }, "type" | "default"> & {
+        type: import("vue").PropType<any[] | ("shift" | "offset" | "flip")[]>;
+        default: any[] | ("shift" | "offset" | "flip")[];
+    };
     target: import("vue").PropType<{
         x: number;
         y: number;
@@ -40,9 +54,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: undefined;
     };
 }>> & Readonly<{}>, {
+    offset: number;
     location: import("@floating-ui/vue").Side | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" | "bottom-end" | "bottom-start";
     attach: string | boolean | Element | null | undefined;
-    offset: number;
+    middlewares: any[] | ("shift" | "offset" | "flip")[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -0,0 +1,41 @@
+import type { Node } from 'modern-canvas';
+import type { PropType } from 'vue';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    root: BooleanConstructor;
+    node: {
+        type: PropType<Node>;
+        required: true;
+    };
+    active: BooleanConstructor;
+    indent: {
+        type: NumberConstructor;
+        default: number;
+    };
+    opened: {
+        type: PropType<boolean>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:opened": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    root: BooleanConstructor;
+    node: {
+        type: PropType<Node>;
+        required: true;
+    };
+    active: BooleanConstructor;
+    indent: {
+        type: NumberConstructor;
+        default: number;
+    };
+    opened: {
+        type: PropType<boolean>;
+    };
+}>> & Readonly<{
+    "onUpdate:opened"?: ((value: boolean) => any) | undefined;
+}>, {
+    root: boolean;
+    active: boolean;
+    indent: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -93,11 +93,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         }, string, {
             color: string;
             visibility: "visible" | "none" | "auto";
+            resizable: boolean;
             tag: string | any;
             resizeStrategy: "free" | "aspectRatio" | "diagonalAspectRatio";
             moveable: boolean;
             rotatable: boolean;
-            resizable: boolean;
             threshold: number;
             handleStrategy: "default" | "point";
             handleColor: string;
@@ -125,11 +125,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     } & Readonly<{
         color: string;
         visibility: "visible" | "none" | "auto";
+        resizable: boolean;
         tag: string | any;
         resizeStrategy: "free" | "aspectRatio" | "diagonalAspectRatio";
         moveable: boolean;
         rotatable: boolean;
-        resizable: boolean;
         threshold: number;
         handleStrategy: "default" | "point";
         handleColor: string;
@@ -156,7 +156,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         onEnd?: ((args_0: OrientedBoundingBox) => any) | undefined;
         onStart?: ((args_0: OrientedBoundingBox) => any) | undefined;
         "onUpdate:modelValue"?: ((args_0: OrientedBoundingBox) => any) | undefined;
-    }>, "start" | "transforming" | "activeHandle" | ("color" | "visibility" | "tag" | "resizeStrategy" | "moveable" | "rotatable" | "resizable" | "threshold" | "handleStrategy" | "handleColor" | "handles")> & import("vue").ShallowUnwrapRef<{
+    }>, "start" | "transforming" | "activeHandle" | ("color" | "visibility" | "resizable" | "tag" | "resizeStrategy" | "moveable" | "rotatable" | "threshold" | "handleStrategy" | "handleColor" | "handles")> & import("vue").ShallowUnwrapRef<{
         start: (event?: MouseEvent, index?: number) => boolean;
         activeHandle: import("vue").Ref<("move" | "rotate-top-left" | "rotate-top-right" | "rotate-bottom-left" | "rotate-bottom-right" | "resize-top" | "resize-right" | "resize-bottom" | "resize-left" | "resize-top-left" | "resize-top-right" | "resize-bottom-left" | "resize-bottom-right") | undefined, ("move" | "rotate-top-left" | "rotate-top-right" | "rotate-bottom-left" | "rotate-bottom-right" | "resize-top" | "resize-right" | "resize-bottom" | "resize-left" | "resize-top-left" | "resize-top-right" | "resize-bottom-left" | "resize-bottom-right") | undefined>;
         transforming: import("vue").Ref<boolean, boolean>;
@@ -164,11 +164,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         $slots: {
             default?: (props: {
                 value: Partial<OrientedBoundingBox> | undefined;
-                moveProps: {
+                props: {
                     onPointerdown: (event?: MouseEvent, index?: number) => boolean;
-                    style: {
-                        cursor: string;
-                    };
                 };
                 start: (event?: MouseEvent, index?: number) => boolean;
             }) => any;

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

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/shared/Dialog.vue.d.ts

@@ -13,6 +13,10 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     location: import("vue").PropType<import("@floating-ui/vue").Side | import("@floating-ui/vue").AlignedPlacement>;
     offset: NumberConstructor;
+    middlewares: {
+        type: import("vue").PropType<("offset" | "flip" | "shift")[]>;
+        default: () => string[];
+    };
     target: import("vue").PropType<{
         x: number;
         y: number;
@@ -32,6 +36,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     location: import("vue").PropType<import("@floating-ui/vue").Side | import("@floating-ui/vue").AlignedPlacement>;
     offset: NumberConstructor;
+    middlewares: {
+        type: import("vue").PropType<("offset" | "flip" | "shift")[]>;
+        default: () => string[];
+    };
     target: import("vue").PropType<{
         x: number;
         y: number;
@@ -47,6 +55,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
 }>, {
     attach: string | boolean | Element | null | undefined;
+    middlewares: ("shift" | "offset" | "flip")[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -0,0 +1,26 @@
+import type { OrientedBoundingBox } from '../../types';
+type __VLS_Props = {
+    title?: string;
+    defaultTransform?: Partial<OrientedBoundingBox>;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_20: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -20,6 +20,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     persistent: BooleanConstructor;
     location: PropType<import("@floating-ui/vue").Side | import("@floating-ui/vue").AlignedPlacement>;
     offset: NumberConstructor;
+    middlewares: {
+        type: PropType<("offset" | "flip" | "shift")[]>;
+        default: () => string[];
+    };
     target: PropType<{
         x: number;
         y: number;
@@ -43,6 +47,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     persistent: BooleanConstructor;
     location: PropType<import("@floating-ui/vue").Side | import("@floating-ui/vue").AlignedPlacement>;
     offset: NumberConstructor;
+    middlewares: {
+        type: PropType<("offset" | "flip" | "shift")[]>;
+        default: () => string[];
+    };
     target: PropType<{
         x: number;
         y: number;
@@ -59,6 +67,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     "onClick:item"?: ((item: MenuItem, event: MouseEvent) => any) | undefined;
 }>, {
     attach: string | boolean | Element | null | undefined;
+    middlewares: ("shift" | "offset" | "flip")[];
     openOnHover: boolean;
     persistent: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -12,6 +12,10 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     location: import("vue").PropType<import("@floating-ui/vue").Side | import("@floating-ui/vue").AlignedPlacement>;
     offset: NumberConstructor;
+    middlewares: {
+        type: import("vue").PropType<("offset" | "flip" | "shift")[]>;
+        default: () => string[];
+    };
     target: import("vue").PropType<{
         x: number;
         y: number;
@@ -35,6 +39,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     location: import("vue").PropType<import("@floating-ui/vue").Side | import("@floating-ui/vue").AlignedPlacement>;
     offset: NumberConstructor;
+    middlewares: {
+        type: import("vue").PropType<("offset" | "flip" | "shift")[]>;
+        default: () => string[];
+    };
     target: import("vue").PropType<{
         x: number;
         y: number;
@@ -52,6 +60,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     "onUpdate:modelValue"?: ((val: boolean) => any) | undefined;
 }>, {
     attach: string | boolean | Element | null | undefined;
+    middlewares: ("shift" | "offset" | "flip")[];
     modelValue: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -19,6 +19,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: import("vue").PropType<number>;
         default: number;
     };
+    middlewares: {
+        type: import("vue").PropType<("offset" | "flip" | "shift")[]>;
+        default: () => string[];
+    };
     target: import("vue").PropType<{
         x: number;
         y: number;
@@ -43,6 +47,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: import("vue").PropType<number>;
         default: number;
     };
+    middlewares: {
+        type: import("vue").PropType<("offset" | "flip" | "shift")[]>;
+        default: () => string[];
+    };
     target: import("vue").PropType<{
         x: number;
         y: number;
@@ -57,9 +65,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
 }>, {
+    offset: number;
     location: import("@floating-ui/vue").Side | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" | "bottom-end" | "bottom-start";
     attach: string | boolean | Element | null | undefined;
-    offset: number;
+    middlewares: ("shift" | "offset" | "flip")[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -21,11 +21,8 @@ type __VLS_Props = {
 declare function start(event?: MouseEvent, index?: number): boolean;
 declare var __VLS_7: {
     value: Partial<OrientedBoundingBox> | undefined;
-    moveProps: {
+    props: {
         onPointerdown: typeof start;
-        style: {
-            cursor: string;
-        };
     };
     start: typeof start;
 }, __VLS_9: {
@@ -59,11 +56,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
 }>, {
     color: string;
     visibility: "visible" | "none" | "auto";
+    resizable: boolean;
     tag: string | any;
     resizeStrategy: "free" | "aspectRatio" | "diagonalAspectRatio";
     moveable: boolean;
     rotatable: boolean;
-    resizable: boolean;
     threshold: number;
     handleStrategy: "default" | "point";
     handleColor: string;

package/dist/composables/index.d.ts

@@ -1,6 +1,7 @@
 export * from './editor';
 export * from './icon';
 export * from './icons';
+export * from './layer';
 export * from './layout';
 export * from './menu';
 export * from './overlay';

package/dist/composables/layer.d.ts

@@ -0,0 +1,33 @@
+import type { Node } from 'modern-canvas';
+import type { ComponentInternalInstance, InjectionKey, Ref } from 'vue';
+interface LayerProvide {
+    selecting: Ref<boolean>;
+    sortedSelection: Ref<Node[]>;
+    register: (vm: ComponentInternalInstance, options: {
+        id: string;
+        dom: Ref<HTMLElement | undefined>;
+        opened: Ref<boolean>;
+    }) => void;
+    unregister: (id: string) => void;
+}
+export declare const MceLayerKey: InjectionKey<LayerProvide>;
+export declare const MceLayerItemKey: InjectionKey<{
+    id: string;
+}>;
+export declare function createLayer(options: {
+    sortedSelection: Ref<Node[]>;
+}): {
+    selecting: Ref<boolean, boolean>;
+    openedItems: import("vue").Reactive<Map<string, Ref<boolean, boolean>>>;
+    domItems: import("vue").Reactive<Map<string, Ref<HTMLElement | undefined, HTMLElement | undefined>>>;
+};
+export declare function useLayerItem(options: {
+    id: string;
+    node: Ref<Node>;
+    opened: Ref<boolean>;
+    dom: Ref<HTMLElement | undefined>;
+}): {
+    selecting: Ref<boolean>;
+    sortedSelection: Ref<Node[]>;
+};
+export {};

package/dist/composables/overlay.d.ts

@@ -15,6 +15,7 @@ export declare const MceOverlaySymbol: InjectionKey<MceOverlayProvide>;
 export declare const makeMceOverlayProps: <Defaults extends {
     location?: unknown;
     offset?: unknown;
+    middlewares?: unknown;
     target?: unknown;
     attach?: unknown;
 } = {}>(defaults?: Defaults | undefined) => {
@@ -26,6 +27,16 @@ export declare const makeMceOverlayProps: <Defaults extends {
         type: PropType<unknown extends Defaults["offset"] ? number : number | Defaults["offset"]>;
         default: unknown extends Defaults["offset"] ? number : number | Defaults["offset"];
     };
+    middlewares: unknown extends Defaults["middlewares"] ? {
+        type: PropType<("offset" | "flip" | "shift")[]>;
+        default: () => string[];
+    } : Omit<{
+        type: PropType<("offset" | "flip" | "shift")[]>;
+        default: () => string[];
+    }, "type" | "default"> & {
+        type: PropType<unknown extends Defaults["middlewares"] ? ("shift" | "offset" | "flip")[] : ("shift" | "offset" | "flip")[] | Defaults["middlewares"]>;
+        default: unknown extends Defaults["middlewares"] ? ("shift" | "offset" | "flip")[] : ("shift" | "offset" | "flip")[] | Defaults["middlewares"];
+    };
     target: unknown extends Defaults["target"] ? PropType<{
         x: number;
         y: number;