@fieldnotes/core 0.26.0 → 0.27.0

package/dist/index.cjs

@@ -59,6 +59,7 @@ __export(index_exports, {
   getArrowTangentAngle: () => getArrowTangentAngle,
   getBendFromPoint: () => getBendFromPoint,
   getElementBounds: () => getElementBounds,
+  getElementStyle: () => getElementStyle,
   getElementsBoundingBox: () => getElementsBoundingBox,
   getHexCellsInCone: () => getHexCellsInCone,
   getHexCellsInLine: () => getHexCellsInLine,
@@ -70,6 +71,7 @@ __export(index_exports, {
   smartSnap: () => smartSnap,
   snapPoint: () => snapPoint,
   snapToHexCenter: () => snapToHexCenter,
+  styleToPatch: () => styleToPatch,
   toggleBold: () => toggleBold,
   toggleItalic: () => toggleItalic,
   toggleStrikethrough: () => toggleStrikethrough,
@@ -5234,7 +5236,103 @@ var MarginViewport = class {
   }
 };
 
+// src/elements/element-style.ts
+function styleToPatch(element, style) {
+  const { color, fillColor, strokeWidth, opacity, fontSize } = style;
+  switch (element.type) {
+    case "stroke":
+      return {
+        ...color !== void 0 ? { color } : {},
+        ...strokeWidth !== void 0 ? { width: strokeWidth } : {},
+        ...opacity !== void 0 ? { opacity } : {}
+      };
+    case "arrow":
+      return {
+        ...color !== void 0 ? { color } : {},
+        ...strokeWidth !== void 0 ? { width: strokeWidth } : {}
+      };
+    case "shape":
+      return {
+        ...color !== void 0 ? { strokeColor: color } : {},
+        ...fillColor !== void 0 ? { fillColor } : {},
+        ...strokeWidth !== void 0 ? { strokeWidth } : {}
+      };
+    case "text":
+      return {
+        ...color !== void 0 ? { color } : {},
+        ...fontSize !== void 0 ? { fontSize } : {}
+      };
+    case "note":
+      return {
+        ...color !== void 0 ? { textColor: color } : {},
+        ...fillColor !== void 0 ? { backgroundColor: fillColor } : {},
+        ...fontSize !== void 0 ? { fontSize } : {}
+      };
+    case "grid":
+      return {
+        ...color !== void 0 ? { strokeColor: color } : {},
+        ...strokeWidth !== void 0 ? { strokeWidth } : {},
+        ...opacity !== void 0 ? { opacity } : {}
+      };
+    case "template":
+      return {
+        ...color !== void 0 ? { strokeColor: color } : {},
+        ...fillColor !== void 0 ? { fillColor } : {},
+        ...strokeWidth !== void 0 ? { strokeWidth } : {},
+        ...opacity !== void 0 ? { opacity } : {}
+      };
+    default:
+      return {};
+  }
+}
+function getElementStyle(element) {
+  switch (element.type) {
+    case "stroke":
+      return { color: element.color, strokeWidth: element.width, opacity: element.opacity };
+    case "arrow":
+      return { color: element.color, strokeWidth: element.width };
+    case "shape":
+      return {
+        color: element.strokeColor,
+        fillColor: element.fillColor,
+        strokeWidth: element.strokeWidth
+      };
+    case "text":
+      return { color: element.color, fontSize: element.fontSize };
+    case "note":
+      return {
+        color: element.textColor,
+        fillColor: element.backgroundColor,
+        ...element.fontSize !== void 0 ? { fontSize: element.fontSize } : {}
+      };
+    case "grid":
+      return {
+        color: element.strokeColor,
+        strokeWidth: element.strokeWidth,
+        opacity: element.opacity
+      };
+    case "template":
+      return {
+        color: element.strokeColor,
+        fillColor: element.fillColor,
+        strokeWidth: element.strokeWidth,
+        opacity: element.opacity
+      };
+    default:
+      return {};
+  }
+}
+
 // src/canvas/viewport.ts
+var EMPTY_IDS = [];
+function noop() {
+}
+function sharedValue(values) {
+  const present = values.filter((v) => v !== void 0);
+  if (present.length === 0) return void 0;
+  const first = present[0];
+  return present.every((v) => v === first) ? first : void 0;
+}
 var Viewport = class {
   constructor(container, options = {}) {
     this.container = container;
@@ -5586,6 +5684,52 @@ var Viewport = class {
       this.gridChangeListeners.delete(listener);
     };
   }
+  getSelectTool() {
+    return this.toolManager.getTool("select");
+  }
+  getSelectedIds() {
+    return this.getSelectTool()?.selectedIds ?? EMPTY_IDS;
+  }
+  onSelectionChange(listener) {
+    const tool = this.getSelectTool();
+    return tool ? tool.onSelectionChange(listener) : noop;
+  }
+  getSelectionStyle() {
+    const ids = this.getSelectedIds();
+    if (ids.length === 0) return null;
+    const styles = [];
+    for (const id of ids) {
+      const el = this.store.getById(id);
+      if (el) styles.push(getElementStyle(el));
+    }
+    if (styles.length === 0) return null;
+    const result = {};
+    const color = sharedValue(styles.map((s) => s.color));
+    if (color !== void 0) result.color = color;
+    const fillColor = sharedValue(styles.map((s) => s.fillColor));
+    if (fillColor !== void 0) result.fillColor = fillColor;
+    const strokeWidth = sharedValue(styles.map((s) => s.strokeWidth));
+    if (strokeWidth !== void 0) result.strokeWidth = strokeWidth;
+    const opacity = sharedValue(styles.map((s) => s.opacity));
+    if (opacity !== void 0) result.opacity = opacity;
+    const fontSize = sharedValue(styles.map((s) => s.fontSize));
+    if (fontSize !== void 0) result.fontSize = fontSize;
+    return result;
+  }
+  applyStyleToSelection(style) {
+    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) continue;
+      const patch = styleToPatch(el, style);
+      if (Object.keys(patch).length > 0) {
+        this.store.update(id, patch);
+      }
+    }
+    this.historyRecorder.commit();
+  }
   getRenderStats() {
     return this.renderLoop.getStats();
   }
@@ -6201,6 +6345,7 @@ var HANDLE_CURSORS = {
 var SelectTool = class {
   name = "select";
   _selectedIds = [];
+  selectionListeners = /* @__PURE__ */ new Set();
   mode = { type: "idle" };
   lastWorld = { x: 0, y: 0 };
   currentWorld = { x: 0, y: 0 };
@@ -6210,10 +6355,22 @@ var SelectTool = class {
   resizeAspectRatio = 0;
   hoveredId = null;
   get selectedIds() {
-    return [...this._selectedIds];
+    return this._selectedIds;
   }
-  setSelection(ids) {
+  onSelectionChange(listener) {
+    this.selectionListeners.add(listener);
+    return () => {
+      this.selectionListeners.delete(listener);
+    };
+  }
+  setSelectedIds(ids) {
+    const prev = this._selectedIds;
+    if (prev.length === ids.length && prev.every((id, i) => id === ids[i])) return;
     this._selectedIds = ids;
+    for (const listener of this.selectionListeners) listener();
+  }
+  setSelection(ids) {
+    this.setSelectedIds(ids);
     this.ctx?.requestRender();
   }
   get isMarqueeActive() {
@@ -6223,7 +6380,7 @@ var SelectTool = class {
     this.ctx = ctx;
   }
   onDeactivate(ctx) {
-    this._selectedIds = [];
+    this.setSelectedIds([]);
     this.mode = { type: "idle" };
     this.hoveredId = null;
     ctx.setCursor?.("default");
@@ -6274,22 +6431,22 @@ var SelectTool = class {
       const alreadySelected = this._selectedIds.includes(hit.id);
       if (state.shiftKey) {
         if (alreadySelected) {
-          this._selectedIds = this._selectedIds.filter((id) => id !== hit.id);
+          this.setSelectedIds(this._selectedIds.filter((id) => id !== hit.id));
           this.mode = { type: "idle" };
         } else {
-          this._selectedIds = [...this._selectedIds, hit.id];
+          this.setSelectedIds([...this._selectedIds, hit.id]);
           this.mode = hit.locked ? { type: "idle" } : { type: "dragging" };
         }
       } else {
         if (!alreadySelected) {
-          this._selectedIds = [hit.id];
+          this.setSelectedIds([hit.id]);
         } else if (this._selectedIds.length > 1) {
           this.pendingSingleSelectId = hit.id;
         }
         this.mode = hit.locked ? { type: "idle" } : { type: "dragging" };
       }
     } else {
-      this._selectedIds = [];
+      this.setSelectedIds([]);
       this.mode = { type: "marquee", start: world };
     }
     ctx.requestRender();
@@ -6362,12 +6519,12 @@ var SelectTool = class {
     if (this.mode.type === "marquee") {
       const rect = this.getMarqueeRect();
       if (rect) {
-        this._selectedIds = this.findElementsInRect(rect, ctx);
+        this.setSelectedIds(this.findElementsInRect(rect, ctx));
       }
       ctx.requestRender();
     }
     if (!this.hasDragged && this.pendingSingleSelectId !== null) {
-      this._selectedIds = [this.pendingSingleSelectId];
+      this.setSelectedIds([this.pendingSingleSelectId]);
     }
     this.pendingSingleSelectId = null;
     this.hasDragged = false;
@@ -7589,7 +7746,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.26.0";
+var VERSION = "0.27.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,
@@ -7631,6 +7788,7 @@ var VERSION = "0.26.0";
   getArrowTangentAngle,
   getBendFromPoint,
   getElementBounds,
+  getElementStyle,
   getElementsBoundingBox,
   getHexCellsInCone,
   getHexCellsInLine,
@@ -7642,6 +7800,7 @@ var VERSION = "0.26.0";
   smartSnap,
   snapPoint,
   snapToHexCenter,
+  styleToPatch,
   toggleBold,
   toggleItalic,
   toggleStrikethrough,