complete basic scale/rotate. add 'w' hotkey

src/kiri/init.js

@@ -429,6 +429,9 @@
             case cca('e'): // device
                 showDevices();
                 break;
+            case cca('w'): // scale
+                UI.tool.scale();
+                break;
             case cca('o'): // tools
                 showTools();
                 break;
@@ -1506,6 +1509,12 @@
                 search:         $('dev-search'),
                 filter:         $('dev-filter')
             },
+            tool: {
+                rotate:         () => { UI.tool.show('ft-rotate') },
+                scale:          () => { UI.tool.show('ft-scale') },
+                mesh:           () => { UI.tool.show('ft-mesh') },
+                select:         () => { UI.tool.show('ft-select') },
+            },
 
             fps:                $('fps'),
             load:               $('load-file'),
@@ -1520,8 +1529,6 @@
             ltview:             $('lt-view'),
             ltact:              $('act-slice'),
             edit:               $('lt-tools'),
-            // rotate:             $('lt-rotate'),
-            // scale:              $('lt-scale'),
             nozzle:             $('lt-nozzle'),
             render:             $('lt-render'),
 
@@ -1529,10 +1536,10 @@
             modalBox:           $('modal-box'),
             help:               $('mod-help'),
             setup:              $('mod-setup'),
-            tools:              $('mod-tools'),
             prefs:              $('mod-prefs'),
             files:              $('mod-files'),
             saves:              $('mod-saves'),
+            tools:              $('mod-tools'),
             print:              $('mod-print'),
             local:              $('mod-local'),
             any:                $('mod-any'),
@@ -2159,6 +2166,10 @@
                 xr = ((tl && xc) || (!tl && xt) ? ra : 1),
                 yr = ((tl && yc) || (!tl && yt) ? ra : 1),
                 zr = ((tl && zc) || (!tl && zt) ? ra : 1);
+            // prevent null scale
+            if (xr * yr * zr === 0) {
+                return;
+            }
             API.selection.scale(xr,yr,zr);
             UI.sizeX.was = UI.sizeX.value = xv * xr;
             UI.sizeY.was = UI.sizeY.value = yv * yr;
@@ -2228,7 +2239,7 @@
             );
         };
 
