add select tool

This commit is contained in:
Stewart Allen 2021-10-09 01:13:41 -04:00
commit ff298e8300
5 changed files with 73 additions and 28 deletions

View file

@ -430,7 +430,7 @@
showDevices(); showDevices();
break; break;
case cca('w'): // scale case cca('w'): // scale
UI.tool.scale(); UI.tool.next();
break; break;
case cca('o'): // tools case cca('o'): // tools
showTools(); showTools();
@ -2722,12 +2722,18 @@
// bind tool show buttons // bind tool show buttons
UI.tool.show = function(tictac) { UI.tool.show = function(tictac) {
if (typeof(tictac) === 'string') { if (typeof(tictac) === 'string') {
nextool = listool.indexOf(tictac)+1;
tictac = $(tictac); tictac = $(tictac);
} }
let mover = parentWithClass(tictac.control, 'movable'); let mover = parentWithClass(tictac.control, 'movable');
mover.style.display = 'flex'; mover.style.display = 'flex';
tictac.control.onclick(); 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-rotate').onclick = () => { UI.tool.show('ft-rotate') };
$('tool-scale').onclick = () => { UI.tool.show('ft-scale') }; $('tool-scale').onclick = () => { UI.tool.show('ft-scale') };
$('tool-mesh').onclick = () => { UI.tool.show('ft-mesh') }; $('tool-mesh').onclick = () => { UI.tool.show('ft-mesh') };

View file

@ -1985,6 +1985,7 @@
platform.select(widget, shift); platform.select(widget, shift);
platform.compute_max_z(); platform.compute_max_z();
API.event.emit('widget.add', widget); API.event.emit('widget.add', widget);
platformChanged();
auto_save(); auto_save();
if (nolayout) { if (nolayout) {
return; return;
@ -2057,9 +2058,32 @@
platformUpdateSelected(); platformUpdateSelected();
if (feature.drop_layout) platform.layout(); if (feature.drop_layout) platform.layout();
API.event.emit('widget.delete', widget); API.event.emit('widget.delete', widget);
platformChanged();
auto_save(); 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() { function platformSelectAll() {
forAllWidgets(function(w) { platform.select(w, true) }) forAllWidgets(function(w) { platform.select(w, true) })
} }

View file

@ -477,10 +477,15 @@ console.log/** Copyright Stewart Allen <sa@grid.space> -- All Rights Reserved */
if (Array.isArray(color)) { if (Array.isArray(color)) {
color = color[this.getExtruder(settings) % color.length]; color = color[this.getExtruder(settings) % color.length];
} }
this.color = color;
let material = this.mesh.material; let material = this.mesh.material;
material.color.set(color); material.color.set(color);
}; };
PRO.getColor = function() {
return this.color;
};
/** /**
* @param {number} value * @param {number} value
*/ */

View file

@ -440,7 +440,9 @@ th, tr, td, label {
.movable { .movable {
margin: 5px; margin: 5px;
} }
.movable input {
background-color: rgba(255,255,255,0.5);
}
.movable .title { .movable .title {
color: white; color: white;
padding: 2px 3px 1px 3px; padding: 2px 3px 1px 3px;
@ -450,13 +452,14 @@ th, tr, td, label {
font-size: smaller; font-size: smaller;
text-align: center; text-align: center;
} }
.movable .body { .movable .body {
margin: 0; margin: 0;
padding: 0 5px 0 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 { .movable .footer {
height: 10px; height: 10px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
@ -475,7 +478,7 @@ th, tr, td, label {
} }
.tictac { .tictac {
margin: 2px 2px 0 0; margin: 2px 2px 2px 0;
padding: 4px; padding: 4px;
border-radius: 3px; border-radius: 3px;
border: 1px solid white; border: 1px solid white;
@ -484,15 +487,15 @@ th, tr, td, label {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.tictac:hover {
border: 1px solid #ccc;
background-color: #eee;
}
.tictac.selected { .tictac.selected {
background-color: var(--main-color); background-color: var(--main-color);
color: #fff; color: #fff;
} }
.tictac:hover {
border: 1px solid #ccc;
}
#float-tools { #float-tools {
position: absolute; position: absolute;
margin: 0 0 0 5px; margin: 0 0 0 5px;
@ -580,12 +583,18 @@ th, tr, td, label {
grid-template-rows: auto auto auto; grid-template-rows: auto auto auto;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
} }
#lock_x, #lock_y, #lock_z { #lock_x, #lock_y, #lock_z {
position: absolute; position: absolute;
right: 2px; right: 2px;
top: 7px; top: 7px;
} }
#ft-select {
max-height: 300px;
overflow-y: auto;
}
#ft-select button {
text-transform: none;
}
#lt-top { #lt-top {
height: 10px; height: 10px;

View file

@ -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="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 lkt="select" class="tictac" select="ft-select" label="ft-label"><i class="fas fa-mouse-pointer"></i></div>
</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 id="ft-rotate" class="grow grid">
<div><i id="rot_x_lt" class="fas fa-chevron-left"></i></div> <div><i id="rot_x_lt" class="fas fa-chevron-left"></i></div>
<label>X</label> <label>X</label>
@ -109,21 +124,6 @@
<button id="unrotate" class="grow" lk="reset">reset</button> <button id="unrotate" class="grow" lk="reset">reset</button>
</div> </div>
</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="ft-mesh" class="grow f-col">
<div id="mesh-info" class="grid"> <div id="mesh-info" class="grid">
<label>object:</label> <label>object:</label>
@ -137,7 +137,7 @@
<button id="mesh-export-stl" lk="rc_xstl">export STL</button> <button id="mesh-export-stl" lk="rc_xstl">export STL</button>
<button id="mesh-heal" lk="rc_heal">heal</button> <button id="mesh-heal" lk="rc_heal">heal</button>
</div> </div>
<div id="ft-select" class="grow middle">coming soon</div> <div id="ft-select" class="grow f-col"></div>
</div> </div>
<div class="footer"></div> <div class="footer"></div>
</div> </div>
@ -475,12 +475,13 @@
</div> </div>
<div id="tool-info" class="noshow"></div> <div id="tool-info" class="noshow"></div>
<div id="context-menu"> <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-export-workspace" lk="rc_xpws">export workspace</button>
<button id="context-clear-workspace" lk="rc_clws">clear workspace</button>
<div class="sep"></div> <div class="sep"></div>
<button id="context-layflat" lk="rc_lafl">lay flat</button> <button id="context-layflat" lk="rc_lafl">lay flat</button>
<button id="context-mirror" lk="rc_mirr">mirror</button> <button id="context-mirror" lk="rc_mirr">mirror</button>
<button id="context-duplicate" lk="rc_dupl">duplicate</button> <button id="context-duplicate" lk="rc_dupl">duplicate</button>
<div class="sep"></div>
<button id="context-setfocus" lk="rc_focs">set focus</button> <button id="context-setfocus" lk="rc_focs">set focus</button>
</div> </div>
<div id="fps" class="noshow"></div> <div id="fps" class="noshow"></div>