@fieldnotes/core 0.47.0 → 0.48.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) {
@@ -3286,6 +3307,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 +3388,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 +3481,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 +3528,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 +4116,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 +5714,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 +5750,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) {
@@ -8336,7 +8452,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 +8598,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 +8803,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 +8827,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 +9012,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 +9135,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 +9247,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 +9466,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 +10138,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 +10221,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 +10302,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 +10344,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 +10372,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 +10540,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.47.0";
+var VERSION = "0.48.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,
@@ -10318,6 +10592,7 @@ var VERSION = "0.47.0";
   getHexCellsInCone,
   getHexCellsInLine,
   getHexCellsInRadius,
+  getHexCellsInRectangle,
   getHexCellsInSquare,
   getHexDistance,
   isNearBezier,