From 0494bebec7a9ce3017a1b950cf212584e641e09a Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Fri, 5 Aug 2022 17:37:51 +0200
Subject: [PATCH 1/3] Implement floating button

---
 .../FloatingButton/FloatingButton.tsx         | 30 ++++++++++++++++++-
 src/Editor.tsx                                | 18 ++++++-----
 src/index.scss                                |  5 +++-
 3 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/src/Components/FloatingButton/FloatingButton.tsx b/src/Components/FloatingButton/FloatingButton.tsx
index fb5fc1c..a1d9c4b 100644
--- a/src/Components/FloatingButton/FloatingButton.tsx
+++ b/src/Components/FloatingButton/FloatingButton.tsx
@@ -1,10 +1,38 @@
 import * as React from 'react';
+import { MenuIcon, XIcon } from '@heroicons/react/outline';
 
 interface IFloatingButtonProps {
+  children: React.ReactNode[] | React.ReactNode
+  className: string
 }
 
+const toggleState = (
+  isHidden: boolean,
+  setHidden: React.Dispatch<React.SetStateAction<boolean>>
+) => {
+  setHidden(!isHidden);
+};
+
 const FloatingButton: React.FC<IFloatingButtonProps> = (props: IFloatingButtonProps) => {
-  return <></>;
+  const [isHidden, setHidden] = React.useState(true);
+  const buttonListClasses = isHidden ? 'opacity-0' : 'opacity-100';
+  const icon = isHidden
+    ? <MenuIcon className="floating-btn" />
+    : <XIcon className="floating-btn" />;
+
+  return (
+    <div className={props.className}>
+      <div className={`transition-all ${buttonListClasses}`}>
+        { props.children }
+      </div>
+      <button
+        className={'transition-all w-14 h-14 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
+        title='Open menu'
+        onClick={() => toggleState(isHidden, setHidden)}
+      >
+        { icon }
+      </button>
+    </div>);
 };
 
 export default FloatingButton;
diff --git a/src/Editor.tsx b/src/Editor.tsx
index 482b91a..90b8e2b 100644
--- a/src/Editor.tsx
+++ b/src/Editor.tsx
@@ -9,6 +9,7 @@ import { History } from './Components/History/History';
 import { ContainerModel, findContainerById, IContainerModel, MakeIterator } from './Interfaces/ContainerModel';
 import Properties from './Interfaces/Properties';
 import { IHistoryState } from './App';
+import FloatingButton from './Components/FloatingButton/FloatingButton';
 
 interface IEditorProps {
   configuration: Configuration,
@@ -334,13 +335,16 @@ class Editor extends React.Component<IEditorProps> {
         >
           { current.MainContainer }
         </SVG>
-        <button
-          className={`fixed transition-all ${buttonRightOffsetClasses} bottom-40 w-14 h-14 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800`}
-          title='Export as JSON'
-          onClick={() => this.SaveEditor()}
-        >
-          <UploadIcon className="h-full w-full text-white align-middle items-center justify-center" />
-        </button>
+        <FloatingButton className={`fixed flex flex-col gap-2 items-center bottom-40 ${buttonRightOffsetClasses}`}>
+          <button
+            className={'transition-all w-10 h-10 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
+            title='Export as JSON'
+            onClick={() => this.SaveEditor()}
+          >
+            <UploadIcon className="h-full w-full text-white align-middle items-center justify-center" />
+          </button>
+        </FloatingButton>
+
       </div>
     );
   }
diff --git a/src/index.scss b/src/index.scss
index c7e0d50..ad410c8 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -10,9 +10,12 @@
     @apply pl-6 pr-6 pt-2 pb-2 w-full
   }
   .close-button {
-    @apply transition-all w-full h-auto p-4 flex 
+    @apply transition-all w-full h-auto p-4 flex
   }
   .mainmenu-btn {
     @apply transition-all bg-blue-100 hover:bg-blue-200 text-blue-700 text-lg font-semibold p-8  rounded-lg
   }
+  .floating-btn {
+    @apply h-full w-full text-white align-middle items-center justify-center
+  }
 }
\ No newline at end of file
-- 
2.47.2


From 2dcdf769f1dec18da1f3e2d2a1c14777ca874cfe Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Fri, 5 Aug 2022 17:50:14 +0200
Subject: [PATCH 2/3] Remove useless ref

---
 src/Components/SVG/SVG.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/Components/SVG/SVG.tsx b/src/Components/SVG/SVG.tsx
