mce 0.16.7 → 0.17.1

package/dist/plugins/transform.d.ts

@@ -1,5 +1,15 @@
+import type { DragContext } from '../utils';
 declare global {
     namespace Mce {
+        interface InteractionConfig {
+            transform: TransformConfig;
+        }
+        interface TransformConfig {
+            handleShape: 'rect' | 'circle';
+            handleStyle: '8-points' | '4-points';
+            lockAspectRatioStrategy: 'all' | 'diagonal';
+            rotator: boolean;
+        }
         interface TransformValue {
             left: number;
             top: number;
@@ -11,17 +21,39 @@ declare global {
         type TransformHandleDirection = 't' | 'l' | 'r' | 'b';
         type TransformHandleCorner = 'tl' | 'tr' | 'bl' | 'br';
         type TransformHandle = 'move' | `resize-${TransformHandleDirection | TransformHandleCorner}` | `rotate-${TransformHandleCorner}` | `round-${TransformHandleCorner}`;
-        type FlipType = 'horizontal' | 'vertical';
+        interface TransformContext extends DragContext {
+            handle: TransformHandle;
+            value: TransformValue;
+            oldValue: TransformValue;
+        }
+        type MoveDirection = 'left' | 'top' | 'right' | 'bottom';
+        type FlipDirection = 'horizontal' | 'vertical';
+        type TransformType = 'move' | 'resize' | 'rotate' | 'round';
+        interface TransformOptions {
+            event?: MouseEvent;
+            isCorner?: boolean;
+        }
         interface Commands {
             enter: () => void;
-            getTransformValue: () => TransformValue;
-            transform: (handle: Mce.TransformHandle, value: Partial<TransformValue>) => void;
-            flip: (type: Mce.FlipType) => void;
+            getTransform: () => TransformValue;
+            setTransform: (type: TransformType, value: Partial<TransformValue>, options?: TransformOptions) => void;
+            move: (direction: MoveDirection, distance?: number) => void;
+            moveLeft: (distance?: number) => void;
+            moveTop: (distance?: number) => void;
+            moveRight: (distance?: number) => void;
+            moveBottom: (distance?: number) => void;
+            rotate: (deg: number) => void;
+            rotate90: () => void;
+            flip: (direction: FlipDirection) => void;
             flipHorizontal: () => void;
             flipVertical: () => void;
         }
         interface Hotkeys {
             enter: [event: KeyboardEvent];
+            moveLeft: [event: KeyboardEvent];
+            moveTop: [event: KeyboardEvent];
+            moveRight: [event: KeyboardEvent];
+            moveBottom: [event: KeyboardEvent];
             flipHorizontal: [event: KeyboardEvent];
             flipVertical: [event: KeyboardEvent];
         }

package/dist/plugins/typography.d.ts

@@ -0,0 +1,41 @@
+import type { Element2D } from 'modern-canvas';
+import type { FontSource } from 'modern-font';
+import type { NormalizedFill, NormalizedFragment } from 'modern-idoc';
+import type { Ref } from 'vue';
+declare global {
+    namespace Mce {
+        interface Config {
+            typography: TypographyConfig;
+        }
+        interface TypographyConfig {
+            strategy: TypographyStrategy;
+            defaultFont?: FontSource;
+        }
+        type TypographyStrategy = 'autoHeight' | 'autoWidth' | 'fixedWidthHeight' | 'autoFontSize';
+        interface Editor {
+            hasTextSelectionRange: Ref<boolean>;
+            isTextAllSelected: Ref<boolean>;
+        }
+        interface addTextElementOptions extends AddElementOptions {
+            content?: string;
+            style?: Record<string, any>;
+        }
+        interface Commands {
+            startTyping: (event?: MouseEvent) => Promise<boolean>;
+            addTextElement: (options?: addTextElementOptions) => Element2D;
+            handleTextSelection: (textSelection: IndexCharacter[], cb: (arg: Record<string, any>) => boolean) => void;
+            textFontSizeToFit: (element: Element2D, scale?: number) => void;
+            textToFit: (element: Element2D, typography?: TypographyStrategy) => void;
+            getTextStyle: (key: string) => any;
+            setTextStyle: (key: string, value: any) => void;
+            getTextFill: () => NormalizedFill | undefined;
+            setTextFill: (value: NormalizedFill | undefined) => void;
+            setTextContentByEachFragment: (handler: (fragment: NormalizedFragment) => void) => void;
+        }
+        interface Tools {
+            text: [options?: addTextElementOptions];
+        }
+    }
+}
+declare const _default: import("..").Plugin;
+export default _default;

package/dist/plugins/view.d.ts

@@ -1,17 +1,23 @@
+import type { PointerInputEvent } from 'modern-canvas';
 declare global {
     namespace Mce {
-        interface Views {
-            msaa: [];
-            checkerboard: [];
-            pixelGrid: [];
-            ruler: [];
-            scrollbar: [];
-            timeline: [];
-            statusbar: [];
-            frameOutline: [];
+        type Ui = keyof UIConfig;
+        interface PointerDownOptions {
+            allowTopFrame?: boolean;
         }
         interface Commands {
-            view: <T extends keyof Views>(view: T, ...args: Views[T]) => Promise<boolean>;
+            getUiConfig: <T extends Ui>(name: T) => UIConfig[T];
+            setUiVisible: (name: Ui, visible: boolean | 'toggle') => void;
+            isUiVisible: (name: Ui) => boolean;
+            hideUi: (name: Ui) => void;
+            showUi: (name: Ui) => void;
+            toggleUi: (name: Ui) => void;
+            isPanelVisible: (name: string) => boolean;
+            setPanelVisible: (name: string, visible: boolean | 'toggle') => void;
+            hidePanel: (name: string, visible: boolean | 'toggle') => void;
+            showPanel: (name: string, visible: boolean | 'toggle') => void;
+            togglePanel: (name: string, visible: boolean | 'toggle') => void;
+            pointerDown: (e: PointerInputEvent, options?: PointerDownOptions) => void;
         }
     }
 }

package/dist/plugins/zoom.d.ts

@@ -1,21 +1,24 @@
 import type { Element2D } from 'modern-canvas';
 declare global {
     namespace Mce {
-        type ZoomTarget = 'root' | 'selection' | Element2D | Element2D[] | number;
-        type ZoomToMode = 'contain' | 'cover' | 'width' | 'height';
+        interface ViewportConfig {
+            zoom: ZoomConfig;
+        }
+        interface ZoomConfig {
+            strategy: ZoomToStrategy;
+        }
+        type ZoomToTarget = 'root' | 'selection' | Element2D | Element2D[] | number;
+        type ZoomToStrategy = 'cover' | 'contain' | 'containWidth' | 'containHeight';
         interface ZoomToOptions {
             intoView?: boolean;
-            mode?: ZoomToMode;
+            strategy?: ZoomToStrategy;
             duration?: number;
             behavior?: 'smooth' | 'instant';
         }
-        interface Config {
-            zoomToFit: ZoomToMode;
-        }
         interface Commands {
             zoomIn: () => void;
             zoomOut: () => void;
-            zoomTo: (target: ZoomTarget, options?: ZoomToOptions) => Promise<void>;
+            zoomTo: (target: ZoomToTarget, options?: ZoomToOptions) => Promise<void>;
             zoomTo100: () => void;
             zoomToFit: () => void;
             zoomToSelection: (options?: ZoomToOptions) => void;

package/dist/typed-global.d.ts

@@ -1,4 +1,5 @@
 import type { Vector2Like } from 'modern-canvas'
+import type { DeepMaybe } from './types'
 import 'modern-canvas'
 
 declare module 'modern-canvas' {
@@ -18,7 +19,6 @@ declare module 'modern-canvas' {
 declare global {
   namespace Mce {
     interface Editor {}
-    interface Options {}
     interface Slots {}
     interface Events {
       ready: []
@@ -27,6 +27,9 @@ declare global {
     interface Commands {}
     interface Exporters {}
     interface Config {}
+    interface Options extends DeepMaybe<Config> {
+      //
+    }
 
     type State
       = | 'loading'

package/dist/typed-plugins.d.ts

@@ -9,30 +9,26 @@ import './mixins/0.context'
 import './mixins/0.font'
 import './mixins/0.locale'
 import './mixins/1.frame'
-import './mixins/1.hotkey'
 import './mixins/1.screen'
 import './mixins/1.timeline'
 import './mixins/1.upload'
 import './mixins/2.box'
-import './mixins/2.export'
-import './mixins/2.load'
-import './mixins/3.view'
 import './mixins/4.0.node'
-import './mixins/4.1.text'
 import './mixins/4.2.frame'
 import './mixins/4.3.element'
-import './mixins/drawingTool'
+import './mixins/exporter'
+import './mixins/hotkey'
 import './mixins/http'
+import './mixins/loader'
+import './mixins/snapper'
 import './mixins/snapshot'
+import './mixins/tool'
 import './plugins/arrange'
 import './plugins/autoNest'
-import './plugins/copyAs'
 import './plugins/doc'
-import './plugins/drawingTool'
 import './plugins/edit'
 import './plugins/formatPaint'
 import './plugins/frame'
-import './plugins/gif'
 import './plugins/history'
 import './plugins/hover'
 import './plugins/html'
@@ -43,13 +39,8 @@ import './plugins/layers'
 import './plugins/madeWith'
 import './plugins/memory'
 import './plugins/menu'
-import './plugins/move'
-import './plugins/new'
 import './plugins/node'
-import './plugins/open'
-import './plugins/panels'
 import './plugins/pen'
-import './plugins/rotate'
 import './plugins/ruler'
 import './plugins/saveAs'
 import './plugins/scroll'
@@ -61,11 +52,11 @@ import './plugins/smartSelection'
 import './plugins/state'
 import './plugins/statusbar'
 import './plugins/test'
-import './plugins/text'
 import './plugins/timeline'
+import './plugins/tool'
 import './plugins/toolbelt'
 import './plugins/transform'
-import './plugins/ui'
+import './plugins/typography'
 import './plugins/url'
 import './plugins/view'
 import './plugins/zoom'

package/dist/types/helper.d.ts

@@ -0,0 +1,3 @@
+export type DeepMaybe<T> = T extends Function ? T : T extends Array<infer U> ? Array<DeepMaybe<U>> | undefined : T extends object ? {
+    [K in keyof T]?: DeepMaybe<T[K]>;
+} : T | undefined;

package/dist/types/index.d.ts

@@ -1 +1,2 @@
 export * from './box';
+export * from './helper';

package/dist/utils/dnd.d.ts

@@ -1,10 +1,31 @@
-export interface HandleDragOptions {
-    threshold?: number;
-    start?: (event: MouseEvent) => void;
-    move?: (offset: {
+export interface DragContext {
+    [key: string]: any;
+    event: MouseEvent;
+    dragging: boolean;
+    startEvent: MouseEvent;
+    startPoint: {
+        x: number;
+        y: number;
+    };
+    moveEvent: MouseEvent;
+    movePoint: {
+        x: number;
+        y: number;
+    };
+    lastPoint: {
         x: number;
         y: number;
-    }, event: MouseEvent) => void;
-    end?: (event: MouseEvent) => void;
+    };
+    endEvent: MouseEvent;
+    endPoint: {
+        x: number;
+        y: number;
+    };
+}
+export interface DragListenerOptions<T extends DragContext> {
+    threshold?: number;
+    start?: (ctx: T) => void;
+    move?: (ctx: T) => void;
+    end?: (ctx: T) => void;
 }
-export declare function handleDrag(downEvent: MouseEvent, options?: HandleDragOptions): void;
+export declare function addDragListener<T extends DragContext>(downEvent: MouseEvent | undefined, options?: DragListenerOptions<T>): () => void;

package/dist/utils/helper.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentInternalInstance, ComponentPublicInstance, InjectionKey, VNodeChild } from 'vue';
+import type { DeepMaybe } from '../types';
 export declare function noop(..._args: any): void;
 export declare function isClickInsideElement(event: MouseEvent, targetDiv: HTMLElement): boolean;
 export interface TemplateRef {
@@ -17,3 +18,4 @@ export declare function toKebabCase(str?: string): string;
 export declare namespace toKebabCase {
     var cache: Map<string, string>;
 }
+export declare function deepMerge<T>(target: T, ...sources: DeepMaybe<T>[]): T;

package/dist/utils/index.d.ts

@@ -6,4 +6,3 @@ export * from './dnd';
 export * from './helper';
 export * from './image';
 export * from './propsFactory';
-export * from './random';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.16.7",
+  "version": "0.17.1",
   "description": "A headless infinite canvas editor framework built on WebGL rendering, supports exporting to image, video, and PPT. Only the ESM.",
   "author": "wxm",
   "license": "MIT",
@@ -56,12 +56,12 @@
   ],
   "dependencies": {
     "@floating-ui/vue": "^1.1.10",
-    "@vueuse/components": "^14.2.0",
-    "@vueuse/core": "^14.2.0",
+    "@vueuse/components": "^14.2.1",
+    "@vueuse/core": "^14.2.1",
     "diff": "^8.0.3",
     "file-saver": "^2.0.5",
     "lodash-es": "^4.17.23",
-    "modern-canvas": "^0.15.4",
+    "modern-canvas": "^0.15.5",
     "modern-font": "^0.4.4",
     "modern-idoc": "^0.10.21",
     "modern-text": "^1.10.15",
@@ -69,7 +69,6 @@
   },
   "peerDependencies": {
     "lottie-web": "^5",
-    "modern-gif": "^2",
     "typescript": ">=4.7",
     "vue": "^3.5.0",
     "yoga-layout": "^3"
@@ -78,9 +77,6 @@
     "lottie-web": {
       "optional": true
     },
-    "modern-gif": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     },
@@ -93,10 +89,9 @@
     "@types/lodash-es": "^4.17.12",
     "@vitejs/plugin-vue": "^6.0.4",
     "jiti": "^2.6.1",
-    "modern-gif": "^2.0.4",
     "sass-embedded": "^1.97.3",
-    "typedoc": "^0.28.16",
-    "typedoc-plugin-markdown": "^4.9.0"
+    "typedoc": "^0.28.17",
+    "typedoc-plugin-markdown": "^4.10.0"
   },
   "scripts": {
     "build:code": "vite build",

package/dist/mixins/3.view.d.ts

@@ -1,9 +0,0 @@
-declare global {
-    namespace Mce {
-        interface Editor {
-            bindRenderCanvas: (canvas: HTMLCanvasElement, setEventTarget?: HTMLElement) => () => void;
-        }
-    }
-}
-declare const _default: import("..").Mixin;
-export default _default;

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

@@ -1,21 +0,0 @@
-import type { Element2D } from 'modern-canvas';
-import type { NormalizedFill, NormalizedFragment } from 'modern-idoc';
-import type { Ref } from 'vue';
-declare global {
-    namespace Mce {
-        interface Editor {
-            hasTextSelectionRange: Ref<boolean>;
-            isTextAllSelected: Ref<boolean>;
-            handleTextSelection: (textSelection: IndexCharacter[], cb: (arg: Record<string, any>) => boolean) => void;
-            textFontSizeToFit: (element: Element2D, scale?: number) => void;
-            textToFit: (element: Element2D, typography?: Mce.TypographyStrategy) => void;
-            getTextStyle: (key: string) => any;
-            setTextStyle: (key: string, value: any) => void;
-            getTextFill: () => NormalizedFill | undefined;
-            setTextFill: (value: NormalizedFill | undefined) => void;
-            setTextContentByEachFragment: (handler: (fragment: NormalizedFragment) => void) => void;
-        }
-    }
-}
-declare const _default: import("..").Mixin;
-export default _default;

package/dist/mixins/drawingTool.d.ts

@@ -1,25 +0,0 @@
-import type { Vector2Like } from 'modern-canvas';
-import type { Reactive, Ref } from 'vue';
-declare global {
-    namespace Mce {
-        interface DrawingTools {
-        }
-        type DrawingToolHandle = (position: Vector2Like) => {
-            move?: (position: Vector2Like) => void;
-            end?: (position: Vector2Like) => void;
-        } | void;
-        interface DrawingTool {
-            name: string;
-            handle?: DrawingToolHandle;
-        }
-        interface Editor {
-            drawingTools: Reactive<Map<string, Mce.DrawingTool>>;
-            activeDrawingTool: Ref<Mce.DrawingTool>;
-            registerDrawingTool: (tool: Mce.DrawingTool | Mce.DrawingTool[]) => void;
-            unregisterDrawingTool: (tool: string) => void;
-            setActiveDrawingTool: (tool: string | keyof DrawingTools | undefined) => void;
-        }
-    }
-}
-declare const _default: import("..").Mixin;
-export default _default;

package/dist/plugins/copyAs.d.ts

@@ -1,11 +0,0 @@
-declare global {
-    namespace Mce {
-        interface CopyAsOptions extends ExportOptions {
-        }
-        interface Commands {
-            copyAs: (type: keyof Exporters, options?: CopyAsOptions) => Promise<void>;
-        }
-    }
-}
-declare const _default: import("..").Plugin;
-export default _default;

package/dist/plugins/gif.d.ts

@@ -1,12 +0,0 @@
-declare global {
-    namespace Mce {
-        interface Options {
-            gifWorkerUrl?: string;
-        }
-        interface Exporters {
-            gif: Promise<Blob>;
-        }
-    }
-}
-declare const _default: import("..").Plugin;
-export default _default;

package/dist/plugins/move.d.ts

@@ -1,20 +0,0 @@
-declare global {
-    namespace Mce {
-        type MoveCommandDirection = 'left' | 'top' | 'right' | 'bottom';
-        interface Commands {
-            move: (direction: MoveCommandDirection, distance?: number) => void;
-            moveLeft: (distance?: number) => void;
-            moveTop: (distance?: number) => void;
-            moveRight: (distance?: number) => void;
-            moveBottom: (distance?: number) => void;
-        }
-        interface Hotkeys {
-            moveLeft: [event: KeyboardEvent];
-            moveTop: [event: KeyboardEvent];
-            moveRight: [event: KeyboardEvent];
-            moveBottom: [event: KeyboardEvent];
-        }
-    }
-}
-declare const _default: import("..").Plugin;
-export default _default;

package/dist/plugins/new.d.ts

@@ -1,12 +0,0 @@
-declare global {
-    namespace Mce {
-        interface Commands {
-            new: () => void;
-        }
-        interface Hotkeys {
-            new: [event: KeyboardEvent];
-        }
-    }
-}
-declare const _default: import("..").Plugin;
-export default _default;

package/dist/plugins/open.d.ts

@@ -1,12 +0,0 @@
-declare global {
-    namespace Mce {
-        interface Commands {
-            open: () => Promise<void>;
-        }
-        interface Hotkeys {
-            open: [event: KeyboardEvent];
-        }
-    }
-}
-declare const _default: import("..").Plugin;
-export default _default;

package/dist/plugins/panels.d.ts

@@ -1,13 +0,0 @@
-declare global {
-    namespace Mce {
-        interface Panels {
-        }
-        interface Config extends Record<keyof Panels, boolean> {
-        }
-        interface Commands {
-            panels: <T extends keyof Panels>(panel: T, ...args: Panels[T]) => Promise<boolean>;
-        }
-    }
-}
-declare const _default: import("..").Plugin;
-export default _default;

package/dist/plugins/rotate.d.ts

@@ -1,10 +0,0 @@
-declare global {
-    namespace Mce {
-        interface Commands {
-            rotate: (deg: number) => void;
-            rotate90: () => void;
-        }
-    }
-}
-declare const _default: import("..").Plugin;
-export default _default;

package/dist/plugins/text.d.ts

@@ -1,17 +0,0 @@
-import type { Element2D } from 'modern-canvas';
-declare global {
-    namespace Mce {
-        interface addTextElementOptions extends AddElementOptions {
-            content?: string;
-            style?: Record<string, any>;
-        }
-        interface Commands {
-            addTextElement: (options?: addTextElementOptions) => Element2D;
-        }
-        interface DrawingTools {
-            text: [options?: addTextElementOptions];
-        }
-    }
-}
-declare const _default: import("../plugin").Plugin;
-export default _default;

package/dist/plugins/ui.d.ts

@@ -1,20 +0,0 @@
-import type { PointerInputEvent } from 'modern-canvas';
-declare global {
-    namespace Mce {
-        interface PointerDownOptions {
-            allowTopFrame?: boolean;
-        }
-        interface Commands {
-            pointerDown: (e: PointerInputEvent, options?: PointerDownOptions) => void;
-            startTyping: (e?: MouseEvent | PointerEvent) => Promise<boolean>;
-            startTransform: (e?: MouseEvent | PointerEvent) => boolean;
-            openContextMenu: (e?: MouseEvent | PointerEvent) => boolean;
-            layerScrollIntoView: () => boolean;
-        }
-        interface Events {
-            pointerMove: [event: PointerEvent];
-        }
-    }
-}
-declare const _default: import("..").Plugin;
-export default _default;

package/dist/utils/random.d.ts

@@ -1,3 +0,0 @@
-export declare const getRandomValues: <T extends ArrayBufferView>(array: T) => T;
-export declare const uint32: () => number;
-export declare function uuidv4(): string;