From bf4b7a11b3f03a3ccd1b108b233286bc4e78b59f Mon Sep 17 00:00:00 2001
From: nwebster1 <Nick_Webster@intuit.com>
Date: Sun, 17 Oct 2021 20:46:21 +0200
Subject: [PATCH 1/4] add import and export feature

---
 src/components/ExportCanvas/index.js  | 71 ++++++++++++++++++++++++---
 src/components/ExportCanvas/style.css | 11 +++++
 2 files changed, 74 insertions(+), 8 deletions(-)

diff --git a/src/components/ExportCanvas/index.js b/src/components/ExportCanvas/index.js
index 325b30b..55b0740 100644
--- a/src/components/ExportCanvas/index.js
+++ b/src/components/ExportCanvas/index.js
@@ -1,13 +1,18 @@
 import React from 'react';
 import Button from 'antd/es/button';
+import Dropdown from 'antd/es/dropdown';
+import Menu from 'antd/es/menu';
+import { MoreOutlined, ExportOutlined, ImportOutlined } from '@ant-design/icons';
 import 'antd/es/button/style/css';
+import 'antd/es/dropdown/style/css';
+import 'antd/es/menu/style/css';
 import htmlToImage from 'html-to-image';
 import { ContextMenu, Command, CanvasMenu } from 'gg-editor';
 
 import IconFont from '../IconFont';
 import './style.css';
 
-const ExportCanvas = () => {
+const ExportCanvas = () => {  
   function saveCanvas() {
     htmlToImage
       .toJpeg(document.getElementById('canvas_1'), { quality: 1 })
@@ -19,18 +24,68 @@ const ExportCanvas = () => {
       });
   }
 
+  function exportCanvas() {
+    const data = localStorage.getItem('data');    
+    const blob = new Blob([data], {type: 'application/json'})    
+    const link = document.createElement('a');
+    link.download = 'wireflow.json';
+    link.href = URL.createObjectURL(blob);
+    link.click();
+  }  
+
+  function importCanvas(event, b) {    
+    const r = new FileReader();
+    const file = event.target.files[0];    
+    r.onloadend = function(){      
+      const data = atob(r.result.replace('data:application/json;base64,', ''));
+      localStorage.setItem('data', data);      
+      window.location.reload();
+    }
+    r.readAsDataURL(file);
+  }
+
+  const menu = (
+    <Menu
+      className='export-menu'
+    >
+      <Menu.Item
+        onClick={saveCanvas}
+      >
+        Export Image
+        <IconFont type='icon-upload-demo' />       
+      </Menu.Item>
+      <Menu.Item>
+        <span className='import-input-container'>
+          <input type='file' onChange={(event) => importCanvas(event)} />
+          Import Configuration
+        </span>
+        <ImportOutlined />
+      </Menu.Item>
+      <Menu.Item
+        onClick={exportCanvas}
+      >
+        Export Configuration
+        <ExportOutlined />
+      </Menu.Item>
+    </Menu>
+  );
+
   return (
     <ContextMenu>
       <CanvasMenu>
         <Command name='autoZoom'>
           <div className='export'>
-            <Button
-              onClick={saveCanvas}
-              type='dashed'
-              size='large'
-              shape='circle'
-              icon={<IconFont type='icon-upload-demo' />}
-            />
+            <Dropdown
+              overlay={menu}
+            >
+              <Button                
+                type='dashed'
+                size='large'
+                shape='circle'                
+              >
+                <MoreOutlined />
+              </Button>  
+            </Dropdown>            
           </div>
         </Command>
       </CanvasMenu>
diff --git a/src/components/ExportCanvas/style.css b/src/components/ExportCanvas/style.css
index e4e2787..e956e00 100644
--- a/src/components/ExportCanvas/style.css
+++ b/src/components/ExportCanvas/style.css
@@ -4,6 +4,17 @@
   top: 20px;
   z-index: 999;
 }
+.export-menu li svg {
+  height: 17px;
+  width: 17px;
+  vertical-align: text-bottom;
+  margin-left: 7px;
+}
+.import-input-container input {
+  position: absolute;
+  text-indent: -9999px;
+  cursor: pointer;
+}
 #canvas_1 {
   background: #f0f2f5;
 }

From 1eec2b406b6a9a299832b54902015e6032340cca Mon Sep 17 00:00:00 2001
From: nwebster1 <Nick_Webster@intuit.com>
Date: Sun, 17 Oct 2021 21:01:40 +0200
Subject: [PATCH 2/4] add error handling to import

---
 src/components/ExportCanvas/index.js  | 29 ++++++++++++++++++++++-----
 src/components/ExportCanvas/style.css |  3 +++
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/ExportCanvas/index.js b/src/components/ExportCanvas/index.js
index 55b0740..bed3cd4 100644
--- a/src/components/ExportCanvas/index.js
+++ b/src/components/ExportCanvas/index.js
@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Button from 'antd/es/button';
 import Dropdown from 'antd/es/dropdown';
 import Menu from 'antd/es/menu';
+import Alert from 'antd/es/alert';
 import { MoreOutlined, ExportOutlined, ImportOutlined } from '@ant-design/icons';
 import 'antd/es/button/style/css';
 import 'antd/es/dropdown/style/css';
 import 'antd/es/menu/style/css';
