Issue#114 Add load button

src/components/scenegraph/Toolbar.js

@@ -1,10 +1,11 @@
-import { Camera32Icon, Cross32Icon, Save24Icon } from '../../icons';
+import { Camera32Icon, Cross32Icon, Save24Icon, Load24Icon } from '../../icons';
 
 import { Button } from '../components';
 import { Component } from 'react';
 import Events from '../../lib/Events';
 import { SavingModal } from '../modals/SavingModal';
 import { saveBlob } from '../../lib/utils';
+import { inputStreetmix, fileJSON } from '../../lib/toolbar';
 
 // const LOCALSTORAGE_MOCAP_UI = "aframeinspectormocapuienabled";
 
@@ -43,7 +44,10 @@ export default class Toolbar extends Component {
   state = {
     // isPlaying: false,
     isSaveActionActive: false,
-    isCapturingScreen: false
+    isLoadActionActive: false,
+    isCapturingScreen: false,
+    showSaveBtn: true,
+    showLoadBtn: true
   };
 
   convertToObject = () => {
@@ -142,7 +146,15 @@ export default class Toolbar extends Component {
   toggleSaveActionState = () =>
     this.setState((prevState) => ({
       ...prevState,
-      isSaveActionActive: !this.state.isSaveActionActive
+      isSaveActionActive: !this.state.isSaveActionActive,
+      showLoadBtn: !this.state.showLoadBtn
+    }));
+
+  toggleLoadActionState = () =>
+    this.setState((prevState) => ({
+      ...prevState,
+      isLoadActionActive: !this.state.isLoadActionActive,
+      showSaveBtn: !this.state.showSaveBtn
     }));
 
   render() {
@@ -171,48 +183,100 @@ export default class Toolbar extends Component {
             onClick={this.toggleScenePlaying}
           /> */}
 
-          {!this.state.isSaveActionActive ? (
-            <Button onClick={this.toggleSaveActionState.bind(this)}>
-              <div
-                style={{
-                  display: 'flex',
-                  margin: '-2.5px 0px -2.5px -2px'
-                }}
-              >
-                <Save24Icon />
-              </div>
-              Save
-            </Button>
-          ) : (
-            <div className={'saveActions'}>
-              <Button onClick={this.exportSceneToGLTF}>glTF 3D Model</Button>
-              <Button onClick={this.convertToObject}>3DStreet JSON</Button>
-
-              <Button
-                className={'closeButton'}
-                onClick={this.toggleSaveActionState.bind(this)}
-              >
-                <div style={{ display: 'flex', margin: '-6.5px -10.5px' }}>
-                  <Cross32Icon />
+          {this.state.showSaveBtn && (
+            <div>
+              {!this.state.isSaveActionActive ? (
+                <Button onClick={this.toggleSaveActionState.bind(this)}>
+                  <div
+                    style={{
+                      display: 'flex',
+                      margin: '-2.5px 0px -2.5px -2px'
+                    }}
+                  >
+                    <Save24Icon />
+                  </div>
+                  Save
+                </Button>
+              ) : (
+                <div className={'saveActions'}>
+                  <Button onClick={this.exportSceneToGLTF}>
+                    glTF 3D Model
+                  </Button>
+                  <Button onClick={this.convertToObject}>3DStreet JSON</Button>
+
+                  <Button
+                    className={'closeButton'}
+                    onClick={this.toggleSaveActionState.bind(this)}
+                  >
+                    <div style={{ display: 'flex', margin: '-6.5px -10.5px' }}>
+                      <Cross32Icon />
+                    </div>
+                  </Button>
                 </div>
-              </Button>
+              )}
             </div>
           )}
-          {!this.state.isSaveActionActive && (
-            <Button
-              onClick={() =>
-                this.setState((prevState) => ({
-                  ...prevState,
-                  isCapturingScreen: true
-                }))
-              }
-              className={'cameraButton'}
-            >
-              <div style={{ display: 'flex', margin: '-6.5px -10.5px' }}>
-                <Camera32Icon />
-              </div>
-            </Button>
+
+          {this.state.showLoadBtn && (
+            <div>
+              {!this.state.isLoadActionActive ? (
+                <Button onClick={this.toggleLoadActionState.bind(this)}>
+                  <div
+                    style={{
+                      display: 'flex',
+                      margin: '-2.5px 0px -2.5px -2px'
+                    }}
+                  >
+                    <Load24Icon />
+                  </div>
+                  Load
+                </Button>
+              ) : (
+                <div className={'loadActions'}>
+                  <Button onClick={inputStreetmix}>Import Streetmix</Button>
+                  <Button>
+                    <label
+                      style={{
+                        display: 'inherit',
+                        alignItems: 'center',
+                        cursor: 'pointer'
+                      }}
+                    >
+                      <input
+                        type="file"
+                        onChange={fileJSON}
+                        style={{ display: 'none' }}
+                        accept=".js, .json, .txt"
+                      />
+                      3DStreet JSON
+                    </label>
+                  </Button>
+                  <Button
+                    className={'closeButton'}
+                    onClick={this.toggleLoadActionState.bind(this)}
+                  >
+                    <div style={{ display: 'flex', margin: '-6.5px -10.5px' }}>
+                      <Cross32Icon />
+                    </div>
+                  </Button>
+                </div>
+              )}
+            </div>
           )}
+
+          <Button
+            onClick={() =>
+              this.setState((prevState) => ({
+                ...prevState,
+                isCapturingScreen: true
+              }))
+            }
+            className={'cameraButton'}
+          >
+            <div style={{ display: 'flex', margin: '-6.5px -10.5px' }}>
+              <Camera32Icon />
+            </div>
+          </Button>
           {/* not is use */}
           {/* <button
             className={"viewButton"}

src/icons/icons.jsx

@@ -37,6 +37,24 @@ const Save24Icon = () => (
   </svg>
 );
 
+const Load24Icon = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4.5 15.9375V17.8125C4.5 18.3098 4.69754 18.7867 5.04917 19.1383C5.40081 19.49 5.87772 19.6875 6.375 19.6875H17.625C18.1223 19.6875 18.5992 19.49 18.9508 19.1383C19.3025 18.7867 19.5 18.3098 19.5 17.8125V15.9375M7.3125 8.4375L12 3.75M12 3.75L16.6875 8.4375M12 3.75V15"
+      stroke="white"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
 const Cross32Icon = () => (
   <svg
     width="32"
@@ -47,7 +65,7 @@ const Cross32Icon = () => (
   >
     <path
       d="M10.6667 10.6667L21.3333 21.3333M21.3333 10.6667L10.6667 21.3333"
-      stroke="white"
+      stroke="#DBDBDB"
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -98,4 +116,11 @@ const Compass32Icon = () => (
   </svg>
 );
 
-export { Camera32Icon, Save24Icon, Cross32Icon, Cross24Icon, Compass32Icon };
+export {
+  Camera32Icon,
+  Save24Icon,
+  Load24Icon,
+  Cross32Icon,
+  Cross24Icon,
+  Compass32Icon
+};

src/icons/index.js

@@ -1,6 +1,7 @@
 export {
   Camera32Icon,
   Save24Icon,
+  Load24Icon,
   Cross32Icon,
   Cross24Icon,
   Compass32Icon

src/lib/toolbar.js

@@ -0,0 +1,43 @@
+export function inputStreetmix() {
+  const streetmixURL = prompt(
+    'Please enter a Streetmix URL',
+    'https://streetmix.net/kfarr/3/example-street'
+  );
+  setTimeout(function () {
+    window.location.hash = streetmixURL;
+  });
+  const streetContainerEl = document.getElementById('street-container');
+  while (streetContainerEl.firstChild) {
+    streetContainerEl.removeChild(streetContainerEl.lastChild);
+  }
+  streetContainerEl.innerHTML =
+    '<a-entity street streetmix-loader="streetmixStreetURL: ' +
+    streetmixURL +
+    '""></a-entity>';
+}
+
+function getValidJSON(stringJSON) {
+  return stringJSON
+    .replace(/\'/g, '')
+    .replace(/\n/g, '')
+    .replace(/[\u0000-\u0019]+/g, '');
+}
+
+function createElementsFromJSON(streetJSONString) {
+  const validJSONString = getValidJSON(streetJSONString);
+  const streetContainerEl = document.getElementById('street-container');
+  while (streetContainerEl.firstChild) {
+    streetContainerEl.removeChild(streetContainerEl.lastChild);
+  }
+  const streetObject = JSON.parse(validJSONString);
+  createEntities(streetObject.data[0].children, streetContainerEl);
+}
+
+export function fileJSON(event) {
+  let reader = new FileReader();
+  console.log(event.target.files[0]);
+  reader.onload = function () {
+    createElementsFromJSON(reader.result);
+  };
+  reader.readAsText(event.target.files[0]);
+}

src/style/scenegraph.styl

@@ -16,14 +16,17 @@
     align-items center
     column-gap 12px
 
-    .saveActions 
+    .saveActions, .loadActions 
       display flex
       align-items center
       column-gap 12px
 
     .cameraButton, .closeButton 
       border-radius: 22px
 
+    .closeButton
+      background-color: $grayalt
+
     .fa
       display none