@fieldnotes/core 0.33.0 → 0.34.0

package/README.md

@@ -588,6 +588,22 @@ viewport.setSmartGuides(true);  // enable
 viewport.setSmartGuides(false); // disable (default)
 ```
 
+## Grouping
+
+Group elements so they select, move, delete, z-order, and align as a single unit.
+
+- **`viewport.groupSelection()`** — groups the current selection under a new id.
+- **`viewport.ungroupSelection()`** — dissolves any groups in the current selection.
+
+Each is one undo step. Selecting any member selects its whole group, so to edit a single member individually, ungroup first. Pasting or duplicating a group keeps the copies grouped under a fresh id.
+
+```typescript
+viewport.groupSelection();   // Ctrl/Cmd+G
+viewport.ungroupSelection(); // Ctrl/Cmd+Shift+G
+```
+
+The shortcuts are rebindable as `group` and `ungroup`.
+
 ## Built-in Interactions
 
 | Input                | Action              |

package/dist/index.cjs

@@ -1021,6 +1021,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();
@@ -1054,6 +1062,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();
@@ -1062,6 +1074,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;
@@ -1115,6 +1128,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"]],
@@ -1274,6 +1289,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);
@@ -1513,6 +1530,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);
@@ -4018,12 +4043,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) {
@@ -5586,6 +5618,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({
@@ -5923,6 +5957,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;
@@ -6632,6 +6686,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;
@@ -6897,18 +6971,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;
         }
@@ -7022,12 +7098,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;
@@ -8312,7 +8388,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.33.0";
+var VERSION = "0.34.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,