mce 0.14.0 → 0.14.2

package/dist/index.js

@@ -4394,8 +4394,14 @@ const _frame = definePlugin((editor) => {
           el.style.backgroundColor = "#ffffff";
           return {
             move: (move) => {
-              el.style.width = Math.abs(move.x - start.x);
-              el.style.height = Math.abs(move.y - start.y);
+              const minX = Math.min(move.x, start.x);
+              const minY = Math.min(move.y, start.y);
+              const maxX = Math.max(move.x, start.x);
+              const maxY = Math.max(move.y, start.y);
+              el.style.left = minX;
+              el.style.top = minY;
+              el.style.width = maxX - minX;
+              el.style.height = maxY - minY;
             },
             end: () => {
               setActiveDrawingTool(void 0);
@@ -5084,7 +5090,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       const node = props.node;
       if (isFrame(node)) {
         return "$frame";
-      } else if (node.children.length) {
+      } else if (node.children.filter(isElement).length) {
         return "$group";
       } else if (isElement(node)) {
         if (node.foreground.isValid() && node.foreground.image) {
@@ -5103,47 +5109,45 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     }
     function onClickContent(e) {
       selecting.value = true;
-      if (isElement(props.node)) {
-        if (e.shiftKey) {
-          const _nodes = [
-            ...selection.value.filter((v) => !v.equal(props.node)),
-            props.node
-          ];
-          let min;
-          let max;
-          _nodes.forEach((el) => {
-            const index = nodeIndexMap.get(el.id);
-            if (index !== void 0) {
-              min = min === void 0 ? index : Math.min(min, index);
-              max = max === void 0 ? index : Math.max(max, index);
+      if (e.shiftKey) {
+        const _nodes = [
+          ...selection.value.filter((v) => !v.equal(props.node)),
+          props.node
+        ];
+        let min;
+        let max;
+        _nodes.forEach((el) => {
+          const index = nodeIndexMap.get(el.id);
+          if (index !== void 0) {
+            min = min === void 0 ? index : Math.min(min, index);
+            max = max === void 0 ? index : Math.max(max, index);
+          }
+        });
+        if (min !== void 0 && max !== void 0) {
+          let _selection = nodes.value.slice(min, max + 1);
+          const result = new Set(_selection.map((node) => node.id));
+          const parents = /* @__PURE__ */ new Set();
+          _selection.forEach((node) => node.parent && parents.add(node.parent));
+          parents.forEach((parent) => {
+            if (parent.children.every((ch) => result.has(ch.id))) {
+              const ids = new Set(parent.children.map((ch) => ch.id));
+              _selection = [
+                ..._selection.filter((v) => !ids.has(v.id)),
+                parent
+              ];
             }
           });
-          if (min !== void 0 && max !== void 0) {
-            let _selection = nodes.value.slice(min, max + 1);
-            const result = new Set(_selection.map((node) => node.id));
-            const parents = /* @__PURE__ */ new Set();
-            _selection.forEach((node) => node.parent && parents.add(node.parent));
-            parents.forEach((parent) => {
-              if (parent.children.every((ch) => result.has(ch.id))) {
-                const ids = new Set(parent.children.map((ch) => ch.id));
-                _selection = [
-                  ..._selection.filter((v) => !ids.has(v.id)),
-                  parent
-                ];
-              }
-            });
-            selection.value = _selection;
-          }
-        } else if (e.ctrlKey || e.metaKey) {
-          const filtered = selection.value.filter((v) => !v.equal(props.node));
-          if (filtered.length !== selection.value.length) {
-            selection.value = filtered;
-          } else {
-            selection.value = [...filtered, props.node];
-          }
+          selection.value = _selection;
+        }
+      } else if (e.ctrlKey || e.metaKey) {
+        const filtered = selection.value.filter((v) => !v.equal(props.node));
+        if (filtered.length !== selection.value.length) {
+          selection.value = filtered;
         } else {
-          selection.value = [props.node];
+          selection.value = [...filtered, props.node];
         }
+      } else {
+        selection.value = [props.node];
       }
       nextTick().then(() => {
         selecting.value = false;
@@ -8275,7 +8279,7 @@ function round(cx, cy, sx, sy, ex, ey, verts, clockwise) {
 }
 class Curve {
   arcLengthDivision = 200;
-  _arcLengths;
+  _lengths = [];
   getPointAt(u, output = new Vector2()) {
     return this.getPoint(this.getUToTMapping(u), output);
   }
@@ -8353,10 +8357,10 @@ class Curve {
     return lengths[lengths.length - 1];
   }
   getLengths() {
-    if (!this._arcLengths || this._arcLengths.length !== this.arcLengthDivision + 1) {
+    if (this._lengths.length !== this.arcLengthDivision + 1) {
       this.updateLengths();
     }
-    return this._arcLengths;
+    return this._lengths;
   }
   updateLengths() {
     const divisions = this.arcLengthDivision;
@@ -8367,7 +8371,7 @@ class Curve {
       arcLengths.push(sum);
       prev = current;
     }
-    this._arcLengths = arcLengths;
+    this._lengths = arcLengths;
   }
   getUToTMapping(u, distance2) {
     const lengths = this.getLengths();
@@ -8392,14 +8396,14 @@ class Curve {
         break;
       }
     }
-    i = high;
+    i = Math.max(0, high);
     if (lengths[i] === targetLen) {
       return i / (lengthsLen - 1);
     }
     const before = lengths[i];
     const after = lengths[i + 1];
     const segmentLength = after - before;
-    const segmentFraction = (targetLen - before) / segmentLength;
+    const segmentFraction = Math.max(0, (targetLen - before) / segmentLength);
     return (i + segmentFraction) / (lengthsLen - 1);
   }
   getTangent(t, output = new Vector2()) {
@@ -9061,13 +9065,19 @@ class CompositeCurve extends Curve {
     }
     return output;
   }
+  getLengths() {
+    if (this._lengths.length !== this.curves.length) {
+      this.updateLengths();
+    }
+    return this._lengths;
+  }
   updateLengths() {
-    const arcLengths = [];
+    const lengths = [];
     for (let i = 0, sum = 0, len = this.curves.length; i < len; i++) {
       sum += this.curves[i].getLength();
-      arcLengths.push(sum);
+      lengths.push(sum);
     }
-    this._arcLengths = arcLengths;
+    this._lengths = lengths;
   }
   getControlPointRefs() {
     return this.curves.flatMap((curve) => curve.getControlPointRefs());
@@ -9739,28 +9749,26 @@ class Path2D extends CompositeCurve {
     return this;
   }
   addPath(path) {
-    const index = this.curves.findIndex((v) => v === this.currentCurve);
-    if (index > -1) {
-      this.curves.splice(index, 1);
+    const curvePaths = path instanceof Path2D ? path.curves : [path];
+    if (curvePaths.filter((curvePath) => curvePath.curves.length).length === 0) {
+      return this;
     }
-    if (path instanceof Path2D) {
-      this.curves.push(
-        ...path.curves.filter((curvePath) => curvePath.curves.length).map((v) => v.clone())
-      );
-    } else if (path.curves.length) {
-      this.curves.push(path);
+    if (!this.currentCurve.curves.length) {
+      const index = this.curves.findIndex((v) => v === this.currentCurve);
+      if (index > -1) {
+        this.curves.splice(index, 1);
+      }
     }
-    this.curves.push(this.currentCurve);
+    this.curves.push(...curvePaths.map((v) => v.clone()));
+    this.currentCurve = this.curves[this.curves.length - 1];
     return this;
   }
   closePath() {
     const startPoint = this.startPoint;
-    if (startPoint) {
+    if (startPoint && this.currentCurve.curves.length) {
       this.currentCurve.closePath();
-      if (this.currentCurve.curves.length) {
-        this.currentCurve = new CurvePath().moveTo(startPoint.x, startPoint.y);
-        this.curves.push(this.currentCurve);
-      }
+      this.currentCurve = new CurvePath().moveTo(startPoint.x, startPoint.y);
+      this.curves.push(this.currentCurve);
     }
     return this;
   }
@@ -10073,30 +10081,43 @@ class Path2D extends CompositeCurve {
 }
 const _pen = definePlugin((editor) => {
   const {
-    addElement
+    addElement,
+    renderEngine,
+    activeDrawingTool,
+    getGlobalPointer,
+    state
   } = editor;
-  let pening = false;
   let el;
-  let path;
+  let currentPath;
+  let currentLine;
+  const update = () => {
+    if (el && currentPath) {
+      el.shape.paths = [
+        { data: currentPath.toData() }
+      ];
+      const box = currentPath.getBoundingBox();
+      el.style.left = box.left;
+      el.style.top = box.top;
+      el.style.width = box.width;
+      el.style.height = box.height;
+    }
+  };
   return {
     name: "mce:pen",
     drawingTools: [
       {
         name: "pen",
         handle: (start) => {
-          if (pening) {
-            path.lineTo(start.x, start.y);
-            path.moveTo(start.x, start.y);
-            el.shape.paths = [
-              { data: path.toData() }
-            ];
-            const box = path.getBoundingBox();
-            el.style.left = box.left;
-            el.style.top = box.top;
-            el.style.width = box.width;
-            el.style.height = box.height;
+          if (el) {
+            if (currentPath) {
+              currentLine = new LineCurve(
+                new Vector2(start.x, start.y),
+                new Vector2(start.x, start.y)
+              );
+              currentPath.currentCurve.addCurve(currentLine);
+              update();
+            }
           } else {
-            pening = true;
             el = addElement({
               name: "pen",
               outline: {
@@ -10109,11 +10130,30 @@ const _pen = definePlugin((editor) => {
                 inPptIs: "Shape"
               }
             }, {
-              active: true,
               position: start
             });
-            path = new Path2D();
-            path.moveTo(start.x, start.y);
+            currentPath = new Path2D();
+            currentLine = new LineCurve(
+              new Vector2(start.x, start.y),
+              new Vector2(start.x, start.y)
+            );
+            currentPath.currentCurve.addCurve(currentLine);
+            const onMove = () => {
+              const move = getGlobalPointer();
+              if (currentLine && move) {
+                currentLine.p2.x = move.x;
+                currentLine.p2.y = move.y;
+                update();
+              }
+            };
+            renderEngine.value.on("pointermove", onMove);
+            const stop = watch([state, activeDrawingTool], () => {
+              renderEngine.value.off("pointermove", onMove);
+              stop();
+              el = void 0;
+              currentPath = void 0;
+              currentLine = void 0;
+            });
           }
         }
       },
@@ -10134,22 +10174,20 @@ const _pen = definePlugin((editor) => {
           }, {
             position: start
           });
-          const path2 = new Path2D();
-          path2.moveTo(start.x, start.y);
+          const path = new Path2D();
+          path.moveTo(start.x, start.y);
           return {
             move: (move) => {
-              path2.lineTo(move.x, move.y);
-              path2.moveTo(move.x, move.y);
+              path.lineTo(move.x, move.y);
+              path.moveTo(move.x, move.y);
               el2.shape.paths = [
-                { data: path2.toData() }
+                { data: path.toData() }
               ];
-              const box = path2.getBoundingBox();
+              const box = path.getBoundingBox();
               el2.style.left = box.left;
               el2.style.top = box.top;
               el2.style.width = box.width;
               el2.style.height = box.height;
-            },
-            end: () => {
             }
           };
         }
@@ -10928,8 +10966,14 @@ const _shape = definePlugin((editor) => {
       });
       return {
         move: (move) => {
-          el.style.width = Math.abs(move.x - start.x);
-          el.style.height = Math.abs(move.y - start.y);
+          const minX = Math.min(move.x, start.x);
+          const minY = Math.min(move.y, start.y);
+          const maxX = Math.max(move.x, start.x);
+          const maxY = Math.max(move.y, start.y);
+          el.style.left = minX;
+          el.style.top = minY;
+          el.style.width = maxX - minX;
+          el.style.height = maxY - minY;
         },
         end: () => {
           setActiveDrawingTool(void 0);
@@ -13435,7 +13479,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose }) {
     const props = __props;
     const {
-      selection,
+      elementSelection,
       selectionAabbInDrawboard,
       isFrame
     } = useEditor();
@@ -13455,7 +13499,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       return {};
     });
     const offset2 = computed(() => {
-      if (selection.value.some((v) => isFrame(v)) || props.location?.startsWith("bottom")) {
+      if (elementSelection.value.some((v) => isFrame(v)) || props.location?.startsWith("bottom")) {
         return 32;
       }
       return 8;
@@ -13480,7 +13524,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         "model-value": true
       }, {
         default: withCtx(() => [
-          unref(selection).length > 0 ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
+          unref(elementSelection).length > 0 ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
         ]),
         _: 3
       }, 8, ["style", "location", "middlewares", "offset", "target"]);
@@ -15111,7 +15155,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$5, {
         class: normalizeClass(["mce-editor", [
-          `mce-editor--${unref(state)}`,
+          unref(state) && `mce-editor--${unref(state)}`,
           unref(activeDrawingTool) && `mce-editor--drawing-tool-${unref(activeDrawingTool).name}`,
           grabbing.value && `mce-editor--grabbing`
         ]])

package/dist/plugins/pen.d.ts

@@ -1,6 +1,7 @@
 declare global {
     namespace Mce {
         interface DrawingTools {
+            pen: [];
             pencil: [];
         }
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "description": "The headless canvas editor framework. only the ESM.",
   "author": "wxm",
   "license": "MIT",
@@ -61,7 +61,7 @@
     "diff": "^8.0.2",
     "file-saver": "^2.0.5",
     "lodash-es": "^4.17.21",
-    "modern-canvas": "^0.14.3",
+    "modern-canvas": "^0.14.5",
     "modern-font": "^0.4.4",
     "modern-idoc": "^0.10.6",
     "modern-text": "^1.10.4",