mce 0.15.4 → 0.15.6

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

@@ -693,10 +693,6 @@ class Doc extends Model {
       }
       this.transact(() => {
         this._debug(`addChild ${child.id}`, child.name, newIndex);
-        if (!isReactive(child)) {
-          child = reactive(child);
-          node.children[newIndex] = child;
-        }
         this._proxyNode(child);
         childrenIds.insert(newIndex, [child.id]);
       });
@@ -788,6 +784,12 @@ class Doc extends Model {
       this.undoManager.addToScope(yNode);
     }
     if (!this._nodeMap.has(id)) {
+      if (!isReactive(node)) {
+        node = reactive(node);
+        if (node.parent) {
+          node.parent.children[node.getIndex()] = node;
+        }
+      }
       this._nodeMap.set(id, node);
       yNode.set("parentId", node.parent?.id);
       node.on("parented", () => {
@@ -937,7 +939,7 @@ const _0_context = defineMixin((editor) => {
   function isFrame(value) {
     return isElement(value) && value.meta.inEditorIs === "Frame";
   }
-  function isRootFrame(value) {
+  function isTopLevelFrame(value) {
     return isFrame(value) && Boolean(value.parent?.equal(root.value));
   }
   function isVisible(node) {
@@ -980,7 +982,7 @@ const _0_context = defineMixin((editor) => {
     isRoot,
     isElement,
     isFrame,
-    isRootFrame,
+    isTopLevelFrame,
     isVisible,
     setVisible,
     isLock,
@@ -2539,7 +2541,8 @@ const _4_2_frame = defineMixin((editor) => {
     emit,
     selection,
     frames,
-    config
+    config,
+    isTopLevelFrame
   } = editor;
   function setCurrentFrame(index = currentFrameIndex.value) {
     index = Math.max(0, Math.min(frames.value.length - 1, index));
@@ -2553,31 +2556,32 @@ const _4_2_frame = defineMixin((editor) => {
     emit("setCurrentFrame", index, oldIndex);
   }
   function handleElementInsideFrame(element) {
-    const source = element.getGlobalAabb();
-    const aArea = source.getArea();
+    const frame1 = element.findAncestor((node) => isTopLevelFrame(node));
+    const aabb1 = element.getGlobalAabb();
+    const area1 = aabb1.getArea();
     let flag = true;
     for (let i = 0, len = frames.value.length; i < len; i++) {
-      const frame = frames.value[i];
-      if (element.equal(frame)) {
+      const frame2 = frames.value[i];
+      if (frame2.equal(element)) {
         continue;
       }
-      const target = frame.getGlobalAabb();
-      if (source && target) {
-        if (source.getIntersectionRect(target).getArea() > aArea * 0.5) {
-          if (!element.findAncestor((ancestor) => ancestor.equal(frame))) {
-            frame.appendChild(element);
-            element.style.left = source.x - target.x;
-            element.style.top = source.y - target.y;
+      const aabb2 = frame2.getGlobalAabb();
+      if (aabb1 && aabb2) {
+        if (aabb1.getIntersectionRect(aabb2).getArea() > area1 * 0.5) {
+          if (!frame2.equal(frame1)) {
+            frame2.appendChild(element);
+            element.style.left = aabb1.x - aabb2.x;
+            element.style.top = aabb1.y - aabb2.y;
           }
           flag = false;
           break;
         }
       }
     }
-    if (flag && element.parent && !element.parent.equal(root.value)) {
+    if (flag && frame1) {
       root.value.moveChild(element, 0);
-      element.style.left = source.x;
-      element.style.top = source.y;
+      element.style.left = aabb1.x;
+      element.style.top = aabb1.y;
     }
   }
   Object.assign(editor, {
@@ -4270,7 +4274,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;
@@ -4401,7 +4405,8 @@ const _frame = definePlugin((editor) => {
             name: t("frame"),
             meta: {
               inPptIs: "GroupShape",
-              inEditorIs: "Frame"
+              inEditorIs: "Frame",
+              inCanvasIs: "Element2D"
             }
           }, {
             position: start,
@@ -5044,7 +5049,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",
@@ -5109,6 +5113,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);
@@ -5130,6 +5136,18 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       }
       return "$shape";
     });
+    const thumbnailName = computed(() => {
+      const node = props.node;
+      let value = node.name;
+      if (!value) {
+        if (isElement(node)) {
+          if (node.text.isValid()) {
+            value = node.text.getStringContent();
+          }
+        }
+      }
+      return value || node.id;
+    });
     function onClickExpand() {
       opened.value = !opened.value;
     }
@@ -5190,11 +5208,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();
         }
       });
@@ -5217,10 +5235,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     }
     function onInputBlur() {
       editing.value = false;
-      if (editValue.value) {
-        props.node.name = editValue.value;
-        editValue.value = void 0;
-      }
+      props.node.name = editValue.value;
+      editValue.value = "";
     }
     return (_ctx, _cache) => {
       const _component_MceLayer = resolveComponent("MceLayer");
@@ -5250,7 +5266,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,
@@ -5282,15 +5298,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(() => [
@@ -5299,12 +5317,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(() => [
@@ -5313,12 +5329,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(() => [
@@ -5327,15 +5341,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"]);
@@ -5389,6 +5403,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       if (last) {
         nextTick().then(() => {
           domItems.get(getIdByNode(last) ?? "")?.value?.scrollIntoView({
+            inline: "nearest",
             block: "center"
           });
         });
@@ -15134,7 +15149,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const {
       pluginsComponents,
       isElement,
-      isRootFrame,
+      isTopLevelFrame,
       config,
       drawboardDom,
       renderEngine,
@@ -15213,7 +15228,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           hovered = result;
         }
       }
-      if (!(isElement(hovered) && !isRootFrame(hovered))) {
+      if (!(isElement(hovered) && !isTopLevelFrame(hovered))) {
         hovered = void 0;
         cursor = void 0;
       }
@@ -15228,7 +15243,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         allowRootFrame = false
       } = options;
       function isIncluded(node) {
-        return isElement(node) && (allowRootFrame || !isRootFrame(node));
+        return isElement(node) && (allowRootFrame || !isTopLevelFrame(node));
       }
       const drawing = state.value === "drawing";
       const hand = state.value === "hand";

package/dist/mixins/0.context.d.ts

@@ -45,7 +45,7 @@ declare global {
             isRoot: (value: any) => value is Node;
             isElement: (value: any) => value is Element2D;
             isFrame: (value: any) => value is Element2D;
-            isRootFrame: (value: any) => value is Element2D;
+            isTopLevelFrame: (value: any) => value is Element2D;
             isVisible: (node: Node) => boolean;
             setVisible: (node: Node, visible: boolean) => void;
             isLock: (node: Node) => boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.15.4",
+  "version": "0.15.6",
   "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",