complete basic scale/rotate. add 'w' hotkey
This commit is contained in:
Stewart Allen
parent
7622c61e67
commit
9491aa00e8
3 changed files with 212 additions and 110 deletions
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<div id="float-tools-close" class="closer">
|
||||
<i class="fas fa-times"></i>
|
||||
</div>
|
||||
<label id="ft-label" class="grow">title bar</label>
|
||||
<div id="float-tools-close" class="closer"><i class="fas fa-times"></i></div>
|
||||
</div>
|
||||
<div class="body f-row">
|
||||
<div class="f-col">
|
||||
<div lkt="rotate" class="tictac" select="ft-rotate"><i class="fas fa-sync-alt"></i></div>
|
||||
<div lkt="scale" class="tictac" select="ft-scale"><i class="fas fa-expand"></i></div>
|
||||
<div class="f-col menu">
|
||||
<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" 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>
|
||||
<div class="grow a-center">
|
||||
<i id="rot_x_lt" class="fas fa-chevron-left"></i>
|
||||
<div id="ft-rotate" class="grow grid">
|
||||
<div><i id="rot_x_lt" class="fas fa-chevron-left"></i></div>
|
||||
<label>X</label>
|
||||
<i id="rot_x_gt" class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
<input id="rot_x" class="value center" size="5"/ value="0">
|
||||
</div>
|
||||
<div>
|
||||
<div class="grow a-center">
|
||||
<i id="rot_y_lt" class="fas fa-chevron-left"></i>
|
||||
<div><i id="rot_x_gt" class="fas fa-chevron-right"></i></div>
|
||||
<input id="rot_x" class="value center" size="6" value="0">
|
||||
<div><i id="rot_y_lt" class="fas fa-chevron-left"></i></div>
|
||||
<label>Y</label>
|
||||
<i id="rot_y_gt" class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
<input id="rot_y" class="value center" size="5"/ value="0">
|
||||
</div>
|
||||
<div>
|
||||
<div class="grow a-center">
|
||||
<i id="rot_z_lt" class="fas fa-chevron-left"></i>
|
||||
<div><i id="rot_y_gt" class="fas fa-chevron-right"></i></div>
|
||||
<input id="rot_y" class="value center" size="6" value="0">
|
||||
<div><i id="rot_z_lt" class="fas fa-chevron-left"></i></div>
|
||||
<label>Z</label>
|
||||
<i id="rot_z_gt" class="fas fa-chevron-right"></i>
|
||||
<div><i id="rot_z_gt" class="fas fa-chevron-right"></i></div>
|
||||
<input id="rot_z" class="value center" size="6" value="0">
|
||||
<div class="buttons f-row">
|
||||
<!-- <button id="lay-flat" class="grow">lay flat</button> -->
|
||||
<button id="unrotate" class="grow" lk="reset">reset</button>
|
||||
</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 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>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue