mce 0.14.0 → 0.14.1

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);
@@ -8275,7 +8281,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 +8359,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 +8373,7 @@ class Curve {
       arcLengths.push(sum);
       prev = current;
     }
-    this._arcLengths = arcLengths;
+    this._lengths = arcLengths;
   }
   getUToTMapping(u, distance2) {
     const lengths = this.getLengths();
@@ -8392,14 +8398,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 +9067,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,9 +9751,11 @@ 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);
+    if (!this.currentCurve.curves.length) {
+      const index = this.curves.findIndex((v) => v === this.currentCurve);
+      if (index > -1) {
+        this.curves.splice(index, 1);
+      }
     }
     if (path instanceof Path2D) {
       this.curves.push(
@@ -9750,17 +9764,15 @@ class Path2D extends CompositeCurve {
     } else if (path.curves.length) {
       this.curves.push(path);
     }
-    this.curves.push(this.currentCurve);
+    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 +10085,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 +10134,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 +10178,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 +10970,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);
@@ -15111,7 +15159,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.1",
   "description": "The headless canvas editor framework. only the ESM.",
   "author": "wxm",
   "license": "MIT",