fix: 修复拖拽bug

Author: jay

README.md

@@ -124,8 +124,8 @@ the Release, rather than merely pushing the tag, starts the package workflow.
 The current version can also be published manually from `main` with:
 
 ```bash
-gh workflow run publish.yml --ref main
-gh run watch
+npm run publish:github
+npm run publish:watch
 ```
 
 ## Package API

package.json

@@ -37,6 +37,8 @@
     "start": "node ./bin/htmleditor.js ./samples/demo.html --no-open",
     "test": "node --test",
     "pack:check": "npm pack --dry-run",
+    "publish:github": "gh workflow run publish.yml --ref main",
+    "publish:watch": "gh run watch",
     "prepublishOnly": "npm test"
   },
   "engines": {

public/app.js

@@ -772,6 +772,9 @@ function injectEditorLayer() {
       const snapshot = refreshSelectionSnapshot(range);
       state.canvasEditor?.updateSelection(snapshot, range);
     },
+    onInteractionStart() {
+      stopInlineTextEdit({ commit: true });
+    },
     onMoveStart(element) {
       state.suppressPreviewClick = true;
       applyDragMarker(element, "dragging");

public/canvasEditorMath.js

@@ -57,6 +57,28 @@ export function resizeFromHandle({
   };
 }
 
+export function resizeMaxWidthForViewport({
+  side,
+  startWidth,
+  rectLeft,
+  rectRight,
+  viewportWidth,
+  margin = 4,
+}) {
+  const edge = Math.max(0, finiteNumber(margin, 4));
+  const availableWidth = side === "left"
+    ? finiteNumber(rectRight) - edge
+    : finiteNumber(viewportWidth) - finiteNumber(rectLeft) - edge;
+
+  // When the authored box already exceeds the visible viewport, treating the
+  // smaller available width as a maximum makes the first pointer move jump or
+  // appear frozen. Leave that axis unconstrained so both shrinking and growing
+  // continue from the actual rendered width.
+  return availableWidth >= finiteNumber(startWidth)
+    ? availableWidth
+    : Number.POSITIVE_INFINITY;
+}
+
 export function moveFromPointer({
   startLeft,
   startTop,
@@ -76,18 +98,34 @@ export function moveFromPointer({
     .every((value) => Number.isFinite(Number(value)));
   if (canBound) {
     const edge = Math.max(0, finiteNumber(margin, 4));
-    const visualLeft = clamp(
-      finiteNumber(startRectLeft) + appliedX,
-      edge,
-      finiteNumber(viewportWidth) - finiteNumber(width) - edge,
-    );
-    const visualTop = clamp(
-      finiteNumber(startRectTop) + appliedY,
-      edge,
-      finiteNumber(viewportHeight) - finiteNumber(height) - edge,
-    );
-    appliedX = visualLeft - finiteNumber(startRectLeft);
-    appliedY = visualTop - finiteNumber(startRectTop);
+    const viewport = {
+      width: finiteNumber(viewportWidth),
+      height: finiteNumber(viewportHeight),
+    };
+    const size = {
+      width: finiteNumber(width),
+      height: finiteNumber(height),
+    };
+
+    // A box larger than the viewport cannot satisfy both edge constraints.
+    // Keep that axis following the pointer instead of collapsing its range and
+    // pinning the element to zero while the snap guides continue to move.
+    if (size.width <= viewport.width - edge * 2) {
+      const visualLeft = clamp(
+        finiteNumber(startRectLeft) + appliedX,
+        edge,
+        viewport.width - size.width - edge,
+      );
+      appliedX = visualLeft - finiteNumber(startRectLeft);
+    }
+    if (size.height <= viewport.height - edge * 2) {
+      const visualTop = clamp(
+        finiteNumber(startRectTop) + appliedY,
+        edge,
+        viewport.height - size.height - edge,
+      );
+      appliedY = visualTop - finiteNumber(startRectTop);
+    }
   }
   return {
     left: finiteNumber(startLeft) + appliedX,

public/canvasTextEditor.js

@@ -15,6 +15,7 @@ import {
   moveHandlePlacement,
   positionStart,
   resizeFromHandle,
+  resizeMaxWidthForViewport,
   toggleDecoration,
   toggleFontStyle,
   toggleFontWeight,
@@ -436,6 +437,7 @@ export function createCanvasTextEditor({
   onDelete = () => {},
   onSelectionChange = () => {},
   onTextRangeChange = () => {},
+  onInteractionStart = () => {},
   onMoveStart = () => {},
   onMoveEnd = () => {},
 }) {
@@ -662,6 +664,7 @@ export function createCanvasTextEditor({
     if (!selected) return;
     event.preventDefault();
     event.stopPropagation();
+    onInteractionStart(selected);
     const handle = captureTarget?.setPointerCapture ? captureTarget : event.currentTarget;
     handle?.setPointerCapture?.(event.pointerId);
     const listenerTarget = doc;
@@ -779,8 +782,10 @@ export function createCanvasTextEditor({
     if (!selected) return;
     event.preventDefault();
     event.stopPropagation();
+    onInteractionStart(selected);
     onBeforeChange();
     const handle = event.currentTarget;
+    const listenerTarget = doc;
     const side = handle.dataset.handle;
     handle.setPointerCapture(event.pointerId);
     const startX = event.clientX;
@@ -796,6 +801,14 @@ export function createCanvasTextEditor({
     });
     const wasStatic = computed.position === "static";
     const wasInline = computed.display === "inline";
+    const maxWidth = resizeMaxWidthForViewport({
+      side,
+      startWidth,
+      rectLeft: rect.left,
+      rectRight: rect.right,
+      viewportWidth: win.innerWidth,
+      margin: 4,
+    });
     if (side === "left" && wasStatic) selected.style.position = "relative";
     if (wasInline) selected.style.display = "inline-block";
     selected.style.boxSizing = "border-box";
@@ -811,16 +824,16 @@ export function createCanvasTextEditor({
         startWidth,
         startLeft,
         deltaX: moveEvent.clientX - startX,
-        maxWidth: side === "left" ? rect.right - 4 : win.innerWidth - rect.left - 4,
+        maxWidth,
       });
       selected.style.width = `${latest.width}px`;
       if (side === "left") selected.style.left = `${latest.left}px`;
       refresh();
     };
     const finish = () => {
-      handle.removeEventListener("pointermove", move);
-      handle.removeEventListener("pointerup", finish);
-      handle.removeEventListener("pointercancel", finish);
+      listenerTarget.removeEventListener("pointermove", move);
+      listenerTarget.removeEventListener("pointerup", finish);
+      listenerTarget.removeEventListener("pointercancel", finish);
       const changes = [
         { property: "box-sizing", value: "border-box" },
         { property: "max-width", value: "none" },
@@ -836,9 +849,9 @@ export function createCanvasTextEditor({
       onSelectionChange(selected);
       sync();
     };
-    handle.addEventListener("pointermove", move);
-    handle.addEventListener("pointerup", finish);
-    handle.addEventListener("pointercancel", finish);
+    listenerTarget.addEventListener("pointermove", move);
+    listenerTarget.addEventListener("pointerup", finish);
+    listenerTarget.addEventListener("pointercancel", finish);
   }
 
   root.querySelector('[data-handle="move"]').addEventListener("pointerdown", beginMove);

test/canvasEditorMath.test.js

@@ -44,6 +44,45 @@ test("resize respects the available viewport width", () => {
   );
 });
 
+test("resize viewport limit keeps normal elements inside the visible area", () => {
+  assert.equal(
+    math.resizeMaxWidthForViewport({
+      side: "right",
+      startWidth: 200,
+      rectLeft: 50,
+      rectRight: 250,
+      viewportWidth: 320,
+      margin: 4,
+    }),
+    266,
+  );
+  assert.equal(
+    math.resizeMaxWidthForViewport({
+      side: "left",
+      startWidth: 200,
+      rectLeft: 50,
+      rectRight: 250,
+      viewportWidth: 320,
+      margin: 4,
+    }),
+    246,
+  );
+});
+
+test("resize viewport limit does not lock an already overflowing element", () => {
+  assert.equal(
+    math.resizeMaxWidthForViewport({
+      side: "right",
+      startWidth: 300,
+      rectLeft: 50,
+      rectRight: 350,
+      viewportWidth: 320,
+      margin: 4,
+    }),
+    Number.POSITIVE_INFINITY,
+  );
+});
+
 test("move applies pointer deltas to the starting position", () => {
   assert.equal(typeof math.moveFromPointer, "function");
   assert.deepEqual(
@@ -71,6 +110,25 @@ test("move keeps the visual element inside viewport margins", () => {
   );
 });
 
+test("move keeps oversized elements following the pointer on unconstrainable axes", () => {
+  assert.deepEqual(
+    math.moveFromPointer({
+      startLeft: 98,
+      startTop: -32,
+      deltaX: 50,
+      deltaY: 25,
+      startRectLeft: 98,
+      startRectTop: 228,
+      width: 1050,
+      height: 700,
+      viewportWidth: 1012,
+      viewportHeight: 600,
+      margin: 0,
+    }),
+    { left: 148, top: -7 },
+  );
+});
+
 test("move handle flips inside when the selected box touches the viewport top", () => {
   assert.equal(typeof math.moveHandlePlacement, "function");
   assert.equal(math.moveHandlePlacement({ top: 0 }), "inside");