diff --git a/.gitignore b/.gitignore
index f171f6f93..46e15b10f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,3 +17,4 @@ yarn.lock
 # Editors
 .vscode/
 
+.DS_Store
\ No newline at end of file
diff --git a/src/components/ButtonSelect.tsx b/src/components/ButtonSelect.tsx
new file mode 100644
index 000000000..ec9b55f07
--- /dev/null
+++ b/src/components/ButtonSelect.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+export function ButtonSelect<T>({
+  options,
+  value,
+  onChange
+}: {
+  options: { value: T; text: string }[];
+  value: T | null;
+  onChange: (value: T) => void;
+}) {
+  return (
+    <div className="buttonList">
+      {options.map(option => (
+        <button
+          key={option.text}
+          onClick={() => onChange(option.value)}
+          className={value === option.value ? "active" : ""}
+        >
+          {option.text}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
new file mode 100644
index 000000000..65dfc78b5
--- /dev/null
+++ b/src/components/ColorPicker.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import { TwitterPicker } from "react-color";
+
+export function ColorPicker({
+  color,
+  onChange
+}: {
+  color: string | null;
+  onChange: (color: string) => void;
+}) {
+  const [isActive, setActive] = React.useState(false);
+  return (
+    <div>
+      <button
+        className="swatch"
+        style={color ? { backgroundColor: color } : undefined}
+        onClick={() => setActive(!isActive)}
+      />
+      {isActive ? (
+        <div className="popover">
+          <div className="cover" onClick={() => setActive(false)} />
+          <TwitterPicker
+            colors={[
+              "#000000",
+              "#ABB8C3",
+              "#FFFFFF",
+              "#FF6900",
+              "#FCB900",
+              "#00D084",
+              "#8ED1FC",
+              "#0693E3",
+              "#EB144C",
+              "#F78DA7",
+              "#9900EF"
+            ]}
+            width="205px"
+            color={color || undefined}
+            onChange={changedColor => {
+              onChange(changedColor.hex);
+            }}
+          />
+        </div>
+      ) : null}
+      <input
+        type="text"
+        className="swatch-input"
+        value={color || ""}
+        onChange={e => onChange(e.target.value)}
+      />
+    </div>
+  );
+}
diff --git a/src/components/EditableText.tsx b/src/components/EditableText.tsx
index 0f7677269..1aa541a6b 100644
--- a/src/components/EditableText.tsx
+++ b/src/components/EditableText.tsx
@@ -10,7 +10,7 @@ type Props = {
   onChange: (value: string) => void;
 };
 
-export default class EditableText extends Component<Props, InputState> {
+export class EditableText extends Component<Props, InputState> {
   constructor(props: Props) {
     super(props);
 
diff --git a/src/element/bounds.ts b/src/element/bounds.ts
new file mode 100644
index 000000000..a95d63dc2
--- /dev/null
+++ b/src/element/bounds.ts
@@ -0,0 +1,52 @@
+import { ExcalidrawElement } from "./types";
+import { rotate } from "../math";
+
+// 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.
+export function getElementAbsoluteX1(element: ExcalidrawElement) {
+  return element.width >= 0 ? element.x : element.x + element.width;
+}
+export function getElementAbsoluteX2(element: ExcalidrawElement) {
+  return element.width >= 0 ? element.x + element.width : element.x;
+}
+export function getElementAbsoluteY1(element: ExcalidrawElement) {
+  return element.height >= 0 ? element.y : element.y + element.height;
+}
+export function getElementAbsoluteY2(element: ExcalidrawElement) {
+  return element.height >= 0 ? element.y + element.height : element.y;
+}
+
+export function getDiamondPoints(element: ExcalidrawElement) {
+  const topX = Math.floor(element.width / 2) + 1;
+  const topY = 0;
+  const rightX = element.width;
+  const rightY = Math.floor(element.height / 2) + 1;
+  const bottomX = topX;
+  const bottomY = element.height;
+  const leftX = topY;
+  const leftY = rightY;
+
+  return [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY];
+}
+
+export 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];
+}
diff --git a/src/element/collision.ts b/src/element/collision.ts
new file mode 100644
index 000000000..4d1af1b26
--- /dev/null
+++ b/src/element/collision.ts
@@ -0,0 +1,124 @@
+import { distanceBetweenPointAndSegment } from "../math";
+
+import { ExcalidrawElement } from "./types";
+import {
+  getElementAbsoluteX1,
+  getElementAbsoluteX2,
+  getElementAbsoluteY1,
+  getElementAbsoluteY2,
+  getArrowPoints,
+  getDiamondPoints
+} from "./bounds";
+
+export 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 = Math.abs(element.width) / 2;
+    const b = Math.abs(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 === "diamond") {
+    x -= element.x;
+    y -= element.y;
+
+    const [
+      topX,
+      topY,
+      rightX,
+      rightY,
+      bottomX,
+      bottomY,
+      leftX,
+      leftY
+    ] = getDiamondPoints(element);
+
+    return (
+      distanceBetweenPointAndSegment(x, y, topX, topY, rightX, rightY) <
+        lineThreshold ||
+      distanceBetweenPointAndSegment(x, y, rightX, rightY, bottomX, bottomY) <
+        lineThreshold ||
+      distanceBetweenPointAndSegment(x, y, bottomX, bottomY, leftX, leftY) <
+        lineThreshold ||
+      distanceBetweenPointAndSegment(x, y, leftX, leftY, topX, topY) <
+        lineThreshold
+    );
+  } 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);
+  }
+}
diff --git a/src/element/generateDraw.ts b/src/element/generateDraw.ts
new file mode 100644
index 000000000..7a7086d2b
--- /dev/null
+++ b/src/element/generateDraw.ts
@@ -0,0 +1,145 @@
+import rough from "roughjs/bin/wrappers/rough";
+
+import { withCustomMathRandom } from "../random";
+
+import { ExcalidrawElement } from "./types";
+import { isTextElement } from "./typeChecks";
+import { getDiamondPoints, getArrowPoints } from "./bounds";
+
+// 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);
+
+export 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,
+        fillStyle: element.fillStyle,
+        strokeWidth: element.strokeWidth,
+        roughness: element.roughness
+      });
+    });
+    element.draw = (rc, context, { scrollX, scrollY }) => {
+      context.globalAlpha = element.opacity / 100;
+      context.translate(element.x + scrollX, element.y + scrollY);
+      rc.draw(shape);
+      context.translate(-element.x - scrollX, -element.y - scrollY);
+      context.globalAlpha = 1;
+    };
+  } else if (element.type === "diamond") {
+    const shape = withCustomMathRandom(element.seed, () => {
+      const [
+        topX,
+        topY,
+        rightX,
+        rightY,
+        bottomX,
+        bottomY,
+        leftX,
+        leftY
+      ] = getDiamondPoints(element);
+      return generator.polygon(
+        [
+          [topX, topY],
+          [rightX, rightY],
+          [bottomX, bottomY],
+          [leftX, leftY]
+        ],
+        {
+          stroke: element.strokeColor,
+          fill: element.backgroundColor,
+          fillStyle: element.fillStyle,
+          strokeWidth: element.strokeWidth,
+          roughness: element.roughness
+        }
+      );
+    });
+    element.draw = (rc, context, { scrollX, scrollY }) => {
+      context.globalAlpha = element.opacity / 100;
+      context.translate(element.x + scrollX, element.y + scrollY);
+      rc.draw(shape);
+      context.translate(-element.x - scrollX, -element.y - scrollY);
+      context.globalAlpha = 1;
+    };
+  } 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,
+          fillStyle: element.fillStyle,
+          strokeWidth: element.strokeWidth,
+          roughness: element.roughness
+        }
+      )
+    );
+    element.draw = (rc, context, { scrollX, scrollY }) => {
+      context.globalAlpha = element.opacity / 100;
+      context.translate(element.x + scrollX, element.y + scrollY);
+      rc.draw(shape);
+      context.translate(-element.x - scrollX, -element.y - scrollY);
+      context.globalAlpha = 1;
+    };
+  } else if (element.type === "arrow") {
+    const [x1, y1, x2, y2, x3, y3, x4, y4] = getArrowPoints(element);
+    const options = {
+      stroke: element.strokeColor,
+      strokeWidth: element.strokeWidth,
+      roughness: element.roughness
+    };
+
+    const shapes = withCustomMathRandom(element.seed, () => [
+      //    \
+      generator.line(x3, y3, x2, y2, options),
+      // -----
+      generator.line(x1, y1, x2, y2, options),
+      //    /
+      generator.line(x4, y4, x2, y2, options)
+    ]);
+
+    element.draw = (rc, context, { scrollX, scrollY }) => {
+      context.globalAlpha = element.opacity / 100;
+      context.translate(element.x + scrollX, element.y + scrollY);
+      shapes.forEach(shape => rc.draw(shape));
+      context.translate(-element.x - scrollX, -element.y - scrollY);
+      context.globalAlpha = 1;
+    };
+    return;
+  } else if (isTextElement(element)) {
+    element.draw = (rc, context, { scrollX, scrollY }) => {
+      context.globalAlpha = element.opacity / 100;
+      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;
+      context.globalAlpha = 1;
+    };
+  } else {
+    throw new Error("Unimplemented type " + element.type);
+  }
+}
diff --git a/src/element/handlerRectangles.ts b/src/element/handlerRectangles.ts
new file mode 100644
index 000000000..e261ac978
--- /dev/null
+++ b/src/element/handlerRectangles.ts
@@ -0,0 +1,85 @@
+import { SceneState } from "../scene/types";
+import { ExcalidrawElement } from "./types";
+
+export 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
+
+  if (element.type === "arrow") {
+    return {
+      nw: handlers.nw,
+      se: handlers.se
+    };
+  }
+
+  return handlers;
+}
diff --git a/src/element/index.ts b/src/element/index.ts
new file mode 100644
index 000000000..2a96d8cf9
--- /dev/null
+++ b/src/element/index.ts
@@ -0,0 +1,15 @@
+export { newElement } from "./newElement";
+export {
+  getElementAbsoluteX1,
+  getElementAbsoluteX2,
+  getElementAbsoluteY1,
+  getElementAbsoluteY2,
+  getDiamondPoints,
+  getArrowPoints
+} from "./bounds";
+
+export { handlerRectangles } from "./handlerRectangles";
+export { hitTest } from "./collision";
+export { resizeTest } from "./resizeTest";
+export { generateDraw } from "./generateDraw";
+export { isTextElement } from "./typeChecks";
diff --git a/src/element/newElement.ts b/src/element/newElement.ts
new file mode 100644
index 000000000..609b27d6f
--- /dev/null
+++ b/src/element/newElement.ts
@@ -0,0 +1,40 @@
+import { RoughCanvas } from "roughjs/bin/canvas";
+
+import { SceneState } from "../scene/types";
+import { randomSeed } from "../random";
+
+export function newElement(
+  type: string,
+  x: number,
+  y: number,
+  strokeColor: string,
+  backgroundColor: string,
+  fillStyle: string,
+  strokeWidth: number,
+  roughness: number,
+  opacity: number,
+  width = 0,
+  height = 0
+) {
+  const element = {
+    type: type,
+    x: x,
+    y: y,
+    width: width,
+    height: height,
+    isSelected: false,
+    strokeColor: strokeColor,
+    backgroundColor: backgroundColor,
+    fillStyle: fillStyle,
+    strokeWidth: strokeWidth,
+    roughness: roughness,
+    opacity: opacity,
+    seed: randomSeed(),
+    draw(
+      rc: RoughCanvas,
+      context: CanvasRenderingContext2D,
+      sceneState: SceneState
+    ) {}
+  };
+  return element;
+}
diff --git a/src/element/resizeTest.ts b/src/element/resizeTest.ts
new file mode 100644
index 000000000..8af1b148d
--- /dev/null
+++ b/src/element/resizeTest.ts
@@ -0,0 +1,32 @@
+import { ExcalidrawElement } from "./types";
+import { SceneState } from "../scene/types";
+
+import { handlerRectangles } from "./handlerRectangles";
+
+export function resizeTest(
+  element: ExcalidrawElement,
+  x: number,
+  y: number,
+  sceneState: SceneState
+): string | false {
+  if (element.type === "text") 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;
+}
diff --git a/src/element/typeChecks.ts b/src/element/typeChecks.ts
new file mode 100644
index 000000000..9fa6e01ce
--- /dev/null
+++ b/src/element/typeChecks.ts
@@ -0,0 +1,7 @@
+import { ExcalidrawElement, ExcalidrawTextElement } from "./types";
+
+export function isTextElement(
+  element: ExcalidrawElement
+): element is ExcalidrawTextElement {
+  return element.type === "text";
+}
diff --git a/src/element/types.ts b/src/element/types.ts
new file mode 100644
index 000000000..1662bfdf0
--- /dev/null
+++ b/src/element/types.ts
@@ -0,0 +1,9 @@
+import { newElement } from "./newElement";
+
+export type ExcalidrawElement = ReturnType<typeof newElement>;
+export type ExcalidrawTextElement = ExcalidrawElement & {
+  type: "text";
+  font: string;
+  text: string;
+  actualBoundingBoxAscent: number;
+};
diff --git a/src/history.ts b/src/history.ts
new file mode 100644
index 000000000..8076e0b5b
--- /dev/null
+++ b/src/history.ts
@@ -0,0 +1,80 @@
+import { ExcalidrawElement } from "./element/types";
+import { generateDraw } from "./element";
+
+class SceneHistory {
+  private recording: boolean = true;
+  private stateHistory: string[] = [];
+  private redoStack: string[] = [];
+
+  generateCurrentEntry(elements: ExcalidrawElement[]) {
+    return JSON.stringify(
+      elements.map(element => ({ ...element, isSelected: false }))
+    );
+  }
+
+  pushEntry(newEntry: string) {
+    if (
+      this.stateHistory.length > 0 &&
+      this.stateHistory[this.stateHistory.length - 1] === newEntry
+    ) {
+      // If the last entry is the same as this one, ignore it
+      return;
+    }
+    this.stateHistory.push(newEntry);
+  }
+
+  restoreEntry(elements: ExcalidrawElement[], 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
+    this.skipRecording();
+  }
+
+  clearRedoStack() {
+    this.redoStack.splice(0, this.redoStack.length);
+  }
+
+  redoOnce(elements: ExcalidrawElement[]) {
+    const currentEntry = this.generateCurrentEntry(elements);
+    const entryToRestore = this.redoStack.pop();
+    if (entryToRestore !== undefined) {
+      this.restoreEntry(elements, entryToRestore);
+      this.stateHistory.push(currentEntry);
+    }
+  }
+
+  undoOnce(elements: ExcalidrawElement[]) {
+    const currentEntry = this.generateCurrentEntry(elements);
+    let entryToRestore = this.stateHistory.pop();
+
+    // If nothing was changed since last, take the previous one
+    if (currentEntry === entryToRestore) {
+      entryToRestore = this.stateHistory.pop();
+    }
+    if (entryToRestore !== undefined) {
+      this.restoreEntry(elements, entryToRestore);
+      this.redoStack.push(currentEntry);
+    }
+  }
+
+  isRecording() {
+    return this.recording;
+  }
+
+  skipRecording() {
+    this.recording = false;
+  }
+
+  resumeRecording() {
+    this.recording = true;
+  }
+}
+
+export const createHistory: () => { history: SceneHistory } = () => {
+  const history = new SceneHistory();
+  return { history };
+};
diff --git a/src/index.tsx b/src/index.tsx
index d29567b4b..32f4e314a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,950 +1,50 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import rough from "roughjs/bin/wrappers/rough";
-import { RoughCanvas } from "roughjs/bin/canvas";
-import { TwitterPicker } from "react-color";
 
 import { moveOneLeft, moveAllLeft, moveOneRight, moveAllRight } from "./zindex";
