@fieldnotes/core 0.26.0 → 0.27.0

package/dist/index.d.cts

@@ -394,6 +394,16 @@ interface RenderStatsSnapshot {
     frameCount: number;
 }
 
+interface ElementStyle {
+    color?: string;
+    fillColor?: string;
+    strokeWidth?: number;
+    opacity?: number;
+    fontSize?: number;
+}
+declare function styleToPatch(element: CanvasElement, style: ElementStyle): Partial<CanvasElement>;
+declare function getElementStyle(element: CanvasElement): ElementStyle;
+
 interface GridInfo {
     gridType: 'square' | 'hex';
     hexOrientation: 'pointy' | 'flat';
@@ -494,6 +504,11 @@ declare class Viewport {
     removeGrid(): void;
     getGridInfo(): GridInfo | null;
     onGridChange(listener: (info: GridInfo | null) => void): () => void;
+    private getSelectTool;
+    getSelectedIds(): string[];
+    onSelectionChange(listener: () => void): () => void;
+    getSelectionStyle(): ElementStyle | null;
+    applyStyleToSelection(style: ElementStyle): void;
     getRenderStats(): RenderStatsSnapshot;
     logPerformance(intervalMs?: number): () => void;
     destroy(): void;
@@ -700,6 +715,7 @@ declare class EraserTool implements Tool {
 declare class SelectTool implements Tool {
     readonly name = "select";
     private _selectedIds;
+    private selectionListeners;
     private mode;
     private lastWorld;
     private currentWorld;
@@ -709,6 +725,8 @@ declare class SelectTool implements Tool {
     private resizeAspectRatio;
     private hoveredId;
     get selectedIds(): string[];
+    onSelectionChange(listener: () => void): () => void;
+    private setSelectedIds;
     setSelection(ids: string[]): void;
     get isMarqueeActive(): boolean;
     onActivate(ctx: ToolContext): void;
@@ -933,6 +951,6 @@ declare class TemplateTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.26.0";
+declare const VERSION = "0.27.0";
 
-export { type ActiveFormats, 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, ElementStore, 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, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };
+export { type ActiveFormats, 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, 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

@@ -394,6 +394,16 @@ interface RenderStatsSnapshot {
     frameCount: number;
 }
 
+interface ElementStyle {
+    color?: string;
+    fillColor?: string;
+    strokeWidth?: number;
+    opacity?: number;
+    fontSize?: number;
+}
+declare function styleToPatch(element: CanvasElement, style: ElementStyle): Partial<CanvasElement>;
+declare function getElementStyle(element: CanvasElement): ElementStyle;
+
 interface GridInfo {
     gridType: 'square' | 'hex';
     hexOrientation: 'pointy' | 'flat';
@@ -494,6 +504,11 @@ declare class Viewport {
     removeGrid(): void;
     getGridInfo(): GridInfo | null;
     onGridChange(listener: (info: GridInfo | null) => void): () => void;
+    private getSelectTool;
+    getSelectedIds(): string[];
+    onSelectionChange(listener: () => void): () => void;
+    getSelectionStyle(): ElementStyle | null;
+    applyStyleToSelection(style: ElementStyle): void;
     getRenderStats(): RenderStatsSnapshot;
     logPerformance(intervalMs?: number): () => void;
     destroy(): void;
@@ -700,6 +715,7 @@ declare class EraserTool implements Tool {
 declare class SelectTool implements Tool {
     readonly name = "select";
     private _selectedIds;
+    private selectionListeners;
     private mode;
     private lastWorld;
     private currentWorld;
@@ -709,6 +725,8 @@ declare class SelectTool implements Tool {
     private resizeAspectRatio;
     private hoveredId;
     get selectedIds(): string[];
+    onSelectionChange(listener: () => void): () => void;
+    private setSelectedIds;
     setSelection(ids: string[]): void;
     get isMarqueeActive(): boolean;
     onActivate(ctx: ToolContext): void;
@@ -933,6 +951,6 @@ declare class TemplateTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.26.0";
+declare const VERSION = "0.27.0";
 
-export { type ActiveFormats, 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, ElementStore, 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, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };
+export { type ActiveFormats, 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, 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

@@ -5155,7 +5155,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;
@@ -5507,6 +5603,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();
   }
@@ -6122,6 +6264,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 };
@@ -6131,10 +6274,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() {
@@ -6144,7 +6299,7 @@ var SelectTool = class {
     this.ctx = ctx;
   }
   onDeactivate(ctx) {
-    this._selectedIds = [];
+    this.setSelectedIds([]);
     this.mode = { type: "idle" };
     this.hoveredId = null;
     ctx.setCursor?.("default");
@@ -6195,22 +6350,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();
@@ -6283,12 +6438,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;
@@ -7510,7 +7665,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.26.0";
+var VERSION = "0.27.0";
 export {
   ArrowTool,
   AutoSave,
@@ -7551,6 +7706,7 @@ export {
   getArrowTangentAngle,
   getBendFromPoint,
   getElementBounds,
+  getElementStyle,
   getElementsBoundingBox,
   getHexCellsInCone,
   getHexCellsInLine,
@@ -7562,6 +7718,7 @@ export {
   smartSnap,
   snapPoint,
   snapToHexCenter,
+  styleToPatch,
   toggleBold,
   toggleItalic,
   toggleStrikethrough,