├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── src
├── demo
│ ├── components
│ │ ├── MeasuredImage.js
│ │ ├── MeasurementApp.css
│ │ └── MeasurementApp.js
│ ├── images
│ │ └── pollen.jpg
│ ├── index.html
│ └── index.js
└── lib
│ ├── components
│ ├── MeasurementLayer.css
│ ├── MeasurementLayer.js
│ ├── buttons
│ │ ├── Icons.js
│ │ └── MeasurementButtons.js
│ └── core
│ │ ├── CircleMeasurement.js
│ │ ├── LineMeasurement.js
│ │ ├── MeasurementLayerBase.css
│ │ ├── MeasurementLayerBase.js
│ │ ├── TextAnchor.js
│ │ └── TextAnnotation.js
│ ├── index.js
│ └── utils
│ └── MeasurementUtils.js
├── webpack.config.demo.js
├── webpack.config.dev.js
└── webpack.config.lib.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["transform-flow-strip-types", "transform-object-rest-spread"],
3 | "presets": ["env", "react", "stage-0"]
4 | }
5 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /build
2 | /node_modules
3 | npm-debug.log
4 | .DS_Store
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Robert Fisher
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.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-measurements
2 |
3 | A React component for measuring & annotating images.
4 |
5 | ## Demo
6 |
7 | Check out the demo [here](https://rmfisher.github.io/react-measurements).
8 |
9 | ## Usage
10 |
11 | ```javascript
12 | import React from "react";
13 | import {
14 | MeasurementLayer,
15 | calculateDistance,
16 | calculateArea
17 | } from "react-measurements";
18 |
19 | class App extends React.Component {
20 | state = { measurements: [] };
21 |
22 | render() {
23 | return (
24 |
33 |
42 | );
43 | }
44 |
45 | onChange = measurements => this.setState({ ...this.state, measurements });
46 |
47 | measureLine = line => Math.round(calculateDistance(line, 100, 100)) + " mm";
48 |
49 | measureCircle = circle =>
50 | Math.round(calculateArea(circle, 100, 100)) + " mm²";
51 | }
52 | ```
53 |
54 | ## Scope
55 |
56 | The component is currently read-only on mobile. A mouse is required to create and edit measurements.
57 |
58 | ## License
59 |
60 | MIT
61 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-measurements",
3 | "version": "0.6.8",
4 | "description": "A React component for measuring & annotating images.",
5 | "main": "build/lib/index.js",
6 | "author": "Robert Fisher",
7 | "repository": "https://github.com/rmfisher/react-measurements",
8 | "license": "MIT",
9 | "peerDependencies": {
10 | "draft-js": "^0.10.3",
11 | "react": "^16.2.0"
12 | },
13 | "dependencies": {},
14 | "devDependencies": {
15 | "babel-core": "^6.26.0",
16 | "babel-loader": "^7.1.2",
17 | "babel-plugin-transform-object-rest-spread": "^6.26.0",
18 | "babel-preset-env": "^1.6.1",
19 | "babel-preset-react": "6.24.1",
20 | "babel-preset-stage-0": "^6.24.1",
21 | "cross-env": "^5.1.1",
22 | "css-loader": "^0.28.7",
23 | "draft-js": "^0.10.4",
24 | "file-loader": "^1.1.5",
25 | "gh-pages": "^1.0.0",
26 | "html-webpack-plugin": "^2.30.1",
27 | "raf": "^3.4.0",
28 | "react": "^16.2.0",
29 | "react-dom": "^16.2.0",
30 | "style-loader": "^0.19.0",
31 | "webpack": "^2.6.1",
32 | "webpack-dev-server": "^2.9.4"
33 | },
34 | "scripts": {
35 | "build": "npm run build:lib && npm run build:demo",
36 | "build:lib": "cross-env NODE_ENV=production webpack --config webpack.config.lib.js",
37 | "build:demo": "cross-env NODE_ENV=production webpack --config webpack.config.demo.js",
38 | "deploy": "gh-pages -d build/demo",
39 | "start": "webpack-dev-server --hot --inline --config webpack.config.dev.js"
40 | },
41 | "files": [
42 | "build/lib/index.js"
43 | ]
44 | }
45 |
--------------------------------------------------------------------------------
/src/demo/components/MeasuredImage.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from "react";
2 | import MeasurementLayer from "../../lib/components/MeasurementLayer";
3 | import {
4 | calculateDistance,
5 | calculateArea
6 | } from "../../lib/utils/MeasurementUtils";
7 | import { EditorState, ContentState } from "draft-js";
8 | import pollenImage from "../images/pollen.jpg";
9 |
10 | export default class MeasuredImage extends PureComponent {
11 | constructor(props) {
12 | super(props);
13 | this.state = {
14 | measurements: this.createInitialState(),
15 | widthInPx: 0,
16 | heightInPx: 0
17 | };
18 | }
19 |
20 | componentDidMount() {
21 | window.addEventListener("resize", this.onImageBoundsChanged);
22 | this.onImageBoundsChanged();
23 | }
24 |
25 | componentWillUnmount() {
26 | window.addEventListener("resize", this.onImageBoundsChanged);
27 | }
28 |
29 | render() {
30 | return (
31 |
32 |
33 |
(this.image = e)}
37 | onLoad={this.onLoad}
38 | />
39 |
47 |
48 |
11 |
12 |
20 |
21 | A mouse is required for editing, sorry!
22 |
23 |
24 |
25 |
30 |
31 |
33 |
Fig. 1: Pollen grains under an electron microscope.
34 |
35 |
36 |
React Measurements
9 |
14 | You need to enable JavaScript to view this page.
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/src/demo/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import MeasurementApp from "./components/MeasurementApp";
4 |
5 | ReactDOM.render( (this.root = e)}>
14 |
29 | )
30 | );
31 | }
32 |
33 | toggleMode = mode =>
34 | this.setState({ mode: mode === this.state.mode ? null : mode });
35 |
36 | onCommit = measurement => {
37 | this.setState({ mode: null });
38 | if (this.props.onCommit) {
39 | this.props.onCommit(measurement);
40 | }
41 | };
42 | }
43 |
--------------------------------------------------------------------------------
/src/lib/components/buttons/Icons.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const RulerIcon = () => {
4 | const path =
5 | "M 1 2 L 1 12 L 1 13 L 14 13 L 14 12 L 14 2 L 1 2 z M 2 3 L 3 3 L 3 5 L 2 5 L 2 3 z M 4 3 L 5 3 L 5 8 L 4 8 L 4 3 z M 6 3 " +
6 | "L 7 3 L 7 5 L 6 5 L 6 3 z M 8 3 L 9 3 L 9 5 L 8 5 L 8 3 z M 10 3 L 11 3 L 11 8 L 10 8 L 10 3 z M 12 3 L 13 3 L 13 5 L 12 5 L 12 3 z ";
7 | return (
8 |
9 |
11 | );
12 | };
13 |
14 | export const CircleIcon = () => (
15 |
16 |
18 | );
19 |
20 | export const TextIcon = () => {
21 | const path =
22 | "M 5.6367188 1 L 1 14 L 4.2617188 14 L 5.1308594 11.371094 L 9.7851562 11.371094 L 10.652344 14 L 14 14 " +
23 | "L 9.3632812 1 L 5.6367188 1 z M 7.4570312 4.3261719 L 9 8.9882812 L 5.9160156 8.9882812 L 7.4570312 4.3261719 z ";
24 | return (
25 |
26 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/src/lib/components/buttons/MeasurementButtons.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from "react";
2 | import { RulerIcon, CircleIcon, TextIcon } from "./Icons";
3 |
4 | export default class MeasurementButtons extends PureComponent {
5 | componentDidMount() {
6 | this.root.addEventListener("mousedown", this.onRootMouseDown);
7 | }
8 |
9 | componentWillUnmount() {
10 | this.root.addEventListener("mousedown", this.onRootMouseDown);
11 | }
12 |
13 | render() {
14 | const rootClass = "button-bar" + (this.props.mode ? " pressed" : "");
15 | const lineClass =
16 | "line-button" + (this.props.mode === "line" ? " pressed" : "");
17 | const circleClass =
18 | "circle-button" + (this.props.mode === "circle" ? " pressed" : "");
19 | const textClass =
20 | "text-button" + (this.props.mode === "text" ? " pressed" : "");
21 |
22 | return (
23 | (this.root = e)}>
24 | this.props.onClick("line")}
28 | >
29 |
31 | this.props.onClick("circle")}
35 | >
36 |
38 | this.props.onClick("text")}
42 | >
43 |
45 |
46 | );
47 | }
48 |
49 | onRootMouseDown = event => {
50 | event.stopPropagation();
51 | event.preventDefault();
52 | };
53 | }
54 |
--------------------------------------------------------------------------------
/src/lib/components/core/CircleMeasurement.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from "react";
2 | import TextAnchor from "./TextAnchor";
3 |
4 | export const minRadiusInPx = 3;
5 | const textOffset = 16;
6 |
7 | export default class CircleMeasurement extends PureComponent {
8 | componentDidMount() {
9 | this.fill.addEventListener("mousedown", this.onFillMouseDown);
10 | this.stroke.addEventListener("mousedown", this.onStrokeMouseDown);
11 | document.addEventListener("mousemove", this.onMouseMove);
12 | window.addEventListener("mouseup", this.onMouseUp);
13 | window.addEventListener("blur", this.endDrag);
14 | }
15 |
16 | componentWillUnmount() {
17 | this.fill.removeEventListener("mousedown", this.onFillMouseDown);
18 | this.stroke.removeEventListener("mousedown", this.onStrokeMouseDown);
19 | document.removeEventListener("mousemove", this.onMouseMove);
20 | document.removeEventListener("touchmove", this.onTouchMove);
21 | window.removeEventListener("mouseup", this.onMouseUp);
22 | window.removeEventListener("blur", this.endDrag);
23 | }
24 |
25 | render() {
26 | const centerX = this.props.circle.centerX * this.props.parentWidth;
27 | const centerY = this.props.circle.centerY * this.props.parentHeight;
28 | const radius =
29 | this.props.circle.radius *
30 | Math.sqrt(this.props.parentWidth * this.props.parentHeight);
31 | const textY = centerY + radius + textOffset;
32 | const text = this.props.measureCircle(this.props.circle);
33 |
34 | return (
35 | (this.root = e)}>
36 |
41 | (this.text = e)}>
42 | {text}
43 |
44 |
45 |
46 |
47 | (this.fill = e)}
53 | />
54 | (this.stroke = e)}
60 | />
61 | (this.circle = e)}
67 | />
68 |
69 |
70 |
(this.root = e)}>
61 |
62 |
63 | (this.midGrabber = e)}
70 | />
71 | (this.midLine = e)}
78 | />
79 |
80 |
81 | (this.startGrabber = e)}
88 | />
89 | (this.startLine = e)}
96 | />
97 |
98 |
99 | (this.endGrabber = e)}
106 | />
107 | (this.endLine = e)}
114 | />
115 |
116 |
117 |
123 | (this.text = e)}>
124 | {text}
125 |
126 |
127 |
(this.root = e)}>
32 | {this.props.measurements.map(this.createMeasurementComponent)}
33 |
34 | );
35 | }
36 |
37 | createMeasurementComponent = measurement => {
38 | if (measurement.type === "line") {
39 | return (
40 |
42 |
(this.textBox = e)}>
43 | {this.props.children}
44 |
(this.deleteButton = e)}
51 | >
52 |
53 |
58 |
59 |
60 |
(this.root = e)}>
135 |
136 |
137 |
138 | (this.maskRect = e)} />
140 |
141 |
142 | (this.lineGrabber = e)}
149 | />
150 | (this.headGrabber = e)}
155 | />
156 | (this.head = e)}
161 | />
162 | (this.line = e)}
166 | mask={lineMask}
167 | />
168 |
169 |
174 | (this.text = e)}>
175 | (this.editor = e)}
183 | />
184 |
185 |
186 |
(this.image = e)}
37 | onLoad={this.onLoad}
38 | />
39 |