-import { LCG, randomSeed, withCustomMathRandom } from "./random";
-import { distanceBetweenPointAndSegment } from "./math";
-import { roundRect } from "./roundRect";
+import { randomSeed } from "./random";
+import { newElement, resizeTest, generateDraw, isTextElement } from "./element";
+import {
+  renderScene,
+  clearSelection,
+  getSelectedIndices,
+  deleteSelectedElements,
+  setSelection,
+  isOverScrollBars,
+  someElementIsSelected,
+  getSelectedAttribute,
+  loadFromJSON,
+  saveAsJSON,
+  exportAsPNG,
+  restoreFromLocalStorage,
+  saveToLocalStorage,
+  hasBackground,
+  hasStroke,
+  getElementAtPosition,
+  createScene
+} from "./scene";
+import { AppState } from "./types";
+import { ExcalidrawElement, ExcalidrawTextElement } from "./element/types";
 
-import EditableText from "./components/EditableText";
+import { getDateTime, capitalizeString, isInputLike } from "./utils";
+
+import { EditableText } from "./components/EditableText";
+import { ButtonSelect } from "./components/ButtonSelect";
+import { ColorPicker } from "./components/ColorPicker";
+import { SHAPES, findShapeByKey, shapesShortcutKeys } from "./shapes";
+import { createHistory } from "./history";
 
 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>();
