@fieldnotes/core 0.40.4 → 0.41.0

package/dist/index.cjs

@@ -2753,6 +2753,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);
@@ -2760,9 +2770,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) {
@@ -3682,6 +3691,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) {
@@ -5085,7 +5095,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);
@@ -6289,7 +6300,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 {
@@ -6300,7 +6311,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 {
@@ -6341,7 +6353,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,
@@ -6415,6 +6431,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) {
@@ -8832,6 +8850,7 @@ var ArrowTool = class {
   end = { x: 0, y: 0 };
   color;
   width;
+  strokeStyle;
   fromBinding;
   fromTarget = null;
   toTarget = null;
@@ -8839,9 +8858,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);
@@ -8850,6 +8870,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() {
@@ -8909,6 +8930,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 ?? ""
@@ -9776,7 +9798,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.40.4";
+var VERSION = "0.41.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,