+import 'antd/es/alert/style/css';
 import htmlToImage from 'html-to-image';
 import { ContextMenu, Command, CanvasMenu } from 'gg-editor';
 
@@ -13,6 +15,7 @@ import IconFont from '../IconFont';
 import './style.css';
 
 const ExportCanvas = () => {  
+  const [error, setError] = useState(null)
   function saveCanvas() {
     htmlToImage
       .toJpeg(document.getElementById('canvas_1'), { quality: 1 })
@@ -35,15 +38,23 @@ const ExportCanvas = () => {
 
   function importCanvas(event, b) {    
     const r = new FileReader();
-    const file = event.target.files[0];    
+    const file = event.target.files[0];   
     r.onloadend = function(){      
-      const data = atob(r.result.replace('data:application/json;base64,', ''));
-      localStorage.setItem('data', data);      
-      window.location.reload();
+      try {
+        const data = atob(r.result.replace('data:application/json;base64,', ''));
+        localStorage.setItem('data', data);      
+        window.location.reload();
+      } catch (error) {
+        setError(`Unable to import file. ${error}`)
+      }
     }
     r.readAsDataURL(file);
   }
 
+  function hideError() {
+    setError(null)
+  }
+
   const menu = (
     <Menu
       className='export-menu'
@@ -87,6 +98,14 @@ const ExportCanvas = () => {
               </Button>  
             </Dropdown>            
           </div>
+          {error && <Alert
+            message="Error"
+            description={error}
+            type="error"
+            showIcon
+            closable
+            onClose={hideError}
+          />}
         </Command>
       </CanvasMenu>
     </ContextMenu>
diff --git a/src/components/ExportCanvas/style.css b/src/components/ExportCanvas/style.css
index e956e00..f11d978 100644
--- a/src/components/ExportCanvas/style.css
+++ b/src/components/ExportCanvas/style.css
@@ -15,6 +15,9 @@
   text-indent: -9999px;
   cursor: pointer;
 }
+.ant-alert {
+  z-index: 999;
+}
 #canvas_1 {
   background: #f0f2f5;
 }

From 16c74408a7433af7a722d9552508254319c4fbdf Mon Sep 17 00:00:00 2001
From: nwebster1 <Nick_Webster@intuit.com>
Date: Mon, 18 Oct 2021 11:58:20 +0200
Subject: [PATCH 3/4] syntax fixes

---
 src/components/ExportCanvas/index.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ExportCanvas/index.js b/src/components/ExportCanvas/index.js
index bed3cd4..da3586c 100644
--- a/src/components/ExportCanvas/index.js
+++ b/src/components/ExportCanvas/index.js
@@ -15,7 +15,7 @@ import IconFont from '../IconFont';
 import './style.css';
 
 const ExportCanvas = () => {  
-  const [error, setError] = useState(null)
+  const [error, setError] = useState(null);
   function saveCanvas() {
     htmlToImage
       .toJpeg(document.getElementById('canvas_1'), { quality: 1 })
@@ -29,14 +29,14 @@ const ExportCanvas = () => {
 
   function exportCanvas() {
     const data = localStorage.getItem('data');    
-    const blob = new Blob([data], {type: 'application/json'})    
+    const blob = new Blob([data], {type: 'application/json'});
     const link = document.createElement('a');
     link.download = 'wireflow.json';
     link.href = URL.createObjectURL(blob);
     link.click();
   }  
 
-  function importCanvas(event, b) {    
+  function importCanvas(event) {    
     const r = new FileReader();
     const file = event.target.files[0];   
     r.onloadend = function(){      
@@ -47,12 +47,12 @@ const ExportCanvas = () => {
       } catch (error) {
         setError(`Unable to import file. ${error}`)
       }
-    }
+    };
     r.readAsDataURL(file);
   }
 
   function hideError() {
-    setError(null)
+    setError(null);
   }
 
   const menu = (

From ccc7420546dc71608b7093f0749dbf5f5daa503f Mon Sep 17 00:00:00 2001
From: nwebster1 <Nick_Webster@intuit.com>
Date: Mon, 18 Oct 2021 17:51:21 +0200
Subject: [PATCH 4/4] syntax fixes

---
 src/components/ExportCanvas/index.js  | 2 +-
 src/components/ExportCanvas/style.css | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/ExportCanvas/index.js b/src/components/ExportCanvas/index.js
index da3586c..7de2bba 100644
--- a/src/components/ExportCanvas/index.js
+++ b/src/components/ExportCanvas/index.js
@@ -45,7 +45,7 @@ const ExportCanvas = () => {
         localStorage.setItem('data', data);      
         window.location.reload();
       } catch (error) {
-        setError(`Unable to import file. ${error}`)
+        setError(`Unable to import file. ${error}`);
       }
     };
     r.readAsDataURL(file);
diff --git a/src/components/ExportCanvas/style.css b/src/components/ExportCanvas/style.css
index f11d978..cb6882d 100644
--- a/src/components/ExportCanvas/style.css
+++ b/src/components/ExportCanvas/style.css
@@ -4,17 +4,20 @@
   top: 20px;
   z-index: 999;
 }
+
 .export-menu li svg {
   height: 17px;
   width: 17px;
   vertical-align: text-bottom;
   margin-left: 7px;
 }
+
 .import-input-container input {
   position: absolute;
   text-indent: -9999px;
   cursor: pointer;
 }
+
 .ant-alert {
   z-index: 999;
 }