+const { elements } = createScene();
+const { history } = createHistory();
 
 const DEFAULT_PROJECT_NAME = `excalidraw-${getDateTime()}`;
 
-let skipHistory = false;
-const stateHistory: string[] = [];
-const redoStack: 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;
-}
-
-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 === "diamond") {
-    x -= element.x;
-    y -= element.y;
-
-    const [
-      topX,
-      topY,
-      rightX,
-      rightY,
-      bottomX,
-      bottomY,
-      leftX,
-      leftY
-    ] = getDiamondPoints(element);
-
-    return (
-      distanceBetweenPointAndSegment(x, y, topX, topY, rightX, rightY) <
-        lineThreshold ||
-      distanceBetweenPointAndSegment(x, y, rightX, rightY, bottomX, bottomY) <
-        lineThreshold ||
-      distanceBetweenPointAndSegment(x, y, bottomX, bottomY, leftX, leftY) <
-        lineThreshold ||
-      distanceBetweenPointAndSegment(x, y, leftX, leftY, topX, topY) <
-        lineThreshold
-    );
-  } 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") 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,
-  fillStyle: string,
-  strokeWidth: number,
-  roughness: number,
-  opacity: number,
-  width = 0,
-  height = 0
-) {
-  const element = {
-    type: type,
-    x: x,
-    y: y,
-    width: width,
-    height: height,
-    isSelected: false,
-    strokeColor: strokeColor,
-    backgroundColor: backgroundColor,
-    fillStyle: fillStyle,
-    strokeWidth: strokeWidth,
-    roughness: roughness,
-    opacity: opacity,
-    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_MIN_SIZE = 15;
-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
-) {
-  let minX = Infinity;
-  let maxX = 0;
-  let minY = Infinity;
-  let maxY = 0;
-
-  elements.forEach(element => {
-    minX = Math.min(minX, getElementAbsoluteX1(element));
-    maxX = Math.max(maxX, getElementAbsoluteX2(element));
-    minY = Math.min(minY, getElementAbsoluteY1(element));
-    maxY = Math.max(maxY, getElementAbsoluteY2(element));
-  });
-
-  minX += scrollX;
-  maxX += scrollX;
-  minY += scrollY;
-  maxY += scrollY;
-  const leftOverflow = Math.max(-minX, 0);
-  const rightOverflow = Math.max(-(canvasWidth - maxX), 0);
-  const topOverflow = Math.max(-minY, 0);
-  const bottomOverflow = Math.max(-(canvasHeight - maxY), 0);
-
-  // horizontal scrollbar
-  let horizontalScrollBar = null;
-  if (leftOverflow || rightOverflow) {
-    horizontalScrollBar = {
-      x: Math.min(
-        leftOverflow + SCROLLBAR_MARGIN,
-        canvasWidth - SCROLLBAR_MIN_SIZE - SCROLLBAR_MARGIN
-      ),
-      y: canvasHeight - SCROLLBAR_WIDTH - SCROLLBAR_MARGIN,
-      width: Math.max(
-        canvasWidth - rightOverflow - leftOverflow - SCROLLBAR_MARGIN * 2,
-        SCROLLBAR_MIN_SIZE
-      ),
-      height: SCROLLBAR_WIDTH
-    };
-  }
-
-  // vertical scrollbar
-  let verticalScrollBar = null;
-  if (topOverflow || bottomOverflow) {
-    verticalScrollBar = {
-      x: canvasWidth - SCROLLBAR_WIDTH - SCROLLBAR_MARGIN,
-      y: Math.min(
-        topOverflow + SCROLLBAR_MARGIN,
-        canvasHeight - SCROLLBAR_MIN_SIZE - SCROLLBAR_MARGIN
-      ),
-      width: SCROLLBAR_WIDTH,
-      height: Math.max(
-        canvasHeight - bottomOverflow - topOverflow - SCROLLBAR_WIDTH * 2,
-        SCROLLBAR_MIN_SIZE
-      )
-    };
-  }
-
-  return {
-    horizontal: horizontalScrollBar,
-    vertical: verticalScrollBar
-  };
-}
-
-function isOverScrollBars(
-  x: number,
-  y: number,
-  canvasWidth: number,
-  canvasHeight: number,
-  scrollX: number,
-  scrollY: number
-) {
-  const scrollBars = getScrollBars(canvasWidth, canvasHeight, scrollX, scrollY);
-
-  const [isOverHorizontalScrollBar, isOverVerticalScrollBar] = [
-    scrollBars.horizontal,
-    scrollBars.vertical
-  ].map(
-    scrollBar =>
-      scrollBar &&
-      scrollBar.x <= x &&
-      x <= scrollBar.x + scrollBar.width &&
-      scrollBar.y <= y &&
-      y <= scrollBar.y + scrollBar.height
-  );
-
-  return {
-    isOverHorizontalScrollBar,
-    isOverVerticalScrollBar
-  };
-}
-
-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
-
-  if (element.type === "arrow") {
-    return {
-      nw: handlers.nw,
-      se: handlers.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" && 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
-    );
-
-    const strokeStyle = context.strokeStyle;
-    context.fillStyle = SCROLLBAR_COLOR;
-    context.strokeStyle = "rgba(255,255,255,0.8)";
-    [scrollBars.horizontal, scrollBars.vertical].forEach(scrollBar => {
-      if (scrollBar)
-        roundRect(
-          context,
-          scrollBar.x,
-          scrollBar.y,
-          scrollBar.width,
-          scrollBar.height,
-          SCROLLBAR_WIDTH / 2
-        );
-    });
-    context.strokeStyle = strokeStyle;
-    context.fillStyle = fillStyle;
-  }
-}
-
-function saveAsJSON(name: string) {
-  const serialized = JSON.stringify({
-    version: 1,
-    source: window.location.origin,
-    elements
-  });
-
-  saveFile(
-    `${name}.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,
-  name
-}: {
-  exportBackground: boolean;
-  exportPadding?: number;
-  viewBackgroundColor: string;
-  scrollX: number;
-  scrollY: number;
-  name: string;
-}) {
-  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(`${name}.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
-  ];
-}
-
-function getDateTime() {
-  const date = new Date();
-  const year = date.getFullYear();
-  const month = date.getMonth() + 1;
-  const day = date.getDate();
-  const hr = date.getHours();
-  const min = date.getMinutes();
-  const secs = date.getSeconds();
-
-  return `${year}${month}${day}${hr}${min}${secs}`;
-}
-
-// 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 getDiamondPoints(element: ExcalidrawElement) {
-  const topX = Math.floor(element.width / 2) + 1;
-  const topY = 0;
-  const rightX = element.width;
-  const rightY = Math.floor(element.height / 2) + 1;
-  const bottomX = topX;
-  const bottomY = element.height;
-  const leftX = topY;
-  const leftY = rightY;
-
-  return [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY];
-}
-
-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,
-        fillStyle: element.fillStyle,
-        strokeWidth: element.strokeWidth,
-        roughness: element.roughness
-      });
-    });
-    element.draw = (rc, context, { scrollX, scrollY }) => {
-      context.globalAlpha = element.opacity / 100;
-      context.translate(element.x + scrollX, element.y + scrollY);
-      rc.draw(shape);
-      context.translate(-element.x - scrollX, -element.y - scrollY);
-      context.globalAlpha = 1;
-    };
-  } else if (element.type === "diamond") {
-    const shape = withCustomMathRandom(element.seed, () => {
-      const [
-        topX,
-        topY,
-        rightX,
-        rightY,
-        bottomX,
-        bottomY,
-        leftX,
-        leftY
-      ] = getDiamondPoints(element);
-      return generator.polygon(
-        [
-          [topX, topY],
-          [rightX, rightY],
-          [bottomX, bottomY],
-          [leftX, leftY]
-        ],
-        {
-          stroke: element.strokeColor,
-          fill: element.backgroundColor,
-          fillStyle: element.fillStyle,
-          strokeWidth: element.strokeWidth,
-          roughness: element.roughness
-        }
-      );
-    });
-    element.draw = (rc, context, { scrollX, scrollY }) => {
-      context.globalAlpha = element.opacity / 100;
-      context.translate(element.x + scrollX, element.y + scrollY);
-      rc.draw(shape);
-      context.translate(-element.x - scrollX, -element.y - scrollY);
-      context.globalAlpha = 1;
-    };
-  } 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,
-          fillStyle: element.fillStyle,
-          strokeWidth: element.strokeWidth,
-          roughness: element.roughness
-        }
-      )
-    );
-    element.draw = (rc, context, { scrollX, scrollY }) => {
-      context.globalAlpha = element.opacity / 100;
-      context.translate(element.x + scrollX, element.y + scrollY);
-      rc.draw(shape);
-      context.translate(-element.x - scrollX, -element.y - scrollY);
-      context.globalAlpha = 1;
-    };
-  } else if (element.type === "arrow") {
-    const [x1, y1, x2, y2, x3, y3, x4, y4] = getArrowPoints(element);
-    const options = {
-      stroke: element.strokeColor,
-      strokeWidth: element.strokeWidth,
-      roughness: element.roughness
-    };
-
-    const shapes = withCustomMathRandom(element.seed, () => [
-      //    \
-      generator.line(x3, y3, x2, y2, options),
-      // -----
-      generator.line(x1, y1, x2, y2, options),
-      //    /
-      generator.line(x4, y4, x2, y2, options)
-    ]);
-
-    element.draw = (rc, context, { scrollX, scrollY }) => {
-      context.globalAlpha = element.opacity / 100;
-      context.translate(element.x + scrollX, element.y + scrollY);
-      shapes.forEach(shape => rc.draw(shape));
-      context.translate(-element.x - scrollX, -element.y - scrollY);
-      context.globalAlpha = 1;
-    };
-    return;
-  } else if (isTextElement(element)) {
-    element.draw = (rc, context, { scrollX, scrollY }) => {
-      context.globalAlpha = element.opacity / 100;
-      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;
-      context.globalAlpha = 1;
-    };
-  } 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) => {
-        element.fillStyle = element.fillStyle || "hachure";
-        element.strokeWidth = element.strokeWidth || 1;
-        element.roughness = element.roughness || 1;
-        element.opacity =
-          element.opacity === null || element.opacity === undefined
-            ? 100
-            : element.opacity;
-
-        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;
-  name: string;
-};
-
 const KEYS = {
   ARROW_LEFT: "ArrowLeft",
   ARROW_RIGHT: "ArrowRight",
@@ -955,79 +55,6 @@ const KEYS = {
   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: (
-      // custom
-      <svg viewBox="0 0 223.646 223.646">
-        <path d="M111.823 0L16.622 111.823 111.823 223.646 207.025 111.823z" />
-      </svg>
-    ),
-    value: "diamond"
-  },
-  {
-    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 capitalize(str: string) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
-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 ||
@@ -1037,49 +64,8 @@ function isArrowKey(keyCode: string) {
   );
 }
 
-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 hasBackground = () =>
-  elements.some(
-    element =>
-      element.isSelected &&
-      (element.type === "rectangle" ||
-        element.type === "ellipse" ||
-        element.type === "diamond")
-  );
-
-const hasStroke = () =>
-  elements.some(
-    element =>
-      element.isSelected &&
-      (element.type === "rectangle" ||
-        element.type === "ellipse" ||
-        element.type === "diamond" ||
-        element.type === "arrow")
-  );
-
-function getSelectedAttribute<T>(
-  getAttribute: (element: ExcalidrawElement) => T
-): T | null {
-  const attributes = Array.from(
-    new Set(
-      elements
-        .filter(element => element.isSelected)
-        .map(element => getAttribute(element))
-    )
-  );
-  return attributes.length === 1 ? attributes[0] : null;
+function resetCursor() {
+  document.documentElement.style.cursor = "";
 }
 
 function addTextElement(element: ExcalidrawTextElement) {
@@ -1110,93 +96,6 @@ function addTextElement(element: ExcalidrawTextElement) {
   return true;
 }
 
-function getElementAtPosition(x: number, y: number) {
-  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;
-    }
-  }
-
-  return hitElement;
-}
-
-function ButtonSelect<T>({
-  options,
-  value,
-  onChange
-}: {
-  options: { value: T; text: string }[];
-  value: T | null;
-  onChange: (value: T) => void;
-}) {
-  return (
-    <div className="buttonList">
-      {options.map(option => (
-        <button
-          key={option.text}
-          onClick={() => onChange(option.value)}
-          className={value === option.value ? "active" : ""}
-        >
-          {option.text}
-        </button>
-      ))}
-    </div>
-  );
-}
-
-function ColorPicker({
-  color,
-  onChange
-}: {
-  color: string | null;
-  onChange: (color: string) => void;
-}) {
-  const [isActive, setActive] = React.useState(false);
-  return (
-    <div>
-      <button
-        className="swatch"
-        style={color ? { backgroundColor: color } : undefined}
-        onClick={() => setActive(!isActive)}
-      />
-      {isActive ? (
-        <div className="popover">
-          <div className="cover" onClick={() => setActive(false)} />
-          <TwitterPicker
-            colors={[
-              "#000000",
-              "#ABB8C3",
-              "#FFFFFF",
-              "#FF6900",
-              "#FCB900",
-              "#00D084",
-              "#8ED1FC",
-              "#0693E3",
-              "#EB144C",
-              "#F78DA7",
-              "#9900EF"
-            ]}
-            width="205px"
-            color={color || undefined}
-            onChange={changedColor => {
-              onChange(changedColor.hex);
-            }}
-          />
-        </div>
-      ) : null}
-      <input
-        type="text"
-        className="swatch-input"
-        value={color || ""}
-        onChange={e => onChange(e.target.value)}
-      />
-    </div>
-  );
-}
-
 const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
 const ELEMENT_TRANSLATE_AMOUNT = 1;
 
@@ -1210,7 +109,7 @@ class App extends React.Component<{}, AppState> {
     document.addEventListener("keydown", this.onKeyDown, false);
     window.addEventListener("resize", this.onResize, false);
 
-    const savedState = restoreFromLocalStorage();
+    const savedState = restoreFromLocalStorage(elements);
     if (savedState) {
       this.setState(savedState);
     }
@@ -1242,11 +141,11 @@ class App extends React.Component<{}, AppState> {
     if (isInputLike(event.target)) return;
 
     if (event.key === KEYS.ESCAPE) {
-      clearSelection();
+      clearSelection(elements);
       this.forceUpdate();
       event.preventDefault();
     } else if (event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE) {
-      deleteSelectedElements();
+      deleteSelectedElements(elements);
       this.forceUpdate();
       event.preventDefault();
     } else if (isArrowKey(event.key)) {
@@ -1302,27 +201,14 @@ class App extends React.Component<{}, AppState> {
       this.forceUpdate();
       event.preventDefault();
     } else if (shapesShortcutKeys.includes(event.key.toLowerCase())) {
-      this.setState({ elementType: findElementByKey(event.key) });
+      this.setState({ elementType: findShapeByKey(event.key) });
     } else if (event.metaKey && event.code === "KeyZ") {
-      const currentEntry = generateHistoryCurrentEntry();
       if (event.shiftKey) {
         // Redo action
-        const entryToRestore = redoStack.pop();
-        if (entryToRestore !== undefined) {
-          restoreHistoryEntry(entryToRestore);
-          stateHistory.push(currentEntry);
-        }
+        history.redoOnce(elements);
       } else {
         // undo action
-        let lastEntry = stateHistory.pop();
-        // If nothing was changed since last, take the previous one
-        if (currentEntry === lastEntry) {
-          lastEntry = stateHistory.pop();
-        }
-        if (lastEntry !== undefined) {
-          restoreHistoryEntry(lastEntry);
-          redoStack.push(currentEntry);
-        }
+        history.undoOnce(elements);
       }
       this.forceUpdate();
       event.preventDefault();
@@ -1330,7 +216,7 @@ class App extends React.Component<{}, AppState> {
   };
 
   private deleteSelectedElements = () => {
-    deleteSelectedElements();
+    deleteSelectedElements(elements);
     this.forceUpdate();
   };
 
@@ -1347,22 +233,22 @@ class App extends React.Component<{}, AppState> {
   };
 
   private moveAllLeft = () => {
-    moveAllLeft(elements, getSelectedIndices());
+    moveAllLeft(elements, getSelectedIndices(elements));
     this.forceUpdate();
   };
 
   private moveOneLeft = () => {
-    moveOneLeft(elements, getSelectedIndices());
+    moveOneLeft(elements, getSelectedIndices(elements));
     this.forceUpdate();
   };
 
   private moveAllRight = () => {
-    moveAllRight(elements, getSelectedIndices());
+    moveAllRight(elements, getSelectedIndices(elements));
     this.forceUpdate();
   };
 
   private moveOneRight = () => {
-    moveOneRight(elements, getSelectedIndices());
+    moveOneRight(elements, getSelectedIndices(elements));
     this.forceUpdate();
   };
 
@@ -1409,7 +295,7 @@ class App extends React.Component<{}, AppState> {
             "text/plain",
             JSON.stringify(elements.filter(element => element.isSelected))
           );
-          deleteSelectedElements();
+          deleteSelectedElements(elements);
           this.forceUpdate();
           e.preventDefault();
         }}
@@ -1431,7 +317,7 @@ class App extends React.Component<{}, AppState> {
             parsedElements.length > 0 &&
             parsedElements[0].type // need to implement a better check here...
           ) {
-            clearSelection();
+            clearSelection(elements);
             parsedElements.forEach(parsedElement => {
               parsedElement.x += 10;
               parsedElement.y += 10;
@@ -1451,14 +337,16 @@ class App extends React.Component<{}, AppState> {
               <label
                 key={value}
                 className="tool"
-                title={`${capitalize(value)} - ${capitalize(value)[0]}`}
+                title={`${capitalizeString(value)} - ${
+                  capitalizeString(value)[0]
+                }`}
               >
                 <input
                   type="radio"
                   checked={this.state.elementType === value}
                   onChange={() => {
                     this.setState({ elementType: value });
-                    clearSelection();
+                    clearSelection(elements);
                     document.documentElement.style.cursor =
                       value === "text" ? "text" : "crosshair";
                     this.forceUpdate();
@@ -1468,7 +356,7 @@ class App extends React.Component<{}, AppState> {
               </label>
             ))}
           </div>
-          {someElementIsSelected() && (
+          {someElementIsSelected(elements) && (
             <div className="panelColumn">
               <h4>Selection</h4>
               <div className="buttonList">
@@ -1479,15 +367,19 @@ class App extends React.Component<{}, AppState> {
               </div>
               <h5>Stroke Color</h5>
               <ColorPicker
-                color={getSelectedAttribute(element => element.strokeColor)}
+                color={getSelectedAttribute(
+                  elements,
+                  element => element.strokeColor
+                )}
                 onChange={color => this.changeStrokeColor(color)}
               />
 
-              {hasBackground() && (
+              {hasBackground(elements) && (
                 <>
                   <h5>Background Color</h5>
                   <ColorPicker
                     color={getSelectedAttribute(
+                      elements,
                       element => element.backgroundColor
                     )}
                     onChange={color => this.changeBackgroundColor(color)}
@@ -1499,7 +391,10 @@ class App extends React.Component<{}, AppState> {
                       { value: "hachure", text: "Hachure" },
                       { value: "cross-hatch", text: "Cross-hatch" }
                     ]}
-                    value={getSelectedAttribute(element => element.fillStyle)}
+                    value={getSelectedAttribute(
+                      elements,
+                      element => element.fillStyle
+                    )}
                     onChange={value => {
                       this.changeProperty(element => {
                         element.fillStyle = value;
@@ -1509,7 +404,7 @@ class App extends React.Component<{}, AppState> {
                 </>
               )}
 
-              {hasStroke() && (
+              {hasStroke(elements) && (
                 <>
                   <h5>Stroke Width</h5>
                   <ButtonSelect
@@ -1518,7 +413,10 @@ class App extends React.Component<{}, AppState> {
                       { value: 2, text: "Bold" },
                       { value: 4, text: "Extra Bold" }
                     ]}
-                    value={getSelectedAttribute(element => element.strokeWidth)}
+                    value={getSelectedAttribute(
+                      elements,
+                      element => element.strokeWidth
+                    )}
                     onChange={value => {
                       this.changeProperty(element => {
                         element.strokeWidth = value;
@@ -1533,7 +431,10 @@ class App extends React.Component<{}, AppState> {
                       { value: 1, text: "Artist" },
                       { value: 3, text: "Cartoonist" }
                     ]}
-                    value={getSelectedAttribute(element => element.roughness)}
+                    value={getSelectedAttribute(
+                      elements,
+                      element => element.roughness
+                    )}
                     onChange={value =>
                       this.changeProperty(element => {
                         element.roughness = value;
@@ -1550,7 +451,7 @@ class App extends React.Component<{}, AppState> {
                 max="100"
                 onChange={this.changeOpacity}
                 value={
-                  getSelectedAttribute(element => element.opacity) ||
+                  getSelectedAttribute(elements, element => element.opacity) ||
                   0 /* Put the opacity at 0 if there are two conflicting ones */
                 }
               />
@@ -1586,7 +487,7 @@ class App extends React.Component<{}, AppState> {
             <h5>Image</h5>
             <button
               onClick={() => {
-                exportAsPNG(this.state);
+                exportAsPNG(elements, canvas, this.state);
               }}
             >
               Export to png
@@ -1604,14 +505,14 @@ class App extends React.Component<{}, AppState> {
             <h5>Scene</h5>
             <button
               onClick={() => {
-                saveAsJSON(this.state.name);
+                saveAsJSON(elements, this.state.name);
               }}
             >
               Save as...
             </button>
             <button
               onClick={() => {
-                loadFromJSON().then(() => this.forceUpdate());
+                loadFromJSON(elements).then(() => this.forceUpdate());
               }}
             >
               Load file...
@@ -1675,6 +576,7 @@ class App extends React.Component<{}, AppState> {
               isOverHorizontalScrollBar,
               isOverVerticalScrollBar
             } = isOverScrollBars(
+              elements,
               e.clientX - CANVAS_WINDOW_OFFSET_LEFT,
               e.clientY - CANVAS_WINDOW_OFFSET_TOP,
               canvasWidth,
@@ -1722,7 +624,7 @@ class App extends React.Component<{}, AppState> {
                 document.documentElement.style.cursor = `${resizeHandle}-resize`;
                 isResizingElements = true;
               } else {
-                const hitElement = getElementAtPosition(x, y);
+                const hitElement = getElementAtPosition(elements, x, y);
 
                 // If we click on something
                 if (hitElement) {
@@ -1732,17 +634,17 @@ class App extends React.Component<{}, AppState> {
                   } else {
                     // We unselect every other elements unless shift is pressed
                     if (!e.shiftKey) {
-                      clearSelection();
+                      clearSelection(elements);
                     }
                     // 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();
+                  clearSelection(elements);
                 }
 
-                isDraggingElements = someElementIsSelected();
+                isDraggingElements = someElementIsSelected(elements);
 
                 if (isDraggingElements) {
                   document.documentElement.style.cursor = "move";
@@ -1855,7 +757,7 @@ class App extends React.Component<{}, AppState> {
                   lastX = x;
                   lastY = y;
                   // We don't want to save history when resizing an element
-                  skipHistory = true;
+                  history.skipRecording();
                   this.forceUpdate();
                   return;
                 }
@@ -1875,7 +777,7 @@ class App extends React.Component<{}, AppState> {
                   lastX = x;
                   lastY = y;
                   // We don't want to save history when dragging an element to initially size it
-                  skipHistory = true;
+                  history.skipRecording();
                   this.forceUpdate();
                   return;
                 }
@@ -1904,10 +806,10 @@ class App extends React.Component<{}, AppState> {
               generateDraw(draggingElement);
 
               if (this.state.elementType === "selection") {
-                setSelection(draggingElement);
+                setSelection(elements, draggingElement);
               }
               // We don't want to save history when moving an element
-              skipHistory = true;
+              history.skipRecording();
               this.forceUpdate();
             };
 
@@ -1922,7 +824,7 @@ class App extends React.Component<{}, AppState> {
 
               // if no element is clicked, clear the selection and redraw
               if (draggingElement === null) {
-                clearSelection();
+                clearSelection(elements);
                 this.forceUpdate();
                 return;
               }
@@ -1949,7 +851,7 @@ class App extends React.Component<{}, AppState> {
             window.addEventListener("mouseup", onMouseUp);
 
             // We don't want to save history on mouseDown, only on mouseUp when it's fully configured
-            skipHistory = true;
+            history.skipRecording();
             this.forceUpdate();
           }}
           onDoubleClick={e => {
@@ -1957,7 +859,7 @@ class App extends React.Component<{}, AppState> {
               e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
             const y = e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
 
-            if (getElementAtPosition(x, y)) {
+            if (getElementAtPosition(elements, x, y)) {
               return;
             }
 
@@ -2003,17 +905,17 @@ class App extends React.Component<{}, AppState> {
   };
 
   componentDidUpdate() {
-    renderScene(rc, canvas, {
+    renderScene(elements, rc, canvas, {
       scrollX: this.state.scrollX,
       scrollY: this.state.scrollY,
       viewBackgroundColor: this.state.viewBackgroundColor
     });
-    save(this.state);
-    if (!skipHistory) {
-      pushHistoryEntry(generateHistoryCurrentEntry());
-      redoStack.splice(0, redoStack.length);
+    saveToLocalStorage(elements, this.state);
+    if (history.isRecording()) {
+      history.pushEntry(history.generateCurrentEntry(elements));
+      history.clearRedoStack();
     }
-    skipHistory = false;
+    history.resumeRecording();
   }
 }
 
diff --git a/src/math.ts b/src/math.ts
index f699fea34..5b8f119fc 100644
--- a/src/math.ts
+++ b/src/math.ts
@@ -36,3 +36,19 @@ export function distanceBetweenPointAndSegment(
   const dy = y - yy;
   return Math.hypot(dx, dy);
 }
+
+export 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
+  ];
+}
diff --git a/src/scene/comparisons.ts b/src/scene/comparisons.ts
new file mode 100644
index 000000000..0acc4a332
--- /dev/null
+++ b/src/scene/comparisons.ts
@@ -0,0 +1,38 @@
+import { ExcalidrawElement } from "../element/types";
+import { hitTest } from "../element/collision";
+
+export const hasBackground = (elements: ExcalidrawElement[]) =>
+  elements.some(
+    element =>
+      element.isSelected &&
+      (element.type === "rectangle" ||
+        element.type === "ellipse" ||
+        element.type === "diamond")
+  );
+
+export const hasStroke = (elements: ExcalidrawElement[]) =>
+  elements.some(
+    element =>
+      element.isSelected &&
+      (element.type === "rectangle" ||
+        element.type === "ellipse" ||
+        element.type === "diamond" ||
+        element.type === "arrow")
+  );
+
+export function getElementAtPosition(
+  elements: ExcalidrawElement[],
+  x: number,
+  y: number
+) {
+  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;
+    }
+  }
+
+  return hitElement;
+}
diff --git a/src/scene/createScene.ts b/src/scene/createScene.ts
new file mode 100644
index 000000000..fb697ec0a
--- /dev/null
+++ b/src/scene/createScene.ts
@@ -0,0 +1,6 @@
+import { ExcalidrawElement } from "../element/types";
+
+export const createScene = () => {
+  const elements = Array.of<ExcalidrawElement>();
+  return { elements };
+};
diff --git a/src/scene/data.ts b/src/scene/data.ts
new file mode 100644
index 000000000..f9458f359
--- /dev/null
+++ b/src/scene/data.ts
@@ -0,0 +1,183 @@
+import rough from "roughjs/bin/wrappers/rough";
+
+import { ExcalidrawElement } from "../element/types";
+
+import {
+  getElementAbsoluteX1,
+  getElementAbsoluteX2,
+  getElementAbsoluteY1,
+  getElementAbsoluteY2,
+  generateDraw
+} from "../element";
+
+import { renderScene } from "./render";
+import { AppState } from "../types";
+
+const LOCAL_STORAGE_KEY = "excalidraw";
+const LOCAL_STORAGE_KEY_STATE = "excalidraw-state";
+
+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();
+}
+
+export function saveAsJSON(elements: ExcalidrawElement[], name: string) {
+  const serialized = JSON.stringify({
+    version: 1,
+    source: window.location.origin,
+    elements
+  });
+
+  saveFile(
+    `${name}.json`,
+    "data:text/plain;charset=utf-8," + encodeURIComponent(serialized)
+  );
+}
+
+export function loadFromJSON(elements: ExcalidrawElement[]) {
+  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(elements, data.elements, null);
+        resolve();
+      }
+    };
+  });
+}
+
+export function exportAsPNG(
+  elements: ExcalidrawElement[],
+  canvas: HTMLCanvasElement,
+  {
+    exportBackground,
+    exportPadding = 10,
+    viewBackgroundColor,
+    name
+  }: {
+    exportBackground: boolean;
+    exportPadding?: number;
+    viewBackgroundColor: string;
+    scrollX: number;
+    scrollY: number;
+    name: string;
+  }
+) {
+  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(
+    elements,
+    rough.canvas(tempCanvas),
+    tempCanvas,
+    {
+      viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
+      scrollX: 0,
+      scrollY: 0
+    },
+    {
+      offsetX: -subCanvasX1 + exportPadding,
+      offsetY: -subCanvasY1 + exportPadding,
+      renderScrollbars: false,
+      renderSelection: false
+    }
+  );
+
+  saveFile(`${name}.png`, tempCanvas.toDataURL("image/png"));
+
+  // clean up the DOM
+  if (tempCanvas !== canvas) tempCanvas.remove();
+}
+
+function restore(
+  elements: ExcalidrawElement[],
+  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) => {
+        element.fillStyle = element.fillStyle || "hachure";
+        element.strokeWidth = element.strokeWidth || 1;
+        element.roughness = element.roughness || 1;
+        element.opacity =
+          element.opacity === null || element.opacity === undefined
+            ? 100
+            : element.opacity;
+
+        generateDraw(element);
+      });
+    }
+
+    return savedState ? JSON.parse(savedState) : null;
+  } catch (e) {
+    elements.splice(0, elements.length);
+    return null;
+  }
+}
+
+export function restoreFromLocalStorage(elements: ExcalidrawElement[]) {
+  const savedElements = localStorage.getItem(LOCAL_STORAGE_KEY);
+  const savedState = localStorage.getItem(LOCAL_STORAGE_KEY_STATE);
+
+  return restore(elements, savedElements, savedState);
+}
+
+export function saveToLocalStorage(
+  elements: ExcalidrawElement[],
+  state: AppState
+) {
+  localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(elements));
+  localStorage.setItem(LOCAL_STORAGE_KEY_STATE, JSON.stringify(state));
+}
diff --git a/src/scene/index.ts b/src/scene/index.ts
new file mode 100644
index 000000000..8e96a4a3a
--- /dev/null
+++ b/src/scene/index.ts
@@ -0,0 +1,19 @@
+export { isOverScrollBars } from "./scrollbars";
+export { renderScene } from "./render";
+export {
+  clearSelection,
+  getSelectedIndices,
+  deleteSelectedElements,
+  someElementIsSelected,
+  setSelection,
+  getSelectedAttribute
+} from "./selection";
+export {
+  exportAsPNG,
+  loadFromJSON,
+  saveAsJSON,
+  restoreFromLocalStorage,
+  saveToLocalStorage
+} from "./data";
+export { hasBackground, hasStroke, getElementAtPosition } from "./comparisons";
+export { createScene } from "./createScene";
diff --git a/src/scene/render.ts b/src/scene/render.ts
new file mode 100644
index 000000000..d5459296d
--- /dev/null
+++ b/src/scene/render.ts
@@ -0,0 +1,109 @@
+import { RoughCanvas } from "roughjs/bin/canvas";
+
+import { ExcalidrawElement } from "../element/types";
+import {
+  getElementAbsoluteX1,
+  getElementAbsoluteX2,
+  getElementAbsoluteY1,
+  getElementAbsoluteY2,
+  handlerRectangles
+} from "../element";
+
+import { roundRect } from "./roundRect";
+import { SceneState } from "./types";
+import { getScrollBars, SCROLLBAR_COLOR, SCROLLBAR_WIDTH } from "./scrollbars";
+import { getSelectedIndices } from "./selection";
+
+export function renderScene(
+  elements: ExcalidrawElement[],
+  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(elements);
+
+  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" && 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(
+      elements,
+      context.canvas.width / window.devicePixelRatio,
+      context.canvas.height / window.devicePixelRatio,
+      sceneState.scrollX,
+      sceneState.scrollY
+    );
+
+    const strokeStyle = context.strokeStyle;
+    context.fillStyle = SCROLLBAR_COLOR;
+    context.strokeStyle = "rgba(255,255,255,0.8)";
+    [scrollBars.horizontal, scrollBars.vertical].forEach(scrollBar => {
+      if (scrollBar)
+        roundRect(
+          context,
+          scrollBar.x,
+          scrollBar.y,
+          scrollBar.width,
+          scrollBar.height,
+          SCROLLBAR_WIDTH / 2
+        );
+    });
+    context.strokeStyle = strokeStyle;
+    context.fillStyle = fillStyle;
+  }
+}
diff --git a/src/roundRect.ts b/src/scene/roundRect.ts
similarity index 100%
rename from src/roundRect.ts
rename to src/scene/roundRect.ts
diff --git a/src/scene/scrollbars.ts b/src/scene/scrollbars.ts
new file mode 100644
index 000000000..b7f767f27
--- /dev/null
+++ b/src/scene/scrollbars.ts
@@ -0,0 +1,115 @@
+import { ExcalidrawElement } from "../element/types";
+import {
+  getElementAbsoluteX1,
+  getElementAbsoluteX2,
+  getElementAbsoluteY1,
+  getElementAbsoluteY2
+} from "../element";
+
+const SCROLLBAR_MIN_SIZE = 15;
+const SCROLLBAR_MARGIN = 4;
+export const SCROLLBAR_WIDTH = 6;
+export const SCROLLBAR_COLOR = "rgba(0,0,0,0.3)";
+
+export function getScrollBars(
+  elements: ExcalidrawElement[],
+  canvasWidth: number,
+  canvasHeight: number,
+  scrollX: number,
+  scrollY: number
+) {
+  let minX = Infinity;
+  let maxX = 0;
+  let minY = Infinity;
+  let maxY = 0;
+
+  elements.forEach(element => {
+    minX = Math.min(minX, getElementAbsoluteX1(element));
+    maxX = Math.max(maxX, getElementAbsoluteX2(element));
+    minY = Math.min(minY, getElementAbsoluteY1(element));
+    maxY = Math.max(maxY, getElementAbsoluteY2(element));
+  });
+
+  minX += scrollX;
+  maxX += scrollX;
+  minY += scrollY;
+  maxY += scrollY;
+  const leftOverflow = Math.max(-minX, 0);
+  const rightOverflow = Math.max(-(canvasWidth - maxX), 0);
+  const topOverflow = Math.max(-minY, 0);
+  const bottomOverflow = Math.max(-(canvasHeight - maxY), 0);
+
+  // horizontal scrollbar
+  let horizontalScrollBar = null;
+  if (leftOverflow || rightOverflow) {
+    horizontalScrollBar = {
+      x: Math.min(
+        leftOverflow + SCROLLBAR_MARGIN,
+        canvasWidth - SCROLLBAR_MIN_SIZE - SCROLLBAR_MARGIN
+      ),
+      y: canvasHeight - SCROLLBAR_WIDTH - SCROLLBAR_MARGIN,
+      width: Math.max(
+        canvasWidth - rightOverflow - leftOverflow - SCROLLBAR_MARGIN * 2,
+        SCROLLBAR_MIN_SIZE
+      ),
+      height: SCROLLBAR_WIDTH
+    };
+  }
+
+  // vertical scrollbar
+  let verticalScrollBar = null;
+  if (topOverflow || bottomOverflow) {
+    verticalScrollBar = {
+      x: canvasWidth - SCROLLBAR_WIDTH - SCROLLBAR_MARGIN,
+      y: Math.min(
+        topOverflow + SCROLLBAR_MARGIN,
+        canvasHeight - SCROLLBAR_MIN_SIZE - SCROLLBAR_MARGIN
+      ),
+      width: SCROLLBAR_WIDTH,
+      height: Math.max(
+        canvasHeight - bottomOverflow - topOverflow - SCROLLBAR_WIDTH * 2,
+        SCROLLBAR_MIN_SIZE
+      )
+    };
+  }
+
+  return {
+    horizontal: horizontalScrollBar,
+    vertical: verticalScrollBar
+  };
+}
+
+export function isOverScrollBars(
+  elements: ExcalidrawElement[],
+  x: number,
+  y: number,
+  canvasWidth: number,
+  canvasHeight: number,
+  scrollX: number,
+  scrollY: number
+) {
+  const scrollBars = getScrollBars(
+    elements,
+    canvasWidth,
+    canvasHeight,
+    scrollX,
+    scrollY
+  );
+
+  const [isOverHorizontalScrollBar, isOverVerticalScrollBar] = [
+    scrollBars.horizontal,
+    scrollBars.vertical
+  ].map(
+    scrollBar =>
+      scrollBar &&
+      scrollBar.x <= x &&
+      x <= scrollBar.x + scrollBar.width &&
+      scrollBar.y <= y &&
+      y <= scrollBar.y + scrollBar.height
+  );
+
+  return {
+    isOverHorizontalScrollBar,
+    isOverVerticalScrollBar
+  };
+}
diff --git a/src/scene/selection.ts b/src/scene/selection.ts
new file mode 100644
index 000000000..256c6fd66
--- /dev/null
+++ b/src/scene/selection.ts
@@ -0,0 +1,70 @@
+import { ExcalidrawElement } from "../element/types";
+import {
+  getElementAbsoluteX1,
+  getElementAbsoluteX2,
+  getElementAbsoluteY1,
+  getElementAbsoluteY2
+} from "../element";
+
+export function setSelection(
+  elements: ExcalidrawElement[],
+  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;
+  });
+}
+
+export function clearSelection(elements: ExcalidrawElement[]) {
+  elements.forEach(element => {
+    element.isSelected = false;
+  });
+}
+
+export function deleteSelectedElements(elements: ExcalidrawElement[]) {
+  for (let i = elements.length - 1; i >= 0; --i) {
+    if (elements[i].isSelected) {
+      elements.splice(i, 1);
+    }
+  }
+}
+
+export function getSelectedIndices(elements: ExcalidrawElement[]) {
+  const selectedIndices: number[] = [];
+  elements.forEach((element, index) => {
+    if (element.isSelected) {
+      selectedIndices.push(index);
+    }
+  });
+  return selectedIndices;
+}
+
+export const someElementIsSelected = (elements: ExcalidrawElement[]) =>
+  elements.some(element => element.isSelected);
+
+export function getSelectedAttribute<T>(
+  elements: ExcalidrawElement[],
+  getAttribute: (element: ExcalidrawElement) => T
+): T | null {
+  const attributes = Array.from(
+    new Set(
+      elements
+        .filter(element => element.isSelected)
+        .map(element => getAttribute(element))
+    )
+  );
+  return attributes.length === 1 ? attributes[0] : null;
+}
diff --git a/src/scene/types.ts b/src/scene/types.ts
new file mode 100644
index 000000000..41a2f1b2a
--- /dev/null
+++ b/src/scene/types.ts
@@ -0,0 +1,12 @@
+import { ExcalidrawTextElement } from "../element/types";
+
+export type SceneState = {
+  scrollX: number;
+  scrollY: number;
+  // null indicates transparent bg
+  viewBackgroundColor: string | null;
+};
+
+export interface Scene {
+  elements: ExcalidrawTextElement[];
+}
diff --git a/src/shapes.tsx b/src/shapes.tsx
new file mode 100644
index 000000000..6fc164aa3
--- /dev/null
+++ b/src/shapes.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+
+// We inline font-awesome icons in order to save on js size rather than including the font awesome react library
+export 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: (
+      // custom
+      <svg viewBox="0 0 223.646 223.646">
+        <path d="M111.823 0L16.622 111.823 111.823 223.646 207.025 111.823z" />
+      </svg>
+    ),
+    value: "diamond"
+  },
+  {
+    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"
+  }
+];
+
+export const shapesShortcutKeys = SHAPES.map(shape => shape.value[0]);
+
+export function findShapeByKey(key: string) {
+  const defaultElement = "selection";
+  return SHAPES.reduce((element, shape) => {
+    if (shape.value[0] !== key) return element;
+
+    return shape.value;
+  }, defaultElement);
+}
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 000000000..2fa153a7b
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,14 @@
+import { ExcalidrawElement } from "./element/types";
+
+export type AppState = {
+  draggingElement: ExcalidrawElement | null;
+  resizingElement: ExcalidrawElement | null;
+  elementType: string;
+  exportBackground: boolean;
+  currentItemStrokeColor: string;
+  currentItemBackgroundColor: string;
+  viewBackgroundColor: string;
+  scrollX: number;
+  scrollY: number;
+  name: string;
+};
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 000000000..a62ecd070
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,25 @@
+export function getDateTime() {
+  const date = new Date();
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const hr = date.getHours();
+  const min = date.getMinutes();
+  const secs = date.getSeconds();
+
+  return `${year}${month}${day}${hr}${min}${secs}`;
+}
+
+export function capitalizeString(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+export function isInputLike(
+  target: Element | EventTarget | null
+): target is HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement {
+  return (
+    target instanceof HTMLInputElement ||
+    target instanceof HTMLTextAreaElement ||
+    target instanceof HTMLSelectElement
+  );
+}