-        $('lab-scale').onclick = () => {
+        $('scale-reset').onclick = $('lab-scale').onclick = () => {
             API.selection.scale(1 / UI.scaleX.was, 1 / UI.scaleY.was, 1 / UI.scaleZ.was);
             UI.scaleX.value = UI.scaleY.value = UI.scaleZ.value =
             UI.scaleX.was = UI.scaleY.was = UI.scaleZ.was = 1;
@@ -2623,32 +2634,86 @@
         // show topline separator when iframed
         // try { if (WIN.self !== WIN.top) $('top-sep').style.display = 'flex' } catch (e) { }
 
-        // bind movable objects and panel tictacs
+        // bind tictac buttons to panel show/hide
         let groups = {};
         for (let tt of [...document.getElementsByClassName('tictac')]) {
             let sid = tt.getAttribute('select');
             let gid = tt.getAttribute('group') || 'default';
+            let lid = tt.getAttribute('label');
             let grp = groups[gid] = groups[gid] || [];
             let target = $(sid);
             target.style.display = 'none';
             target.control = tt;
-            grp.push(target);
+            grp.push({button: tt, div: target});
             tt.onclick = () => {
-                for (let p of grp) {
+                for (let rec of grp) {
-                    p.style.display = p === target ? 'flex' : 'none';
+                    let {button, div} = rec;
+                    if (div === target) {
+                        div.style.display = '';
+                        button.classList.add('selected');
+                    } else {
+                        div.style.display = 'none';
+                        button.classList.remove('selected');
+                    }
+                }
+                if (lid) {
+                    $(lid).innerText = tt.getAttribute('title');
                 }
             };
         }
+        // bind closer X to hiding parent action
         for (let tt of [...document.getElementsByClassName('closer')]) {
             let tid = tt.getAttribute('target');
             let target = tid ? $(tid) : parentWithClass(tt, 'movable');
             target.style.display = 'none';
-            tt.onclick = () => {
+            tt.onmousedown = (ev) => {
                 target.style.display = 'none';
+                ev.preventDefault();
+                ev.stopPropagation();
             };
         }
+        // add drag behavior to movers
+        [...document.getElementsByClassName('mover')].forEach(mover => {
+            mover.onmousedown = (ev) => {
+                let moving = parentWithClass(mover, 'movable');
+                let mpos = {
+                    x: moving.offsetLeft,
+                    y: moving.offsetTop
+                };
+                ev.preventDefault();
+                ev.stopPropagation();
+                let origin = {
+                    x: ev.screenX,
+                    y: ev.screenY
+                };
+                let tracker = UI.tracker;
+                tracker.style.display = 'block';
+                tracker.onmousemove = (ev) => {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    let pos = {
+                        x: ev.screenX,
+                        y: ev.screenY
+                    };
+                    let delta = {
+                        x: pos.x - origin.x,
+                        y: pos.y - origin.y
+                    };
+                    moving.style.left = `${mpos.x + delta.x}px`;
+                    moving.style.top = `${mpos.y + delta.y}px`;
+                };
+                tracker.onmouseup = (ev) => {
+                    UI.tracker.style.display = 'none';
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    tracker.onmouseup = null;
+                    tracker.onmouseout = null;
+                    tracker.onmousemove = null;
+                };
+            };
+        });
         // bind tool show buttons
-        function showTool(tictac) {
+        UI.tool.show = function(tictac) {
             if (typeof(tictac) === 'string') {
                 tictac = $(tictac);
             }
@@ -2656,8 +2721,10 @@
             mover.style.display = 'flex';
             tictac.control.onclick();
         }
-        $('tool-rotate').onclick = () => { showTool('ft-rotate') };
+        $('tool-rotate').onclick = () => { UI.tool.show('ft-rotate') };
-        $('tool-scale').onclick = () => { showTool('ft-scale') };
+        $('tool-scale').onclick = () => { UI.tool.show('ft-scale') };
+        $('tool-mesh').onclick = () => { UI.tool.show('ft-mesh') };
+        $('tool-select').onclick = () => { UI.tool.show('ft-select') };
 
         // warn users they are running a beta release
         if (KIRI.beta && KIRI.beta > 0 && SDB.kiri_beta != KIRI.beta) {

web/kiri/index.css

@@ -156,7 +156,10 @@ th, tr, td, label {
 .noshow {
     display: none;
 }
-.f-row {
+.grid {
+    display: grid;
+}
+.frow {
     flex-direction: row;
 }
 .f-col {
@@ -201,6 +204,11 @@ th, tr, td, label {
 .center {
     text-align: center;
 }
+.middle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 .t-just {
     text-align: justify;
 }
@@ -434,25 +442,36 @@ th, tr, td, label {
 }
 
 .movable .title {
-    padding: 5px;
+    color: white;
-    background-color: rgba(200,200,200,0.9);
+    padding: 2px 3px 1px 3px;
-    border-top-left-radius: 5px;
+    background-color: var(--main-color);
-    border-top-right-radius: 5px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    font-size: smaller;
+    text-align: center;
 }
 
 .movable .body {
-    padding-right: 5px;
+    margin: 0;
-    padding-bottom: 2px;
+    padding: 0 5px 0 0;
     background-color: rgba(245,245,245,0.9);
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
 }
 
-.mover {
+.movable .footer {
+    height: 10px;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    background-color: var(--main-color);
 }
 
 .closer {
-    margin-left: 5px;
+    position: absolute;
+    top: 3px;
+    right: 6px;
+    z-index: 200;
+}
+.closer:hover {
+    color: #555;
 }
 
 .tictac {
@@ -461,6 +480,13 @@ th, tr, td, label {
     border-radius: 3px;
     border: 1px solid white;
     background-color: rgba(255,255,255,0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.tictac.selected {
+    background-color: var(--main-color);
+    color: #fff;
 }
 
 .tictac:hover {
@@ -469,11 +495,63 @@ th, tr, td, label {
 
 #float-tools {
     position: absolute;
+    margin: 0 0 0 5px;
+    top: 0;
     left: 100%;
+    z-index: 16;
+}
+#float-tools button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
 }
 
-#lt-rotate, #lt-scale {
+#float-tools .menu {
-    display: none;
+    margin-right: 5px;
+    border-right: 3px solid var(--main-color);
+}
+
+#ft-rotate {
+    grid-gap: 2px;
+    grid-template-rows: auto auto auto 1fr;
+    grid-template-columns: auto auto auto auto;
+}
+#ft-rotate label, #ft-rotate svg {
+    text-align: center;
+}
+#ft-rotate > div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+#ft-rotate .buttons {
+    grid-column: 1/4;
+    align-items: stretch;
+    min-width: 150px;
+}
+#ft-scale {
+    grid-gap: 2px;
+    grid-template-rows: auto auto auto 1fr;
+    grid-template-columns: auto auto auto 1fr;
+}
+#ft-scale label {
+    text-align: center;
+    flex-grow: 1;
+}
+#ft-scale button {
+    grid-column: 1/4;
+    margin-left: 0;
+    margin-right: 0;
+}
+#ft-mesh, #ft-select {
+    min-width: 200px;
+}
+
+#lock_x, #lock_y, #lock_z {
+    position: absolute;
+    right: 2px;
+    top: 7px;
 }
 
 #lt-top {
@@ -616,29 +694,6 @@ th, tr, td, label {
 .txt-sel button, .btn-sel {
     background-color: var(--highlight);
 }
-#pop-rotate input.value, #pop-scale input.value {
-    width: 90%;
-}
-#pop-rotate label {
-    padding: 3px;
-}
-#pop-rotate svg {
-    padding: 3px;
-    font-size: 20px;
-    border-radius: 3px;
-    border: 1px solid rgba(0,0,0,0);
-}
-#pop-rotate svg:hover {
-    color: #345;
-    font-size: 20px;
-    background-color: rgba(255,255,255,0.5);
-    border: 1px solid #aaa;
-}
-#lock_x, #lock_y, #lock_z {
-    position: absolute;
-    left: 2px;
-    top: 7px;
-}
 
 #end {
     left: 0;
@@ -761,8 +816,6 @@ th, tr, td, label {
     position: absolute;
     right: 0;
     top: 0;
-    xtransform: translateX(-100%);
-    xtransform: translateY(-50%);
 }
 
 #progress {
@@ -1649,7 +1702,6 @@ th, tr, td, label {
 }
 
 #lab-axis, #lab-scale {
-    padding: 0 6px 0 6px;
     border-radius: 3px;
 }
 #lab-axis:hover, #lab-scale:hover {

