Set shape background to be transparent by default (#330)

Also makes "Clear canvas" reset the entire app state

src/actions/actionCanvas.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Action } from "./types";
 import { ColorPicker } from "../components/ColorPicker";
+import { getDefaultAppState } from "../appState";
 
 export const actionChangeViewBackgroundColor: Action = {
   name: "changeViewBackgroundColor",
@@ -24,12 +25,7 @@ export const actionClearCanvas: Action = {
   perform: (elements, appState, value) => {
     return {
       elements: [],
-      appState: {
+      appState: getDefaultAppState()
-        ...appState,
-        viewBackgroundColor: "#ffffff",
-        scrollX: 0,
-        scrollY: 0
-      }
     };
   },
   PanelComponent: ({ updateData }) => (

src/appState.ts

@@ -0,0 +1,22 @@
+import { AppState } from "./types";
+import { getDateTime } from "./utils";
+
+const DEFAULT_PROJECT_NAME = `excalidraw-${getDateTime()}`;
+
+export function getDefaultAppState(): AppState {
+  return {
+    draggingElement: null,
+    resizingElement: null,
+    elementType: "selection",
+    exportBackground: true,
+    currentItemStrokeColor: "#000000",
+    currentItemBackgroundColor: "transparent",
+    currentItemFont: "20px Virgil",
+    viewBackgroundColor: "#ffffff",
+    scrollX: 0,
+    scrollY: 0,
+    cursorX: 0,
+    cursorY: 0,
+    name: DEFAULT_PROJECT_NAME
+  };
+}

src/index.tsx

@@ -28,7 +28,7 @@ import { renderScene } from "./renderer";
 import { AppState } from "./types";
 import { ExcalidrawElement, ExcalidrawTextElement } from "./element/types";
 
-import { getDateTime, isInputLike, measureText, debounce } from "./utils";
+import { isInputLike, measureText, debounce } from "./utils";
 import { KEYS, META_KEY, isArrowKey } from "./keys";
 
 import { findShapeByKey, shapesShortcutKeys } from "./shapes";
@@ -65,10 +65,10 @@ import {
 } from "./actions";
 import { SidePanel } from "./components/SidePanel";
 import { ActionResult } from "./actions/types";
+import { getDefaultAppState } from "./appState";
 
 let { elements } = createScene();
 const { history } = createHistory();
-const DEFAULT_PROJECT_NAME = `excalidraw-${getDateTime()}`;
 
 const CANVAS_WINDOW_OFFSET_LEFT = 250;
 const CANVAS_WINDOW_OFFSET_TOP = 0;
@@ -192,21 +192,7 @@ export class App extends React.Component<{}, AppState> {
     window.removeEventListener("resize", this.onResize, false);
   }
 
-  public state: AppState = {
+  public state: AppState = getDefaultAppState();
-    draggingElement: null,
-    resizingElement: null,
-    elementType: "selection",
-    exportBackground: true,
-    currentItemStrokeColor: "#000000",
-    currentItemBackgroundColor: "#ffffff",
-    currentItemFont: "20px Virgil",
-    viewBackgroundColor: "#ffffff",
-    scrollX: 0,
-    scrollY: 0,
-    cursorX: 0,
-    cursorY: 0,
-    name: DEFAULT_PROJECT_NAME
-  };
 
   private onResize = () => {
     this.forceUpdate();