mce 0.13.16 → 0.14.1

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Node as Node$1, Element2D, Timeline, Engine, Camera2D, DrawboardEffect, IN_BROWSER, clamp, assets, TimelineNode, Transform2D, DEG_TO_RAD, render, Animation, IN_MAC_OS } from "modern-canvas";
-import { ref, computed, watch, markRaw, reactive, warn, shallowRef, onBeforeUnmount, defineComponent, createElementBlock, createCommentVNode, unref, openBlock, normalizeStyle, toDisplayString, createVNode, useAttrs, createBlock, resolveDynamicComponent, normalizeClass, mergeProps, createElementVNode, inject, toValue, getCurrentInstance, provide, readonly, toRef, onMounted, useId, onDeactivated, onActivated, onScopeDispose, useModel, useTemplateRef, withDirectives, vShow, vModelText, nextTick, Fragment, renderList, renderSlot, mergeModels, resolveComponent, withCtx, withModifiers, Teleport, createTextVNode, createSlots, normalizeProps, guardReactiveProps, onBeforeMount, isRef, h, useSlots } from "vue";
+import { reactive, computed, watch, markRaw, ref, warn, shallowRef, onBeforeUnmount, defineComponent, createElementBlock, createCommentVNode, unref, openBlock, normalizeStyle, toDisplayString, createVNode, useAttrs, createBlock, resolveDynamicComponent, normalizeClass, mergeProps, createElementVNode, inject, toValue, getCurrentInstance, provide, readonly, toRef, onMounted, useId, onDeactivated, onActivated, onScopeDispose, useModel, useTemplateRef, withDirectives, vShow, vModelText, nextTick, Fragment, renderList, renderSlot, mergeModels, resolveComponent, withCtx, withModifiers, Teleport, createTextVNode, createSlots, normalizeProps, guardReactiveProps, onBeforeMount, isRef, h, useSlots } from "vue";
 import { useFileDialog, useEventListener, isClient, onClickOutside, useDebounceFn, useResizeObserver as useResizeObserver$1, useLocalStorage, useImage } from "@vueuse/core";
 import { getObjectValueByPath, setObjectValueByPath, Observable, Reactivable, idGenerator, property, normalizeElement, normalizeTextContent, normalizeCRLF, isEqualObject } from "modern-idoc";
 import { saveAs } from "file-saver";
@@ -17,23 +17,23 @@ const _0_command = defineMixin((editor) => {
   const {
     emit
   } = editor;
-  const commands = ref(/* @__PURE__ */ new Map());
+  const commands = reactive(/* @__PURE__ */ new Map());
   const registerCommand = (value) => {
     if (Array.isArray(value)) {
       value.forEach((item) => registerCommand(item));
     } else {
-      commands.value.set(value.command, value);
+      commands.set(value.command, value);
     }
   };
   const unregisterCommand = (command) => {
-    commands.value.delete(command);
+    commands.delete(command);
   };
   const exec = (command, ...args) => {
     const [name, arg1] = command.split(":");
     if (arg1 !== void 0) {
       args.unshift(arg1);
     }
-    const item = commands.value.get(name);
+    const item = commands.get(name);
     if (!item) {
       throw new Error(`Command "${name}" not found`);
     }
@@ -847,7 +847,7 @@ class Doc extends Model {
       });
       node._text = markRaw(node._text);
       node.text.update();
-      node.requestRedraw();
+      node.requestRender();
     }
     this._proxyChildren(node, yEle.get("childrenIds"));
   }
