feat(editor): ERD arrowheads and diagrams (#10940)

packages/element/src/bounds.ts

@@ -709,6 +709,9 @@ const getFreeDrawElementAbsoluteCoords = (
   return [x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2];
 };
 
+const CARDINALITY_MARKER_SIZE = 20;
+const CROWFOOT_ARROWHEAD_SIZE = 15;
+
 /** @returns number in pixels */
 export const getArrowheadSize = (arrowhead: Arrowhead): number => {
   switch (arrowhead) {
@@ -717,10 +720,14 @@ export const getArrowheadSize = (arrowhead: Arrowhead): number => {
     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;
   }
@@ -743,7 +750,12 @@ export const getArrowheadPoints = (
   shape: Drawable[],
   position: "start" | "end",
   arrowhead: Arrowhead,
+  offsetMultiplier = 0,
 ) => {
+  if (arrowhead === null) {
+    return null;
+  }
+
   if (shape.length < 1) {
     return null;
   }
@@ -824,29 +836,30 @@ export const getArrowheadPoints = (
   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;
+  const tx = x2 - nx * minSize * offsetMultiplier;
+  const ty = y2 - ny * minSize * offsetMultiplier;
+  const xs = tx - nx * minSize;
+  const ys = ty - 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];
+  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"
+  ) {
     // swap (xs, ys) with (x2, y2)
     const [x3, y3] = pointRotateRads(
-      pointFrom(x2, y2),
+      pointFrom(tx, ty),
       pointFrom(xs, ys),
       degreesToRadians(-angle as Degrees),
     );
     const [x4, y4] = pointRotateRads(
-      pointFrom(x2, y2),
+      pointFrom(tx, ty),
       pointFrom(xs, ys),
       degreesToRadians(angle),
     );
@@ -856,12 +869,12 @@ export const getArrowheadPoints = (
   // Return points
   const [x3, y3] = pointRotateRads(
     pointFrom(xs, ys),
-    pointFrom(x2, y2),
+    pointFrom(tx, ty),
     ((-angle * Math.PI) / 180) as Radians,
   );
   const [x4, y4] = pointRotateRads(
     pointFrom(xs, ys),
-    pointFrom(x2, y2),
+    pointFrom(tx, ty),
     degreesToRadians(angle),
   );
 
@@ -874,9 +887,9 @@ export const getArrowheadPoints = (
       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) as Radians,
+        pointFrom(tx + minSize * 2, ty),
+        pointFrom(tx, ty),
+        Math.atan2(py - ty, px - tx) as Radians,
       );
     } else {
       const [px, py] =
@@ -885,16 +898,16 @@ export const getArrowheadPoints = (
           : [0, 0];
 
       [ox, oy] = pointRotateRads(
-        pointFrom(x2 - minSize * 2, y2),
-        pointFrom(x2, y2),
-        Math.atan2(y2 - py, x2 - px) as Radians,
+        pointFrom(tx - minSize * 2, ty),
+        pointFrom(tx, ty),
+        Math.atan2(ty - py, tx - px) as Radians,
       );
     }
 
-    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];
 };
 
 // TODO reuse shape.ts