Initial commit
This commit is contained in:
Christopher Chedeau
parent
ec23829fce
commit
6278cd9366
28
package.json
Normal file
28
package.json
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"name": "react",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"keywords": [],
|
||||||
|
"main": "src/index.js",
|
||||||
|
"dependencies": {
|
||||||
|
"react": "16.12.0",
|
||||||
|
"react-dom": "16.12.0",
|
||||||
|
"react-scripts": "3.0.1",
|
||||||
|
"roughjs": "3.1.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"typescript": "3.3.3"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test --env=jsdom",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not ie <= 11",
|
||||||
|
"not op_mini all"
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
public/FG_Virgil.ttf
Normal file
BIN
public/FG_Virgil.ttf
Normal file
Binary file not shown.
43
public/index.html
Normal file
43
public/index.html
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="theme-color" content="#000000">
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is added to the
|
||||||
|
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||||
|
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>React App</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
You need to enable JavaScript to run this app.
|
||||||
|
</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
187
src/index.js
Normal file
187
src/index.js
Normal file
@ -0,0 +1,187 @@
|
|||||||
|
import React from "react";
|
||||||
|
import ReactDOM from "react-dom";
|
||||||
|
import rough from "roughjs/dist/rough.umd.js";
|
||||||
|
|
||||||
|
import "./styles.css";
|
||||||
|
|
||||||
|
var elements = [];
|
||||||
|
|
||||||
|
function newElement(type, x, y) {
|
||||||
|
const element = {
|
||||||
|
type: type,
|
||||||
|
x: x,
|
||||||
|
y: y,
|
||||||
|
width: 0,
|
||||||
|
height: 0
|
||||||
|
};
|
||||||
|
generateShape(element);
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
|
||||||
|
function rotate(x1, y1, x2, y2, angle) {
|
||||||
|
// 𝑎′𝑥=(𝑎𝑥−𝑐𝑥)cos𝜃−(𝑎𝑦−𝑐𝑦)sin𝜃+𝑐𝑥
|
||||||
|
// 𝑎′𝑦=(𝑎𝑥−𝑐𝑥)sin𝜃+(𝑎𝑦−𝑐𝑦)cos𝜃+𝑐𝑦.
|
||||||
|
// https://math.stackexchange.com/questions/2204520/how-do-i-rotate-a-line-segment-in-a-specific-point-on-the-line
|
||||||
|
return [
|
||||||
|
(x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle) + x2,
|
||||||
|
(x1 - x2) * Math.sin(angle) + (y1 - y2) * Math.cos(angle) + y2
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
var generator = rough.generator();
|
||||||
|
|
||||||
|
function generateShape(element) {
|
||||||
|
if (element.type === "selection") {
|
||||||
|
element.draw = (rc, context) => {
|
||||||
|
context.fillStyle = "rgba(0, 0, 255, 0.10)";
|
||||||
|
context.fillRect(element.x, element.y, element.width, element.height);
|
||||||
|
};
|
||||||
|
} else if (element.type === "rectangle") {
|
||||||
|
const shape = generator.rectangle(
|
||||||
|
element.x,
|
||||||
|
element.y,
|
||||||
|
element.width,
|
||||||
|
element.height
|
||||||
|
);
|
||||||
|
element.draw = (rc, context) => {
|
||||||
|
rc.draw(shape);
|
||||||
|
};
|
||||||
|
} else if (element.type === "ellipse") {
|
||||||
|
const shape = generator.ellipse(
|
||||||
|
element.x + element.width / 2,
|
||||||
|
element.y + element.height / 2,
|
||||||
|
element.width,
|
||||||
|
element.height
|
||||||
|
);
|
||||||
|
element.draw = (rc, context) => {
|
||||||
|
rc.draw(shape);
|
||||||
|
};
|
||||||
|
} else if (element.type === "arrow") {
|
||||||
|
const x1 = element.x;
|
||||||
|
const y1 = element.y;
|
||||||
|
const x2 = element.x + element.width;
|
||||||
|
const y2 = element.y + element.height;
|
||||||
|
|
||||||
|
const size = 30; // pixels
|
||||||
|
const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
|
||||||
|
// Scale down the arrow until we hit a certain size so that it doesn't look weird
|
||||||
|
const minSize = Math.min(size, distance / 2);
|
||||||
|
const xs = x2 - ((x2 - x1) / distance) * minSize;
|
||||||
|
const ys = y2 - ((y2 - y1) / distance) * minSize;
|
||||||
|
|
||||||
|
const angle = 20; // degrees
|
||||||
|
const [x3, y3] = rotate(xs, ys, x2, y2, (-angle * Math.PI) / 180);
|
||||||
|
const [x4, y4] = rotate(xs, ys, x2, y2, (angle * Math.PI) / 180);
|
||||||
|
|
||||||
|
const shapes = [
|
||||||
|
generator.line(x1, y1, x2, y2),
|
||||||
|
generator.line(x3, y3, x2, y2),
|
||||||
|
generator.line(x4, y4, x2, y2)
|
||||||
|
];
|
||||||
|
|
||||||
|
element.draw = (rc, context) => {
|
||||||
|
shapes.forEach(shape => rc.draw(shape));
|
||||||
|
};
|
||||||
|
return;
|
||||||
|
} else if (element.type === "text") {
|
||||||
|
if (element.text === undefined) {
|
||||||
|
element.text = prompt("What text do you want?");
|
||||||
|
}
|
||||||
|
element.draw = (rc, context) => {
|
||||||
|
context.font = "20px Virgil";
|
||||||
|
const measure = context.measureText(element.text);
|
||||||
|
const height =
|
||||||
|
measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent;
|
||||||
|
context.fillText(
|
||||||
|
element.text,
|
||||||
|
element.x - measure.width / 2,
|
||||||
|
element.y + measure.actualBoundingBoxAscent - height / 2
|
||||||
|
);
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
throw new Error("Unimplemented type " + element.type);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const [draggingElement, setDraggingElement] = React.useState(null);
|
||||||
|
const [elementType, setElementType] = React.useState("selection");
|
||||||
|
const [selectedElements, setSelectedElements] = React.useState([]);
|
||||||
|
function ElementOption({ type, children }) {
|
||||||
|
return (
|
||||||
|
<label>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
checked={elementType === type}
|
||||||
|
onChange={() => setElementType(type)}
|
||||||
|
/>
|
||||||
|
{children}
|
||||||
|
</label>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<ElementOption type="rectangle">Rectangle</ElementOption>
|
||||||
|
<ElementOption type="ellipse">Ellipse</ElementOption>
|
||||||
|
<ElementOption type="arrow">Arrow</ElementOption>
|
||||||
|
<ElementOption type="text">Text</ElementOption>
|
||||||
|
<ElementOption type="selection">Selection</ElementOption>
|
||||||
|
<canvas
|
||||||
|
id="canvas"
|
||||||
|
width={window.innerWidth}
|
||||||
|
height={window.innerHeight}
|
||||||
|
onMouseDown={e => {
|
||||||
|
const element = newElement(
|
||||||
|
elementType,
|
||||||
|
e.clientX - e.target.offsetLeft,
|
||||||
|
e.clientY - e.target.offsetTop
|
||||||
|
);
|
||||||
|
elements.push(element);
|
||||||
|
setDraggingElement(element);
|
||||||
|
drawScene();
|
||||||
|
}}
|
||||||
|
onMouseUp={e => {
|
||||||
|
setDraggingElement(null);
|
||||||
|
drawScene();
|
||||||
|
}}
|
||||||
|
onMouseMove={e => {
|
||||||
|
if (!draggingElement) return;
|
||||||
|
let width = e.clientX - e.target.offsetLeft - draggingElement.x;
|
||||||
|
let height = e.clientY - e.target.offsetTop - draggingElement.y;
|
||||||
|
draggingElement.width = width;
|
||||||
|
// Make a perfect square or circle when shift is enabled
|
||||||
|
draggingElement.height = e.shiftKey ? width : height;
|
||||||
|
generateShape(draggingElement);
|
||||||
|
drawScene();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const rootElement = document.getElementById("root");
|
||||||
|
|
||||||
|
function drawScene() {
|
||||||
|
ReactDOM.render(<App />, rootElement);
|
||||||
|
|
||||||
|
const canvas = document.getElementById("canvas");
|
||||||
|
const rc = rough.canvas(canvas);
|
||||||
|
const context = canvas.getContext("2d");
|
||||||
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
elements.forEach(element => {
|
||||||
|
element.draw(rc, context);
|
||||||
|
if (true || element.isSelected) {
|
||||||
|
const margin = 4;
|
||||||
|
context.setLineDash([8, 4]);
|
||||||
|
context.strokeRect(
|
||||||
|
element.x - margin,
|
||||||
|
element.y - margin,
|
||||||
|
element.width + margin * 2,
|
||||||
|
element.height + margin * 2
|
||||||
|
);
|
||||||
|
context.setLineDash([]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
drawScene();
|
||||||
5
src/styles.css
Normal file
5
src/styles.css
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
/* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */
|
||||||
|
@font-face {
|
||||||
|
font-family: "Virgil";
|
||||||
|
src: url("https://uploads.codesandbox.io/uploads/user/ed077012-e728-4a42-8395-cbd299149d62/AflB-FG_Virgil.ttf");
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user