@fieldnotes/core 0.46.1 → 0.47.0

package/dist/index.cjs

@@ -3324,6 +3324,48 @@ function drawHexPath(ctx, cx, cy, cellSize, orientation) {
   ctx.closePath();
 }
 
+// src/elements/renderers/template-measure.ts
+function renderTemplateFeetLabel(ctx, p) {
+  if (p.feet <= 0) return;
+  const directional = p.templateShape === "cone" || p.templateShape === "line";
+  const dir = directional ? p.angle : 0;
+  const length = p.templateShape === "square" ? p.radius / 2 : p.radius;
+  const cos = Math.cos(dir);
+  const sin = Math.sin(dir);
+  const start = p.position;
+  const end = { x: start.x + length * cos, y: start.y + length * sin };
+  const midX = start.x + length / 2 * cos;
+  const midY = start.y + length / 2 * sin;
+  ctx.save();
+  ctx.globalAlpha = 1;
+  ctx.beginPath();
+  ctx.setLineDash([4, 4]);
+  ctx.strokeStyle = p.color;
+  ctx.lineWidth = 1.5;
+  ctx.moveTo(start.x, start.y);
+  ctx.lineTo(end.x, end.y);
+  ctx.stroke();
+  ctx.setLineDash([]);
+  const label = `${Math.round(p.feet)} ft`;
+  const fontSize = Math.max(10, Math.min(14, p.radius * 0.15));
+  ctx.font = `bold ${fontSize}px system-ui, sans-serif`;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "bottom";
+  const textY = midY - 4;
+  const metrics = ctx.measureText(label);
+  const padX = 4;
+  const padY = 2;
+  const textW = metrics.width + padX * 2;
+  const textH = fontSize + padY * 2;
+  ctx.fillStyle = "rgba(255, 255, 255, 0.85)";
+  ctx.beginPath();
+  ctx.roundRect(midX - textW / 2, textY - textH, textW, textH, 3);
+  ctx.fill();
+  ctx.fillStyle = p.color;
+  ctx.fillText(label, midX, textY - padY);
+  ctx.restore();
+}
+
 // src/elements/renderers/template-renderer.ts
 function renderTemplate(ctx, template, store) {
   const grid = store?.getElementsByType("grid")[0];
@@ -3347,9 +3389,6 @@ function renderGeometricTemplate(ctx, template) {
       ctx.arc(cx, cy, r, 0, Math.PI * 2);
       ctx.fill();
       ctx.stroke();
-      if (template.radiusFeet != null && template.radiusFeet > 0) {
-        renderRadiusMarker(ctx, cx, cy, r, template.radiusFeet);
-      }
       break;
     case "square":
       ctx.fillRect(cx - r / 2, cy - r / 2, r, r);
@@ -3382,6 +3421,16 @@ function renderGeometricTemplate(ctx, template) {
       break;
     }
   }
+  if (template.radiusFeet != null && template.radiusFeet > 0) {
+    renderTemplateFeetLabel(ctx, {
+      position: template.position,
+      radius: template.radius,
+      angle: template.angle,
+      templateShape: template.templateShape,
+      feet: template.radiusFeet,
+      color: template.strokeColor
+    });
+  }
   ctx.restore();
 }
 function renderHexTemplate(ctx, template, cellSize, orientation) {
@@ -3428,44 +3477,18 @@ function renderHexTemplate(ctx, template, cellSize, orientation) {
     ctx.lineWidth = template.strokeWidth;
     ctx.stroke();
   }
-  if (template.templateShape === "circle" && template.radiusFeet != null && template.radiusFeet > 0) {
-    const r = template.radius;
-    renderRadiusMarker(ctx, center2.x, center2.y, r, template.radiusFeet);
+  if (template.radiusFeet != null && template.radiusFeet > 0) {
+    renderTemplateFeetLabel(ctx, {
+      position: template.position,
+      radius: template.radius,
+      angle: template.angle,
+      templateShape: template.templateShape,
+      feet: template.radiusFeet,
+      color: template.strokeColor
+    });
   }
   ctx.restore();
 }
-function renderRadiusMarker(ctx, cx, cy, r, feet) {
-  const markerColor = ctx.strokeStyle;
-  ctx.save();
-  ctx.globalAlpha = 1;
-  ctx.beginPath();
-  ctx.setLineDash([4, 4]);
-  ctx.strokeStyle = markerColor;
-  ctx.lineWidth = 1.5;
-  ctx.moveTo(cx, cy);
-  ctx.lineTo(cx + r, cy);
-  ctx.stroke();
-  ctx.setLineDash([]);
-  const label = `${Math.round(feet)} ft`;
-  const fontSize = Math.max(10, Math.min(14, r * 0.15));
-  ctx.font = `bold ${fontSize}px system-ui, sans-serif`;
-  ctx.textAlign = "center";
-  ctx.textBaseline = "bottom";
-  const textX = cx + r / 2;
-  const textY = cy - 4;
-  const metrics = ctx.measureText(label);
-  const padX = 4;
-  const padY = 2;
-  const textW = metrics.width + padX * 2;
-  const textH = fontSize + padY * 2;
-  ctx.fillStyle = "rgba(255, 255, 255, 0.85)";
-  ctx.beginPath();
-  ctx.roundRect(textX - textW / 2, textY - textH, textW, textH, 3);
-  ctx.fill();
-  ctx.fillStyle = markerColor;
-  ctx.fillText(label, textX, textY - padY);
-  ctx.restore();
-}
 
 // src/elements/grid-renderer.ts
 function getSquareGridLines(bounds, cellSize) {
@@ -8311,6 +8334,20 @@ function getOverlayLayout(el, zoom) {
   const rotateHandle = rotatePoint(topMid, center2, angle);
   return { center: center2, corners, rotateHandle, angle };
 }
+function templateAimKnob(el, zoom) {
+  if (el.type !== "template") return null;
+  if (el.templateShape !== "cone" && el.templateShape !== "line") return null;
+  const gap = ROTATE_HANDLE_OFFSET / zoom;
+  const dist = el.radius + gap;
+  const origin = el.position;
+  return {
+    origin,
+    knob: {
+      x: origin.x + dist * Math.cos(el.angle),
+      y: origin.y + dist * Math.sin(el.angle)
+    }
+  };
+}
 function getHandlePositions(bounds) {
   return [
     ["nw", { x: bounds.x, y: bounds.y }],
@@ -8459,6 +8496,22 @@ function renderSelectionBoxes(ctx, p) {
           handleWorldSize
         );
         ctx.setLineDash([4 / zoom, 4 / zoom]);
+        if (p.selectedIds.length === 1 && (el.templateShape === "cone" || el.templateShape === "line")) {
+          const aim = templateAimKnob(el, zoom);
+          if (aim) {
+            ctx.beginPath();
+            ctx.moveTo(aim.origin.x, aim.origin.y);
+            ctx.lineTo(aim.knob.x, aim.knob.y);
+            ctx.stroke();
+            ctx.setLineDash([]);
+            ctx.fillStyle = "#ffffff";
+            ctx.beginPath();
+            ctx.arc(aim.knob.x, aim.knob.y, handleWorldSize / 2, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.stroke();
+            ctx.setLineDash([4 / zoom, 4 / zoom]);
+          }
+        }
       }
       if (p.selectedIds.length === 1 && ROTATABLE_TYPES.has(el.type)) {
         const stemStart = topMidpoint(layout);
@@ -8614,6 +8667,19 @@ function hitTestTemplateResizeHandle(world, ctx, selectedIds) {
   }
   return null;
 }
+function hitTestTemplateAimHandle(world, ctx, selectedIds) {
+  if (selectedIds.length !== 1) return null;
+  const id = selectedIds[0];
+  if (!id) return null;
+  const el = ctx.store.getById(id);
+  if (!el || el.locked) return null;
+  const knob = templateAimKnob(el, ctx.camera.zoom);
+  if (!knob) return null;
+  const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / ctx.camera.zoom;
+  const dx = world.x - knob.knob.x;
+  const dy = world.y - knob.knob.y;
+  return dx * dx + dy * dy <= r * r ? { elementId: id } : null;
+}
 function findElementsInRect(marquee, ctx) {
   const candidates = ctx.store.queryRect(marquee);
   const ids = [];
@@ -8863,6 +8929,12 @@ var SelectTool = class {
       ctx.requestRender();
       return;
     }
+    const aimHit = hitTestTemplateAimHandle(world, ctx, this._selectedIds);
+    if (aimHit) {
+      this.mode = { type: "aiming-template", elementId: aimHit.elementId };
+      ctx.requestRender();
+      return;
+    }
     const rotateHit = hitTestRotateHandle(world, ctx, this._selectedIds);
     if (rotateHit) {
       const el = ctx.store.getById(rotateHit.elementId);
@@ -8944,6 +9016,19 @@ var SelectTool = class {
       this.handleTemplateResize(world, ctx);
       return;
     }
+    if (this.mode.type === "aiming-template") {
+      const el = ctx.store.getById(this.mode.elementId);
+      if (el && el.type === "template" && !el.locked) {
+        let a = Math.atan2(world.y - el.position.y, world.x - el.position.x);
+        if (state.shiftKey) {
+          const snap = ctx.gridType === "hex" ? Math.PI / 3 : ROTATE_SNAP;
+          a = Math.round(a / snap) * snap;
+        }
+        ctx.store.update(this.mode.elementId, { angle: normalizeAngle(a) });
+        ctx.requestRender();
+      }
+      return;
+    }
     if (this.mode.type === "rotating") {
       const { elementId, center: center2, startPointerAngle, startRotation } = this.mode;
       const a = Math.atan2(world.y - center2.y, world.x - center2.x);
@@ -9150,6 +9235,10 @@ var SelectTool = class {
       ctx.setCursor?.("nwse-resize");
       return null;
     }
+    if (hitTestTemplateAimHandle(world, ctx, this._selectedIds)) {
+      ctx.setCursor?.("grab");
+      return null;
+    }
     if (hitTestRotateHandle(world, ctx, this._selectedIds)) {
       ctx.setCursor?.("grab");
       return null;
@@ -9819,6 +9908,7 @@ var TemplateTool = class {
   gridType;
   hexOrientation;
   snapEnabled = false;
+  feetScaleUnit = 0;
   templateShape;
   fillColor;
   strokeColor;
@@ -9867,6 +9957,7 @@ var TemplateTool = class {
     this.gridType = ctx.gridType;
     this.hexOrientation = ctx.hexOrientation;
     this.snapEnabled = !!ctx.gridType || (ctx.snapToGrid ?? false);
+    this.feetScaleUnit = ctx.gridSize && ctx.gridSize > 0 ? ctx.gridType === "hex" ? Math.sqrt(3) * ctx.gridSize : ctx.gridSize : 0;
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
     this.origin = this.snapToGrid(world, ctx);
     this.current = { ...this.origin };
@@ -9966,6 +10057,7 @@ var TemplateTool = class {
         break;
       }
     }
+    this.drawFeetLabel(ctx, radius);
     ctx.restore();
   }
   renderHexOverlay(ctx, radius) {
@@ -10016,30 +10108,7 @@ var TemplateTool = class {
       ctx.lineWidth = this.strokeWidth;
       ctx.stroke();
     }
-    if (this.templateShape === "circle") {
-      const feet = radiusCells * this.feetPerCell;
-      if (feet > 0) {
-        ctx.globalAlpha = 1;
-        const label = `${Math.round(feet)} ft`;
-        const fontSize = Math.max(10, Math.min(14, radius * 0.15));
-        ctx.font = `bold ${fontSize}px system-ui, sans-serif`;
-        ctx.textAlign = "center";
-        ctx.textBaseline = "bottom";
-        const textX = center2.x;
-        const textY = center2.y - 4;
-        const metrics = ctx.measureText(label);
-        const padX = 4;
-        const padY = 2;
-        const textW = metrics.width + padX * 2;
-        const textH = fontSize + padY * 2;
-        ctx.fillStyle = "rgba(255, 255, 255, 0.85)";
-        ctx.beginPath();
-        ctx.roundRect(textX - textW / 2, textY - textH, textW, textH, 3);
-        ctx.fill();
-        ctx.fillStyle = this.strokeColor;
-        ctx.fillText(label, textX, textY - padY);
-      }
-    }
+    this.drawFeetLabel(ctx, radius);
     ctx.restore();
   }
   computeRadius() {
@@ -10057,6 +10126,17 @@ var TemplateTool = class {
     const dy = this.current.y - this.origin.y;
     return Math.atan2(dy, dx);
   }
+  drawFeetLabel(ctx, radius) {
+    const feet = this.feetScaleUnit > 0 ? radius / this.feetScaleUnit * this.feetPerCell : 0;
+    renderTemplateFeetLabel(ctx, {
+      position: this.origin,
+      radius,
+      angle: this.computeAngle(),
+      templateShape: this.templateShape,
+      feet,
+      color: this.strokeColor
+    });
+  }
   snapToGrid(point, ctx) {
     if (!ctx.gridSize) return point;
     if (ctx.gridType === "hex" && ctx.hexOrientation) {
@@ -10186,7 +10266,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.46.1";
+var VERSION = "0.47.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,