@fieldnotes/core 0.46.1 → 0.47.0

package/dist/index.d.cts

@@ -1057,6 +1057,7 @@ declare class TemplateTool implements Tool {
     private gridType;
     private hexOrientation;
     private snapEnabled;
+    private feetScaleUnit;
     private templateShape;
     private fillColor;
     private strokeColor;
@@ -1078,6 +1079,7 @@ declare class TemplateTool implements Tool {
     private renderHexOverlay;
     private computeRadius;
     private computeAngle;
+    private drawFeetLabel;
     private snapToGrid;
     private notifyOptionsChange;
 }
@@ -1113,6 +1115,6 @@ declare class LaserTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.46.1";
+declare const VERSION = "0.47.0";
 
 export { type ActiveFormats, type AlignEdge, type ArrowElement, type ArrowStrokeStyle, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, type DistributeAxis, type ElementChangeMeta, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, IndexedDBAdapter, type IndexedDBAdapterOptions, LaserTool, type LaserToolOptions, type Layer, LayerManager, LocalStorageAdapter, MeasureTool, type MeasureToolOptions, type Measurement, MemoryAdapter, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StorageAdapter, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateRenderStyle, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportSvg, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

package/dist/index.d.ts

@@ -1057,6 +1057,7 @@ declare class TemplateTool implements Tool {
     private gridType;
     private hexOrientation;
     private snapEnabled;
+    private feetScaleUnit;
     private templateShape;
     private fillColor;
     private strokeColor;
@@ -1078,6 +1079,7 @@ declare class TemplateTool implements Tool {
     private renderHexOverlay;
     private computeRadius;
     private computeAngle;
+    private drawFeetLabel;
     private snapToGrid;
     private notifyOptionsChange;
 }
@@ -1113,6 +1115,6 @@ declare class LaserTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.46.1";
+declare const VERSION = "0.47.0";
 
 export { type ActiveFormats, type AlignEdge, type ArrowElement, type ArrowStrokeStyle, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, type DistributeAxis, type ElementChangeMeta, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, IndexedDBAdapter, type IndexedDBAdapterOptions, LaserTool, type LaserToolOptions, type Layer, LayerManager, LocalStorageAdapter, MeasureTool, type MeasureToolOptions, type Measurement, MemoryAdapter, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StorageAdapter, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateRenderStyle, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportSvg, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

package/dist/index.js

@@ -3238,6 +3238,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];
@@ -3261,9 +3303,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);
@@ -3296,6 +3335,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) {
@@ -3342,44 +3391,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) {
@@ -8225,6 +8248,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 }],
@@ -8373,6 +8410,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);
@@ -8528,6 +8581,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 = [];
@@ -8777,6 +8843,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);
@@ -8858,6 +8930,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);
@@ -9064,6 +9149,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;
@@ -9733,6 +9822,7 @@ var TemplateTool = class {
   gridType;
   hexOrientation;
   snapEnabled = false;
+  feetScaleUnit = 0;
   templateShape;
   fillColor;
   strokeColor;
@@ -9781,6 +9871,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 };
@@ -9880,6 +9971,7 @@ var TemplateTool = class {
         break;
       }
     }
+    this.drawFeetLabel(ctx, radius);
     ctx.restore();
   }
   renderHexOverlay(ctx, radius) {
@@ -9930,30 +10022,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() {
@@ -9971,6 +10040,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) {
@@ -10100,7 +10180,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.46.1";
+var VERSION = "0.47.0";
 export {
   ArrowTool,
   AutoSave,