From 8525480ad4dbcbf8c315fef05c11028ef30d26f7 Mon Sep 17 00:00:00 2001 From: Jared Palmer Date: Sun, 5 Jan 2020 11:53:50 -0800 Subject: [PATCH] Prettier --- src/index.tsx | 308 +++++++++++++++++++++++++------------------------- 1 file changed, 154 insertions(+), 154 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 57b5533f1..7133b751e 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,23 +1,23 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import rough from 'roughjs/bin/wrappers/rough'; -import { RoughCanvas } from 'roughjs/bin/canvas'; -import { SketchPicker } from 'react-color'; +import React from "react"; +import ReactDOM from "react-dom"; +import rough from "roughjs/bin/wrappers/rough"; +import { RoughCanvas } from "roughjs/bin/canvas"; +import { SketchPicker } from "react-color"; -import { moveOneLeft, moveAllLeft, moveOneRight, moveAllRight } from './zindex'; +import { moveOneLeft, moveAllLeft, moveOneRight, moveAllRight } from "./zindex"; -import './styles.scss'; +import "./styles.scss"; type ExcalidrawElement = ReturnType; type ExcalidrawTextElement = ExcalidrawElement & { - type: 'text'; + type: "text"; font: string; text: string; actualBoundingBoxAscent: number; }; -const LOCAL_STORAGE_KEY = 'excalidraw'; -const LOCAL_STORAGE_KEY_STATE = 'excalidraw-state'; +const LOCAL_STORAGE_KEY = "excalidraw"; +const LOCAL_STORAGE_KEY_STATE = "excalidraw-state"; const elements = Array.of(); @@ -112,7 +112,7 @@ function hitTest(element: ExcalidrawElement, x: number, y: number): boolean { // of the click is less than x pixels of any of the lines that the shape is composed of const lineThreshold = 10; - if (element.type === 'ellipse') { + if (element.type === "ellipse") { // https://stackoverflow.com/a/46007540/232122 const px = Math.abs(x - element.x - element.width / 2); const py = Math.abs(y - element.y - element.height / 2); @@ -147,7 +147,7 @@ function hitTest(element: ExcalidrawElement, x: number, y: number): boolean { }); return Math.hypot(a * tx - px, b * ty - py) < lineThreshold; - } else if (element.type === 'rectangle') { + } else if (element.type === "rectangle") { const x1 = getElementAbsoluteX1(element); const x2 = getElementAbsoluteX2(element); const y1 = getElementAbsoluteY1(element); @@ -162,7 +162,7 @@ function hitTest(element: ExcalidrawElement, x: number, y: number): boolean { distanceBetweenPointAndSegment(x, y, x2, y2, x1, y2) < lineThreshold || // C distanceBetweenPointAndSegment(x, y, x1, y2, x1, y1) < lineThreshold // D ); - } else if (element.type === 'arrow') { + } else if (element.type === "arrow") { let [x1, y1, x2, y2, x3, y3, x4, y4] = getArrowPoints(element); // The computation is done at the origin, we need to add a translation x -= element.x; @@ -176,18 +176,18 @@ function hitTest(element: ExcalidrawElement, x: number, y: number): boolean { // / distanceBetweenPointAndSegment(x, y, x4, y4, x2, y2) < lineThreshold ); - } else if (element.type === 'text') { + } else if (element.type === "text") { const x1 = getElementAbsoluteX1(element); const x2 = getElementAbsoluteX2(element); const y1 = getElementAbsoluteY1(element); const y2 = getElementAbsoluteY2(element); return x >= x1 && x <= x2 && y >= y1 && y <= y2; - } else if (element.type === 'selection') { - console.warn('This should not happen, we need to investigate why it does.'); + } else if (element.type === "selection") { + console.warn("This should not happen, we need to investigate why it does."); return false; } else { - throw new Error('Unimplemented type ' + element.type); + throw new Error("Unimplemented type " + element.type); } } @@ -197,7 +197,7 @@ function resizeTest( y: number, sceneState: SceneState ): string | false { - if (element.type === 'text' || element.type === 'arrow') return false; + if (element.type === "text" || element.type === "arrow") return false; const handlers = handlerRectangles(element, sceneState); @@ -242,7 +242,7 @@ function newElement( rc: RoughCanvas, context: CanvasRenderingContext2D, sceneState: SceneState - ) {}, + ) {} }; return element; } @@ -256,7 +256,7 @@ type SceneState = { const SCROLLBAR_WIDTH = 6; const SCROLLBAR_MARGIN = 4; -const SCROLLBAR_COLOR = 'rgba(0,0,0,0.3)'; +const SCROLLBAR_COLOR = "rgba(0,0,0,0.3)"; const CANVAS_WINDOW_OFFSET_LEFT = 250; const CANVAS_WINDOW_OFFSET_TOP = 0; @@ -274,7 +274,7 @@ function getScrollbars( x: scrollBarX + SCROLLBAR_MARGIN, y: canvasHeight - SCROLLBAR_WIDTH - SCROLLBAR_MARGIN, width: scrollBarWidth - SCROLLBAR_MARGIN * 2, - height: SCROLLBAR_WIDTH, + height: SCROLLBAR_WIDTH }; // vertical scrollbar @@ -285,12 +285,12 @@ function getScrollbars( x: canvasWidth - SCROLLBAR_WIDTH - SCROLLBAR_MARGIN, y: scrollBarY + SCROLLBAR_MARGIN, width: SCROLLBAR_WIDTH, - height: scrollBarHeight - SCROLLBAR_WIDTH * 2, + height: scrollBarHeight - SCROLLBAR_WIDTH * 2 }; return { horizontal: horizontalScrollBar, - vertical: verticalScrollBar, + vertical: verticalScrollBar }; } @@ -306,7 +306,7 @@ function isOverScrollBars( const [isOverHorizontalScrollBar, isOverVerticalScrollBar] = [ scrollBars.horizontal, - scrollBars.vertical, + scrollBars.vertical ].map( scrollBar => scrollBar.x <= x && @@ -317,7 +317,7 @@ function isOverScrollBars( return { isOverHorizontalScrollBar, - isOverVerticalScrollBar, + isOverVerticalScrollBar }; } @@ -335,60 +335,60 @@ function handlerRectangles(element: ExcalidrawElement, sceneState: SceneState) { const marginY = element.height < 0 ? 8 : -8; if (Math.abs(elementX2 - elementX1) > minimumSize) { - handlers['n'] = [ + handlers["n"] = [ elementX1 + (elementX2 - elementX1) / 2 + sceneState.scrollX - 4, elementY1 - margin + sceneState.scrollY + marginY, 8, - 8, + 8 ]; - handlers['s'] = [ + handlers["s"] = [ elementX1 + (elementX2 - elementX1) / 2 + sceneState.scrollX - 4, elementY2 - margin + sceneState.scrollY - marginY, 8, - 8, + 8 ]; } if (Math.abs(elementY2 - elementY1) > minimumSize) { - handlers['w'] = [ + handlers["w"] = [ elementX1 - margin + sceneState.scrollX + marginX, elementY1 + (elementY2 - elementY1) / 2 + sceneState.scrollY - 4, 8, - 8, + 8 ]; - handlers['e'] = [ + handlers["e"] = [ elementX2 - margin + sceneState.scrollX - marginX, elementY1 + (elementY2 - elementY1) / 2 + sceneState.scrollY - 4, 8, - 8, + 8 ]; } - handlers['nw'] = [ + handlers["nw"] = [ elementX1 - margin + sceneState.scrollX + marginX, elementY1 - margin + sceneState.scrollY + marginY, 8, - 8, + 8 ]; // nw - handlers['ne'] = [ + handlers["ne"] = [ elementX2 - margin + sceneState.scrollX - marginX, elementY1 - margin + sceneState.scrollY + marginY, 8, - 8, + 8 ]; // ne - handlers['sw'] = [ + handlers["sw"] = [ elementX1 - margin + sceneState.scrollX + marginX, elementY2 - margin + sceneState.scrollY - marginY, 8, - 8, + 8 ]; // sw - handlers['se'] = [ + handlers["se"] = [ elementX2 - margin + sceneState.scrollX - marginX, elementY2 - margin + sceneState.scrollY - marginY, 8, - 8, + 8 ]; // se return handlers; @@ -403,7 +403,7 @@ function renderScene( offsetX, offsetY, renderScrollbars = true, - renderSelection = true, + renderSelection = true }: { offsetX?: number; offsetY?: number; @@ -412,10 +412,10 @@ function renderScene( } = {} ) { if (!canvas) return; - const context = canvas.getContext('2d')!; + const context = canvas.getContext("2d")!; const fillStyle = context.fillStyle; - if (typeof sceneState.viewBackgroundColor === 'string') { + if (typeof sceneState.viewBackgroundColor === "string") { context.fillStyle = sceneState.viewBackgroundColor; context.fillRect(0, 0, canvas.width, canvas.height); } else { @@ -427,8 +427,8 @@ function renderScene( sceneState = { ...sceneState, - scrollX: typeof offsetX === 'number' ? offsetX : sceneState.scrollX, - scrollY: typeof offsetY === 'number' ? offsetY : sceneState.scrollY, + scrollX: typeof offsetX === "number" ? offsetX : sceneState.scrollX, + scrollY: typeof offsetY === "number" ? offsetY : sceneState.scrollY }; elements.forEach(element => { @@ -451,8 +451,8 @@ function renderScene( context.setLineDash(lineDash); if ( - element.type !== 'text' && - element.type !== 'arrow' && + element.type !== "text" && + element.type !== "arrow" && selectedIndices.length === 1 ) { const handlers = handlerRectangles(element, sceneState); @@ -492,28 +492,28 @@ function saveAsJSON() { const serialized = JSON.stringify({ version: 1, source: window.location.origin, - elements, + elements }); saveFile( - 'excalidraw.json', - 'data:text/plain;charset=utf-8,' + encodeURIComponent(serialized) + "excalidraw.json", + "data:text/plain;charset=utf-8," + encodeURIComponent(serialized) ); } function loadFromJSON() { - const input = document.createElement('input'); + const input = document.createElement("input"); const reader = new FileReader(); - input.type = 'file'; - input.accept = '.json'; + input.type = "file"; + input.accept = ".json"; input.onchange = () => { if (!input.files!.length) { - alert('A file was not selected.'); + alert("A file was not selected."); return; } - reader.readAsText(input.files![0], 'utf8'); + reader.readAsText(input.files![0], "utf8"); }; input.click(); @@ -532,7 +532,7 @@ function loadFromJSON() { function exportAsPNG({ exportBackground, exportPadding = 10, - viewBackgroundColor, + viewBackgroundColor }: { exportBackground: boolean; exportPadding?: number; @@ -540,7 +540,7 @@ function exportAsPNG({ scrollX: number; scrollY: number; }) { - if (!elements.length) return window.alert('Cannot export empty canvas.'); + if (!elements.length) return window.alert("Cannot export empty canvas."); // calculate smallest area to fit the contents in @@ -560,8 +560,8 @@ function exportAsPNG({ return Math.abs(x > y ? x - y : y - x); } - const tempCanvas = document.createElement('canvas'); - tempCanvas.style.display = 'none'; + const tempCanvas = document.createElement("canvas"); + tempCanvas.style.display = "none"; document.body.appendChild(tempCanvas); tempCanvas.width = distance(subCanvasX1, subCanvasX2) + exportPadding * 2; tempCanvas.height = distance(subCanvasY1, subCanvasY2) + exportPadding * 2; @@ -572,17 +572,17 @@ function exportAsPNG({ { viewBackgroundColor: exportBackground ? viewBackgroundColor : null, scrollX: 0, - scrollY: 0, + scrollY: 0 }, { offsetX: -subCanvasX1 + exportPadding, offsetY: -subCanvasY1 + exportPadding, renderScrollbars: false, - renderSelection: false, + renderSelection: false } ); - saveFile('excalidraw.png', tempCanvas.toDataURL('image/png')); + saveFile("excalidraw.png", tempCanvas.toDataURL("image/png")); // clean up the DOM if (tempCanvas !== canvas) tempCanvas.remove(); @@ -590,9 +590,9 @@ function exportAsPNG({ function saveFile(name: string, data: string) { // create a temporary elem which we'll use to download the image - const link = document.createElement('a'); - link.setAttribute('download', name); - link.setAttribute('href', data); + const link = document.createElement("a"); + link.setAttribute("download", name); + link.setAttribute("href", data); link.click(); // clean up @@ -605,7 +605,7 @@ function rotate(x1: number, y1: number, x2: number, y2: number, angle: number) { // 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, + (x1 - x2) * Math.sin(angle) + (y1 - y2) * Math.cos(angle) + y2 ]; } @@ -616,7 +616,7 @@ const generator = rough.generator(null, null as any); function isTextElement( element: ExcalidrawElement ): element is ExcalidrawTextElement { - return element.type === 'text'; + return element.type === "text"; } function isInputLike( @@ -650,10 +650,10 @@ function getArrowPoints(element: ExcalidrawElement) { } function generateDraw(element: ExcalidrawElement) { - if (element.type === 'selection') { + if (element.type === "selection") { element.draw = (rc, context, { scrollX, scrollY }) => { const fillStyle = context.fillStyle; - context.fillStyle = 'rgba(0, 0, 255, 0.10)'; + context.fillStyle = "rgba(0, 0, 255, 0.10)"; context.fillRect( element.x + scrollX, element.y + scrollY, @@ -662,11 +662,11 @@ function generateDraw(element: ExcalidrawElement) { ); context.fillStyle = fillStyle; }; - } else if (element.type === 'rectangle') { + } else if (element.type === "rectangle") { const shape = withCustomMathRandom(element.seed, () => { return generator.rectangle(0, 0, element.width, element.height, { stroke: element.strokeColor, - fill: element.backgroundColor, + fill: element.backgroundColor }); }); element.draw = (rc, context, { scrollX, scrollY }) => { @@ -674,7 +674,7 @@ function generateDraw(element: ExcalidrawElement) { rc.draw(shape); context.translate(-element.x - scrollX, -element.y - scrollY); }; - } else if (element.type === 'ellipse') { + } else if (element.type === "ellipse") { const shape = withCustomMathRandom(element.seed, () => generator.ellipse( element.width / 2, @@ -689,7 +689,7 @@ function generateDraw(element: ExcalidrawElement) { rc.draw(shape); context.translate(-element.x - scrollX, -element.y - scrollY); }; - } else if (element.type === 'arrow') { + } else if (element.type === "arrow") { const [x1, y1, x2, y2, x3, y3, x4, y4] = getArrowPoints(element); const shapes = withCustomMathRandom(element.seed, () => [ // \ @@ -697,7 +697,7 @@ function generateDraw(element: ExcalidrawElement) { // ----- generator.line(x1, y1, x2, y2, { stroke: element.strokeColor }), // / - generator.line(x4, y4, x2, y2, { stroke: element.strokeColor }), + generator.line(x4, y4, x2, y2, { stroke: element.strokeColor }) ]); element.draw = (rc, context, { scrollX, scrollY }) => { @@ -721,7 +721,7 @@ function generateDraw(element: ExcalidrawElement) { context.font = font; }; } else { - throw new Error('Unimplemented type ' + element.type); + throw new Error("Unimplemented type " + element.type); } } @@ -753,7 +753,7 @@ function setSelection(selection: ExcalidrawElement) { const elementY1 = getElementAbsoluteY1(element); const elementY2 = getElementAbsoluteY2(element); element.isSelected = - element.type !== 'selection' && + element.type !== "selection" && selectionX1 <= elementX1 && selectionY1 <= elementY1 && selectionX2 >= elementX2 && @@ -768,7 +768,7 @@ function clearSelection() { } function resetCursor() { - document.documentElement.style.cursor = ''; + document.documentElement.style.cursor = ""; } function deleteSelectedElements() { @@ -800,7 +800,7 @@ function restore( elements.splice( 0, elements.length, - ...(typeof savedElements === 'string' + ...(typeof savedElements === "string" ? JSON.parse(savedElements) : savedElements) ); @@ -817,7 +817,7 @@ function restore( type AppState = { draggingElement: ExcalidrawElement | null; resizingElement: ExcalidrawElement | null; - currentColorPicker: 'Background' | null; + currentColorPicker: "Background" | null; elementType: string; exportBackground: boolean; currentItemStrokeColor: string; @@ -828,13 +828,13 @@ type AppState = { }; const KEYS = { - ARROW_LEFT: 'ArrowLeft', - ARROW_RIGHT: 'ArrowRight', - ARROW_DOWN: 'ArrowDown', - ARROW_UP: 'ArrowUp', - ESCAPE: 'Escape', - DELETE: 'Delete', - BACKSPACE: 'Backspace', + ARROW_LEFT: "ArrowLeft", + ARROW_RIGHT: "ArrowRight", + ARROW_DOWN: "ArrowDown", + ARROW_UP: "ArrowUp", + ESCAPE: "Escape", + DELETE: "Delete", + BACKSPACE: "Backspace" }; // We inline font-awesome icons in order to save on js size rather than including the font awesome react library @@ -846,7 +846,7 @@ const SHAPES = [ ), - value: 'selection', + value: "selection" }, { icon: ( @@ -855,7 +855,7 @@ const SHAPES = [ ), - value: 'rectangle', + value: "rectangle" }, { icon: ( @@ -864,7 +864,7 @@ const SHAPES = [ ), - value: 'ellipse', + value: "ellipse" }, { icon: ( @@ -873,7 +873,7 @@ const SHAPES = [ ), - value: 'arrow', + value: "arrow" }, { icon: ( @@ -882,8 +882,8 @@ const SHAPES = [ ), - value: 'text', - }, + value: "text" + } ]; const shapesShortcutKeys = SHAPES.map(shape => shape.value[0]); @@ -893,7 +893,7 @@ function capitalize(str: string) { } function findElementByKey(key: string) { - const defaultElement = 'selection'; + const defaultElement = "selection"; return SHAPES.reduce((element, shape) => { if (shape.value[0] !== key) return element; @@ -933,8 +933,8 @@ let lastMouseUp: ((e: any) => void) | null = null; class App extends React.Component<{}, AppState> { public componentDidMount() { - document.addEventListener('keydown', this.onKeyDown, false); - window.addEventListener('resize', this.onResize, false); + document.addEventListener("keydown", this.onKeyDown, false); + window.addEventListener("resize", this.onResize, false); const savedState = restoreFromLocalStorage(); if (savedState) { @@ -943,21 +943,21 @@ class App extends React.Component<{}, AppState> { } public componentWillUnmount() { - document.removeEventListener('keydown', this.onKeyDown, false); - window.removeEventListener('resize', this.onResize, false); + document.removeEventListener("keydown", this.onKeyDown, false); + window.removeEventListener("resize", this.onResize, false); } public state: AppState = { draggingElement: null, resizingElement: null, - elementType: 'selection', + elementType: "selection", currentColorPicker: null, exportBackground: true, - currentItemStrokeColor: '#000000', - currentItemBackgroundColor: '#ffffff', - viewBackgroundColor: '#ffffff', + currentItemStrokeColor: "#000000", + currentItemBackgroundColor: "#ffffff", + viewBackgroundColor: "#ffffff", scrollX: 0, - scrollY: 0, + scrollY: 0 }; private onResize = () => { @@ -995,13 +995,13 @@ class App extends React.Component<{}, AppState> { event.metaKey && event.shiftKey && event.altKey && - event.code === 'KeyB' + event.code === "KeyB" ) { this.moveOneLeft(); event.preventDefault(); // Send to back: Cmd-Shift-B - } else if (event.metaKey && event.shiftKey && event.code === 'KeyB') { + } else if (event.metaKey && event.shiftKey && event.code === "KeyB") { this.moveAllLeft(); event.preventDefault(); @@ -1010,18 +1010,18 @@ class App extends React.Component<{}, AppState> { event.metaKey && event.shiftKey && event.altKey && - event.code === 'KeyF' + event.code === "KeyF" ) { this.moveOneRight(); event.preventDefault(); // Bring to front: Cmd-Shift-F - } else if (event.metaKey && event.shiftKey && event.code === 'KeyF') { + } else if (event.metaKey && event.shiftKey && event.code === "KeyF") { this.moveAllRight(); event.preventDefault(); // Select all: Cmd-A - } else if (event.metaKey && event.code === 'KeyA') { + } else if (event.metaKey && event.code === "KeyA") { elements.forEach(element => { element.isSelected = true; }); @@ -1029,7 +1029,7 @@ class App extends React.Component<{}, AppState> { event.preventDefault(); } else if (shapesShortcutKeys.includes(event.key.toLowerCase())) { this.setState({ elementType: findElementByKey(event.key) }); - } else if (event.metaKey && event.code === 'KeyZ') { + } else if (event.metaKey && event.code === "KeyZ") { let lastEntry = stateHistory.pop(); // If nothing was changed since last, take the previous one if (generateHistoryCurrentEntry() === lastEntry) { @@ -1049,12 +1049,12 @@ class App extends React.Component<{}, AppState> { }; private clearCanvas = () => { - if (window.confirm('This will clear the whole canvas. Are you sure?')) { + if (window.confirm("This will clear the whole canvas. Are you sure?")) { elements.splice(0, elements.length); this.setState({ - viewBackgroundColor: '#ffffff', + viewBackgroundColor: "#ffffff", scrollX: 0, - scrollY: 0, + scrollY: 0 }); this.forceUpdate(); } @@ -1091,7 +1091,7 @@ class App extends React.Component<{}, AppState> { className="container" onCut={e => { e.clipboardData.setData( - 'text/plain', + "text/plain", JSON.stringify(elements.filter(element => element.isSelected)) ); deleteSelectedElements(); @@ -1100,13 +1100,13 @@ class App extends React.Component<{}, AppState> { }} onCopy={e => { e.clipboardData.setData( - 'text/plain', + "text/plain", JSON.stringify(elements.filter(element => element.isSelected)) ); e.preventDefault(); }} onPaste={e => { - const paste = e.clipboardData.getData('text'); + const paste = e.clipboardData.getData("text"); let parsedElements; try { parsedElements = JSON.parse(paste); @@ -1145,7 +1145,7 @@ class App extends React.Component<{}, AppState> { this.setState({ elementType: value }); clearSelection(); document.documentElement.style.cursor = - value === 'text' ? 'text' : 'crosshair'; + value === "text" ? "text" : "crosshair"; this.forceUpdate(); }} /> @@ -1161,18 +1161,18 @@ class App extends React.Component<{}, AppState> { - {this.state.currentColorPicker === 'Background' ? ( + {this.state.currentColorPicker === "Background" ? (
{ id="canvas" style={{ width: canvasWidth, - height: canvasHeight, + height: canvasHeight }} width={canvasWidth * window.devicePixelRatio} height={canvasHeight * window.devicePixelRatio} @@ -1289,11 +1289,11 @@ class App extends React.Component<{}, AppState> { this.removeWheelEventListener = undefined; } if (canvas) { - canvas.addEventListener('wheel', this.handleWheel, { - passive: false, + canvas.addEventListener("wheel", this.handleWheel, { + passive: false }); this.removeWheelEventListener = () => - canvas.removeEventListener('wheel', this.handleWheel); + canvas.removeEventListener("wheel", this.handleWheel); // Whenever React sets the width/height of the canvas element, // the context loses the scale transform. We need to re-apply it @@ -1304,7 +1304,7 @@ class App extends React.Component<{}, AppState> { lastCanvasWidth = canvasWidth; lastCanvasHeight = canvasHeight; canvas - .getContext('2d')! + .getContext("2d")! .scale(window.devicePixelRatio, window.devicePixelRatio); } } @@ -1330,7 +1330,7 @@ class App extends React.Component<{}, AppState> { // Handle scrollbars dragging const { isOverHorizontalScrollBar, - isOverVerticalScrollBar, + isOverVerticalScrollBar } = isOverScrollBars( e.clientX - CANVAS_WINDOW_OFFSET_LEFT, e.clientY - CANVAS_WINDOW_OFFSET_TOP, @@ -1353,24 +1353,24 @@ class App extends React.Component<{}, AppState> { let resizeHandle: string | false = false; let isDraggingElements = false; let isResizingElements = false; - if (this.state.elementType === 'selection') { + if (this.state.elementType === "selection") { const resizeElement = elements.find(element => { return resizeTest(element, x, y, { scrollX: this.state.scrollX, scrollY: this.state.scrollY, - viewBackgroundColor: this.state.viewBackgroundColor, + viewBackgroundColor: this.state.viewBackgroundColor }); }); this.setState({ - resizingElement: resizeElement ? resizeElement : null, + resizingElement: resizeElement ? resizeElement : null }); if (resizeElement) { resizeHandle = resizeTest(resizeElement, x, y, { scrollX: this.state.scrollX, scrollY: this.state.scrollY, - viewBackgroundColor: this.state.viewBackgroundColor, + viewBackgroundColor: this.state.viewBackgroundColor }); document.documentElement.style.cursor = `${resizeHandle}-resize`; isResizingElements = true; @@ -1405,14 +1405,14 @@ class App extends React.Component<{}, AppState> { isDraggingElements = someElementIsSelected(); if (isDraggingElements) { - document.documentElement.style.cursor = 'move'; + document.documentElement.style.cursor = "move"; } } } if (isTextElement(element)) { resetCursor(); - const text = prompt('What text do you want?'); + const text = prompt("What text do you want?"); if (text === null) { return; } @@ -1439,10 +1439,10 @@ class App extends React.Component<{}, AppState> { generateDraw(element); elements.push(element); - if (this.state.elementType === 'text') { + if (this.state.elementType === "text") { this.setState({ draggingElement: null, - elementType: 'selection', + elementType: "selection" }); element.isSelected = true; } else { @@ -1489,23 +1489,23 @@ class App extends React.Component<{}, AppState> { e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY; selectedElements.forEach(element => { switch (resizeHandle) { - case 'nw': + case "nw": element.width += element.x - lastX; element.height += element.y - lastY; element.x = lastX; element.y = lastY; break; - case 'ne': + case "ne": element.width = lastX - element.x; element.height += element.y - lastY; element.y = lastY; break; - case 'sw': + case "sw": element.width += element.x - lastX; element.x = lastX; element.height = lastY - element.y; break; - case 'se': + case "se": element.width += x - lastX; if (e.shiftKey) { element.height = element.width; @@ -1513,18 +1513,18 @@ class App extends React.Component<{}, AppState> { element.height += y - lastY; } break; - case 'n': + case "n": element.height += element.y - lastY; element.y = lastY; break; - case 'w': + case "w": element.width += element.x - lastX; element.x = lastX; break; - case 's': + case "s": element.height = lastY - element.y; break; - case 'e': + case "e": element.width = lastX - element.x; break; } @@ -1582,7 +1582,7 @@ class App extends React.Component<{}, AppState> { generateDraw(draggingElement); - if (this.state.elementType === 'selection') { + if (this.state.elementType === "selection") { setSelection(draggingElement); } // We don't want to save history when moving an element @@ -1594,8 +1594,8 @@ class App extends React.Component<{}, AppState> { const { draggingElement, elementType } = this.state; lastMouseUp = null; - window.removeEventListener('mousemove', onMouseMove); - window.removeEventListener('mouseup', onMouseUp); + window.removeEventListener("mousemove", onMouseMove); + window.removeEventListener("mouseup", onMouseUp); resetCursor(); @@ -1606,7 +1606,7 @@ class App extends React.Component<{}, AppState> { return; } - if (elementType === 'selection') { + if (elementType === "selection") { if (isDraggingElements) { isDraggingElements = false; } @@ -1617,15 +1617,15 @@ class App extends React.Component<{}, AppState> { this.setState({ draggingElement: null, - elementType: 'selection', + elementType: "selection" }); this.forceUpdate(); }; lastMouseUp = onMouseUp; - window.addEventListener('mousemove', onMouseMove); - window.addEventListener('mouseup', onMouseUp); + window.addEventListener("mousemove", onMouseMove); + window.addEventListener("mouseup", onMouseUp); // We don't want to save history on mouseDown, only on mouseUp when it's fully configured skipHistory = true; @@ -1641,7 +1641,7 @@ class App extends React.Component<{}, AppState> { const { deltaX, deltaY } = e; this.setState(state => ({ scrollX: state.scrollX - deltaX, - scrollY: state.scrollY - deltaY, + scrollY: state.scrollY - deltaY })); }; @@ -1649,7 +1649,7 @@ class App extends React.Component<{}, AppState> { renderScene(rc, canvas, { scrollX: this.state.scrollX, scrollY: this.state.scrollY, - viewBackgroundColor: this.state.viewBackgroundColor, + viewBackgroundColor: this.state.viewBackgroundColor }); save(this.state); if (!skipHistory) { @@ -1659,10 +1659,10 @@ class App extends React.Component<{}, AppState> { } } -const rootElement = document.getElementById('root'); +const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement); -const canvas = document.getElementById('canvas') as HTMLCanvasElement; +const canvas = document.getElementById("canvas") as HTMLCanvasElement; const rc = rough.canvas(canvas); -const context = canvas.getContext('2d')!; +const context = canvas.getContext("2d")!; ReactDOM.render(, rootElement);