@fieldnotes/core 0.40.3 → 0.41.0

package/dist/index.d.cts

@@ -46,6 +46,7 @@ interface NoteElement extends BaseElement {
 interface Binding {
     elementId: string;
 }
+type ArrowStrokeStyle = 'solid' | 'dashed' | 'dotted';
 interface ArrowElement extends BaseElement {
     type: 'arrow';
     from: Point;
@@ -59,6 +60,8 @@ interface ArrowElement extends BaseElement {
     cachedControlPoint?: Point;
     /** Optional text rendered at the curve midpoint. */
     label?: string;
+    /** Line dash appearance. Absent = solid. Decoupled from binding. */
+    strokeStyle?: ArrowStrokeStyle;
 }
 interface ImageElement extends BaseElement {
     type: 'image';
@@ -426,6 +429,7 @@ interface ElementStyle {
     strokeWidth?: number;
     opacity?: number;
     fontSize?: number;
+    strokeStyle?: ArrowStrokeStyle;
 }
 declare function styleToPatch(element: CanvasElement, style: ElementStyle): Partial<CanvasElement>;
 declare function getElementStyle(element: CanvasElement): ElementStyle;
@@ -633,6 +637,7 @@ interface ArrowInput extends BaseDefaults {
     fromBinding?: Binding;
     toBinding?: Binding;
     label?: string;
+    strokeStyle?: ArrowStrokeStyle;
 }
 interface ImageInput extends BaseDefaults {
     position: Point;
@@ -825,6 +830,7 @@ declare class SelectTool implements Tool {
 interface ArrowToolOptions {
     color?: string;
     width?: number;
+    strokeStyle?: ArrowStrokeStyle;
 }
 declare class ArrowTool implements Tool {
     readonly name = "arrow";
@@ -833,6 +839,7 @@ declare class ArrowTool implements Tool {
     private end;
     private color;
     private width;
+    private strokeStyle;
     private fromBinding;
     private fromTarget;
     private toTarget;
@@ -1048,6 +1055,6 @@ declare class LaserTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.40.3";
+declare const VERSION = "0.41.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 ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, LaserTool, type LaserToolOptions, 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, exportSvg, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };
+export { type ActiveFormats, type AlignEdge, type ArrowElement, type ArrowStrokeStyle, 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 ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, LaserTool, type LaserToolOptions, 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, exportSvg, 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

@@ -46,6 +46,7 @@ interface NoteElement extends BaseElement {
 interface Binding {
     elementId: string;
 }
+type ArrowStrokeStyle = 'solid' | 'dashed' | 'dotted';
 interface ArrowElement extends BaseElement {
     type: 'arrow';
     from: Point;
@@ -59,6 +60,8 @@ interface ArrowElement extends BaseElement {
     cachedControlPoint?: Point;
     /** Optional text rendered at the curve midpoint. */
     label?: string;
+    /** Line dash appearance. Absent = solid. Decoupled from binding. */
+    strokeStyle?: ArrowStrokeStyle;
 }
 interface ImageElement extends BaseElement {
     type: 'image';
@@ -426,6 +429,7 @@ interface ElementStyle {
     strokeWidth?: number;
     opacity?: number;
     fontSize?: number;
+    strokeStyle?: ArrowStrokeStyle;
 }
 declare function styleToPatch(element: CanvasElement, style: ElementStyle): Partial<CanvasElement>;
 declare function getElementStyle(element: CanvasElement): ElementStyle;
@@ -633,6 +637,7 @@ interface ArrowInput extends BaseDefaults {
     fromBinding?: Binding;
     toBinding?: Binding;
     label?: string;
+    strokeStyle?: ArrowStrokeStyle;
 }
 interface ImageInput extends BaseDefaults {
     position: Point;
@@ -825,6 +830,7 @@ declare class SelectTool implements Tool {
 interface ArrowToolOptions {
     color?: string;
     width?: number;
+    strokeStyle?: ArrowStrokeStyle;
 }
 declare class ArrowTool implements Tool {
     readonly name = "arrow";
@@ -833,6 +839,7 @@ declare class ArrowTool implements Tool {
     private end;
     private color;
     private width;
+    private strokeStyle;
     private fromBinding;
     private fromTarget;
     private toTarget;
@@ -1048,6 +1055,6 @@ declare class LaserTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.40.3";
+declare const VERSION = "0.41.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 ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, LaserTool, type LaserToolOptions, 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, exportSvg, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };
+export { type ActiveFormats, type AlignEdge, type ArrowElement, type ArrowStrokeStyle, 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 ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, LaserTool, type LaserToolOptions, 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, exportSvg, 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

@@ -587,7 +587,7 @@ function getBendFromPoint(from, to, dragPoint) {
   if (len === 0) return 0;
   const perpX = -dy / len;
   const perpY = dx / len;
-  return (dragPoint.x - midX) * perpX + (dragPoint.y - midY) * perpY;
+  return 2 * ((dragPoint.x - midX) * perpX + (dragPoint.y - midY) * perpY);
 }
 function getArrowTangentAngle(from, to, bend, t) {
   const cp = getArrowControlPoint(from, to, bend);
@@ -2670,6 +2670,16 @@ function updateBoundArrow(arrow, store) {
 var ARROWHEAD_LENGTH = 12;
 var ARROWHEAD_ANGLE = Math.PI / 6;
 var ARROW_LABEL_FONT_SIZE = 14;
+function getArrowDashPattern(strokeStyle) {
+  switch (strokeStyle) {
+    case "dashed":
+      return [8, 4];
+    case "dotted":
+      return [2, 4];
+    default:
+      return [];
+  }
+}
 function renderArrow(ctx, arrow, store, labelEditingId) {
   const geometry = getArrowRenderGeometry(arrow);
   const { visualFrom, visualTo } = getVisualEndpoints(arrow, geometry, store);
@@ -2677,9 +2687,8 @@ function renderArrow(ctx, arrow, store, labelEditingId) {
   ctx.strokeStyle = arrow.color;
   ctx.lineWidth = arrow.width;
   ctx.lineCap = "round";
-  if (arrow.fromBinding || arrow.toBinding) {
-    ctx.setLineDash([8, 4]);
-  }
+  const dash = getArrowDashPattern(arrow.strokeStyle);
+  if (dash.length > 0) ctx.setLineDash(dash);
   ctx.beginPath();
   ctx.moveTo(visualFrom.x, visualFrom.y);
   if (arrow.bend !== 0) {
@@ -3599,6 +3608,7 @@ function createArrow(input) {
   if (input.fromBinding) result.fromBinding = input.fromBinding;
   if (input.toBinding) result.toBinding = input.toBinding;
   if (input.label !== void 0) result.label = input.label;
+  if (input.strokeStyle !== void 0) result.strokeStyle = input.strokeStyle;
   return result;
 }
 function createImage(input) {
@@ -5002,7 +5012,8 @@ function emitArrow(arrow, store) {
   } else {
     d = `M${n(from.x)} ${n(from.y)} L${n(to.x)} ${n(to.y)}`;
   }
-  const dash = arrow.fromBinding || arrow.toBinding ? ' stroke-dasharray="8 4"' : "";
+  const pattern = getArrowDashPattern(arrow.strokeStyle);
+  const dash = pattern.length > 0 ? ` stroke-dasharray="${pattern.join(" ")}"` : "";
   let out = `<path d="${d}" fill="none" stroke="${esc(arrow.color)}" stroke-width="${n(arrow.width)}" stroke-linecap="round"${dash} />`;
   const angle = geometry.tangentEnd;
   const p1x = to.x - ARROWHEAD_LENGTH2 * Math.cos(angle - ARROWHEAD_ANGLE2);
@@ -6206,7 +6217,7 @@ function translateElementPatch(el, dx, dy) {
 
 // src/elements/element-style.ts
 function styleToPatch(element, style) {
-  const { color, fillColor, strokeWidth, opacity, fontSize } = style;
+  const { color, fillColor, strokeWidth, opacity, fontSize, strokeStyle } = style;
   switch (element.type) {
     case "stroke":
       return {
@@ -6217,7 +6228,8 @@ function styleToPatch(element, style) {
     case "arrow":
       return {
         ...color !== void 0 ? { color } : {},
-        ...strokeWidth !== void 0 ? { width: strokeWidth } : {}
+        ...strokeWidth !== void 0 ? { width: strokeWidth } : {},
+        ...strokeStyle !== void 0 ? { strokeStyle } : {}
       };
     case "shape":
       return {
@@ -6258,7 +6270,11 @@ function getElementStyle(element) {
     case "stroke":
       return { color: element.color, strokeWidth: element.width, opacity: element.opacity };
     case "arrow":
-      return { color: element.color, strokeWidth: element.width };
+      return {
+        color: element.color,
+        strokeWidth: element.width,
+        ...element.strokeStyle !== void 0 ? { strokeStyle: element.strokeStyle } : {}
+      };
     case "shape":
       return {
         color: element.strokeColor,
@@ -6332,6 +6348,8 @@ var SelectionOps = class {
     if (opacity !== void 0) result.opacity = opacity;
     const fontSize = sharedValue(styles.map((s) => s.fontSize));
     if (fontSize !== void 0) result.fontSize = fontSize;
+    const strokeStyle = sharedValue(styles.map((s) => s.strokeStyle));
+    if (strokeStyle !== void 0) result.strokeStyle = strokeStyle;
     return result;
   }
   applyStyle(style) {
@@ -8749,6 +8767,7 @@ var ArrowTool = class {
   end = { x: 0, y: 0 };
   color;
   width;
+  strokeStyle;
   fromBinding;
   fromTarget = null;
   toTarget = null;
@@ -8756,9 +8775,10 @@ var ArrowTool = class {
   constructor(options = {}) {
     this.color = options.color ?? "#000000";
     this.width = options.width ?? 2;
+    this.strokeStyle = options.strokeStyle ?? "solid";
   }
   getOptions() {
-    return { color: this.color, width: this.width };
+    return { color: this.color, width: this.width, strokeStyle: this.strokeStyle };
   }
   onOptionsChange(listener) {
     this.optionListeners.add(listener);
@@ -8767,6 +8787,7 @@ var ArrowTool = class {
   setOptions(options) {
     if (options.color !== void 0) this.color = options.color;
     if (options.width !== void 0) this.width = options.width;
+    if (options.strokeStyle !== void 0) this.strokeStyle = options.strokeStyle;
     this.notifyOptionsChange();
   }
   notifyOptionsChange() {
@@ -8826,6 +8847,7 @@ var ArrowTool = class {
       position: this.start,
       color: this.color,
       width: this.width,
+      strokeStyle: this.strokeStyle,
       fromBinding: this.fromBinding,
       toBinding: this.toTarget ? { elementId: this.toTarget.id } : void 0,
       layerId: ctx.activeLayerId ?? ""
@@ -9693,7 +9715,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.40.3";
+var VERSION = "0.41.0";
 export {
   ArrowTool,
   AutoSave,