浏览代码

feat: add triangle arrowhead (#4024)

Co-authored-by: ad1992 <aakansha1216@gmail.com>
Co-authored-by: dwelle <luzar.david@gmail.com>
vanilla_orig
Jonas Bleyl 4 年前
父节点
当前提交
8d8769ba4e
没有帐户链接到提交者的电子邮件

+ 17
- 0
src/actions/actionProperties.tsx 查看文件

6
   ArrowheadArrowIcon,
6
   ArrowheadArrowIcon,
7
   ArrowheadBarIcon,
7
   ArrowheadBarIcon,
8
   ArrowheadDotIcon,
8
   ArrowheadDotIcon,
9
+  ArrowheadTriangleIcon,
9
   ArrowheadNoneIcon,
10
   ArrowheadNoneIcon,
10
   EdgeRoundIcon,
11
   EdgeRoundIcon,
11
   EdgeSharpIcon,
12
   EdgeSharpIcon,
738
                 icon: <ArrowheadDotIcon theme={appState.theme} flip={!isRTL} />,
739
                 icon: <ArrowheadDotIcon theme={appState.theme} flip={!isRTL} />,
739
                 keyBinding: "r",
740
                 keyBinding: "r",
740
               },
741
               },
742
+              {
743
+                value: "triangle",
744
+                text: t("labels.arrowhead_triangle"),
745
+                icon: (
746
+                  <ArrowheadTriangleIcon theme={appState.theme} flip={!isRTL} />
747
+                ),
748
+                keyBinding: "t",
749
+              },
741
             ]}
750
             ]}
742
             value={getFormValue<Arrowhead | null>(
751
             value={getFormValue<Arrowhead | null>(
743
               elements,
752
               elements,
780
                 keyBinding: "r",
789
                 keyBinding: "r",
781
                 icon: <ArrowheadDotIcon theme={appState.theme} flip={isRTL} />,
790
                 icon: <ArrowheadDotIcon theme={appState.theme} flip={isRTL} />,
782
               },
791
               },
792
+              {
793
+                value: "triangle",
794
+                text: t("labels.arrowhead_triangle"),
795
+                icon: (
796
+                  <ArrowheadTriangleIcon theme={appState.theme} flip={isRTL} />
797
+                ),
798
+                keyBinding: "t",
799
+              },
783
             ]}
800
             ]}
784
             value={getFormValue<Arrowhead | null>(
801
             value={getFormValue<Arrowhead | null>(
785
               elements,
802
               elements,

+ 1
- 1
src/components/IconPicker.scss 查看文件

90
   .picker-content {
90
   .picker-content {
91
     padding: 0.5rem;
91
     padding: 0.5rem;
92
     display: grid;
92
     display: grid;
93
-    grid-auto-flow: column;
93
+    grid-template-columns: repeat(3, auto);
94
     grid-gap: 0.5rem;
94
     grid-gap: 0.5rem;
95
     border-radius: 4px;
95
     border-radius: 4px;
96
     :root[dir="rtl"] & {
96
     :root[dir="rtl"] & {

+ 15
- 0
src/components/icons.tsx 查看文件

752
     ),
752
     ),
753
 );
753
 );
754
 
754
 
755
+export const ArrowheadTriangleIcon = React.memo(
756
+  ({ theme, flip = false }: { theme: Theme; flip?: boolean }) =>
757
+    createIcon(
758
+      <g
759
+        stroke={iconFillColor(theme)}
760
+        fill={iconFillColor(theme)}
761
+        transform={flip ? "translate(40, 0) scale(-1, 1)" : ""}
762
+      >
763
+        <path d="M32 10L6 10" strokeWidth={2} />
764
+        <path d="M27.5 5.5L34.5 10L27.5 14.5L27.5 5.5" />
765
+      </g>,
766
+      { width: 40, height: 20 },
767
+    ),
768
+);
769
+
755
 export const FontSizeSmallIcon = React.memo(({ theme }: { theme: Theme }) =>
770
 export const FontSizeSmallIcon = React.memo(({ theme }: { theme: Theme }) =>
756
   createIcon(
771
   createIcon(
757
     <path
772
     <path

+ 2
- 0
src/element/bounds.ts 查看文件

258
     arrow: 30,
258
     arrow: 30,
259
     bar: 15,
259
     bar: 15,
260
     dot: 15,
260
     dot: 15,
261
+    triangle: 15,
261
   }[arrowhead]; // pixels (will differ for each arrowhead)
262
   }[arrowhead]; // pixels (will differ for each arrowhead)
262
 
263
 
263
   let length = 0;
264
   let length = 0;
294
   const angle = {
295
   const angle = {
295
     arrow: 20,
296
     arrow: 20,
296
     bar: 90,
297
     bar: 90,
298
+    triangle: 25,
297
   }[arrowhead]; // degrees
299
   }[arrowhead]; // degrees
298
 
300
 
299
   // Return points
301
   // Return points

+ 1
- 1
src/element/types.ts 查看文件

129
   gap: number;
129
   gap: number;
130
 };
130
 };
131
 
131
 
132
-export type Arrowhead = "arrow" | "bar" | "dot";
132
+export type Arrowhead = "arrow" | "bar" | "dot" | "triangle";
133
 
133
 
134
 export type ExcalidrawLinearElement = _ExcalidrawElementBase &
134
 export type ExcalidrawLinearElement = _ExcalidrawElementBase &
135
   Readonly<{
135
   Readonly<{

+ 1
- 0
src/locales/en.json 查看文件

39
     "arrowhead_arrow": "Arrow",
39
     "arrowhead_arrow": "Arrow",
40
     "arrowhead_bar": "Bar",
40
     "arrowhead_bar": "Bar",
41
     "arrowhead_dot": "Dot",
41
     "arrowhead_dot": "Dot",
42
+    "arrowhead_triangle": "Triangle",
42
     "fontSize": "Font size",
43
     "fontSize": "Font size",
43
     "fontFamily": "Font family",
44
     "fontFamily": "Font family",
44
     "onlySelected": "Only selected",
45
     "onlySelected": "Only selected",

+ 23
- 0
src/renderer/renderElement.ts 查看文件

485
               ];
485
               ];
486
             }
486
             }
487
 
487
 
488
+            if (arrowhead === "triangle") {
489
+              const [x, y, x2, y2, x3, y3] = arrowheadPoints;
490
+
491
+              // always use solid stroke for triangle arrowhead
492
+              delete options.strokeLineDash;
493
+
494
+              return [
495
+                generator.polygon(
496
+                  [
497
+                    [x, y],
498
+                    [x2, y2],
499
+                    [x3, y3],
500
+                    [x, y],
501
+                  ],
502
+                  {
503
+                    ...options,
504
+                    fill: element.strokeColor,
505
+                    fillStyle: "solid",
506
+                  },
507
+                ),
508
+              ];
509
+            }
510
+
488
             // Arrow arrowheads
511
             // Arrow arrowheads
489
             const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;
512
             const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;
490
 
513
 

正在加载...
取消
保存