From ff298e8300b874184242c3f454e2a37498315252 Mon Sep 17 00:00:00 2001
From: Stewart Allen <sa@grid.space>
Date: Sat, 9 Oct 2021 01:13:41 -0400
Subject: [PATCH] add select tool

---
 src/kiri/init.js    |  8 +++++++-
 src/kiri/main.js    | 24 ++++++++++++++++++++++++
 src/kiri/widget.js  |  5 +++++
 web/kiri/index.css  | 29 +++++++++++++++++++----------
 web/kiri/index.html | 35 ++++++++++++++++++-----------------
 5 files changed, 73 insertions(+), 28 deletions(-)

diff --git a/src/kiri/init.js b/src/kiri/init.js
index 4aee64c9..351238ef 100644
--- a/src/kiri/init.js
+++ b/src/kiri/init.js
@@ -430,7 +430,7 @@
                 showDevices();
                 break;
             case cca('w'): // scale
-                UI.tool.scale();
+                UI.tool.next();
                 break;
             case cca('o'): // tools
                 showTools();
@@ -2722,12 +2722,18 @@
         // bind tool show buttons
         UI.tool.show = function(tictac) {
             if (typeof(tictac) === 'string') {
+                nextool = listool.indexOf(tictac)+1;
                 tictac = $(tictac);
             }
             let mover = parentWithClass(tictac.control, 'movable');
             mover.style.display = 'flex';
             tictac.control.onclick();
         }
+        let nextool = 0;
+        let listool = ['ft-scale','ft-mesh','ft-select','ft-rotate'];
+        UI.tool.next = function() {
+            UI.tool.show(listool[nextool++ % 4]);
+        };
         $('tool-rotate').onclick = () => { UI.tool.show('ft-rotate') };
         $('tool-scale').onclick = () => { UI.tool.show('ft-scale') };
         $('tool-mesh').onclick = () => { UI.tool.show('ft-mesh') };
diff --git a/src/kiri/main.js b/src/kiri/main.js
index 1528a05c..f14a3911 100644
--- a/src/kiri/main.js
+++ b/src/kiri/main.js
@@ -1985,6 +1985,7 @@
         platform.select(widget, shift);
         platform.compute_max_z();
         API.event.emit('widget.add', widget);
+        platformChanged();
         auto_save();
         if (nolayout) {
             return;
@@ -2057,9 +2058,32 @@
         platformUpdateSelected();
         if (feature.drop_layout) platform.layout();
         API.event.emit('widget.delete', widget);
+        platformChanged();
         auto_save();
     }
 
+    function platformChanged() {
+        let fts = $('ft-select');
+        fts.innerHTML = '';
+        for (let w of WIDGETS) {
+            let b = DOC.createElement('button');
+            fts.appendChild(b);
+            b.innerText = w.meta.file || 'no name';
+            let color;
+            b.onmouseenter = function() {
+                color = w.getColor();
+                w.setColor(0x0088ff);
+            };
+            b.onmouseleave = function() {
+                w.setColor(color);
+            };
+            b.onclick = function() {
+                platformSelect(w, true);
+                color = w.getColor();
+            };
+        }
+    }
+
     function platformSelectAll() {
         forAllWidgets(function(w) { platform.select(w, true) })
     }
diff --git a/src/kiri/widget.js b/src/kiri/widget.js
index 4734a5e5..a9c2f12d 100644
--- a/src/kiri/widget.js
+++ b/src/kiri/widget.js
@@ -477,10 +477,15 @@ console.log/** Copyright Stewart Allen <sa@grid.space> -- All Rights Reserved */
         if (Array.isArray(color)) {
             color = color[this.getExtruder(settings) % color.length];
         }
+        this.color = color;
         let material = this.mesh.material;
         material.color.set(color);
     };
 
+    PRO.getColor = function() {
+        return this.color;
+    };
+
     /**
      * @param {number} value
      */
