├── example
    ├── src
    │   ├── react-app-env.d.ts
    │   ├── setupTests.ts
    │   ├── Connector
    │   │   ├── index.ts
    │   │   ├── Arrow.tsx
    │   │   ├── SConnector.tsx
    │   │   ├── LineConnector.tsx
    │   │   ├── SvgConnector.tsx
    │   │   └── NarrowSConnector.tsx
    │   ├── App.test.tsx
    │   ├── index.css
    │   ├── reportWebVitals.ts
    │   ├── index.tsx
    │   ├── App.css
    │   ├── logo.svg
    │   └── App.tsx
    ├── public
    │   ├── robots.txt
    │   ├── favicon.ico
    │   ├── logo192.png
    │   ├── logo512.png
    │   ├── manifest.json
    │   └── index.html
    ├── .gitignore
    ├── tsconfig.json
    └── package.json
├── src
    ├── index.ts
    ├── Arrow.tsx
    ├── SConnector.tsx
    ├── LineConnector.tsx
    ├── SvgConnector.tsx
    └── NarrowSConnector.tsx
├── .gitignore
├── tsconfig.json
├── LICENSE
├── package.json
└── README.md


/example/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/example/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/example/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tudatn/react-svg-connector/HEAD/example/public/favicon.ico


--------------------------------------------------------------------------------
/example/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tudatn/react-svg-connector/HEAD/example/public/logo192.png


--------------------------------------------------------------------------------
/example/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tudatn/react-svg-connector/HEAD/example/public/logo512.png


--------------------------------------------------------------------------------
/example/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import Connector from "./SvgConnector";
2 | import SConnector from "./SConnector";
3 | import LineConnector from "./LineConnector";
4 | import NarrowSConnector from "./NarrowSConnector";
5 | 
6 | export { Connector as default, SConnector, LineConnector, NarrowSConnector };
7 | 


--------------------------------------------------------------------------------
/example/src/Connector/index.ts:
--------------------------------------------------------------------------------
1 | import Connector from "./SvgConnector";
2 | import SConnector from "./SConnector";
3 | import LineConnector from "./LineConnector";
4 | import NarrowSConnector from "./NarrowSConnector";
5 | 
6 | export { Connector as default, SConnector, LineConnector, NarrowSConnector };
7 | 


--------------------------------------------------------------------------------
/example/src/App.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render, screen } from '@testing-library/react';
 3 | import App from './App';
 4 | 
 5 | test('renders learn react link', () => {
 6 |   render(<App />);
 7 |   const linkElement = screen.getByText(/learn react/i);
 8 |   expect(linkElement).toBeInTheDocument();
 9 | });
10 | 


--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/example/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 
25 | /lib
26 | 
27 | yarn.lock


--------------------------------------------------------------------------------
/example/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
 1 | import { ReportHandler } from 'web-vitals';
 2 | 
 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
 4 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 5 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 6 |       getCLS(onPerfEntry);
 7 |       getFID(onPerfEntry);
 8 |       getFCP(onPerfEntry);
 9 |       getLCP(onPerfEntry);
10 |       getTTFB(onPerfEntry);
11 |     });
12 |   }
13 | };
14 | 
15 | export default reportWebVitals;
16 | 


--------------------------------------------------------------------------------
/example/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | 
 7 | ReactDOM.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>,
11 |   document.getElementById('root')
12 | );
13 | 
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 | 


--------------------------------------------------------------------------------
/example/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/example/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "noFallthroughCasesInSwitch": true,
16 |     "module": "esnext",
17 |     "moduleResolution": "node",
18 |     "resolveJsonModule": true,
19 |     "isolatedModules": true,
20 |     "noEmit": true,
21 |     "jsx": "react-jsx"
22 |   },
23 |   "include": [
24 |     "src"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/example/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["es2015", "dom"],
 5 |     "outDir": "lib",
 6 |     "jsx": "react",
 7 |     "module": "commonjs",
 8 |     "declaration": true,
 9 |     "declarationMap": true,
10 |     "strict": true,
11 |     "noImplicitAny": false,
12 |     "strictNullChecks": true,
13 |     "strictFunctionTypes": true,
14 |     "strictPropertyInitialization": true,
15 |     "noImplicitThis": true,
16 |     "alwaysStrict": true,
17 |     "noUnusedLocals": true,
18 |     "noUnusedParameters": true,
19 |     "noImplicitReturns": true,
20 |     "noFallthroughCasesInSwitch": true,
21 |     "moduleResolution": "node",
22 |     "resolveJsonModule": true,
23 |     "esModuleInterop": true,
24 |     "allowSyntheticDefaultImports": true
25 |   },
26 |   "include": ["src"],
27 |   "exclude": [
28 |     "node_modules",
29 |   ],
30 |   "files": ["./src/index.ts"]
31 | }
32 | 


--------------------------------------------------------------------------------
/src/Arrow.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Point } from "./SvgConnector";
 3 | 
 4 | export interface ArrowProps {
 5 |   tip: Point;
 6 |   size: number;
 7 |   stroke?: string;
 8 |   rotateAngle?: number;
 9 | }
10 | 
11 | /**
12 |  * Return an arrow path for svg
13 |  * @param tip arrow tip point
14 |  * @param size arrow size
15 |  * @param stroke arrow filled color
16 |  * @param rotateAngle arrow rotation angle, default = 0
17 |  */
18 | 
19 | export default function Arrow(props: ArrowProps) {
20 |   const path = `M
21 |                   ${props.tip.x} ${props.tip.y}
22 |                   l ${-props.size} ${-props.size / 2}
23 |                   v ${props.size}
24 |                   z
25 |                 `;
26 |   return (
27 |     <path
28 |       d={path}
29 |       fill={props.stroke}
30 |       stroke={props.stroke}
31 |       transform={`rotate(${props.rotateAngle || 0} ${props.tip.x} ${
32 |         props.tip.y
33 |       })`}
34 |     />
35 |   );
36 | }
37 | 


--------------------------------------------------------------------------------
/example/src/Connector/Arrow.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Point } from "./SvgConnector";
 3 | 
 4 | export interface ArrowProps {
 5 |   tip: Point;
 6 |   size: number;
 7 |   stroke?: string;
 8 |   rotateAngle?: number;
 9 | }
10 | 
11 | /**
12 |  * Return an arrow path for svg
13 |  * @param tip arrow tip point
14 |  * @param size arrow size
15 |  * @param stroke arrow filled color
16 |  * @param rotateAngle arrow rotation angle, default = 0
17 |  */
18 | 
19 | export default function Arrow(props: ArrowProps) {
20 |   const path = `M
21 |                   ${props.tip.x} ${props.tip.y}
22 |                   l ${-props.size} ${-props.size / 2}
23 |                   v ${props.size}
24 |                   z
25 |                 `;
26 |   return (
27 |     <path
28 |       d={path}
29 |       fill={props.stroke}
30 |       stroke={props.stroke}
31 |       transform={`rotate(${props.rotateAngle || 0} ${props.tip.x} ${
32 |         props.tip.y
33 |       })`}
34 |     />
35 |   );
36 | }
37 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Tu Dat Nguyen
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-svg-connector",
 3 |   "version": "1.0.9",
 4 |   "description": "React component to draw svg connectors between any React components",
 5 |   "main": "lib/index.js",
 6 |   "directories": {
 7 |     "lib": "lib"
 8 |   },
 9 |   "files": [
10 |     "lib"
11 |   ],
12 |   "dependencies": {
13 |     "react": ">=16.8.0",
14 |     "react-dom": ">=16.8.0"
15 |   },
16 |   "devDependencies": {
17 |     "@types/node": "^12.0.0",
18 |     "@types/react": "^17.0.0",
19 |     "@types/react-dom": "^17.0.0",
20 |     "typescript": "^4.1.2"
21 |   },
22 |   "scripts": {
23 |     "clean": "rm -rf ./lib",
24 |     "prebuild": "yarn clean",
25 |     "build": "tsc --build \"./tsconfig.json\""
26 |   },
27 |   "repository": {
28 |     "type": "git",
29 |     "url": "git+https://github.com/tudatn/react-svg-connector.git"
30 |   },
31 |   "keywords": [
32 |     "React",
33 |     "svg",
34 |     "connector",
35 |     "connection",
36 |     "diagram"
37 |   ],
38 |   "author": "Tu Dat Nguyen",
39 |   "license": "MIT",
40 |   "bugs": {
41 |     "url": "https://github.com/tudatn/react-svg-connector/issues"
42 |   },
43 |   "homepage": "https://github.com/tudatn/react-svg-connector#readme"
44 | }
45 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-svg-connector",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.11.4",
 7 |     "@testing-library/react": "^11.1.0",
 8 |     "@testing-library/user-event": "^12.1.10",
 9 |     "@types/jest": "^26.0.15",
