mce 0.13.4 → 0.13.6

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

@@ -1,15 +1,17 @@
 import type { OrientedBoundingBox } from '../types';
 import { Editor } from '../editor';
 type __VLS_Slots = {
-    selector?: (props: {
+    'selector'?: (props: {
         box: OrientedBoundingBox;
     }) => void;
-    transformer?: (props: {
+    'transformer'?: (props: {
         box: Partial<OrientedBoundingBox>;
     }) => void;
-    floatbar?: () => void;
-    drawboard?: () => void;
-    default?: () => void;
+    'floatbar'?: () => void;
+    'floatbar-top'?: () => void;
+    'floatbar-bottom'?: () => void;
+    'drawboard'?: () => void;
+    'default'?: () => void;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     editor: typeof Editor;
@@ -21,13 +23,15 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: import("vue").PropType<import("..").ActiveStrategy>;
         default: import("..").ActiveStrategy;
     };
+    doubleclickStrategy: {
+        type: import("vue").PropType<import("..").DoubleclickStrategy>;
+        default: import("..").DoubleclickStrategy;
+    };
     hoverStrategy: {
         type: import("vue").PropType<import("..").HoverStrategy>;
         default: import("..").HoverStrategy;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "dblclick:drawboard": (event: Event) => any;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     editor: typeof Editor;
     resizeStrategy: {
         type: import("vue").PropType<import("..").ResizeStrategy>;
@@ -37,15 +41,18 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: import("vue").PropType<import("..").ActiveStrategy>;
         default: import("..").ActiveStrategy;
     };
+    doubleclickStrategy: {
+        type: import("vue").PropType<import("..").DoubleclickStrategy>;
+        default: import("..").DoubleclickStrategy;
+    };
     hoverStrategy: {
         type: import("vue").PropType<import("..").HoverStrategy>;
         default: import("..").HoverStrategy;
     };
-}>> & Readonly<{
-    "onDblclick:drawboard"?: ((event: Event) => any) | undefined;
-}>, {
+}>> & Readonly<{}>, {
     resizeStrategy: import("..").ResizeStrategy;
     activeStrategy: import("..").ActiveStrategy;
+    doubleclickStrategy: import("..").DoubleclickStrategy;
     hoverStrategy: import("..").HoverStrategy;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -4,10 +4,7 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    location: {
-        type: import("vue").PropType<import("@floating-ui/vue").Side | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" | "bottom-end" | "bottom-start">;
-        default: NonNullable<import("@floating-ui/vue").Side | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" | "bottom-end" | "bottom-start">;
-    };
+    location: import("vue").PropType<import("@floating-ui/vue").Side | import("@floating-ui/vue").AlignedPlacement>;
     offset: {
         type: import("vue").PropType<number>;
         default: number;
@@ -30,10 +27,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>, {
     updateLocation: typeof updateLocation;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    location: {
-        type: import("vue").PropType<import("@floating-ui/vue").Side | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" | "bottom-end" | "bottom-start">;
-        default: NonNullable<import("@floating-ui/vue").Side | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" | "bottom-end" | "bottom-start">;
-    };
+    location: import("vue").PropType<import("@floating-ui/vue").Side | import("@floating-ui/vue").AlignedPlacement>;
     offset: {
         type: import("vue").PropType<number>;
         default: number;
@@ -55,7 +49,6 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & 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;
     middlewares: any[] | ("shift" | "flip" | "offset")[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,89 @@
+import type { ImageFillCropRect } from 'modern-idoc';
+/**
+ * TODO 撤回无法重渲
+ */
+type __VLS_Props = {
+    image: string;
+    minScale?: number;
+    maxScale?: number;
+};
+declare function ok(): void;
+declare function cancel(): void;
+declare function applySourceTransformToStyle(): void;
+type __VLS_ModelProps = {
+    /**
+     * CropRect (value are based on CropRect !!!)
+     *
+     * @example
+     *
+     * cropRect: { left: 0.3, top: 0.3, right: 0.3, bottom: 0.3 }
+     *
+     * Before:
+     *
+     *       View (Source)
+     *     |---0---|
+     *     |       |
+     *     0       0
+     *     |       |
+     *     |---0---|
+     *
+     * After:
+     *
+     *  Source
+     *  |----- 0 -----|
+     *  |    View     |
+     *  |  |--0.3--|  |
+     *  |  |       |  |
+     *  0 0.3     0.3 0
+     *  |  |       |  |
+     *  |  |--0.3--|  |
+     *  |             |
+     *  |----- 0 -----|
+     */
+    modelValue?: ImageFillCropRect;
+    'style'?: Record<string, any>;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_5: {
+    scale: number;
+    ok: typeof ok;
+    cancel: typeof cancel;
+    applySourceTransformToStyle: typeof applySourceTransformToStyle;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    end: () => any;
+    start: () => any;
+    "update:modelValue": (value: ImageFillCropRect) => any;
+    "update:transform": (args_0: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    }) => any;
+    "update:style": (value: Record<string, any>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onEnd?: (() => any) | undefined;
+    onStart?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: ImageFillCropRect) => any) | undefined;
+    "onUpdate:transform"?: ((args_0: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    }) => any) | undefined;
+    "onUpdate:style"?: ((value: Record<string, any>) => any) | undefined;
+}>, {
+    minScale: number;
+    maxScale: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+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/Transformable.vue.d.ts

@@ -27,7 +27,7 @@ declare var __VLS_7: {
         onPointerdown: typeof start;
     };
     start: typeof start;
-}, __VLS_9: {
+}, __VLS_14: {
     box: {
         left: number;
         top: number;
@@ -40,7 +40,7 @@ declare var __VLS_7: {
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
 } & {
-    svg?: (props: typeof __VLS_9) => any;
+    svg?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     start: typeof start;

package/dist/composables/strategy.d.ts

@@ -1,10 +1,14 @@
 import type { Element2D, PointerInputEvent } from 'modern-canvas';
 import type { PropType } from 'vue';
+import type { Editor } from '../editor';
 export interface ActiveStrategyContext {
     element: Element2D | undefined;
-    oldElement: Element2D | undefined;
     event: PointerInputEvent;
-    isExcluded: (element: Element2D) => boolean;
+    editor: Editor;
+}
+export interface DoubleclickStrategyContext {
+    event: PointerInputEvent;
+    editor: Editor;
 }
 export interface HoverStrategyContext extends ActiveStrategyContext {
 }
@@ -13,6 +17,7 @@ export type ActiveStrategy = (context: ActiveStrategyContext) => {
     element: Element2D | undefined;
     state: Mce.State | undefined;
 } | Element2D | undefined;
+export type DoubleclickStrategy = (context: DoubleclickStrategyContext) => Mce.State | undefined;
 export type HoverStrategy = (context: HoverStrategyContext) => {
     element: Element2D | undefined;
     cursor: string | undefined;
@@ -20,6 +25,7 @@ export type HoverStrategy = (context: HoverStrategyContext) => {
 export declare const makeMceStrategyProps: <Defaults extends {
     resizeStrategy?: unknown;
     activeStrategy?: unknown;
+    doubleclickStrategy?: unknown;
     hoverStrategy?: unknown;
 } = {}>(defaults?: Defaults | undefined) => {
     resizeStrategy: unknown extends Defaults["resizeStrategy"] ? PropType<ResizeStrategy> : {
@@ -30,6 +36,10 @@ export declare const makeMceStrategyProps: <Defaults extends {
         type: PropType<unknown extends Defaults["activeStrategy"] ? ActiveStrategy : ActiveStrategy | Defaults["activeStrategy"]>;
         default: unknown extends Defaults["activeStrategy"] ? ActiveStrategy : ActiveStrategy | Defaults["activeStrategy"];
     };
+    doubleclickStrategy: unknown extends Defaults["doubleclickStrategy"] ? PropType<DoubleclickStrategy> : {
+        type: PropType<unknown extends Defaults["doubleclickStrategy"] ? DoubleclickStrategy : DoubleclickStrategy | Defaults["doubleclickStrategy"]>;
+        default: unknown extends Defaults["doubleclickStrategy"] ? DoubleclickStrategy : DoubleclickStrategy | Defaults["doubleclickStrategy"];
+    };
     hoverStrategy: unknown extends Defaults["hoverStrategy"] ? PropType<HoverStrategy> : {
         type: PropType<unknown extends Defaults["hoverStrategy"] ? HoverStrategy : HoverStrategy | Defaults["hoverStrategy"]>;
         default: unknown extends Defaults["hoverStrategy"] ? HoverStrategy : HoverStrategy | Defaults["hoverStrategy"];
@@ -37,4 +47,5 @@ export declare const makeMceStrategyProps: <Defaults extends {
 };
 export declare const defaultResizeStrategy: ResizeStrategy;
 export declare const defaultActiveStrategy: ActiveStrategy;
+export declare const defaultDoubleclickStrategy: DoubleclickStrategy;
 export declare const defaultHoverStrategy: HoverStrategy;

package/dist/editor.d.ts

@@ -4,6 +4,7 @@ import type { App, InjectionKey } from 'vue';
 import { Observable } from 'modern-idoc';
 export interface Options extends Mce.Options {
     debug?: boolean;
+    showMadeWith?: boolean;
     plugins?: Plugin[];
     configCacheInLocal?: boolean;
 }
@@ -14,6 +15,7 @@ export interface Events extends Mce.Events, ObservableEvents {
 export declare class Editor extends Observable<Events> {
     static injectionKey: InjectionKey<Editor>;
     debug: import("vue").Ref<boolean, boolean>;
+    showMadeWith: 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>;

package/dist/index.css

@@ -150,6 +150,106 @@
   overflow: hidden;
   text-overflow: ellipsis;
   background-color: rgba(var(--mce-theme-surface), 1);
+}.mce-transformable {
+  left: 0;
+  top: 0;
+}
+.mce-transformable__svg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+  color: rgb(var(--mce-theme-primary));
+  stroke: currentColor;
+}
+.mce-transformable__diagonal {
+  stroke-width: 1px;
+  stroke-dasharray: 2px;
+  visibility: hidden;
+}
+.mce-transformable__rect {
+  stroke-width: 1px;
+}
+.mce-transformable__handle {
+  fill: white;
+  stroke-width: 1px;
+  pointer-events: none;
+}
+.mce-transformable__handle-rect {
+  stroke-width: 1px;
+  fill: transparent;
+  stroke: transparent;
+}
+.mce-transformable__tip {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, calc(100% + 8px));
+  background-color: rgb(var(--mce-theme-primary));
+  color: rgb(var(--mce-theme-on-primary));
+  font-size: 12px;
+  padding: 2px 4px;
+  border-radius: 3px;
+  text-wrap: nowrap;
+}
+.mce-transformable--dashed .mce-transformable__rect {
+  stroke-dasharray: 4px;
+}
+.mce-transformable--resizing .mce-transformable__diagonal {
+  visibility: visible;
+}
+.mce-transformable--moving .mce-transformable__handle {
+  visibility: hidden;
+}
+.mce-transformable--moving .mce-transformable__handle-rect {
+  visibility: hidden;
+}
+.mce-transformable--moving .mce-transformable__rect {
+  opacity: 0.4;
+  stroke-width: 0.5px;
+}
+.mce-transformable--moving .mce-transformable__svg-slot {
+  opacity: 0.4;
+  stroke-width: 0.5px;
+}
+.mce-transformable--hide-ui .mce-transformable__handle {
+  visibility: hidden;
+}
+.mce-transformable--hide-ui .mce-transformable__handle-rect {
+  visibility: hidden;
+}
+.mce-transformable--hide-ui .mce-transformable__rect {
+  visibility: hidden;
+}.mce-cropper {
+  pointer-events: auto;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.mce-cropper__source {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform-origin: top left;
+}
+.mce-cropper__source canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.mce-cropper__transformable {
+  position: absolute;
+  color: rgba(var(--mce-theme-primary), 1);
+  opacity: 0.5;
+}
+.mce-cropper__transformable_rect {
+  width: 100%;
+  height: 100%;
 }.mce-frame {
   position: absolute;
 }
@@ -355,6 +455,26 @@
 }
 .mce-layers:hover .mce-layer:not(.mce-layer--root) .mce-layer__expand {
   opacity: 1;
+}.mce-made-with {
+  pointer-events: auto !important;
+  position: absolute;
+  right: 18px;
+  bottom: 18px;
+  opacity: 0.38;
+  color: #000;
+  text-align: center;
+  font-size: 12px;
+  line-height: 1;
+  border: 2px solid currentColor;
+  padding: 2px 4px;
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  text-decoration: none;
+}
+.mce-made-with div:last-child {
+  font-weight: bold;
+  letter-spacing: 1px;
 }.mce-tooltip {
   background: rgb(var(--mce-theme-surface-variant));
   color: rgb(var(--mce-theme-on-surface-variant));
@@ -450,79 +570,6 @@
 }
 .mce-scrollbar__thumb--active, .mce-scrollbar__thumb:hover {
   background-color: rgba(var(--mce-theme-on-background), var(--mce-medium-emphasis-opacity));
-}.mce-transformable {
-  left: 0;
-  top: 0;
-}
-.mce-transformable__svg {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-  pointer-events: none;
-  color: rgb(var(--mce-theme-primary));
-  stroke: currentColor;
-}
-.mce-transformable__diagonal {
-  stroke-width: 1px;
-  stroke-dasharray: 2px;
-  visibility: hidden;
-}
-.mce-transformable__rect {
-  stroke-width: 1px;
-}
-.mce-transformable__handle {
-  fill: white;
-  stroke-width: 1px;
-  pointer-events: none;
-}
-.mce-transformable__handle-rect {
-  stroke-width: 1px;
-  fill: transparent;
-  stroke: transparent;
-}
-.mce-transformable__tip {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translate(-50%, calc(100% + 8px));
-  background-color: rgb(var(--mce-theme-primary));
-  color: rgb(var(--mce-theme-on-primary));
-  font-size: 12px;
-  padding: 2px 4px;
-  border-radius: 3px;
-  text-wrap: nowrap;
-}
-.mce-transformable--dashed .mce-transformable__rect {
-  stroke-dasharray: 4px;
-}
-.mce-transformable--lockAspectRatio.mce-transformable--resizing .mce-transformable__diagonal, .mce-transformable--lockAspectRatioDiagonal.mce-transformable--resizing .mce-transformable__diagonal {
-  visibility: visible;
-}
-.mce-transformable--moving .mce-transformable__handle {
-  visibility: hidden;
-}
-.mce-transformable--moving .mce-transformable__handle-rect {
-  visibility: hidden;
-}
-.mce-transformable--moving .mce-transformable__rect {
-  opacity: 0.4;
-  stroke-width: 0.5px;
-}
-.mce-transformable--moving .mce-transformable__svg-slot {
-  opacity: 0.4;
-  stroke-width: 0.5px;
-}
-.mce-transformable--hide-ui .mce-transformable__handle {
-  visibility: hidden;
-}
-.mce-transformable--hide-ui .mce-transformable__handle-rect {
-  visibility: hidden;
-}
-.mce-transformable--hide-ui .mce-transformable__rect {
-  visibility: hidden;
 }.mce-parent-element-obb {
   position: absolute;
   pointer-events: none;

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import './typed-global.d.ts';
 import './typed-plugins.d.ts';
 export { default as EditorLayout } from './components/EditorLayout.vue';
 export { default as EditorLayers } from './components/Layers.vue';
+export { default as Cropper } from './components/shared/Cropper.vue';
 export { default as Dialog } from './components/shared/Dialog.vue';
 export { default as EditorLayoutItem } from './components/shared/LayoutItem.vue';
 export { default as Menu } from './components/shared/Menu.vue';