mce 0.15.2 → 0.15.3

package/dist/index.js

@@ -535,13 +535,13 @@ class Doc extends Model {
   }
   async load(initFn) {
     return super.load(async () => {
+      await initFn?.();
       this._proxyNode(
         this.root,
         this._yProps,
         this._yChildrenIds
       );
       this._yChildren.observe(this._yChildrenChange.bind(this));
-      await initFn?.();
     });
   }
   _isSelfTransaction(transaction) {
@@ -623,7 +623,6 @@ class Doc extends Model {
     };
     this.reset();
     this.setProperties(props);
-    this._yProps.clear();
     for (const key in props) {
       this._yProps.set(key, props[key]);
     }
@@ -935,6 +934,9 @@ const _0_context = defineMixin((editor) => {
   function isFrame(value) {
     return isElement(value) && value.meta.inEditorIs === "Frame";
   }
+  function isRootFrame(value) {
+    return isFrame(value) && Boolean(value.parent?.equal(root.value));
+  }
   function isVisible(node) {
     return isElement(node) && node.style.visibility === "visible";
   }
@@ -975,6 +977,7 @@ const _0_context = defineMixin((editor) => {
     isRoot,
     isElement,
     isFrame,
+    isRootFrame,
     isVisible,
     setVisible,
     isLock,
@@ -2782,7 +2785,7 @@ const _4_3_element = defineMixin((editor) => {
   function selectArea(areaInDrawboard) {
     const area2 = new Obb2D(areaInDrawboard);
     const selected = root.value?.children.flatMap((node) => {
-      if (isFrame(node)) {
+      if (isFrame(node) && node.parent?.equal(root.value)) {
         return node.children;
       }
       return [node];
@@ -3687,7 +3690,7 @@ const aliases = {
 const svg = {
   component: SvgIcon
 };
-const IconsSymbol = Symbol.for("mce:icons");
+const IconsSymbol = /* @__PURE__ */ Symbol.for("mce:icons");
 function createIcons(options = {}) {
   return merge({
     defaultSet: "svg",
@@ -3740,8 +3743,8 @@ function useIcon(props) {
     iconData
   };
 }
-const MceLayerKey = Symbol.for("mce:layer");
-const MceLayerItemKey = Symbol.for("mce:layer-item");
+const MceLayerKey = /* @__PURE__ */ Symbol.for("mce:layer");
+const MceLayerItemKey = /* @__PURE__ */ Symbol.for("mce:layer-item");
 function createLayer(options) {
   const registered = ref([]);
   const nodeItems = /* @__PURE__ */ new Map();
@@ -3892,8 +3895,8 @@ function useResizeObserver(callback, box = "content") {
     contentRect: readonly(contentRect)
   };
 }
-const MceLayoutKey = Symbol.for("mce:layout");
-const MceLayoutItemKey = Symbol.for("mce:layout-item");
+const MceLayoutKey = /* @__PURE__ */ Symbol.for("mce:layout");
+const MceLayoutItemKey = /* @__PURE__ */ Symbol.for("mce:layout-item");
 const ROOT_ZINDEX = 500;
 function makeLayoutProps() {
   return {
@@ -4131,8 +4134,8 @@ function createLayout(props) {
     layoutRef: resizeRef
   };
 }
-const MceMenuSymbol = Symbol.for("MceMenuSymbol");
-const MceOverlaySymbol = Symbol.for("MceOverlaySymbol");
+const MceMenuSymbol = /* @__PURE__ */ Symbol.for("MceMenuSymbol");
+const MceOverlaySymbol = /* @__PURE__ */ Symbol.for("MceOverlaySymbol");
 const makeMceOverlayProps = propsFactory({
   location: String,
   offset: Number,
@@ -4256,7 +4259,9 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       selection,
       state,
       config,
-      exec
+      exec,
+      renderEngine,
+      drawboardDom
     } = useEditor();
     const editing = ref(false);
     async function onDblclick() {
@@ -4267,11 +4272,14 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         input.value.select();
       }
     }
-    async function onPointerdown(ev) {
+    async function onPointerdown(event) {
       if (!editing.value) {
-        selection.value = [frame.value];
-        await nextTick();
-        exec("startTransform", ev);
+        const cloend = renderEngine.value.input._clonePointerEvent(event);
+        cloend.srcElement = drawboardDom.value;
+        cloend.target = frame.value;
+        exec("startPointerdown", cloend, {
+          allowRootFrame: true
+        });
       }
     }
     return (_ctx, _cache) => {
@@ -8543,7 +8551,7 @@ class Curve {
   }
   getLength() {
     const lengths = this.getLengths();
-    return lengths[lengths.length - 1];
+    return lengths[lengths.length - 1] ?? 0;
   }
   getLengths() {
     if (this._lengths.length !== this.arcLengthDivision + 1) {
@@ -13523,7 +13531,7 @@ const plugins = [
   _zoom
 ];
 class Editor extends Observable {
-  static injectionKey = Symbol.for("EditorKey");
+  static injectionKey = /* @__PURE__ */ Symbol.for("EditorKey");
   debug = ref(false);
   onEmit;
   plugins = /* @__PURE__ */ new Map();
@@ -14666,7 +14674,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               element,
               newStyle.width / element.style.width,
               newStyle.height / element.style.height,
-              isFrame(element) ? void 0 : !shape.enabled || !shape._path2DSet.paths.length ? handle.split("-").length > 2 ? { deep: true, textFontSizeToFit: true } : { deep: true, textToFit: true } : void 0
+              isFrame(element) ? void 0 : !shape.isValid() ? handle.split("-").length > 2 ? { deep: true, textFontSizeToFit: true } : { deep: true, textToFit: true } : void 0
             );
             newStyle.width = element.style.width;
             newStyle.height = element.style.height;
@@ -14981,7 +14989,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     }
     function onUpdate() {
       const element = elementSelection.value[0];
-      if (!element.shape.enabled || !element.shape._path2DSet.paths.length) {
+      if (!element.shape.isValid()) {
         textToFit(element);
       }
     }
@@ -15076,6 +15084,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const {
       pluginsComponents,
       isElement,
+      isRootFrame,
       config,
       drawboardDom,
       renderEngine,
@@ -15147,20 +15156,30 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           event,
           editor
         });
-        if (result && !isElement(result)) {
+        if (result && "element" in result) {
           hovered = result.element;
           cursor = result.cursor;
         } else {
           hovered = result;
         }
       }
+      if (!(isElement(hovered) && !isRootFrame(hovered))) {
+        hovered = void 0;
+        cursor = void 0;
+      }
       hoverElement.value = hovered;
       setCursor(cursor);
     }
-    function onPointerdown(downEvent) {
-      if (downEvent.srcElement !== drawboardDom.value && downEvent.srcElement.dataset?.pointerdown_to_drawboard === void 0 || camera.value.spaceKey || ![0, 2].includes(downEvent.button)) {
+    function onPointerdown(downEvent, options = {}) {
+      if (downEvent.srcElement && downEvent.srcElement !== drawboardDom.value && downEvent.srcElement.dataset?.pointerdown_to_drawboard === void 0 || camera.value.spaceKey || ![0, 2].includes(downEvent.button)) {
         return;
       }
+      const {
+        allowRootFrame = false
+      } = options;
+      function isIncluded(node) {
+        return isElement(node) && (allowRootFrame || !isRootFrame(node));
+      }
       const drawing = state.value === "drawing";
       const hand = state.value === "hand";
       const element = downEvent.target;
@@ -15183,11 +15202,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             event: downEvent,
             editor
           });
-          if (result && !isElement(result)) {
-            selected = result.element ? [result.element] : [];
-          } else {
-            selected = result ? [result] : [];
+          let _element = result && "element" in result ? result.element : result;
+          if (!isIncluded(_element)) {
+            _element = void 0;
           }
+          selected = _element ? [_element] : [];
           elementSelection.value = selected;
         }
         return;
@@ -15209,11 +15228,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           event,
           editor
         });
-        if (result && !isElement(result)) {
-          selected = result.element ? [result.element] : [];
-        } else {
-          selected = result ? [result] : [];
+        let _element = result && "element" in result ? result.element : result;
+        if (!isIncluded(_element)) {
+          _element = void 0;
         }
+        selected = _element ? [_element] : [];
         elementSelection.value = selected;
       }
       function onSelectArea() {
@@ -15234,12 +15253,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           editor
         });
         let _element;
-        if (result && !isElement(result)) {
+        if (result && "element" in result) {
           _element = result.element;
           ctxState = result.state;
         } else {
           _element = result;
         }
+        if (!isIncluded(_element)) {
+          _element = void 0;
+        }
         if (_element && (downEvent?.ctrlKey || downEvent?.shiftKey || downEvent?.metaKey)) {
           if (elementSelection.value.findIndex((v) => v.equal(_element)) > -1) {
             selected = elementSelection.value.filter((v) => !v.equal(_element));
@@ -15292,7 +15314,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           );
         } else {
           if (!inSelection) {
-            if (!element) {
+            if (!isIncluded(element)) {
               onSelectArea();
             }
           }
@@ -15341,6 +15363,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       document.addEventListener("pointermove", onMove);
       document.addEventListener("pointerup", onUp);
     }
+    editor.registerCommand({ command: "startPointerdown", handle: onPointerdown });
     function onPointermove(event) {
       if (event.srcElement !== drawboardDom.value) {
         return;

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

@@ -45,6 +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;
             isVisible: (node: Node) => boolean;
             setVisible: (node: Node, visible: boolean) => void;
             isLock: (node: Node) => boolean;

package/dist/plugins/ui.d.ts

@@ -1,7 +1,12 @@
+import type { PointerInputEvent } from 'modern-canvas';
 import type { AxisAlignedBoundingBox } from '../types';
 declare global {
     namespace Mce {
+        interface StartPointerdownOptions {
+            allowRootFrame?: boolean;
+        }
         interface Commands {
+            startPointerdown: (e: PointerInputEvent, options?: StartPointerdownOptions) => void;
             startTyping: (e?: MouseEvent | PointerEvent) => Promise<boolean>;
             startTransform: (e?: MouseEvent | PointerEvent) => boolean;
             openContextMenu: (e?: MouseEvent | PointerEvent) => boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.15.2",
+  "version": "0.15.3",
   "description": "The headless canvas editor framework. only the ESM.",
   "author": "wxm",
   "license": "MIT",
@@ -60,10 +60,10 @@
     "@vueuse/core": "^14.1.0",
     "diff": "^8.0.2",
     "file-saver": "^2.0.5",
-    "lodash-es": "^4.17.21",
-    "modern-canvas": "^0.14.16",
+    "lodash-es": "^4.17.22",
+    "modern-canvas": "^0.14.19",
     "modern-font": "^0.4.4",
-    "modern-idoc": "^0.10.6",
+    "modern-idoc": "^0.10.7",
     "modern-text": "^1.10.5",
     "yjs": "^13.6.27"
   },
@@ -94,7 +94,7 @@
     "@vitejs/plugin-vue": "^6.0.3",
     "jiti": "^2.6.1",
     "modern-gif": "^2.0.4",
-    "sass-embedded": "^1.96.0"
+    "sass-embedded": "^1.97.0"
   },
   "scripts": {
     "build:code": "vite build",