hermanwikner · ui-mattlucas · Nov 18, 2024 · Nov 22, 2024 · Nov 22, 2024 · Nov 22, 2024
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,6 @@
 node_modules
 .DS_Store
-dist
-dist-ssr
+# dist
+# dist-ssr
 *.local
 .parcel-cache
diff --git a/README.md b/README.md
@@ -17,9 +17,10 @@ The `Connect` component accepts two props:
 1. `id` – unqiue identifier to use when connecting elements
 2. `connectWith` – an array of objects which configures connections and their appearance. The available configurations are:
    - `id: string` – the element to connect with
-   - `stroke?: "dashed" | "solid"` – the look of the line (`solid` is default)
-   - `edge?: "bezier" | "step"` – the curve of the line (`bezier` is default)
    - `color?: string` – the color of the line (`#000000` is default)
+   - `edge?: "bezier" | "step"` – the curve of the line (`bezier` is default)
+   - `hasArrows?: boolean` – the triangles at the end of the line (`true` is default)
+   - `stroke?: "dashed" | "solid"` – the look of the line (`solid` is default)
 
 #### Example
 

diff --git a/dist/assets/favicon-C49brna2.svg b/dist/assets/favicon-C49brna2.svg
diff --git a/dist/assets/index-3RmCSqdy.js b/dist/assets/index-3RmCSqdy.js
diff --git a/dist/assets/index-BRfpR3uA.css b/dist/assets/index-BRfpR3uA.css
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/assets/favicon-C49brna2.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <script type="module" crossorigin src="/assets/index-3RmCSqdy.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BRfpR3uA.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/lib/dist/cjs/index.js b/lib/dist/cjs/index.js
diff --git a/lib/dist/cjs/index.js.map b/lib/dist/cjs/index.js.map
diff --git a/lib/dist/esm/index.js b/lib/dist/esm/index.js
diff --git a/lib/dist/esm/index.js.map b/lib/dist/esm/index.js.map
diff --git a/lib/dist/types/index.d.ts b/lib/dist/types/index.d.ts
@@ -0,0 +1,28 @@
+import React from "react";
+type Edge = 'bezier' | 'step' | undefined;
+type Stroke = 'solid' | 'dashed' | undefined;
+interface ConnectWithProps {
+    color?: string;
+    edge?: Edge;
+    stroke?: Stroke;
+    id: string;
+    hasArrows?: boolean;
+}
+export interface ConnectElement {
+    connectWith?: ConnectWithProps[];
+    id: string;
+}
+interface ConnectProps extends Omit<ConnectElement, 'element'> {
+    children: React.ReactElement;
+}
+export function Connect(props: ConnectProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+interface ConnectLinesProps {
+    elements: ConnectElement[];
+}
+export function ConnectLines(props: ConnectLinesProps): JSX.Element;
+interface ConnectProviderProps {
+    children: React.ReactNode;
+}
+export function ConnectProvider(props: ConnectProviderProps): JSX.Element;
+
+//# sourceMappingURL=index.d.ts.map
diff --git a/lib/dist/types/index.d.ts.map b/lib/dist/types/index.d.ts.map
diff --git a/lib/lines/ConnectLines.tsx b/lib/lines/ConnectLines.tsx
@@ -23,6 +23,7 @@ type PointsData = (
       edge: Edge
       stroke: Stroke
       d: string
+      hasArrows: boolean
     }
   | undefined
 )[]
@@ -67,7 +68,8 @@ export function ConnectLines(props: ConnectLinesProps) {
        *       rect: DOMRect,
        *       color: string,
        *       edge: string,
-       *       stroke: string
+       *       stroke: string,
+       *       hasArrows: boolean
        *    }[]
        *  }
        */
@@ -207,6 +209,18 @@ export function ConnectLines(props: ConnectLinesProps) {
               <path d="M 0 0 L 10 5 L 0 10 z" fill={c} />
               {/* <circle cx="5" cy="5" r="5" fill={c} /> */}
             </marker>
+            <marker
+              id={`line-${c}`}
+              markerHeight="5"
+              markerUnits="strokeWidth"
+              markerWidth="10"
+              orient="auto"
+              refX="0"
+              refY="5"
+              viewBox="0 0 10 10"
+            >
+              <path d="M 0 5 L 10 5" stroke={c} strokeWidth="2" fill="none" />
+            </marker>
           </defs>
         ))}
 
@@ -217,11 +231,11 @@ export function ConnectLines(props: ConnectLinesProps) {
               d={p?.d}
               fill="none"
               key={p?.d}
-              markerEnd={`url(#triangle-${p?.color})`}
               stroke={p?.color}
               strokeWidth="2"
               strokeDasharray={p?.stroke === 'dashed' ? 4 : 0}
               strokeLinejoin="round"
+              markerEnd={`url(#${p?.hasArrows ? `triangle` : `line`}-${p?.color})`}
             />
           )
         })}

diff --git a/lib/lines/utils/getGroupedConnections.ts b/lib/lines/utils/getGroupedConnections.ts
@@ -27,6 +27,7 @@ export function getGroupedConnections(props: GetGroupedConnectionsProps) {
             color: connectWith?.find((a) => a.id === x.id)?.color || '#000000',
             edge: connectWith?.find((a) => a.id === x.id)?.edge || 'bezier',
             stroke: connectWith?.find((a) => a.id === x.id)?.stroke || 'solid',
+            hasArrows: Boolean(connectWith?.find((a) => a.id === x.id)?.hasArrows),
             // connectionsLen: connectionsLen,
           }
         })

diff --git a/lib/types.ts b/lib/types.ts
@@ -6,6 +6,7 @@ export interface ConnectWithProps {
   edge?: Edge
   stroke?: Stroke
   id: string
+  hasArrows?: boolean
 }
 
 export interface ConnectElement {