index.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505
  1. import React from "react";
  2. import ReactDOM from "react-dom";
  3. import rough from "roughjs/dist/rough.umd.js";
  4. import "./styles.css";
  5. var elements = [];
  6. function isInsideAnElement(x, y) {
  7. return (element) => {
  8. const x1 = getElementAbsoluteX1(element)
  9. const x2 = getElementAbsoluteX2(element)
  10. const y1 = getElementAbsoluteY1(element)
  11. const y2 = getElementAbsoluteY2(element)
  12. return (x >= x1 && x <= x2) && (y >= y1 && y <= y2)
  13. }
  14. }
  15. function newElement(type, x, y, width = 0, height = 0) {
  16. const element = {
  17. type: type,
  18. x: x,
  19. y: y,
  20. width: width,
  21. height: height,
  22. isSelected: false
  23. };
  24. return element;
  25. }
  26. function exportAsPNG({ background, visibleOnly, padding = 10 }) {
  27. clearSelection();
  28. drawScene();
  29. let subCanvasX1 = Infinity;
  30. let subCanvasX2 = 0;
  31. let subCanvasY1 = Infinity;
  32. let subCanvasY2 = 0;
  33. elements.forEach(element => {
  34. subCanvasX1 = Math.min(subCanvasX1, getElementAbsoluteX1(element));
  35. subCanvasX2 = Math.max(subCanvasX2, getElementAbsoluteX2(element));
  36. subCanvasY1 = Math.min(subCanvasY1, getElementAbsoluteY1(element));
  37. subCanvasY2 = Math.max(subCanvasY2, getElementAbsoluteY2(element));
  38. });
  39. let targetCanvas = canvas;
  40. if ( visibleOnly ) {
  41. targetCanvas = document.createElement('canvas');
  42. targetCanvas.style.display = 'none';
  43. document.body.appendChild(targetCanvas);
  44. targetCanvas.width = subCanvasX2 - subCanvasX1 + padding * 2;
  45. targetCanvas.height = subCanvasY2 - subCanvasY1 + padding * 2;
  46. const targetCanvas_ctx = targetCanvas.getContext('2d');
  47. if ( background ) {
  48. targetCanvas_ctx.fillStyle = "#FFF";
  49. targetCanvas_ctx.fillRect(0, 0, canvas.width, canvas.height);
  50. }
  51. targetCanvas_ctx.drawImage(
  52. canvas,
  53. subCanvasX1 - padding, // x
  54. subCanvasY1 - padding, // y
  55. subCanvasX2 - subCanvasX1 + padding * 2, // width
  56. subCanvasY2 - subCanvasY1 + padding * 2, // height
  57. 0,
  58. 0,
  59. targetCanvas.width,
  60. targetCanvas.height
  61. );
  62. }
  63. const link = document.createElement('a');
  64. link.setAttribute('download', 'excalibur.png');
  65. link.setAttribute('href', targetCanvas.toDataURL("image/png"));
  66. link.click();
  67. link.remove();
  68. if ( targetCanvas !== canvas ) targetCanvas.remove();
  69. }
  70. function rotate(x1, y1, x2, y2, angle) {
  71. // 𝑎′𝑥=(𝑎𝑥−𝑐𝑥)cos𝜃−(𝑎𝑦−𝑐𝑦)sin𝜃+𝑐𝑥
  72. // 𝑎′𝑦=(𝑎𝑥−𝑐𝑥)sin𝜃+(𝑎𝑦−𝑐𝑦)cos𝜃+𝑐𝑦.
  73. // https://math.stackexchange.com/questions/2204520/how-do-i-rotate-a-line-segment-in-a-specific-point-on-the-line
  74. return [
  75. (x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle) + x2,
  76. (x1 - x2) * Math.sin(angle) + (y1 - y2) * Math.cos(angle) + y2
  77. ];
  78. }
  79. var generator = rough.generator();
  80. function generateDraw(element) {
  81. if (element.type === "selection") {
  82. element.draw = (rc, context) => {
  83. const fillStyle = context.fillStyle;
  84. context.fillStyle = "rgba(0, 0, 255, 0.10)";
  85. context.fillRect(element.x, element.y, element.width, element.height);
  86. context.fillStyle = fillStyle;
  87. };
  88. } else if (element.type === "rectangle") {
  89. const shape = generator.rectangle(0, 0, element.width, element.height);
  90. element.draw = (rc, context) => {
  91. context.translate(element.x, element.y);
  92. rc.draw(shape);
  93. context.translate(-element.x, -element.y);
  94. };
  95. } else if (element.type === "ellipse") {
  96. const shape = generator.ellipse(
  97. element.width / 2,
  98. element.height / 2,
  99. element.width,
  100. element.height
  101. );
  102. element.draw = (rc, context) => {
  103. context.translate(element.x, element.y);
  104. rc.draw(shape);
  105. context.translate(-element.x, -element.y);
  106. };
  107. } else if (element.type === "arrow") {
  108. const x1 = 0;
  109. const y1 = 0;
  110. const x2 = element.width;
  111. const y2 = element.height;
  112. const size = 30; // pixels
  113. const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
  114. // Scale down the arrow until we hit a certain size so that it doesn't look weird
  115. const minSize = Math.min(size, distance / 2);
  116. const xs = x2 - ((x2 - x1) / distance) * minSize;
  117. const ys = y2 - ((y2 - y1) / distance) * minSize;
  118. const angle = 20; // degrees
  119. const [x3, y3] = rotate(xs, ys, x2, y2, (-angle * Math.PI) / 180);
  120. const [x4, y4] = rotate(xs, ys, x2, y2, (angle * Math.PI) / 180);
  121. const shapes = [
  122. // \
  123. generator.line(x3, y3, x2, y2),
  124. // -----
  125. generator.line(x1, y1, x2, y2),
  126. // /
  127. generator.line(x4, y4, x2, y2)
  128. ];
  129. element.draw = (rc, context) => {
  130. context.translate(element.x, element.y);
  131. shapes.forEach(shape => rc.draw(shape));
  132. context.translate(-element.x, -element.y);
  133. };
  134. return;
  135. } else if (element.type === "text") {
  136. element.draw = (rc, context) => {
  137. const font = context.font;
  138. context.font = element.font;
  139. context.fillText(
  140. element.text,
  141. element.x,
  142. element.y + element.measure.actualBoundingBoxAscent
  143. );
  144. context.font = font;
  145. };
  146. } else {
  147. throw new Error("Unimplemented type " + element.type);
  148. }
  149. }
  150. // If the element is created from right to left, the width is going to be negative
  151. // This set of functions retrieves the absolute position of the 4 points.
  152. // We can't just always normalize it since we need to remember the fact that an arrow
  153. // is pointing left or right.
  154. function getElementAbsoluteX1(element) {
  155. return element.width >= 0 ? element.x : element.x + element.width;
  156. }
  157. function getElementAbsoluteX2(element) {
  158. return element.width >= 0 ? element.x + element.width : element.x;
  159. }
  160. function getElementAbsoluteY1(element) {
  161. return element.height >= 0 ? element.y : element.y + element.height;
  162. }
  163. function getElementAbsoluteY2(element) {
  164. return element.height >= 0 ? element.y + element.height : element.y;
  165. }
  166. function setSelection(selection) {
  167. const selectionX1 = getElementAbsoluteX1(selection);
  168. const selectionX2 = getElementAbsoluteX2(selection);
  169. const selectionY1 = getElementAbsoluteY1(selection);
  170. const selectionY2 = getElementAbsoluteY2(selection);
  171. elements.forEach(element => {
  172. const elementX1 = getElementAbsoluteX1(element);
  173. const elementX2 = getElementAbsoluteX2(element);
  174. const elementY1 = getElementAbsoluteY1(element);
  175. const elementY2 = getElementAbsoluteY2(element);
  176. element.isSelected =
  177. element.type !== "selection" &&
  178. selectionX1 <= elementX1 &&
  179. selectionY1 <= elementY1 &&
  180. selectionX2 >= elementX2 &&
  181. selectionY2 >= elementY2;
  182. });
  183. }
  184. function clearSelection() {
  185. elements.forEach(element => {
  186. element.isSelected = false;
  187. });
  188. }
  189. class App extends React.Component {
  190. componentDidMount() {
  191. this.onKeyDown = event => {
  192. if (event.key === "Backspace" && event.target.nodeName !== "INPUT") {
  193. for (var i = elements.length - 1; i >= 0; --i) {
  194. if (elements[i].isSelected) {
  195. elements.splice(i, 1);
  196. }
  197. }
  198. drawScene();
  199. event.preventDefault();
  200. } else if (
  201. event.key === "ArrowLeft" ||
  202. event.key === "ArrowRight" ||
  203. event.key === "ArrowUp" ||
  204. event.key === "ArrowDown"
  205. ) {
  206. const step = event.shiftKey ? 5 : 1;
  207. elements.forEach(element => {
  208. if (element.isSelected) {
  209. if (event.key === "ArrowLeft") element.x -= step;
  210. else if (event.key === "ArrowRight") element.x += step;
  211. else if (event.key === "ArrowUp") element.y -= step;
  212. else if (event.key === "ArrowDown") element.y += step;
  213. }
  214. });
  215. drawScene();
  216. event.preventDefault();
  217. }
  218. };
  219. document.addEventListener("keydown", this.onKeyDown, false);
  220. }
  221. componentWillUnmount() {
  222. document.removeEventListener("keydown", this.onKeyDown, false);
  223. }
  224. constructor() {
  225. super();
  226. this.state = {
  227. draggingElement: null,
  228. elementType: "selection",
  229. exportBackground: false,
  230. exportVisibleOnly: true,
  231. exportPadding: 10
  232. };
  233. }
  234. render() {
  235. const ElementOption = ({ type, children }) => {
  236. return (
  237. <label>
  238. <input
  239. type="radio"
  240. checked={this.state.elementType === type}
  241. onChange={() => {
  242. this.setState({ elementType: type });
  243. clearSelection();
  244. drawScene();
  245. }}
  246. />
  247. {children}
  248. </label>
  249. );
  250. };
  251. return <>
  252. <div className="exportWrapper">
  253. <button onClick={() => {
  254. exportAsPNG({
  255. background: this.state.exportBackground,
  256. visibleOnly: this.state.exportVisibleOnly,
  257. padding: this.state.exportPadding
  258. })
  259. }}>Export to png</button>
  260. <label>
  261. <input type="checkbox"
  262. checked={this.state.exportBackground}
  263. onChange={e => {
  264. this.setState({ exportBackground: e.target.checked })
  265. }}
  266. /> background
  267. </label>
  268. <label>
  269. <input type="checkbox"
  270. checked={this.state.exportVisibleOnly}
  271. onChange={e => {
  272. this.setState({ exportVisibleOnly: e.target.checked })
  273. }}
  274. />
  275. visible area only
  276. </label>
  277. (padding:
  278. <input type="number" value={this.state.exportPadding}
  279. onChange={e => {
  280. this.setState({ exportPadding: e.target.value });
  281. }}
  282. disabled={!this.state.exportVisibleOnly}/>
  283. px)
  284. </div>
  285. <div>
  286. {/* Can't use the <ElementOption> form because ElementOption is re-defined
  287. on every render, which would blow up and re-create the entire DOM tree,
  288. which in addition to being inneficient, messes up with browser text
  289. selection */}
  290. {ElementOption({ type: "rectangle", children: "Rectangle" })}
  291. {ElementOption({ type: "ellipse", children: "Ellipse" })}
  292. {ElementOption({ type: "arrow", children: "Arrow" })}
  293. {ElementOption({ type: "text", children: "Text" })}
  294. {ElementOption({ type: "selection", children: "Selection" })}
  295. <canvas
  296. id="canvas"
  297. width={window.innerWidth}
  298. height={window.innerHeight}
  299. onMouseDown={e => {
  300. const x = e.clientX - e.target.offsetLeft;
  301. const y = e.clientY - e.target.offsetTop;
  302. const element = newElement(this.state.elementType, x, y);
  303. let isDraggingElements = false;
  304. const cursorStyle = document.documentElement.style.cursor;
  305. if (this.state.elementType === "selection") {
  306. const selectedElement = elements.find(element => {
  307. const isSelected = isInsideAnElement(x, y)(element)
  308. if (isSelected) {
  309. element.isSelected = true
  310. }
  311. return isSelected
  312. })
  313. if (selectedElement) {
  314. this.setState({ draggingElement: selectedElement });
  315. } else {
  316. clearSelection()
  317. }
  318. isDraggingElements = elements.some(element => element.isSelected);
  319. if (isDraggingElements) {
  320. document.documentElement.style.cursor = "move";
  321. }
  322. }
  323. if (this.state.elementType === "text") {
  324. const text = prompt("What text do you want?");
  325. if (text === null) {
  326. return;
  327. }
  328. element.text = text;
  329. element.font = "20px Virgil";
  330. const font = context.font;
  331. context.font = element.font;
  332. element.measure = context.measureText(element.text);
  333. context.font = font;
  334. const height =
  335. element.measure.actualBoundingBoxAscent +
  336. element.measure.actualBoundingBoxDescent;
  337. // Center the text
  338. element.x -= element.measure.width / 2;
  339. element.y -= element.measure.actualBoundingBoxAscent;
  340. element.width = element.measure.width;
  341. element.height = height;
  342. }
  343. generateDraw(element);
  344. elements.push(element);
  345. if (this.state.elementType === "text") {
  346. this.setState({
  347. draggingElement: null,
  348. elementType: "selection"
  349. });
  350. element.isSelected = true;
  351. } else {
  352. this.setState({ draggingElement: element });
  353. }
  354. let lastX = x;
  355. let lastY = y;
  356. const onMouseMove = e => {
  357. if (isDraggingElements) {
  358. const selectedElements = elements.filter(el => el.isSelected);
  359. if (selectedElements.length) {
  360. const x = e.clientX - e.target.offsetLeft;
  361. const y = e.clientY - e.target.offsetTop;
  362. selectedElements.forEach(element => {
  363. element.x += x - lastX;
  364. element.y += y - lastY;
  365. });
  366. lastX = x;
  367. lastY = y;
  368. drawScene();
  369. return;
  370. }
  371. }
  372. // It is very important to read this.state within each move event,
  373. // otherwise we would read a stale one!
  374. const draggingElement = this.state.draggingElement;
  375. if (!draggingElement) return;
  376. let width = e.clientX - e.target.offsetLeft - draggingElement.x;
  377. let height = e.clientY - e.target.offsetTop - draggingElement.y;
  378. draggingElement.width = width;
  379. // Make a perfect square or circle when shift is enabled
  380. draggingElement.height = e.shiftKey ? width : height;
  381. generateDraw(draggingElement);
  382. if (this.state.elementType === "selection") {
  383. setSelection(draggingElement);
  384. }
  385. drawScene();
  386. };
  387. const onMouseUp = e => {
  388. const { draggingElement, elementType } = this.state
  389. window.removeEventListener("mousemove", onMouseMove);
  390. window.removeEventListener("mouseup", onMouseUp);
  391. document.documentElement.style.cursor = cursorStyle;
  392. // if no element is clicked, clear the selection and redraw
  393. if (draggingElement === null ) {
  394. clearSelection()
  395. drawScene();
  396. return
  397. }
  398. if (elementType === "selection") {
  399. if (isDraggingElements) {
  400. isDraggingElements = false;
  401. }
  402. elements.pop()
  403. } else {
  404. draggingElement.isSelected = true;
  405. }
  406. this.setState({
  407. draggingElement: null,
  408. elementType: "selection"
  409. });
  410. drawScene();
  411. };
  412. window.addEventListener("mousemove", onMouseMove);
  413. window.addEventListener("mouseup", onMouseUp);
  414. drawScene();
  415. }}
  416. />
  417. </div>
  418. </>;
  419. }
  420. }
  421. const rootElement = document.getElementById("root");
  422. ReactDOM.render(<App />, rootElement);
  423. const canvas = document.getElementById("canvas");
  424. const rc = rough.canvas(canvas);
  425. const context = canvas.getContext("2d");
  426. // Big hack to ensure that all the 1px lines are drawn at 1px instead of 2px
  427. // https://stackoverflow.com/questions/13879322/drawing-a-1px-thick-line-in-canvas-creates-a-2px-thick-line/13879402#comment90766599_13879402
  428. context.translate(0.5, 0.5);
  429. function drawScene() {
  430. ReactDOM.render(<App />, rootElement);
  431. context.clearRect(-0.5, -0.5, canvas.width, canvas.height);
  432. elements.forEach(element => {
  433. element.draw(rc, context);
  434. if (element.isSelected) {
  435. const margin = 4;
  436. const elementX1 = getElementAbsoluteX1(element);
  437. const elementX2 = getElementAbsoluteX2(element);
  438. const elementY1 = getElementAbsoluteY1(element);
  439. const elementY2 = getElementAbsoluteY2(element);
  440. const lineDash = context.getLineDash();
  441. context.setLineDash([8, 4]);
  442. context.strokeRect(
  443. elementX1 - margin,
  444. elementY1 - margin,
  445. elementX2 - elementX1 + margin * 2,
  446. elementY2 - elementY1 + margin * 2
  447. );
  448. context.setLineDash(lineDash);
  449. }
  450. });
  451. }
  452. drawScene();