mce 0.15.34 → 0.15.36

package/README.md

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

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

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

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

@@ -1,9 +1,4 @@
 import type { TransformValue } from './shared/TransformControls.vue';
-import { Aabb2D } from 'modern-canvas';
-type __VLS_Props = {
-    resizeStrategy?: 'lockAspectRatio' | 'lockAspectRatioDiagonal';
-    selectedArea?: Aabb2D;
-};
 declare var __VLS_14: {
     box: {
         left: number;
@@ -14,7 +9,7 @@ declare var __VLS_14: {
         borderRadius: number;
     };
 }, __VLS_16: {
-    box: {
+    transform: {
         left: number;
         top: number;
         width: number;
@@ -24,12 +19,12 @@ declare var __VLS_14: {
     };
 };
 type __VLS_Slots = {} & {
-    transformable?: (props: typeof __VLS_14) => any;
+    transform?: (props: typeof __VLS_14) => any;
 } & {
     default?: (props: typeof __VLS_16) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
-    transformable: Readonly<import("vue").ShallowRef<({
+declare const __VLS_base: import("vue").DefineComponent<{}, {
+    transformControls: Readonly<import("vue").ShallowRef<({
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: {
@@ -50,7 +45,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
             readonly hideUi?: boolean | undefined;
             readonly initialSize?: boolean | undefined;
             readonly borderStyle?: "solid" | "dashed" | undefined;
-            readonly tipFormat?: ((type: "size") => string) | undefined;
+            readonly tip?: string | ((type: "size") => string) | undefined;
             readonly modelValue?: Partial<TransformValue> | undefined;
             readonly modelModifiers?: Partial<Record<string, true>> | undefined;
             readonly onMove?: ((args_0: TransformValue, args_1: TransformValue) => any) | undefined;
@@ -90,7 +85,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
             hideUi?: boolean;
             initialSize?: boolean;
             borderStyle?: "solid" | "dashed";
-            tipFormat?: (type: "size") => string;
+            tip?: string | ((type: "size") => string);
         } & {
             modelValue?: Partial<TransformValue>;
             modelModifiers?: Partial<Record<string, true>>;
@@ -166,7 +161,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         hideUi?: boolean;
         initialSize?: boolean;
         borderStyle?: "solid" | "dashed";
-        tipFormat?: (type: "size") => string;
+        tip?: string | ((type: "size") => string);
     } & {
         modelValue?: Partial<TransformValue>;
         modelModifiers?: Partial<Record<string, true>>;
@@ -228,7 +223,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
             readonly hideUi?: boolean | undefined;
             readonly initialSize?: boolean | undefined;
             readonly borderStyle?: "solid" | "dashed" | undefined;
-            readonly tipFormat?: ((type: "size") => string) | undefined;
+            readonly tip?: string | ((type: "size") => string) | undefined;
             readonly modelValue?: Partial<TransformValue> | undefined;
             readonly modelModifiers?: Partial<Record<string, true>> | undefined;
             readonly onMove?: ((args_0: TransformValue, args_1: TransformValue) => any) | undefined;
@@ -268,7 +263,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
             hideUi?: boolean;
             initialSize?: boolean;
             borderStyle?: "solid" | "dashed";
-            tipFormat?: (type: "size") => string;
+            tip?: string | ((type: "size") => string);
         } & {
             modelValue?: Partial<TransformValue>;
             modelModifiers?: Partial<Record<string, true>>;
@@ -344,7 +339,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         hideUi?: boolean;
         initialSize?: boolean;
         borderStyle?: "solid" | "dashed";
-        tipFormat?: (type: "size") => string;
+        tip?: string | ((type: "size") => string);
     } & {
         modelValue?: Partial<TransformValue>;
         modelModifiers?: Partial<Record<string, true>>;
@@ -386,9 +381,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
             }) => any;
         };
     }) | null>>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    selectedArea: Aabb2D;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -25,7 +25,7 @@ type __VLS_Props = {
     hideUi?: boolean;
     initialSize?: boolean;
     borderStyle?: 'solid' | 'dashed';
-    tipFormat?: (type: 'size') => string;
+    tip?: string | ((type: 'size') => string);
 };
 declare function start(event?: MouseEvent, index?: number): boolean;
 type __VLS_ModelProps = {

package/dist/editor.d.ts

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

package/dist/index.css

@@ -636,52 +636,6 @@
   font-size: 0.875rem;
   cursor: pointer;
   white-space: nowrap;
-}.mce-smart-guides {
-  position: absolute;
-  overflow: hidden;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
-.mce-smart-guides__alignment {
-  position: absolute;
-  background-color: #FF4AFF;
-  height: 1px;
-  width: 1px;
-}
-.mce-smart-guides__area {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(244, 36, 253, 0.2);
-}
-.mce-smart-guides__area:before {
-  content: "";
-  background: #1690ff;
-  height: 1px;
-  width: 100%;
-}
-.mce-smart-guides__area:after {
-  position: absolute;
-  content: "";
-  height: 5px;
-  width: 100%;
-  border-left: 1px solid #1690ff;
-  border-right: 1px solid #1690ff;
-}
-.mce-smart-guides__area--vertical:before {
-  height: 100%;
-  width: 1px;
-}
-.mce-smart-guides__area--vertical:after {
-  height: 100%;
-  width: 5px;
-  border-left: none;
-  border-right: none;
-  border-top: 1px solid #1690ff;
-  border-bottom: 1px solid #1690ff;
 }.mce-transform-controls {
   left: 0;
   top: 0;
@@ -757,6 +711,86 @@
 .mce-transform-controls--hide-ui .mce-transform-controls__rotator,
 .mce-transform-controls--hide-ui .mce-transform-controls__tip {
   visibility: hidden;
+}.mce-selection {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.mce-selection__slot {
+  position: absolute;
+}
+.mce-selection__parent {
+  position: absolute;
+  pointer-events: none;
+  border-width: 1px;
+  border-style: dashed;
+  color: rgba(var(--mce-theme-primary), 1);
+  opacity: 0.5;
+}
+.mce-selection__area {
+  position: absolute;
+  border-width: 1px;
+  border-style: solid;
+  color: rgba(var(--mce-theme-primary), 1);
+  background-color: rgba(var(--mce-theme-primary), 0.1);
+}
+.mce-selection__transform {
+  position: absolute;
+  color: rgba(var(--mce-theme-primary), 1);
+}
+.mce-selection__node {
+  position: absolute;
+  border-width: 1px;
+  border-style: solid;
+  color: rgba(var(--mce-theme-primary), 1);
+}.mce-smart-guides {
+  position: absolute;
+  overflow: hidden;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.mce-smart-guides__alignment {
+  position: absolute;
+  background-color: #FF4AFF;
+  height: 1px;
+  width: 1px;
+}
+.mce-smart-guides__area {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(244, 36, 253, 0.2);
+}
+.mce-smart-guides__area:before {
+  content: "";
+  background: #1690ff;
+  height: 1px;
+  width: 100%;
+}
+.mce-smart-guides__area:after {
+  position: absolute;
+  content: "";
+  height: 5px;
+  width: 100%;
+  border-left: 1px solid #1690ff;
+  border-right: 1px solid #1690ff;
+}
+.mce-smart-guides__area--vertical:before {
+  height: 100%;
+  width: 1px;
+}
+.mce-smart-guides__area--vertical:after {
+  height: 100%;
+  width: 5px;
+  border-left: none;
+  border-right: none;
+  border-top: 1px solid #1690ff;
+  border-bottom: 1px solid #1690ff;
 }.mce-smart-selection {
   position: absolute;
   overflow: hidden;
@@ -770,20 +804,24 @@
   display: flex;
   align-items: center;
   justify-content: center;
-}
-.mce-smart-selection .mce-smart-handle--active > .mce-smart-handle__btn {
-  background: #FF24BD;
+  pointer-events: auto;
 }
 .mce-smart-selection .mce-smart-handle__btn {
-  pointer-events: auto;
-  width: 10px;
-  height: 10px;
+  width: 1px;
+  height: 1px;
   border-radius: 100%;
   border: 1px solid #FF24BD;
   outline: 1px solid #FFFFFF;
 }
 .mce-smart-selection .mce-smart-handle__btn:hover {
   background: #FF24BD;
+}
+.mce-smart-selection .mce-smart-handle__btn--active {
+  width: 10px;
+  height: 10px;
+}
+.mce-smart-selection .mce-smart-handle--active .mce-smart-handle__btn {
+  background: #FF24BD;
 }.progress-indicator[data-v-3b286483] {
   display: flex;
   align-items: center;
@@ -873,6 +911,20 @@
   font-size: 0.75rem;
   padding: 0 2px;
   font-family: system-ui, -apple-system, sans-serif;
+}.mce-text-editor {
+  position: absolute;
+  width: 0;
+  height: 0;
+  left: 0;
+  top: 0;
+  overflow: visible;
+}
+.mce-text-editor__wrapper {
+  position: absolute;
+}
+.mce-text-editor__editor {
+  pointer-events: auto !important;
+  cursor: move;
 }.mce-payhead {
   bottom: 0;
   left: -5px;
@@ -1181,67 +1233,6 @@
   border-radius: 4px;
 }.mce-floatbar .mce-overlay-content {
   overflow: visible;
-}.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__transform {
-  position: absolute;
-  color: rgba(var(--mce-theme-primary), 1);
-  opacity: 0.5;
-}
-.mce-cropper__transform_rect {
-  width: 100%;
-  height: 100%;
-}.mce-selector {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
-.mce-selector__slot {
-  position: absolute;
-}
-.mce-selector__parent {
-  position: absolute;
-  pointer-events: none;
-  border-width: 1px;
-  border-style: dashed;
-  color: rgba(var(--mce-theme-primary), 1);
-  opacity: 0.5;
-}
-.mce-selector__area {
-  position: absolute;
-  border-width: 1px;
-  border-style: solid;
-  color: rgba(var(--mce-theme-primary), 1);
-  background-color: rgba(var(--mce-theme-primary), 0.1);
-}
-.mce-selector__transform {
-  position: absolute;
-  color: rgba(var(--mce-theme-primary), 1);
-}
-.mce-selector__node {
-  position: absolute;
-  border-width: 1px;
-  border-style: solid;
-  color: rgba(var(--mce-theme-primary), 1);
 }.mce-float-panel {
   position: absolute;
   pointer-events: auto !important;
@@ -1323,20 +1314,6 @@
   --v-layout-right: 0px;
   --v-layout-top: 0px;
   --v-layout-bottom: 0px;
-}.mce-text-editor {
-  position: absolute;
-  width: 0;
-  height: 0;
-  left: 0;
-  top: 0;
-  overflow: visible;
-}
-.mce-text-editor__wrapper {
-  position: absolute;
-}
-.mce-text-editor__editor {
-  pointer-events: auto !important;
-  cursor: move;
 }.mce-editor {
   --mce-theme-primary: 69, 151, 248;
   --mce-theme-on-primary: 255, 255, 255;
@@ -1407,6 +1384,33 @@
   width: 100%;
   height: 100%;
   pointer-events: none;
+}.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__transform {
+  position: absolute;
+  color: rgba(var(--mce-theme-primary), 1);
+  opacity: 0.5;
+}
+.mce-cropper__transform_rect {
+  width: 100%;
+  height: 100%;
 }.mce-dialog > * {
   box-shadow: var(--mce-shadow);
 }