From d45f48e60ffa2d38c33796d78a1f64cfe2a1e710 Mon Sep 17 00:00:00 2001
From: Christopher Chedeau <vjeuxx@gmail.com>
Date: Sat, 11 Jan 2020 20:34:21 -0800
Subject: [PATCH] Set shape background to be transparent by default (#330)

Also makes "Clear canvas" reset the entire app state
---
 src/actions/actionCanvas.tsx |  8 ++------
 src/appState.ts              | 22 ++++++++++++++++++++++
 src/index.tsx                | 20 +++-----------------
 3 files changed, 27 insertions(+), 23 deletions(-)
 create mode 100644 src/appState.ts

diff --git a/src/actions/actionCanvas.tsx b/src/actions/actionCanvas.tsx
index a95d5075..6ed15b71 100644
--- a/src/actions/actionCanvas.tsx
+++ b/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,
-        viewBackgroundColor: "#ffffff",
-        scrollX: 0,
-        scrollY: 0
-      }
+      appState: getDefaultAppState()
     };
   },
   PanelComponent: ({ updateData }) => (
diff --git a/src/appState.ts b/src/appState.ts
new file mode 100644
index 00000000..c7fb8a62
--- /dev/null
+++ b/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
+  };
+}
diff --git a/src/index.tsx b/src/index.tsx
index 5f9a82f0..20c2610b 100644
--- a/src/index.tsx
+++ b/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 = {
-    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
-  };
+  public state: AppState = getDefaultAppState();
 
   private onResize = () => {
     this.forceUpdate();