mce 0.17.8 → 0.17.10

package/dist/components/shared/Ruler.vue.d.ts

@@ -13,6 +13,7 @@ type __VLS_Props = {
     borderColor?: string;
     textColor?: string;
     lineColor?: string;
+    boxColor?: string;
     locked?: boolean;
     labelFormat?: (tick: number) => string;
 };

package/dist/index.js

@@ -3454,6 +3454,9 @@ const _edit = definePlugin((editor, options) => {
         let html = "";
         if (!source) {
           const selected = selection.value;
+          if (!selected.length) {
+            return;
+          }
           html += `<mce-clipboard>${JSON.stringify(selected.map((v) => {
             const json = v.toJSON();
             if (json.style) {
@@ -3489,7 +3492,11 @@ const _edit = definePlugin((editor, options) => {
         ]);
       } else {
         if (source === void 0) {
-          source = selection.value.map((v) => {
+          const selected = selection.value;
+          if (!selected.length) {
+            return;
+          }
+          source = selected.map((v) => {
             const json = v.toJSON();
             delete json.style.left;
             delete json.style.top;
@@ -3652,7 +3659,7 @@ const _edit = definePlugin((editor, options) => {
     hotkeys: [
       { command: "cancel", key: "escape", editable: false },
       { command: "delete", key: ["Backspace", "Delete"], when: () => Boolean(selection.value.length > 0) },
-      { command: "copy", key: "CmdOrCtrl+C", editable: false },
+      { command: "copy", key: "CmdOrCtrl+C", editable: false, preventDefault: false },
       { command: "cut", key: "CmdOrCtrl+X", editable: false },
       { command: "paste", key: "CmdOrCtrl+V", editable: false, preventDefault: false },
       { command: "duplicate", key: "CmdOrCtrl+D", editable: false }
@@ -10563,6 +10570,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     borderColor: {},
     textColor: {},
     lineColor: {},
+    boxColor: {},
     locked: { type: Boolean },
     labelFormat: { type: Function, default: (tick) => String(tick) }
   }, {
@@ -10582,15 +10590,17 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     const box = ref();
     const colors = reactive({
       text: "#000",
-      border: "#000"
+      border: "#000",
+      box: "#0000002E"
     });
     const borderColor = computed(() => props.borderColor ?? colors.border);
     const textColor = computed(() => props.textColor ?? colors.text);
     const lineColor = computed(() => props.lineColor ?? "rgb(var(--m-theme-secondary))");
+    const boxColor = computed(() => props.boxColor ?? colors.box);
     function drawSelected() {
       if (!props.selected?.width || !props.selected?.height)
         return;
-      ctx.fillStyle = "#6165FD20";
+      ctx.fillStyle = boxColor.value;
       const offset2 = props.vertical ? props.selected.top : props.selected.left;
       const length = props.vertical ? props.selected.height : props.selected.width;
       ctx.fillRect(offset2, 0, length, props.size);
@@ -10739,6 +10749,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         const style = window.getComputedStyle(dom);
         colors.text = style.getPropertyValue("--text-color").trim();
         colors.border = style.getPropertyValue("--border-color").trim();
+        colors.box = `rgba(${style.getPropertyValue("--m-theme-primary").trim()}, 0.18)`;
       }
     });
     onBeforeUnmount(() => {
@@ -10899,8 +10910,9 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           axis: "",
           size: 16,
           "line-color": unref(config).lineColor,
+          "box-color": unref(config).boxColor,
           locked: unref(config).locked
-        }, null, 8, ["modelValue", "zoom", "position", "selected", "line-color", "locked"]),
+        }, null, 8, ["modelValue", "zoom", "position", "selected", "line-color", "box-color", "locked"]),
         createVNode(_sfc_main$r, {
           modelValue: refLines.value.y,
           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => refLines.value.y = $event),
@@ -10912,8 +10924,9 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           vertical: "",
           size: 16,
           "line-color": unref(config).lineColor,
+          "box-color": unref(config).boxColor,
           locked: unref(config).locked
-        }, null, 8, ["modelValue", "zoom", "position", "selected", "line-color", "locked"]),
+        }, null, 8, ["modelValue", "zoom", "position", "selected", "line-color", "box-color", "locked"]),
         _cache[2] || (_cache[2] = createElementVNode("div", { class: "m-rulers__left-top" }, null, -1))
       ]);
     };
@@ -11611,7 +11624,6 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
       }
       const handleObj = index === void 0 ? { type: "move", x: 0, y: 0, width: 0, height: 0 } : computedHandles.value[index];
       const handle = handleObj.type;
-      activeHandle.value = handle;
       const handleArr = handle.split("-");
       const last = handleArr.length > 1 ? handleArr.pop() || "" : "";
       const key = handleArr.join("-");
@@ -11649,6 +11661,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
         threshold: props.threshold,
         start: (ctx) => {
           transforming.value = true;
+          activeHandle.value = handle;
           ctx.handle = handle;
           ctx.value = ctx.oldValue = getRawModel();
           emit("start", ctx);
@@ -17904,7 +17917,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       bind();
       return unbind;
     }
-    function onHover(event) {
+    function onEnginePointerHover(event) {
       let cursor;
       let hovered;
       if (elementSelection.value.length > 1 && selectionAabbInDrawboard.value.contains({
@@ -17933,8 +17946,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       hoverElement.value = hovered;
       setCursor(cursor);
     }
+    let _lastClickTime = 0;
+    let _lastClickPos = { x: 0, y: 0 };
     function onEnginePointerDown(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)) {
+      const {
+        srcElement,
+        button,
+        target: element,
+        clientX,
+        clientY
+      } = downEvent;
+      if (srcElement && srcElement !== drawboardDom.value && srcElement.dataset?.pointerdown_to_drawboard === void 0 || camera.value.spaceKey || ![0, 2].includes(button)) {
         return;
       }
       const {
@@ -17943,22 +17965,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       function isIncluded(node) {
         return isElement(node) && !isLock(node) && (allowTopFrame || (!node.children.some((node2) => isElement(node2)) || !isFrameNode(node, true))) && !node.findAncestor((ancestor) => isLock(ancestor));
       }
-      const drawing = state.value === "drawing";
-      const hand = state.value === "hand";
-      const element = downEvent.target;
-      const start = { x: downEvent.clientX, y: downEvent.clientY };
-      let current = { ...start };
-      let prev = { ...current };
-      let dragging = false;
-      let selecting = false;
-      let isUp = false;
+      const downState = state.value;
+      const startPos = { x: clientX, y: clientY };
+      let currentPos = { ...startPos };
+      let prevPos = { ...currentPos };
       let selected = [];
-      let ctxState;
       const inSelection = allowTopFrame && elementSelection.value.some((node) => node.equal(element)) || selectionAabbInDrawboard.value.contains({
-        x: start.x - drawboardAabb.value.left,
-        y: start.y - drawboardAabb.value.top
+        x: startPos.x - drawboardAabb.value.left,
+        y: startPos.y - drawboardAabb.value.top
       });
-      if (downEvent.button === 2) {
+      if (button === 2) {
         if (!inSelection) {
           const result = props.activeStrategy({
             element,
@@ -17974,16 +17990,35 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         }
         return;
       }
+      const now = Date.now();
+      let dragging = false;
+      let selecting = false;
+      let isUp = false;
+      let ctxState;
+      const _dx = Math.abs(currentPos.x - _lastClickPos.x);
+      const _dy = Math.abs(currentPos.y - _lastClickPos.y);
+      const isDoubleClick = now - _lastClickTime < 300 && _dx < 5 && _dy < 5;
+      if (isDoubleClick) {
+        _lastClickTime = 0;
+        props.doubleclickStrategy({ event: downEvent, editor });
+        return;
+      } else {
+        _lastClickTime = now;
+        _lastClickPos = { ...currentPos };
+      }
       let drawingTool;
-      if (drawing) {
-        drawingTool = activeTool.value?.handle?.(
-          camera.value.toGlobal({
-            x: current.x - drawboardAabb.value.left,
-            y: current.y - drawboardAabb.value.top
-          })
-        );
-      } else if (hand) {
-        grabbing.value = true;
+      switch (downState) {
+        case "drawing":
+          drawingTool = activeTool.value?.handle?.(
+            camera.value.toGlobal({
+              x: currentPos.x - drawboardAabb.value.left,
+              y: currentPos.y - drawboardAabb.value.top
+            })
+          );
+          break;
+        case "hand":
+          grabbing.value = true;
+          break;
       }
       function onDrag(event) {
         const result = props.activeStrategy({
@@ -18000,13 +18035,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
       function onSelectArea() {
         selecting = true;
-        if (state.value !== "painting" && state.value !== "selecting") {
+        if (downState !== "painting" && downState !== "selecting") {
           state.value = "selecting";
         }
-        selectionMarquee.value.x = Math.min(start.x, current.x) - drawboardAabb.value.left;
-        selectionMarquee.value.y = Math.min(start.y, current.y) - drawboardAabb.value.top;
-        selectionMarquee.value.width = Math.abs(start.x - current.x);
-        selectionMarquee.value.height = Math.abs(start.y - current.y);
+        selectionMarquee.value.x = Math.min(startPos.x, currentPos.x) - drawboardAabb.value.left;
+        selectionMarquee.value.y = Math.min(startPos.y, currentPos.y) - drawboardAabb.value.top;
+        selectionMarquee.value.width = Math.abs(startPos.x - currentPos.x);
+        selectionMarquee.value.height = Math.abs(startPos.y - currentPos.y);
         exec("marqueeSelect");
         selected = elementSelection.value;
       }
@@ -18037,93 +18072,115 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         }
       }
       function canStartDrag() {
-        return !dragging && state.value !== "painting" && (Math.abs(current.x - start.x) >= 3 || Math.abs(current.y - start.y) >= 3);
+        return !dragging && downState !== "painting" && (Math.abs(currentPos.x - startPos.x) >= 3 || Math.abs(currentPos.y - startPos.y) >= 3);
       }
       function _onEnginePointerMove(moveEvent) {
-        if (drawing || hand) ;
-        else {
-          if (inSelection) {
-            if (canStartDrag()) {
-              dragging = true;
-              exec("startTransform", downEvent);
-            }
-          } else {
-            if (element) {
+        switch (downState) {
+          case "drawing":
+          case "hand":
+            break;
+          default:
+            if (inSelection) {
               if (canStartDrag()) {
                 dragging = true;
-                onDrag(moveEvent);
-                nextTick(() => {
-                  if (!isUp) {
-                    exec("startTransform", downEvent);
-                  }
-                });
+                exec("startTransform", downEvent);
+              }
+            } else {
+              if (element) {
+                if (canStartDrag()) {
+                  dragging = true;
+                  onDrag(moveEvent);
+                  nextTick(() => {
+                    if (!isUp) {
+                      exec("startTransform", downEvent);
+                    }
+                  });
+                }
               }
             }
-          }
+            break;
         }
       }
       function _onPointerMove(moveEvent) {
-        current = { x: moveEvent.clientX, y: moveEvent.clientY };
-        if (drawing) {
-          drawingTool?.move?.(
-            camera.value.toGlobal({
-              x: current.x - drawboardAabb.value.left,
-              y: current.y - drawboardAabb.value.top
-            })
-          );
-        } else if (hand) {
-          camera.value.position.add({
-            x: Math.round(prev.x - current.x),
-            y: Math.round(prev.y - current.y)
-          });
-        } else {
-          if (!inSelection) {
-            if (!isIncluded(element)) {
-              onSelectArea();
+        currentPos = { x: moveEvent.clientX, y: moveEvent.clientY };
+        switch (downState) {
+          case "drawing":
+            drawingTool?.move?.(
+              camera.value.toGlobal({
+                x: currentPos.x - drawboardAabb.value.left,
+                y: currentPos.y - drawboardAabb.value.top
+              })
+            );
+            break;
+          case "hand":
+            camera.value.position.add({
+              x: Math.round(prevPos.x - currentPos.x),
+              y: Math.round(prevPos.y - currentPos.y)
+            });
+            break;
+          default:
+            if (!inSelection) {
+              if (!isIncluded(element)) {
+                onSelectArea();
+              }
             }
-          }
+            break;
         }
-        prev = { ...current };
+        prevPos = { ...currentPos };
       }
       async function _onPointerUp(upEvent) {
-        current = { x: upEvent.clientX, y: upEvent.clientY };
-        if (drawing) {
-          drawingTool?.end?.(
-            camera.value.toGlobal({
-              x: current.x - drawboardAabb.value.left,
-              y: current.y - drawboardAabb.value.top
-            })
-          );
-        } else if (hand) {
-          grabbing.value = false;
-        } else {
-          if (!dragging) {
-            if (element && !selecting) {
-              onActivate();
-            }
-            elementSelection.value = selected;
-            if (ctxState) {
-              if (selected[0] && !isLock(selected[0])) {
-                switch (ctxState) {
-                  case "typing": {
-                    await exec("startTyping", upEvent);
-                    break;
+        currentPos = { x: upEvent.clientX, y: upEvent.clientY };
+        switch (downState) {
+          case "drawing":
+            drawingTool?.end?.(
+              camera.value.toGlobal({
+                x: currentPos.x - drawboardAabb.value.left,
+                y: currentPos.y - drawboardAabb.value.top
+              })
+            );
+            break;
+          case "hand":
+            grabbing.value = false;
+            break;
+          default: {
+            if (!dragging) {
+              if (element && !selecting) {
+                onActivate();
+              }
+              elementSelection.value = selected;
+              if (ctxState) {
+                if (selected[0] && !isLock(selected[0])) {
+                  switch (ctxState) {
+                    case "typing": {
+                      await exec("startTyping", upEvent);
+                      break;
+                    }
                   }
                 }
               }
+              onEnginePointerHover(downEvent);
             }
-            onHover(downEvent);
-          }
-          if (state.value === "painting" || state.value === "selecting") {
-            selectionMarquee.value = new Aabb2D({ x: -1, y: -1, width: 0, height: 0 });
-          }
-          if (state.value === "painting") {
-            exec("applyFormatPaint", selected);
-            if (!(upEvent?.ctrlKey || upEvent?.shiftKey || upEvent?.metaKey)) {
-              exec("exitFormatPaint");
+            switch (state.value) {
+              case "selecting":
+                selectionMarquee.value = new Aabb2D({ x: -1, y: -1, width: 0, height: 0 });
+                if (state.value) {
+                  state.value = void 0;
+                }
+                break;
+              case "painting":
+                selectionMarquee.value = new Aabb2D({ x: -1, y: -1, width: 0, height: 0 });
+                exec("applyFormatPaint", selected);
+                if (!(upEvent?.ctrlKey || upEvent?.shiftKey || upEvent?.metaKey)) {
+                  exec("exitFormatPaint");
+                }
+                break;
+              default:
+                if (state.value) {
+                  state.value = void 0;
+                }
+                break;
             }
-          } else if (state.value) {
-            state.value = void 0;
+            break;
           }
         }
         renderEngine.value.off("pointermove", _onEnginePointerMove);
@@ -18143,7 +18200,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       if (camera.value.grabbing || event.button === 1 || state.value && state.value !== "typing") {
         return;
       }
-      onHover(event);
+      onEnginePointerHover(event);
     }
     function onEnginePointerOver(event) {
       if (event.srcElement !== drawboardDom.value) {
@@ -18161,12 +18218,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         }
       }
     }
-    async function onDoubleclick(event) {
-      props.doubleclickStrategy({
-        event,
-        editor
-      });
-    }
     function setComponentRef(ref2, item) {
       if (!componentRefs[item.plugin]) {
         componentRefs[item.plugin] = [];
@@ -18209,9 +18260,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 ref: drawboardDom,
                 class: "m-editor__drawboard",
                 "data-pixel-ratio": unref(renderEngine).pixelRatio,
-                onDblclick: _cache[0] || (_cache[0] = ($event) => onDoubleclick($event)),
                 onScroll,
-                onWheel: _cache[1] || (_cache[1] = withModifiers(() => {
+                onWheel: _cache[0] || (_cache[0] = withModifiers(() => {
                 }, ["prevent"]))
               }, [
                 createElementVNode("canvas", _hoisted_2, null, 512),

package/dist/plugins/ruler.d.ts

@@ -7,6 +7,7 @@ declare global {
             visible: boolean;
             adsorbed: boolean;
             lineColor?: string;
+            boxColor?: string;
             locked: boolean;
         }
         interface Commands {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.17.8",
+  "version": "0.17.10",
   "description": "A headless infinite canvas editor framework built on WebGL rendering, supports exporting to image, video, and PPT. Only the ESM.",
   "author": "wxm",
   "license": "MIT",