From 230957b1bf4f5024b6773a89ca7ff32e489d159d Mon Sep 17 00:00:00 2001
From: Matei Adriel <rafaeladriel11@gmail.com>
Date: Mon, 3 Jun 2019 08:03:35 +0000
Subject: [PATCH] =?UTF-8?q?=20=F0=9F=8C=8B=20=20fixed=20saving=20and=20loa?=
 =?UTF-8?q?ding=20saves=20from=20the=20ui,=20fixed=20the=20scale=20bug=20a?=
 =?UTF-8?q?nd=20the=20switchTo=20not=20beeing=20triggered=20=F0=9F=9A=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.html                                |  2 +-
 src/scss/base.scss                            |  8 ++---
 .../componentManager/componentManager.ts      | 35 +++++++++++++------
 src/ts/common/store/persistent.ts             | 21 +++++++++++
 src/ts/main.ts                                | 28 +++++++--------
 5 files changed, 62 insertions(+), 32 deletions(-)
 create mode 100644 src/ts/common/store/persistent.ts

diff --git a/src/index.html b/src/index.html
index d91ad1f..3dd054e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8,7 +8,7 @@
     <link rel='stylesheet' href='style.css'>
 </head>
 
-<body>
+<body ondragstart="return false;" ondrop="return false;">
     hello world
 </body>
 
diff --git a/src/scss/base.scss b/src/scss/base.scss
index 235e6e9..07789d8 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -1,7 +1,7 @@
 @import "./toastr.scss";
 @import "./modal.scss";
 
-$mdc-theme-primary: black;
+$mdc-theme-primary: orange / 2;
 $mdc-theme-secondary: #feeae6;
 $mdc-theme-on-primary: white;
 $mdc-theme-surface: black;
@@ -29,9 +29,9 @@ svg {
     display: block;
 }
 
