@fieldnotes/core 0.42.0 → 0.44.0

package/dist/index.d.cts

@@ -108,6 +108,7 @@ interface GridElement extends BaseElement {
     opacity: number;
 }
 type TemplateShape = 'circle' | 'cone' | 'line' | 'square';
+type TemplateRenderStyle = 'cells' | 'geometric';
 interface TemplateElement extends BaseElement {
     type: 'template';
     templateShape: TemplateShape;
@@ -119,6 +120,7 @@ interface TemplateElement extends BaseElement {
     opacity: number;
     feetPerCell?: number;
     radiusFeet?: number;
+    renderStyle?: TemplateRenderStyle;
 }
 type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement | ShapeElement | GridElement | TemplateElement;
 type ElementType = CanvasElement['type'];
@@ -471,6 +473,8 @@ interface ViewportOptions {
     contextMenu?: boolean;
     /** Coast (inertial glide) after a pan flick. Default `true`. */
     panInertia?: boolean;
+    /** Show an overview minimap (bottom-right) with tap/drag-to-navigate. Default `false`. */
+    minimap?: boolean;
 }
 declare class Viewport {
     private readonly container;
@@ -506,6 +510,7 @@ declare class Viewport {
     private readonly gridController;
     private readonly interactions;
     private contextMenu;
+    private minimap;
     private readonly htmlRenderers;
     constructor(container: HTMLElement, options?: ViewportOptions);
     get ctx(): CanvasRenderingContext2D | null;
@@ -698,6 +703,7 @@ interface TemplateInput extends BaseDefaults {
     opacity?: number;
     feetPerCell?: number;
     radiusFeet?: number;
+    renderStyle?: TemplateRenderStyle;
 }
 declare function createTemplate(input: TemplateInput): TemplateElement;
 
@@ -992,6 +998,7 @@ interface TemplateToolOptions {
     strokeWidth?: number;
     opacity?: number;
     feetPerCell?: number;
+    renderStyle?: TemplateRenderStyle;
 }
 declare class TemplateTool implements Tool {
     readonly name = "template";
@@ -1008,6 +1015,7 @@ declare class TemplateTool implements Tool {
     private strokeWidth;
     private opacity;
     private feetPerCell;
+    private renderStyle;
     private optionListeners;
     constructor(options?: TemplateToolOptions);
     getOptions(): TemplateToolOptions;
@@ -1057,6 +1065,6 @@ declare class LaserTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.42.0";
+declare const VERSION = "0.44.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, 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, LaserTool, type LaserToolOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, 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 StrokeElement, type StrokePoint, type TemplateElement, 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 };
+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, 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, LaserTool, type LaserToolOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, 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 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

@@ -108,6 +108,7 @@ interface GridElement extends BaseElement {
     opacity: number;
 }
 type TemplateShape = 'circle' | 'cone' | 'line' | 'square';
+type TemplateRenderStyle = 'cells' | 'geometric';
 interface TemplateElement extends BaseElement {
     type: 'template';
     templateShape: TemplateShape;
@@ -119,6 +120,7 @@ interface TemplateElement extends BaseElement {
     opacity: number;
     feetPerCell?: number;
     radiusFeet?: number;
+    renderStyle?: TemplateRenderStyle;
 }
 type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement | ShapeElement | GridElement | TemplateElement;
 type ElementType = CanvasElement['type'];
@@ -471,6 +473,8 @@ interface ViewportOptions {
     contextMenu?: boolean;
     /** Coast (inertial glide) after a pan flick. Default `true`. */
     panInertia?: boolean;
+    /** Show an overview minimap (bottom-right) with tap/drag-to-navigate. Default `false`. */
+    minimap?: boolean;
 }
 declare class Viewport {
     private readonly container;
@@ -506,6 +510,7 @@ declare class Viewport {
     private readonly gridController;
     private readonly interactions;
     private contextMenu;
+    private minimap;
     private readonly htmlRenderers;
     constructor(container: HTMLElement, options?: ViewportOptions);
     get ctx(): CanvasRenderingContext2D | null;
@@ -698,6 +703,7 @@ interface TemplateInput extends BaseDefaults {
     opacity?: number;
     feetPerCell?: number;
     radiusFeet?: number;
+    renderStyle?: TemplateRenderStyle;
 }
 declare function createTemplate(input: TemplateInput): TemplateElement;
 
@@ -992,6 +998,7 @@ interface TemplateToolOptions {
     strokeWidth?: number;
     opacity?: number;
     feetPerCell?: number;
+    renderStyle?: TemplateRenderStyle;
 }
 declare class TemplateTool implements Tool {
     readonly name = "template";
@@ -1008,6 +1015,7 @@ declare class TemplateTool implements Tool {
     private strokeWidth;
     private opacity;
     private feetPerCell;
+    private renderStyle;
     private optionListeners;
     constructor(options?: TemplateToolOptions);
     getOptions(): TemplateToolOptions;
@@ -1057,6 +1065,6 @@ declare class LaserTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.42.0";
+declare const VERSION = "0.44.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, 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, LaserTool, type LaserToolOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, 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 StrokeElement, type StrokePoint, type TemplateElement, 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 };
+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, 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, LaserTool, type LaserToolOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, 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 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

@@ -3121,7 +3121,7 @@ function drawHexPath(ctx, cx, cy, cellSize, orientation) {
 // src/elements/renderers/template-renderer.ts
 function renderTemplate(ctx, template, store) {
   const grid = store?.getElementsByType("grid")[0];
-  if (grid && grid.gridType === "hex") {
+  if (grid && grid.gridType === "hex" && template.renderStyle !== "geometric") {
     renderHexTemplate(ctx, template, grid.cellSize, grid.hexOrientation);
     return;
   }
@@ -3797,7 +3797,8 @@ function createTemplate(input) {
     strokeWidth: input.strokeWidth ?? 2,
     opacity: input.opacity ?? 0.6,
     feetPerCell: input.feetPerCell,
-    radiusFeet: input.radiusFeet
+    radiusFeet: input.radiusFeet,
+    ...input.renderStyle !== void 0 ? { renderStyle: input.renderStyle } : {}
   };
 }
 
@@ -4277,6 +4278,135 @@ var ContextMenu = class {
   }
 };
 
+// src/canvas/minimap-transform.ts
+function unionBounds(a, b) {
+  const minX = Math.min(a.x, b.x);
+  const minY = Math.min(a.y, b.y);
+  const maxX = Math.max(a.x + a.w, b.x + b.w);
+  const maxY = Math.max(a.y + a.h, b.y + b.h);
+  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+}
+function computeMinimapTransform(mapping, miniW, miniH, padding) {
+  const availW = Math.max(1, miniW - 2 * padding);
+  const availH = Math.max(1, miniH - 2 * padding);
+  const w = Math.max(mapping.w, 1);
+  const h = Math.max(mapping.h, 1);
+  const scale = Math.min(availW / w, availH / h);
+  const offsetX = (miniW - mapping.w * scale) / 2 - mapping.x * scale;
+  const offsetY = (miniH - mapping.h * scale) / 2 - mapping.y * scale;
+  return { scale, offsetX, offsetY };
+}
+function worldToMini(t, p) {
+  return { x: p.x * t.scale + t.offsetX, y: p.y * t.scale + t.offsetY };
+}
+function miniToWorld(t, p) {
+  return { x: (p.x - t.offsetX) / t.scale, y: (p.y - t.offsetY) / t.scale };
+}
+
+// src/canvas/minimap.ts
+var WIDTH = 200;
+var HEIGHT = 140;
+var MARGIN = 16;
+var PADDING = 8;
+var NEUTRAL = "rgba(100,116,139,0.6)";
+var VIEWPORT_STROKE = "#3b82f6";
+function elementColor(el) {
+  return "color" in el && typeof el.color === "string" ? el.color : NEUTRAL;
+}
+var Minimap = class {
+  constructor(deps) {
+    this.deps = deps;
+    const canvas = document.createElement("canvas");
+    canvas.width = WIDTH;
+    canvas.height = HEIGHT;
+    Object.assign(canvas.style, {
+      position: "absolute",
+      right: `${MARGIN}px`,
+      bottom: `${MARGIN}px`,
+      width: `${WIDTH}px`,
+      height: `${HEIGHT}px`,
+      background: "rgba(255,255,255,0.85)",
+      border: "1px solid rgba(0,0,0,0.15)",
+      borderRadius: "4px",
+      touchAction: "none",
+      cursor: "pointer",
+      zIndex: "10"
+    });
+    canvas.addEventListener("pointerdown", this.onPointerDown);
+    canvas.addEventListener("pointermove", this.onPointerMove);
+    canvas.addEventListener("pointerup", this.onPointerUp);
+    this.deps.container.appendChild(canvas);
+    this.canvas = canvas;
+  }
+  canvas;
+  rafId = null;
+  dragging = false;
+  scheduleDraw() {
+    if (this.rafId !== null) return;
+    this.rafId = this.deps.requestFrame(this.draw);
+  }
+  destroy() {
+    if (this.rafId !== null) {
+      this.deps.cancelFrame(this.rafId);
+      this.rafId = null;
+    }
+    this.canvas.removeEventListener("pointerdown", this.onPointerDown);
+    this.canvas.removeEventListener("pointermove", this.onPointerMove);
+    this.canvas.removeEventListener("pointerup", this.onPointerUp);
+    this.canvas.remove();
+  }
+  currentTransform() {
+    const viewport = this.deps.getViewportRect();
+    const content = this.deps.getContentBounds();
+    const mapping = content ? unionBounds(content, viewport) : viewport;
+    return computeMinimapTransform(mapping, WIDTH, HEIGHT, PADDING);
+  }
+  draw = () => {
+    this.rafId = null;
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) return;
+    const t = this.currentTransform();
+    const viewport = this.deps.getViewportRect();
+    ctx.clearRect(0, 0, WIDTH, HEIGHT);
+    for (const el of this.deps.getElements()) {
+      const b = getElementBounds(el);
+      if (!b) continue;
+      const tl = worldToMini(t, { x: b.x, y: b.y });
+      ctx.fillStyle = elementColor(el);
+      ctx.fillRect(tl.x, tl.y, Math.max(1, b.w * t.scale), Math.max(1, b.h * t.scale));
+    }
+    const vtl = worldToMini(t, { x: viewport.x, y: viewport.y });
+    ctx.strokeStyle = VIEWPORT_STROKE;
+    ctx.lineWidth = 1.5;
+    ctx.strokeRect(vtl.x, vtl.y, viewport.w * t.scale, viewport.h * t.scale);
+  };
+  navigateFromEvent(e) {
+    const rect = this.canvas.getBoundingClientRect();
+    const point = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    const world = miniToWorld(this.currentTransform(), point);
+    this.deps.navigateTo(world);
+  }
+  onPointerDown = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    this.dragging = true;
+    this.canvas.setPointerCapture?.(e.pointerId);
+    this.navigateFromEvent(e);
+  };
+  onPointerMove = (e) => {
+    if (!this.dragging) return;
+    e.stopPropagation();
+    this.navigateFromEvent(e);
+  };
+  onPointerUp = (e) => {
+    this.dragging = false;
+    try {
+      this.canvas.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+  };
+};
+
 // src/canvas/viewport-dom.ts
 function createWrapper() {
   const el = document.createElement("div");
@@ -6402,7 +6532,7 @@ function getElementStyle(element) {
 }
 
 // src/canvas/selection-ops.ts
-function unionBounds(list) {
+function unionBounds2(list) {
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   for (const b of list) {
     minX = Math.min(minX, b.x);
@@ -6497,7 +6627,7 @@ var SelectionOps = class {
   align(edge) {
     const bounded = this.boundedSelection();
     if (bounded.length < 2) return;
-    const B = unionBounds(bounded.map((e) => e.bounds));
+    const B = unionBounds2(bounded.map((e) => e.bounds));
     this.deps.recorder.begin();
     const moved = [];
     for (const { id, el, bounds: b } of bounded) {
@@ -6904,6 +7034,27 @@ var Viewport = class {
       });
     }
     this.unsubToolChange = this.toolManager.onChange(() => this.contextMenu?.close());
+    if (options.minimap) {
+      const visibleEls = () => this.store.getAll().filter((el) => this.layerManager.isLayerVisible(el.layerId));
+      this.minimap = new Minimap({
+        container: this.wrapper,
+        getElements: visibleEls,
+        getContentBounds: () => getElementsBoundingBox(visibleEls()),
+        getViewportRect: () => this.camera.getVisibleRect(this.canvasEl.clientWidth, this.canvasEl.clientHeight),
+        navigateTo: (w) => {
+          const z = this.camera.zoom;
+          this.camera.moveTo(
+            this.canvasEl.clientWidth / 2 - w.x * z,
+            this.canvasEl.clientHeight / 2 - w.y * z
+          );
+        },
+        requestFrame: (cb) => typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame(cb) : 0,
+        cancelFrame: (id) => {
+          if (typeof cancelAnimationFrame !== "undefined") cancelAnimationFrame(id);
+        }
+      });
+      this.minimap.scheduleDraw();
+    }
     this.domNodeManager = new DomNodeManager({
       domLayer: this.domLayer,
       onEditRequest: (id) => this.interactions.startEditingElement(id),
@@ -6936,6 +7087,7 @@ var Viewport = class {
       this.applyCameraTransform();
       this.noteEditor.updateToolbarPosition();
       this.contextMenu?.close();
+      this.minimap?.scheduleDraw();
       this.requestRender();
     });
     this.gridController = new GridController({
@@ -6950,6 +7102,7 @@ var Viewport = class {
       this.store.on("add", (el) => {
         if (el.type === "grid") this.gridController.syncContext();
         this.renderLoop.markLayerDirty(el.layerId);
+        this.minimap?.scheduleDraw();
         this.requestRender();
       }),
       this.store.on("remove", (el) => {
@@ -6957,6 +7110,7 @@ var Viewport = class {
         this.unbindArrowsFrom(el);
         this.domNodeManager.removeDomNode(el.id);
         this.renderLoop.markLayerDirty(el.layerId);
+        this.minimap?.scheduleDraw();
         this.requestRender();
       }),
       this.store.on("update", ({ previous, current }) => {
@@ -6965,17 +7119,20 @@ var Viewport = class {
         if (previous.layerId !== current.layerId) {
           this.renderLoop.markLayerDirty(previous.layerId);
         }
+        this.minimap?.scheduleDraw();
         this.requestRender();
       }),
       this.store.on("clear", () => {
         this.domNodeManager.clearDomNodes();
         this.renderLoop.markAllLayersDirty();
         this.gridController.syncContext();
+        this.minimap?.scheduleDraw();
         this.requestRender();
       })
     ];
     this.layerManager.on("change", () => {
       this.toolContext.activeLayerId = this.layerManager.activeLayerId;
+      this.minimap?.scheduleDraw();
       this.requestRender();
     });
     this.interactions = new ViewportInteractions({
@@ -7035,6 +7192,7 @@ var Viewport = class {
   gridController;
   interactions;
   contextMenu = null;
+  minimap = null;
   htmlRenderers = /* @__PURE__ */ new Map();
   get ctx() {
     return this.canvasEl.getContext("2d");
@@ -7308,6 +7466,7 @@ var Viewport = class {
     this.arrowLabelEditor.cancel();
     this.historyRecorder.destroy();
     this.contextMenu?.dispose();
+    this.minimap?.destroy();
     this.wrapper.removeEventListener("pointerdown", this.interactions.onTapDown);
     this.wrapper.removeEventListener("pointerup", this.interactions.onDoubleTap);
     this.wrapper.removeEventListener("dragover", this.interactions.onDragOver);
@@ -9454,6 +9613,7 @@ var TemplateTool = class {
   strokeWidth;
   opacity;
   feetPerCell;
+  renderStyle;
   optionListeners = /* @__PURE__ */ new Set();
   constructor(options = {}) {
     this.templateShape = options.templateShape ?? "circle";
@@ -9462,6 +9622,7 @@ var TemplateTool = class {
     this.strokeWidth = options.strokeWidth ?? 2;
     this.opacity = options.opacity ?? 0.6;
     this.feetPerCell = options.feetPerCell ?? 5;
+    this.renderStyle = options.renderStyle ?? "cells";
   }
   getOptions() {
     return {
@@ -9470,7 +9631,8 @@ var TemplateTool = class {
       strokeColor: this.strokeColor,
       strokeWidth: this.strokeWidth,
       opacity: this.opacity,
-      feetPerCell: this.feetPerCell
+      feetPerCell: this.feetPerCell,
+      renderStyle: this.renderStyle
     };
   }
   setOptions(options) {
@@ -9480,6 +9642,7 @@ var TemplateTool = class {
     if (options.strokeWidth !== void 0) this.strokeWidth = options.strokeWidth;
     if (options.opacity !== void 0) this.opacity = options.opacity;
     if (options.feetPerCell !== void 0) this.feetPerCell = options.feetPerCell;
+    if (options.renderStyle !== void 0) this.renderStyle = options.renderStyle;
     this.notifyOptionsChange();
   }
   onOptionsChange(listener) {
@@ -9522,6 +9685,7 @@ var TemplateTool = class {
       opacity: this.opacity,
       feetPerCell: this.feetPerCell,
       radiusFeet: radiusFeet > 0 ? radiusFeet : void 0,
+      renderStyle: this.renderStyle,
       layerId: ctx.activeLayerId ?? ""
     });
     ctx.store.add(element);
@@ -9537,7 +9701,7 @@ var TemplateTool = class {
     if (!this.drawing) return;
     const radius = this.computeRadius();
     if (radius <= 0) return;
-    if (this.gridType === "hex" && this.hexOrientation) {
+    if (this.gridType === "hex" && this.hexOrientation && this.renderStyle !== "geometric") {
       this.renderHexOverlay(ctx, radius);
       return;
     }
@@ -9810,7 +9974,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.42.0";
+var VERSION = "0.44.0";
 export {
   ArrowTool,
   AutoSave,