From c623312380cade646d9094852d62e613b559e1c8 Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Sat, 4 Jan 2020 15:20:53 +0100
Subject: [PATCH] add support for clearing canvas (#108)

---
 src/index.tsx  | 21 +++++++++++++++++++++
 src/styles.css |  4 ++++
 2 files changed, 25 insertions(+)

diff --git a/src/index.tsx b/src/index.tsx
index c5ded250..85483ba5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -773,6 +773,18 @@ class App extends React.Component<{}, AppState> {
     this.forceUpdate();
   };
 
+  private clearCanvas = () => {
+    if (window.confirm("This will clear the whole canvas. Are you sure?")) {
+      elements = [];
+      this.setState({
+        viewBackgroundColor: "#ffffff",
+        scrollX: 0,
+        scrollY: 0
+      });
+      this.forceUpdate();
+    }
+  };
+
   private moveAllLeft = () => {
     moveAllLeft(elements, getSelectedIndices());
     this.forceUpdate();
@@ -890,6 +902,15 @@ class App extends React.Component<{}, AppState> {
               Shape Background
             </label>
           </div>
+          <h4>Canvas</h4>
+          <div className="panelColumn">
+            <button
+              onClick={this.clearCanvas}
+              title="Clear the canvas & reset background color"
+            >
+              Clear canvas
+            </button>
+          </div>
           <h4>Export</h4>
           <div className="panelColumn">
             <button
diff --git a/src/styles.css b/src/styles.css
index b10aa8a3..e88e4151 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -78,3 +78,7 @@ button {
 
   padding: 5px;
 }
+
+button:disabled {
+  cursor: not-allowed;
+}