mce 0.15.5 → 0.15.7

package/dist/index.css

@@ -204,6 +204,7 @@
 .mce-layer__name {
   position: relative;
   flex: 1;
+  overscroll-behavior: none;
 }
 .mce-layer__input {
   position: absolute;
@@ -219,11 +220,20 @@
   border-radius: 2px;
 }
 .mce-layer__action {
+  position: sticky;
+  right: 0;
   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__btn--hide {
+.mce-layer__action--hide .mce-layer__btn {
   opacity: 0;
 }
 .mce-layer__btn + .mce-layer__btn {

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": "矩形",
@@ -4274,7 +4275,7 @@ const defaultDoubleclickStrategy = (context) => {
   const { editor } = context;
   const { elementSelection } = editor;
   const element = elementSelection.value[0];
-  if (element) {
+  if (element && !element.meta.lock) {
     return element.foreground.isValid() ? void 0 : "typing";
   }
   return void 0;
@@ -5049,7 +5050,6 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
 const _hoisted_1$l = ["data-id"];
 const _hoisted_2$c = { class: "mce-layer__content" };
 const _hoisted_3$b = { class: "mce-layer__prepend" };
-const _hoisted_4$5 = { class: "mce-layer__action" };
 const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     name: "MceLayer",
@@ -5086,7 +5086,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       nodeIndexMap,
       zoomTo,
       hoverElement,
-      exec
+      exec,
+      t
     } = useEditor();
     const opened = useModel(__props, "opened");
     const dom = ref();
@@ -5114,6 +5115,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       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);
     const inputDom = ref();
     const isHoverElement = computed(() => props.node?.equal(hoverElement.value));
     const hovering = ref(false);
@@ -5135,6 +5138,24 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       }
       return "$shape";
     });
+    const thumbnailName = computed(() => {
+      const node = props.node;
+      let value = node.name;
+      if (!value) {
+        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();
+          }
+        }
+      }
+      return value || node.id;
+    });
     function onClickExpand() {
       opened.value = !opened.value;
     }
@@ -5195,11 +5216,11 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     }
     function onDblclickName() {
       editing.value = true;
-      editValue.value = props.node.name;
+      editValue.value = thumbnailName.value;
       nextTick().then(() => {
         const dom2 = inputDom.value;
         if (dom2) {
-          dom2.focus();
+          dom2.focus({ preventScroll: true });
           dom2.select();
         }
       });
@@ -5222,9 +5243,9 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     }
     function onInputBlur() {
       editing.value = false;
-      if (editValue.value) {
+      if (editValue.value !== thumbnailName.value) {
         props.node.name = editValue.value;
-        editValue.value = void 0;
+        editValue.value = "";
       }
     }
     return (_ctx, _cache) => {
@@ -5255,7 +5276,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           _cache[6] || (_cache[6] = createElementVNode("span", { class: "mce-layer__overlay" }, null, -1)),
           createElementVNode("div", _hoisted_2$c, [
             createElementVNode("div", _hoisted_3$b, [
-              props.node.children.length ? (openBlock(), createBlock(unref(_sfc_main$C), {
+              childrenLength.value ? (openBlock(), createBlock(unref(_sfc_main$C), {
                 key: 0,
                 icon: "$arrowRight",
                 onClick: onClickExpand,
@@ -5287,15 +5308,17 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               ]),
               createElementVNode("div", {
                 style: normalizeStyle({ visibility: editing.value ? "hidden" : void 0 })
-              }, toDisplayString(editValue.value || props.node.name || props.node.id), 5)
+              }, toDisplayString(editValue.value || thumbnailName.value), 5)
             ], 32),
-            createElementVNode("div", _hoisted_4$5, [
+            createElementVNode("div", {
+              class: normalizeClass(["mce-layer__action", {
+                "mce-layer__action--hide": !hovering.value && !unref(isLock)(props.node) && unref(isVisible)(props.node)
+              }])
+            }, [
               props.root ? (openBlock(), createBlock(_sfc_main$y, {
                 key: 0,
                 icon: "",
-                class: normalizeClass(["mce-layer__btn", {
-                  "mce-layer__btn--hide": !hovering.value && !unref(isLock)(props.node)
-                }]),
+                class: "mce-layer__btn",
                 onClick: _cache[2] || (_cache[2] = ($event) => unref(setLock)(props.node, !unref(isLock)(props.node)))
               }, {
                 default: withCtx(() => [
@@ -5304,12 +5327,10 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                   }, null, 8, ["icon"])
                 ]),
                 _: 1
-              }, 8, ["class"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                 createVNode(_sfc_main$y, {
                   icon: "",
-                  class: normalizeClass(["mce-layer__btn", {
-                    "mce-layer__btn--hide": !hovering.value && !unref(isLock)(props.node)
-                  }]),
+                  class: "mce-layer__btn",
                   onClick: _cache[3] || (_cache[3] = withModifiers(($event) => unref(setLock)(props.node, !unref(isLock)(props.node)), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
@@ -5318,12 +5339,10 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                     }, null, 8, ["icon"])
                   ]),
                   _: 1
-                }, 8, ["class"]),
+                }),
                 createVNode(_sfc_main$y, {
                   icon: "",
-                  class: normalizeClass(["mce-layer__btn", {
-                    "mce-layer__btn--hide": !hovering.value && unref(isVisible)(props.node)
-                  }]),
+                  class: "mce-layer__btn",
                   onClick: _cache[4] || (_cache[4] = withModifiers(($event) => unref(setVisible)(props.node, !unref(isVisible)(props.node)), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
@@ -5332,15 +5351,15 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                     }, null, 8, ["icon"])
                   ]),
                   _: 1
-                }, 8, ["class"])
+                })
               ], 64))
-            ])
+            ], 2)
           ])
         ], 46, _hoisted_1$l),
-        opened.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.node.children, (child, key) => {
+        opened.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(childrenLength.value, (i) => {
           return openBlock(), createBlock(_component_MceLayer, {
-            key,
-            node: child,
+            key: i,
+            node: children.value[childrenLength.value - i],
             indent: __props.root ? props.indent : props.indent + 1,
             active: __props.active || isActive.value
           }, null, 8, ["node", "indent", "active"]);
@@ -5394,6 +5413,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       if (last) {
         nextTick().then(() => {
           domItems.get(getIdByNode(last) ?? "")?.value?.scrollIntoView({
+            inline: "nearest",
             block: "center"
           });
         });

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.15.5",
+  "version": "0.15.7",
   "description": "The headless canvas editor framework. only the ESM.",
   "author": "wxm",
   "license": "MIT",
@@ -61,11 +61,11 @@
     "diff": "^8.0.2",
     "file-saver": "^2.0.5",
     "lodash-es": "^4.17.22",
-    "modern-canvas": "^0.14.19",
+    "modern-canvas": "^0.14.22",
     "modern-font": "^0.4.4",
-    "modern-idoc": "^0.10.7",
-    "modern-text": "^1.10.5",
-    "yjs": "^13.6.27"
+    "modern-idoc": "^0.10.8",
+    "modern-text": "^1.10.6",
+    "yjs": "^13.6.28"
   },
   "peerDependencies": {
     "lottie-web": "^5",
@@ -94,7 +94,7 @@
     "@vitejs/plugin-vue": "^6.0.3",
     "jiti": "^2.6.1",
     "modern-gif": "^2.0.4",
-    "sass-embedded": "^1.97.0"
+    "sass-embedded": "^1.97.1"
   },
   "scripts": {
     "build:code": "vite build",