@@ -1088,6 +1088,7 @@ const en = {
   "polygon": "Polygon",
   "star": "Star",
   "image": "Image",
+  "pen": "Pen",
   "pencil": "Pencil",
   "file": "File",
   "new": "New",
@@ -1188,6 +1189,7 @@ const zhHans = {
   "polygon": "多边形",
   "star": "星形",
   "image": "图片",
+  "pen": "钢笔",
   "pencil": "铅笔",
   "file": "文件",
   "new": "新建",
@@ -1631,7 +1633,7 @@ const _1_hotkey = defineMixin((editor) => {
     registerConfig
   } = editor;
   const hotkeysData = registerConfig("hotkeys", []);
-  const hotkeys = ref(/* @__PURE__ */ new Map());
+  const hotkeys = reactive(/* @__PURE__ */ new Map());
   function registerHotkey(value) {
     if (Array.isArray(value)) {
       value.forEach((item) => registerHotkey(item));
@@ -1648,7 +1650,7 @@ const _1_hotkey = defineMixin((editor) => {
         ...hotkeysData.value.filter((v) => v.command !== command),
         hotkeyData
       ];
-      hotkeys.value.set(command, value);
+      hotkeys.set(command, value);
     }
   }
   function unregisterHotkey(command) {
@@ -1734,7 +1736,7 @@ const _1_hotkey = defineMixin((editor) => {
         ].filter(Boolean).map((v) => v.toLowerCase()).sort().join("+");
         hotkeysData.value.forEach((hotkeyData) => {
           const command = hotkeyData.command;
-          const hotkey = hotkeys.value.get(command);
+          const hotkey = hotkeys.get(command);
           const keys = Array.isArray(hotkeyData.key) ? hotkeyData.key : [hotkeyData.key];
           keys.forEach((key) => {
             const tKey = key.split("+").map((v) => {
@@ -2091,21 +2093,21 @@ const _2_box = defineMixin((editor) => {
   });
 });
 const _2_export = defineMixin((editor) => {
-  const exporters = ref(/* @__PURE__ */ new Map());
+  const exporters = reactive(/* @__PURE__ */ new Map());
   const exporting = ref(false);
   const exportProgress = ref(0);
   const registerExporter = (value) => {
     if (Array.isArray(value)) {
       value.forEach((item) => registerExporter(item));
     } else {
-      exporters.value.set(value.name, value);
+      exporters.set(value.name, value);
     }
   };
   const unregisterExporter = (name) => {
-    exporters.value.delete(name);
+    exporters.delete(name);
   };
   const to = (name, options = {}) => {
-    const res = exporters.value.get(name)?.handle({
+    const res = exporters.get(name)?.handle({
       ...options,
       onProgress: (progress) => {
         exportProgress.value = progress;
@@ -2136,19 +2138,19 @@ const _2_load = defineMixin((editor) => {
   const {
     state
   } = editor;
-  const loaders = ref(/* @__PURE__ */ new Map());
+  const loaders = reactive(/* @__PURE__ */ new Map());
   const registerLoader = (value) => {
     if (Array.isArray(value)) {
       value.forEach((v) => registerLoader(v));
     } else {
-      loaders.value.set(value.name, value);
+      loaders.set(value.name, value);
     }
   };
   const unregisterLoader = (key) => {
-    loaders.value.delete(key);
+    loaders.delete(key);
   };
   const canLoad = async (source) => {
-    for (const loader of loaders.value.values()) {
+    for (const loader of loaders.values()) {
       if (await loader.test(source)) {
         return true;
       }
@@ -2159,7 +2161,7 @@ const _2_load = defineMixin((editor) => {
     state.value = "loading";
     const items = [];
     try {
-      for (const loader of loaders.value.values()) {
+      for (const loader of loaders.values()) {
         if (await loader.test(source)) {
           const res = await loader.load(source);
           if (Array.isArray(res)) {
@@ -2184,7 +2186,7 @@ const _2_load = defineMixin((editor) => {
     } = options;
     return new Promise((resolve) => {
       const accepts = [];
-      for (const loader of loaders.value.values()) {
+      for (const loader of loaders.values()) {
         if (loader.accept) {
           accepts.push(loader.accept);
         }
@@ -2342,7 +2344,7 @@ const _4_0_text = defineMixin((editor) => {
           });
         });
       }
-      element3.requestRedraw();
+      element3.requestRender();
     }
     _handle(element2);
     element2.findOne((descendant) => {
@@ -2380,7 +2382,7 @@ const _4_0_text = defineMixin((editor) => {
       if (element3.style.width !== boundingBox.width || element3.style.height !== boundingBox.height) {
         element3.style.width = boundingBox.width;
         element3.style.height = boundingBox.height;
-        element3.requestRedraw();
+        element3.requestRender();
       }
     }
     _handle(element2);
@@ -2528,7 +2530,7 @@ const _4_0_text = defineMixin((editor) => {
       });
       el.text.content = content;
     }
-    element.value.requestRedraw();
+    element.value.requestRender();
     textToFit(element.value);
   }
   function getTextFill() {
@@ -2779,7 +2781,7 @@ const _4_2_element = defineMixin((editor) => {
       style.top = style.top * scaleY;
       style.width = style.width * scaleX;
       style.height = style.height * scaleY;
-      element2?.requestRedraw?.();
+      element2?.requestRender?.();
     }
     handle(element);
     function deepHandle(element2) {
@@ -3568,7 +3570,7 @@ const _copyAs = definePlugin((editor) => {
       selected: true,
       ...options
     });
-    const exporter = exporters.value.get(key);
+    const exporter = exporters.get(key);
     if (exporter && typeof exporter.copyAs === "function") {
       res = exporter.copyAs(res);
     }
@@ -3773,6 +3775,7 @@ const aliases = {
   unvisible: "m16.1 13.3l-1.45-1.45q.225-1.175-.675-2.2t-2.325-.8L10.2 7.4q.425-.2.863-.3T12 7q1.875 0 3.188 1.313T16.5 11.5q0 .5-.1.938t-.3.862m3.2 3.15l-1.45-1.4q.95-.725 1.688-1.587T20.8 11.5q-1.25-2.525-3.588-4.012T12 6q-.725 0-1.425.1T9.2 6.4L7.65 4.85q1.025-.425 2.1-.638T12 4q3.775 0 6.725 2.087T23 11.5q-.575 1.475-1.513 2.738T19.3 16.45m.5 6.15l-4.2-4.15q-.875.275-1.762.413T12 19q-3.775 0-6.725-2.087T1 11.5q.525-1.325 1.325-2.463T4.15 7L1.4 4.2l1.4-1.4l18.4 18.4zM5.55 8.4q-.725.65-1.325 1.425T3.2 11.5q1.25 2.525 3.588 4.013T12 17q.5 0 .975-.062t.975-.138l-.9-.95q-.275.075-.525.113T12 16q-1.875 0-3.188-1.312T7.5 11.5q0-.275.038-.525t.112-.525zm4.2 4.2",
   move: "M10.07 14.27a.997.997 0 0 1 1.33.48l2.3 4.99l1.8-.85l-2.31-4.98c-.24-.5-.02-1.1.48-1.33l.28-.08l2.3-.45L8 5.12V15.9l1.82-1.47zm3.57 7.7a.99.99 0 0 1-1.33-.47l-2.18-4.74l-2.51 2.02c-.17.14-.38.22-.62.22a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1c.24 0 .47.09.64.23l.01-.01l11.49 9.64a1.001 1.001 0 0 1-.44 1.75l-3.16.62l2.2 4.73c.26.5.02 1.09-.48 1.32z",
   hand: "M21 7a2.5 2.5 0 0 0-2.5-2.5c-.17 0-.34 0-.5.05V4a2.5 2.5 0 0 0-3.17-2.41A2.51 2.51 0 0 0 12.5 0c-1.23 0-2.25.89-2.46 2.06C9.87 2 9.69 2 9.5 2A2.5 2.5 0 0 0 7 4.5v5.89c-.34-.31-.76-.54-1.22-.66L5 9.5c-.82-.21-1.69.11-2.18.85c-.38.57-.4 1.31-.15 1.95l2.56 6.43A8.36 8.36 0 0 0 13 24c4.42 0 8-3.58 8-8zm-2 9c0 3.31-2.69 6-6 6a6.36 6.36 0 0 1-5.91-4L4.5 11.45l.5.14c.5.12.85.46 1 .91L7 15h2V4.5c0-.28.22-.5.5-.5s.5.22.5.5V12h2V2.5c0-.28.22-.5.5-.5s.5.22.5.5V12h2V4c0-.28.22-.5.5-.5s.5.22.5.5v8h2V7c0-.28.22-.5.5-.5s.5.22.5.5z",
+  pen: "m15.54 3.5l4.96 4.97l-1.43 1.41l-4.95-4.95zM3.5 19.78l6.5-6.47c-.1-.31-.03-.7.23-.96c.39-.39 1.03-.39 1.42 0c.39.4.39 1.03 0 1.42c-.26.26-.65.33-.96.23l-6.47 6.5l10.61-3.55l3.53-6.36l-4.94-4.95l-6.37 3.53z",
   pencil: "m14.06 9l.94.94L5.92 19H5v-.92zm3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83l3.75 3.75l1.83-1.83c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94z",
   rectangle: "M4 6v13h16V6zm14 11H6V8h12z",
   line: "M15 3v4.59L7.59 15H3v6h6v-4.58L16.42 9H21V3m-4 2h2v2h-2M5 17h2v2H5",
@@ -4391,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);
@@ -5010,7 +5019,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$k = { class: "mce-layer__name" };
-const _hoisted_2$a = { class: "mce-layer__action" };
+const _hoisted_2$b = { class: "mce-layer__action" };
 const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...{
     name: "MceLayer",
@@ -5249,7 +5258,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                 style: normalizeStyle({ visibility: editing.value ? "hidden" : void 0 })
               }, toDisplayString(editValue.value || props.node.name || props.node.id), 5)
             ]),
-            createElementVNode("div", _hoisted_2$a, [
+            createElementVNode("div", _hoisted_2$b, [
               props.root ? (openBlock(), createBlock(_sfc_main$x, {
                 key: 0,
                 class: normalizeClass(["mce-layer__btn", {
@@ -5307,7 +5316,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$j = { class: "mce-layers" };
-const _hoisted_2$9 = { class: "mce-layers__wrapper" };
+const _hoisted_2$a = { class: "mce-layers__wrapper" };
 const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "Layers",
   setup(__props) {
@@ -5357,7 +5366,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$j, [
-        createElementVNode("div", _hoisted_2$9, [
+        createElementVNode("div", _hoisted_2$a, [
           createVNode(_sfc_main$w, {
             root: true,
             node: unref(root),
@@ -5548,8 +5557,8 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$h = ["onMouseenter"];
-const _hoisted_2$8 = ["onClick"];
-const _hoisted_3$8 = {
+const _hoisted_2$9 = ["onClick"];
+const _hoisted_3$9 = {
   key: 0,
   class: "mce-list-item__checked"
 };
@@ -5693,7 +5702,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                     ]]),
                     onClick: (e) => onClickItem(item, index, e)
                   }, [
-                    hasPrepend.value ? (openBlock(), createElementBlock("div", _hoisted_3$8, [
+                    hasPrepend.value ? (openBlock(), createElementBlock("div", _hoisted_3$9, [
                       item.checked ? (openBlock(), createBlock(unref(_sfc_main$B), {
                         key: 0,
                         icon: "$check"
@@ -5717,7 +5726,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                         icon: "$arrowRight"
                       })) : createCommentVNode("", true)
                     ])) : createCommentVNode("", true)
-                  ], 10, _hoisted_2$8)
+                  ], 10, _hoisted_2$9)
                 ], 40, _hoisted_1$h))
               ], 64);
             }), 128)),
@@ -5870,7 +5879,7 @@ const _menu = definePlugin((editor, options) => {
   const hasSelected = computed(() => selection.value.length > 0);
   const exportMenu = computed(() => ({
     key: "export",
-    children: [...exporters.value.values()].filter((v) => Boolean(v.saveAs)).map((v) => ({ key: `saveAs:${v.name}` }))
+    children: [...exporters.values()].filter((v) => Boolean(v.saveAs)).map((v) => ({ key: `saveAs:${v.name}` }))
   }));
   const fileMenu = computed(() => ({
     key: "file",
@@ -5889,7 +5898,7 @@ const _menu = definePlugin((editor, options) => {
   const copyAsMenu = computed(() => ({
     key: "copyAs",
     disabled: !hasSelected.value,
-    children: [...exporters.value.values()].filter((v) => Boolean(v.copyAs)).map((v) => ({ key: `copyAs:${v.name}` }))
+    children: [...exporters.values()].filter((v) => Boolean(v.copyAs)).map((v) => ({ key: `copyAs:${v.name}` }))
   }));
   const editMenus1 = computed(() => [
     { key: "copy", disabled: !hasSelected.value },
@@ -8272,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);
   }
@@ -8350,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;
@@ -8364,7 +8373,7 @@ class Curve {
       arcLengths.push(sum);
       prev = current;
     }
-    this._arcLengths = arcLengths;
+    this._lengths = arcLengths;
   }
   getUToTMapping(u, distance2) {
     const lengths = this.getLengths();
@@ -8389,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()) {
@@ -9058,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());
@@ -9736,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(
@@ -9747,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;
   }
@@ -10070,15 +10085,86 @@ class Path2D extends CompositeCurve {
 }
 const _pen = definePlugin((editor) => {
   const {
-    addElement
+    addElement,
+    renderEngine,
+    activeDrawingTool,
+    getGlobalPointer,
+    state
   } = editor;
+  let el;
+  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 (el) {
+            if (currentPath) {
+              currentLine = new LineCurve(
+                new Vector2(start.x, start.y),
+                new Vector2(start.x, start.y)
+              );
+              currentPath.currentCurve.addCurve(currentLine);
+              update();
+            }
+          } else {
+            el = addElement({
+              name: "pen",
+              outline: {
+                color: "#d9d9d9",
+                width: 5,
+                lineCap: "round",
+                lineJoin: "round"
+              },
+              meta: {
+                inPptIs: "Shape"
+              }
+            }, {
+              position: start
+            });
+            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;
+            });
+          }
+        }
+      },
       {
         name: "pencil",
         handle: (start) => {
-          const el = addElement({
+          const el2 = addElement({
             name: "pencil",
             outline: {
               color: "#d9d9d9",
@@ -10098,29 +10184,33 @@ const _pen = definePlugin((editor) => {
             move: (move) => {
               path.lineTo(move.x, move.y);
               path.moveTo(move.x, move.y);
-              el.shape.paths = [
+              el2.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;
-            },
-            end: () => {
+              el2.style.left = box.left;
+              el2.style.top = box.top;
+              el2.style.width = box.width;
+              el2.style.height = box.height;
             }
           };
         }
       }
     ],
     hotkeys: [
+      { command: "setActiveDrawingTool:pen", key: "p" },
       { command: "setActiveDrawingTool:pencil", key: "Shift+p" }
     ]
   };
 });
 const _hoisted_1$g = {
   key: 0,
-  class: "mce-tooltip__content"
+  class: "mce-tooltip__arrow"
+};
+const _hoisted_2$8 = { class: "mce-tooltip__content" };
+const _hoisted_3$8 = {
+  key: 0,
+  class: "mce-tooltip__kbd"
 };
 const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "Tooltip",
@@ -10128,7 +10218,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     ...makeMceOverlayProps({
       location: "right",
       offset: 8
-    })
+    }),
+    showArrow: Boolean
   }, {
     "modelValue": { type: Boolean },
     "modelModifiers": {}
@@ -10138,6 +10229,13 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     const props = __props;
     const isActive = useModel(__props, "modelValue");
     const overlay = useTemplateRef("overlayTpl");
+    const classes = computed(() => {
+      const [side, align = "center"] = props.location.split("-");
+      return [
+        `mce-tooltip--side-${side}`,
+        `mce-tooltip--align-${align}`
+      ];
+    });
     function updateLocation() {
       overlay.value?.updateLocation();
     }
@@ -10149,16 +10247,22 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
-        class: "mce-tooltip",
+        class: normalizeClass(["mce-tooltip", classes.value]),
         location: props.location,
         offset: props.offset,
         target: props.target,
         attach: props.attach
       }, createSlots({
         default: withCtx(() => [
-          isActive.value ? (openBlock(), createElementBlock("div", _hoisted_1$g, [
-            renderSlot(_ctx.$slots, "default")
-          ])) : createCommentVNode("", true)
+          isActive.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            __props.showArrow ? (openBlock(), createElementBlock("div", _hoisted_1$g)) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_2$8, [
+              renderSlot(_ctx.$slots, "default"),
+              _ctx.$slots.kbd ? (openBlock(), createElementBlock("div", _hoisted_3$8, [
+                renderSlot(_ctx.$slots, "kbd")
+              ])) : createCommentVNode("", true)
+            ])
+          ], 64)) : createCommentVNode("", true)
         ]),
         _: 2
       }, [
@@ -10175,13 +10279,13 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["modelValue", "location", "offset", "target", "attach"]);
+      ]), 1032, ["modelValue", "class", "location", "offset", "target", "attach"]);
     };
   }
 });
 const _hoisted_1$f = ["width", "height"];
 const _hoisted_2$7 = ["onDblclick", "onMousedown", "onMousemove"];
-const _hoisted_3$7 = { style: { "font-size": "12px", "text-wrap": "nowrap" } };
+const _hoisted_3$7 = { style: { "font-size": "0.75rem", "text-wrap": "nowrap" } };
 const _sfc_main$p = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -10543,7 +10647,7 @@ const _saveAs = definePlugin((editor) => {
       selected: true,
       ...restOptions
     });
-    const exporter = exporters.value.get(key);
+    const exporter = exporters.get(key);
     if (exporter && typeof exporter.saveAs === "function") {
       res = exporter.saveAs(res);
     }
@@ -10866,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);
@@ -12358,7 +12468,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ProgressIndicator = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-c4234331"]]);
+const ProgressIndicator = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-3b286483"]]);
 const _hoisted_1$a = { class: "mce-statusbar" };
 const _hoisted_2$5 = { class: "mce-statusbar__main" };
 const _hoisted_3$5 = { class: "mce-statusbar__item" };
@@ -12456,7 +12566,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Statusbar = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-51df67c3"]]);
+const Statusbar = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-a57093aa"]]);
 const _statusbar = definePlugin((editor) => {
   const {
     registerConfig
@@ -12840,14 +12950,8 @@ const _timeline = definePlugin((editor) => {
   };
 });
 const _hoisted_1$5 = { class: "mce-toolbelt" };
-const _hoisted_2$2 = {
-  key: 0,
-  class: "mce-toolbelt__kbd"
-};
-const _hoisted_3$2 = {
-  key: 1,
-  class: "mce-toolbelt__kbd"
-};
+const _hoisted_2$2 = { key: 0 };
+const _hoisted_3$2 = { key: 1 };
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "Toolbelt",
   setup(__props) {
@@ -12859,9 +12963,10 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       hotkeys,
       getKbd
     } = useEditor();
-    const activeShapeIndex = ref(0);
+    const activeShape = ref(0);
+    const activePen = ref(0);
     const shapeItems = computed(() => {
-      const shapes = [
+      const keys = [
         "rectangle",
         "line",
         "arrow",
@@ -12870,11 +12975,11 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         "star"
       ];
       return [
-        ...shapes.map((key, index) => {
+        ...keys.map((key, index) => {
           return {
             key,
             handle: () => {
-              activeShapeIndex.value = index;
+              activeShape.value = index;
               setActiveDrawingTool(key);
             },
             checked: activeDrawingTool.value?.name === key
@@ -12887,6 +12992,24 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         }
       ];
     });
+    const penItems = computed(() => {
+      const keys = [
+        "pen",
+        "pencil"
+      ];
+      return [
+        ...keys.map((key, index) => {
+          return {
+            key,
+            handle: () => {
+              activePen.value = index;
+              setActiveDrawingTool(key);
+            },
+            checked: activeDrawingTool.value?.name === key
+          };
+        })
+      ];
+    });
     const items = computed(() => {
       return [
         {
@@ -12909,7 +13032,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           handle: () => setActiveDrawingTool("frame")
         },
         {
-          ...shapeItems.value.find((v) => v.checked) ?? shapeItems.value[0],
+          ...shapeItems.value.find((v) => v.checked) ?? shapeItems.value[activeShape.value],
           children: shapeItems.value
         },
         {
@@ -12918,9 +13041,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           handle: () => setActiveDrawingTool("text")
         },
         {
-          key: "pencil",
-          active: activeDrawingTool.value?.name === "pencil",
-          handle: () => setActiveDrawingTool("pencil")
+          ...penItems.value.find((v) => v.checked) ?? penItems.value[activePen.value],
+          children: penItems.value
         }
       ];
     });
@@ -12931,7 +13053,11 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             key,
             class: "mce-toolbelt__group"
           }, [
-            createVNode(_sfc_main$q, { location: "top" }, {
+            createVNode(_sfc_main$q, {
+              location: "top",
+              offset: 12,
+              "show-arrow": ""
+            }, {
               activator: withCtx(({ props: slotProps }) => [
                 createVNode(_sfc_main$x, mergeProps({
                   class: "mce-toolbelt__btn",
@@ -12948,7 +13074,9 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                 }, 1040, ["active", "onClick"])
               ]),
               default: withCtx(() => [
-                createElementVNode("span", null, toDisplayString(unref(t)(tool.key)), 1),
+                createElementVNode("span", null, toDisplayString(unref(t)(tool.key)), 1)
+              ]),
+              kbd: withCtx(() => [
                 unref(hotkeys).has(`setState:${tool.key}`) ? (openBlock(), createElementBlock("span", _hoisted_2$2, toDisplayString(unref(getKbd)(`setState:${tool.key}`)), 1)) : unref(hotkeys).has(`setActiveDrawingTool:${tool.key}`) ? (openBlock(), createElementBlock("span", _hoisted_3$2, toDisplayString(unref(getKbd)(`setActiveDrawingTool:${tool.key}`)), 1)) : createCommentVNode("", true)
               ]),
               _: 2
@@ -15031,7 +15159,8 @@ 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`
         ]])
       }, {