@fieldnotes/core 0.30.0 → 0.31.0

package/README.md

@@ -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;
@@ -6682,6 +6689,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 +6750,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 +6927,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 +7018,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 +7030,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 +7081,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 +8104,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.30.0";
+var VERSION = "0.31.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,