feat: 支持更多marker

zavven · Jan 8, 2024 · 37e69c7 · 37e69c7
1 parent 22e0db7
commit 37e69c7
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 34 deletions.
diff --git a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx
@@ -7,6 +7,7 @@ import { errorMessages } from '../../contants';
 
 type SymbolProps = Omit<EdgeMarker, 'type'>;
 
+/** 箭头（线型），用于服务关系、访问关系、影响关系 */
 const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
   return (
     <polyline
@@ -22,6 +23,7 @@ const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
   );
 };
 
+/** 箭头（填充），用于指派关系终点、触发关系、流量关系 */
 const ArrowClosedSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
   return (
     <polyline
@@ -37,9 +39,113 @@ const ArrowClosedSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) =>
   );
 };
 
+/** 箭头（空心），用于实现关系、专业化关系 */
+const ArrowEmptySymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
+  return (
+    <polyline
+      style={{
+        stroke: color,
+        fill: '#fff',
+        strokeWidth,
+      }}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      points="-5,-4 0,0 -5,4 -5,-4"
+    />
+  );
+};
+
+/** 箭头（单边），用于关联关系 */
+const ArrowSingleSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
+  return (
+    <polyline
+      style={{
+        stroke: color,
+        strokeWidth,
+      }}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      points="-5,-4 0,0"
+    />
+  );
+};
+
+/** 菱形（空心），用于聚合关系 */
+const DiagonalSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
+  return (
+    <polyline
+      style={{
+        stroke: color,
+        fill: '#fff',
+        strokeWidth,
+      }}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      points="-5,-4 0,0 -5,4 -10, 0"
+    />
+  );
+};
+
+/** 菱形（填充），用于组合关系 */
+const DiagonalFilledSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
+  return (
+    <polyline
+      style={{
+        stroke: color,
+        fill: color,
+        strokeWidth,
+      }}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      points="-5,-4 0,0 -5,4 -10, 0"
+    />
+  );
+};
+
+/** 圆点（填充），用于指派关系起点、交界点（与） */
+const CircleFilledSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
+  return (
+    <circle
+      cx="5"
+      cy="5"
+      r="5"
+      style={{
+        fill: color,
+        stroke: color,
+        strokeWidth,
+      }}
+    />
+  );
+};
+
+/** 圆点（空心），用于交界点（或） */
+const CircleSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
+  return (
+    <circle
+      cx="5"
+      cy="5"
+      r="5"
+      style={{
+        stroke: color,
+        fill: '#fff',
+        strokeWidth,
+      }}
+    />
+  );
+};
+
 export const MarkerSymbols = {
   [MarkerType.Arrow]: ArrowSymbol,
   [MarkerType.ArrowClosed]: ArrowClosedSymbol,
+  [MarkerType.ArrowSingle]: ArrowSingleSymbol,
+  [MarkerType.ArrowEmpty]: ArrowEmptySymbol,
+  [MarkerType.Diagonal]: DiagonalSymbol,
+  [MarkerType.DiagonalFilled]: DiagonalFilledSymbol,
+  [MarkerType.Circle]: CircleSymbol,
+  [MarkerType.CircleFilled]: CircleFilledSymbol,
 };
 
 export function useMarkerSymbol(type: MarkerType) {

diff --git a/packages/core/src/types/edges.ts b/packages/core/src/types/edges.ts
@@ -180,6 +180,20 @@ export type EdgeMarker = {
 export type EdgeMarkerType = string | EdgeMarker;
 
 export enum MarkerType {
-  Arrow = 'arrow',
-  ArrowClosed = 'arrowclosed',
+   /** 箭头（线型），用于服务关系、访问关系、影响关系 */
+   Arrow = 'arrow',
+   /** 箭头（填充），用于指派关系终点、触发关系、流量关系 */
+   ArrowClosed = 'arrowclosed',
+   /** 箭头（单边），用于关联关系 */
+   ArrowSingle = 'arrow-single',
+   /** 箭头（空心），用于实现关系、专业化关系 */
+   ArrowEmpty = 'arrow-empty',
+   /** 菱形（空心），用于聚合关系 */
+   Diagonal = 'diagonal',
+   /** 菱形（填充），用于组合关系 */
+   DiagonalFilled = 'diagonal-filled',
+   /** 圆点（空心），用于交界点（或） */
+   Circle = 'circle',
+   /** 圆点（填充），用于指派关系起点、交界点（与） */
+   CircleFilled = 'circle-filled',
 }