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();
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') };

View file

@ -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) })
}

View file

@ -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
*/

View file

@ -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;

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="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>