",
5 | "license": "MIT",
6 | "main": "dist/react-lineto.js",
7 | "types": "src/index.d.ts",
8 | "scripts": {
9 | "build": "webpack --config webpack.config.js",
10 | "demo": "webpack serve --config webpack.demo.config.js --hot --inline",
11 | "lint": "eslint --ext js,jsx ./src",
12 | "test": "npm run lint"
13 | },
14 | "homepage": "https://github.com/kdeloach/react-lineto",
15 | "repository": {
16 | "type": "git",
17 | "url": "https://github.com/kdeloach/react-lineto.git"
18 | },
19 | "bugs": {
20 | "url": "https://github.com/kdeloach/react-lineto/issues"
21 | },
22 | "dependencies": {
23 | "prop-types": "15.7.2",
24 | "react": "17.0.2"
25 | },
26 | "devDependencies": {
27 | "@babel/core": "^7.14.3",
28 | "@babel/eslint-parser": "^7.14.4",
29 | "@babel/preset-env": "^7.14.4",
30 | "@babel/preset-react": "^7.13.13",
31 | "babel-loader": "^8.2.2",
32 | "core-js": "^3.13.1",
33 | "eslint": "^7.27.0",
34 | "eslint-plugin-react": "^7.24.0",
35 | "eslint-webpack-plugin": "^2.5.4",
36 | "react-dom": "17.0.2",
37 | "regenerator-runtime": "^0.13.7",
38 | "webpack": "^5.38.1",
39 | "webpack-cli": "^4.7.0",
40 | "webpack-dev-server": "^3.11.2"
41 | },
42 | "babel": {
43 | "presets": ["@babel/preset-env", "@babel/preset-react"]
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kdeloach/react-lineto/1a72d511f1701c01a6a2ac1ec28d79a556c1073a/preview.png
--------------------------------------------------------------------------------
/scripts/build.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | docker run --rm \
4 | -v ${PWD}:/usr/src/app \
5 | react-lineto-yarn \
6 | build
7 |
--------------------------------------------------------------------------------
/scripts/docker-build.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | docker build -t react-lineto-yarn .
4 |
--------------------------------------------------------------------------------
/scripts/server.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | docker run --rm -ti \
4 | -v ${PWD}:/usr/src/app \
5 | -p "4567:4567" \
6 | react-lineto-yarn \
7 | run demo
8 |
--------------------------------------------------------------------------------
/scripts/test.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | docker run --rm \
4 | -v ${PWD}:/usr/src/app \
5 | react-lineto-yarn \
6 | test
7 |
--------------------------------------------------------------------------------
/src/index.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'react-lineto' {
2 | import { Component, PureComponent } from 'react';
3 |
4 | /**
5 | * Orientation type for 'Stepped' lines
6 | */
7 | type Orientation = 'h' | 'v';
8 |
9 | /**
10 | * Delay
11 | */
12 | type Delay = number | boolean;
13 |
14 | /**
15 | * Anchor type
16 | */
17 | type Anchor = string;
18 |
19 | /**
20 | * Coordinate type
21 | */
22 | type Coordinate = { x: number} | { y: number};
23 |
24 | /**
25 | * Coordinates type
26 | */
27 | type Coordinates = {
28 | x: number;
29 | y: number;
30 | };
31 |
32 | /**
33 | * Line coordinates
34 | */
35 | interface LineCoordinates {
36 | /**
37 | * First X coordinate
38 | */
39 | x0: number;
40 | /**
41 | * Second X coordinate
42 | */
43 | x1: number;
44 | /**
45 | * First Y coordinate
46 | */
47 | y0: number;
48 | /**
49 | * Second Y coordinate
50 | */
51 | y1: number;
52 | }
53 |
54 | /**
55 | * Base props for all components
56 | */
57 | interface BaseProps {
58 | /**
59 | * Border color, Example: #f00, red, etc.
60 | */
61 | borderColor?: string;
62 | /**
63 | * Border style, Example: solid, dashed, etc.
64 | */
65 | borderStyle?: string;
66 | /**
67 | * Border width (px)
68 | */
69 | borderWidth?: number;
70 | /**
71 | * Desired CSS className for the rendered element
72 | */
73 | className?: string;
74 | /**
75 | * Z-index offset
76 | */
77 | zIndex?: number;
78 | /**
79 | * CSS class name of the desired container
80 | */
81 | within?: string;
82 | }
83 |
84 | /**
85 | * Common props for 'LineTo' and 'SteppedLineTo' components
86 | */
87 | interface LineToCommonProps extends BaseProps {
88 | /**
89 | * Force render after delay (ms)
90 | */
91 | delay?: Delay;
92 | /**
93 | * Anchor for starting point (Format: "x y")
94 | */
95 | fromAnchor?: Anchor;
96 | /**
97 | * CSS class name of the first element
98 | */
99 | from: string;
100 | /**
101 | * Anchor for ending point (Format: 'x y")
102 | */
103 | toAnchor?: Anchor;
104 | /**
105 | * CSS class name of the second element
106 | */
107 | to: string;
108 | }
109 |
110 | /**
111 | * Common props for 'Line' and 'SteppedLine' components
112 | */
113 | interface LineCommonProps extends BaseProps, LineCoordinates {}
114 |
115 | /**
116 | * Props for 'Stepped' components
117 | */
118 | interface SteppedProps {
119 | /**
120 | * "h" for horizontal, "v" for vertical
121 | */
122 | orientation?: Orientation;
123 | }
124 |
125 | /**
126 | * Props of 'LineTo' component
127 | */
128 | export interface LineToProps extends LineToCommonProps {}
129 |
130 | /**
131 | * Props of 'SteppedLineTo' component
132 | */
133 | export interface SteppedLineToProps extends LineToProps, SteppedProps {}
134 |
135 | /**
136 | * Props of 'Line' component
137 | */
138 | export interface LineProps extends LineCommonProps {}
139 |
140 | /**
141 | * Props of 'SteppedLine' component
142 | */
143 | export interface SteppedLineProps extends LineProps, SteppedProps {}
144 |
145 | /**
146 | * Draw line between two DOM elements.
147 | */
148 | export default class LineTo extends Component> {
149 | /**
150 | * Forced update after delay (MS)
151 | */
152 | deferUpdate: (delay: number) => void;
153 |
154 | /**
155 | * Parse delay prop
156 | */
157 | parseDelay: (delay?: Delay) => number;
158 |
159 | /**
160 | * Parse anchor given as percentage
161 | */
162 | parseAnchorPercent: (value: string) => number;
163 |
164 | /**
165 | * Parse anchor given as text
166 | */
167 | parseAnchorText: (value: string) => Coordinate;
168 |
169 | /**
170 | * Parse anchor prop
171 | */
172 | parseAnchor: (value?: Anchor) => Coordinates;
173 |
174 | /**
175 | * Detect coordinates
176 | */
177 | detect: () => LineCoordinates;
178 |
179 | /**
180 | * Find element by class
181 | */
182 | findElement: (className: string) => Element;
183 | }
184 |
185 | /**
186 | * Draw stepped line between two DOM elements.
187 | */
188 | export class SteppedLineTo extends LineTo {}
189 |
190 | /**
191 | * Draw line using pixel coordinates (relative to viewport).
192 | */
193 | export class Line extends PureComponent {
194 | /**
195 | * Find element by class
196 | */
197 | findElement: (className: string) => Element;
198 | }
199 |
200 | /**
201 | * Draw stepped line using pixel coordinates (relative to viewport).
202 | */
203 | export class SteppedLine extends PureComponent {
204 | /**
205 | * Render vertically
206 | */
207 | renderVertical: () => React.ReactNode;
208 |
209 | /**
210 | * Render horizontally
211 | */
212 | renderHorizontal: () => React.ReactNode;
213 | }
214 | }
215 |
--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React, { Component, PureComponent } from 'react';
3 |
4 | const defaultAnchor = { x: 0.5, y: 0.5 };
5 | const defaultBorderColor = '#f00';
6 | const defaultBorderStyle = 'solid';
7 | const defaultBorderWidth = 1;
8 |
9 | const optionalStyleProps = {
10 | borderColor: PropTypes.string,
11 | borderStyle: PropTypes.string,
12 | borderWidth: PropTypes.number,
13 | className: PropTypes.string,
14 | zIndex: PropTypes.number,
15 | };
16 |
17 | export default class LineTo extends Component {
18 | // eslint-disable-next-line camelcase
19 | UNSAFE_componentWillMount() {
20 | this.fromAnchor = this.parseAnchor(this.props.fromAnchor);
21 | this.toAnchor = this.parseAnchor(this.props.toAnchor);
22 | this.delay = this.parseDelay(this.props.delay);
23 | }
24 |
25 | componentDidMount() {
26 | this.delay = this.parseDelay(this.props.delay);
27 | if (typeof this.delay !== 'undefined') {
28 | this.deferUpdate(this.delay);
29 | }
30 | }
31 |
32 | // eslint-disable-next-line camelcase
33 | UNSAFE_componentWillReceiveProps(nextProps) {
34 | if (nextProps.fromAnchor !== this.props.fromAnchor) {
35 | this.fromAnchor = this.parseAnchor(this.props.fromAnchor);
36 | }
37 | if (nextProps.toAnchor !== this.props.toAnchor) {
38 | this.toAnchor = this.parseAnchor(this.props.toAnchor);
39 | }
40 | this.delay = this.parseDelay(nextProps.delay);
41 | if (typeof this.delay !== 'undefined') {
42 | this.deferUpdate(this.delay);
43 | }
44 | }
45 |
46 | componentWillUnmount() {
47 | if (this.t) {
48 | clearTimeout(this.t);
49 | this.t = null;
50 | }
51 | }
52 |
53 | shouldComponentUpdate() {
54 | // Always update component if the parent component has been updated.
55 | // The reason for this is that we would not only like to update
56 | // this component when the props have changed, but also when
57 | // the position of our target elements has changed.
58 | // We could return true only if the positions of `from` and `to` have
59 | // changed, but that may be expensive and unnecessary.
60 | return true;
61 | }
62 |
63 | // Forced update after delay (MS)
64 | deferUpdate(delay) {
65 | if (this.t) {
66 | clearTimeout(this.t);
67 | }
68 | this.t = setTimeout(() => this.forceUpdate(), delay);
69 | }
70 |
71 | parseDelay(value) {
72 | if (typeof value === 'undefined') {
73 | return value;
74 | } else if (typeof value === 'boolean' && value) {
75 | return 0;
76 | }
77 | const delay = parseInt(value, 10);
78 | if (isNaN(delay) || !isFinite(delay)) {
79 | throw new Error(`LinkTo could not parse delay attribute "${value}"`);
80 | }
81 | return delay;
82 | }
83 |
84 | parseAnchorPercent(value) {
85 | const percent = parseFloat(value) / 100;
86 | if (isNaN(percent) || !isFinite(percent)) {
87 | throw new Error(`LinkTo could not parse percent value "${value}"`);
88 | }
89 | return percent;
90 | }
91 |
92 | parseAnchorText(value) {
93 | // Try to infer the relevant axis.
94 | switch (value) {
95 | case 'top':
96 | return { y: 0 };
97 | case 'left':
98 | return { x: 0 };
99 | case 'middle':
100 | return { y: 0.5 };
101 | case 'center':
102 | return { x: 0.5 };
103 | case 'bottom':
104 | return { y: 1 };
105 | case 'right':
106 | return { x: 1 };
107 | }
108 | return null;
109 | }
110 |
111 | parseAnchor(value) {
112 | if (!value) {
113 | return defaultAnchor;
114 | }
115 | const parts = value.split(' ');
116 | if (parts.length > 2) {
117 | throw new Error('LinkTo anchor format is " "');
118 | }
119 | const [x, y] = parts;
120 | return Object.assign({}, defaultAnchor,
121 | x ? this.parseAnchorText(x) || { x: this.parseAnchorPercent(x) } : {},
122 | y ? this.parseAnchorText(y) || { y: this.parseAnchorPercent(y) } : {}
123 | );
124 | }
125 |
126 | findElement(className) {
127 | return document.getElementsByClassName(className)[0];
128 | }
129 |
130 | detect() {
131 | const { from, to, within = '' } = this.props;
132 |
133 | const a = this.findElement(from);
134 | const b = this.findElement(to);
135 |
136 | if (!a || !b) {
137 | return false;
138 | }
139 |
140 | const anchor0 = this.fromAnchor;
141 | const anchor1 = this.toAnchor;
142 |
143 | const box0 = a.getBoundingClientRect();
144 | const box1 = b.getBoundingClientRect();
145 |
146 | let offsetX = window.pageXOffset;
147 | let offsetY = window.pageYOffset;
148 |
149 | if (within) {
150 | const p = this.findElement(within);
151 | const boxp = p.getBoundingClientRect();
152 |
153 | offsetX -= boxp.left + (window.pageXOffset || document.documentElement.scrollLeft) - p.scrollLeft;
154 | offsetY -= boxp.top + (window.pageYOffset || document.documentElement.scrollTop) - p.scrollTop;
155 | }
156 |
157 | const x0 = box0.left + box0.width * anchor0.x + offsetX;
158 | const x1 = box1.left + box1.width * anchor1.x + offsetX;
159 | const y0 = box0.top + box0.height * anchor0.y + offsetY;
160 | const y1 = box1.top + box1.height * anchor1.y + offsetY;
161 |
162 | return { x0, y0, x1, y1 };
163 | }
164 |
165 | render() {
166 | const points = this.detect();
167 | return points ? (
168 |
169 | ) : null;
170 | }
171 | }
172 |
173 | LineTo.propTypes = {
174 | from: PropTypes.string.isRequired,
175 | to: PropTypes.string.isRequired,
176 | within: PropTypes.string,
177 | fromAnchor: PropTypes.string,
178 | toAnchor: PropTypes.string,
179 | delay: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
180 | ...optionalStyleProps,
181 | };
182 |
183 | export class SteppedLineTo extends LineTo {
184 | render() {
185 | const points = this.detect();
186 | return points ? (
187 |
188 | ) : null;
189 | }
190 | }
191 |
192 | export class Line extends PureComponent {
193 | componentDidMount() {
194 | // Append rendered DOM element to the container the
195 | // offsets were calculated for
196 | this.within.appendChild(this.el);
197 | }
198 |
199 | componentWillUnmount() {
200 | this.within.removeChild(this.el);
201 | }
202 |
203 | findElement(className) {
204 | return document.getElementsByClassName(className)[0];
205 | }
206 |
207 | render() {
208 | const { x0, y0, x1, y1, within = '' } = this.props;
209 |
210 | this.within = within ? this.findElement(within) : document.body;
211 |
212 | const dy = y1 - y0;
213 | const dx = x1 - x0;
214 |
215 | const angle = Math.atan2(dy, dx) * 180 / Math.PI;
216 | const length = Math.sqrt(dx * dx + dy * dy);
217 |
218 | const positionStyle = {
219 | position: 'absolute',
220 | top: `${y0}px`,
221 | left: `${x0}px`,
222 | width: `${length}px`,
223 | zIndex: Number.isFinite(this.props.zIndex)
224 | ? String(this.props.zIndex)
225 | : '1',
226 | transform: `rotate(${angle}deg)`,
227 | // Rotate around (x0, y0)
228 | transformOrigin: '0 0',
229 | };
230 |
231 | const defaultStyle = {
232 | borderTopColor: this.props.borderColor || defaultBorderColor,
233 | borderTopStyle: this.props.borderStyle || defaultBorderStyle,
234 | borderTopWidth: this.props.borderWidth || defaultBorderWidth,
235 | };
236 |
237 | const props = {
238 | className: this.props.className,
239 | style: Object.assign({}, defaultStyle, positionStyle),
240 | }
241 |
242 | // We need a wrapper element to prevent an exception when then
243 | // React component is removed. This is because we manually
244 | // move the rendered DOM element after creation.
245 | return (
246 |
247 |
{ this.el = el; }}
249 | {...props}
250 | />
251 |
252 | );
253 | }
254 | }
255 |
256 | Line.propTypes = {
257 | x0: PropTypes.number.isRequired,
258 | y0: PropTypes.number.isRequired,
259 | x1: PropTypes.number.isRequired,
260 | y1: PropTypes.number.isRequired,
261 | ...optionalStyleProps,
262 | };
263 |
264 | export class SteppedLine extends PureComponent {
265 | render() {
266 | if (this.props.orientation === 'h') {
267 | return this.renderHorizontal();
268 | }
269 | return this.renderVertical();
270 | }
271 |
272 | renderVertical() {
273 | const x0 = Math.round(this.props.x0);
274 | const y0 = Math.round(this.props.y0);
275 | const x1 = Math.round(this.props.x1);
276 | const y1 = Math.round(this.props.y1);
277 |
278 | const dx = x1 - x0;
279 | if (Math.abs(dx) <= 1) {
280 | return
;
281 | }
282 |
283 | const borderWidth = this.props.borderWidth || defaultBorderWidth;
284 | const y2 = Math.round((y0 + y1) / 2);
285 |
286 | const xOffset = dx > 0 ? borderWidth : 0;
287 | const minX = Math.min(x0, x1) - xOffset;
288 | const maxX = Math.max(x0, x1);
289 |
290 | return (
291 |
292 |
293 |
294 |
295 |
296 | );
297 | }
298 |
299 | renderHorizontal() {
300 | const x0 = Math.round(this.props.x0);
301 | const y0 = Math.round(this.props.y0);
302 | const x1 = Math.round(this.props.x1);
303 | const y1 = Math.round(this.props.y1);
304 |
305 | const dy = y1 - y0;
306 | if (Math.abs(dy) <= 1) {
307 | return
;
308 | }
309 |
310 | const borderWidth = this.props.borderWidth || defaultBorderWidth;
311 | const x2 = Math.round((x0 + x1) / 2);
312 |
313 | const yOffset = dy < 0 ? borderWidth : 0;
314 | const minY = Math.min(y0, y1) - yOffset;
315 | const maxY = Math.max(y0, y1);
316 |
317 | return (
318 |
319 |
320 |
321 |
322 |
323 | );
324 | }
325 | }
326 |
327 | SteppedLine.propTypes = {
328 | x0: PropTypes.number.isRequired,
329 | y0: PropTypes.number.isRequired,
330 | x1: PropTypes.number.isRequired,
331 | y1: PropTypes.number.isRequired,
332 | orientation: PropTypes.oneOf(['h', 'v']),
333 | ...optionalStyleProps,
334 | };
335 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | const path = require('path')
3 | const ESLintPlugin = require('eslint-webpack-plugin')
4 |
5 | const outputPath = path.join(__dirname, 'dist')
6 |
7 | const config = {
8 | entry: './src/index.jsx',
9 |
10 | mode: 'production',
11 | plugins: [new ESLintPlugin({ extensions: '.jsx' })],
12 |
13 | module: {
14 | rules: [
15 | {
16 | test: /\.jsx?$/,
17 | use: ['babel-loader'],
18 | exclude: /node_modules/,
19 | },
20 | ]
21 | },
22 |
23 | externals: [
24 | 'prop-types',
25 | 'react'
26 | ]
27 | };
28 |
29 | module.exports = [
30 | Object.assign({}, config, {
31 | output: {
32 | path: outputPath,
33 | filename: 'react-lineto.js',
34 | library: 'react-lineto',
35 | libraryTarget: 'umd',
36 | umdNamedDefine: true,
37 | },
38 | optimization: {
39 | minimize: false,
40 | }
41 | }),
42 | Object.assign({}, config, {
43 | output: {
44 | path: outputPath,
45 | filename: 'react-lineto.min.js',
46 | library: 'react-lineto',
47 | libraryTarget: 'umd',
48 | umdNamedDefine: true,
49 | }
50 | })
51 | ];
52 |
--------------------------------------------------------------------------------
/webpack.demo.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | const path = require('path')
3 | const ESLintPlugin = require('eslint-webpack-plugin')
4 |
5 | module.exports = {
6 | entry: './demo/index.jsx',
7 |
8 | mode: 'development',
9 | plugins: [new ESLintPlugin({ extensions: '.jsx' })],
10 |
11 | module: {
12 | rules: [
13 | {
14 | test: /\.jsx?$/,
15 | use: ['babel-loader'],
16 | exclude: /node_modules/
17 | }
18 | ]
19 | },
20 |
21 | devtool: 'source-map',
22 |
23 | devServer: {
24 | host: '0.0.0.0',
25 | port: 4567,
26 | contentBase: path.join(__dirname, 'demo'),
27 | },
28 | };
29 |
--------------------------------------------------------------------------------