From 8d8769ba4ec8f002bcc8061872f1f5a712898984 Mon Sep 17 00:00:00 2001
From: Jonas Bleyl <jonas.bleyl@gmail.com>
Date: Wed, 27 Oct 2021 18:27:39 +0100
Subject: [PATCH] feat: add triangle arrowhead (#4024)

Co-authored-by: ad1992 <aakansha1216@gmail.com>
Co-authored-by: dwelle <luzar.david@gmail.com>
---
 src/actions/actionProperties.tsx | 17 +++++++++++++++++
 src/components/IconPicker.scss   |  2 +-
 src/components/icons.tsx         | 15 +++++++++++++++
 src/element/bounds.ts            |  2 ++
 src/element/types.ts             |  2 +-
 src/locales/en.json              |  1 +
 src/renderer/renderElement.ts    | 23 +++++++++++++++++++++++
 7 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/src/actions/actionProperties.tsx b/src/actions/actionProperties.tsx
index 667a68fcb..cc3bbbdba 100644
--- a/src/actions/actionProperties.tsx
+++ b/src/actions/actionProperties.tsx
@@ -6,6 +6,7 @@ import {
   ArrowheadArrowIcon,
   ArrowheadBarIcon,
   ArrowheadDotIcon,
+  ArrowheadTriangleIcon,
   ArrowheadNoneIcon,
   EdgeRoundIcon,
   EdgeSharpIcon,
@@ -738,6 +739,14 @@ export const actionChangeArrowhead = register({
                 icon: <ArrowheadDotIcon theme={appState.theme} flip={!isRTL} />,
                 keyBinding: "r",
               },
+              {
+                value: "triangle",
+                text: t("labels.arrowhead_triangle"),
+                icon: (
+                  <ArrowheadTriangleIcon theme={appState.theme} flip={!isRTL} />
+                ),
+                keyBinding: "t",
+              },
             ]}
             value={getFormValue<Arrowhead | null>(
               elements,
@@ -780,6 +789,14 @@ export const actionChangeArrowhead = register({
                 keyBinding: "r",
                 icon: <ArrowheadDotIcon theme={appState.theme} flip={isRTL} />,
               },
+              {
+                value: "triangle",
+                text: t("labels.arrowhead_triangle"),
+                icon: (
+                  <ArrowheadTriangleIcon theme={appState.theme} flip={isRTL} />
+                ),
+                keyBinding: "t",
+              },
             ]}
             value={getFormValue<Arrowhead | null>(
               elements,
diff --git a/src/components/IconPicker.scss b/src/components/IconPicker.scss
index 0bf0b1bc3..c02416600 100644
--- a/src/components/IconPicker.scss
+++ b/src/components/IconPicker.scss
@@ -90,7 +90,7 @@
   .picker-content {
     padding: 0.5rem;
     display: grid;
-    grid-auto-flow: column;
+    grid-template-columns: repeat(3, auto);
     grid-gap: 0.5rem;
     border-radius: 4px;
     :root[dir="rtl"] & {
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index fb1f5772d..3f954c90e 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -752,6 +752,21 @@ export const ArrowheadBarIcon = React.memo(
     ),
 );
 
+export const ArrowheadTriangleIcon = React.memo(
+  ({ theme, flip = false }: { theme: Theme; flip?: boolean }) =>
+    createIcon(
+      <g
+        stroke={iconFillColor(theme)}
+        fill={iconFillColor(theme)}
+        transform={flip ? "translate(40, 0) scale(-1, 1)" : ""}
+      >
+        <path d="M32 10L6 10" strokeWidth={2} />
+        <path d="M27.5 5.5L34.5 10L27.5 14.5L27.5 5.5" />
+      </g>,
+      { width: 40, height: 20 },
+    ),
+);
+
 export const FontSizeSmallIcon = React.memo(({ theme }: { theme: Theme }) =>
   createIcon(
     <path
diff --git a/src/element/bounds.ts b/src/element/bounds.ts
index 417a4d4ad..d39828a66 100644
--- a/src/element/bounds.ts
+++ b/src/element/bounds.ts
@@ -258,6 +258,7 @@ export const getArrowheadPoints = (
     arrow: 30,
     bar: 15,
     dot: 15,
+    triangle: 15,
   }[arrowhead]; // pixels (will differ for each arrowhead)
 
   let length = 0;
@@ -294,6 +295,7 @@ export const getArrowheadPoints = (
   const angle = {
     arrow: 20,
     bar: 90,
+    triangle: 25,
   }[arrowhead]; // degrees
 
   // Return points
diff --git a/src/element/types.ts b/src/element/types.ts
index 54aa98304..861602007 100644
--- a/src/element/types.ts
+++ b/src/element/types.ts
@@ -129,7 +129,7 @@ export type PointBinding = {
   gap: number;
 };
 
-export type Arrowhead = "arrow" | "bar" | "dot";
+export type Arrowhead = "arrow" | "bar" | "dot" | "triangle";
 
 export type ExcalidrawLinearElement = _ExcalidrawElementBase &
   Readonly<{
diff --git a/src/locales/en.json b/src/locales/en.json
index f35024e07..42f99efcc 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -39,6 +39,7 @@
     "arrowhead_arrow": "Arrow",
     "arrowhead_bar": "Bar",
     "arrowhead_dot": "Dot",
+    "arrowhead_triangle": "Triangle",
     "fontSize": "Font size",
     "fontFamily": "Font family",
     "onlySelected": "Only selected",
diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts
index b331740c5..3e95b9664 100644
--- a/src/renderer/renderElement.ts
+++ b/src/renderer/renderElement.ts
@@ -485,6 +485,29 @@ const generateElementShape = (
               ];
             }
 
+            if (arrowhead === "triangle") {
+              const [x, y, x2, y2, x3, y3] = arrowheadPoints;
+
+              // always use solid stroke for triangle arrowhead
+              delete options.strokeLineDash;
+
+              return [
+                generator.polygon(
+                  [
+                    [x, y],
+                    [x2, y2],
+                    [x3, y3],
+                    [x, y],
+                  ],
+                  {
+                    ...options,
+                    fill: element.strokeColor,
+                    fillStyle: "solid",
+                  },
+                ),
+              ];
+            }
+
             // Arrow arrowheads
             const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;