-.modal__btn-primary{
-    background: orange !important;
-}
+// .modal__btn-primary{
+    // background: orange  !important;
+// }
 
 .createBar {
     z-index:10;
diff --git a/src/ts/common/componentManager/componentManager.ts b/src/ts/common/componentManager/componentManager.ts
index cdbd552..deb13fe 100644
--- a/src/ts/common/componentManager/componentManager.ts
+++ b/src/ts/common/componentManager/componentManager.ts
@@ -16,6 +16,7 @@ import { Settings } from "../store/settings";
 import { download } from "./download";
 import { modal } from "../modals";
 import { map } from "rxjs/operators";
+import { persistent } from "../store/persistent";
 
 
 @Singleton
@@ -48,7 +49,8 @@ export class ComponentManager {
     private upEvent = new KeyboardInput("up")
     private downEvent = new KeyboardInput("down")
 
-    public name = "current"
+    @persistent<ComponentManager, string>("current", "main'")
+    public name: string
     public alertOptions = alertOptions
 
     private commandHistory: string[] = []
@@ -140,9 +142,7 @@ export class ComponentManager {
             else {
                 if (this.ctrlEvent.value) {
                     if (this.createEvent.value) {
-                        this.preInput()
-                        this.inputMode = "create"
-                        this.placeholder.next("Create simulation")
+                        this.prepareNewSimulation()
                     }
                     else if (this.shiftEvent.value && this.palleteEvent.value) {
                         this.preInput()
@@ -164,10 +164,16 @@ export class ComponentManager {
 
         this.wireManager.update.subscribe(val => this.update())
         this.saves.next(this.store.ls())
-        //if (this.saves.value.length === 0)
-        //    this.save()
+        if (this.saves.value.length === 0)
+            this.save()
+
     }
 
+    public prepareNewSimulation() {
+        this.preInput()
+        this.inputMode = "create"
+        this.placeholder.next("Create simulation")
+    }
     preInput() {
         const elem = <HTMLInputElement>document.getElementById("nameInput")
         elem.value = ""
@@ -199,6 +205,7 @@ All you work will be lost!`
     }
 
     public createEmptySimulation(name: string) {
+        console.log(name)
         const create = () => {
             this.store.set(name, {
                 wires: [],
@@ -209,6 +216,7 @@ All you work will be lost!`
 
             if (name !== this.name)
                 this.save()
+            this.name = name
             this.refresh()
         }
 
@@ -222,12 +230,14 @@ All you work will be lost!`
     }
 
     public switchTo(name: string) {
+        console.log(`switching to ${name}`)
+
         const data = this.store.get(name)
         if (!data)
-            error(`An error occured when trying to load ${name}`,"",this.alertOptions)
+            error(`An error occured when trying to load ${name}`, "", this.alertOptions)
 
-        else
-            this.loadState(data)
+        this.name = name
+        this.refresh()
     }
 
     eval(command: string) {
@@ -259,6 +269,8 @@ All you work will be lost!`
     }
 
     refresh() {
+        console.log(this.name)
+
         if (this.store.get(this.name)) {
             this.loadState(this.store.get(this.name))
         }
@@ -401,6 +413,7 @@ All you work will be lost!`
 
         this.screen.scale = state.scale
         this.screen.position = state.position
+        this.screen.update()
 
         this.update()
     }
@@ -410,8 +423,8 @@ All you work will be lost!`
             const element = this.commandHistory[i];
             this.commandHistoryStore.set(i.toString(), element)
         }
-        this.store.set(name || this.name, this.state)
+        this.store.set(this.name, this.state)
         this.saves.next(this.store.ls())
-        success("Saved the simulation succesfully!", "", this.alertOptions)
+        success(`Saved the simulation ${this.name} succesfully!`, "", this.alertOptions)
     }
 }
\ No newline at end of file
diff --git a/src/ts/common/store/persistent.ts b/src/ts/common/store/persistent.ts
new file mode 100644
index 0000000..6615b3e
--- /dev/null
+++ b/src/ts/common/store/persistent.ts
@@ -0,0 +1,21 @@
+import { Store } from "./store";
+
+export const persistent = <T,K>(_default:K,storeKey = "main") => (target:T, key: keyof T & string) => {
+    let secret: K
+    const store = new Store<K>(key)
+    if (store.get(storeKey))
+        secret = store.get(storeKey)
+    else
+        secret = _default
+
+    Object.defineProperty(target,key,{
+        get() {
+            return secret
+        },
+        set(value:K) {
+            secret = value
+            store.set(storeKey, secret)
+        },
+        enumerable: true
+    })
+}
\ No newline at end of file
diff --git a/src/ts/main.ts b/src/ts/main.ts
index 94618a9..5832672 100644
--- a/src/ts/main.ts
+++ b/src/ts/main.ts
@@ -10,10 +10,11 @@ import { MDCMenu } from '@material/menu';
 const screen = new Screen()
 
 const manager = new ComponentManager()
-manager.components.push(new Component("and", [200, 100], [100, 100]))
-manager.components.push(new Component("not", [200, 500], [100, 100]))
-manager.components.push(new Component("true", [200, 500], [100, 100]))
-manager.components.push(new Component("false", [200, 500], [100, 100]))
+// manager.components.push(new Component("and", [200, 100], [100, 100]))
+// manager.components.push(new Component("not", [200, 500], [100, 100]))
+// manager.components.push(new Component("true", [200, 500], [100, 100]))
+// manager.components.push(new Component("false", [200, 500], [100, 100]))
+manager.save()
 manager.update()
 
 const handleEvent = <T>(e: T, func: (e: T) => any) => {
@@ -62,32 +63,27 @@ render(html`
     <aside class="mdc-drawer main-sidebar">
     <div class="mdc-drawer__content">
         <nav class="mdc-list">
-        <a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
-            <span class="mdc-list-item__text">Something</span>
+        <a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page" @click=${() => manager.prepareNewSimulation()}>
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">add</i>
+            <span class="mdc-list-item__text">Create new simulation</span>
         </a>
         <a class="mdc-list-item" href="#" id="openSimulation" @click=${() => {
         menu.open = true
-        // menu.setAbsolutePosition(screen.mousePosition[0], screen.mousePosition[1])
     }}>
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">folder_open</i>
             <span class="mdc-list-item__text">Open simulation</span>
         </a>
-        <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
-            <span class="mdc-list-item__text">another thing</span>
-        </a>
         </nav>
     </div>
     </aside>
 
     <div class="mdc-menu mdc-menu-surface mdc-theme--primary-bg mdc-theme--on-primary">
         <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
-            ${subscribe(manager.saves.pipe(map(val => html`
-                <li class= "mdc-list-item" role = "menuitem" >
+            ${subscribe(manager.saves.pipe(map(_ => _.map(val => html`
+                <li class= "mdc-list-item" role = "menuitem" @click=${() => manager.switchTo(val)}>
                     <span class="mdc-list-item__text"> ${val} </span>
                 </li>`
-            )))}
+            ))))}
         </ul>
     </div>
 `, document.body)