@fieldnotes/core 0.33.0 → 0.34.0

package/dist/index.d.cts

@@ -20,6 +20,8 @@ interface BaseElement {
     zIndex: number;
     locked: boolean;
     layerId: string;
+    /** Optional flat group membership. Elements sharing a groupId select/move/delete as a unit. */
+    groupId?: string;
 }
 interface StrokeElement extends BaseElement {
     type: 'stroke';
@@ -523,6 +525,8 @@ declare class Viewport {
     onSelectionChange(listener: () => void): () => void;
     getSelectionStyle(): ElementStyle | null;
     applyStyleToSelection(style: ElementStyle): void;
+    groupSelection(): void;
+    ungroupSelection(): void;
     alignSelection(edge: AlignEdge): void;
     distributeSelection(axis: DistributeAxis): void;
     private boundedSelection;
@@ -988,6 +992,6 @@ declare class TemplateTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.33.0";
+declare const VERSION = "0.34.0";
 
 export { type ActiveFormats, type AlignEdge, type ArrowElement, 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 FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, 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, 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

@@ -20,6 +20,8 @@ interface BaseElement {
     zIndex: number;
     locked: boolean;
     layerId: string;
+    /** Optional flat group membership. Elements sharing a groupId select/move/delete as a unit. */
+    groupId?: string;
 }
 interface StrokeElement extends BaseElement {
     type: 'stroke';
@@ -523,6 +525,8 @@ declare class Viewport {
     onSelectionChange(listener: () => void): () => void;
     getSelectionStyle(): ElementStyle | null;
     applyStyleToSelection(style: ElementStyle): void;
+    groupSelection(): void;
+    ungroupSelection(): void;
     alignSelection(edge: AlignEdge): void;
     distributeSelection(axis: DistributeAxis): void;
     private boundedSelection;
@@ -988,6 +992,6 @@ declare class TemplateTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.33.0";
+declare const VERSION = "0.34.0";
 
 export { type ActiveFormats, type AlignEdge, type ArrowElement, 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 FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, 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, 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

@@ -940,6 +940,14 @@ var KeyboardActions = class {
     if (this.deps.isToolActive()) return;
     this.deps.fitToContent?.();
   }
+  group() {
+    if (this.deps.isToolActive()) return;
+    this.deps.group?.();
+  }
+  ungroup() {
+    if (this.deps.isToolActive()) return;
+    this.deps.ungroup?.();
+  }
   zOrder(operation) {
     if (this.deps.isToolActive()) return;
     this.flushPendingNudge();
@@ -973,6 +981,10 @@ var KeyboardActions = class {
     for (const el of source) {
       idMap.set(el.id, createId(el.type));
     }
+    const groupIdMap = /* @__PURE__ */ new Map();
+    for (const el of source) {
+      if (el.groupId && !groupIdMap.has(el.groupId)) groupIdMap.set(el.groupId, createId("group"));
+    }
     const newIds = [];
     const recorder = this.deps.getHistoryRecorder();
     recorder?.begin();
@@ -981,6 +993,7 @@ var KeyboardActions = class {
       const newId = idMap.get(el.id);
       if (!newId) continue;
       clone.id = newId;
+      if (clone.groupId) clone.groupId = groupIdMap.get(clone.groupId) ?? clone.groupId;
       clone.position = { x: clone.position.x + offset.x, y: clone.position.y + offset.y };
       if (clone.type === "arrow") {
         const arrow = clone;
@@ -1034,6 +1047,8 @@ var DEFAULT_BINDINGS = [
   ["zoom-in", ["mod+="]],
   ["zoom-out", ["mod+-"]],
   ["zoom-reset", ["mod+0"]],
+  ["group", ["mod+g"]],
+  ["ungroup", ["mod+shift+g"]],
   ["nudge-left", ["arrowleft"]],
   ["nudge-right", ["arrowright"]],
   ["nudge-up", ["arrowup"]],
@@ -1193,6 +1208,8 @@ var InputHandler = class {
       getHistoryStack: () => this.historyStack,
       isToolActive: () => this.isToolActive,
       fitToContent: options.fitToContent,
+      group: options.group,
+      ungroup: options.ungroup,
       getLastPointerWorld: () => this.lastPointerWorld()
     });
     this.shortcutMap = new ShortcutMap(options.shortcuts?.bindings);
@@ -1432,6 +1449,14 @@ var InputHandler = class {
         e.preventDefault();
         this.actions.zoomToFit();
         return;
+      case "group":
+        e.preventDefault();
+        this.actions.group();
+        return;
+      case "ungroup":
+        e.preventDefault();
+        this.actions.ungroup();
+        return;
       case "zoom-in":
         e.preventDefault();
         this.zoomByFactor(ZOOM_STEP);
@@ -3937,12 +3962,19 @@ var UpdateElementCommand = class {
     this.current = current;
   }
   execute(store) {
-    store.update(this.id, { ...this.current });
+    store.update(this.id, diffPatch(this.previous, this.current));
   }
   undo(store) {
-    store.update(this.id, { ...this.previous });
+    store.update(this.id, diffPatch(this.current, this.previous));
   }
 };
+function diffPatch(from, to) {
+  const patch = { ...to };
+  for (const key of Object.keys(from)) {
+    if (!(key in to)) patch[key] = void 0;
+  }
+  return patch;
+}
 var BatchCommand = class {
   commands;
   constructor(commands) {
@@ -5505,6 +5537,8 @@ var Viewport = class {
       historyRecorder: this.historyRecorder,
       historyStack: this.history,
       fitToContent: () => this.fitToContent(),
+      group: () => this.groupSelection(),
+      ungroup: () => this.ungroupSelection(),
       shortcuts: options.shortcuts
     });
     this.domNodeManager = new DomNodeManager({
@@ -5842,6 +5876,26 @@ var Viewport = class {
     }
     this.historyRecorder.commit();
   }
+  groupSelection() {
+    const ids = this.getSelectedIds();
+    if (ids.length < 2) return;
+    const groupId = createId("group");
+    this.historyRecorder.begin();
+    for (const id of ids) {
+      if (this.store.getById(id)) this.store.update(id, { groupId });
+    }
+    this.historyRecorder.commit();
+  }
+  ungroupSelection() {
+    const ids = this.getSelectedIds();
+    if (ids.length === 0) return;
+    this.historyRecorder.begin();
+    for (const id of ids) {
+      const el = this.store.getById(id);
+      if (el && el.groupId !== void 0) this.store.update(id, { groupId: void 0 });
+    }
+    this.historyRecorder.commit();
+  }
   alignSelection(edge) {
     const bounded = this.boundedSelection();
     if (bounded.length < 2) return;
@@ -6551,6 +6605,26 @@ var EraserTool = class {
   }
 };
 
+// src/elements/group.ts
+function expandToGroups(ids, elements) {
+  const byId = new Map(elements.map((e) => [e.id, e]));
+  const groupIds = /* @__PURE__ */ new Set();
+  for (const id of ids) {
+    const g = byId.get(id)?.groupId;
+    if (g) groupIds.add(g);
+  }
+  if (groupIds.size === 0) return ids;
+  const idSet = new Set(ids);
+  const result = [...ids];
+  for (const el of elements) {
+    if (el.groupId && groupIds.has(el.groupId) && !idSet.has(el.id)) {
+      result.push(el.id);
+      idSet.add(el.id);
+    }
+  }
+  return result;
+}
+
 // src/tools/arrow-handles.ts
 var BIND_THRESHOLD = 20;
 var HANDLE_RADIUS = 5;
@@ -6816,18 +6890,20 @@ var SelectTool = class {
     this.hasDragged = false;
     const hit = this.hitTest(world, ctx);
     if (hit) {
+      const all = ctx.store.getAll();
       const alreadySelected = this._selectedIds.includes(hit.id);
       if (state.shiftKey) {
         if (alreadySelected) {
-          this.setSelectedIds(this._selectedIds.filter((id) => id !== hit.id));
+          const grp = new Set(expandToGroups([hit.id], all));
+          this.setSelectedIds(this._selectedIds.filter((id) => !grp.has(id)));
           this.mode = { type: "idle" };
         } else {
-          this.setSelectedIds([...this._selectedIds, hit.id]);
+          this.setSelectedIds(expandToGroups([...this._selectedIds, hit.id], all));
           this.mode = hit.locked ? { type: "idle" } : { type: "dragging" };
         }
       } else {
         if (!alreadySelected) {
-          this.setSelectedIds([hit.id]);
+          this.setSelectedIds(expandToGroups([hit.id], all));
         } else if (this._selectedIds.length > 1) {
           this.pendingSingleSelectId = hit.id;
         }
@@ -6941,12 +7017,12 @@ var SelectTool = class {
     if (this.mode.type === "marquee") {
       const rect = this.getMarqueeRect();
       if (rect) {
-        this.setSelectedIds(this.findElementsInRect(rect, ctx));
+        this.setSelectedIds(expandToGroups(this.findElementsInRect(rect, ctx), ctx.store.getAll()));
       }
       ctx.requestRender();
     }
     if (!this.hasDragged && this.pendingSingleSelectId !== null) {
-      this.setSelectedIds([this.pendingSingleSelectId]);
+      this.setSelectedIds(expandToGroups([this.pendingSingleSelectId], ctx.store.getAll()));
     }
     this.pendingSingleSelectId = null;
     this.hasDragged = false;
@@ -8231,7 +8307,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.33.0";
+var VERSION = "0.34.0";
 export {
   ArrowTool,
   AutoSave,