@dwelle/excalidraw 0.5.0-2aec728 → 0.5.0-2dbdd6f

package/dist/dev/{chunk-K532CM3P.js → chunk-JBODKHIT.js}

@@ -1,6 +1,6 @@
 import {
   define_import_meta_env_default
-} from "./chunk-M2XQF7GS.js";
+} from "./chunk-NYLL7DNJ.js";
 import {
   __publicField
 } from "./chunk-XDFCUUT6.js";
@@ -212,7 +212,12 @@ function pointsEqual(a, b, tolerance = PRECISION) {
   const abs = Math.abs;
   return abs(a[0] - b[0]) < tolerance && abs(a[1] - b[1]) < tolerance;
 }
-function pointRotateRads([x, y], [cx, cy], angle) {
+function pointRotateRads(point, center, angle) {
+  if (!angle) {
+    return point;
+  }
+  const [x, y] = point;
+  const [cx, cy] = center;
   return pointFrom(
     (x - cx) * Math.cos(angle) - (y - cy) * Math.sin(angle) + cx,
     (x - cx) * Math.sin(angle) + (y - cy) * Math.cos(angle) + cy
@@ -1796,7 +1801,7 @@ var isInteractive = (target) => {
   return isInputLike(target) || target instanceof Element && !!target.closest("label, button");
 };
 var isWritableElement = (target) => target instanceof HTMLElement && target.dataset.type === "wysiwyg" || target instanceof HTMLBRElement || // newline in wysiwyg
-target instanceof HTMLTextAreaElement || target instanceof HTMLInputElement && (target.type === "text" || target.type === "number" || target.type === "password" || target.type === "search");
+target instanceof HTMLTextAreaElement || target instanceof HTMLInputElement && (target.type === "text" || target.type === "number" || target.type === "password" || target.type === "search") || target instanceof HTMLElement && target.closest(".cm-editor") !== null;
 var getFontFamilyString = ({
   fontFamily
 }) => {
@@ -3753,12 +3758,12 @@ var setElementShapesCacheEntry = (element, shape, offset) => {
   }
   shapes.set(offset, shape);
 };
-function deconstructLinearOrFreeDrawElement(element) {
+function deconstructLinearOrFreeDrawElement(element, elementsMap) {
   const cachedShape = getElementShapesCacheEntry(element, 0);
   if (cachedShape) {
     return cachedShape;
   }
-  const ops = generateLinearCollisionShape(element);
+  const ops = generateLinearCollisionShape(element, elementsMap);
   const lines = [];
   const curves = [];
   for (let idx = 0; idx < ops.length; idx += 1) {
@@ -4626,91 +4631,168 @@ var parseTokens = (line2) => {
   return line2.normalize("NFC").split(breakLineRegex).filter(Boolean);
 };
 var wrapText = (text, font, maxWidth) => {
+  return getWrappedTextLines(text, font, maxWidth).map((line2) => line2.text).join("\n");
+};
+var getHardLineBreaks = (text) => {
+  let offset = 0;
+  return text.split("\n").map((line2) => {
+    const start = offset;
+    const end = start + line2.length;
+    offset = end + 1;
+    return {
+      text: line2,
+      start,
+      end
+    };
+  });
+};
+var getWrappedTextLines = (text, font, maxWidth) => {
   if (!Number.isFinite(maxWidth) || maxWidth < 0) {
-    return text;
+    return getHardLineBreaks(text);
   }
   const lines = [];
-  const originalLines = text.split("\n");
-  for (const originalLine of originalLines) {
-    const currentLineWidth = getLineWidth(originalLine, font);
-    if (currentLineWidth <= maxWidth) {
-      lines.push(originalLine);
-      continue;
+  let offset = 0;
+  for (const originalLine of text.split("\n")) {
+    const originalLineWidth = getLineWidth(originalLine, font);
+    if (originalLineWidth <= maxWidth) {
+      lines.push({
+        text: originalLine,
+        start: offset,
+        end: offset + originalLine.length
+      });
+    } else {
+      lines.push(...wrapLine(originalLine, font, maxWidth, offset));
     }
-    const wrappedLine = wrapLine(originalLine, font, maxWidth);
-    lines.push(...wrappedLine);
+    offset += originalLine.length + 1;
   }
-  return lines.join("\n");
+  return lines;
 };
-var wrapLine = (line2, font, maxWidth) => {
+var wrapLine = (line2, font, maxWidth, lineStart) => {
   const lines = [];
   const tokens = parseTokens(line2);
-  const tokenIterator = tokens[Symbol.iterator]();
   let currentLine = "";
+  let currentLineStart = lineStart;
+  let currentLineEnd = lineStart;
   let currentLineWidth = 0;
-  let iterator = tokenIterator.next();
-  while (!iterator.done) {
-    const token = iterator.value;
+  let tokenOffset = lineStart;
+  let tokenIndex = 0;
+  while (tokenIndex < tokens.length) {
+    const token = tokens[tokenIndex];
+    const tokenStart = tokenOffset;
+    const tokenEnd = tokenStart + token.length;
     const testLine = currentLine + token;
     const testLineWidth = isSingleCharacter(token) ? currentLineWidth + charWidth.calculate(token, font) : getLineWidth(testLine, font);
     if (/\s/.test(token) || testLineWidth <= maxWidth) {
+      if (!currentLine) {
+        currentLineStart = tokenStart;
+      }
       currentLine = testLine;
+      currentLineEnd = tokenEnd;
       currentLineWidth = testLineWidth;
-      iterator = tokenIterator.next();
+      tokenOffset = tokenEnd;
+      tokenIndex++;
       continue;
     }
     if (!currentLine) {
-      const wrappedWord = wrapWord(token, font, maxWidth);
-      const trailingLine = wrappedWord[wrappedWord.length - 1] ?? "";
+      const wrappedWord = wrapWord(token, font, maxWidth, tokenStart);
+      const trailingLine = wrappedWord[wrappedWord.length - 1] ?? {
+        text: "",
+        start: tokenStart,
+        end: tokenStart
+      };
       const precedingLines = wrappedWord.slice(0, -1);
       lines.push(...precedingLines);
-      currentLine = trailingLine;
-      currentLineWidth = getLineWidth(trailingLine, font);
-      iterator = tokenIterator.next();
+      currentLine = trailingLine.text;
+      currentLineStart = trailingLine.start;
+      currentLineEnd = trailingLine.end;
+      currentLineWidth = getLineWidth(trailingLine.text, font);
+      tokenOffset = tokenEnd;
+      tokenIndex++;
     } else {
-      lines.push(currentLine.trimEnd());
+      lines.push(
+        trimLineEndAtSoftBreak(currentLine, currentLineStart, currentLineEnd)
+      );
       currentLine = "";
+      currentLineStart = tokenStart;
+      currentLineEnd = tokenStart;
       currentLineWidth = 0;
     }
   }
   if (currentLine) {
-    const trailingLine = trimLine(currentLine, font, maxWidth);
+    const trailingLine = trimLine(
+      currentLine,
+      currentLineStart,
+      currentLineEnd,
+      font,
+      maxWidth
+    );
     lines.push(trailingLine);
   }
   return lines;
 };
-var wrapWord = (word, font, maxWidth) => {
+var wrapWord = (word, font, maxWidth, wordStart) => {
   if (getEmojiRegex().test(word)) {
-    return [word];
+    return [
+      {
+        text: word,
+        start: wordStart,
+        end: wordStart + word.length
+      }
+    ];
   }
   satisfiesWordInvariant(word);
   const lines = [];
   const chars = Array.from(word);
   let currentLine = "";
+  let currentLineStart = wordStart;
+  let currentLineEnd = wordStart;
   let currentLineWidth = 0;
+  let offset = wordStart;
   for (const char of chars) {
+    const charStart = offset;
+    const charEnd = charStart + char.length;
     const _charWidth = charWidth.calculate(char, font);
     const testLineWidth = currentLineWidth + _charWidth;
     if (testLineWidth <= maxWidth) {
+      if (!currentLine) {
+        currentLineStart = charStart;
+      }
       currentLine = currentLine + char;
+      currentLineEnd = charEnd;
       currentLineWidth = testLineWidth;
+      offset = charEnd;
       continue;
     }
     if (currentLine) {
-      lines.push(currentLine);
+      lines.push({
+        text: currentLine,
+        start: currentLineStart,
+        end: currentLineEnd
+      });
     }
     currentLine = char;
+    currentLineStart = charStart;
+    currentLineEnd = charEnd;
     currentLineWidth = _charWidth;
+    offset = charEnd;
   }
   if (currentLine) {
-    lines.push(currentLine);
+    lines.push({
+      text: currentLine,
+      start: currentLineStart,
+      end: currentLineEnd
+    });
   }
   return lines;
 };
-var trimLine = (line2, font, maxWidth) => {
+var trimLine = (line2, start, end, font, maxWidth) => {
   const shouldTrimWhitespaces = getLineWidth(line2, font) > maxWidth;
   if (!shouldTrimWhitespaces) {
-    return line2;
+    return {
+      text: line2,
+      start,
+      end
+    };
   }
   let [, trimmedLine, whitespaces] = line2.match(/^(.+?)(\s+)$/) ?? [
     line2,
@@ -4727,7 +4809,19 @@ var trimLine = (line2, font, maxWidth) => {
     trimmedLine = trimmedLine + whitespace;
     trimmedLineWidth = testLineWidth;
   }
-  return trimmedLine;
+  return {
+    text: trimmedLine,
+    start,
+    end: end - (line2.length - trimmedLine.length)
+  };
+};
+var trimLineEndAtSoftBreak = (line2, start, end) => {
+  const trimmedLine = line2.trimEnd();
+  return {
+    text: trimmedLine,
+    start,
+    end: end - (line2.length - trimmedLine.length)
+  };
 };
 var isSingleCharacter = (maybeSingleCharacter) => {
   return maybeSingleCharacter.codePointAt(0) !== void 0 && maybeSingleCharacter.codePointAt(1) === void 0;
@@ -4966,7 +5060,8 @@ var getContainerCenter = (container, appState, elementsMap) => {
   if (!midSegmentMidpoint) {
     midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(
       container,
-      index + 1
+      index + 1,
+      elementsMap
     );
   }
   return { x: midSegmentMidpoint[0], y: midSegmentMidpoint[1] };
@@ -5101,7 +5196,7 @@ var distanceToElement = (element, elementsMap, p) => {
     case "line":
     case "arrow":
     case "freedraw":
-      return distanceToLinearOrFreeDraElement(element, p);
+      return distanceToLinearOrFreeDraElement(element, elementsMap, p);
   }
 };
 var distanceToRectanguloidElement = (element, elementsMap, p) => {
@@ -5130,8 +5225,11 @@ var distanceToEllipseElement = (element, elementsMap, p) => {
     ellipse(center, element.width / 2, element.height / 2)
   );
 };
-var distanceToLinearOrFreeDraElement = (element, p) => {
-  const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+var distanceToLinearOrFreeDraElement = (element, elementsMap, p) => {
+  const [lines, curves] = deconstructLinearOrFreeDrawElement(
+    element,
+    elementsMap
+  );
   return Math.min(
     ...lines.map((s) => distanceToLineSegment(p, s)),
     ...curves.map((a) => curvePointDistance(a, p))
@@ -5370,7 +5468,12 @@ var intersectElementWithLineSegment = (element, elementsMap, line2, offset = 0,
     case "line":
     case "freedraw":
     case "arrow":
-      return intersectLinearOrFreeDrawWithLineSegment(element, line2, onlyFirst);
+      return intersectLinearOrFreeDrawWithLineSegment(
+        element,
+        line2,
+        elementsMap,
+        onlyFirst
+      );
   }
 };
 var curveIntersections = (curves, segment, intersections, center, angle, onlyFirst = false) => {
@@ -5409,8 +5512,11 @@ var lineIntersections = (lines, segment, intersections, center, angle, onlyFirst
   }
   return intersections;
 };
-var intersectLinearOrFreeDrawWithLineSegment = (element, segment, onlyFirst = false) => {
-  const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+var intersectLinearOrFreeDrawWithLineSegment = (element, segment, elementsMap, onlyFirst = false) => {
+  const [lines, curves] = deconstructLinearOrFreeDrawElement(
+    element,
+    elementsMap
+  );
   const intersections = [];
   for (const l of lines) {
     const intersection = lineSegmentIntersectionPoints(l, segment);
@@ -9324,7 +9430,7 @@ var _LinearElementEditor = class _LinearElementEditor {
       }
     };
   }
-  static isSegmentTooShort(element, startPoint, endPoint, index, zoom) {
+  static isSegmentTooShort(element, startPoint, endPoint, index, zoom, elementsMap) {
     if (isElbowArrow(element)) {
       if (index >= 0 && index < element.points.length) {
         return pointDistance(startPoint, endPoint) * zoom.value < _LinearElementEditor.POINT_HANDLE_SIZE / 2;
@@ -9333,7 +9439,10 @@ var _LinearElementEditor = class _LinearElementEditor {
     }
     let distance2 = pointDistance(startPoint, endPoint);
     if (element.points.length > 2 && element.roundness) {
-      const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+      const [lines, curves] = deconstructLinearOrFreeDrawElement(
+        element,
+        elementsMap
+      );
       invariant(
         lines.length === 0 && curves.length > 0,
         "Only linears built out of curves are supported"
@@ -9346,7 +9455,7 @@ var _LinearElementEditor = class _LinearElementEditor {
     }
     return distance2 * zoom.value < _LinearElementEditor.POINT_HANDLE_SIZE * 4;
   }
-  static getSegmentMidPoint(element, index) {
+  static getSegmentMidPoint(element, index, elementsMap) {
     if (isElbowArrow(element)) {
       invariant(
         element.points.length >= index,
@@ -9355,7 +9464,10 @@ var _LinearElementEditor = class _LinearElementEditor {
       const p = pointCenter(element.points[index - 1], element.points[index]);
       return pointFrom(element.x + p[0], element.y + p[1]);
     }
-    const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+    const [lines, curves] = deconstructLinearOrFreeDrawElement(
+      element,
+      elementsMap
+    );
     invariant(
       lines.length === 0 && curves.length > 0 || lines.length > 0 && curves.length === 0,
       "Only linears built out of either segments or curves are supported"
@@ -10055,7 +10167,8 @@ __publicField(_LinearElementEditor, "getEditorMidPoints", (element, elementsMap,
       element.points[index],
       element.points[index + 1],
       index,
-      appState.zoom
+      appState.zoom,
+      elementsMap
     )) {
       midpoints.push(null);
       index++;
@@ -10063,7 +10176,8 @@ __publicField(_LinearElementEditor, "getEditorMidPoints", (element, elementsMap,
     }
     const segmentMidPoint = _LinearElementEditor.getSegmentMidPoint(
       element,
-      index + 1
+      index + 1,
+      elementsMap
     );
     midpoints.push(segmentMidPoint);
     index++;
@@ -10150,7 +10264,8 @@ __publicField(_LinearElementEditor, "getBoundTextElementPosition", (element, bou
     const index = element.points.length / 2 - 1;
     const midSegmentMidpoint = _LinearElementEditor.getSegmentMidPoint(
       element,
-      index + 1
+      index + 1,
+      elementsMap
     );
     x = midSegmentMidpoint[0] - boundTextElement.width / 2;
     y = midSegmentMidpoint[1] - boundTextElement.height / 2;
@@ -10465,7 +10580,7 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX
     nextArrow.endBinding.elementId
   ) : null;
   const endLocalPoint = startIsDraggingOverEndElement ? nextArrow.points[nextArrow.points.length - 1] : endIsDraggingOverStartElement && app.state.bindMode !== "inside" && getFeatureFlag("COMPLEX_BINDINGS") ? nextArrow.points[0] : endBindable ? updateBoundPoint(
-    element,
+    nextArrow,
     "endBinding",
     nextArrow.endBinding,
     endBindable,
@@ -10477,7 +10592,7 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX
     nextArrow.startBinding.elementId
   ) : null;
   const startLocalPoint = endIsDraggingOverStartElement && getFeatureFlag("COMPLEX_BINDINGS") ? nextArrow.points[0] : startIsDraggingOverEndElement && app.state.bindMode !== "inside" && getFeatureFlag("COMPLEX_BINDINGS") ? endLocalPoint : startBindable ? updateBoundPoint(
-    element,
+    nextArrow,
     "startBinding",
     nextArrow.startBinding,
     startBindable,
@@ -11097,6 +11212,10 @@ var getSelectionStateForElements = (targetElements, allElements, appState) => {
     )
   };
 };
+var getActiveTextElement = (selectedElements, appState) => {
+  const activeTextElement = appState.editingTextElement || selectedElements.length === 1 && isTextElement(selectedElements[0]) && selectedElements[0];
+  return activeTextElement || null;
+};
 
 // ../element/src/frame.ts
 var bindElementsToFramesAfterDuplication = (nextElements, origElements, origIdToDuplicateId) => {
@@ -12410,45 +12529,88 @@ var modifyIframeLikeForRoughOptions = (element, isExporting, embedsValidationSta
   }
   return element;
 };
-var getArrowheadShapes = (element, shape, position, arrowhead, generator, options, canvasBackgroundColor, isDarkMode) => {
-  canvasBackgroundColor = canvasBackgroundColor || "transparent";
-  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) => {
+  canvasBackgroundColor = canvasBackgroundColor || "transparent";
+  if (arrowhead === null) {
+    return [];
+  }
   const strokeColor = isDarkMode ? applyDarkModeFilter(element.strokeColor) : element.strokeColor;
+  const backgroundFillColor = isDarkMode ? applyDarkModeFilter(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(
           [
@@ -12457,19 +12619,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(
           [
@@ -12479,42 +12651,106 @@ 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)
+      );
     }
   }
 };
-var generateLinearCollisionShape = (element) => {
+var generateLinearCollisionShape = (element, elementsMap) => {
   const generator = new RoughGenerator();
   const options = {
     seed: element.seed,
@@ -12523,20 +12759,7 @@ var generateLinearCollisionShape = (element) => {
     roughness: 0,
     preserveVertices: true
   };
-  const center = getCenterForBounds(
-    // Need a non-rotated center point
-    element.points.reduce(
-      (acc, point) => {
-        return [
-          Math.min(element.x + point[0], acc[0]),
-          Math.min(element.y + point[1], acc[1]),
-          Math.max(element.x + point[0], acc[2]),
-          Math.max(element.y + point[1], acc[3])
-        ];
-      },
-      [Infinity, Infinity, -Infinity, -Infinity]
-    )
-  );
+  const center = elementCenterPoint(element, elementsMap);
   switch (element.type) {
     case "line":
     case "arrow": {
@@ -13439,6 +13662,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":
@@ -13446,10 +13671,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;
   }
@@ -13464,7 +13693,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;
   }
@@ -13502,21 +13734,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] = pointRotateRads(
-      pointFrom(x2, y2),
+      pointFrom(tx, ty),
       pointFrom(xs, ys),
       degreesToRadians(-angle)
     );
     const [x42, y42] = pointRotateRads(
-      pointFrom(x2, y2),
+      pointFrom(tx, ty),
       pointFrom(xs, ys),
       degreesToRadians(angle)
     );
@@ -13524,12 +13758,12 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
   }
   const [x3, y3] = pointRotateRads(
     pointFrom(xs, ys),
-    pointFrom(x2, y2),
+    pointFrom(tx, ty),
     -angle * Math.PI / 180
   );
   const [x4, y4] = pointRotateRads(
     pointFrom(xs, ys),
-    pointFrom(x2, y2),
+    pointFrom(tx, ty),
     degreesToRadians(angle)
   );
   if (arrowhead === "diamond" || arrowhead === "diamond_outline") {
@@ -13538,21 +13772,21 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
     if (position === "start") {
       const [px, py] = element.points.length > 1 ? element.points[1] : [0, 0];
       [ox, oy] = pointRotateRads(
-        pointFrom(x2 + minSize * 2, y2),
-        pointFrom(x2, y2),
-        Math.atan2(py - y2, px - x2)
+        pointFrom(tx + minSize * 2, ty),
+        pointFrom(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] = pointRotateRads(
-        pointFrom(x2 - minSize * 2, y2),
-        pointFrom(x2, y2),
-        Math.atan2(y2 - py, x2 - px)
+        pointFrom(tx - minSize * 2, ty),
+        pointFrom(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 = rough2.generator();
@@ -21071,6 +21305,32 @@ var maybeHandleArrowPointlikeDrag = ({
   return false;
 };
 
+// ../element/src/arrowheads.ts
+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;
+};
+
 // ../element/src/index.ts
 var getSceneVersion = (elements) => elements.reduce((acc, el) => acc + el.version, 0);
 var hashElementsVersion = (elements) => {
@@ -24942,7 +25202,8 @@ var restoreElement = (element, targetElementsMap, existingElementsMap, opts) =>
       });
     case "line":
     case "draw":
-      const { startArrowhead = null, endArrowhead = null } = element;
+      const startArrowhead = normalizeArrowhead(element.startArrowhead);
+      const endArrowhead = normalizeArrowhead(element.endArrowhead);
       let x = element.x;
       let y = element.y;
       let points = (
@@ -24967,7 +25228,8 @@ var restoreElement = (element, targetElementsMap, existingElementsMap, opts) =>
         ...getSizeFromPoints(points)
       });
     case "arrow": {
-      const { startArrowhead: startArrowhead2 = null, endArrowhead: endArrowhead2 = "arrow" } = element;
+      const startArrowhead2 = normalizeArrowhead(element.startArrowhead);
+      const endArrowhead2 = element.endArrowhead === void 0 ? "arrow" : normalizeArrowhead(element.endArrowhead);
       const x2 = element.x;
       const y2 = element.y;
       const points2 = (
@@ -25764,7 +26026,7 @@ var parseFileContents = async (blob) => {
   let contents;
   if (blob.type === MIME_TYPES.png) {
     try {
-      return await (await import("./data/image-2KXEDCIH.js")).decodePngMetadata(blob);
+      return await (await import("./data/image-WSL7K3G4.js")).decodePngMetadata(blob);
     } catch (error) {
       if (error.message === "INVALID") {
         throw new ImageSceneDataError(
@@ -26287,6 +26549,7 @@ export {
   viewportCoordsToSceneCoords,
   sceneCoordsToViewportCoords,
   getGlobalCSSVariable,
+  isRTL,
   tupleToCoors,
   muteFSAbortError,
   findLastIndex,
@@ -26379,8 +26642,10 @@ export {
   getLineHeightInPx,
   getApproxMinLineHeight,
   setCustomTextMetricsProvider,
+  getLineWidth,
   getTextWidth,
   wrapText,
+  getWrappedTextLines,
   redrawTextBoundingBox,
   handleBindTextResize,
   computeBoundTextPosition,
@@ -26448,6 +26713,7 @@ export {
   getTargetElements,
   makeNextSelectedElementIds,
   getSelectionStateForElements,
+  getActiveTextElement,
   elementOverlapsWithFrame,
   isCursorInFrame,
   groupByFrameLikes,
@@ -26569,6 +26835,7 @@ export {
   showSelectedShapeActions,
   convertToExcalidrawElements,
   maybeHandleArrowPointlikeDrag,
+  getArrowheadForPicker,
   getSceneVersion,
   hashElementsVersion,
   hashString,
@@ -26637,4 +26904,4 @@ export {
   createFile,
   normalizeFile
 };
-//# sourceMappingURL=chunk-K532CM3P.js.map
+//# sourceMappingURL=chunk-JBODKHIT.js.map