@fieldnotes/core 0.30.0 → 0.31.1

package/README.md

@@ -439,7 +439,7 @@ new Viewport(container, {
 
 ```typescript
 new PencilTool({ color: '#ff0000', width: 3, smoothing: 1.5 });
-new EraserTool({ radius: 30 }); // mode: 'partial' (default) splits strokes at the erased span; mode: 'stroke' deletes the whole stroke
+new EraserTool({ radius: 30 }); // radius is screen pixels (converted to world units per zoom); mode: 'partial' (default) splits strokes at the erased span; mode: 'stroke' deletes the whole stroke
 new ArrowTool({ color: '#333', width: 2 });
 ```
 
@@ -453,7 +453,7 @@ viewport.toolManager.register(
 viewport.setTool('highlighter');
 ```
 
-`ShapeTool` supports a `'line'` shape kind that draws a straight segment between two points. Hold **Shift** while drawing to snap to 45° increments. Lines are hit-tested by proximity to the segment, and `ShapeElement.flip` records which diagonal of the bounding box the line runs along.
+`ShapeTool` supports a `'line'` shape kind that draws a straight segment between two points. Hold **Shift** while drawing to snap to 45° increments. Lines are hit-tested by proximity to the segment, and `ShapeElement.flip` records which diagonal of the bounding box the line runs along. When a line is selected, it shows two endpoint drag-handles instead of bounding-box resize handles — drag one endpoint to reshape the line while the other stays anchored.
 
 ### Arrow Labels
 

package/dist/index.cjs

@@ -2277,6 +2277,13 @@ function getArrowRenderGeometry(arrow) {
 }
 
 // src/elements/shape-geometry.ts
+function lineFromEndpoints(a, b) {
+  return {
+    position: { x: Math.min(a.x, b.x), y: Math.min(a.y, b.y) },
+    size: { w: Math.abs(b.x - a.x), h: Math.abs(b.y - a.y) },
+    flip: b.x > a.x !== b.y > a.y
+  };
+}
 function lineEndpoints(shape) {
   const { x, y } = shape.position;
   const { w, h } = shape.size;
@@ -6450,11 +6457,12 @@ var EraserTool = class {
   }
   eraseAt(state, ctx) {
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    const worldRadius = this.radius / ctx.camera.zoom;
     const queryBounds = {
-      x: world.x - this.radius,
-      y: world.y - this.radius,
-      w: this.radius * 2,
-      h: this.radius * 2
+      x: world.x - worldRadius,
+      y: world.y - worldRadius,
+      w: worldRadius * 2,
+      h: worldRadius * 2
     };
     const candidates = ctx.store.queryRect(queryBounds);
     let erased = false;
@@ -6462,14 +6470,14 @@ var EraserTool = class {
       if (el.type !== "stroke") continue;
       if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
       if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
-      if (!this.strokeIntersects(el, world)) continue;
+      if (!this.strokeIntersects(el, world, worldRadius)) continue;
       if (this.mode === "stroke") {
         ctx.store.remove(el.id);
         erased = true;
         continue;
       }
       const localEraser = { x: world.x - el.position.x, y: world.y - el.position.y };
-      const runs = erasePoints(el.points, localEraser, this.radius);
+      const runs = erasePoints(el.points, localEraser, worldRadius);
       if (runs === null) continue;
       ctx.store.remove(el.id);
       for (const run of runs) {
@@ -6489,8 +6497,8 @@ var EraserTool = class {
     }
     if (erased) ctx.requestRender();
   }
-  strokeIntersects(stroke, point) {
-    return hitTestStroke(stroke, point, this.radius);
+  strokeIntersects(stroke, point, worldRadius) {
+    return hitTestStroke(stroke, point, worldRadius);
   }
 };
 
@@ -6682,6 +6690,12 @@ var SelectTool = class {
       ctx.requestRender();
       return;
     }
+    const lineHit = this.hitTestLineHandles(world, ctx);
+    if (lineHit) {
+      this.mode = { type: "line-handle", elementId: lineHit.elementId, fixed: lineHit.fixed };
+      ctx.requestRender();
+      return;
+    }
     const templateResizeHit = this.hitTestTemplateResizeHandle(world, ctx);
     if (templateResizeHit) {
       this.mode = { type: "resizing-template", elementId: templateResizeHit };
@@ -6737,6 +6751,15 @@ var SelectTool = class {
       applyArrowHandleDrag(this.mode.handle, this.mode.elementId, world, ctx);
       return;
     }
+    if (this.mode.type === "line-handle") {
+      ctx.setCursor?.("grabbing");
+      const el = ctx.store.getById(this.mode.elementId);
+      if (el && el.type === "shape") {
+        ctx.store.update(el.id, lineFromEndpoints(this.mode.fixed, world));
+      }
+      ctx.requestRender();
+      return;
+    }
     if (this.mode.type === "resizing-template") {
       ctx.setCursor?.("nwse-resize");
       this.handleTemplateResize(world, ctx);
@@ -6905,6 +6928,10 @@ var SelectTool = class {
       ctx.setCursor?.(getArrowHandleCursor(arrowHit.handle, false));
       return null;
     }
+    if (this.hitTestLineHandles(world, ctx)) {
+      ctx.setCursor?.("grab");
+      return null;
+    }
     const templateResizeHit = this.hitTestTemplateResizeHandle(world, ctx);
     if (templateResizeHit) {
       ctx.setCursor?.("nwse-resize");
@@ -6992,6 +7019,7 @@ var SelectTool = class {
     for (const id of this._selectedIds) {
       const el = ctx.store.getById(id);
       if (!el || !("size" in el)) continue;
+      if (el.type === "shape" && el.shape === "line") continue;
       const bounds = getElementBounds(el);
       if (!bounds) continue;
       const corners = this.getHandlePositions(bounds);
@@ -7003,6 +7031,20 @@ var SelectTool = class {
     }
     return null;
   }
+  hitTestLineHandles(world, ctx) {
+    if (this._selectedIds.length === 0) return null;
+    const zoom = ctx.camera.zoom;
+    const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
+    const r2 = r * r;
+    for (const id of this._selectedIds) {
+      const el = ctx.store.getById(id);
+      if (!el || el.type !== "shape" || el.shape !== "line") continue;
+      const [a, b] = lineEndpoints(el);
+      if ((world.x - a.x) ** 2 + (world.y - a.y) ** 2 <= r2) return { elementId: id, fixed: b };
+      if ((world.x - b.x) ** 2 + (world.y - b.y) ** 2 <= r2) return { elementId: id, fixed: a };
+    }
+    return null;
+  }
   getHandlePositions(bounds) {
     return [
       ["nw", { x: bounds.x, y: bounds.y }],
@@ -7040,6 +7082,19 @@ var SelectTool = class {
         this.renderBindingHighlights(canvasCtx, el, zoom);
         continue;
       }
+      if (el.type === "shape" && el.shape === "line") {
+        canvasCtx.setLineDash([]);
+        canvasCtx.fillStyle = "#ffffff";
+        const r = handleWorldSize / 2;
+        for (const p of lineEndpoints(el)) {
+          canvasCtx.beginPath();
+          canvasCtx.arc(p.x, p.y, r, 0, Math.PI * 2);
+          canvasCtx.fill();
+          canvasCtx.stroke();
+        }
+        canvasCtx.setLineDash([4 / zoom, 4 / zoom]);
+        continue;
+      }
       const bounds = getElementBounds(el);
       if (!bounds) continue;
       const pad = SELECTION_PAD / zoom;
@@ -8050,7 +8105,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.30.0";
+var VERSION = "0.31.1";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,