From 9491aa00e800bea9a49fd2fda686379c9e9153b5 Mon Sep 17 00:00:00 2001 From: Stewart Allen Date: Fri, 8 Oct 2021 14:55:46 -0400 Subject: [PATCH] complete basic scale/rotate. add 'w' hotkey --- src/kiri/init.js | 91 +++++++++++++++++++++++++++---- web/kiri/index.css | 130 +++++++++++++++++++++++++++++++------------- web/kiri/index.html | 103 +++++++++++++++-------------------- 3 files changed, 213 insertions(+), 111 deletions(-) diff --git a/src/kiri/init.js b/src/kiri/init.js index f22e3650..633a0a75 100644 --- a/src/kiri/init.js +++ b/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) { - p.style.display = p === target ? 'flex' : 'none'; + for (let rec of grp) { + 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-scale').onclick = () => { showTool('ft-scale') }; + $('tool-rotate').onclick = () => { UI.tool.show('ft-rotate') }; + $('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) { diff --git a/web/kiri/index.css b/web/kiri/index.css index a5fc7a3b..0ab15812 100644 --- a/web/kiri/index.css +++ b/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; - background-color: rgba(200,200,200,0.9); - border-top-left-radius: 5px; - border-top-right-radius: 5px; + color: white; + padding: 2px 3px 1px 3px; + background-color: var(--main-color); + border-top-left-radius: 10px; + border-top-right-radius: 10px; + font-size: smaller; + text-align: center; } .movable .body { - padding-right: 5px; - padding-bottom: 2px; + margin: 0; + 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 { - display: none; +#float-tools .menu { + 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 { diff --git a/web/kiri/index.html b/web/kiri/index.html index 4ec22969..1de3923a 100644 --- a/web/kiri/index.html +++ b/web/kiri/index.html @@ -81,70 +81,53 @@
- -
- -
+ +
-
-
-
+
+
+
+
+
-
-
-
- - - -
- -
-
-
- - - -
- -
-
-
- - - -
- -
-
lay flat
-
reset
-
-
-
- -
-
-
-
-
- -
-
-
-
-
- -
-
-
-
-
-
-
-
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
coming soon
+
coming soon
+
@@ -254,11 +237,11 @@
-
+
-
+