restore slider
This commit is contained in:
Stewart Allen
parent
ab7ea82b4d
commit
793cdad2a1
4 changed files with 255 additions and 197 deletions
154
src/kiri/init.js
154
src/kiri/init.js
|
|
@ -154,7 +154,7 @@
|
|||
// kill any poppers in compact mode
|
||||
UC.hidePoppers();
|
||||
// hide layers menu
|
||||
UI.layers.style.display = 'none';
|
||||
// UI.layers.style.display = 'none';
|
||||
break;
|
||||
}
|
||||
return false;
|
||||
|
|
@ -560,13 +560,12 @@
|
|||
dev.internal = 0;
|
||||
let selext = $('pop-nozzle');
|
||||
selext.innerHTML = '';
|
||||
for (let i=dev.extruders.length-1; i>=0; i--) {
|
||||
for (let i=0; i<dev.extruders.length; i++) {
|
||||
let d = DOC.createElement('div');
|
||||
let b = DOC.createElement('button');
|
||||
b.appendChild(DOC.createTextNode(i));
|
||||
d.appendChild(b);
|
||||
// b.setAttribute('id', `pop-nozzle-${i}`);
|
||||
b.onclick = function() {
|
||||
d.appendChild(DOC.createTextNode(i));
|
||||
d.setAttribute('id', `sel-ext-${i}`);
|
||||
d.setAttribute('class', 'col j-center');
|
||||
d.onclick = function() {
|
||||
API.selection.for_widgets(w => {
|
||||
current.widget[w.id] = {extruder: i};
|
||||
});
|
||||
|
|
@ -1049,10 +1048,10 @@
|
|||
// ensure we have settings from last session
|
||||
API.conf.restore();
|
||||
|
||||
let xcontrol = $('control'),
|
||||
container = $('container'),
|
||||
let container = $('container'),
|
||||
welcome = $('welcome'),
|
||||
gcode = $('dev-gcode'),
|
||||
tracker = $('tracker'),
|
||||
controller = settings().controller,
|
||||
dark = controller.dark;
|
||||
|
||||
|
|
@ -1073,6 +1072,7 @@
|
|||
|
||||
Object.assign(UI, {
|
||||
// from static HTML
|
||||
load: $('load-file'),
|
||||
alert: {
|
||||
dialog: $('alert-area'),
|
||||
text: $('alert-text')
|
||||
|
|
@ -1090,6 +1090,7 @@
|
|||
tools: $('mod-tools'),
|
||||
prefs: $('mod-prefs'),
|
||||
files: $('mod-files'),
|
||||
saves: $('mod-saves'),
|
||||
print: $('mod-print'),
|
||||
local: $('mod-local'),
|
||||
|
||||
|
|
@ -1120,13 +1121,18 @@
|
|||
toolTaperTip: $('tool-ttip'),
|
||||
toolMetric: $('tool-metric'),
|
||||
|
||||
setMenu: $('set-menu'),
|
||||
settings: $('settings'),
|
||||
settingsBody: $('settingsBody'),
|
||||
settingsList: $('settingsList'),
|
||||
|
||||
layerID: $('layer-id'),
|
||||
layerSpan: $('layer-span'),
|
||||
layerRange: $('layer-range'),
|
||||
slider: $('slider'),
|
||||
sliderMax: $('slider-max'),
|
||||
sliderLo: $('slider-lo'),
|
||||
sliderMid: $('slider-mid'),
|
||||
sliderHi: $('slider-hi'),
|
||||
sliderHold: $('slider-hold'),
|
||||
sliderRange: $('slider-center'),
|
||||
|
||||
loading: $('progress').style,
|
||||
progress: $('progbar').style,
|
||||
|
|
@ -1400,6 +1406,79 @@
|
|||
layerMoves: UC.newBoolean(LANG.la_move, onLayerToggle, {modes:GCODE})
|
||||
});
|
||||
|
||||
// slider setup
|
||||
const slider = UI.sliderRange;
|
||||
const drag = { };
|
||||
function pxToInt(txt) {
|
||||
return txt ? parseInt(txt.substring(0,txt.length-2)) : 0;
|
||||
}
|
||||
function sliderUpdate() {
|
||||
let start = drag.top / drag.maxval;
|
||||
let end = (drag.top + drag.mid - 20) / drag.maxval;
|
||||
API.event.emit('slider.pos', { start, end });
|
||||
API.var.layer_hi = Math.round((1 - start) * API.var.layer_max);
|
||||
API.var.layer_lo = Math.round((1 - end) * API.var.layer_max);
|
||||
API.show.layer();
|
||||
}
|
||||
function dragit(el, delta) {
|
||||
el.onmousedown = (ev) => {
|
||||
tracker.style.display = 'block';
|
||||
ev.stopPropagation();
|
||||
drag.height = slider.clientHeight;
|
||||
drag.maxval = drag.height - 40;
|
||||
drag.start = ev.screenY;
|
||||
drag.hiat = drag.top = pxToInt(UI.sliderHold.style.marginTop);
|
||||
drag.mdat = drag.mid = UI.sliderMid.clientHeight;
|
||||
drag.mdmax = drag.height - 20 - drag.hiat;
|
||||
drag.himax = drag.height - 20 - drag.mdat;
|
||||
tracker.onmousemove = (ev) => {
|
||||
ev.stopPropagation();
|
||||
if (delta) delta(ev.screenY - drag.start);
|
||||
};
|
||||
tracker.onmouseout = tracker.onmouseup = (ev) => {
|
||||
ev.stopPropagation();
|
||||
slider.onmousemove = undefined;
|
||||
tracker.style.display = '';
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
dragit(UI.sliderHi, (delta) => {
|
||||
let midval = drag.mdat - delta;
|
||||
let topval = drag.hiat + delta;
|
||||
if (midval < 20 || topval < 0) {
|
||||
return;
|
||||
}
|
||||
UI.sliderHold.style.marginTop = `${topval}px`;
|
||||
UI.sliderMid.style.height = `${midval}px`;
|
||||
drag.top = topval;
|
||||
drag.mid = midval;
|
||||
sliderUpdate();
|
||||
});
|
||||
dragit(UI.sliderMid, (delta) => {
|
||||
let topoff = Math.max(0, Math.min(drag.himax, drag.hiat + delta));
|
||||
UI.sliderHold.style.marginTop = `${topoff}px`;
|
||||
drag.top = topoff;
|
||||
sliderUpdate();
|
||||
});
|
||||
dragit(UI.sliderLo, (delta) => {
|
||||
let midlen = Math.max(20, Math.min(drag.mdmax, drag.mdat + delta));
|
||||
UI.sliderMid.style.height = `${midlen}px`;
|
||||
drag.mid = midlen;
|
||||
sliderUpdate();
|
||||
});
|
||||
|
||||
API.event.on('slider.set', (values) => {
|
||||
let height = slider.clientHeight;
|
||||
let maxval = height - 40;
|
||||
let start = Math.max(0, Math.min(1, values.start));
|
||||
let end = Math.max(start, Math.min(1, values.end));
|
||||
let topval = start * maxval;
|
||||
let midval = ((end - start) * maxval) + 20;
|
||||
UI.sliderHold.style.marginTop = `${topval}px`;
|
||||
UI.sliderMid.style.height = `${midval}px`;
|
||||
});
|
||||
|
||||
// bind language choices
|
||||
$('lset-en').onclick = function() {
|
||||
SDB.setItem('kiri-lang', 'en-us');
|
||||
|
|
@ -1482,50 +1561,6 @@
|
|||
$('rot_z'), selectionRotate
|
||||
]);
|
||||
|
||||
// UI.layerID.convert = UC.toFloat.bind(UI.layerID);
|
||||
// UI.layerSpan.convert = UC.toFloat.bind(UI.layerSpan);
|
||||
// UI.layerRange.onclick = function() {
|
||||
// UI.layerRange.checked = !(UI.layerRange.checked || false);
|
||||
// API.show.slices();
|
||||
// };
|
||||
//
|
||||
// $('layer-toggle').onclick = function(ev) {
|
||||
// let ls = UI.layers.style;
|
||||
// ls.display = ls.display !== 'block' ? 'block' : 'none';
|
||||
// UI.layers.style.left = ev.target.getBoundingClientRect().left + 'px';
|
||||
// };
|
||||
|
||||
// UI.modelOpacity.onchange = UI.modelOpacity.onclick = function(ev) {
|
||||
// API.widgets.opacity(parseInt(UI.modelOpacity.value)/100);
|
||||
// };
|
||||
//
|
||||
// UI.layerSlider.ondblclick = function() {
|
||||
// UI.layerRange.checked = !UI.layerRange.checked;
|
||||
// API.show.slices();
|
||||
// };
|
||||
//
|
||||
// UI.layerSlider.onmousedown = function(ev) {
|
||||
// if (ev.shiftKey) UI.layerRange.checked = !UI.layerRange.checked;
|
||||
// };
|
||||
//
|
||||
// UI.layerSlider.onclick = function() {
|
||||
// API.show.layer(UI.layerSlider.value);
|
||||
// };
|
||||
//
|
||||
// UI.layerSlider.onmousemove = UI.layerSlider.onchange = function() {
|
||||
// API.show.layer(UI.layerSlider.value);
|
||||
// };
|
||||
//
|
||||
// UI.layerSlider.onmouseup = function() { API.focus() };
|
||||
//
|
||||
// UI.import.setAttribute("import","1");
|
||||
// UI.import.onclick = function() {
|
||||
// UC.hidePoppers();
|
||||
// API.dialog.show("catalog");
|
||||
// };
|
||||
//
|
||||
// $('cache-close').onclick = API.dialog.hide;
|
||||
|
||||
UI.toolMetric.onclick = updateTool;
|
||||
UI.toolType.onchange = updateTool;
|
||||
|
||||
|
|
@ -1541,9 +1576,10 @@
|
|||
$('set-prefs').onclick = () => { API.modal.show('prefs') };
|
||||
$('file-recent').onclick = () => { API.modal.show('files') };
|
||||
$('file-import').onclick = API.event.import;
|
||||
$('act-slice').onclick = API.function.slice;
|
||||
$('act-preview').onclick = API.function.print;
|
||||
$('act-export').onclick = API.function.export;
|
||||
$('lt-action').onclick = API.platform.layout;
|
||||
$('act-slice').onclick = (ev) => { ev.stopPropagation(); API.function.slice() };
|
||||
$('act-preview').onclick = (ev) => { ev.stopPropagation(); API.function.print() };
|
||||
$('act-export').onclick = (ev) => { ev.stopPropagation(); API.function.export() };
|
||||
$('view-arrange').onclick = API.platform.layout;
|
||||
$('view-top').onclick = SPACE.view.top;
|
||||
$('view-home').onclick = SPACE.view.home;
|
||||
|
|
|
|||
206
src/kiri/main.js
206
src/kiri/main.js
|
|
@ -175,9 +175,9 @@
|
|||
SETUP
|
||||
},
|
||||
var: {
|
||||
layer_at: Infinity,
|
||||
layer_max: 0,
|
||||
layer_range: 0
|
||||
layer_lo: 0,
|
||||
layer_hi: 0,
|
||||
layer_max: 0
|
||||
},
|
||||
device: {
|
||||
get: currentDeviceName,
|
||||
|
|
@ -457,8 +457,18 @@
|
|||
return Math.max(min,Math.min(max,v));
|
||||
}
|
||||
|
||||
function setVisibleLayer(v) {
|
||||
showSlices(API.var.layer_at = bound(v, 0, API.var.layer_max));
|
||||
function updateSlider() {
|
||||
API.event.emit("slider.set", {
|
||||
start: 1 - (API.var.layer_hi / API.var.layer_max),
|
||||
end: 1 - (API.var.layer_lo / API.var.layer_max)
|
||||
});
|
||||
}
|
||||
|
||||
function setVisibleLayer(h, l) {
|
||||
API.var.layer_hi = bound(h || API.var.layer_hi, 0, API.var.layer_max);
|
||||
API.var.layer_lo = bound(l || API.var.layer_lo, 0, API.var.layer_hi);
|
||||
updateSlider();
|
||||
showSlices();
|
||||
}
|
||||
|
||||
function meshArray() {
|
||||
|
|
@ -501,7 +511,6 @@
|
|||
}
|
||||
|
||||
function updateSliderMax(set) {
|
||||
return console.log('TODO updateSliderMax');
|
||||
let max = 0;
|
||||
if (viewMode === VIEWS.PREVIEW && currentPrint) {
|
||||
max = currentPrint.getLayerCount();
|
||||
|
|
@ -512,16 +521,10 @@
|
|||
});
|
||||
}
|
||||
max = Math.max(0, max - 1);
|
||||
API.var.layer_max = max;
|
||||
if (UI.layerID.convert() > max || API.var.layer_at > max) {
|
||||
API.var.layer_at = max;
|
||||
UI.layerID.value = max;
|
||||
UI.layerSlider.value = API.var.layer_max;
|
||||
}
|
||||
UI.layerSlider.max = max;
|
||||
if (set) {
|
||||
API.var.layer_at = API.var.layer_max;
|
||||
UI.layerSlider.value = API.var.layer_max;
|
||||
API.var.layer_max = UI.sliderMax.innerText = max;
|
||||
if (set || max < API.var.layer_hi) {
|
||||
API.var.layer_hi = API.var.layer_max;
|
||||
updateSlider();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -536,85 +539,64 @@
|
|||
return showing;
|
||||
}
|
||||
|
||||
function showSlice(index, range, layer) {
|
||||
if (range) {
|
||||
return index <= layer && index > layer-range;
|
||||
} else {
|
||||
return index <= layer;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* hide or show slice-layers and their sub-elements
|
||||
*
|
||||
* @param {number} [layer]
|
||||
*/
|
||||
function showSlices(layer) {
|
||||
showSlider();
|
||||
|
||||
if (typeof(layer) === 'string' || typeof(layer) === 'number') {
|
||||
layer = parseInt(layer);
|
||||
} else {
|
||||
layer = API.var.layer_at;
|
||||
layer = API.var.layer_hi;
|
||||
}
|
||||
|
||||
layer = bound(layer, 0, API.var.layer_max);
|
||||
API.var.layer_hi = layer;
|
||||
|
||||
// UI.layerID.value = layer;
|
||||
// UI.layerSlider.value = layer;
|
||||
let print = UI.layerPrint.checked,
|
||||
moves = UI.layerMoves.checked,
|
||||
cam = MODE === MODES.CAM,
|
||||
hi = cam ? API.var.layer_max - API.var.layer_lo : API.var.layer_hi,
|
||||
lo = cam ? API.var.layer_max - API.var.layer_hi : API.var.layer_lo;
|
||||
|
||||
let j,
|
||||
slice,
|
||||
slices,
|
||||
layers,
|
||||
range = UI.layerRange.checked ? UI.layerSpan.convert() || 1 : 0,
|
||||
print = UI.layerPrint.checked,
|
||||
moves = UI.layerMoves.checked;
|
||||
|
||||
if (MODE === MODES.CAM && API.var.layer_range !== range && range && layer === API.var.layer_max) {
|
||||
layer = 0;
|
||||
}
|
||||
|
||||
API.var.layer_range = range;
|
||||
API.var.layer_at = layer;
|
||||
updateSlider();
|
||||
|
||||
forAllWidgets(function(widget) {
|
||||
if (print) return widget.hideSlices();
|
||||
|
||||
slices = widget.slices;
|
||||
let slices = widget.slices;
|
||||
if (!slices) return;
|
||||
|
||||
for (j = 0; j < slices.length; j++) {
|
||||
slice = slices[j];
|
||||
slice.view.visible = showSlice(j, range, layer);
|
||||
layers = slice.layers;
|
||||
layers.outline.setVisible(
|
||||
MODE === MODES.CAM ?
|
||||
UI.layerOutline.checked && LOCAL :
|
||||
UI.layerOutline.checked
|
||||
for (let j = 0; j < slices.length; j++) {
|
||||
let slice = slices[j];
|
||||
slice.view.visible = j >= lo && j <= hi;
|
||||
let layers = slice.layers;
|
||||
layers.outline.setVisible(cam ?
|
||||
UI.layerOutline.checked && LOCAL :
|
||||
UI.layerOutline.checked
|
||||
);
|
||||
layers.trace.setVisible(
|
||||
MODE === MODES.CAM ?
|
||||
UI.layerRough.checked :
|
||||
UI.layerTrace.checked
|
||||
layers.trace.setVisible(cam ?
|
||||
UI.layerRough.checked :
|
||||
UI.layerTrace.checked
|
||||
);
|
||||
layers.bridge.setVisible(
|
||||
MODE === MODES.CAM ?
|
||||
UI.layerFinishX.checked :
|
||||
UI.layerDelta.checked
|
||||
layers.bridge.setVisible(cam ?
|
||||
UI.layerFinishX.checked :
|
||||
UI.layerDelta.checked
|
||||
);
|
||||
layers.flat.setVisible(
|
||||
MODE === MODES.CAM ?
|
||||
UI.layerFinishY.checked :
|
||||
UI.layerDelta.checked
|
||||
layers.flat.setVisible(cam ?
|
||||
UI.layerFinishY.checked :
|
||||
UI.layerDelta.checked
|
||||
);
|
||||
layers.solid.setVisible(
|
||||
MODE === MODES.CAM ?
|
||||
UI.layerFinish.checked :
|
||||
UI.layerSolid.checked
|
||||
layers.solid.setVisible(cam ?
|
||||
UI.layerFinish.checked :
|
||||
UI.layerSolid.checked
|
||||
);
|
||||
layers.fill.setVisible(
|
||||
MODE === MODES.CAM ?
|
||||
UI.layerFacing.checked :
|
||||
UI.layerFill.checked
|
||||
layers.fill.setVisible(cam ?
|
||||
UI.layerFacing.checked :
|
||||
UI.layerFill.checked
|
||||
);
|
||||
layers.sparse.setVisible(UI.layerSparse.checked);
|
||||
layers.support.setVisible(UI.layerSupport.checked);
|
||||
|
|
@ -623,10 +605,11 @@
|
|||
|
||||
if (currentPrint) {
|
||||
let len = currentPrint.getLayerCount();
|
||||
for (j = 0; j < len; j++) {
|
||||
currentPrint.showLayer(j, print && showSlice(j, range, layer), moves);
|
||||
for (let j = 0; j < len; j++) {
|
||||
currentPrint.showLayer(j, print && j >= lo && j <= hi, moves);
|
||||
}
|
||||
}
|
||||
|
||||
UI.layerPrint.parentNode.style.display = currentPrint ? '' : 'none';
|
||||
UI.layerMoves.parentNode.style.display = currentPrint ? '' : 'none';
|
||||
|
||||
|
|
@ -663,6 +646,7 @@
|
|||
|
||||
function preparePrint(callback) {
|
||||
if (viewMode === VIEWS.PREVIEW) return;
|
||||
hideSlider(true);
|
||||
|
||||
// kick off slicing it hasn't been done already
|
||||
for (let i=0; i < WIDGETS.length; i++) {
|
||||
|
|
@ -738,6 +722,18 @@
|
|||
});
|
||||
}
|
||||
|
||||
function showSlider() {
|
||||
UI.layers.style.display = 'flex';
|
||||
UI.slider.style.display = 'flex';
|
||||
UI.setMenu.style.display = 'none';
|
||||
}
|
||||
|
||||
function hideSlider(andmenu) {
|
||||
UI.layers.style.display = 'none';
|
||||
UI.slider.style.display = 'none';
|
||||
UI.setMenu.style.display = andmenu ? 'none' : 'flex';
|
||||
}
|
||||
|
||||
/**
|
||||
* incrementally slice all meshes then incrementally update them
|
||||
*
|
||||
|
|
@ -750,6 +746,7 @@
|
|||
KIRI.work.snap(API.view.snapshot);
|
||||
}
|
||||
|
||||
hideSlider(true);
|
||||
clearPrint();
|
||||
platform.deselect();
|
||||
setViewMode(VIEWS.SLICE);
|
||||
|
|
@ -758,7 +755,7 @@
|
|||
let firstMesh = true,
|
||||
countdown = WIDGETS.length,
|
||||
preserveMax = API.var.layer_max,
|
||||
preserveLayer = API.var.layer_at,
|
||||
preserveLayer = API.var.layer_hi,
|
||||
totalProgress,
|
||||
track = {},
|
||||
now = UTIL.time();
|
||||
|
|
@ -988,7 +985,9 @@
|
|||
}
|
||||
|
||||
function platformSelect(widget, shift) {
|
||||
if (viewMode !== VIEWS.ARRANGE) return;
|
||||
if (viewMode !== VIEWS.ARRANGE) {
|
||||
return;
|
||||
}
|
||||
let mesh = widget.mesh,
|
||||
sel = (selectedMeshes.indexOf(mesh) >= 0);
|
||||
if (sel) {
|
||||
|
|
@ -1016,23 +1015,23 @@
|
|||
}
|
||||
|
||||
function platformUpdateSelected() {
|
||||
let extruders = settings.device.extruders;
|
||||
let menu_show = platform.selected_count() ? 'flex': '';
|
||||
let ext_show = platform.selected_count() && MODE === 'FDM' ? 'flex': '';
|
||||
UI.scale.style.display = menu_show;
|
||||
UI.rotate.style.display = menu_show;
|
||||
UI.nozzle.style.display = menu_show;
|
||||
UI.nozzle.style.display = extruders && extruders.length > 1 ? menu_show : '';
|
||||
UI.menusep.style.display = menu_show;
|
||||
// $('ext-sel').style.display = (MODE === MODES.FDM) ? 'inline-block' : 'none';
|
||||
let extruders = settings.device.extruders;
|
||||
if (extruders) {
|
||||
for (let i=0; i<extruders.length; i++) {
|
||||
let b = $(`sel-ext-${i}`);
|
||||
if (b) b.classList.remove('buton');
|
||||
if (b) b.classList.remove('pop-sel');
|
||||
}
|
||||
forSelectedWidgets(w => {
|
||||
w.setColor(color.selected, settings);
|
||||
let ext = (settings.widget[w.id] || {}).extruder || 0;
|
||||
let b = $(`sel-ext-${ext}`);
|
||||
if (b) b.classList.add('buton');
|
||||
if (b) b.classList.add('pop-sel');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -1630,7 +1629,7 @@
|
|||
visible = modalShowing(),
|
||||
info = { pct: 0 };
|
||||
|
||||
["help","setup","tools","prefs","files","print","local"].forEach(function(name) {
|
||||
["help","setup","tools","prefs","saves","files","print","local"].forEach(function(name) {
|
||||
UI[name].style.display = name === which ? 'flex' : '';
|
||||
});
|
||||
|
||||
|
|
@ -1738,6 +1737,7 @@
|
|||
for (let k in sp) {
|
||||
if (sp.hasOwnProperty(k)) list.push(k);
|
||||
}
|
||||
console.log({list});
|
||||
list.sort().forEach(function(sk) {
|
||||
let row = DOC.createElement('div'),
|
||||
load = DOC.createElement('button'),
|
||||
|
|
@ -1772,7 +1772,7 @@
|
|||
|
||||
function showSettings() {
|
||||
updateSettingsList();
|
||||
showModal("settings");
|
||||
showModal("saves");
|
||||
}
|
||||
|
||||
function updateDialogLeft() {
|
||||
|
|
@ -1833,15 +1833,14 @@
|
|||
}
|
||||
|
||||
function setFocus(el) {
|
||||
console.log('TODO setFocus')
|
||||
// el = [ el || UI.load, UI.import, UI.ctrlLeft, UI.container, UI.assets, UI.control, UI.modeFDM, UI.reverseZoom, UI.modelOpacity, DOC.body ];
|
||||
// for (let es, i=0; i<el.length; i++) {
|
||||
// es = el[i];
|
||||
// es.focus();
|
||||
// if (DOC.activeElement === es) {
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
el = [ el || UI.load, DOC.body ];
|
||||
for (let es, i=0; i<el.length; i++) {
|
||||
es = el[i];
|
||||
es.focus();
|
||||
if (DOC.activeElement === es) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setViewMode(mode) {
|
||||
|
|
@ -1852,19 +1851,14 @@
|
|||
switch (mode) {
|
||||
case VIEWS.ARRANGE:
|
||||
KIRI.work.clear();
|
||||
hideSlider();
|
||||
clearWidgetCache();
|
||||
showLayerView(false);
|
||||
updateSliderMax();
|
||||
showModeActive(UI.modeArrange);
|
||||
break;
|
||||
case VIEWS.SLICE:
|
||||
showLayerView(true);
|
||||
updateSliderMax();
|
||||
showModeActive(UI.modeSlice);
|
||||
break;
|
||||
case VIEWS.PREVIEW:
|
||||
showLayerView(true);
|
||||
showModeActive(UI.modePreview);
|
||||
break;
|
||||
default:
|
||||
DBUG.log("invalid view mode: "+mode);
|
||||
|
|
@ -1873,23 +1867,8 @@
|
|||
DOC.activeElement.blur();
|
||||
}
|
||||
|
||||
function showModeActive(el) {
|
||||
return console.log('TODO showModeActive');
|
||||
[ UI.modeArrange, UI.modeSlice, UI.modePreview, UI.modeExport ].forEach(function(b) {
|
||||
if (b === el) {
|
||||
b.classList.add('buton');
|
||||
} else {
|
||||
b.classList.remove('buton');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showLayerView(bool) {
|
||||
// UI.layerView.style.display = bool ? 'flex' : 'none';
|
||||
}
|
||||
|
||||
function setExpert(bool) {
|
||||
UC.setExpert(UI.expert.checked = bool);
|
||||
UC.setExpert(UI.expert.checked = settings.controller.expert = bool);
|
||||
}
|
||||
|
||||
function getMode() {
|
||||
|
|
@ -1957,7 +1936,8 @@
|
|||
}
|
||||
|
||||
function setControlsVisible(show) {
|
||||
console.log('TODO setControlsVisible');
|
||||
$('mid-lcol').style.display = show ? 'flex' : 'none';
|
||||
$('mid-rcol').style.display = show ? 'flex' : 'none';
|
||||
}
|
||||
|
||||
// prevent safari from exiting full screen mode
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
--fg-gray: #495057;
|
||||
--bg-gray: rgba(0,0,0,0.25);
|
||||
--gradbar: linear-gradient(to right, #ddd, #666, #ddd);
|
||||
--holdbar: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0));
|
||||
}
|
||||
a, a:hover, a:visited {
|
||||
border: none;
|
||||
|
|
@ -165,6 +166,16 @@ th, tr, td {
|
|||
z-index: 100;
|
||||
}
|
||||
|
||||
#tracker {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
display: none;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
#container {
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
|
|
@ -297,6 +308,9 @@ th, tr, td {
|
|||
border: 1px solid #aaa;
|
||||
color: #000;
|
||||
}
|
||||
.pop-sel {
|
||||
background-color: #ddd !important;
|
||||
}
|
||||
|
||||
.lt-menu {
|
||||
flex-direction: column;
|
||||
|
|
@ -545,38 +559,52 @@ th, tr, td {
|
|||
#slider {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
font-size: smaller;
|
||||
top: 10px;
|
||||
right: 3px;
|
||||
bottom: 5px;
|
||||
bottom: 10px;
|
||||
width: 50px;
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 3px;
|
||||
}
|
||||
#slider > div {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
#slider-begin {
|
||||
#slider-max {
|
||||
background-color: #ccc;
|
||||
border-bottom: 1px solid #aaa;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
#slider-end {
|
||||
#slider-center {
|
||||
background-image: var(--holdbar);
|
||||
}
|
||||
#slider-zero {
|
||||
margin-top: 3px;
|
||||
background-color: #ccc;
|
||||
border-top: 1px solid #aaa;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
#slider-hold {
|
||||
background-color: #ccc;
|
||||
background-color: rgba(0,0,0,0.15);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
border: 3px solid white;
|
||||
top: 0;
|
||||
}
|
||||
#slider-hold .shim {
|
||||
#slider-hold .handle {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background-color: #aaa;
|
||||
border: 1px solid #999;
|
||||
border-radius: 3px;
|
||||
background-color: var(--bg-gray);
|
||||
}
|
||||
#slider-hi {
|
||||
pointer-events: all;
|
||||
}
|
||||
#slider-mid {
|
||||
height: 20px;
|
||||
}
|
||||
#slider-lo {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
#alert-area {
|
||||
|
|
@ -661,8 +689,15 @@ th, tr, td {
|
|||
margin-right: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
#layers .var-row {
|
||||
border-radius: 10px;
|
||||
background-color: #ddd;
|
||||
padding: 2px 5px 2px 5px;
|
||||
margin: 0 2px 0 2px;
|
||||
}
|
||||
.var-row {
|
||||
white-space: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
.var-row label {
|
||||
padding: 2px 4px 2px 0;
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
</head>
|
||||
<body class="col">
|
||||
<div id="container"></div>
|
||||
<div id="tracker"></div>
|
||||
<div id="top" class="row">
|
||||
<div id="app-mode"></div>
|
||||
<div class="grow"></div>
|
||||
|
|
@ -164,7 +165,7 @@
|
|||
<div id="lt-nozzle" class="lt-menu noshow">
|
||||
<i class="fas fa-map-marker"></i>
|
||||
<label>nozzle</label>
|
||||
<div id="pop-nozzle" class="pop-lcol row fillh"></div>
|
||||
<div id="pop-nozzle" class="pop-lcol row fillh russo"></div>
|
||||
</div>
|
||||
<div id="lt-end"></div>
|
||||
</div>
|
||||
|
|
@ -214,6 +215,10 @@
|
|||
<label class="t-group">recent files</label>
|
||||
<div id="catalogList" class="col"></div>
|
||||
</div>
|
||||
<div id="mod-saves" class="mdialog col">
|
||||
<label class="t-group">saved settings</label>
|
||||
<div id="settingsList" class="col"></div>
|
||||
</div>
|
||||
<div id="mod-tools" class="mdialog">
|
||||
<div class="col">
|
||||
<div class="row t-head">
|
||||
|
|
@ -272,19 +277,21 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="mid-rcol" class="col j-center">
|
||||
<div id="set-top" class="set-group"><a>settings</a></div>
|
||||
<div id="settings" class="col"></div>
|
||||
<div id="set-end" class="set-group"></div>
|
||||
<div id="slider" class="col">
|
||||
<div id="slider-begin">0</div>
|
||||
<div id="set-menu" class="col">
|
||||
<div id="set-top" class="set-group"><a>settings</a></div>
|
||||
<div id="settings" class="col"></div>
|
||||
<div id="set-end" class="set-group"></div>
|
||||
</div>
|
||||
<div id="slider" class="col russo">
|
||||
<div id="slider-max">∞</div>
|
||||
<div id="slider-center" class="grow">
|
||||
<div id="slider-hold" class="col a-center">
|
||||
<div id="slider-hold-top" class="shim"></div>
|
||||
<div id="slider-hold-mid"> </div>
|
||||
<div id="slider-hold-bot" class="shim"></div>
|
||||
<div id="slider-hold" class="col xa-center">
|
||||
<div id="slider-hi" class="handle"></div>
|
||||
<div id="slider-mid"> </div>
|
||||
<div id="slider-lo" class="handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="slider-end">∞</div>
|
||||
<div id="slider-zero">0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue