@excalidraw/element 0.18.0-7ea3229 → 0.18.0-816c81c

package/dist/dev/index.js

@@ -3124,7 +3124,7 @@ import {
 } from "@excalidraw/math";
 import {
   DRAGGING_THRESHOLD,
-  KEYS as KEYS2,
+  KEYS,
   shouldRotateWithDiscreteAngle,
   getGridPoint,
   invariant as invariant8,
@@ -3142,7 +3142,6 @@ import {
 // src/binding.ts
 init_define_import_meta_env();
 import {
-  KEYS,
   arrayToMap as arrayToMap2,
   getFeatureFlag,
   invariant as invariant7,
@@ -3831,19 +3830,21 @@ var getSnapOutlineMidPoint = (point, element, elementsMap, zoom) => {
   );
   return candidate;
 };
-var projectFixedPointOntoDiagonal = (arrow, point, element, startOrEnd, elementsMap, zoom) => {
+var projectFixedPointOntoDiagonal = (arrow, point, element, startOrEnd, elementsMap, zoom, isMidpointSnappingEnabled = true) => {
   invariant2(arrow.points.length >= 2, "Arrow must have at least two points");
   if (arrow.width < 3 && arrow.height < 3) {
     return null;
   }
-  const sideMidPoint = getSnapOutlineMidPoint(
-    point,
-    element,
-    elementsMap,
-    zoom
-  );
-  if (sideMidPoint) {
-    return sideMidPoint;
+  if (isMidpointSnappingEnabled) {
+    const sideMidPoint = getSnapOutlineMidPoint(
+      point,
+      element,
+      elementsMap,
+      zoom
+    );
+    if (sideMidPoint) {
+      return sideMidPoint;
+    }
   }
   const [diagonalOne, diagonalTwo] = getDiagonalsForBindableElement(
     element,
@@ -6242,7 +6243,7 @@ var getElbowArrowData = (arrow, elementsMap, nextPoints, options) => {
   const origEndGlobalPoint = pointTranslate2(nextPoints[nextPoints.length - 1], vector2(arrow.x, arrow.y));
   let hoveredStartElement = null;
   let hoveredEndElement = null;
-  if (options?.isDragging) {
+  if (options?.isDragging && options?.isBindingEnabled !== false) {
     const elements = Array.from(elementsMap.values());
     hoveredStartElement = getHoveredElement(
       origStartGlobalPoint,
@@ -6273,7 +6274,9 @@ var getElbowArrowData = (arrow, elementsMap, nextPoints, options) => {
     origStartGlobalPoint,
     hoveredStartElement,
     elementsMap,
-    options?.isDragging
+    options?.isDragging,
+    options?.isBindingEnabled,
+    options?.isMidpointSnappingEnabled
   );
   const endGlobalPoint = getGlobalPoint(
     {
@@ -6288,7 +6291,9 @@ var getElbowArrowData = (arrow, elementsMap, nextPoints, options) => {
     origEndGlobalPoint,
     hoveredEndElement,
     elementsMap,
-    options?.isDragging
+    options?.isDragging,
+    options?.isBindingEnabled,
+    options?.isMidpointSnappingEnabled
   );
   const startHeading = getBindPointHeading(
     startGlobalPoint,
@@ -6911,14 +6916,16 @@ var neighborIndexToHeading = (idx) => {
   }
   return HEADING_LEFT;
 };
-var getGlobalPoint = (arrow, startOrEnd, fixedPointRatio, initialPoint, element, elementsMap, isDragging) => {
+var getGlobalPoint = (arrow, startOrEnd, fixedPointRatio, initialPoint, element, elementsMap, isDragging, isBindingEnabled2 = true, isMidpointSnappingEnabled = true) => {
   if (isDragging) {
-    if (element && elementsMap) {
+    if (isBindingEnabled2 && element && elementsMap) {
       return bindPointToSnapToElementOutline(
         arrow,
         element,
         startOrEnd,
-        elementsMap
+        elementsMap,
+        void 0,
+        isMidpointSnappingEnabled
       );
     }
     return initialPoint;
@@ -7079,9 +7086,6 @@ var maxBindingDistance_simple = (zoom) => {
     BASE_BINDING_DISTANCE * 2
   );
 };
-var shouldEnableBindingForPointerEvent = (event) => {
-  return !event[KEYS.CTRL_OR_CMD];
-};
 var isBindingEnabled = (appState) => {
   return appState.isBindingEnabled;
 };
@@ -7099,8 +7103,20 @@ var bindOrUnbindBindingElement = (arrow, draggingPoints, scenePointerX, scenePoi
       finalize: true
     }
   );
-  bindOrUnbindBindingElementEdge(arrow, start, "start", scene);
-  bindOrUnbindBindingElementEdge(arrow, end, "end", scene);
+  bindOrUnbindBindingElementEdge(
+    arrow,
+    start,
+    "start",
+    scene,
+    appState.isBindingEnabled
+  );
+  bindOrUnbindBindingElementEdge(
+    arrow,
+    end,
+    "end",
+    scene,
+    appState.isBindingEnabled
+  );
   if (start.focusPoint || end.focusPoint) {
     const updates = /* @__PURE__ */ new Map();
     if (start.focusPoint) {
@@ -7129,11 +7145,19 @@ var bindOrUnbindBindingElement = (arrow, draggingPoints, scenePointerX, scenePoi
   }
   return { start, end };
 };
-var bindOrUnbindBindingElementEdge = (arrow, { mode, element, focusPoint }, startOrEnd, scene) => {
+var bindOrUnbindBindingElementEdge = (arrow, { mode, element, focusPoint }, startOrEnd, scene, shouldSnapToOutline = true) => {
   if (mode === null) {
     unbindBindingElement(arrow, startOrEnd, scene);
   } else if (mode !== void 0) {
-    bindBindingElement(arrow, element, mode, startOrEnd, scene, focusPoint);
+    bindBindingElement(
+      arrow,
+      element,
+      mode,
+      startOrEnd,
+      scene,
+      focusPoint,
+      shouldSnapToOutline
+    );
   }
 };
 var bindingStrategyForElbowArrowEndpointDragging = (arrow, draggingPoints, elementsMap, elements, zoom) => {
@@ -7487,7 +7511,8 @@ var getBindingStrategyForDraggingBindingElementEndpoints_simple = (arrow, draggi
       hit,
       startDragged ? "start" : "end",
       elementsMap,
-      appState.zoom
+      appState.zoom,
+      appState.isMidpointSnappingEnabled
     ) || globalPoint
   } : { mode: null };
   const otherEndpoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
@@ -7516,7 +7541,8 @@ var getBindingStrategyForDraggingBindingElementEndpoints_simple = (arrow, draggi
       otherBindableElement,
       startDragged ? "end" : "start",
       elementsMap,
-      appState.zoom
+      appState.zoom,
+      appState.isMidpointSnappingEnabled
     ) || otherEndpoint
   } : { mode: void 0 } : { mode: void 0 };
   return {
@@ -7626,7 +7652,7 @@ var bindOrUnbindBindingElements = (selectedArrows, scene, appState) => {
     );
   });
 };
-var bindBindingElement = (arrow, hoveredElement, mode, startOrEnd, scene, focusPoint) => {
+var bindBindingElement = (arrow, hoveredElement, mode, startOrEnd, scene, focusPoint, shouldSnapToOutline = true) => {
   const elementsMap = scene.getNonDeletedElementsMap();
   let binding;
   if (isElbowArrow(arrow)) {
@@ -7637,7 +7663,8 @@ var bindBindingElement = (arrow, hoveredElement, mode, startOrEnd, scene, focusP
         arrow,
         hoveredElement,
         startOrEnd,
-        elementsMap
+        elementsMap,
+        shouldSnapToOutline
       )
     };
   } else {
@@ -7849,7 +7876,7 @@ var getDistanceForBinding = (point, bindableElement, elementsMap, zoom) => {
   const bindDistance = maxBindingDistance_simple(zoom);
   return distance3 > bindDistance ? null : distance3;
 };
-var bindPointToSnapToElementOutline = (arrowElement, bindableElement, startOrEnd, elementsMap, customIntersector) => {
+var bindPointToSnapToElementOutline = (arrowElement, bindableElement, startOrEnd, elementsMap, customIntersector, isMidpointSnappingEnabled = true) => {
   const elbowed = isElbowArrow(arrowElement);
   const point = LinearElementEditor.getPointAtIndexGlobalCoordinates(
     arrowElement,
@@ -7878,13 +7905,7 @@ var bindPointToSnapToElementOutline = (arrowElement, bindableElement, startOrEnd
     const isHorizontal = headingIsHorizontal(
       headingForPointFromElement(bindableElement, aabb, point)
     );
-    const snapPoint = snapToMid(
-      bindableElement,
-      elementsMap,
-      edgePoint,
-      0.05,
-      arrowElement
-    );
+    const snapPoint = isMidpointSnappingEnabled ? snapToMid(bindableElement, elementsMap, edgePoint, 0.05, arrowElement) : void 0;
     const resolved = snapPoint || point;
     const otherPoint = pointFrom8(
       isHorizontal ? bindableCenter[0] : resolved[0],
@@ -8148,10 +8169,10 @@ var updateBoundPoint = (arrow, startOrEnd, binding, bindableElement, elementsMap
   );
   const otherArrowPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
     arrow,
-    startOrEnd === "startBinding" ? -1 : 0,
+    startOrEnd === "startBinding" ? 1 : -2,
     elementsMap
   );
-  const otherFocusPointOrArrowPoint = otherFocusPoint || otherArrowPoint;
+  const otherFocusPointOrArrowPoint = arrow.points.length === 2 ? otherFocusPoint || otherArrowPoint : otherArrowPoint;
   const intersector = otherFocusPointOrArrowPoint && lineSegment4(focusPoint, otherFocusPointOrArrowPoint);
   const otherOutlinePoint = otherBindable && intersector && intersectElementWithLineSegment(
     otherBindable,
@@ -8216,17 +8237,23 @@ var updateBoundPoint = (arrow, startOrEnd, binding, bindableElement, elementsMap
     null
   );
 };
-var calculateFixedPointForElbowArrowBinding = (linearElement, hoveredElement, startOrEnd, elementsMap) => {
+var calculateFixedPointForElbowArrowBinding = (linearElement, hoveredElement, startOrEnd, elementsMap, shouldSnapToOutline = true, isMidpointSnappingEnabled = true) => {
   const bounds = [
     hoveredElement.x,
     hoveredElement.y,
     hoveredElement.x + hoveredElement.width,
     hoveredElement.y + hoveredElement.height
   ];
-  const snappedPoint = bindPointToSnapToElementOutline(
+  const snappedPoint = shouldSnapToOutline ? bindPointToSnapToElementOutline(
     linearElement,
     hoveredElement,
     startOrEnd,
+    elementsMap,
+    void 0,
+    isMidpointSnappingEnabled
+  ) : LinearElementEditor.getPointAtIndexGlobalCoordinates(
+    linearElement,
+    startOrEnd === "start" ? 0 : -1,
     elementsMap
   );
   const globalMidPoint = pointFrom8(
@@ -9083,7 +9110,7 @@ var LinearElementEditor = class _LinearElementEditor {
         elementsMap,
         pivotPoint,
         pointFrom9(scenePointerX, scenePointerY),
-        event[KEYS2.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
+        event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
         customLineAngle
       );
       const target = pointFrom9(
@@ -9098,7 +9125,7 @@ var LinearElementEditor = class _LinearElementEditor {
         elementsMap,
         scenePointerX - linearElementEditor.pointerOffset.x,
         scenePointerY - linearElementEditor.pointerOffset.y,
-        event[KEYS2.CTRL_OR_CMD] ? null : app.getEffectiveGridSize()
+        event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize()
       );
       deltaX = newDraggingPointPosition[0] - point[0];
       deltaY = newDraggingPointPosition[1] - point[1];
@@ -9118,11 +9145,20 @@ var LinearElementEditor = class _LinearElementEditor {
       event.altKey,
       linearElementEditor
     );
-    _LinearElementEditor.movePoints(element, app.scene, positions, {
-      startBinding: updates?.startBinding,
-      endBinding: updates?.endBinding,
-      moveMidPointsWithElement: updates?.moveMidPointsWithElement
-    });
+    _LinearElementEditor.movePoints(
+      element,
+      app.scene,
+      positions,
+      {
+        startBinding: updates?.startBinding,
+        endBinding: updates?.endBinding,
+        moveMidPointsWithElement: updates?.moveMidPointsWithElement
+      },
+      {
+        isBindingEnabled: app.state.isBindingEnabled,
+        isMidpointSnappingEnabled: app.state.isMidpointSnappingEnabled
+      }
+    );
     if (isBindingElement(element, false)) {
       if (isBindingEnabled(app.state)) {
         suggestedBinding = updates?.suggestedBinding ?? null;
@@ -9158,7 +9194,8 @@ var LinearElementEditor = class _LinearElementEditor {
           startBindingElement,
           "start",
           elementsMap,
-          app.state.zoom
+          app.state.zoom,
+          app.state.isMidpointSnappingEnabled
         ) : linearElementEditor.initialState.altFocusPoint
       }
     };
@@ -9214,7 +9251,7 @@ var LinearElementEditor = class _LinearElementEditor {
         elementsMap,
         pivotPoint,
         pointFrom9(scenePointerX, scenePointerY),
-        event[KEYS2.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
+        event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
         customLineAngle
       );
       const target = pointFrom9(
@@ -9229,7 +9266,7 @@ var LinearElementEditor = class _LinearElementEditor {
         elementsMap,
         scenePointerX - linearElementEditor.pointerOffset.x,
         scenePointerY - linearElementEditor.pointerOffset.y,
-        event[KEYS2.CTRL_OR_CMD] ? null : app.getEffectiveGridSize()
+        event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize()
       );
       deltaX = newDraggingPointPosition[0] - draggingPoint[0];
       deltaY = newDraggingPointPosition[1] - draggingPoint[1];
@@ -9249,11 +9286,20 @@ var LinearElementEditor = class _LinearElementEditor {
       event.altKey,
       linearElementEditor
     );
-    _LinearElementEditor.movePoints(element, app.scene, positions, {
-      startBinding: updates?.startBinding,
-      endBinding: updates?.endBinding,
-      moveMidPointsWithElement: updates?.moveMidPointsWithElement
-    });
+    _LinearElementEditor.movePoints(
+      element,
+      app.scene,
+      positions,
+      {
+        startBinding: updates?.startBinding,
+        endBinding: updates?.endBinding,
+        moveMidPointsWithElement: updates?.moveMidPointsWithElement
+      },
+      {
+        isBindingEnabled: app.state.isBindingEnabled,
+        isMidpointSnappingEnabled: app.state.isMidpointSnappingEnabled
+      }
+    );
     if (isBindingElement(element, false)) {
       if (isBindingEnabled(app.state) && (startIsSelected || endIsSelected)) {
         suggestedBinding = updates?.suggestedBinding ?? null;
@@ -9306,7 +9352,8 @@ var LinearElementEditor = class _LinearElementEditor {
           altFocusPointBindableElement,
           "start",
           elementsMap,
-          app.state.zoom
+          app.state.zoom,
+          app.state.isMidpointSnappingEnabled
         ) : linearElementEditor.initialState.altFocusPoint
       },
       segmentMidPointHoveredCoords: newSelectedMidPointHoveredCoords,
@@ -9586,7 +9633,7 @@ var LinearElementEditor = class _LinearElementEditor {
               elementsMap,
               scenePointer.x,
               scenePointer.y,
-              event[KEYS2.CTRL_OR_CMD] ? null : app.getEffectiveGridSize()
+              event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize()
             )
           ]
         });
@@ -9699,7 +9746,7 @@ var LinearElementEditor = class _LinearElementEditor {
         elementsMap,
         anchor,
         pointFrom9(scenePointerX, scenePointerY),
-        event[KEYS2.CTRL_OR_CMD] ? null : app.getEffectiveGridSize()
+        event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize()
       );
       newPoint = pointFrom9(width + anchor[0], height + anchor[1]);
     } else {
@@ -9708,7 +9755,7 @@ var LinearElementEditor = class _LinearElementEditor {
         elementsMap,
         scenePointerX - appState.selectedLinearElement.pointerOffset.x,
         scenePointerY - appState.selectedLinearElement.pointerOffset.y,
-        event[KEYS2.CTRL_OR_CMD] || isElbowArrow(element) ? null : app.getEffectiveGridSize()
+        event[KEYS.CTRL_OR_CMD] || isElbowArrow(element) ? null : app.getEffectiveGridSize()
       );
     }
     if (lastPoint === lastUncommittedPoint) {
@@ -9936,7 +9983,7 @@ var LinearElementEditor = class _LinearElementEditor {
       offsetY
     );
   }
-  static movePoints(element, scene, pointUpdates, otherUpdates) {
+  static movePoints(element, scene, pointUpdates, otherUpdates, options) {
     const { points } = element;
     if (isLineElement(element) && element.polygon) {
       const firstPointUpdate = pointUpdates.get(0);
@@ -9979,7 +10026,9 @@ var LinearElementEditor = class _LinearElementEditor {
       offsetY,
       otherUpdates,
       {
-        isDragging: Array.from(pointUpdates.values()).some((t) => t.isDragging)
+        isDragging: Array.from(pointUpdates.values()).some((t) => t.isDragging),
+        isBindingEnabled: options?.isBindingEnabled,
+        isMidpointSnappingEnabled: options?.isMidpointSnappingEnabled
       }
     );
   }
@@ -10058,7 +10107,9 @@ var LinearElementEditor = class _LinearElementEditor {
       updates.points = Array.from(nextPoints);
       scene.mutateElement(element, updates, {
         informMutation: true,
-        isDragging: options?.isDragging ?? false
+        isDragging: options?.isDragging ?? false,
+        isBindingEnabled: options?.isBindingEnabled,
+        isMidpointSnappingEnabled: options?.isMidpointSnappingEnabled
       });
     } else {
       const nextCoords = getElementPointsCoords(element, nextPoints);
@@ -10365,14 +10416,14 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX
       updates: {
         suggestedBinding: suggestedBindingElement ? {
           element: suggestedBindingElement,
-          midPoint: snapToMid(
+          midPoint: app.state.isMidpointSnappingEnabled ? snapToMid(
             suggestedBindingElement,
             elementsMap,
             pointFrom9(
               scenePointerX - linearElementEditor.pointerOffset.x,
               scenePointerY - linearElementEditor.pointerOffset.y
             )
-          )
+          ) : void 0
         } : null
       }
     };
@@ -12520,44 +12571,87 @@ var modifyIframeLikeForRoughOptions = (element, isExporting, embedsValidationSta
   }
   return element;
 };
-var getArrowheadShapes = (element, shape, position, arrowhead, generator, options, canvasBackgroundColor, isDarkMode) => {
-  const arrowheadPoints = getArrowheadPoints(
-    element,
-    shape,
-    position,
-    arrowhead
-  );
+var generateArrowheadCardinalityOne = (generator, arrowheadPoints, lineOptions) => {
   if (arrowheadPoints === null) {
     return [];
   }
-  const generateCrowfootOne = (arrowheadPoints2, options2) => {
-    if (arrowheadPoints2 === null) {
-      return [];
-    }
-    const [, , x3, y3, x4, y4] = arrowheadPoints2;
-    return [generator.line(x3, y3, x4, y4, options2)];
+  const [, , x3, y3, x4, y4] = arrowheadPoints;
+  return [generator.line(x3, y3, x4, y4, lineOptions)];
+};
+var generateArrowheadLinesToTip = (generator, arrowheadPoints, lineOptions) => {
+  if (arrowheadPoints === null) {
+    return [];
+  }
+  const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;
+  return [
+    generator.line(x3, y3, x2, y2, lineOptions),
+    generator.line(x4, y4, x2, y2, lineOptions)
+  ];
+};
+var getArrowheadLineOptions = (element, options) => {
+  const lineOptions = { ...options };
+  if (element.strokeStyle === "dotted") {
+    const dash = getDashArrayDotted(element.strokeWidth - 1);
+    lineOptions.strokeLineDash = [dash[0], dash[1] - 1];
+  } else {
+    delete lineOptions.strokeLineDash;
+  }
+  lineOptions.roughness = Math.min(1, lineOptions.roughness || 0);
+  return lineOptions;
+};
+var generateArrowheadOutlineCircle = (generator, options, strokeColor, arrowheadPoints, fill, diameterScale = 1) => {
+  if (arrowheadPoints === null) {
+    return [];
+  }
+  const [x, y, diameter] = arrowheadPoints;
+  const circleOptions = {
+    ...options,
+    fill,
+    fillStyle: "solid",
+    stroke: strokeColor,
+    roughness: Math.min(0.5, options.roughness || 0)
   };
+  delete circleOptions.strokeLineDash;
+  return [generator.circle(x, y, diameter * diameterScale, circleOptions)];
+};
+var getArrowheadShapes = (element, shape, position, arrowhead, generator, options, canvasBackgroundColor, isDarkMode) => {
+  if (arrowhead === null) {
+    return [];
+  }
   const strokeColor = isDarkMode ? applyDarkModeFilter2(element.strokeColor) : element.strokeColor;
+  const backgroundFillColor = isDarkMode ? applyDarkModeFilter2(canvasBackgroundColor) : canvasBackgroundColor;
+  const cardinalityOneOrManyOffset = -0.25;
+  const cardinalityZeroCircleScale = 0.8;
   switch (arrowhead) {
-    case "dot":
     case "circle":
     case "circle_outline": {
-      const [x, y, diameter] = arrowheadPoints;
-      delete options.strokeLineDash;
-      return [
-        generator.circle(x, y, diameter, {
-          ...options,
-          fill: arrowhead === "circle_outline" ? canvasBackgroundColor : strokeColor,
-          fillStyle: "solid",
-          stroke: strokeColor,
-          roughness: Math.min(0.5, options.roughness || 0)
-        })
-      ];
+      return generateArrowheadOutlineCircle(
+        generator,
+        options,
+        strokeColor,
+        getArrowheadPoints(element, shape, position, arrowhead),
+        arrowhead === "circle_outline" ? backgroundFillColor : strokeColor
+      );
     }
     case "triangle":
     case "triangle_outline": {
+      const arrowheadPoints = getArrowheadPoints(
+        element,
+        shape,
+        position,
+        arrowhead
+      );
+      if (arrowheadPoints === null) {
+        return [];
+      }
       const [x, y, x2, y2, x3, y3] = arrowheadPoints;
-      delete options.strokeLineDash;
+      const triangleOptions = {
+        ...options,
+        fill: arrowhead === "triangle_outline" ? backgroundFillColor : strokeColor,
+        fillStyle: "solid",
+        roughness: Math.min(1, options.roughness || 0)
+      };
+      delete triangleOptions.strokeLineDash;
       return [
         generator.polygon(
           [
@@ -12566,19 +12660,29 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
             [x3, y3],
             [x, y]
           ],
-          {
-            ...options,
-            fill: arrowhead === "triangle_outline" ? canvasBackgroundColor : strokeColor,
-            fillStyle: "solid",
-            roughness: Math.min(1, options.roughness || 0)
-          }
+          triangleOptions
         )
       ];
     }
     case "diamond":
     case "diamond_outline": {
+      const arrowheadPoints = getArrowheadPoints(
+        element,
+        shape,
+        position,
+        arrowhead
+      );
+      if (arrowheadPoints === null) {
+        return [];
+      }
       const [x, y, x2, y2, x3, y3, x4, y4] = arrowheadPoints;
-      delete options.strokeLineDash;
+      const diamondOptions = {
+        ...options,
+        fill: arrowhead === "diamond_outline" ? backgroundFillColor : strokeColor,
+        fillStyle: "solid",
+        roughness: Math.min(1, options.roughness || 0)
+      };
+      delete diamondOptions.strokeLineDash;
       return [
         generator.polygon(
           [
@@ -12588,38 +12692,102 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
             [x4, y4],
             [x, y]
           ],
-          {
-            ...options,
-            fill: arrowhead === "diamond_outline" ? canvasBackgroundColor : strokeColor,
-            fillStyle: "solid",
-            roughness: Math.min(1, options.roughness || 0)
-          }
+          diamondOptions
+        )
+      ];
+    }
+    case "cardinality_one":
+      return generateArrowheadCardinalityOne(
+        generator,
+        getArrowheadPoints(element, shape, position, arrowhead),
+        getArrowheadLineOptions(element, options)
+      );
+    case "cardinality_many":
+      return generateArrowheadLinesToTip(
+        generator,
+        getArrowheadPoints(element, shape, position, arrowhead),
+        getArrowheadLineOptions(element, options)
+      );
+    case "cardinality_one_or_many": {
+      const lineOptions = getArrowheadLineOptions(element, options);
+      return [
+        ...generateArrowheadLinesToTip(
+          generator,
+          getArrowheadPoints(element, shape, position, "cardinality_many"),
+          lineOptions
+        ),
+        ...generateArrowheadCardinalityOne(
+          generator,
+          getArrowheadPoints(
+            element,
+            shape,
+            position,
+            "cardinality_one",
+            cardinalityOneOrManyOffset
+          ),
+          lineOptions
+        )
+      ];
+    }
+    case "cardinality_exactly_one": {
+      const lineOptions = getArrowheadLineOptions(element, options);
+      return [
+        ...generateArrowheadCardinalityOne(
+          generator,
+          getArrowheadPoints(element, shape, position, "cardinality_one", -0.5),
+          lineOptions
+        ),
+        ...generateArrowheadCardinalityOne(
+          generator,
+          getArrowheadPoints(element, shape, position, "cardinality_one"),
+          lineOptions
+        )
+      ];
+    }
+    case "cardinality_zero_or_one": {
+      const lineOptions = getArrowheadLineOptions(element, options);
+      return [
+        ...generateArrowheadOutlineCircle(
+          generator,
+          options,
+          strokeColor,
+          getArrowheadPoints(element, shape, position, "circle_outline", 1.5),
+          backgroundFillColor,
+          cardinalityZeroCircleScale
+        ),
+        ...generateArrowheadCardinalityOne(
+          generator,
+          getArrowheadPoints(element, shape, position, "cardinality_one", -0.5),
+          lineOptions
+        )
+      ];
+    }
+    case "cardinality_zero_or_many": {
+      const lineOptions = getArrowheadLineOptions(element, options);
+      return [
+        ...generateArrowheadLinesToTip(
+          generator,
+          getArrowheadPoints(element, shape, position, "cardinality_many"),
+          lineOptions
+        ),
+        ...generateArrowheadOutlineCircle(
+          generator,
+          options,
+          strokeColor,
+          getArrowheadPoints(element, shape, position, "circle_outline", 1.5),
+          backgroundFillColor,
+          cardinalityZeroCircleScale
         )
       ];
     }
-    case "crowfoot_one":
-      return generateCrowfootOne(arrowheadPoints, options);
     case "bar":
     case "arrow":
-    case "crowfoot_many":
-    case "crowfoot_one_or_many":
     default: {
-      const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;
-      if (element.strokeStyle === "dotted") {
-        const dash = getDashArrayDotted(element.strokeWidth - 1);
-        options.strokeLineDash = [dash[0], dash[1] - 1];
-      } else {
-        delete options.strokeLineDash;
-      }
-      options.roughness = Math.min(1, options.roughness || 0);
-      return [
-        generator.line(x3, y3, x2, y2, options),
-        generator.line(x4, y4, x2, y2, options),
-        ...arrowhead === "crowfoot_one_or_many" ? generateCrowfootOne(
-          getArrowheadPoints(element, shape, position, "crowfoot_one"),
-          options
-        ) : []
-      ];
+      return generateArrowheadLinesToTip(
+        generator,
+        getArrowheadPoints(element, shape, position, arrowhead),
+        getArrowheadLineOptions(element, options)
+      );
     }
   }
 };
@@ -13557,6 +13725,8 @@ var getFreeDrawElementAbsoluteCoords = (element) => {
   const y2 = maxY + element.y;
   return [x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2];
 };
+var CARDINALITY_MARKER_SIZE = 20;
+var CROWFOOT_ARROWHEAD_SIZE = 15;
 var getArrowheadSize = (arrowhead) => {
   switch (arrowhead) {
     case "arrow":
@@ -13564,10 +13734,14 @@ var getArrowheadSize = (arrowhead) => {
     case "diamond":
     case "diamond_outline":
       return 12;
-    case "crowfoot_many":
-    case "crowfoot_one":
-    case "crowfoot_one_or_many":
-      return 20;
+    case "cardinality_many":
+    case "cardinality_one_or_many":
+    case "cardinality_zero_or_many":
+      return CROWFOOT_ARROWHEAD_SIZE;
+    case "cardinality_one":
+    case "cardinality_exactly_one":
+    case "cardinality_zero_or_one":
+      return CARDINALITY_MARKER_SIZE;
     default:
       return 15;
   }
@@ -13582,7 +13756,10 @@ var getArrowheadAngle = (arrowhead) => {
       return 25;
   }
 };
-var getArrowheadPoints = (element, shape, position, arrowhead) => {
+var getArrowheadPoints = (element, shape, position, arrowhead, offsetMultiplier = 0) => {
+  if (arrowhead === null) {
+    return null;
+  }
   if (shape.length < 1) {
     return null;
   }
@@ -13620,21 +13797,23 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
   }
   const lengthMultiplier = arrowhead === "diamond" || arrowhead === "diamond_outline" ? 0.25 : 0.5;
   const minSize = Math.min(size, length * lengthMultiplier);
-  const xs = x2 - nx * minSize;
-  const ys = y2 - ny * minSize;
-  if (arrowhead === "dot" || arrowhead === "circle" || arrowhead === "circle_outline") {
-    const diameter = Math.hypot(ys - y2, xs - x2) + element.strokeWidth - 2;
-    return [x2, y2, diameter];
+  const tx = x2 - nx * minSize * offsetMultiplier;
+  const ty = y2 - ny * minSize * offsetMultiplier;
+  const xs = tx - nx * minSize;
+  const ys = ty - ny * minSize;
+  if (arrowhead === "circle" || arrowhead === "circle_outline") {
+    const diameter = Math.hypot(ys - ty, xs - tx) + element.strokeWidth - 2;
+    return [tx, ty, diameter];
   }
   const angle = getArrowheadAngle(arrowhead);
-  if (arrowhead === "crowfoot_many" || arrowhead === "crowfoot_one_or_many") {
+  if (arrowhead === "cardinality_many" || arrowhead === "cardinality_one_or_many") {
     const [x32, y32] = pointRotateRads13(
-      pointFrom14(x2, y2),
+      pointFrom14(tx, ty),
       pointFrom14(xs, ys),
       degreesToRadians(-angle)
     );
     const [x42, y42] = pointRotateRads13(
-      pointFrom14(x2, y2),
+      pointFrom14(tx, ty),
       pointFrom14(xs, ys),
       degreesToRadians(angle)
     );
@@ -13642,12 +13821,12 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
   }
   const [x3, y3] = pointRotateRads13(
     pointFrom14(xs, ys),
-    pointFrom14(x2, y2),
+    pointFrom14(tx, ty),
     -angle * Math.PI / 180
   );
   const [x4, y4] = pointRotateRads13(
     pointFrom14(xs, ys),
-    pointFrom14(x2, y2),
+    pointFrom14(tx, ty),
     degreesToRadians(angle)
   );
   if (arrowhead === "diamond" || arrowhead === "diamond_outline") {
@@ -13656,21 +13835,21 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
     if (position === "start") {
       const [px, py] = element.points.length > 1 ? element.points[1] : [0, 0];
       [ox, oy] = pointRotateRads13(
-        pointFrom14(x2 + minSize * 2, y2),
-        pointFrom14(x2, y2),
-        Math.atan2(py - y2, px - x2)
+        pointFrom14(tx + minSize * 2, ty),
+        pointFrom14(tx, ty),
+        Math.atan2(py - ty, px - tx)
       );
     } else {
       const [px, py] = element.points.length > 1 ? element.points[element.points.length - 2] : [0, 0];
       [ox, oy] = pointRotateRads13(
-        pointFrom14(x2 - minSize * 2, y2),
-        pointFrom14(x2, y2),
-        Math.atan2(y2 - py, x2 - px)
+        pointFrom14(tx - minSize * 2, ty),
+        pointFrom14(tx, ty),
+        Math.atan2(ty - py, tx - px)
       );
     }
-    return [x2, y2, x3, y3, ox, oy, x4, y4];
+    return [tx, ty, x3, y3, ox, oy, x4, y4];
   }
-  return [x2, y2, x3, y3, x4, y4];
+  return [tx, ty, x3, y3, x4, y4];
 };
 var generateLinearElementShape = (element) => {
   const generator = rough_default.generator();
@@ -18252,19 +18431,19 @@ var embeddableURLValidator = (url, validateEmbeddable) => {
 
 // src/flowchart.ts
 init_define_import_meta_env();
-import { KEYS as KEYS3, invariant as invariant11, toBrandedType as toBrandedType2 } from "@excalidraw/common";
+import { KEYS as KEYS2, invariant as invariant11, toBrandedType as toBrandedType2 } from "@excalidraw/common";
 import { pointFrom as pointFrom15 } from "@excalidraw/math";
 var VERTICAL_OFFSET = 100;
 var HORIZONTAL_OFFSET = 100;
 var getLinkDirectionFromKey = (key) => {
   switch (key) {
-    case KEYS3.ARROW_UP:
+    case KEYS2.ARROW_UP:
       return "up";
-    case KEYS3.ARROW_DOWN:
+    case KEYS2.ARROW_DOWN:
       return "down";
-    case KEYS3.ARROW_RIGHT:
+    case KEYS2.ARROW_RIGHT:
       return "right";
-    case KEYS3.ARROW_LEFT:
+    case KEYS2.ARROW_LEFT:
       return "left";
     default:
       return "right";
@@ -21559,6 +21738,33 @@ var maybeHandleArrowPointlikeDrag = ({
   return false;
 };
 
+// src/arrowheads.ts
+init_define_import_meta_env();
+var normalizeArrowhead = (arrowhead) => {
+  switch (arrowhead) {
+    case void 0:
+    case null:
+      return null;
+    case "dot":
+      return "circle";
+    case "crowfoot_one":
+      return "cardinality_one";
+    case "crowfoot_many":
+      return "cardinality_many";
+    case "crowfoot_one_or_many":
+      return "cardinality_one_or_many";
+    default:
+      return arrowhead;
+  }
+};
+var getArrowheadForPicker = (arrowhead) => {
+  const normalizedArrowhead = normalizeArrowhead(arrowhead);
+  if (normalizedArrowhead === null) {
+    return null;
+  }
+  return normalizedArrowhead;
+};
+
 // src/index.ts
 var getSceneVersion = (elements) => elements.reduce((acc, el) => acc + el.version, 0);
 var hashElementsVersion = (elements) => {
@@ -21680,6 +21886,7 @@ export {
   getApproxMinLineWidth,
   getArrowLocalFixedPoints,
   getArrowheadAngle,
+  getArrowheadForPicker,
   getArrowheadPoints,
   getArrowheadSize,
   getBindingGap,
@@ -21887,6 +22094,7 @@ export {
   newLinearElement,
   newMagicFrameElement,
   newTextElement,
+  normalizeArrowhead,
   normalizeElementOrder,
   normalizeFixedPoint,
   normalizeSVG,
@@ -21920,7 +22128,6 @@ export {
   setCustomTextMetricsProvider,
   shouldAllowVerticalAlign,
   shouldApplyFrameClip,
-  shouldEnableBindingForPointerEvent,
   shouldTestInside,
   showSelectedShapeActions,
   snapToMid,