@fieldnotes/core 0.47.0 → 0.49.0

package/dist/index.cjs

@@ -69,6 +69,7 @@ __export(index_exports, {
   getHexCellsInCone: () => getHexCellsInCone,
   getHexCellsInLine: () => getHexCellsInLine,
   getHexCellsInRadius: () => getHexCellsInRadius,
+  getHexCellsInRectangle: () => getHexCellsInRectangle,
   getHexCellsInSquare: () => getHexCellsInSquare,
   getHexDistance: () => getHexDistance,
   isNearBezier: () => isNearBezier,
@@ -983,6 +984,26 @@ function getTemplateBounds(el) {
       const maxY = Math.max(y0, y1, y2, y3);
       return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
     }
+    case "rectangle": {
+      const halfW = (el.width ?? 0) / 2;
+      const cos = Math.cos(el.angle);
+      const sin = Math.sin(el.angle);
+      const perpX = -sin * halfW;
+      const perpY = cos * halfW;
+      const x0 = cx + perpX;
+      const y0 = cy + perpY;
+      const x1 = cx + r * cos + perpX;
+      const y1 = cy + r * sin + perpY;
+      const x2 = cx + r * cos - perpX;
+      const y2 = cy + r * sin - perpY;
+      const x3 = cx - perpX;
+      const y3 = cy - perpY;
+      const minX = Math.min(x0, x1, x2, x3);
+      const minY = Math.min(y0, y1, y2, y3);
+      const maxX = Math.max(x0, x1, x2, x3);
+      const maxY = Math.max(y0, y1, y2, y3);
+      return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+    }
   }
 }
 function transferStrokeBounds(prev, next) {
@@ -1221,6 +1242,14 @@ var KeyboardActions = class {
     if (this.deps.isToolActive()) return;
     this.deps.toggleLock?.();
   }
+  rotate(direction) {
+    if (this.deps.isToolActive()) return;
+    this.flushPendingNudge();
+    const sel = this.selectTool();
+    if (!sel) return;
+    if (sel.tool.selectedIds.length === 0) return;
+    this.deps.rotate?.(direction);
+  }
   zOrder(operation) {
     if (this.deps.isToolActive()) return;
     this.flushPendingNudge();
@@ -1325,6 +1354,8 @@ var DEFAULT_BINDINGS = [
   ["ungroup", ["mod+shift+g"]],
   ["cut", ["mod+x"]],
   ["toggle-lock", ["mod+shift+l"]],
+  ["rotate-cw", ["r"]],
+  ["rotate-ccw", ["shift+r"]],
   ["nudge-left", ["arrowleft"]],
   ["nudge-right", ["arrowright"]],
   ["nudge-up", ["arrowup"]],
@@ -1637,6 +1668,14 @@ var KeyboardHandler = class {
         e?.preventDefault();
         this.deps.actions.toggleLock();
         return;
+      case "rotate-cw":
+        e?.preventDefault();
+        this.deps.actions.rotate("cw");
+        return;
+      case "rotate-ccw":
+        e?.preventDefault();
+        this.deps.actions.rotate("ccw");
+        return;
       case "zoom-in":
         e?.preventDefault();
         this.zoomByFactor(ZOOM_STEP);
@@ -1773,6 +1812,7 @@ var InputHandler = class {
       group: options.group,
       ungroup: options.ungroup,
       toggleLock: options.toggleLock,
+      rotate: options.rotate,
       getLastPointerWorld: () => this.lastPointerWorld()
     });
     this.openContextMenu = options.openContextMenu;
@@ -3286,6 +3326,46 @@ function getHexCellsInLine(center2, angle, radiusCells, cellSize, orientation) {
   }
   return cells;
 }
+function getHexCellsInRectangle(center2, angle, lengthCells, widthCells, cellSize, orientation) {
+  const nLen = Math.round(lengthCells);
+  const wCells = Math.max(1, Math.round(widthCells));
+  const off = pixelToOffset(center2.x, center2.y, cellSize, orientation);
+  const cube = offsetToCube(off.col, off.row, orientation);
+  const centerPixel = offsetToPixel(off.col, off.row, cellSize, orientation);
+  if (nLen <= 0) return [centerPixel];
+  const vertexOffset = orientation === "pointy" ? Math.PI / 6 : 0;
+  const step = Math.PI / 3;
+  const snappedAngle = Math.round((angle - vertexOffset) / step) * step + vertexOffset;
+  const cos = Math.cos(snappedAngle);
+  const sin = Math.sin(snappedAngle);
+  const snapUnit = Math.sqrt(3) * cellSize;
+  const lineLength = nLen * snapUnit;
+  const halfWidth = wCells * snapUnit / 2 + 1e-6;
+  const iterM = nLen + Math.ceil(wCells / 2) + 1;
+  const cells = [];
+  for (let dq = -iterM; dq <= iterM; dq++) {
+    const rMin = Math.max(-iterM, -dq - iterM);
+    const rMax = Math.min(iterM, -dq + iterM);
+    for (let dr = rMin; dr <= rMax; dr++) {
+      const absQ = cube.q + dq;
+      const absR = cube.r + dr;
+      const pixel = offsetToPixel(
+        cubeToOffset(absQ, absR, orientation).col,
+        cubeToOffset(absQ, absR, orientation).row,
+        cellSize,
+        orientation
+      );
+      const dx = pixel.x - centerPixel.x;
+      const dy = pixel.y - centerPixel.y;
+      const along = dx * cos + dy * sin;
+      const perp = Math.abs(-dx * sin + dy * cos);
+      if (along >= -snapUnit * 0.1 && along <= lineLength + snapUnit * 0.1 && perp <= halfWidth) {
+        cells.push(pixel);
+      }
+    }
+  }
+  return cells;
+}
 function getHexCellsInSquare(center2, radiusCells, cellSize, orientation) {
   const n2 = Math.round(radiusCells);
   const off = pixelToOffset(center2.x, center2.y, cellSize, orientation);
@@ -3327,7 +3407,7 @@ function drawHexPath(ctx, cx, cy, cellSize, orientation) {
 // src/elements/renderers/template-measure.ts
 function renderTemplateFeetLabel(ctx, p) {
   if (p.feet <= 0) return;
-  const directional = p.templateShape === "cone" || p.templateShape === "line";
+  const directional = p.templateShape === "cone" || p.templateShape === "line" || p.templateShape === "rectangle";
   const dir = directional ? p.angle : 0;
   const length = p.templateShape === "square" ? p.radius / 2 : p.radius;
   const cos = Math.cos(dir);
@@ -3420,6 +3500,22 @@ function renderGeometricTemplate(ctx, template) {
       ctx.stroke();
       break;
     }
+    case "rectangle": {
+      const halfW = (template.width ?? 0) / 2;
+      const cos = Math.cos(template.angle);
+      const sin = Math.sin(template.angle);
+      const perpX = -sin * halfW;
+      const perpY = cos * halfW;
+      ctx.beginPath();
+      ctx.moveTo(cx + perpX, cy + perpY);
+      ctx.lineTo(cx + r * cos + perpX, cy + r * sin + perpY);
+      ctx.lineTo(cx + r * cos - perpX, cy + r * sin - perpY);
+      ctx.lineTo(cx - perpX, cy - perpY);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      break;
+    }
   }
   if (template.radiusFeet != null && template.radiusFeet > 0) {
     renderTemplateFeetLabel(ctx, {
@@ -3451,6 +3547,18 @@ function renderHexTemplate(ctx, template, cellSize, orientation) {
     case "square":
       cells = getHexCellsInSquare(center2, radiusCells, cellSize, orientation);
       break;
+    case "rectangle": {
+      const widthCells = (template.width ?? 0) / snapUnit;
+      cells = getHexCellsInRectangle(
+        center2,
+        template.angle,
+        radiusCells,
+        widthCells,
+        cellSize,
+        orientation
+      );
+      break;
+    }
   }
   ctx.save();
   ctx.globalAlpha = template.opacity;
@@ -4027,7 +4135,8 @@ function createTemplate(input) {
     opacity: input.opacity ?? 0.6,
     feetPerCell: input.feetPerCell,
     radiusFeet: input.radiusFeet,
-    ...input.renderStyle !== void 0 ? { renderStyle: input.renderStyle } : {}
+    ...input.renderStyle !== void 0 ? { renderStyle: input.renderStyle } : {},
+    ...input.width !== void 0 ? { width: input.width } : {}
   };
 }
 
@@ -5624,6 +5733,20 @@ function emitGeometricTemplate(t) {
       ].map(([px, py]) => `${n(px ?? 0)},${n(py ?? 0)}`).join(" ");
       return `<polygon points="${pts}" ${attrs} />`;
     }
+    case "rectangle": {
+      const halfW = (t.width ?? 0) / 2;
+      const cos = Math.cos(t.angle);
+      const sin = Math.sin(t.angle);
+      const perpX = -sin * halfW;
+      const perpY = cos * halfW;
+      const pts = [
+        [cx + perpX, cy + perpY],
+        [cx + r * cos + perpX, cy + r * sin + perpY],
+        [cx + r * cos - perpX, cy + r * sin - perpY],
+        [cx - perpX, cy - perpY]
+      ].map(([px, py]) => `${n(px ?? 0)},${n(py ?? 0)}`).join(" ");
+      return `<polygon points="${pts}" ${attrs} />`;
+    }
   }
 }
 function emitHexTemplate(t, grid) {
@@ -5646,6 +5769,18 @@ function emitHexTemplate(t, grid) {
     case "square":
       cells = getHexCellsInSquare(center2, radiusCells, cellSize, orientation);
       break;
+    case "rectangle": {
+      const widthCells = (t.width ?? 0) / snapUnit;
+      cells = getHexCellsInRectangle(
+        center2,
+        t.angle,
+        radiusCells,
+        widthCells,
+        cellSize,
+        orientation
+      );
+      break;
+    }
   }
   let d = "";
   for (const cell of cells) {
@@ -6766,7 +6901,7 @@ function getElementStyle(element) {
   }
 }
 
-// src/canvas/selection-ops.ts
+// src/canvas/selection-rotate.ts
 function unionBounds2(list) {
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   for (const b of list) {
@@ -6777,6 +6912,39 @@ function unionBounds2(list) {
   }
   return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
 }
+function rotationPivot(items) {
+  const first = items[0];
+  if (items.length === 1 && first) {
+    return { x: first.bounds.x + first.bounds.w / 2, y: first.bounds.y + first.bounds.h / 2 };
+  }
+  const u = unionBounds2(items.map((it) => rotatedAABB(it.bounds, it.el.rotation ?? 0)));
+  return { x: u.x + u.w / 2, y: u.y + u.h / 2 };
+}
+function rotateElementPatch(el, bounds, pivot, delta) {
+  if (el.type === "arrow") {
+    const center3 = { x: bounds.x + bounds.w / 2, y: bounds.y + bounds.h / 2 };
+    const moved2 = rotatePoint(center3, pivot, delta);
+    return {
+      position: { x: el.position.x + moved2.x - center3.x, y: el.position.y + moved2.y - center3.y },
+      from: rotatePoint(el.from, pivot, delta),
+      to: rotatePoint(el.to, pivot, delta)
+    };
+  }
+  if (el.type === "template") {
+    return {
+      position: rotatePoint(el.position, pivot, delta),
+      angle: normalizeAngle(el.angle + delta)
+    };
+  }
+  const center2 = { x: bounds.x + bounds.w / 2, y: bounds.y + bounds.h / 2 };
+  const moved = rotatePoint(center2, pivot, delta);
+  return {
+    position: { x: el.position.x + moved.x - center2.x, y: el.position.y + moved.y - center2.y },
+    rotation: normalizeAngle((el.rotation ?? 0) + delta)
+  };
+}
+
+// src/canvas/selection-ops.ts
 function sharedValue(values) {
   const present = values.filter((v) => v !== void 0);
   if (present.length === 0) return void 0;
@@ -6924,6 +7092,21 @@ var SelectionOps = class {
     this.deps.recorder.commit();
     this.deps.requestRender();
   }
+  rotateSelection(direction) {
+    const eligible = this.boundedSelection().filter(({ el }) => this.isMovable(el));
+    if (eligible.length === 0) return;
+    const delta = direction === "cw" ? Math.PI / 2 : -Math.PI / 2;
+    const pivot = rotationPivot(eligible);
+    this.deps.recorder.begin();
+    const moved = [];
+    for (const { id, el, bounds } of eligible) {
+      this.deps.store.update(id, rotateElementPatch(el, bounds, pivot, delta));
+      moved.push(id);
+    }
+    updateArrowsBoundToElements(moved, this.deps.store);
+    this.deps.recorder.commit();
+    this.deps.requestRender();
+  }
   boundedSelection() {
     const out = [];
     for (const id of this.deps.getSelectedIds()) {
@@ -7252,6 +7435,7 @@ var Viewport = class {
       group: () => this.groupSelection(),
       ungroup: () => this.ungroupSelection(),
       toggleLock: () => this.toggleLockSelection(),
+      rotate: (direction) => this.rotateSelection(direction),
       openContextMenu: (screenPos, world) => {
         this.getSelectTool()?.selectAtPoint(world, this.toolContext);
         this.openContextMenu(screenPos);
@@ -7649,6 +7833,8 @@ var Viewport = class {
       items.push({ label: "Bring Forward", action: "z-forward" });
       items.push({ label: "Send Backward", action: "z-backward" });
       items.push({ label: "Send to Back", action: "z-back" });
+      items.push({ label: "Rotate 90\xB0 CW", action: "rotate-cw" });
+      items.push({ label: "Rotate 90\xB0 CCW", action: "rotate-ccw" });
       const allLocked = ids.every((id) => this.store.getById(id)?.locked);
       items.push({ label: allLocked ? "Unlock" : "Lock", action: "toggle-lock" });
     } else if (this.canPaste()) {
@@ -7682,6 +7868,9 @@ var Viewport = class {
   distributeSelection(axis) {
     this.selectionOps.distribute(axis);
   }
+  rotateSelection(direction) {
+    this.selectionOps.rotateSelection(direction);
+  }
   getRenderStats() {
     return this.renderLoop.getStats();
   }
@@ -8336,7 +8525,8 @@ function getOverlayLayout(el, zoom) {
 }
 function templateAimKnob(el, zoom) {
   if (el.type !== "template") return null;
-  if (el.templateShape !== "cone" && el.templateShape !== "line") return null;
+  if (el.templateShape !== "cone" && el.templateShape !== "line" && el.templateShape !== "rectangle")
+    return null;
   const gap = ROTATE_HANDLE_OFFSET / zoom;
   const dist = el.radius + gap;
   const origin = el.position;
@@ -8481,22 +8671,51 @@ function renderSelectionBoxes(ctx, p) {
       } else if (el.type === "template") {
         ctx.setLineDash([]);
         ctx.fillStyle = "#ffffff";
-        const hx = bounds.x + bounds.w;
-        const hy = bounds.y + bounds.h;
-        ctx.fillRect(
-          hx - handleWorldSize / 2,
-          hy - handleWorldSize / 2,
-          handleWorldSize,
-          handleWorldSize
-        );
-        ctx.strokeRect(
-          hx - handleWorldSize / 2,
-          hy - handleWorldSize / 2,
-          handleWorldSize,
-          handleWorldSize
-        );
+        if (el.templateShape === "rectangle") {
+          if (p.selectedIds.length === 1) {
+            const cos = Math.cos(el.angle);
+            const sin = Math.sin(el.angle);
+            const halfW = (el.width ?? 0) / 2;
+            const pts = [
+              [el.position.x + el.radius * cos, el.position.y + el.radius * sin],
+              [
+                el.position.x + el.radius / 2 * cos + halfW * -sin,
+                el.position.y + el.radius / 2 * sin + halfW * cos
+              ]
+            ];
+            for (const [hx, hy] of pts) {
+              ctx.fillRect(
+                hx - handleWorldSize / 2,
+                hy - handleWorldSize / 2,
+                handleWorldSize,
+                handleWorldSize
+              );
+              ctx.strokeRect(
+                hx - handleWorldSize / 2,
+                hy - handleWorldSize / 2,
+                handleWorldSize,
+                handleWorldSize
+              );
+            }
+          }
+        } else {
+          const hx = bounds.x + bounds.w;
+          const hy = bounds.y + bounds.h;
+          ctx.fillRect(
+            hx - handleWorldSize / 2,
+            hy - handleWorldSize / 2,
+            handleWorldSize,
+            handleWorldSize
+          );
+          ctx.strokeRect(
+            hx - handleWorldSize / 2,
+            hy - handleWorldSize / 2,
+            handleWorldSize,
+            handleWorldSize
+          );
+        }
         ctx.setLineDash([4 / zoom, 4 / zoom]);
-        if (p.selectedIds.length === 1 && (el.templateShape === "cone" || el.templateShape === "line")) {
+        if (p.selectedIds.length === 1 && (el.templateShape === "cone" || el.templateShape === "line" || el.templateShape === "rectangle")) {
           const aim = templateAimKnob(el, zoom);
           if (aim) {
             ctx.beginPath();
@@ -8657,6 +8876,7 @@ function hitTestTemplateResizeHandle(world, ctx, selectedIds) {
   for (const id of selectedIds) {
     const el = ctx.store.getById(id);
     if (!el || el.type !== "template") continue;
+    if (el.templateShape === "rectangle") continue;
     const bounds = getElementBounds(el);
     if (!bounds) continue;
     const hx = bounds.x + bounds.w;
@@ -8680,6 +8900,37 @@ function hitTestTemplateAimHandle(world, ctx, selectedIds) {
   const dy = world.y - knob.knob.y;
   return dx * dx + dy * dy <= r * r ? { elementId: id } : null;
 }
+function hitTestRectangleLengthHandle(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 || el.type !== "template" || el.templateShape !== "rectangle") return null;
+  const zoom = ctx.camera.zoom;
+  const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
+  const hx = el.position.x + el.radius * Math.cos(el.angle);
+  const hy = el.position.y + el.radius * Math.sin(el.angle);
+  const dx = world.x - hx;
+  const dy = world.y - hy;
+  return dx * dx + dy * dy <= r * r ? { elementId: id } : null;
+}
+function hitTestRectangleWidthHandle(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 || el.type !== "template" || el.templateShape !== "rectangle") return null;
+  const zoom = ctx.camera.zoom;
+  const r = (HANDLE_SIZE / 2 + HANDLE_HIT_PADDING2) / zoom;
+  const cos = Math.cos(el.angle);
+  const sin = Math.sin(el.angle);
+  const halfW = (el.width ?? 0) / 2;
+  const hx = el.position.x + el.radius / 2 * cos + halfW * -sin;
+  const hy = el.position.y + el.radius / 2 * sin + halfW * cos;
+  const dx = world.x - hx;
+  const dy = world.y - hy;
+  return dx * dx + dy * dy <= r * r ? { elementId: id } : null;
+}
 function findElementsInRect(marquee, ctx) {
   const candidates = ctx.store.queryRect(marquee);
   const ids = [];
@@ -8834,6 +9085,34 @@ function computeTemplateResize(el, world, opts) {
   }
   return updates;
 }
+function computeRectangleLengthResize(el, world, opts) {
+  const cos = Math.cos(el.angle);
+  const sin = Math.sin(el.angle);
+  let len = (world.x - el.position.x) * cos + (world.y - el.position.y) * sin;
+  if (opts.snapToGrid && opts.gridSize && opts.gridSize > 0) {
+    const snapUnit = opts.gridType === "hex" ? Math.sqrt(3) * opts.gridSize : opts.gridSize;
+    len = Math.max(snapUnit, Math.round(len / snapUnit) * snapUnit);
+  }
+  len = Math.max(MIN_ELEMENT_SIZE, len);
+  const updates = { radius: len };
+  if (el.feetPerCell != null && opts.gridSize && opts.gridSize > 0) {
+    const snapUnit = opts.gridType === "hex" ? Math.sqrt(3) * opts.gridSize : opts.gridSize;
+    updates.radiusFeet = len / snapUnit * el.feetPerCell;
+  }
+  return updates;
+}
+function computeRectangleWidthResize(el, world, opts) {
+  const cos = Math.cos(el.angle);
+  const sin = Math.sin(el.angle);
+  const perp = Math.abs(-(world.x - el.position.x) * sin + (world.y - el.position.y) * cos);
+  let width = perp * 2;
+  if (opts.snapToGrid && opts.gridSize && opts.gridSize > 0) {
+    const snapUnit = opts.gridType === "hex" ? Math.sqrt(3) * opts.gridSize : opts.gridSize;
+    width = Math.max(snapUnit, Math.round(width / snapUnit) * snapUnit);
+  }
+  width = Math.max(MIN_ELEMENT_SIZE, width);
+  return { width };
+}
 
 // src/tools/select-tool.ts
 var SNAP_PX = 6;
@@ -8929,6 +9208,18 @@ var SelectTool = class {
       ctx.requestRender();
       return;
     }
+    const rectLengthHit = hitTestRectangleLengthHandle(world, ctx, this._selectedIds);
+    if (rectLengthHit) {
+      this.mode = { type: "resizing-rect-length", elementId: rectLengthHit.elementId };
+      ctx.requestRender();
+      return;
+    }
+    const rectWidthHit = hitTestRectangleWidthHandle(world, ctx, this._selectedIds);
+    if (rectWidthHit) {
+      this.mode = { type: "resizing-rect-width", elementId: rectWidthHit.elementId };
+      ctx.requestRender();
+      return;
+    }
     const aimHit = hitTestTemplateAimHandle(world, ctx, this._selectedIds);
     if (aimHit) {
       this.mode = { type: "aiming-template", elementId: aimHit.elementId };
@@ -9029,6 +9320,19 @@ var SelectTool = class {
       }
       return;
     }
+    if (this.mode.type === "resizing-rect-length" || this.mode.type === "resizing-rect-width") {
+      ctx.setCursor?.(this.mode.type === "resizing-rect-length" ? "ew-resize" : "ns-resize");
+      const el = ctx.store.getById(this.mode.elementId);
+      if (el && el.type === "template" && !el.locked) {
+        const opts = { snapToGrid: ctx.snapToGrid, gridSize: ctx.gridSize, gridType: ctx.gridType };
+        const patch = this.mode.type === "resizing-rect-length" ? computeRectangleLengthResize(el, world, opts) : computeRectangleWidthResize(el, world, opts);
+        if (patch) {
+          ctx.store.update(this.mode.elementId, patch);
+          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);
@@ -9235,6 +9539,14 @@ var SelectTool = class {
       ctx.setCursor?.("nwse-resize");
       return null;
     }
+    if (hitTestRectangleLengthHandle(world, ctx, this._selectedIds)) {
+      ctx.setCursor?.("ew-resize");
+      return null;
+    }
+    if (hitTestRectangleWidthHandle(world, ctx, this._selectedIds)) {
+      ctx.setCursor?.("ns-resize");
+      return null;
+    }
     if (hitTestTemplateAimHandle(world, ctx, this._selectedIds)) {
       ctx.setCursor?.("grab");
       return null;
@@ -9899,6 +10211,11 @@ var MeasureTool = class {
 };
 
 // src/tools/template-tool.ts
+var MIN_RECT_WIDTH = 20;
+function defaultRectWidth(radius, scaleUnit) {
+  if (scaleUnit > 0) return scaleUnit;
+  return Math.max(MIN_RECT_WIDTH, radius * 0.25);
+}
 var TemplateTool = class {
   name = "template";
   drawing = false;
@@ -9977,11 +10294,13 @@ var TemplateTool = class {
     const snapUnit = gridSize && gridSize > 0 ? ctx.gridType === "hex" ? Math.sqrt(3) * gridSize : gridSize : 0;
     const cells = snapUnit > 0 ? radius / snapUnit : 0;
     const radiusFeet = cells * this.feetPerCell;
+    const width = this.templateShape === "rectangle" ? defaultRectWidth(radius, this.feetScaleUnit) : void 0;
     const element = createTemplate({
       position: { ...this.origin },
       templateShape: this.templateShape,
       radius,
       angle,
+      width,
       fillColor: this.fillColor,
       strokeColor: this.strokeColor,
       strokeWidth: this.strokeWidth,
@@ -10056,6 +10375,22 @@ var TemplateTool = class {
         ctx.stroke();
         break;
       }
+      case "rectangle": {
+        const halfW = defaultRectWidth(radius, this.feetScaleUnit) / 2;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const perpX = -sin * halfW;
+        const perpY = cos * halfW;
+        ctx.beginPath();
+        ctx.moveTo(cx + perpX, cy + perpY);
+        ctx.lineTo(cx + radius * cos + perpX, cy + radius * sin + perpY);
+        ctx.lineTo(cx + radius * cos - perpX, cy + radius * sin - perpY);
+        ctx.lineTo(cx - perpX, cy - perpY);
+        ctx.closePath();
+        ctx.fill();
+        ctx.stroke();
+        break;
+      }
     }
     this.drawFeetLabel(ctx, radius);
     ctx.restore();
@@ -10082,6 +10417,18 @@ var TemplateTool = class {
       case "square":
         hexCells = getHexCellsInSquare(center2, radiusCells, cellSize, orientation);
         break;
+      case "rectangle": {
+        const widthCells = defaultRectWidth(radius, this.feetScaleUnit) / snapUnit;
+        hexCells = getHexCellsInRectangle(
+          center2,
+          angle,
+          radiusCells,
+          widthCells,
+          cellSize,
+          orientation
+        );
+        break;
+      }
     }
     ctx.save();
     ctx.globalAlpha = 0.4;
@@ -10098,7 +10445,7 @@ var TemplateTool = class {
     ctx.strokeStyle = this.strokeColor;
     ctx.lineWidth = this.strokeWidth;
     ctx.stroke();
-    if (this.templateShape === "cone" || this.templateShape === "line" || this.templateShape === "circle" || this.templateShape === "square") {
+    if (this.templateShape === "cone" || this.templateShape === "line" || this.templateShape === "circle" || this.templateShape === "square" || this.templateShape === "rectangle") {
       ctx.globalAlpha = 0.5;
       ctx.beginPath();
       drawHexPath(ctx, center2.x, center2.y, cellSize, orientation);
@@ -10266,7 +10613,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.47.0";
+var VERSION = "0.49.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,
@@ -10318,6 +10665,7 @@ var VERSION = "0.47.0";
   getHexCellsInCone,
   getHexCellsInLine,
   getHexCellsInRadius,
+  getHexCellsInRectangle,
   getHexCellsInSquare,
   getHexDistance,
   isNearBezier,