web/kiri/index.html

@@ -81,70 +81,53 @@
                 <div id="float-tools" class="f-col movable">
 
                     <div id="float-tools-title" class="title mover">
-                        <label class="grow">title bar</label>
+                        <label id="ft-label" class="grow">title bar</label>
-                        <div id="float-tools-close" class="closer">
+                        <div id="float-tools-close" class="closer"><i class="fas fa-times"></i></div>
-                            <i class="fas fa-times"></i>
-                        </div>
                     </div>
                     <div class="body f-row">
-                        <div class="f-col">
+                        <div class="f-col menu">
-                            <div lkt="rotate" class="tictac" select="ft-rotate"><i class="fas fa-sync-alt"></i></div>
+                            <div lkt="rotate" class="tictac" select="ft-rotate" label="ft-label"><i class="fas fa-sync-alt"></i></div>
-                            <div lkt="scale" class="tictac" select="ft-scale"><i class="fas fa-expand"></i></div>
+                            <div lkt="scale" class="tictac" select="ft-scale" label="ft-label"><i class="fas fa-expand"></i></div>
+                            <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-rotate" class="grow f-col">
+                        <div id="ft-rotate" class="grow grid">
-                            <div>
+                            <div><i id="rot_x_lt" class="fas fa-chevron-left"></i></div>
-                                <div class="grow a-center">
+                            <label>X</label>
-                                    <i id="rot_x_lt" class="fas fa-chevron-left"></i>
+                            <div><i id="rot_x_gt" class="fas fa-chevron-right"></i></div>
-                                    <label>X</label>
+                            <input id="rot_x" class="value center" size="6" value="0">
-                                    <i id="rot_x_gt" class="fas fa-chevron-right"></i>
+                            <div><i id="rot_y_lt" class="fas fa-chevron-left"></i></div>
-                                </div>
+                            <label>Y</label>
-                                <input id="rot_x" class="value center" size="5"/ value="0">
+                            <div><i id="rot_y_gt" class="fas fa-chevron-right"></i></div>
-                            </div>
+                            <input id="rot_y" class="value center" size="6" value="0">
-                            <div>
+                            <div><i id="rot_z_lt" class="fas fa-chevron-left"></i></div>
-                                <div class="grow a-center">
+                            <label>Z</label>
-                                    <i id="rot_y_lt" class="fas fa-chevron-left"></i>
+                            <div><i id="rot_z_gt" class="fas fa-chevron-right"></i></div>
-                                    <label>Y</label>
+                            <input id="rot_z" class="value center" size="6" value="0">
-                                    <i id="rot_y_gt" class="fas fa-chevron-right"></i>
+                            <div class="buttons f-row">
-                                </div>
+                                <!-- <button id="lay-flat" class="grow">lay flat</button> -->
-                                <input id="rot_y" class="value center" size="5"/ value="0">
+                                <button id="unrotate" class="grow" lk="reset">reset</button>
-                            </div>
-                            <div>
-                                <div class="grow a-center">
-                                    <i id="rot_z_lt" class="fas fa-chevron-left"></i>
-                                    <label>Z</label>
-                                    <i id="rot_z_gt" class="fas fa-chevron-right"></i>
-                                </div>
-                                <input id="rot_z" class="value center" size="5"/ value="0">
-                            </div>
-                            <div id="lay-flat" class="f-col j-center center">lay flat</div>
-                            <div id="unrotate" class="f-col j-center" lk="reset">reset</div>
-                        </div>
-                        <div id="ft-scale" class="grow f-row">
-                            <div class="f-col">
-                                <input id="lock_x" type="checkbox" checked/>
-                                <div><label>X</label></div>
-                                <div><input id="size_x" xsize="8" class="value"/></div>
-                                <div><input id="scale_x" xsize="8" class="value" value="1"/></div>
-                            </div>
-                            <div class="f-col">
-                                <input id="lock_y" type="checkbox" checked/>
-                                <div><label>Y</label></div>
-                                <div><input id="size_y" xsize="8" class="value"/></div>
-                                <div><input id="scale_y" xsize="8" class="value" value="1"/></div>
-                            </div>
-                            <div class="f-col">
-                                <input id="lock_z" type="checkbox" checked/>
-                                <div><label>Z</label></div>
-                                <div><input id="size_z" xsize="8" class="value"/></div>
-                                <div><input id="scale_z" xsize="8" class="value" value="1"/></div>
-                            </div>
-                            <div class="f-col j-center">
-                                <div><label id="lab-axis" lk="axis">axis</label></div>
-                                <div><label id="lab-size" lk="size">size</label></div>
-                                <div><label id="lab-scale" lk="scale">scale</label></div>
                             </div>
                         </div>
+                        <div id="ft-scale" class="grow grid">
+                            <div><label>X</label><input id="lock_x" type="checkbox" checked/></div>
+                            <div><label>Y</label><input id="lock_y" type="checkbox" checked/></div>
+                            <div><label>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 middle">coming soon</div>
+                        <div id="ft-select" class="grow middle">coming soon</div>
                     </div>
+                    <div class="footer"></div>
                 </div>
             </div>
             <div id="lt-setup" class="lt-menu lt-active">
@@ -254,11 +237,11 @@
                         <i class="fas fa-expand"></i>
                         <label lk="scale">scale</label>
                     </div>
-                    <div class="grow a-center">
+                    <div id="tool-mesh" class="grow a-center">
                         <i class="fas fa-dice-d20"></i>
                         <label lk="mesh">mesh</label>
                     </div>
-                    <div class="grow a-center">
+                    <div id="tool-select" class="grow a-center">
                         <i class="fas fa-mouse-pointer"></i>
                         <label lk="select">select</label>
                     </div>