mce 0.12.4 → 0.13.0

package/README.md

@@ -61,6 +61,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

@@ -40,9 +40,9 @@ 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;
 }, {}, {}, {}, 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/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/Tooltip.vue.d.ts

@@ -57,9 +57,9 @@ 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;
 }, {}, {}, {}, 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/index.css

@@ -205,6 +205,156 @@
   border-style: solid;
   border-width: 2px;
   color: rgba(var(--mce-theme-primary), 1);
+}.mce-btn {
+  padding: 4px;
+  border-radius: 4px;
+  height: 24px;
+  width: 24px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}.mce-layer {
+  position: relative;
+  flex: none;
+  display: flex;
+  align-items: center;
+  height: 32px;
+  font-size: 12px;
+  padding-left: var(--indent-padding, 0);
+  width: 100%;
+  min-width: max-content;
+  border-radius: 4px;
+}
+.mce-layer:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 4px;
+  bottom: 4px;
+  background-color: var(--underlay-color, transparent);
+  pointer-events: none;
+  border-radius: inherit;
+}
+.mce-layer:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 4px;
+  bottom: 4px;
+  background-color: var(--overlay-color, transparent);
+  pointer-events: none;
+  border-radius: inherit;
+}
+.mce-layer--root {
+  margin-bottom: 4px;
+  font-weight: bold;
+}
+.mce-layer--root .mce-layer__thumbnail {
+  display: none;
+}
+.mce-layer--hover {
+  --overlay-color: rgba(var(--mce-theme-on-background), var(--mce-hover-opacity));
+}
+.mce-layer--active:before {
+  top: 0;
+  bottom: 0;
+  border-radius: 0;
+}
+.mce-layer--first:before {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  top: 4px;
+}
+.mce-layer--last:before {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  bottom: 4px;
+}
+.mce-layer--active {
+  --underlay-color: rgba(var(--mce-theme-primary), calc(var(--mce-activated-opacity) * 3));
+}
+.mce-layer--active:hover {
+  --overlay-color: rgba(var(--mce-theme-primary), var(--mce-hover-opacity));
+}
+.mce-layer--open .mce-layer__expand .mce-icon {
+  transform: rotate(90deg);
+}
+.mce-layer__expand {
+  display: flex;
+  align-items: center;
+  width: 16px;
+  height: 100%;
+  flex: none;
+}
+.mce-layer__content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.mce-layer__thumbnail {
+  display: flex;
+  align-items: center;
+  width: 12px;
+  height: 100%;
+  font-size: 12px;
+  overflow: hidden;
+  margin-right: 4px;
+}
+.mce-layer__name {
+  position: relative;
+  flex: 1;
+}
+.mce-layer__input {
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: 1px solid rgb(var(--mce-theme-primary));
+  font-size: inherit;
+  font-weight: inherit;
+  border-radius: 2px;
+}
+.mce-layer__action {
+  flex: none;
+  display: flex;
+  align-items: center;
+}
+.mce-btn--hide {
+  opacity: 0;
+}
+.mce-btn:hover {
+  background-color: rgb(var(--mce-theme-background));
+}
+.mce-btn + .mce-btn {
+  margin-left: -4px;
+}.mce-layers {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-width: auto;
+  overflow: auto;
+  background-color: rgb(var(--mce-theme-surface));
+}
+.mce-layers__wrapper {
+  padding: 8px;
+  width: max-content;
+  min-width: 100%;
+}
+.mce-layers .mce-layer__expand {
+  opacity: 0;
+}
+.mce-layers .mce-layer--root:hover .mce-layer__expand {
+  opacity: 1;
+}
+.mce-layers:hover .mce-layer:not(.mce-layer--root) .mce-layer__expand {
+  opacity: 1;
 }.mce-tooltip {
   background: rgb(var(--mce-theme-surface-variant));
   color: rgb(var(--mce-theme-on-surface-variant));
@@ -303,7 +453,6 @@
 }.mce-transformable {
   left: 0;
   top: 0;
-  color: rgb(var(--mce-theme-primary));
 }
 .mce-transformable__svg {
   position: absolute;
@@ -313,6 +462,7 @@
   height: 100%;
   overflow: visible;
   pointer-events: none;
+  color: rgb(var(--mce-theme-primary));
 }
 .mce-transformable__box {
   stroke: currentColor;
@@ -363,6 +513,34 @@
   border-width: 1px;
   border-style: solid;
   color: rgba(var(--mce-theme-primary), 1);
+}.mce-float-panel {
+  position: absolute;
+  pointer-events: auto !important;
+}
+.mce-float-panel__card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  border-radius: 12px;
+  background-color: rgb(var(--mce-theme-surface));
+  box-shadow: var(--mce-shadow);
+  overflow: hidden;
+}
+.mce-float-panel__title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  font-size: 12px;
+  font-weight: bold;
+  border-bottom: 1px solid rgba(var(--mce-border-color), var(--mce-border-opacity));
+}
+.mce-float-panel__content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
 }.mce-layout {
   --mce-scrollbar-offset: 0px;
   display: flex;
@@ -825,105 +1003,6 @@
   width: 100%;
   height: 100%;
   display: block;
-}.mce-layer-item {
-  flex: none;
-  display: flex;
-  align-items: center;
-  height: 24px;
-  font-size: 12px;
-  border-radius: 4px;
-  padding-left: var(--indent-padding, 0);
-  width: 100%;
-  min-width: max-content;
-}
-.mce-layer-item:hover {
-  background-color: rgba(var(--mce-theme-on-background), var(--mce-hover-opacity));
-}
-.mce-layer-item__expand {
-  display: flex;
-  align-items: center;
-  width: 16px;
-  height: 100%;
-  opacity: 0;
-  flex: none;
-}
-.mce-layer-item__content {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  height: 100%;
-}
-.mce-layer-item__thumbnail {
-  display: flex;
-  align-items: center;
-  width: 12px;
-  height: 100%;
-  font-size: 12px;
-  overflow: hidden;
-}
-.mce-layer-item__name {
-  padding: 0 8px;
-}
-.mce-layer-item__name-input {
-  border: none;
-  padding: 0;
-  outline: none;
-  font-size: inherit;
-  font-weight: inherit;
-}
-.mce-layer {
-  flex: none;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  border-radius: 4px;
-  width: 100%;
-  min-width: max-content;
-}
-.mce-layer--active {
-  background-color: rgba(var(--mce-theme-primary), var(--mce-activated-opacity));
-}
-.mce-layer--opened .mce-layer-item__expand .mce-icon {
-  transform: rotate(90deg);
-}
-.mce-layers {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 100%;
-  height: 100%;
-  min-width: auto;
-  padding: 8px;
-  overflow: auto;
-  background-color: rgb(var(--mce-theme-surface));
-}
-.mce-layers:hover .mce-layer-item__expand {
-  opacity: 1;
-}
-.mce-layers__action {
-  position: absolute;
-  padding-right: 8px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  background-color: rgb(var(--mce-theme-surface));
-}
-.mce-btn {
-  padding: 4px;
-  border-radius: 4px;
-  height: 24px;
-  width: 24px;
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.mce-btn:hover {
-  background-color: rgb(var(--mce-theme-background));
-}
-.mce-btn + .mce-btn {
-  margin-left: -4px;
 }.mce-dialog > * {
   box-shadow: var(--mce-shadow);
 }