diff --git a/web/kiri/index.css b/web/kiri/index.css
index f99530ee..21e139cd 100644
--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@@ -440,7 +440,9 @@ th, tr, td, label {
 .movable {
     margin: 5px;
 }
-
+.movable input {
+    background-color: rgba(255,255,255,0.5);
+}
 .movable .title {
     color: white;
     padding: 2px 3px 1px 3px;
@@ -450,13 +452,14 @@ th, tr, td, label {
     font-size: smaller;
     text-align: center;
 }
-
 .movable .body {
     margin: 0;
     padding: 0 5px 0 0;
-    background-color: rgba(245,245,245,0.9);
+    background-color: rgba(245,245,245,0.8);
+}
+.movable:hover .body {
+    background-color: rgba(245,245,245,0.95);
 }
-
 .movable .footer {
     height: 10px;
     border-bottom-left-radius: 5px;
@@ -475,7 +478,7 @@ th, tr, td, label {
 }
 
 .tictac {
-    margin: 2px 2px 0 0;
+    margin: 2px 2px 2px 0;
     padding: 4px;
     border-radius: 3px;
     border: 1px solid white;
@@ -484,15 +487,15 @@ th, tr, td, label {
     align-items: center;
     justify-content: center;
 }
+.tictac:hover {
+    border: 1px solid #ccc;
+    background-color: #eee;
+}
 .tictac.selected {
     background-color: var(--main-color);
     color: #fff;
 }
 
-.tictac:hover {
-    border: 1px solid #ccc;
-}
-
 #float-tools {
     position: absolute;
     margin: 0 0 0 5px;
@@ -580,12 +583,18 @@ th, tr, td, label {
     grid-template-rows: auto auto auto;
     grid-template-columns: auto 1fr;
 }
-
 #lock_x, #lock_y, #lock_z {
     position: absolute;
     right: 2px;
     top: 7px;
 }
+#ft-select {
+    max-height: 300px;
+    overflow-y: auto;
+}
+#ft-select button {
+    text-transform: none;
+}
 
 #lt-top {
     height: 10px;
diff --git a/web/kiri/index.html b/web/kiri/index.html
index 1b54dec4..c0baf042 100644
--- a/web/kiri/index.html
+++ b/web/kiri/index.html
@@ -91,6 +91,21 @@
                             <div lkt="mesh" class="tictac" select="ft-mesh" label="ft-label"><i class="fas fa-dice-d20"></i></div>
                             <div lkt="select" class="tictac" select="ft-select" label="ft-label"><i class="fas fa-mouse-pointer"></i></div>
                         </div>
+                        <div id="ft-scale" class="grow grid">
+                            <div><label class="middle">X</label><input id="lock_x" type="checkbox" checked/></div>
+                            <div><label class="middle">Y</label><input id="lock_y" type="checkbox" checked/></div>
+                            <div><label class="middle">Z</label><input id="lock_z" type="checkbox" checked/></div>
+                            <div><label id="lab-axis" lk="axis">axis</label></div>
+                            <div><input id="size_x" size="8" class="value"/></div>
+                            <div><input id="size_y" size="8" class="value"/></div>
+                            <div><input id="size_z" size="8" class="value"/></div>
+                            <div><label id="lab-size" lk="size">size</label></div>
+                            <div><input id="scale_x" size="8" class="value" value="1"/></div>
+                            <div><input id="scale_y" size="8" class="value" value="1"/></div>
+                            <div><input id="scale_z" size="8" class="value" value="1"/></div>
+                            <div><label id="lab-scale" lk="scale">scale</label></div>
+                            <button id="scale-reset" class="gr4">reset</button>
+                        </div>
                         <div id="ft-rotate" class="grow grid">
                             <div><i id="rot_x_lt" class="fas fa-chevron-left"></i></div>
                             <label>X</label>
@@ -109,21 +124,6 @@
                                 <button id="unrotate" class="grow" lk="reset">reset</button>
                             </div>
                         </div>
-                        <div id="ft-scale" class="grow grid">
-                            <div><label class="middle">X</label><input id="lock_x" type="checkbox" checked/></div>
-                            <div><label class="middle">Y</label><input id="lock_y" type="checkbox" checked/></div>
-                            <div><label class="middle">Z</label><input id="lock_z" type="checkbox" checked/></div>
-                            <div><label id="lab-axis" lk="axis">axis</label></div>
-                            <div><input id="size_x" size="8" class="value"/></div>
-                            <div><input id="size_y" size="8" class="value"/></div>
-                            <div><input id="size_z" size="8" class="value"/></div>
-                            <div><label id="lab-size" lk="size">size</label></div>
-                            <div><input id="scale_x" size="8" class="value" value="1"/></div>
-                            <div><input id="scale_y" size="8" class="value" value="1"/></div>
-                            <div><input id="scale_z" size="8" class="value" value="1"/></div>
-                            <div><label id="lab-scale" lk="scale">scale</label></div>
-                            <button id="scale-reset" class="gr4">reset</button>
-                        </div>
                         <div id="ft-mesh" class="grow f-col">
                             <div id="mesh-info" class="grid">
                                 <label>object:</label>
@@ -137,7 +137,7 @@
                             <button id="mesh-export-stl" lk="rc_xstl">export STL</button>
                             <button id="mesh-heal" lk="rc_heal">heal</button>
                         </div>
-                        <div id="ft-select" class="grow middle">coming soon</div>
+                        <div id="ft-select" class="grow f-col"></div>
                     </div>
                     <div class="footer"></div>
                 </div>
@@ -475,12 +475,13 @@
     </div>
     <div id="tool-info" class="noshow"></div>
     <div id="context-menu">
-        <button id="context-clear-workspace" lk="rc_clws">clear workspace</button>
         <button id="context-export-workspace" lk="rc_xpws">export workspace</button>
+        <button id="context-clear-workspace" lk="rc_clws">clear workspace</button>
         <div class="sep"></div>
         <button id="context-layflat" lk="rc_lafl">lay flat</button>
         <button id="context-mirror" lk="rc_mirr">mirror</button>
         <button id="context-duplicate" lk="rc_dupl">duplicate</button>
+        <div class="sep"></div>
         <button id="context-setfocus" lk="rc_focs">set focus</button>
     </div>
     <div id="fps" class="noshow"></div>