fix arrowhead

synnaxlabs · Sep 16, 2024 · 162ebac · 162ebac
1 parent 5d23416
commit 162ebac
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 22 deletions.
diff --git a/pluto/src/vis/schematic/primitives/Primitives.css b/pluto/src/vis/schematic/primitives/Primitives.css
@@ -177,19 +177,38 @@
 .pluto-arrow {
     display: flex;
     align-items: center;
-
-    & .pluto-arrow__box {
-        padding: 10px;
-        border: 2px solid black;
-        border-right: none; /* Remove right border */
-        border-radius: var(--pluto-border-radius);
-    }
-
-    & .pluto-arrow__head {
-        width: 0;
-        height: 0;
-        border-left: 20px solid black; /* Arrowhead size */
-        border-top: 20px solid transparent;
-        border-bottom: 20px solid transparent;
+    --padding: 10px;
+    border: 2px solid black;
+    border-right: none; /* Remove right border */
+    border-radius: var(--pluto-border-radius);
+    height: calc(var(--text-size) + var(--padding));
+    padding: 0 2rem;
+    border-color: var(--border-color);
+
+    /* add an after pseudo element that will be the arrow */
+    &::before {
+        content: "";
+        display: block;
+        position: absolute;
+        right: 2px;
+        transform: translateX(100%);
+        --internal-bheight: calc((var(--text-size) + var(--padding)) / 2 + 1px);
+        border-top: var(--internal-bheight) solid transparent;
+        border-bottom: var(--internal-bheight) solid transparent;
+        border-left: var(--internal-bheight) solid var(--border-color);
+        border-radius: 3px;
+        top: -3px;
+    }
+    &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        --internal-bheight: calc((var(--text-size) + var(--padding)) / 2);
+        right: 2.5px;
+        transform: translateX(100%);
+        border-top: calc(var(--internal-bheight) - 1px) solid transparent;
+        border-bottom: calc(var(--internal-bheight) - 1px) solid transparent;
+        border-left: calc(var(--internal-bheight) - 1px) solid var(--pluto-gray-l0);
+        top: -1px;
     }
 }
diff --git a/pluto/src/vis/schematic/primitives/Primitives.tsx b/pluto/src/vis/schematic/primitives/Primitives.tsx
@@ -1841,25 +1841,36 @@ export const Compressor = ({
   </Toggle>
 );
 
-export interface ArrowProps extends DivProps, Pick<Text.TextProps, "level"> {
+export interface ArrowProps extends DivProps {
   text?: string;
+  level?: Text.TextProps["level"];
   color?: Color.Crude;
 }
 
 export const Arrow: React.FC<ArrowProps> = ({
   className,
-  text = "arrow",
+  orientation = "left",
+  text = "text",
   color = "black",
-  level,
+  level = "p",
   ...props
 }) => {
   const borderColor = Color.cssString(color);
   return (
-    <Div className={CSS(CSS.B("arrow"), className)} {...props}>
-      <Div style={{ borderColor }} className={CSS.BE("arrow", "box")}>
-        <Text.Text level={level}>{text}</Text.Text>
-      </Div>
-      <Div className={CSS.BE("arrow", "head")} style={{ borderColor }} />
+    <Div
+      style={{
+        // @ts-expect-error CSS variables
+        "--border-color": borderColor,
+        "--text-size": `var(--pluto-${level}-line-height)`,
+      }}
+      className={CSS(className, CSS.B("arrow"), CSS.BM("arrow", level))}
+      {...props}
+    >
+      <HandleBoundary orientation={orientation}>
+        <Handle location="left" orientation={orientation} left={0} top={50} id="1" />
+        <Handle location="right" orientation={orientation} left={100} top={50} id="2" />
+      </HandleBoundary>
+      <Text.Text level={level}>{text}</Text.Text>
     </Div>
   );
 };