mce 0.15.6 → 0.15.8

package/dist/composables/layer.d.ts

@@ -8,7 +8,6 @@ export interface LayerItem {
 }
 export interface LayerProvide {
     selecting: Ref<boolean>;
-    sortedSelection: Ref<Node[]>;
     register: (vm: ComponentInternalInstance, item: LayerItem) => void;
     unregister: (id: string) => void;
     onMousedown?: (event: MouseEvent, id: string) => void;
@@ -19,7 +18,7 @@ export declare const MceLayerKey: InjectionKey<LayerProvide>;
 export declare const MceLayerItemKey: InjectionKey<{
     id: string;
 }>;
-export declare function createLayer(options: Pick<LayerProvide, 'sortedSelection'>): {
+export declare function createLayer(): {
     selecting: Ref<boolean, boolean>;
     openedItems: import("vue").Reactive<Map<string, Ref<boolean, boolean>>>;
     domItems: import("vue").Reactive<Map<string, Ref<HTMLElement | undefined, HTMLElement | undefined>>>;
@@ -30,7 +29,6 @@ export declare function useLayerItem(options: Omit<LayerItem, 'id'>): {
     dropping: import("vue").ComputedRef<boolean>;
     onMousedown: (e: MouseEvent) => void | undefined;
     selecting: Ref<boolean>;
-    sortedSelection: Ref<Node[]>;
     register: (vm: ComponentInternalInstance, item: LayerItem) => void;
     unregister: (id: string) => void;
     dragging: Ref<boolean>;

package/dist/index.css

@@ -134,7 +134,6 @@
   border-radius: inherit;
 }
 .mce-layer--root {
-  margin-bottom: 4px;
   font-weight: bold;
 }
 .mce-layer--root .mce-layer__thumbnail {
@@ -148,12 +147,12 @@
   bottom: 0;
   border-radius: 0;
 }
-.mce-layer--first .mce-layer__underlay {
+.mce-layer--active:not(.mce-layer--active + .mce-layer--active) .mce-layer__underlay {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   top: 4px;
 }
-.mce-layer--last .mce-layer__underlay {
+.mce-layer--active:not(:has(+ .mce-layer--active)) .mce-layer__underlay {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   bottom: 4px;
@@ -225,17 +224,23 @@
   flex: none;
   display: flex;
   align-items: center;
-  background-color: var(--overlay-color, transparent);
-  backdrop-filter: blur(8px);
   border-radius: 4px;
-}
-.mce-layer__action--hide {
   background-color: transparent;
   backdrop-filter: none;
 }
-.mce-layer__action--hide .mce-layer__btn {
+.mce-layer__action .mce-layer__btn {
   opacity: 0;
 }
+.mce-layer__action--hover .mce-layer__btn {
+  opacity: 1;
+}
+.mce-layer__action--show {
+  background-color: var(--overlay-color, transparent);
+  backdrop-filter: blur(8px);
+}
+.mce-layer__btn--show {
+  opacity: 1 !important;
+}
 .mce-layer__btn + .mce-layer__btn {
   margin-left: -4px;
 }.mce-layers {
@@ -259,6 +264,9 @@
 }
 .mce-layers:hover .mce-layer:not(.mce-layer--root) .mce-layer__prepend {
   opacity: 1;
+}
+.mce-layers .mce-layer {
+  scroll-margin: 8px;
 }.mce-made-with {
   pointer-events: auto !important;
   position: absolute;

package/dist/index.js

@@ -1027,7 +1027,6 @@ const _0_font = defineMixin((editor, options) => {
   const loading = ref(false);
   async function loadFont(source, options2) {
     const res = await fonts.load(source, options2);
-    console.log("loadFont", res);
     emit("loadFont", res);
     return res;
   }
@@ -1076,6 +1075,7 @@ const en = {
   "move": "Move",
   "hand": "Hand",
   "frame": "Frame",
+  "group": "Group",
   "text": "Text",
   "doubleClickEditText": "DoubleClickEditText",
   "rectangle": "Rectangle",
@@ -1181,6 +1181,7 @@ const zhHans = {
   "move": "移动",
   "hand": "抓手",
   "frame": "画板",
+  "group": "组合",
   "text": "文字",
   "doubleClickEditText": "双击编辑文字",
   "rectangle": "矩形",
@@ -3799,7 +3800,7 @@ function useIcon(props) {
 }
 const MceLayerKey = /* @__PURE__ */ Symbol.for("mce:layer");
 const MceLayerItemKey = /* @__PURE__ */ Symbol.for("mce:layer-item");
-function createLayer(options) {
+function createLayer() {
   const registered = ref([]);
   const nodeItems = /* @__PURE__ */ new Map();
   const openedItems = reactive(/* @__PURE__ */ new Map());
@@ -3818,7 +3819,6 @@ function createLayer(options) {
     return id;
   }
   provide(MceLayerKey, {
-    ...options,
     selecting,
     dragging,
     droppingItemId,
@@ -5085,13 +5085,13 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       nodeIndexMap,
       zoomTo,
       hoverElement,
-      exec
+      exec,
+      t
     } = useEditor();
     const opened = useModel(__props, "opened");
     const dom = ref();
     const {
       selecting,
-      sortedSelection,
       dragging,
       dropping,
       onMousedown,
@@ -5101,17 +5101,6 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       node: computed(() => props.node),
       dom: computed(() => dom.value)
     });
-    const isFrist = computed(() => sortedSelection.value[0]?.equal(props.node));
-    const isLast = computed(() => {
-      const last = sortedSelection.value[sortedSelection.value.length - 1];
-      if (last) {
-        if (last.equal(props.node)) {
-          if (!opened.value || !props.node?.children.length)
-            return true;
-        } else if (last.equal(props.node?.parent)) ;
-      }
-      return false;
-    });
     const isActive = computed(() => selection.value.some((v) => v.equal(props.node)));
     const children = computed(() => props.node.children);
     const childrenLength = computed(() => children.value.length);
@@ -5140,8 +5129,14 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       const node = props.node;
       let value = node.name;
       if (!value) {
-        if (isElement(node)) {
-          if (node.text.isValid()) {
+        if (isFrame(node)) {
+          return t("frame");
+        } else if (node.children.length) {
+          value = t("group");
+        } else if (isElement(node)) {
+          if (node.foreground.isValid() && node.foreground.image) {
+            value = t("image");
+          } else if (node.text.isValid()) {
             value = node.text.getStringContent();
           }
         }
@@ -5152,6 +5147,9 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       opened.value = !opened.value;
     }
     function onMousedownContent(e) {
+      if (e.button === 2) {
+        return;
+      }
       selecting.value = true;
       if (e.shiftKey) {
         const _nodes = [
@@ -5235,8 +5233,10 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     }
     function onInputBlur() {
       editing.value = false;
-      props.node.name = editValue.value;
-      editValue.value = "";
+      if (editValue.value !== thumbnailName.value) {
+        props.node.name = editValue.value;
+        editValue.value = "";
+      }
     }
     return (_ctx, _cache) => {
       const _component_MceLayer = resolveComponent("MceLayer");
@@ -5247,8 +5247,6 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           class: normalizeClass(["mce-layer", [
             props.root && "mce-layer--root",
             (__props.active || isActive.value) && "mce-layer--active",
-            isFrist.value && "mce-layer--first",
-            isLast.value && "mce-layer--last",
             opened.value && "mce-layer--open",
             isHoverElement.value && "mce-layer--hover",
             unref(dropping) && "mce-layer--dropping"
@@ -5262,8 +5260,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           onMouseleave,
           onContextmenu
         }, [
-          _cache[5] || (_cache[5] = createElementVNode("span", { class: "mce-layer__underlay" }, null, -1)),
-          _cache[6] || (_cache[6] = createElementVNode("span", { class: "mce-layer__overlay" }, null, -1)),
+          _cache[4] || (_cache[4] = createElementVNode("span", { class: "mce-layer__underlay" }, null, -1)),
+          _cache[5] || (_cache[5] = createElementVNode("span", { class: "mce-layer__overlay" }, null, -1)),
           createElementVNode("div", _hoisted_2$c, [
             createElementVNode("div", _hoisted_3$b, [
               childrenLength.value ? (openBlock(), createBlock(unref(_sfc_main$C), {
@@ -5290,6 +5288,9 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => editValue.value = $event),
                 type: "text",
                 class: "mce-layer__input",
+                spellcheck: "false",
+                autocapitalize: "off",
+                autocorrect: "off",
                 autofocus: "",
                 onBlur: onInputBlur
               }, null, 544), [
@@ -5302,26 +5303,17 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             ], 32),
             createElementVNode("div", {
               class: normalizeClass(["mce-layer__action", {
-                "mce-layer__action--hide": !hovering.value && !unref(isLock)(props.node) && unref(isVisible)(props.node)
+                "mce-layer__action--hover": hovering.value,
+                "mce-layer__action--show": hovering.value || unref(isLock)(props.node) || !unref(isVisible)(props.node)
               }])
             }, [
-              props.root ? (openBlock(), createBlock(_sfc_main$y, {
-                key: 0,
-                icon: "",
-                class: "mce-layer__btn",
-                onClick: _cache[2] || (_cache[2] = ($event) => unref(setLock)(props.node, !unref(isLock)(props.node)))
-              }, {
-                default: withCtx(() => [
-                  createVNode(unref(_sfc_main$C), {
-                    icon: unref(isLock)(props.node) ? "$lock" : "$unlock"
-                  }, null, 8, ["icon"])
-                ]),
-                _: 1
-              })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              props.root ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                 createVNode(_sfc_main$y, {
                   icon: "",
-                  class: "mce-layer__btn",
-                  onClick: _cache[3] || (_cache[3] = withModifiers(($event) => unref(setLock)(props.node, !unref(isLock)(props.node)), ["prevent", "stop"]))
+                  class: normalizeClass(["mce-layer__btn", {
+                    "mce-layer__btn--show": unref(isLock)(props.node)
+                  }]),
+                  onClick: _cache[2] || (_cache[2] = withModifiers(($event) => unref(setLock)(props.node, !unref(isLock)(props.node)), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
                     createVNode(unref(_sfc_main$C), {
@@ -5329,11 +5321,13 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                     }, null, 8, ["icon"])
                   ]),
                   _: 1
-                }),
+                }, 8, ["class"]),
                 createVNode(_sfc_main$y, {
                   icon: "",
-                  class: "mce-layer__btn",
-                  onClick: _cache[4] || (_cache[4] = withModifiers(($event) => unref(setVisible)(props.node, !unref(isVisible)(props.node)), ["prevent", "stop"]))
+                  class: normalizeClass(["mce-layer__btn", {
+                    "mce-layer__btn--show": !unref(isVisible)(props.node)
+                  }]),
+                  onClick: _cache[3] || (_cache[3] = withModifiers(($event) => unref(setVisible)(props.node, !unref(isVisible)(props.node)), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
                     createVNode(unref(_sfc_main$C), {
@@ -5341,7 +5335,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                     }, null, 8, ["icon"])
                   ]),
                   _: 1
-                })
+                }, 8, ["class"])
               ], 64))
             ], 2)
           ])
@@ -5366,25 +5360,14 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     const {
       root,
       selection,
-      state,
-      nodeIndexMap
+      state
     } = useEditor();
-    const sortedSelection = computed(() => {
-      return selection.value.map((node) => {
-        return {
-          node,
-          index: nodeIndexMap.get(node.id) ?? 0
-        };
-      }).sort((a, b) => a.index - b.index).map((v) => v.node);
-    });
     const {
       selecting,
       openedItems,
       domItems,
       getIdByNode
-    } = createLayer({
-      sortedSelection
-    });
+    } = createLayer();
     watch(selection, (selection2) => {
       if (state.value === "selecting" || selecting.value) {
         return;
@@ -10475,6 +10458,23 @@ const _pen = definePlugin((editor) => {
     ]
   };
 });
+const _rotate = definePlugin((editor) => {
+  const {
+    elementSelection
+  } = editor;
+  function rotate(deg) {
+    elementSelection.value.forEach((el) => {
+      el.style.rotate += deg;
+    });
+  }
+  return {
+    name: "mce:rotate",
+    commands: [
+      { command: "rotate", handle: rotate },
+      { command: "rotate90", handle: () => rotate(90) }
+    ]
+  };
+});
 const _hoisted_1$g = {
   key: 0,
   class: "mce-tooltip__arrow"
@@ -13578,6 +13578,7 @@ const plugins = [
   _open,
   _panels,
   _pen,
+  _rotate,
   _ruler,
   _saveAs,
   _scroll,

package/dist/locale/en.d.ts

@@ -14,6 +14,7 @@ declare const _default: {
     move: string;
     hand: string;
     frame: string;
+    group: string;
     text: string;
     doubleClickEditText: string;
     rectangle: string;

package/dist/locale/zh-Hans.d.ts

@@ -15,6 +15,7 @@ declare const _default: {
     move: string;
     hand: string;
     frame: string;
+    group: string;
     text: string;
     doubleClickEditText: string;
     rectangle: string;

package/dist/plugins/rotate.d.ts

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

package/dist/typed-plugins.d.ts

@@ -53,6 +53,7 @@ import './plugins/node'
 import './plugins/open'
 import './plugins/panels'
 import './plugins/pen'
+import './plugins/rotate'
 import './plugins/ruler'
 import './plugins/saveAs'
 import './plugins/scroll'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.15.6",
+  "version": "0.15.8",
   "description": "The headless canvas editor framework. only the ESM.",
   "author": "wxm",
   "license": "MIT",
@@ -61,10 +61,10 @@
     "diff": "^8.0.2",
     "file-saver": "^2.0.5",
     "lodash-es": "^4.17.22",
-    "modern-canvas": "^0.14.22",
+    "modern-canvas": "^0.14.23",
     "modern-font": "^0.4.4",
     "modern-idoc": "^0.10.8",
-    "modern-text": "^1.10.6",
+    "modern-text": "^1.10.7",
     "yjs": "^13.6.28"
   },
   "peerDependencies": {