index c11e39b..13d6854 100644
--- a/src/Components/SVG/SVG.tsx
+++ b/src/Components/SVG/SVG.tsx
@@ -18,7 +18,6 @@ interface ISVGState {
 
 export class SVG extends React.PureComponent<ISVGProps> {
   public state: ISVGState;
-  public svg: React.RefObject<SVGSVGElement>;
 
   constructor(props: ISVGProps) {
     super(props);
@@ -29,7 +28,6 @@ export class SVG extends React.PureComponent<ISVGProps> {
       } as Value,
       tool: TOOL_PAN
     };
-    this.svg = React.createRef<SVGSVGElement>();
   }
 
   render() {
@@ -63,7 +61,7 @@ export class SVG extends React.PureComponent<ISVGProps> {
           height: 120
         }}
       >
-        <svg ref={this.svg} {...properties}>
+        <svg {...properties}>
           { children }
           <Selector selected={this.props.selected} />
         </svg>
-- 
2.47.2


From aa29cd37ff76e3739b9d80618899cb062c388499 Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Fri, 5 Aug 2022 18:12:00 +0200
Subject: [PATCH 3/3] Implement export as SVG + improve style

---
 .../FloatingButton/FloatingButton.tsx         |  4 +-
 src/Components/SVG/SVG.tsx                    | 42 ++++++++++---------
 src/Editor.tsx                                | 27 ++++++++++--
 3 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/src/Components/FloatingButton/FloatingButton.tsx b/src/Components/FloatingButton/FloatingButton.tsx
index a1d9c4b..544c2bd 100644
--- a/src/Components/FloatingButton/FloatingButton.tsx
+++ b/src/Components/FloatingButton/FloatingButton.tsx
@@ -15,14 +15,14 @@ const toggleState = (
 
 const FloatingButton: React.FC<IFloatingButtonProps> = (props: IFloatingButtonProps) => {
   const [isHidden, setHidden] = React.useState(true);
-  const buttonListClasses = isHidden ? 'opacity-0' : 'opacity-100';
+  const buttonListClasses = isHidden ? 'invisible opacity-0' : 'visible opacity-100';
   const icon = isHidden
     ? <MenuIcon className="floating-btn" />
     : <XIcon className="floating-btn" />;
 
   return (
     <div className={props.className}>
-      <div className={`transition-all ${buttonListClasses}`}>
+      <div className={`transition-all flex flex-col gap-2 items-center ${buttonListClasses}`}>
         { props.children }
       </div>
       <button
diff --git a/src/Components/SVG/SVG.tsx b/src/Components/SVG/SVG.tsx
index 13d6854..bf8704b 100644
--- a/src/Components/SVG/SVG.tsx
+++ b/src/Components/SVG/SVG.tsx
@@ -18,6 +18,7 @@ interface ISVGState {
 
 export class SVG extends React.PureComponent<ISVGProps> {
   public state: ISVGState;
+  public static ID = 'svg';
 
   constructor(props: ISVGProps) {
     super(props);
@@ -47,25 +48,28 @@ export class SVG extends React.PureComponent<ISVGProps> {
     }
 
     return (
-      <ReactSVGPanZoom
-        width={window.innerWidth}
-        height={window.innerHeight}
-        background={'#ffffff'}
-        defaultTool='pan'
-        value={this.state.value} onChangeValue={value => this.setState({ value })}
-        tool={this.state.tool} onChangeTool={tool => this.setState({ tool })}
-        miniatureProps={{
-          position: 'left',
-          background: '#616264',
-          width: window.innerWidth - 12,
-          height: 120
-        }}
-      >
-        <svg {...properties}>
-          { children }
-          <Selector selected={this.props.selected} />
-        </svg>
-      </ReactSVGPanZoom>
+      <div id={SVG.ID}>
+        <ReactSVGPanZoom
+          width={window.innerWidth}
+          height={window.innerHeight}
+          background={'#ffffff'}
+          defaultTool='pan'
+          value={this.state.value} onChangeValue={value => this.setState({ value })}
+          tool={this.state.tool} onChangeTool={tool => this.setState({ tool })}
+          miniatureProps={{
+            position: 'left',
+            background: '#616264',
+            width: window.innerWidth - 12,
+            height: 120
+          }}
+        >
+          <svg {...properties}>
+            { children }
+            <Selector selected={this.props.selected} />
+          </svg>
+        </ReactSVGPanZoom>
+      </div>
+
     );
   };
 }
diff --git a/src/Editor.tsx b/src/Editor.tsx
index 90b8e2b..89c38aa 100644
--- a/src/Editor.tsx
+++ b/src/Editor.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { UploadIcon } from '@heroicons/react/outline';
+import { UploadIcon, PhotographIcon } from '@heroicons/react/outline';
 import './Editor.scss';
 import Sidebar from './Components/Sidebar/Sidebar';
 import { ElementsSidebar } from './Components/ElementsSidebar/ElementsSidebar';
@@ -258,7 +258,7 @@ class Editor extends React.Component<IEditorProps> {
     } as IEditorState);
   }
 
-  public SaveEditor() {
+  public SaveEditorAsJSON() {
     const exportName = 'state';
     const spaces = import.meta.env.DEV ? 4 : 0;
     const data = JSON.stringify(this.state, getCircularReplacer(), spaces);
@@ -271,6 +271,20 @@ class Editor extends React.Component<IEditorProps> {
     downloadAnchorNode.remove();
   }
 
+  public SaveEditorAsSVG() {
+    const svgWrapper = document.getElementById(SVG.ID) as HTMLElement;
+    const svg = svgWrapper.querySelector('svg') as SVGSVGElement;
+    const preface = '<?xml version="1.0" standalone="no"?>\r\n';
+    const svgBlob = new Blob([preface, svg.outerHTML], { type: 'image/svg+xml;charset=utf-8' });
+    const svgUrl = URL.createObjectURL(svgBlob);
+    const downloadLink = document.createElement('a');
+    downloadLink.href = svgUrl;
+    downloadLink.download = 'newesttree.svg';
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+    document.body.removeChild(downloadLink);
+  }
+
   /**
    * Render the application
    * @returns {JSX.Element} Rendered JSX element
@@ -339,10 +353,17 @@ class Editor extends React.Component<IEditorProps> {
           <button
             className={'transition-all w-10 h-10 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
             title='Export as JSON'
-            onClick={() => this.SaveEditor()}
+            onClick={() => this.SaveEditorAsJSON()}
           >
             <UploadIcon className="h-full w-full text-white align-middle items-center justify-center" />
           </button>
+          <button
+            className={'transition-all w-10 h-10 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
+            title='Export as SVG'
+            onClick={() => this.SaveEditorAsSVG()}
+          >
+            <PhotographIcon className="h-full w-full text-white align-middle items-center justify-center" />
+          </button>
         </FloatingButton>
 
       </div>
-- 
2.47.2