10 |     "@types/node": "^12.0.0",
11 |     "@types/react": "^17.0.0",
12 |     "@types/react-dom": "^17.0.0",
13 |     "react": "^17.0.1",
14 |     "react-dom": "^17.0.1",
15 |     "react-draggable": "^4.4.3",
16 |     "react-scripts": "4.0.2",
17 |     "react-svg-connector": "^1.0.9",
18 |     "styled-components": "^5.2.1",
19 |     "typescript": "^4.1.2",
20 |     "web-vitals": "^1.0.1"
21 |   },
22 |   "scripts": {
23 |     "start": "react-scripts start",
24 |     "build": "react-scripts build",
25 |     "test": "react-scripts test",
26 |     "eject": "react-scripts eject"
27 |   },
28 |   "eslintConfig": {
29 |     "extends": [
30 |       "react-app",
31 |       "react-app/jest"
32 |     ]
33 |   },
34 |   "browserslist": {
35 |     "production": [
36 |       ">0.2%",
37 |       "not dead",
38 |       "not op_mini all"
39 |     ],
40 |     "development": [
41 |       "last 1 chrome version",
42 |       "last 1 firefox version",
43 |       "last 1 safari version"
44 |     ]
45 |   },
46 |   "devDependencies": {
47 |     "@types/styled-components": "^5.1.7"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/SConnector.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { ShapeConnectorProps } from "./SvgConnector";
 3 | 
 4 | interface SConectorProps extends ShapeConnectorProps {}
 5 | 
 6 | /**
 7 |  * S shape svg connector
 8 |  * @param startPoint
 9 |  * @param endPoint
10 |  * @param stroke
11 |  * @param strokeWidth
12 |  * @param startArrow
13 |  * @param endArrow
14 |  * @param arrowSize
15 |  */
16 | export default function SConnector(props: SConectorProps) {
17 |   const {
18 |     direction,
19 |     stroke,
20 |     strokeWidth,
21 |     startArrow,
22 |     endArrow,
23 |     startPoint,
24 |     endPoint,
25 |     arrowSize,
26 |     ...rest
27 |   } = props;
28 | 
29 |   const distanceX = props.endPoint.x - props.startPoint.x;
30 |   const distanceY = props.endPoint.y - props.startPoint.y;
31 |   const grids = 4;
32 |   const stepX = distanceX / grids;
33 |   const stepY = distanceY / grids;
34 | 
35 |   return (
36 |     <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
37 |       <path
38 |         {...rest}
39 |         d={`M
40 |             ${props.startPoint.x} ${props.startPoint.y} 
41 |             q 
42 |             ${(stepX * grids) / 2} 0 
43 |             ${(stepX * grids) / 2} ${(stepY * grids) / 2}
44 |             q 
45 |             0 ${(stepY * grids) / 2} 
46 |             ${(stepX * grids) / 2} ${(stepY * grids) / 2}
47 |         `}
48 |         stroke={props.stroke || "orange"}
49 |         strokeWidth={props.strokeWidth || 3}
50 |         fill="transparent"
51 |       />
52 |     </svg>
53 |   );
54 | }
55 | 


--------------------------------------------------------------------------------
/example/src/Connector/SConnector.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { ShapeConnectorProps } from "./SvgConnector";
 3 | 
 4 | interface SConectorProps extends ShapeConnectorProps {}
 5 | 
 6 | /**
 7 |  * S shape svg connector
 8 |  * @param startPoint
 9 |  * @param endPoint
10 |  * @param stroke
11 |  * @param strokeWidth
12 |  * @param startArrow
13 |  * @param endArrow
14 |  * @param arrowSize
15 |  */
16 | export default function SConnector(props: SConectorProps) {
17 |   const {
18 |     direction,
19 |     stroke,
20 |     strokeWidth,
21 |     startArrow,
22 |     endArrow,
23 |     startPoint,
24 |     endPoint,
25 |     arrowSize,
26 |     ...rest
27 |   } = props;
28 | 
29 |   const distanceX = props.endPoint.x - props.startPoint.x;
30 |   const distanceY = props.endPoint.y - props.startPoint.y;
31 |   const grids = 4;
32 |   const stepX = distanceX / grids;
33 |   const stepY = distanceY / grids;
34 | 
35 |   return (
36 |     <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
37 |       <path
38 |         {...rest}
39 |         d={`M
40 |             ${props.startPoint.x} ${props.startPoint.y} 
41 |             q 
42 |             ${(stepX * grids) / 2} 0 
43 |             ${(stepX * grids) / 2} ${(stepY * grids) / 2}
44 |             q 
45 |             0 ${(stepY * grids) / 2} 
46 |             ${(stepX * grids) / 2} ${(stepY * grids) / 2}
47 |         `}
48 |         stroke={props.stroke || "orange"}
49 |         strokeWidth={props.strokeWidth || 3}
50 |         fill="transparent"
51 |       />
52 |     </svg>
53 |   );
54 | }
55 | 


--------------------------------------------------------------------------------
/example/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/LineConnector.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Arrow from "./Arrow";
 3 | import { ShapeConnectorProps } from "./SvgConnector";
 4 | 
 5 | interface LineConnectorProps extends ShapeConnectorProps {}
 6 | 
 7 | /**
 8 |  * Line svg connector
 9 |  * @param startPoint
10 |  * @param endPoint
11 |  * @param stroke
12 |  * @param strokeWidth
13 |  * @param startArrow
14 |  * @param endArrow
15 |  * @param arrowSize
16 |  */
17 | 
18 | export default function LineConnector(props: LineConnectorProps) {
19 |   const {
20 |     direction,
21 |     stroke,
22 |     strokeWidth,
23 |     startArrow,
24 |     endArrow,
25 |     startPoint,
26 |     endPoint,
27 |     arrowSize,
28 |     ...rest
29 |   } = props;
30 | 
31 |   const deltaX = props.endPoint.x - props.startPoint.x;
32 |   const deltaY = props.endPoint.y - props.startPoint.y;
33 | 
34 |   const alpha = Math.atan(deltaY / deltaX);
35 | 
36 |   let rotateAngle = (alpha * 180) / Math.PI;
37 | 
38 |   if (deltaX < 0) {
39 |     rotateAngle = rotateAngle + 180;
40 |   }
41 | 
42 |   const cArrowSize =
43 |     props.arrowSize || (props.strokeWidth ? props.strokeWidth * 3 : 10);
44 | 
45 |   return (
46 |     <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
47 |       <path
48 |         {...rest}
49 |         d={`M
50 |             ${props.startPoint.x} ${props.startPoint.y}
51 |             L
52 |             ${props.endPoint.x} ${props.endPoint.y}
53 |           `}
54 |         stroke={props.stroke || "orange"}
55 |         strokeWidth={props.strokeWidth || 3}
56 |       />
57 |       {props.endArrow && (
58 |         <Arrow
59 |           tip={props.endPoint}
60 |           size={cArrowSize}
61 |           rotateAngle={rotateAngle}
62 |           stroke={props.stroke || "orange"}
63 |         />
64 |       )}
65 |       {props.startArrow && (
66 |         <Arrow
67 |           tip={props.startPoint}
68 |           size={cArrowSize}
69 |           rotateAngle={rotateAngle + 180}
70 |           stroke={props.stroke || "orange"}
71 |         />
72 |       )}
73 |     </svg>
74 |   );
75 | }
76 | 


--------------------------------------------------------------------------------
/example/src/Connector/LineConnector.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Arrow from "./Arrow";
 3 | import { ShapeConnectorProps } from "./SvgConnector";
 4 | 
 5 | interface LineConnectorProps extends ShapeConnectorProps {}
 6 | 
 7 | /**
 8 |  * Line svg connector
 9 |  * @param startPoint
10 |  * @param endPoint
11 |  * @param stroke
12 |  * @param strokeWidth
13 |  * @param startArrow
14 |  * @param endArrow
15 |  * @param arrowSize
16 |  */
17 | 
18 | export default function LineConnector(props: LineConnectorProps) {
19 |   const {
20 |     direction,
21 |     stroke,
22 |     strokeWidth,
23 |     startArrow,
24 |     endArrow,
25 |     startPoint,
26 |     endPoint,
27 |     arrowSize,
28 |     ...rest
29 |   } = props;
30 | 
31 |   const deltaX = props.endPoint.x - props.startPoint.x;
32 |   const deltaY = props.endPoint.y - props.startPoint.y;
33 | 
34 |   const alpha = Math.atan(deltaY / deltaX);
35 | 
36 |   let rotateAngle = (alpha * 180) / Math.PI;
37 | 
38 |   if (deltaX < 0) {
39 |     rotateAngle = rotateAngle + 180;
40 |   }
41 | 
42 |   const cArrowSize =
43 |     props.arrowSize || (props.strokeWidth ? props.strokeWidth * 3 : 10);
44 | 
45 |   return (
46 |     <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
47 |       <path
48 |         {...rest}
49 |         d={`M
50 |             ${props.startPoint.x} ${props.startPoint.y}
51 |             L
52 |             ${props.endPoint.x} ${props.endPoint.y}
53 |           `}
54 |         stroke={props.stroke || "orange"}
55 |         strokeWidth={props.strokeWidth || 3}
56 |       />
57 |       {props.endArrow && (
58 |         <Arrow
59 |           tip={props.endPoint}
60 |           size={cArrowSize}
61 |           rotateAngle={rotateAngle}
62 |           stroke={props.stroke || "orange"}
63 |         />
64 |       )}
65 |       {props.startArrow && (
66 |         <Arrow
67 |           tip={props.startPoint}
68 |           size={cArrowSize}
69 |           rotateAngle={rotateAngle + 180}
70 |           stroke={props.stroke || "orange"}
71 |         />
72 |       )}
73 |     </svg>
74 |   );
75 | }
76 | 


--------------------------------------------------------------------------------
/example/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-svg-connector
  2 | 
  3 | React component to draw svg connectors to connect any React components
  4 | 
  5 | ## Installation
  6 | ```
  7 | npm install react-svg-connector
  8 | 
  9 | or
 10 | 
 11 | yarn add react-svg-connector
 12 | ```
 13 | 
 14 | ## Usage
 15 | 
 16 | Component props:
 17 | - el1: first React component
 18 | - el2: second React component
 19 | - shape (`optional`): `'s' | 'narrow-s' | 'line'`
 20 | - direction (`optional`): `'r2l' | 'l2l' | 'r2r' | 'l2r' |'b2t' | 'b2b' | 't2b' | 't2t'`
 21 | - roundCorner (`optional`): `true | false`
 22 | - grid (`optional`): number of grid, used to calculate `step = distanceX(Y) / grid`
 23 | - minStep (`optional`): min value for the `step`
 24 | - stem(`optional`): min distance from the start point
 25 | - endArrow(`optional`): `true | false`
 26 | - startArrow(`optional`): `true | false`
 27 | - arrowSize(`optional`): arrow size
 28 | 
 29 | All svg path props are available. Please run a full example to see all available props.
 30 | 
 31 | `S shape`
 32 | 
 33 | <img src="https://user-images.githubusercontent.com/26643781/109436187-40f83200-79d3-11eb-9d5d-93ed82d40791.gif" width="400">
 34 | 
 35 | 
 36 | `narrow-s shape`
 37 | 
 38 | <img src="https://user-images.githubusercontent.com/26643781/109394767-80dced80-78dd-11eb-8bd5-ff0337b79ebe.png" width="400">
 39 | 
 40 | <img src="https://user-images.githubusercontent.com/26643781/109394769-833f4780-78dd-11eb-9555-de5c1bb039c8.png" width="400">
 41 | 
 42 | 
 43 | <img src="https://user-images.githubusercontent.com/26643781/109436188-42c1f580-79d3-11eb-9a62-f85fcc2b2f6c.gif" width="600">
 44 | 
 45 | ```ts
 46 | import Connector from 'react-svg-connector';
 47 | 
 48 | // if you want to use core connector components
 49 | import { SConnector, LineConnector, NarrowSConnector } from 'react-svg-connector';
 50 | 
 51 | const Wrapper = styled.div`
 52 |   position: relative;
 53 |   height: 100vh;
 54 |   overflow: auto;
 55 | `;
 56 | 
 57 | const Box = styled.div`
 58 |   width: 150px;
 59 |   height: 50px;
 60 |   cursor: pointer;
 61 | `;
 62 | 
 63 | const Box1 = styled(Box)`
 64 |   background-color: green;
 65 |   position: absolute;
 66 |   top: 200px;
 67 |   left: 200px;
 68 | `;
 69 | 
 70 | const Box2 = styled(Box)`
 71 |   background-color: red;
 72 |   position: absolute;
 73 |   top: 400px;
 74 |   left: 500px;
 75 | `;
 76 | 
 77 | function App() {
 78 |   const ref1 = useRef<any>();
 79 |   const ref2 = useRef<any>();
 80 | 
 81 |   const [draw, redraw] = useState(0);
 82 | 
 83 |   useEffect(() => {
 84 |     redraw(Math.random());
 85 |   }, [ref1, ref2]);
 86 | 
 87 |   return (
 88 |     <Wrapper>
 89 |       <Connector
 90 |         el1={ref1.current}
 91 |         el2={ref2.current}
 92 |         shape="narrow-s"
 93 |         direction="r2l" // "l2l", "r2r", "l2l"
 94 |         roundCorner={true}
 95 |         endArrow={true}
 96 |       />
 97 |       <Box1 ref={ref1} />
 98 |       <Box2 ref={ref2} />
 99 |     </Wrapper>
100 |   );
101 | }


--------------------------------------------------------------------------------
/src/SvgConnector.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useRef } from "react";
  2 | import NarrowSConnector from "./NarrowSConnector";
  3 | import LineConnector from "./LineConnector";
  4 | import SConnector from "./SConnector";
  5 | 
  6 | export type ShapeDirection =
  7 |   | "r2l"
  8 |   | "l2r"
  9 |   | "l2l"
 10 |   | "r2r"
 11 |   | "b2t"
 12 |   | "b2b"
 13 |   | "t2t"
 14 |   | "t2b";
 15 | 
 16 | export interface Props extends React.SVGProps<SVGPathElement> {
 17 |   el1: HTMLDivElement;
 18 |   el2: HTMLDivElement;
 19 |   shape: "s" | "line" | "narrow-s";
 20 |   direction?: ShapeDirection;
 21 |   grids?: number;
 22 |   stem?: number;
 23 |   roundCorner?: boolean;
 24 |   stroke?: string;
 25 |   strokeWidth?: number;
 26 |   minStep?: number;
 27 |   startArrow?: boolean;
 28 |   endArrow?: boolean;
 29 |   arrowSize?: number;
 30 | }
 31 | 
 32 | export interface Point {
 33 |   x: number;
 34 |   y: number;
 35 | }
 36 | 
 37 | export interface ShapeConnectorProps extends React.SVGProps<SVGPathElement> {
 38 |   startPoint: Point;
 39 |   endPoint: Point;
 40 |   stroke?: string;
 41 |   strokeWidth?: number;
 42 |   startArrow?: boolean;
 43 |   endArrow?: boolean;
 44 |   arrowSize?: number;
 45 | }
 46 | 
 47 | /**
 48 |  * Connect elements with svg paths
 49 |  * @param el1 first element (HTML or React component)
 50 |  * @param el2 second element (HTML or React component)
 51 |  * @param shape s | line | narrow-s
 52 |  * @param direction (right, left, top, bottom) --> (right, left, top, bottom) if shape is narrow-s
 53 |  * @param grid number of columns in X/Y axis from the start point to the end point
 54 |  * @param stem min distance from the start point to the first transition
 55 |  * @param minStep radius of the transition curve, default is min of (deltaX/grid, deltaY/grid)
 56 |  * @param roundCorner true to have a curve transition
 57 |  * @param stroke color of the svg path
 58 |  * @param strokeWidth width of the svg path
 59 |  * @param startArrow true to have an arrow at the start point (not applicable for s shape)
 60 |  * @param endArrow true to have an arrow at the end point (not applicable for s shape)
 61 |  * @param arrowSize size of arrows
 62 |  */
 63 | 
 64 | export default function SvgConnector(props: Props) {
 65 |   const wrapperRef = useRef<HTMLDivElement | null>(null);
 66 | 
 67 |   function getCoords(el: HTMLElement) {
 68 |     const parentEl = el.offsetParent;
 69 |     const box = el.getBoundingClientRect();
 70 | 
 71 |     return {
 72 |       top: box.top + window.pageYOffset + (parentEl?.scrollTop || 0),
 73 |       right: box.right + window.pageXOffset + (parentEl?.scrollLeft || 0),
 74 |       bottom: box.bottom + window.pageYOffset + (parentEl?.scrollTop || 0),
 75 |       left: box.left + window.pageXOffset + (parentEl?.scrollLeft || 0),
 76 |     };
 77 |   }
 78 | 
 79 |   function getNewCoordinates() {
 80 |     const el1Coords = getCoords(props.el1);
 81 |     const el2Coords = getCoords(props.el2);
 82 | 
 83 |     const el1Dimesion = {
 84 |       width: el1Coords.right - el1Coords.left,
 85 |       height: el1Coords.bottom - el1Coords.top,
 86 |     };
 87 | 
 88 |     const el2Dimesion = {
 89 |       width: el2Coords.right - el2Coords.left,
 90 |       height: el2Coords.bottom - el2Coords.top,
 91 |     };
 92 | 
 93 |     let start = {
 94 |       x: el1Coords.right,
 95 |       y: el1Coords.top + el1Dimesion.height / 2,
 96 |     };
 97 | 
 98 |     let end = {
 99 |       x: el2Coords.left,
100 |       y: el2Coords.top + el2Dimesion.height / 2,
101 |     };
102 | 
103 |     switch (props.direction) {
104 |       case "l2l":
105 |         start.x = el1Coords.left;
106 |         break;
107 |       case "l2r":
108 |         start.x = el1Coords.left;
109 |         end.x = el2Coords.right;
110 |         break;
111 |       case "r2r":
112 |         start.x = el1Coords.right;
113 |         end.x = el2Coords.right;
114 |         break;
115 |       case "b2t":
116 |         start = {
117 |           x: el1Coords.left + el1Dimesion.width / 2,
118 | 
119 |           y: el1Coords.bottom,
120 |         };
121 |         end = {
122 |           x: el2Coords.left + el2Dimesion.width / 2,
123 |           y: el2Coords.top,
124 |         };
125 |         break;
126 |       case "b2b":
127 |         start = {
128 |           x: el1Coords.left + el1Dimesion.width / 2,
129 |           y: el1Coords.bottom,
130 |         };
131 |         end = {
132 |           x: el2Coords.left + el2Dimesion.width / 2,
133 |           y: el2Coords.bottom,
134 |         };
135 |         break;
136 |       case "t2t":
137 |         start = {
138 |           x: el1Coords.left + el1Dimesion.width / 2,
139 |           y: el1Coords.top,
140 |         };
141 |         end = {
142 |           x: el2Coords.left + el2Dimesion.width / 2,
143 |           y: el2Coords.top,
144 |         };
145 |         break;
146 |       case "t2b":
147 |         start = {
148 |           x: el1Coords.left + el1Dimesion.width / 2,
149 |           y: el1Coords.top,
150 |         };
151 |         end = {
152 |           x: el2Coords.left + el2Dimesion.width / 2,
153 |           y: el2Coords.bottom,
154 |         };
155 |         break;
156 |       default:
157 |         break;
158 |     }
159 | 
160 |     return { start, end };
161 |   }
162 | 
163 |   if (!props.el1 || !props.el2) return null;
164 | 
165 |   const coordinates = getNewCoordinates();
166 | 
167 |   return (
168 |     <div
169 |       ref={wrapperRef}
170 |       style={{
171 |         position: "absolute",
172 |         top: 0,
173 |         width: wrapperRef.current?.offsetParent?.scrollWidth || "100%",
174 |         height: wrapperRef.current?.offsetParent?.scrollHeight || "100%",
175 |         zIndex: -1,
176 |       }}
177 |     >
178 |       {props.shape === "line" && (
179 |         <LineConnector
180 |           {...props}
181 |           startPoint={coordinates.start}
182 |           endPoint={coordinates.end}
183 |           startArrow={props.startArrow}
184 |           endArrow={props.endArrow}
185 |           arrowSize={props.arrowSize}
186 |         />
187 |       )}
188 |       {props.shape === "s" && (
189 |         <SConnector
190 |           {...props}
191 |           startPoint={coordinates.start}
192 |           endPoint={coordinates.end}
193 |           startArrow={props.startArrow}
194 |           endArrow={props.endArrow}
195 |           arrowSize={props.arrowSize}
196 |         />
197 |       )}
198 |       {props.shape === "narrow-s" && (
199 |         <NarrowSConnector
200 |           {...props}
201 |           startPoint={coordinates.start}
202 |           endPoint={coordinates.end}
203 |           stem={props.stem}
204 |           grids={props.grids}
205 |           roundCorner={props.roundCorner}
206 |           direction={props.direction}
207 |           minStep={props.minStep}
208 |           startArrow={props.startArrow}
209 |           endArrow={props.endArrow}
210 |           arrowSize={props.arrowSize}
211 |         />
212 |       )}
213 |     </div>
214 |   );
215 | }
216 | 


--------------------------------------------------------------------------------
/example/src/Connector/SvgConnector.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useRef } from "react";
  2 | import NarrowSConnector from "./NarrowSConnector";
  3 | import LineConnector from "./LineConnector";
  4 | import SConnector from "./SConnector";
  5 | 
  6 | export type ShapeDirection =
  7 |   | "r2l"
  8 |   | "l2r"
  9 |   | "l2l"
 10 |   | "r2r"
 11 |   | "b2t"
 12 |   | "b2b"
 13 |   | "t2t"
 14 |   | "t2b";
 15 | 
 16 | export interface Props extends React.SVGProps<SVGPathElement> {
 17 |   el1: HTMLDivElement;
 18 |   el2: HTMLDivElement;
 19 |   shape: "s" | "line" | "narrow-s";
 20 |   direction?: ShapeDirection;
 21 |   grids?: number;
 22 |   stem?: number;
 23 |   roundCorner?: boolean;
 24 |   stroke?: string;
 25 |   strokeWidth?: number;
 26 |   minStep?: number;
 27 |   startArrow?: boolean;
 28 |   endArrow?: boolean;
 29 |   arrowSize?: number;
 30 | }
 31 | 
 32 | export interface Point {
 33 |   x: number;
 34 |   y: number;
 35 | }
 36 | 
 37 | export interface ShapeConnectorProps extends React.SVGProps<SVGPathElement> {
 38 |   startPoint: Point;
 39 |   endPoint: Point;
 40 |   stroke?: string;
 41 |   strokeWidth?: number;
 42 |   startArrow?: boolean;
 43 |   endArrow?: boolean;
 44 |   arrowSize?: number;
 45 | }
 46 | 
 47 | /**
 48 |  * Connect elements with svg paths
 49 |  * @param el1 first element (HTML or React component)
 50 |  * @param el2 second element (HTML or React component)
 51 |  * @param shape s | line | narrow-s
 52 |  * @param direction (right, left, top, bottom) --> (right, left, top, bottom) if shape is narrow-s
 53 |  * @param grid number of columns in X/Y axis from the start point to the end point
 54 |  * @param stem min distance from the start point to the first transition
 55 |  * @param minStep radius of the transition curve, default is min of (deltaX/grid, deltaY/grid)
 56 |  * @param roundCorner true to have a curve transition
 57 |  * @param stroke color of the svg path
 58 |  * @param strokeWidth width of the svg path
 59 |  * @param startArrow true to have an arrow at the start point (not applicable for s shape)
 60 |  * @param endArrow true to have an arrow at the end point (not applicable for s shape)
 61 |  * @param arrowSize size of arrows
 62 |  */
 63 | 
 64 | export default function SvgConnector(props: Props) {
 65 |   const wrapperRef = useRef<HTMLDivElement | null>(null);
 66 | 
 67 |   function getCoords(el: HTMLElement) {
 68 |     const parentEl = el.offsetParent;
 69 |     const box = el.getBoundingClientRect();
 70 | 
 71 |     return {
 72 |       top: box.top + window.pageYOffset + (parentEl?.scrollTop || 0),
 73 |       right: box.right + window.pageXOffset + (parentEl?.scrollLeft || 0),
 74 |       bottom: box.bottom + window.pageYOffset + (parentEl?.scrollTop || 0),
 75 |       left: box.left + window.pageXOffset + (parentEl?.scrollLeft || 0),
 76 |     };
 77 |   }
 78 | 
 79 |   function getNewCoordinates() {
 80 |     const el1Coords = getCoords(props.el1);
 81 |     const el2Coords = getCoords(props.el2);
 82 | 
 83 |     const el1Dimesion = {
 84 |       width: el1Coords.right - el1Coords.left,
 85 |       height: el1Coords.bottom - el1Coords.top,
 86 |     };
 87 | 
 88 |     const el2Dimesion = {
 89 |       width: el2Coords.right - el2Coords.left,
 90 |       height: el2Coords.bottom - el2Coords.top,
 91 |     };
 92 | 
 93 |     let start = {
 94 |       x: el1Coords.right,
 95 |       y: el1Coords.top + el1Dimesion.height / 2,
 96 |     };
 97 | 
 98 |     let end = {
 99 |       x: el2Coords.left,
100 |       y: el2Coords.top + el2Dimesion.height / 2,
101 |     };
102 | 
103 |     switch (props.direction) {
104 |       case "l2l":
105 |         start.x = el1Coords.left;
106 |         break;
107 |       case "l2r":
108 |         start.x = el1Coords.left;
109 |         end.x = el2Coords.right;
110 |         break;
111 |       case "r2r":
112 |         start.x = el1Coords.right;
113 |         end.x = el2Coords.right;
114 |         break;
115 |       case "b2t":
116 |         start = {
117 |           x: el1Coords.left + el1Dimesion.width / 2,
118 | 
119 |           y: el1Coords.bottom,
120 |         };
121 |         end = {
122 |           x: el2Coords.left + el2Dimesion.width / 2,
123 |           y: el2Coords.top,
124 |         };
125 |         break;
126 |       case "b2b":
127 |         start = {
128 |           x: el1Coords.left + el1Dimesion.width / 2,
129 |           y: el1Coords.bottom,
130 |         };
131 |         end = {
132 |           x: el2Coords.left + el2Dimesion.width / 2,
133 |           y: el2Coords.bottom,
134 |         };
135 |         break;
136 |       case "t2t":
137 |         start = {
138 |           x: el1Coords.left + el1Dimesion.width / 2,
139 |           y: el1Coords.top,
140 |         };
141 |         end = {
142 |           x: el2Coords.left + el2Dimesion.width / 2,
143 |           y: el2Coords.top,
144 |         };
145 |         break;
146 |       case "t2b":
147 |         start = {
148 |           x: el1Coords.left + el1Dimesion.width / 2,
149 |           y: el1Coords.top,
150 |         };
151 |         end = {
152 |           x: el2Coords.left + el2Dimesion.width / 2,
153 |           y: el2Coords.bottom,
154 |         };
155 |         break;
156 |       default:
157 |         break;
158 |     }
159 | 
160 |     return { start, end };
161 |   }
162 | 
163 |   if (!props.el1 || !props.el2) return null;
164 | 
165 |   const coordinates = getNewCoordinates();
166 | 
167 |   return (
168 |     <div
169 |       ref={wrapperRef}
170 |       style={{
171 |         position: "absolute",
172 |         top: 0,
173 |         width: wrapperRef.current?.offsetParent?.scrollWidth || "100%",
174 |         height: wrapperRef.current?.offsetParent?.scrollHeight || "100%",
175 |         zIndex: -1,
176 |       }}
177 |     >
178 |       {props.shape === "line" && (
179 |         <LineConnector
180 |           {...props}
181 |           startPoint={coordinates.start}
182 |           endPoint={coordinates.end}
183 |           startArrow={props.startArrow}
184 |           endArrow={props.endArrow}
185 |           arrowSize={props.arrowSize}
186 |         />
187 |       )}
188 |       {props.shape === "s" && (
189 |         <SConnector
190 |           {...props}
191 |           startPoint={coordinates.start}
192 |           endPoint={coordinates.end}
193 |           startArrow={props.startArrow}
194 |           endArrow={props.endArrow}
195 |           arrowSize={props.arrowSize}
196 |         />
197 |       )}
198 |       {props.shape === "narrow-s" && (
199 |         <NarrowSConnector
200 |           {...props}
201 |           startPoint={coordinates.start}
202 |           endPoint={coordinates.end}
203 |           stem={props.stem}
204 |           grids={props.grids}
205 |           roundCorner={props.roundCorner}
206 |           direction={props.direction}
207 |           minStep={props.minStep}
208 |           startArrow={props.startArrow}
209 |           endArrow={props.endArrow}
210 |           arrowSize={props.arrowSize}
211 |         />
212 |       )}
213 |     </div>
214 |   );
215 | }
216 | 


--------------------------------------------------------------------------------
/example/src/App.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useRef, useState } from "react";
  2 | import Draggable from "react-draggable";
  3 | import styled from "styled-components/macro";
  4 | import Connector from "react-svg-connector";
  5 | 
  6 | const Wrapper = styled.div`
  7 |   position: relative;
  8 |   height: 100vh;
  9 |   overflow: auto;
 10 | `;
 11 | 
 12 | const Box = styled.div<{
 13 |   top?: string;
 14 |   left?: string;
 15 |   right?: string;
 16 |   bottom?: string;
 17 | }>`
 18 |   width: 100px;
 19 |   height: 50px;
 20 |   cursor: pointer;
 21 |   position: absolute;
 22 |   top: ${(props) => props.top || 0};
 23 |   bottom: ${(props) => props.bottom || 0};
 24 |   left: ${(props) => props.left || 0};
 25 |   right: ${(props) => props.right || 0};
 26 | `;
 27 | 
 28 | const Box1 = styled(Box)`
 29 |   background-color: green;
 30 | `;
 31 | 
 32 | const Box2 = styled(Box)`
 33 |   background-color: red;
 34 | `;
 35 | 
 36 | function App() {
 37 |   const [activeDrags, setActiveDrags] = useState(0);
 38 |   const [redraw, setRedraw] = useState(0);
 39 | 
 40 |   const refs = useRef<{ [key: string]: any }>({});
 41 | 
 42 |   function addRef(key: string) {
 43 |     if (refs.current[key]) {
 44 |       return refs.current[key];
 45 |     } else {
 46 |       const newRef = React.createRef<any>();
 47 |       refs.current[key] = newRef;
 48 |       return newRef;
 49 |     }
 50 |   }
 51 | 
 52 |   function onStart() {
 53 |     const newActiveDrags = activeDrags + 1;
 54 |     setActiveDrags(newActiveDrags);
 55 |   }
 56 | 
 57 |   function onStop() {
 58 |     const newActiveDrags = activeDrags - 1;
 59 |     setActiveDrags(newActiveDrags);
 60 |   }
 61 | 
 62 |   function onDrag(e: any, data: any) {
 63 |     setRedraw(Math.random());
 64 |   }
 65 | 
 66 |   useEffect(() => {
 67 |     setRedraw(Math.random());
 68 |   }, []);
 69 | 
 70 |   return (
 71 |     <Wrapper>
 72 |       <Connector
 73 |         el1={refs.current["box1"]?.current}
 74 |         el2={refs.current["box2"]?.current}
 75 |         shape="narrow-s"
 76 |         direction="r2l"
 77 |         roundCorner={false}
 78 |         endArrow={true}
 79 |         startArrow={true}
 80 |         stem={30}
 81 |         minStep={100}
 82 |         strokeWidth={1}
 83 |         arrowSize={5}
 84 |       />
 85 |       <Connector
 86 |         el1={refs.current["box3"]?.current}
 87 |         el2={refs.current["box4"]?.current}
 88 |         shape="narrow-s"
 89 |         direction="l2l"
 90 |         stem={10}
 91 |         roundCorner={true}
 92 |         endArrow={true}
 93 |         startArrow={true}
 94 |       />
 95 |       <Connector
 96 |         el1={refs.current["box5"]?.current}
 97 |         el2={refs.current["box6"]?.current}
 98 |         shape="narrow-s"
 99 |         direction="l2r"
100 |         stem={10}
101 |         roundCorner={true}
102 |         endArrow={true}
103 |         startArrow={true}
104 |       />
105 |       <Connector
106 |         el1={refs.current["box7"]?.current}
107 |         el2={refs.current["box8"]?.current}
108 |         shape="narrow-s"
109 |         direction="r2r"
110 |         stem={10}
111 |         roundCorner={true}
112 |         endArrow={true}
113 |         startArrow={true}
114 |         minStep={10}
115 |         strokeDasharray="5,10,5"
116 |       />
117 | 
118 |       {/* YSPACE */}
119 |       <Connector
120 |         el1={refs.current["box9"]?.current}
121 |         el2={refs.current["box10"]?.current}
122 |         shape="narrow-s"
123 |         direction="t2b"
124 |         stem={10}
125 |         roundCorner={true}
126 |         endArrow={true}
127 |         startArrow={true}
128 |       />
129 |       <Connector
130 |         el1={refs.current["box11"]?.current}
131 |         el2={refs.current["box12"]?.current}
132 |         shape="narrow-s"
133 |         direction="t2t"
134 |         stem={10}
135 |         roundCorner={true}
136 |         endArrow={true}
137 |         startArrow={true}
138 |       />
139 |       <Connector
140 |         el1={refs.current["box13"]?.current}
141 |         el2={refs.current["box14"]?.current}
142 |         shape="narrow-s"
143 |         direction="b2t"
144 |         stem={10}
145 |         roundCorner={true}
146 |         endArrow={true}
147 |         startArrow={true}
148 |       />
149 |       <Connector
150 |         el1={refs.current["box15"]?.current}
151 |         el2={refs.current["box16"]?.current}
152 |         shape="narrow-s"
153 |         direction="b2b"
154 |         stem={10}
155 |         minStep={10}
156 |         roundCorner={true}
157 |         endArrow={true}
158 |         startArrow={true}
159 |       />
160 |       <Connector
161 |         el1={refs.current["box17"]?.current}
162 |         el2={refs.current["box18"]?.current}
163 |         shape="s"
164 |         endArrow={true}
165 |         startArrow={true}
166 |       />
167 |       <Connector
168 |         el1={refs.current["box22"]?.current}
169 |         el2={refs.current["box21"]?.current}
170 |         shape="s"
171 |         endArrow={true}
172 |         startArrow={true}
173 |       />
174 |       <Connector
175 |         el1={refs.current["box19"]?.current}
176 |         el2={refs.current["box20"]?.current}
177 |         shape="line"
178 |         endArrow={true}
179 |         startArrow={true}
180 |       />
181 | 
182 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
183 |         <Box1 ref={addRef("box1")} top="150px" left="150px" />
184 |       </Draggable>
185 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
186 |         <Box2 ref={addRef("box2")} top="300px" left="300px" />
187 |       </Draggable>
188 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
189 |         <Box1 ref={addRef("box3")} top="150px" left="500px" />
190 |       </Draggable>
191 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
192 |         <Box2 ref={addRef("box4")} top="300px" left="650px" />
193 |       </Draggable>
194 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
195 |         <Box1 ref={addRef("box5")} top="150px" left="850px" />
196 |       </Draggable>
197 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
198 |         <Box2 ref={addRef("box6")} top="300px" left="1000px" />
199 |       </Draggable>
200 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
201 |         <Box1 ref={addRef("box7")} top="150px" left="1150px" />
202 |       </Draggable>
203 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
204 |         <Box2 ref={addRef("box8")} top="300px" left="1300px" />
205 |       </Draggable>
206 | 
207 |       {/* Y SPACE */}
208 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
209 |         <Box1 ref={addRef("box9")} top="400px" left="150px" />
210 |       </Draggable>
211 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
212 |         <Box2 ref={addRef("box10")} top="550px" left="300px" />
213 |       </Draggable>
214 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
215 |         <Box1 ref={addRef("box11")} top="400px" left="500px" />
216 |       </Draggable>
217 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
218 |         <Box2 ref={addRef("box12")} top="550px" left="650px" />
219 |       </Draggable>
220 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
221 |         <Box1 ref={addRef("box13")} top="400px" left="850px" />
222 |       </Draggable>
223 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
224 |         <Box2 ref={addRef("box14")} top="550px" left="1000px" />
225 |       </Draggable>
226 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
227 |         <Box1 ref={addRef("box15")} top="400px" left="1150px" />
228 |       </Draggable>
229 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
230 |         <Box2 ref={addRef("box16")} top="550px" left="1300px" />
231 |       </Draggable>
232 | 
233 |       {/* Line */}
234 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
235 |         <Box1 ref={addRef("box17")} top="650px" left="150px" />
236 |       </Draggable>
237 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
238 |         <Box2 ref={addRef("box18")} top="750px" left="300px" />
239 |       </Draggable>
240 | 
241 |       {/* S shape */}
242 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
243 |         <Box1 ref={addRef("box19")} top="650px" left="500px" />
244 |       </Draggable>
245 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
246 |         <Box2 ref={addRef("box20")} top="750px" left="700px" />
247 |       </Draggable>
248 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
249 |         <Box1 ref={addRef("box21")} top="650px" left="1100px" />
250 |       </Draggable>
251 |       <Draggable onStart={onStart} onStop={onStop} onDrag={onDrag}>
252 |         <Box2 ref={addRef("box22")} top="750px" left="900px" />
253 |       </Draggable>
254 |     </Wrapper>
255 |   );
256 | }
257 | 
258 | export default App;
259 | 


--------------------------------------------------------------------------------
/src/NarrowSConnector.tsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import Arrow from "./Arrow";
  3 | 
  4 | import { ShapeConnectorProps, ShapeDirection } from "./SvgConnector";
  5 | 
  6 | interface NarrowSConnectorProps extends ShapeConnectorProps {
  7 |   grids?: number;
  8 |   stem?: number;
  9 |   roundCorner?: boolean;
 10 |   direction?: ShapeDirection;
 11 |   minStep?: number;
 12 |   arrowSize?: number;
 13 |   endArrow?: boolean;
 14 |   startArrow?: boolean;
 15 | }
 16 | 
 17 | /**
 18 |  * Custom S shape svg connector
 19 |  * @param startPoint
 20 |  * @param endPoint
 21 |  * @param grids number of columns in X/Y axis
 22 |  * @param stem min distance from the start point to the first transition
 23 |  * @param roundCorner true to have a curve transition
 24 |  * @param direction (right, left, top, bottom) --> (right, left, top, bottom)
 25 |  * @param minStep radius of the transition curve, default is min of (deltaX/grid, deltaY/grid)
 26 |  * @param arrowSize
 27 |  * @param endArrow
 28 |  * @param startArrow
 29 |  */
 30 | 
 31 | export default function NarrowSConnector(props: NarrowSConnectorProps) {
 32 |   const {
 33 |     direction,
 34 |     stroke,
 35 |     strokeWidth,
 36 |     startArrow,
 37 |     endArrow,
 38 |     startPoint,
 39 |     endPoint,
 40 |     arrowSize,
 41 |     roundCorner,
 42 |     minStep,
 43 |     ...rest
 44 |   } = props;
 45 | 
 46 |   let coordinates = {
 47 |     start: props.startPoint,
 48 |     end: props.endPoint,
 49 |   };
 50 | 
 51 |   if (props.direction === "l2r" || props.direction === "t2b") {
 52 |     // swap elements
 53 |     coordinates = {
 54 |       start: props.endPoint,
 55 |       end: props.startPoint,
 56 |     };
 57 |   }
 58 | 
 59 |   const distanceX = coordinates.end.x - coordinates.start.x;
 60 |   const distanceY = coordinates.end.y - coordinates.start.y;
 61 | 
 62 |   let stem = props.stem || 0;
 63 |   const grids = props.grids || 5;
 64 | 
 65 |   const radius = props.roundCorner ? 1 : 0;
 66 | 
 67 |   const stepX = distanceX / grids;
 68 |   const stepY = distanceY / grids;
 69 | 
 70 |   if (stem >= Math.abs(distanceX)) {
 71 |     stem = Math.abs(distanceX) - Math.abs(stepX);
 72 |   }
 73 | 
 74 |   let step = Math.min(Math.abs(stepX), Math.abs(stepY));
 75 | 
 76 |   step = Math.min(step, props.minStep || step);
 77 | 
 78 |   const cArrowSize =
 79 |     props.arrowSize || (props.strokeWidth ? props.strokeWidth * 3 : 10);
 80 | 
 81 |   function corner12(direction?: ShapeDirection) {
 82 |     const factor = distanceX * distanceY >= 0 ? 1 : -1;
 83 |     const l2lFactor = props.direction === "l2l" ? -1 : 1;
 84 | 
 85 |     const pathr2l = `M
 86 |                     ${coordinates.start.x} ${coordinates.start.y} 
 87 |                     h ${stem * l2lFactor}
 88 |                     q ${step * radius * l2lFactor} 0 
 89 |                     ${step * radius * l2lFactor} ${step * factor * radius}
 90 |                     V ${coordinates.end.y - step * factor * radius}
 91 |                     q ${0} ${step * factor * radius}
 92 |                     ${step * radius} ${step * factor * radius}
 93 |                     H ${coordinates.end.x}
 94 |                   `;
 95 | 
 96 |     const pathr2r = `M
 97 |                     ${coordinates.start.x} ${coordinates.start.y} 
 98 |                     h ${stem + distanceX + step} 
 99 |                     q ${step * radius} 0 
100 |                     ${step * radius} ${step * factor * radius}
101 |                     V ${coordinates.end.y - step * factor * radius}
102 |                     q 0 ${step * factor * radius}
103 |                     ${-step} ${step * factor * radius}
104 |                     H ${coordinates.end.x}
105 |                   `;
106 | 
107 |     let path = pathr2l; // default
108 | 
109 |     switch (direction) {
110 |       case "r2r":
111 |         path = pathr2r;
112 |         break;
113 |       case "b2t":
114 |         path = pathr2l;
115 |         break;
116 |       default:
117 |         break;
118 |     }
119 |     return (
120 |       <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
121 |         <path
122 |           {...rest}
123 |           d={path}
124 |           stroke={props.stroke || "orange"}
125 |           strokeWidth={props.strokeWidth || 3}
126 |           fill="transparent"
127 |         />
128 |         {props.endArrow && (
129 |           <Arrow
130 |             tip={coordinates.end}
131 |             size={cArrowSize}
132 |             rotateAngle={props.direction === "r2r" ? 180 : 0}
133 |             stroke={props.stroke || "orange"}
134 |           />
135 |         )}
136 |         {props.startArrow && (
137 |           <Arrow
138 |             tip={coordinates.start}
139 |             size={cArrowSize}
140 |             rotateAngle={props.direction === "l2l" ? 0 : 180}
141 |             stroke={props.stroke || "orange"}
142 |           />
143 |         )}
144 |       </svg>
145 |     );
146 |   }
147 | 
148 |   function corner21(direction?: ShapeDirection) {
149 |     const factor = distanceX * distanceY >= 0 ? 1 : -1;
150 |     const t2tFactor = props.direction === "t2t" ? -1 : 1;
151 | 
152 |     const pathb2t = `M
153 |                     ${coordinates.start.x} ${coordinates.start.y} 
154 |                     v ${stem * t2tFactor}
155 |                     q  0 ${step * radius * t2tFactor}
156 |                      ${step * factor * radius} ${step * radius * t2tFactor}
157 |                     H ${coordinates.end.x - step * factor * radius}
158 |                     q ${step * factor * radius} 0
159 |                      ${step * factor * radius} ${step * radius}
160 |                     V ${coordinates.end.y}
161 |                   `;
162 | 
163 |     const pathb2b = `M
164 |                     ${coordinates.start.x} ${coordinates.start.y} 
165 |                     v ${stem + distanceY + step} 
166 |                     q 0 ${step * radius}
167 |                     ${step * factor * radius} ${step * radius}
168 |                     H ${coordinates.end.x - step * factor * radius}
169 |                     q ${step * factor * radius} 0
170 |                     ${step * factor * radius} ${-step}
171 |                     V ${coordinates.end.y}
172 |                   `;
173 | 
174 |     let path = pathb2t; // default
175 | 
176 |     switch (direction) {
177 |       case "b2b":
178 |         path = pathb2b;
179 |         break;
180 |       default:
181 |         break;
182 |     }
183 |     return (
184 |       <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
185 |         <path
186 |           {...rest}
187 |           d={path}
188 |           stroke={props.stroke || "orange"}
189 |           strokeWidth={props.strokeWidth || 3}
190 |           fill="transparent"
191 |         />
192 |         {props.endArrow && (
193 |           <Arrow
194 |             tip={coordinates.end}
195 |             size={cArrowSize}
196 |             rotateAngle={props.direction === "b2b" ? 270 : 90}
197 |             stroke={props.stroke || "orange"}
198 |           />
199 |         )}
200 |         {props.startArrow && (
201 |           <Arrow
202 |             tip={coordinates.start}
203 |             size={cArrowSize}
204 |             rotateAngle={props.direction === "t2t" ? 90 : 270}
205 |             stroke={props.stroke || "orange"}
206 |           />
207 |         )}
208 |       </svg>
209 |     );
210 |   }
211 | 
212 |   function corner34(direction?: ShapeDirection) {
213 |     const factor = distanceX * distanceY > 0 ? 1 : -1;
214 | 
215 |     let pathr2l = `M
216 |                     ${coordinates.start.x} ${coordinates.start.y} 
217 |                     h ${stem} 
218 |                     q ${step * radius} 0 
219 |                     ${step * radius} ${-step * factor * radius}
220 |                     v ${distanceY / 2 + step * 2 * factor * radius}
221 |                     q 0 ${-step * factor * radius}
222 |                     ${-step * radius} ${-step * factor * radius}
223 |                     h ${distanceX - stem * 2}
224 |                     q ${-step * radius} 0
225 |                     ${-step * radius} ${-step * factor * radius}
226 |                     V ${coordinates.end.y + step * factor * radius}
227 |                     q 0 ${-step * factor * radius}
228 |                     ${step * radius} ${-step * factor * radius}
229 |                     H ${coordinates.end.x}
230 |                   `;
231 | 
232 |     let pathl2l = `M
233 |                     ${coordinates.start.x} ${coordinates.start.y} 
234 |                     h ${stem * -1 + distanceX} 
235 |                     q ${step * -1 * radius} 0 
236 |                     ${step * -1 * radius} ${-step * factor * radius}
237 |                     V ${coordinates.end.y + step * factor * radius}
238 |                     q 0 ${-step * factor * radius}
239 |                     ${step * radius} ${-step * factor * radius}
240 |                     H ${coordinates.end.x}
241 |                   `;
242 | 
243 |     let pathr2r = `M
244 |                     ${coordinates.start.x} ${coordinates.start.y} 
245 |                     h ${stem}
246 |                     q ${step * radius} 0 
247 |                     ${step * radius} ${step * factor * -1 * radius}
248 |                     V ${coordinates.end.y + step * factor * radius}
249 |                     q ${0} ${step * factor * -1 * radius}
250 |                     ${step * -1 * radius} ${step * factor * -1 * radius}
251 |                     H ${coordinates.end.x}
252 |                   `;
253 | 
254 |     let path = pathr2l; // default
255 | 
256 |     switch (direction) {
257 |       case "l2l":
258 |         path = pathl2l;
259 |         break;
260 |       case "r2r":
261 |         path = pathr2r;
262 |         break;
263 |       default:
264 |         break;
265 |     }
266 |     return (
267 |       <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
268 |         <path
269 |           {...rest}
270 |           d={path}
271 |           stroke={props.stroke || "orange"}
272 |           strokeWidth={props.strokeWidth || 3}
273 |           fill="transparent"
274 |         />
275 |         {props.endArrow && (
276 |           <Arrow
277 |             tip={coordinates.end}
278 |             size={cArrowSize}
279 |             rotateAngle={props.direction === "r2r" ? 180 : 0}
280 |             stroke={props.stroke || "orange"}
281 |           />
282 |         )}
283 |         {props.startArrow && (
284 |           <Arrow
285 |             tip={coordinates.start}
286 |             size={cArrowSize}
287 |             rotateAngle={props.direction === "l2l" ? 0 : 180}
288 |             stroke={props.stroke || "orange"}
289 |           />
290 |         )}
291 |       </svg>
292 |     );
293 |   }
294 | 
295 |   function corner43(direction?: ShapeDirection) {
296 |     const factor = distanceX * distanceY > 0 ? 1 : -1;
297 | 
298 |     let pathb2t = `M
299 |                     ${coordinates.start.x} ${coordinates.start.y} 
300 |                     v ${stem} 
301 |                     q 0 ${step * radius}
302 |                     ${-step * factor * radius}  ${step * radius}
303 |                     h ${distanceX / 2 + step * 2 * factor * radius}
304 |                     q ${-step * factor * radius} 0
305 |                     ${-step * factor * radius} ${-step * radius}
306 |                     v ${distanceY - stem * 2}
307 |                     q 0 ${-step * radius}
308 |                      ${-step * factor * radius} ${-step * radius}
309 |                     H ${coordinates.end.x + step * factor * radius}
310 |                     q ${-step * factor * radius} 0
311 |                     ${-step * factor * radius} ${step * radius}
312 |                     V ${coordinates.end.y}
313 |                   `;
314 | 
315 |     let patht2t = `M
316 |                     ${coordinates.start.x} ${coordinates.start.y} 
317 |                     v ${stem * -1 + distanceY}
318 |                     q 0 ${step * -1 * radius}
319 |                     ${-step * factor * radius} ${step * -1 * radius}
320 |                     H ${coordinates.end.x + step * factor * radius}
321 |                     q ${-step * factor * radius} 0
322 |                     ${-step * factor * radius} ${step * radius} 
323 |                     V ${coordinates.end.y}
324 |                   `;
325 | 
326 |     let pathb2b = `M
327 |                     ${coordinates.start.x} ${coordinates.start.y} 
328 |                     v ${stem} 
329 |                     q 0 ${step * radius}
330 |                     ${step * factor * -1 * radius} ${step * radius}
331 |                     H ${coordinates.end.x + step * factor * radius}
332 |                     q ${step * factor * -1 * radius} 0
333 |                     ${step * factor * -1 * radius} ${step * -1 * radius}
334 |                     V ${coordinates.end.y}
335 |                   `;
336 | 
337 |     let path = pathb2t; // default
338 | 
339 |     switch (direction) {
340 |       case "b2b":
341 |         path = pathb2b;
342 |         break;
343 |       case "t2t":
344 |         path = patht2t;
345 |         break;
346 |       default:
347 |         break;
348 |     }
349 |     return (
350 |       <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
351 |         <path
352 |           {...rest}
353 |           d={path}
354 |           stroke={props.stroke || "orange"}
355 |           strokeWidth={props.strokeWidth || 3}
356 |           fill="transparent"
357 |         />
358 |         {props.endArrow && (
359 |           <Arrow
360 |             tip={coordinates.end}
361 |             size={cArrowSize}
362 |             rotateAngle={props.direction === "b2b" ? 270 : 90}
363 |             stroke={props.stroke || "orange"}
364 |           />
365 |         )}
366 |         {props.startArrow && (
367 |           <Arrow
368 |             tip={coordinates.start}
369 |             size={cArrowSize}
370 |             rotateAngle={props.direction === "t2t" ? 90 : 270}
371 |             stroke={props.stroke || "orange"}
372 |           />
373 |         )}
374 |       </svg>
375 |     );
376 |   }
377 | 
378 |   const ySpaceDirections = ["b2t", "b2b", "t2t", "t2b"];
379 |   if (ySpaceDirections.includes(props.direction || "")) {
380 |     if (distanceY >= 0) {
381 |       return corner21(props.direction);
382 |     } else {
383 |       return corner43(props.direction);
384 |     }
385 |   }
386 | 
387 |   // corner 1 & 2
388 |   if (distanceX >= 0) {
389 |     return corner12(props.direction);
390 |   }
391 | 
392 |   // corner 4 & 3
393 |   else {
394 |     return corner34(props.direction);
395 |   }
396 | }
397 | 


--------------------------------------------------------------------------------
/example/src/Connector/NarrowSConnector.tsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import Arrow from "./Arrow";
  3 | 
  4 | import { ShapeConnectorProps, ShapeDirection } from "./SvgConnector";
  5 | 
  6 | interface NarrowSConnectorProps extends ShapeConnectorProps {
  7 |   grids?: number;
  8 |   stem?: number;
  9 |   roundCorner?: boolean;
 10 |   direction?: ShapeDirection;
 11 |   minStep?: number;
 12 |   arrowSize?: number;
 13 |   endArrow?: boolean;
 14 |   startArrow?: boolean;
 15 | }
 16 | 
 17 | /**
 18 |  * Custom S shape svg connector
 19 |  * @param startPoint
 20 |  * @param endPoint
 21 |  * @param grids number of columns in X/Y axis
 22 |  * @param stem min distance from the start point to the first transition
 23 |  * @param roundCorner true to have a curve transition
 24 |  * @param direction (right, left, top, bottom) --> (right, left, top, bottom)
 25 |  * @param minStep radius of the transition curve, default is min of (deltaX/grid, deltaY/grid)
 26 |  * @param arrowSize
 27 |  * @param endArrow
 28 |  * @param startArrow
 29 |  */
 30 | 
 31 | export default function NarrowSConnector(props: NarrowSConnectorProps) {
 32 |   const {
 33 |     direction,
 34 |     stroke,
 35 |     strokeWidth,
 36 |     startArrow,
 37 |     endArrow,
 38 |     startPoint,
 39 |     endPoint,
 40 |     arrowSize,
 41 |     roundCorner,
 42 |     minStep,
 43 |     ...rest
 44 |   } = props;
 45 | 
 46 |   let coordinates = {
 47 |     start: props.startPoint,
 48 |     end: props.endPoint,
 49 |   };
 50 | 
 51 |   if (props.direction === "l2r" || props.direction === "t2b") {
 52 |     // swap elements
 53 |     coordinates = {
 54 |       start: props.endPoint,
 55 |       end: props.startPoint,
 56 |     };
 57 |   }
 58 | 
 59 |   const distanceX = coordinates.end.x - coordinates.start.x;
 60 |   const distanceY = coordinates.end.y - coordinates.start.y;
 61 | 
 62 |   let stem = props.stem || 0;
 63 |   const grids = props.grids || 5;
 64 | 
 65 |   const radius = props.roundCorner ? 1 : 0;
 66 | 
 67 |   const stepX = distanceX / grids;
 68 |   const stepY = distanceY / grids;
 69 | 
 70 |   if (stem >= Math.abs(distanceX)) {
 71 |     stem = Math.abs(distanceX) - Math.abs(stepX);
 72 |   }
 73 | 
 74 |   let step = Math.min(Math.abs(stepX), Math.abs(stepY));
 75 | 
 76 |   step = Math.min(step, props.minStep || step);
 77 | 
 78 |   const cArrowSize =
 79 |     props.arrowSize || (props.strokeWidth ? props.strokeWidth * 3 : 10);
 80 | 
 81 |   function corner12(direction?: ShapeDirection) {
 82 |     const factor = distanceX * distanceY >= 0 ? 1 : -1;
 83 |     const l2lFactor = props.direction === "l2l" ? -1 : 1;
 84 | 
 85 |     const pathr2l = `M
 86 |                     ${coordinates.start.x} ${coordinates.start.y} 
 87 |                     h ${stem * l2lFactor}
 88 |                     q ${step * radius * l2lFactor} 0 
 89 |                     ${step * radius * l2lFactor} ${step * factor * radius}
 90 |                     V ${coordinates.end.y - step * factor * radius}
 91 |                     q ${0} ${step * factor * radius}
 92 |                     ${step * radius} ${step * factor * radius}
 93 |                     H ${coordinates.end.x}
 94 |                   `;
 95 | 
 96 |     const pathr2r = `M
 97 |                     ${coordinates.start.x} ${coordinates.start.y} 
 98 |                     h ${stem + distanceX + step} 
 99 |                     q ${step * radius} 0 
100 |                     ${step * radius} ${step * factor * radius}
101 |                     V ${coordinates.end.y - step * factor * radius}
102 |                     q 0 ${step * factor * radius}
103 |                     ${-step} ${step * factor * radius}
104 |                     H ${coordinates.end.x}
105 |                   `;
106 | 
107 |     let path = pathr2l; // default
108 | 
109 |     switch (direction) {
110 |       case "r2r":
111 |         path = pathr2r;
112 |         break;
113 |       case "b2t":
114 |         path = pathr2l;
115 |         break;
116 |       default:
117 |         break;
118 |     }
119 |     return (
120 |       <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
121 |         <path
122 |           {...rest}
123 |           d={path}
124 |           stroke={props.stroke || "orange"}
125 |           strokeWidth={props.strokeWidth || 3}
126 |           fill="transparent"
127 |         />
128 |         {props.endArrow && (
129 |           <Arrow
130 |             tip={coordinates.end}
131 |             size={cArrowSize}
132 |             rotateAngle={props.direction === "r2r" ? 180 : 0}
133 |             stroke={props.stroke || "orange"}
134 |           />
135 |         )}
136 |         {props.startArrow && (
137 |           <Arrow
138 |             tip={coordinates.start}
139 |             size={cArrowSize}
140 |             rotateAngle={props.direction === "l2l" ? 0 : 180}
141 |             stroke={props.stroke || "orange"}
142 |           />
143 |         )}
144 |       </svg>
145 |     );
146 |   }
147 | 
148 |   function corner21(direction?: ShapeDirection) {
149 |     const factor = distanceX * distanceY >= 0 ? 1 : -1;
150 |     const t2tFactor = props.direction === "t2t" ? -1 : 1;
151 | 
152 |     const pathb2t = `M
153 |                     ${coordinates.start.x} ${coordinates.start.y} 
154 |                     v ${stem * t2tFactor}
155 |                     q  0 ${step * radius * t2tFactor}
156 |                      ${step * factor * radius} ${step * radius * t2tFactor}
157 |                     H ${coordinates.end.x - step * factor * radius}
158 |                     q ${step * factor * radius} 0
159 |                      ${step * factor * radius} ${step * radius}
160 |                     V ${coordinates.end.y}
161 |                   `;
162 | 
163 |     const pathb2b = `M
164 |                     ${coordinates.start.x} ${coordinates.start.y} 
165 |                     v ${stem + distanceY + step} 
166 |                     q 0 ${step * radius}
167 |                     ${step * factor * radius} ${step * radius}
168 |                     H ${coordinates.end.x - step * factor * radius}
169 |                     q ${step * factor * radius} 0
170 |                     ${step * factor * radius} ${-step}
171 |                     V ${coordinates.end.y}
172 |                   `;
173 | 
174 |     let path = pathb2t; // default
175 | 
176 |     switch (direction) {
177 |       case "b2b":
178 |         path = pathb2b;
179 |         break;
180 |       default:
181 |         break;
182 |     }
183 |     return (
184 |       <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
185 |         <path
186 |           {...rest}
187 |           d={path}
188 |           stroke={props.stroke || "orange"}
189 |           strokeWidth={props.strokeWidth || 3}
190 |           fill="transparent"
191 |         />
192 |         {props.endArrow && (
193 |           <Arrow
194 |             tip={coordinates.end}
195 |             size={cArrowSize}
196 |             rotateAngle={props.direction === "b2b" ? 270 : 90}
197 |             stroke={props.stroke || "orange"}
198 |           />
199 |         )}
200 |         {props.startArrow && (
201 |           <Arrow
202 |             tip={coordinates.start}
203 |             size={cArrowSize}
204 |             rotateAngle={props.direction === "t2t" ? 90 : 270}
205 |             stroke={props.stroke || "orange"}
206 |           />
207 |         )}
208 |       </svg>
209 |     );
210 |   }
211 | 
212 |   function corner34(direction?: ShapeDirection) {
213 |     const factor = distanceX * distanceY > 0 ? 1 : -1;
214 | 
215 |     let pathr2l = `M
216 |                     ${coordinates.start.x} ${coordinates.start.y} 
217 |                     h ${stem} 
218 |                     q ${step * radius} 0 
219 |                     ${step * radius} ${-step * factor * radius}
220 |                     v ${distanceY / 2 + step * 2 * factor * radius}
221 |                     q 0 ${-step * factor * radius}
222 |                     ${-step * radius} ${-step * factor * radius}
223 |                     h ${distanceX - stem * 2}
224 |                     q ${-step * radius} 0
225 |                     ${-step * radius} ${-step * factor * radius}
226 |                     V ${coordinates.end.y + step * factor * radius}
227 |                     q 0 ${-step * factor * radius}
228 |                     ${step * radius} ${-step * factor * radius}
229 |                     H ${coordinates.end.x}
230 |                   `;
231 | 
232 |     let pathl2l = `M
233 |                     ${coordinates.start.x} ${coordinates.start.y} 
234 |                     h ${stem * -1 + distanceX} 
235 |                     q ${step * -1 * radius} 0 
236 |                     ${step * -1 * radius} ${-step * factor * radius}
237 |                     V ${coordinates.end.y + step * factor * radius}
238 |                     q 0 ${-step * factor * radius}
239 |                     ${step * radius} ${-step * factor * radius}
240 |                     H ${coordinates.end.x}
241 |                   `;
242 | 
243 |     let pathr2r = `M
244 |                     ${coordinates.start.x} ${coordinates.start.y} 
245 |                     h ${stem}
246 |                     q ${step * radius} 0 
247 |                     ${step * radius} ${step * factor * -1 * radius}
248 |                     V ${coordinates.end.y + step * factor * radius}
249 |                     q ${0} ${step * factor * -1 * radius}
250 |                     ${step * -1 * radius} ${step * factor * -1 * radius}
251 |                     H ${coordinates.end.x}
252 |                   `;
253 | 
254 |     let path = pathr2l; // default
255 | 
256 |     switch (direction) {
257 |       case "l2l":
258 |         path = pathl2l;
259 |         break;
260 |       case "r2r":
261 |         path = pathr2r;
262 |         break;
263 |       default:
264 |         break;
265 |     }
266 |     return (
267 |       <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
268 |         <path
269 |           {...rest}
270 |           d={path}
271 |           stroke={props.stroke || "orange"}
272 |           strokeWidth={props.strokeWidth || 3}
273 |           fill="transparent"
274 |         />
275 |         {props.endArrow && (
276 |           <Arrow
277 |             tip={coordinates.end}
278 |             size={cArrowSize}
279 |             rotateAngle={props.direction === "r2r" ? 180 : 0}
280 |             stroke={props.stroke || "orange"}
281 |           />
282 |         )}
283 |         {props.startArrow && (
284 |           <Arrow
285 |             tip={coordinates.start}
286 |             size={cArrowSize}
287 |             rotateAngle={props.direction === "l2l" ? 0 : 180}
288 |             stroke={props.stroke || "orange"}
289 |           />
290 |         )}
291 |       </svg>
292 |     );
293 |   }
294 | 
295 |   function corner43(direction?: ShapeDirection) {
296 |     const factor = distanceX * distanceY > 0 ? 1 : -1;
297 | 
298 |     let pathb2t = `M
299 |                     ${coordinates.start.x} ${coordinates.start.y} 
300 |                     v ${stem} 
301 |                     q 0 ${step * radius}
302 |                     ${-step * factor * radius}  ${step * radius}
303 |                     h ${distanceX / 2 + step * 2 * factor * radius}
304 |                     q ${-step * factor * radius} 0
305 |                     ${-step * factor * radius} ${-step * radius}
306 |                     v ${distanceY - stem * 2}
307 |                     q 0 ${-step * radius}
308 |                      ${-step * factor * radius} ${-step * radius}
309 |                     H ${coordinates.end.x + step * factor * radius}
310 |                     q ${-step * factor * radius} 0
311 |                     ${-step * factor * radius} ${step * radius}
312 |                     V ${coordinates.end.y}
313 |                   `;
314 | 
315 |     let patht2t = `M
316 |                     ${coordinates.start.x} ${coordinates.start.y} 
317 |                     v ${stem * -1 + distanceY}
318 |                     q 0 ${step * -1 * radius}
319 |                     ${-step * factor * radius} ${step * -1 * radius}
320 |                     H ${coordinates.end.x + step * factor * radius}
321 |                     q ${-step * factor * radius} 0
322 |                     ${-step * factor * radius} ${step * radius} 
323 |                     V ${coordinates.end.y}
324 |                   `;
325 | 
326 |     let pathb2b = `M
327 |                     ${coordinates.start.x} ${coordinates.start.y} 
328 |                     v ${stem} 
329 |                     q 0 ${step * radius}
330 |                     ${step * factor * -1 * radius} ${step * radius}
331 |                     H ${coordinates.end.x + step * factor * radius}
332 |                     q ${step * factor * -1 * radius} 0
333 |                     ${step * factor * -1 * radius} ${step * -1 * radius}
334 |                     V ${coordinates.end.y}
335 |                   `;
336 | 
337 |     let path = pathb2t; // default
338 | 
339 |     switch (direction) {
340 |       case "b2b":
341 |         path = pathb2b;
342 |         break;
343 |       case "t2t":
344 |         path = patht2t;
345 |         break;
346 |       default:
347 |         break;
348 |     }
349 |     return (
350 |       <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
351 |         <path
352 |           {...rest}
353 |           d={path}
354 |           stroke={props.stroke || "orange"}
355 |           strokeWidth={props.strokeWidth || 3}
356 |           fill="transparent"
357 |         />
358 |         {props.endArrow && (
359 |           <Arrow
360 |             tip={coordinates.end}
361 |             size={cArrowSize}
362 |             rotateAngle={props.direction === "b2b" ? 270 : 90}
363 |             stroke={props.stroke || "orange"}
364 |           />
365 |         )}
366 |         {props.startArrow && (
367 |           <Arrow
368 |             tip={coordinates.start}
369 |             size={cArrowSize}
370 |             rotateAngle={props.direction === "t2t" ? 90 : 270}
371 |             stroke={props.stroke || "orange"}
372 |           />
373 |         )}
374 |       </svg>
375 |     );
376 |   }
377 | 
378 |   const ySpaceDirections = ["b2t", "b2b", "t2t", "t2b"];
379 |   if (ySpaceDirections.includes(props.direction || "")) {
380 |     if (distanceY >= 0) {
381 |       return corner21(props.direction);
382 |     } else {
383 |       return corner43(props.direction);
384 |     }
385 |   }
386 | 
387 |   // corner 1 & 2
388 |   if (distanceX >= 0) {
389 |     return corner12(props.direction);
390 |   }
391 | 
392 |   // corner 4 & 3
393 |   else {
394 |     return corner34(props.direction);
395 |   }
396 | }
397 | 


--------------------------------------------------------------------------------