Recover index.tsx

src/index.tsx

@@ -0,0 +1,1564 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import rough from "roughjs/bin/wrappers/rough";
+import { RoughCanvas } from "roughjs/bin/canvas";
+
+import { moveOneLeft, moveAllLeft, moveOneRight, moveAllRight } from "./zindex";
+
+import "./styles.scss";
+
+type ExcalidrawElement = ReturnType<typeof newElement>;
+type ExcalidrawTextElement = ExcalidrawElement & {
+  type: "text";
+  font: string;
+  text: string;
+  actualBoundingBoxAscent: number;
+};
+
+const LOCAL_STORAGE_KEY = "excalidraw";
+const LOCAL_STORAGE_KEY_STATE = "excalidraw-state";
+
+const elements = Array.of<ExcalidrawElement>();
+
+let skipHistory = false;
+const stateHistory: string[] = [];
+function generateHistoryCurrentEntry() {
+  return JSON.stringify(
+    elements.map(element => ({ ...element, isSelected: false }))
+  );
+}
+function pushHistoryEntry(newEntry: string) {
+  if (
+    stateHistory.length > 0 &&
+    stateHistory[stateHistory.length - 1] === newEntry
+  ) {
+    // If the last entry is the same as this one, ignore it
+    return;
+  }
+  stateHistory.push(newEntry);
+}
+function restoreHistoryEntry(entry: string) {
+  const newElements = JSON.parse(entry);
+  elements.splice(0, elements.length);
+  newElements.forEach((newElement: ExcalidrawElement) => {
+    generateDraw(newElement);
+    elements.push(newElement);
+  });
+  // When restoring, we shouldn't add an history entry otherwise we'll be stuck with it and can't go back
+  skipHistory = true;
+}
+
+// https://stackoverflow.com/questions/521295/seeding-the-random-number-generator-in-javascript/47593316#47593316
+const LCG = (seed: number) => () =>
+  ((2 ** 31 - 1) & (seed = Math.imul(48271, seed))) / 2 ** 31;
+
+function randomSeed() {
+  return Math.floor(Math.random() * 2 ** 31);
+}
+
+// Unfortunately, roughjs doesn't support a seed attribute (https://github.com/pshihn/rough/issues/27).
+// We can achieve the same result by overriding the Math.random function with a
+// pseudo random generator that supports a random seed and swapping it back after.
+function withCustomMathRandom<T>(seed: number, cb: () => T): T {
+  const random = Math.random;
+  Math.random = LCG(seed);
+  const result = cb();
+  Math.random = random;
+  return result;
+}
+
+// https://stackoverflow.com/a/6853926/232122
+function distanceBetweenPointAndSegment(
+  x: number,
+  y: number,
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number
+) {
+  const A = x - x1;
+  const B = y - y1;
+  const C = x2 - x1;
+  const D = y2 - y1;
+
+  const dot = A * C + B * D;
+  const lenSquare = C * C + D * D;
+  let param = -1;
+  if (lenSquare !== 0) {
+    // in case of 0 length line
+    param = dot / lenSquare;
+  }
+
+  let xx, yy;
+  if (param < 0) {
+    xx = x1;
+    yy = y1;
+  } else if (param > 1) {
+    xx = x2;
+    yy = y2;
+  } else {
+    xx = x1 + param * C;
+    yy = y1 + param * D;
+  }
+
+  const dx = x - xx;
+  const dy = y - yy;
+  return Math.hypot(dx, dy);
+}
+
+function hitTest(element: ExcalidrawElement, x: number, y: number): boolean {
+  // For shapes that are composed of lines, we only enable point-selection when the distance
+  // 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") {
+    // 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);
+
+    let tx = 0.707;
+    let ty = 0.707;
+
+    const a = element.width / 2;
+    const b = element.height / 2;
+
+    [0, 1, 2, 3].forEach(x => {
+      const xx = a * tx;
+      const yy = b * ty;
+
+      const ex = ((a * a - b * b) * tx ** 3) / a;
+      const ey = ((b * b - a * a) * ty ** 3) / b;
+
+      const rx = xx - ex;
+      const ry = yy - ey;
+
+      const qx = px - ex;
+      const qy = py - ey;
+
+      const r = Math.hypot(ry, rx);
+      const q = Math.hypot(qy, qx);
+
+      tx = Math.min(1, Math.max(0, ((qx * r) / q + ex) / a));
+      ty = Math.min(1, Math.max(0, ((qy * r) / q + ey) / b));
+      const t = Math.hypot(ty, tx);
+      tx /= t;
+      ty /= t;
+    });
+
+    return Math.hypot(a * tx - px, b * ty - py) < lineThreshold;
+  } else if (element.type === "rectangle") {
+    const x1 = getElementAbsoluteX1(element);
+    const x2 = getElementAbsoluteX2(element);
+    const y1 = getElementAbsoluteY1(element);
+    const y2 = getElementAbsoluteY2(element);
+
+    // (x1, y1) --A-- (x2, y1)
+    //    |D             |B
+    // (x1, y2) --C-- (x2, y2)
+    return (
+      distanceBetweenPointAndSegment(x, y, x1, y1, x2, y1) < lineThreshold || // A
+      distanceBetweenPointAndSegment(x, y, x2, y1, x2, y2) < lineThreshold || // B
+      distanceBetweenPointAndSegment(x, y, x2, y2, x1, y2) < lineThreshold || // C
+      distanceBetweenPointAndSegment(x, y, x1, y2, x1, y1) < lineThreshold // D
+    );
+  } 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;
+    y -= element.y;
+
+    return (
+      //    \
+      distanceBetweenPointAndSegment(x, y, x3, y3, x2, y2) < lineThreshold ||
+      // -----
+      distanceBetweenPointAndSegment(x, y, x1, y1, x2, y2) < lineThreshold ||
+      //    /
+      distanceBetweenPointAndSegment(x, y, x4, y4, x2, y2) < lineThreshold
+    );
+  } 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.");
+    return false;
+  } else {
+    throw new Error("Unimplemented type " + element.type);
+  }
+}
+
+function resizeTest(
+  element: ExcalidrawElement,
+  x: number,
+  y: number,
+  sceneState: SceneState
+): string | false {
+  if (element.type === "text" || element.type === "arrow") return false;
+
+  const handlers = handlerRectangles(element, sceneState);
+
+  const filter = Object.keys(handlers).filter(key => {
+    const handler = handlers[key];
+
+    return (
+      x + sceneState.scrollX >= handler[0] &&
+      x + sceneState.scrollX <= handler[0] + handler[2] &&
+      y + sceneState.scrollY >= handler[1] &&
+      y + sceneState.scrollY <= handler[1] + handler[3]
+    );
+  });
+
+  if (filter.length > 0) {
+    return filter[0];
+  }
+
+  return false;
+}
+
+function newElement(
+  type: string,
+  x: number,
+  y: number,
+  strokeColor: string,
+  backgroundColor: string,
+  width = 0,
+  height = 0
+) {
+  const element = {
+    type: type,
+    x: x,
+    y: y,
+    width: width,
+    height: height,
+    isSelected: false,
+    strokeColor: strokeColor,
+    backgroundColor: backgroundColor,
+    seed: randomSeed(),
+    draw(
+      rc: RoughCanvas,
+      context: CanvasRenderingContext2D,
+      sceneState: SceneState
+    ) {}
+  };
+  return element;
+}
+
+type SceneState = {
+  scrollX: number;
+  scrollY: number;
+  // null indicates transparent bg
+  viewBackgroundColor: string | null;
+};
+
+const SCROLLBAR_WIDTH = 6;
+const SCROLLBAR_MARGIN = 4;
+const SCROLLBAR_COLOR = "rgba(0,0,0,0.3)";
+const CANVAS_WINDOW_OFFSET_LEFT = 250;
+const CANVAS_WINDOW_OFFSET_TOP = 0;
+
+function getScrollbars(
+  canvasWidth: number,
+  canvasHeight: number,
+  scrollX: number,
+  scrollY: number
+) {
+  // horizontal scrollbar
+  const sceneWidth = canvasWidth + Math.abs(scrollX);
+  const scrollBarWidth = (canvasWidth * canvasWidth) / sceneWidth;
+  const scrollBarX = scrollX > 0 ? 0 : canvasWidth - scrollBarWidth;
+  const horizontalScrollBar = {
+    x: scrollBarX + SCROLLBAR_MARGIN,
+    y: canvasHeight - SCROLLBAR_WIDTH - SCROLLBAR_MARGIN,
+    width: scrollBarWidth - SCROLLBAR_MARGIN * 2,
+    height: SCROLLBAR_WIDTH
+  };
+
+  // vertical scrollbar
+  const sceneHeight = canvasHeight + Math.abs(scrollY);
+  const scrollBarHeight = (canvasHeight * canvasHeight) / sceneHeight;
+  const scrollBarY = scrollY > 0 ? 0 : canvasHeight - scrollBarHeight;
+  const verticalScrollBar = {
+    x: canvasWidth - SCROLLBAR_WIDTH - SCROLLBAR_MARGIN,
+    y: scrollBarY + SCROLLBAR_MARGIN,
+    width: SCROLLBAR_WIDTH,
+    height: scrollBarHeight - SCROLLBAR_WIDTH * 2
+  };
+
+  return {
+    horizontal: horizontalScrollBar,
+    vertical: verticalScrollBar
+  };
+}
+
+function handlerRectangles(element: ExcalidrawElement, sceneState: SceneState) {
+  const elementX1 = element.x;
+  const elementX2 = element.x + element.width;
+  const elementY1 = element.y;
+  const elementY2 = element.y + element.height;
+
+  const margin = 4;
+  const minimumSize = 40;
+  const handlers: { [handler: string]: number[] } = {};
+
+  const marginX = element.width < 0 ? 8 : -8;
+  const marginY = element.height < 0 ? 8 : -8;
+
+  if (Math.abs(elementX2 - elementX1) > minimumSize) {
+    handlers["n"] = [
+      elementX1 + (elementX2 - elementX1) / 2 + sceneState.scrollX - 4,
+      elementY1 - margin + sceneState.scrollY + marginY,
+      8,
+      8
+    ];
+
+    handlers["s"] = [
+      elementX1 + (elementX2 - elementX1) / 2 + sceneState.scrollX - 4,
+      elementY2 - margin + sceneState.scrollY - marginY,
+      8,
+      8
+    ];
+  }
+
+  if (Math.abs(elementY2 - elementY1) > minimumSize) {
+    handlers["w"] = [
+      elementX1 - margin + sceneState.scrollX + marginX,
+      elementY1 + (elementY2 - elementY1) / 2 + sceneState.scrollY - 4,
+      8,
+      8
+    ];
+
+    handlers["e"] = [
+      elementX2 - margin + sceneState.scrollX - marginX,
+      elementY1 + (elementY2 - elementY1) / 2 + sceneState.scrollY - 4,
+      8,
+      8
+    ];
+  }
+
+  handlers["nw"] = [
+    elementX1 - margin + sceneState.scrollX + marginX,
+    elementY1 - margin + sceneState.scrollY + marginY,
+    8,
+    8
+  ]; // nw
+  handlers["ne"] = [
+    elementX2 - margin + sceneState.scrollX - marginX,
+    elementY1 - margin + sceneState.scrollY + marginY,
+    8,
+    8
+  ]; // ne
+  handlers["sw"] = [
+    elementX1 - margin + sceneState.scrollX + marginX,
+    elementY2 - margin + sceneState.scrollY - marginY,
+    8,
+    8
+  ]; // sw
+  handlers["se"] = [
+    elementX2 - margin + sceneState.scrollX - marginX,
+    elementY2 - margin + sceneState.scrollY - marginY,
+    8,
+    8
+  ]; // se
+
+  return handlers;
+}
+
+function renderScene(
+  rc: RoughCanvas,
+  canvas: HTMLCanvasElement,
+  sceneState: SceneState,
+  // extra options, currently passed by export helper
+  {
+    offsetX,
+    offsetY,
+    renderScrollbars = true,
+    renderSelection = true
+  }: {
+    offsetX?: number;
+    offsetY?: number;
+    renderScrollbars?: boolean;
+    renderSelection?: boolean;
+  } = {}
+) {
+  if (!canvas) return;
+  const context = canvas.getContext("2d")!;
+
+  const fillStyle = context.fillStyle;
+  if (typeof sceneState.viewBackgroundColor === "string") {
+    context.fillStyle = sceneState.viewBackgroundColor;
+    context.fillRect(0, 0, canvas.width, canvas.height);
+  } else {
+    context.clearRect(0, 0, canvas.width, canvas.height);
+  }
+  context.fillStyle = fillStyle;
+
+  const selectedIndices = getSelectedIndices();
+
+  sceneState = {
+    ...sceneState,
+    scrollX: typeof offsetX === "number" ? offsetX : sceneState.scrollX,
+    scrollY: typeof offsetY === "number" ? offsetY : sceneState.scrollY
+  };
+
+  elements.forEach(element => {
+    element.draw(rc, context, sceneState);
+    if (renderSelection && element.isSelected) {
+      const margin = 4;
+
+      const elementX1 = getElementAbsoluteX1(element);
+      const elementX2 = getElementAbsoluteX2(element);
+      const elementY1 = getElementAbsoluteY1(element);
+      const elementY2 = getElementAbsoluteY2(element);
+      const lineDash = context.getLineDash();
+      context.setLineDash([8, 4]);
+      context.strokeRect(
+        elementX1 - margin + sceneState.scrollX,
+        elementY1 - margin + sceneState.scrollY,
+        elementX2 - elementX1 + margin * 2,
+        elementY2 - elementY1 + margin * 2
+      );
+      context.setLineDash(lineDash);
+
+      if (
+        element.type !== "text" &&
+        element.type !== "arrow" &&
+        selectedIndices.length === 1
+      ) {
+        const handlers = handlerRectangles(element, sceneState);
+        Object.values(handlers).forEach(handler => {
+          context.strokeRect(handler[0], handler[1], handler[2], handler[3]);
+        });
+      }
+    }
+  });
+
+  if (renderScrollbars) {
+    const scrollBars = getScrollbars(
+      context.canvas.width / window.devicePixelRatio,
+      context.canvas.height / window.devicePixelRatio,
+      sceneState.scrollX,
+      sceneState.scrollY
+    );
+
+    context.fillStyle = SCROLLBAR_COLOR;
+    context.fillRect(
+      scrollBars.horizontal.x,
+      scrollBars.horizontal.y,
+      scrollBars.horizontal.width,
+      scrollBars.horizontal.height
+    );
+    context.fillRect(
+      scrollBars.vertical.x,
+      scrollBars.vertical.y,
+      scrollBars.vertical.width,
+      scrollBars.vertical.height
+    );
+    context.fillStyle = fillStyle;
+  }
+}
+
+function saveAsJSON() {
+  const serialized = JSON.stringify({
+    version: 1,
+    source: window.location.origin,
+    elements
+  });
+
+  saveFile(
+    "excalidraw.json",
+    "data:text/plain;charset=utf-8," + encodeURIComponent(serialized)
+  );
+}
+
+function loadFromJSON() {
+  const input = document.createElement("input");
+  const reader = new FileReader();
+  input.type = "file";
+  input.accept = ".json";
+
+  input.onchange = () => {
+    if (!input.files!.length) {
+      alert("A file was not selected.");
+      return;
+    }
+
+    reader.readAsText(input.files![0], "utf8");
+  };
+
+  input.click();
+
+  return new Promise(resolve => {
+    reader.onloadend = () => {
+      if (reader.readyState === FileReader.DONE) {
+        const data = JSON.parse(reader.result as string);
+        restore(data.elements, null);
+        resolve();
+      }
+    };
+  });
+}
+
+function exportAsPNG({
+  exportBackground,
+  exportPadding = 10,
+  viewBackgroundColor
+}: {
+  exportBackground: boolean;
+  exportPadding?: number;
+  viewBackgroundColor: string;
+  scrollX: number;
+  scrollY: number;
+}) {
+  if (!elements.length) return window.alert("Cannot export empty canvas.");
+
+  // calculate smallest area to fit the contents in
+
+  let subCanvasX1 = Infinity;
+  let subCanvasX2 = 0;
+  let subCanvasY1 = Infinity;
+  let subCanvasY2 = 0;
+
+  elements.forEach(element => {
+    subCanvasX1 = Math.min(subCanvasX1, getElementAbsoluteX1(element));
+    subCanvasX2 = Math.max(subCanvasX2, getElementAbsoluteX2(element));
+    subCanvasY1 = Math.min(subCanvasY1, getElementAbsoluteY1(element));
+    subCanvasY2 = Math.max(subCanvasY2, getElementAbsoluteY2(element));
+  });
+
+  function distance(x: number, y: number) {
+    return Math.abs(x > y ? x - y : y - x);
+  }
+
+  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;
+
+  renderScene(
+    rough.canvas(tempCanvas),
+    tempCanvas,
+    {
+      viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
+      scrollX: 0,
+      scrollY: 0
+    },
+    {
+      offsetX: -subCanvasX1 + exportPadding,
+      offsetY: -subCanvasY1 + exportPadding,
+      renderScrollbars: false,
+      renderSelection: false
+    }
+  );
+
+  saveFile("excalidraw.png", tempCanvas.toDataURL("image/png"));
+
+  // clean up the DOM
+  if (tempCanvas !== canvas) tempCanvas.remove();
+}
+
+function saveFile(name: string, data: string) {
+  // create a temporary <a> elem which we'll use to download the image
+  const link = document.createElement("a");
+  link.setAttribute("download", name);
+  link.setAttribute("href", data);
+  link.click();
+
+  // clean up
+  link.remove();
+}
+
+function rotate(x1: number, y1: number, x2: number, y2: number, angle: number) {
+  // 𝑎′𝑥=(𝑎𝑥−𝑐𝑥)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
+  ];
+}
+
+// Casting second argument (DrawingSurface) to any,
+// because it is requred by TS definitions and not required at runtime
+const generator = rough.generator(null, null as any);
+
+function isTextElement(
+  element: ExcalidrawElement
+): element is ExcalidrawTextElement {
+  return element.type === "text";
+}
+
+function isInputLike(
+  target: Element | EventTarget | null
+): target is HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement {
+  return (
+    target instanceof HTMLInputElement ||
+    target instanceof HTMLTextAreaElement ||
+    target instanceof HTMLSelectElement
+  );
+}
+
+function getArrowPoints(element: ExcalidrawElement) {
+  const x1 = 0;
+  const y1 = 0;
+  const x2 = element.width;
+  const y2 = element.height;
+
+  const size = 30; // pixels
+  const distance = Math.hypot(x2 - x1, y2 - y1);
+  // 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);
+
+  return [x1, y1, x2, y2, x3, y3, x4, y4];
+}
+
+function generateDraw(element: ExcalidrawElement) {
+  if (element.type === "selection") {
+    element.draw = (rc, context, { scrollX, scrollY }) => {
+      const fillStyle = context.fillStyle;
+      context.fillStyle = "rgba(0, 0, 255, 0.10)";
+      context.fillRect(
+        element.x + scrollX,
+        element.y + scrollY,
+        element.width,
+        element.height
+      );
+      context.fillStyle = fillStyle;
+    };
+  } 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
+      });
+    });
+    element.draw = (rc, context, { scrollX, scrollY }) => {
+      context.translate(element.x + scrollX, element.y + scrollY);
+      rc.draw(shape);
+      context.translate(-element.x - scrollX, -element.y - scrollY);
+    };
+  } else if (element.type === "ellipse") {
+    const shape = withCustomMathRandom(element.seed, () =>
+      generator.ellipse(
+        element.width / 2,
+        element.height / 2,
+        element.width,
+        element.height,
+        { stroke: element.strokeColor, fill: element.backgroundColor }
+      )
+    );
+    element.draw = (rc, context, { scrollX, scrollY }) => {
+      context.translate(element.x + scrollX, element.y + scrollY);
+      rc.draw(shape);
+      context.translate(-element.x - scrollX, -element.y - scrollY);
+    };
+  } else if (element.type === "arrow") {
+    const [x1, y1, x2, y2, x3, y3, x4, y4] = getArrowPoints(element);
+    const shapes = withCustomMathRandom(element.seed, () => [
+      //    \
+      generator.line(x3, y3, x2, y2, { stroke: element.strokeColor }),
+      // -----
+      generator.line(x1, y1, x2, y2, { stroke: element.strokeColor }),
+      //    /
+      generator.line(x4, y4, x2, y2, { stroke: element.strokeColor })
+    ]);
+
+    element.draw = (rc, context, { scrollX, scrollY }) => {
+      context.translate(element.x + scrollX, element.y + scrollY);
+      shapes.forEach(shape => rc.draw(shape));
+      context.translate(-element.x - scrollX, -element.y - scrollY);
+    };
+    return;
+  } else if (isTextElement(element)) {
+    element.draw = (rc, context, { scrollX, scrollY }) => {
+      const font = context.font;
+      context.font = element.font;
+      const fillStyle = context.fillStyle;
+      context.fillStyle = element.strokeColor;
+      context.fillText(
+        element.text,
+        element.x + scrollX,
+        element.y + element.actualBoundingBoxAscent + scrollY
+      );
+      context.fillStyle = fillStyle;
+      context.font = font;
+    };
+  } else {
+    throw new Error("Unimplemented type " + element.type);
+  }
+}
+
+// If the element is created from right to left, the width is going to be negative
+// This set of functions retrieves the absolute position of the 4 points.
+// We can't just always normalize it since we need to remember the fact that an arrow
+// is pointing left or right.
+function getElementAbsoluteX1(element: ExcalidrawElement) {
+  return element.width >= 0 ? element.x : element.x + element.width;
+}
+function getElementAbsoluteX2(element: ExcalidrawElement) {
+  return element.width >= 0 ? element.x + element.width : element.x;
+}
+function getElementAbsoluteY1(element: ExcalidrawElement) {
+  return element.height >= 0 ? element.y : element.y + element.height;
+}
+function getElementAbsoluteY2(element: ExcalidrawElement) {
+  return element.height >= 0 ? element.y + element.height : element.y;
+}
+
+function setSelection(selection: ExcalidrawElement) {
+  const selectionX1 = getElementAbsoluteX1(selection);
+  const selectionX2 = getElementAbsoluteX2(selection);
+  const selectionY1 = getElementAbsoluteY1(selection);
+  const selectionY2 = getElementAbsoluteY2(selection);
+  elements.forEach(element => {
+    const elementX1 = getElementAbsoluteX1(element);
+    const elementX2 = getElementAbsoluteX2(element);
+    const elementY1 = getElementAbsoluteY1(element);
+    const elementY2 = getElementAbsoluteY2(element);
+    element.isSelected =
+      element.type !== "selection" &&
+      selectionX1 <= elementX1 &&
+      selectionY1 <= elementY1 &&
+      selectionX2 >= elementX2 &&
+      selectionY2 >= elementY2;
+  });
+}
+
+function clearSelection() {
+  elements.forEach(element => {
+    element.isSelected = false;
+  });
+}
+
+function resetCursor() {
+  document.documentElement.style.cursor = "";
+}
+
+function deleteSelectedElements() {
+  for (let i = elements.length - 1; i >= 0; --i) {
+    if (elements[i].isSelected) {
+      elements.splice(i, 1);
+    }
+  }
+}
+
+function save(state: AppState) {
+  localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(elements));
+  localStorage.setItem(LOCAL_STORAGE_KEY_STATE, JSON.stringify(state));
+}
+
+function restoreFromLocalStorage() {
+  const savedElements = localStorage.getItem(LOCAL_STORAGE_KEY);
+  const savedState = localStorage.getItem(LOCAL_STORAGE_KEY_STATE);
+
+  return restore(savedElements, savedState);
+}
+
+function restore(
+  savedElements: string | ExcalidrawElement[] | null,
+  savedState: string | null
+) {
+  try {
+    if (savedElements) {
+      elements.splice(
+        0,
+        elements.length,
+        ...(typeof savedElements === "string"
+          ? JSON.parse(savedElements)
+          : savedElements)
+      );
+      elements.forEach((element: ExcalidrawElement) => generateDraw(element));
+    }
+
+    return savedState ? JSON.parse(savedState) : null;
+  } catch (e) {
+    elements.splice(0, elements.length);
+    return null;
+  }
+}
+
+type AppState = {
+  draggingElement: ExcalidrawElement | null;
+  resizingElement: ExcalidrawElement | null;
+  elementType: string;
+  exportBackground: boolean;
+  currentItemStrokeColor: string;
+  currentItemBackgroundColor: string;
+  viewBackgroundColor: string;
+  scrollX: number;
+  scrollY: number;
+};
+
+const KEYS = {
+  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
+const SHAPES = [
+  {
+    icon: (
+      // fa-mouse-pointer
+      <svg viewBox="0 0 320 512">
+        <path d="M302.189 329.126H196.105l55.831 135.993c3.889 9.428-.555 19.999-9.444 23.999l-49.165 21.427c-9.165 4-19.443-.571-23.332-9.714l-53.053-129.136-86.664 89.138C18.729 472.71 0 463.554 0 447.977V18.299C0 1.899 19.921-6.096 30.277 5.443l284.412 292.542c11.472 11.179 3.007 31.141-12.5 31.141z" />
+      </svg>
+    ),
+    value: "selection"
+  },
+  {
+    icon: (
+      // fa-square
+      <svg viewBox="0 0 448 512">
+        <path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z" />
+      </svg>
+    ),
+    value: "rectangle"
+  },
+  {
+    icon: (
+      // fa-circle
+      <svg viewBox="0 0 512 512">
+        <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" />
+      </svg>
+    ),
+    value: "ellipse"
+  },
+  {
+    icon: (
+      // fa-long-arrow-alt-right
+      <svg viewBox="0 0 448 512">
+        <path d="M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z" />
+      </svg>
+    ),
+    value: "arrow"
+  },
+  {
+    icon: (
+      // fa-font
+      <svg viewBox="0 0 448 512">
+        <path d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z" />
+      </svg>
+    ),
+    value: "text"
+  }
+];
+
+const shapesShortcutKeys = SHAPES.map(shape => shape.value[0]);
+
+function findElementByKey(key: string) {
+  const defaultElement = "selection";
+  return SHAPES.reduce((element, shape) => {
+    if (shape.value[0] !== key) return element;
+
+    return shape.value;
+  }, defaultElement);
+}
+
+function isArrowKey(keyCode: string) {
+  return (
+    keyCode === KEYS.ARROW_LEFT ||
+    keyCode === KEYS.ARROW_RIGHT ||
+    keyCode === KEYS.ARROW_DOWN ||
+    keyCode === KEYS.ARROW_UP
+  );
+}
+
+function getSelectedIndices() {
+  const selectedIndices: number[] = [];
+  elements.forEach((element, index) => {
+    if (element.isSelected) {
+      selectedIndices.push(index);
+    }
+  });
+  return selectedIndices;
+}
+
+const someElementIsSelected = () =>
+  elements.some(element => element.isSelected);
+
+const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
+const ELEMENT_TRANSLATE_AMOUNT = 1;
+
+let lastCanvasWidth = -1;
+let lastCanvasHeight = -1;
+
+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);
+
+    const savedState = restoreFromLocalStorage();
+    if (savedState) {
+      this.setState(savedState);
+    }
+  }
+
+  public componentWillUnmount() {
+    document.removeEventListener("keydown", this.onKeyDown, false);
+    window.removeEventListener("resize", this.onResize, false);
+  }
+
+  public state: AppState = {
+    draggingElement: null,
+    resizingElement: null,
+    elementType: "selection",
+    exportBackground: true,
+    currentItemStrokeColor: "#000000",
+    currentItemBackgroundColor: "#ffffff",
+    viewBackgroundColor: "#ffffff",
+    scrollX: 0,
+    scrollY: 0
+  };
+
+  private onResize = () => {
+    this.forceUpdate();
+  };
+
+  private onKeyDown = (event: KeyboardEvent) => {
+    if (isInputLike(event.target)) return;
+
+    if (event.key === KEYS.ESCAPE) {
+      clearSelection();
+      this.forceUpdate();
+      event.preventDefault();
+    } else if (event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE) {
+      deleteSelectedElements();
+      this.forceUpdate();
+      event.preventDefault();
+    } else if (isArrowKey(event.key)) {
+      const step = event.shiftKey
+        ? ELEMENT_SHIFT_TRANSLATE_AMOUNT
+        : ELEMENT_TRANSLATE_AMOUNT;
+      elements.forEach(element => {
+        if (element.isSelected) {
+          if (event.key === KEYS.ARROW_LEFT) element.x -= step;
+          else if (event.key === KEYS.ARROW_RIGHT) element.x += step;
+          else if (event.key === KEYS.ARROW_UP) element.y -= step;
+          else if (event.key === KEYS.ARROW_DOWN) element.y += step;
+        }
+      });
+      this.forceUpdate();
+      event.preventDefault();
+
+      // Send backward: Cmd-Shift-Alt-B
+    } else if (
+      event.metaKey &&
+      event.shiftKey &&
+      event.altKey &&
+      event.code === "KeyB"
+    ) {
+      this.moveOneLeft();
+      event.preventDefault();
+
+      // Send to back: Cmd-Shift-B
+    } else if (event.metaKey && event.shiftKey && event.code === "KeyB") {
+      this.moveAllLeft();
+      event.preventDefault();
+
+      // Bring forward: Cmd-Shift-Alt-F
+    } else if (
+      event.metaKey &&
+      event.shiftKey &&
+      event.altKey &&
+      event.code === "KeyF"
+    ) {
+      this.moveOneRight();
+      event.preventDefault();
+
+      // Bring to front: Cmd-Shift-F
+    } else if (event.metaKey && event.shiftKey && event.code === "KeyF") {
+      this.moveAllRight();
+      event.preventDefault();
+
+      // Select all: Cmd-A
+    } else if (event.metaKey && event.code === "KeyA") {
+      elements.forEach(element => {
+        element.isSelected = true;
+      });
+      this.forceUpdate();
+      event.preventDefault();
+    } else if (shapesShortcutKeys.includes(event.key.toLowerCase())) {
+      this.setState({ elementType: findElementByKey(event.key) });
+    } else if (event.metaKey && event.code === "KeyZ") {
+      let lastEntry = stateHistory.pop();
+      // If nothing was changed since last, take the previous one
+      if (generateHistoryCurrentEntry() === lastEntry) {
+        lastEntry = stateHistory.pop();
+      }
+      if (lastEntry !== undefined) {
+        restoreHistoryEntry(lastEntry);
+      }
+      this.forceUpdate();
+      event.preventDefault();
+    }
+  };
+
+  private deleteSelectedElements = () => {
+    deleteSelectedElements();
+    this.forceUpdate();
+  };
+
+  private clearCanvas = () => {
+    if (window.confirm("This will clear the whole canvas. Are you sure?")) {
+      elements.splice(0, elements.length);
+      this.setState({
+        viewBackgroundColor: "#ffffff",
+        scrollX: 0,
+        scrollY: 0
+      });
+      this.forceUpdate();
+    }
+  };
+
+  private moveAllLeft = () => {
+    moveAllLeft(elements, getSelectedIndices());
+    this.forceUpdate();
+  };
+
+  private moveOneLeft = () => {
+    moveOneLeft(elements, getSelectedIndices());
+    this.forceUpdate();
+  };
+
+  private moveAllRight = () => {
+    moveAllRight(elements, getSelectedIndices());
+    this.forceUpdate();
+  };
+
+  private moveOneRight = () => {
+    moveOneRight(elements, getSelectedIndices());
+    this.forceUpdate();
+  };
+
+  private removeWheelEventListener: (() => void) | undefined;
+
+  public render() {
+    const canvasWidth = window.innerWidth - CANVAS_WINDOW_OFFSET_LEFT;
+    const canvasHeight = window.innerHeight - CANVAS_WINDOW_OFFSET_TOP;
+
+    return (
+      <div
+        className="container"
+        onCut={e => {
+          e.clipboardData.setData(
+            "text/plain",
+            JSON.stringify(elements.filter(element => element.isSelected))
+          );
+          deleteSelectedElements();
+          this.forceUpdate();
+          e.preventDefault();
+        }}
+        onCopy={e => {
+          e.clipboardData.setData(
+            "text/plain",
+            JSON.stringify(elements.filter(element => element.isSelected))
+          );
+          e.preventDefault();
+        }}
+        onPaste={e => {
+          const paste = e.clipboardData.getData("text");
+          let parsedElements;
+          try {
+            parsedElements = JSON.parse(paste);
+          } catch (e) {}
+          if (
+            Array.isArray(parsedElements) &&
+            parsedElements.length > 0 &&
+            parsedElements[0].type // need to implement a better check here...
+          ) {
+            clearSelection();
+            parsedElements.forEach(parsedElement => {
+              parsedElement.x += 10;
+              parsedElement.y += 10;
+              parsedElement.seed = randomSeed();
+              generateDraw(parsedElement);
+              elements.push(parsedElement);
+            });
+            this.forceUpdate();
+          }
+          e.preventDefault();
+        }}
+      >
+        <div className="sidePanel">
+          <h4>Shapes</h4>
+          <div className="panelTools">
+            {SHAPES.map(({ value, icon }) => (
+              <label key={value} className="tool">
+                <input
+                  type="radio"
+                  checked={this.state.elementType === value}
+                  onChange={() => {
+                    this.setState({ elementType: value });
+                    clearSelection();
+                    document.documentElement.style.cursor =
+                      value === "text" ? "text" : "crosshair";
+                    this.forceUpdate();
+                  }}
+                />
+                <div className="toolIcon">{icon}</div>
+              </label>
+            ))}
+          </div>
+          <h4>Colors</h4>
+          <div className="panelColumn">
+            <label>
+              <input
+                type="color"
+                value={this.state.viewBackgroundColor}
+                onChange={e => {
+                  this.setState({ viewBackgroundColor: e.target.value });
+                }}
+              />
+              Background
+            </label>
+            <label>
+              <input
+                type="color"
+                value={this.state.currentItemStrokeColor}
+                onChange={e => {
+                  this.setState({ currentItemStrokeColor: e.target.value });
+                }}
+              />
+              Shape Stroke
+            </label>
+            <label>
+              <input
+                type="color"
+                value={this.state.currentItemBackgroundColor}
+                onChange={e => {
+                  this.setState({ currentItemBackgroundColor: e.target.value });
+                }}
+              />
+              Shape Background
+            </label>
+          </div>
+          <h4>Canvas</h4>
+          <div className="panelColumn">
+            <button
+              onClick={this.clearCanvas}
+              title="Clear the canvas & reset background color"
+            >
+              Clear canvas
+            </button>
+          </div>
+          <h4>Export</h4>
+          <div className="panelColumn">
+            <button
+              onClick={() => {
+                exportAsPNG(this.state);
+              }}
+            >
+              Export to png
+            </button>
+            <label>
+              <input
+                type="checkbox"
+                checked={this.state.exportBackground}
+                onChange={e => {
+                  this.setState({ exportBackground: e.target.checked });
+                }}
+              />
+              background
+            </label>
+          </div>
+          <h4>Save/Load</h4>
+          <div className="panelColumn">
+            <button
+              onClick={() => {
+                saveAsJSON();
+              }}
+            >
+              Save as...
+            </button>
+            <button
+              onClick={() => {
+                loadFromJSON().then(() => this.forceUpdate());
+              }}
+            >
+              Load file...
+            </button>
+          </div>
+          {someElementIsSelected() && (
+            <>
+              <h4>Shape options</h4>
+              <div className="panelColumn">
+                <button onClick={this.deleteSelectedElements}>Delete</button>
+                <button onClick={this.moveOneRight}>Bring forward</button>
+                <button onClick={this.moveAllRight}>Bring to front</button>
+                <button onClick={this.moveOneLeft}>Send backward</button>
+                <button onClick={this.moveAllLeft}>Send to back</button>
+              </div>
+            </>
+          )}
+        </div>
+        <canvas
+          id="canvas"
+          style={{
+            width: canvasWidth,
+            height: canvasHeight
+          }}
+          width={canvasWidth * window.devicePixelRatio}
+          height={canvasHeight * window.devicePixelRatio}
+          ref={canvas => {
+            if (this.removeWheelEventListener) {
+              this.removeWheelEventListener();
+              this.removeWheelEventListener = undefined;
+            }
+            if (canvas) {
+              canvas.addEventListener("wheel", this.handleWheel, {
+                passive: false
+              });
+              this.removeWheelEventListener = () =>
+                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
+              if (
+                canvasWidth !== lastCanvasWidth ||
+                canvasHeight !== lastCanvasHeight
+              ) {
+                lastCanvasWidth = canvasWidth;
+                lastCanvasHeight = canvasHeight;
+                canvas
+                  .getContext("2d")!
+                  .scale(window.devicePixelRatio, window.devicePixelRatio);
+              }
+            }
+          }}
+          onMouseDown={e => {
+            if (lastMouseUp !== null) {
+              // Unfortunately, sometimes we don't get a mouseup after a mousedown,
+              // this can happen when a contextual menu or alert is triggered. In order to avoid
+              // being in a weird state, we clean up on the next mousedown
+              lastMouseUp(e);
+            }
+            // only handle left mouse button
+            if (e.button !== 0) return;
+            // fixes mousemove causing selection of UI texts #32
+            e.preventDefault();
+            // Preventing the event above disables default behavior
+            //  of defocusing potentially focused input, which is what we want
+            //  when clicking inside the canvas.
+            if (isInputLike(document.activeElement)) {
+              document.activeElement.blur();
+            }
+
+            const x =
+              e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
+            const y = e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
+            const element = newElement(
+              this.state.elementType,
+              x,
+              y,
+              this.state.currentItemStrokeColor,
+              this.state.currentItemBackgroundColor
+            );
+            let resizeHandle: string | false = false;
+            let isDraggingElements = false;
+            let isResizingElements = false;
+            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
+                });
+              });
+
+              this.setState({
+                resizingElement: resizeElement ? resizeElement : null
+              });
+
+              if (resizeElement) {
+                resizeHandle = resizeTest(resizeElement, x, y, {
+                  scrollX: this.state.scrollX,
+                  scrollY: this.state.scrollY,
+                  viewBackgroundColor: this.state.viewBackgroundColor
+                });
+                document.documentElement.style.cursor = `${resizeHandle}-resize`;
+                isResizingElements = true;
+              } else {
+                let hitElement = null;
+                // We need to to hit testing from front (end of the array) to back (beginning of the array)
+                for (let i = elements.length - 1; i >= 0; --i) {
+                  if (hitTest(elements[i], x, y)) {
+                    hitElement = elements[i];
+                    break;
+                  }
+                }
+
+                // If we click on something
+                if (hitElement) {
+                  if (hitElement.isSelected) {
+                    // If that element is not already selected, do nothing,
+                    // we're likely going to drag it
+                  } else {
+                    // We unselect every other elements unless shift is pressed
+                    if (!e.shiftKey) {
+                      clearSelection();
+                    }
+                    // No matter what, we select it
+                    hitElement.isSelected = true;
+                  }
+                } else {
+                  // If we don't click on anything, let's remove all the selected elements
+                  clearSelection();
+                }
+
+                isDraggingElements = someElementIsSelected();
+
+                if (isDraggingElements) {
+                  document.documentElement.style.cursor = "move";
+                }
+              }
+            }
+
+            if (isTextElement(element)) {
+              resetCursor();
+              const text = prompt("What text do you want?");
+              if (text === null) {
+                return;
+              }
+              element.text = text;
+              element.font = "20px Virgil";
+              const font = context.font;
+              context.font = element.font;
+              const {
+                actualBoundingBoxAscent,
+                actualBoundingBoxDescent,
+                width
+              } = context.measureText(element.text);
+              element.actualBoundingBoxAscent = actualBoundingBoxAscent;
+              context.font = font;
+              const height = actualBoundingBoxAscent + actualBoundingBoxDescent;
+              // Center the text
+              element.x -= width / 2;
+              element.y -= actualBoundingBoxAscent;
+              element.width = width;
+              element.height = height;
+            }
+
+            generateDraw(element);
+            elements.push(element);
+            if (this.state.elementType === "text") {
+              this.setState({
+                draggingElement: null,
+                elementType: "selection"
+              });
+              element.isSelected = true;
+            } else {
+              this.setState({ draggingElement: element });
+            }
+
+            let lastX = x;
+            let lastY = y;
+
+            const onMouseMove = (e: MouseEvent) => {
+              const target = e.target;
+              if (!(target instanceof HTMLElement)) {
+                return;
+              }
+
+              if (isResizingElements && this.state.resizingElement) {
+                const el = this.state.resizingElement;
+                const selectedElements = elements.filter(el => el.isSelected);
+                if (selectedElements.length === 1) {
+                  const x =
+                    e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
+                  const y =
+                    e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
+                  selectedElements.forEach(element => {
+                    switch (resizeHandle) {
+                      case "nw":
+                        element.width += element.x - lastX;
+                        element.height += element.y - lastY;
+                        element.x = lastX;
+                        element.y = lastY;
+                        break;
+                      case "ne":
+                        element.width = lastX - element.x;
+                        element.height += element.y - lastY;
+                        element.y = lastY;
+                        break;
+                      case "sw":
+                        element.width += element.x - lastX;
+                        element.x = lastX;
+                        element.height = lastY - element.y;
+                        break;
+                      case "se":
+                        element.width += x - lastX;
+                        if (e.shiftKey) {
+                          element.height = element.width;
+                        } else {
+                          element.height += y - lastY;
+                        }
+                        break;
+                      case "n":
+                        element.height += element.y - lastY;
+                        element.y = lastY;
+                        break;
+                      case "w":
+                        element.width += element.x - lastX;
+                        element.x = lastX;
+                        break;
+                      case "s":
+                        element.height = lastY - element.y;
+                        break;
+                      case "e":
+                        element.width = lastX - element.x;
+                        break;
+                    }
+
+                    el.x = element.x;
+                    el.y = element.y;
+                    generateDraw(el);
+                  });
+                  lastX = x;
+                  lastY = y;
+                  // We don't want to save history when resizing an element
+                  skipHistory = true;
+                  this.forceUpdate();
+                  return;
+                }
+              }
+
+              if (isDraggingElements) {
+                const selectedElements = elements.filter(el => el.isSelected);
+                if (selectedElements.length) {
+                  const x =
+                    e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
+                  const y =
+                    e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
+                  selectedElements.forEach(element => {
+                    element.x += x - lastX;
+                    element.y += y - lastY;
+                  });
+                  lastX = x;
+                  lastY = y;
+                  // We don't want to save history when dragging an element to initially size it
+                  skipHistory = true;
+                  this.forceUpdate();
+                  return;
+                }
+              }
+
+              // It is very important to read this.state within each move event,
+              // otherwise we would read a stale one!
+              const draggingElement = this.state.draggingElement;
+              if (!draggingElement) return;
+              let width =
+                e.clientX -
+                CANVAS_WINDOW_OFFSET_LEFT -
+                draggingElement.x -
+                this.state.scrollX;
+              let height =
+                e.clientY -
+                CANVAS_WINDOW_OFFSET_TOP -
+                draggingElement.y -
+                this.state.scrollY;
+              draggingElement.width = width;
+              // Make a perfect square or circle when shift is enabled
+              draggingElement.height = e.shiftKey ? width : height;
+
+              generateDraw(draggingElement);
+
+              if (this.state.elementType === "selection") {
+                setSelection(draggingElement);
+              }
+              // We don't want to save history when moving an element
+              skipHistory = true;
+              this.forceUpdate();
+            };
+
+            const onMouseUp = (e: MouseEvent) => {
+              const { draggingElement, elementType } = this.state;
+
+              lastMouseUp = null;
+              window.removeEventListener("mousemove", onMouseMove);
+              window.removeEventListener("mouseup", onMouseUp);
+
+              resetCursor();
+
+              // if no element is clicked, clear the selection and redraw
+              if (draggingElement === null) {
+                clearSelection();
+                this.forceUpdate();
+                return;
+              }
+
+              if (elementType === "selection") {
+                if (isDraggingElements) {
+                  isDraggingElements = false;
+                }
+                elements.pop();
+              } else {
+                draggingElement.isSelected = true;
+              }
+
+              this.setState({
+                draggingElement: null,
+                elementType: "selection"
+              });
+              this.forceUpdate();
+            };
+
+            lastMouseUp = 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;
+            this.forceUpdate();
+          }}
+        />
+      </div>
+    );
+  }
+
+  private handleWheel = (e: WheelEvent) => {
+    e.preventDefault();
+    const { deltaX, deltaY } = e;
+    this.setState(state => ({
+      scrollX: state.scrollX - deltaX,
+      scrollY: state.scrollY - deltaY
+    }));
+  };
+
+  componentDidUpdate() {
+    renderScene(rc, canvas, {
+      scrollX: this.state.scrollX,
+      scrollY: this.state.scrollY,
+      viewBackgroundColor: this.state.viewBackgroundColor
+    });
+    save(this.state);
+    if (!skipHistory) {
+      pushHistoryEntry(generateHistoryCurrentEntry());
+    }
+    skipHistory = false;
+  }
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(<App />, rootElement);
+const canvas = document.getElementById("canvas") as HTMLCanvasElement;
+const rc = rough.canvas(canvas);
+const context = canvas.getContext("2d")!;
+
+ReactDOM.render(<App />, rootElement);