juli/OrcaSlicer
1
1
Fork 0
mirror of https://github.com/OrcaSlicer/OrcaSlicer.git synced 2026-09-28 03:11:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Switched back to jump to setting instead

Browse Source
This commit is contained in:
Lam Wei Lun
2026-09-09 12:26:09 +08:00
parent cae23a933e
commit c3a21fa0d4
6 changed files with 11 additions and 1109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/web/dialog/SpeedDial/speeddial.js
+7 -498
View File
@@ -37,18 +37,6 @@ var tabOptions = []; // [{id,title}] - notebook pages, fetched on entering
// element handles, assigned in OnInit (kept null so load-time touches no DOM)
var qEl = null, listEl = null, favEl = null, clearEl = null, eyeEl = null, countEl = null, headEl = null;
// ---- inline setting editor state ---------------------------------------------
// The "setting" phase (opened by activating a setting action) replaces the list with an editor card
// for one option. phase transitions: commands -> setting -> (apply / open-in-sidebar) -> closed, or
// Esc back to commands. settingDesc is the C++ descriptor; settingRows are the per-index control
// descriptors (1 row for scalars, one per index for vectors); settingFieldEls hold the live controls.
var settingId = ""; // the setting action id being edited
var settingDesc = null; // {id,opt_key,type,title,breadcrumb,category,unit,tooltip,editable,control,cardinality,value|values,index_labels,enum_options,min,max,is_int}
var settingRows = []; // [{index,kind,value,label,enum_options,min,max,unit,is_int}]
var settingFieldEls = []; // [Element...] parallel to settingRows
var settingPreviewIcon = null; // <img> beside the editor title, updated live on dropdown pick
var openDropDownEl = null; // the custom dropdown toggle button whose option list is expanded
// ---- pure helpers (no DOM; unit-tested) -------------------------------------
// Pre-normalized haystacks, cached on the action object. The fold is length-preserving (1:1 per
// char) so the ranges FuzzyRangesNorm returns slice the ORIGINAL title/source text correctly. The
@@ -176,26 +164,6 @@ function shouldRenderActionList(query) {
return !!((query || "").trim());
}
// Label for a closed-enum entry, looked up from its enum_options by value; falls back to the value.
// Pure so the node-vm test can exercise the dropdown label mapping. `value` is the current int value.
function dropdownLabel(options, value) {
var want = String(value == null ? "" : value);
for (var i = 0; i < (options || []).length; i++)
if (String(options[i].value) === want)
return options[i].label != null && options[i].label !== "" ? String(options[i].label) : String(options[i].key != null ? options[i].key : options[i].value);
return want;
}
// Pure: the data:URI pictogram for a dropdown's selected value, or "" when none of the options has
// one (most settings have no pattern icon). Mirrors dropdownLabel so tests can drive it without DOM.
function dropdownIcon(options, value) {
var want = String(value == null ? "" : value);
for (var i = 0; i < (options || []).length; i++)
if (String(options[i].value) === want && options[i].icon)
return options[i].icon;
return "";
}
// Put an action's pattern pictogram into a tile (search row or favourites tile) when it has one,
// otherwise fall back to the monogram. Toggles the has-icon class so CSS neutralises the hue.
function fillTile(tile, a) {
@@ -213,83 +181,6 @@ function fillTile(tile, a) {
}
}
// Per-index control descriptors for the inline setting editor, derived from the C++ descriptor.
// Pure so the node-vm test can exercise the scalar/vector + control mapping without a DOM.
// Values are the current config value(s); vector options get one row per index, each labelled.
function settingControlRows(desc) {
if (!desc || !desc.editable) return [];
var rows = [];
var values = desc.cardinality === "vector" ? (desc.values || []) : [desc.value];
var labels = desc.cardinality === "vector" ? (desc.index_labels || []) : [];
for (var i = 0; i < values.length; i++) {
rows.push({
index: i,
kind: desc.control,
value: values[i],
label: labels[i] != null ? String(labels[i]) : (desc.cardinality === "vector" ? String(i + 1) : null),
enum_options: desc.enum_options || [],
min: typeof desc.min === "number" ? desc.min : null,
max: typeof desc.max === "number" ? desc.max : null,
unit: desc.unit || "",
is_int: !!desc.is_int
});
}
return rows;
}
// Pure: read the value a control would submit back for a setting. `el` is a DOM element (never
// passed in tests). Returns undefined for an unusable value (empty/invalid number, out of range),
// boolean for toggles, number for numeric, string otherwise.
function settingControlValue(row, el) {
if (!row || !el) return undefined;
switch (row.kind) {
case "toggle": return !!el.checked;
case "number": {
var raw = String(el.value || "").trim();
if (raw === "") return undefined;
var n = row.is_int ? parseInt(raw, 10) : parseFloat(raw);
if (!isFinite(n)) return undefined;
if (row.min != null && n < row.min) return undefined;
if (row.max != null && n > row.max) return undefined;
return n;
}
case "dropdown": {
// value is stored on the toggle button's dataset (set when an option is picked).
var v = parseInt(el.dataset ? el.dataset.value : "", 10);
return isFinite(v) ? v : undefined;
}
case "combo": {
// Open enum: free text field (never a select), so read it as the seeded integer value.
var v = parseInt(el.value, 10);
return isFinite(v) ? v : undefined;
}
case "color":
case "text":
case "percent": {
// percent submission is a string ("10%", "0.5"); C++ parses + clamps it. Empty is invalid.
var raw = String(el.value || "").trim();
return raw === "" ? undefined : raw;
}
default: return undefined;
}
}
// Pure: assemble the value payload for a setting from its edited control rows. Returns the scalar
// for scalar settings, an array for vector settings, or undefined when any control is invalid.
function settingCollectedValue(desc, rows, values) {
if (!desc || !desc.editable) return undefined;
if (desc.cardinality === "vector") {
var out = [];
for (var i = 0; i < rows.length; i++) {
var v = settingControlValue(rows[i], values[i]);
if (v === undefined) return undefined;
out.push(v);
}
return out;
}
return settingControlValue(rows[0], values[0]);
}
// The active list for the main phase. A typed query ranks every action (commands/plugins/settings)
// by relevance; an empty query shows the recent list (recents are a mixed bag - no discrimination).
function commandList(actions, recents, query) {
@@ -439,13 +330,9 @@ window.HandleStudio = function (payload) {
lastResizeHeight = next.lastResizeHeight;
phase = next.phase;
tabOptions = next.tabOptions;
// Reset any half-open setting editor (the dialog was closed/reopened), restoring the search.
settingId = ""; settingDesc = null; settingRows = []; settingFieldEls = [];
settingPreviewIcon = null;
openDropDownEl = null;
// why: builtKey caches phase|query so renderCommandsList can skip a rebuild on arrow-nav. It
// survives an apply-then-reopen (which never goes through exitPhase), so without a reset the
// leftover editor card would be mistaken for the empty-query commands list and never rebuilt.
// why: builtKey caches phase|query so renderCommandsList can skip a rebuild on arrow-nav.
// It survives a re-open (which never goes through exitPhase), so without a reset the cached
// empty-query key would skip the rebuild and leave stale list content.
builtKey = "";
if (headEl) headEl.hidden = false;
if (qEl) {
@@ -455,16 +342,6 @@ window.HandleStudio = function (payload) {
}
render({ resize: true, resetScroll: true });
focusInput();
} else if (payload.command === "setting_descriptor") {
// Inline editor loaded: render the card. Guard against a stale response for a different id.
if (payload.descriptor && payload.descriptor.id === settingId)
settingDesc = payload.descriptor;
render({ resize: true });
// why: keyboard focus must land on the field after the card is built, not stay on the hidden
// search input. fire on a timeout so the element is attached and its content selectable.
focusSettingEditor();
} else if (payload.command === "apply_failed") {
flashHint("Couldn't apply that value");
} else if (payload.command === "tab_results") {
tabOptions = payload.tabs || [];
if (sel.zone === "list")
@@ -649,7 +526,6 @@ function updateFavEyebrow(favs) {
eyeEl.hidden = !a;
}
// One settings row; has no star/tile because settings aren't pinnable.
// A command/action row - used for search results, recents, and (because settings are actions now)
// the setting options too. All rows are pinnable, so every row carries a star.
function renderActionRow(a, i) {
@@ -864,349 +740,11 @@ function renderPercentList() {
listEl.appendChild(ph);
}
// ---- inline setting editor (DOM stage) ---------------------------------------
// Collapse every open custom dropdown except `keep` (null collapses all). The menu list elements
// are the .ed-dropdown-menu siblings of the toggle buttons we track via openDropDownEl.
function closeOtherDropDowns(keep) {
if (openDropDownEl && openDropDownEl !== keep && openDropDownEl.parentNode) {
var m = openDropDownEl.parentNode.querySelector(".ed-dropdown-menu");
if (m) m.hidden = true;
openDropDownEl.classList.remove("open");
}
if (!keep)
openDropDownEl = null;
}
// Collapse the currently open dropdown, if any (kept for the editor's export/import-adjacent helpers).
function closeEditorDropDown() { closeOtherDropDowns(null); }
// Place an open dropdown menu as a fixed overlay just under its toggle, so the menu floats over the
// card (never resizing it) and is clamped to the popup's bottom edge with an internal scrollbar for
// long option lists. position:fixed escapes the card/launcher overflow clipping that an absolute
// menu would otherwise hit, keeping every option reachable within the window.
function positionDropDownMenu(btn, menu) {
var lrect = (document.querySelector(".launcher") || { getBoundingClientRect: function () { return { top: 0, bottom: window.innerHeight }; } }).getBoundingClientRect();
var rect = btn.getBoundingClientRect();
// Available room above and below the toggle, within the popup. Opening the menu must not push it
// past the window edge (that's the unreachable-overflow bug) - pick whichever side has more room
// and clamp the box to it. Overflow-y:auto scrolls any long list inside the menu itself.
var spaceBelow = lrect.bottom - (rect.bottom + 8);
var spaceAbove = (rect.top - 8) - lrect.top;
var openUp = spaceBelow < spaceAbove;
var maxH = Math.max(0, Math.min(openUp ? spaceAbove : spaceBelow, 200));
menu.style.position = "fixed";
menu.style.width = rect.width + "px";
menu.style.left = rect.left + "px";
menu.style.maxHeight = maxH + "px";
if (openUp) {
// bottom edge sits just above the toggle; the box grows upward to content height.
menu.style.top = "auto";
menu.style.bottom = (lrect.bottom - rect.top + 4) + "px";
} else {
menu.style.top = (rect.bottom + 4) + "px";
menu.style.bottom = "auto";
}
}
// Build the control element for one row (toggle/number/dropdown/combo/text/color) and seed it with
// the current value. Returns {el, node, extra} - node is what is appended, extra carries a datalist.
function settingInputFor(row) {
var el;
if (row.kind === "toggle") {
el = document.createElement("input");
el.type = "checkbox";
el.checked = !!row.value;
var sw = document.createElement("label");
sw.className = "ed-switch";
sw.appendChild(el);
var slider = document.createElement("span");
slider.className = "ed-slider";
sw.appendChild(slider);
return { el: el, node: sw };
}
if (row.kind === "number") {
el = document.createElement("input");
el.type = "number";
el.step = row.is_int ? 1 : "any";
if (row.min != null) el.min = row.min;
if (row.max != null) el.max = row.max;
if (row.value != null && row.value !== "") el.value = row.value;
return { el: el, node: el };
}
if (row.kind === "dropdown") {
// Native <select> popups are unreliable inside this wxWebView (a click synthesizes a
// keydown that can reach the global Enter handler and apply+close). Build a custom
// dropdown: a toggle button that expands an in-flow option list. Selection only updates
// local state; nothing applies until Enter/Apply. The value lives on the toggle button's
// dataset so settingControlValue can read it back without the DOM copy.
var wrap = document.createElement("div");
wrap.className = "ed-dropdown";
var btn = document.createElement("button");
btn.type = "button";
btn.className = "ed-dropdown-toggle";
btn.dataset.value = row.value != null ? String(row.value) : "";
// The selected value's pattern pictogram (hidden when the value has none).
var toggleIcon = document.createElement("img");
toggleIcon.className = "ed-dropdown-icon";
toggleIcon.setAttribute("aria-hidden", "true");
toggleIcon.alt = "";
var tIcon = dropdownIcon(row.enum_options || [], row.value);
toggleIcon.src = tIcon || "";
toggleIcon.hidden = !tIcon;
btn.appendChild(toggleIcon);
var label = document.createElement("span");
label.className = "ed-dropdown-label";
label.textContent = dropdownLabel(row.enum_options || [], row.value);
btn.appendChild(label);
var caret = document.createElement("span");
caret.className = "ed-dropdown-caret";
caret.textContent = "▾";
btn.appendChild(caret);
var listEl = document.createElement("div");
listEl.className = "ed-dropdown-menu";
listEl.hidden = true;
(row.enum_options || []).forEach(function (o, oi) {
var opt = document.createElement("button");
opt.type = "button";
opt.className = "ed-dropdown-option";
if (o.icon) {
var img = document.createElement("img");
img.className = "ed-option-icon";
img.src = o.icon;
img.alt = "";
img.setAttribute("aria-hidden", "true");
opt.appendChild(img);
}
var optLabel = document.createElement("span");
optLabel.className = "ed-option-label";
optLabel.textContent = o.label;
opt.appendChild(optLabel);
if (String(o.value) === String(row.value))
opt.classList.add("sel");
opt.onclick = function (ev) {
ev.stopPropagation();
btn.dataset.value = String(o.value);
label.textContent = o.label;
toggleIcon.src = o.icon || "";
toggleIcon.hidden = !o.icon;
listEl.hidden = true;
btn.classList.remove("open");
openDropDownEl = null;
onSettingValueChanged(settingDesc, o);
};
listEl.appendChild(opt);
});
btn.onclick = function (ev) {
ev.stopPropagation();
if (openDropDownEl === btn) {
// clicking the open toggle closes it
listEl.hidden = true;
btn.classList.remove("open");
openDropDownEl = null;
return;
}
closeOtherDropDowns(null); // collapse any other open dropdown
positionDropDownMenu(btn, listEl);
listEl.hidden = false;
btn.classList.add("open");
openDropDownEl = btn;
};
wrap.appendChild(btn);
wrap.appendChild(listEl);
return { el: btn, node: wrap };
}
if (row.kind === "combo") {
el = document.createElement("input");
el.type = "text";
var dl = document.createElement("datalist");
el.setAttribute("list", dl.id = "ed-combo-" + row.index);
(row.enum_options || []).forEach(function (o) {
var op = document.createElement("option");
op.value = o.value;
op.textContent = o.label;
dl.appendChild(op);
});
el.value = row.value != null ? String(row.value) : "";
return { el: el, node: el, extra: dl };
}
if (row.kind === "color") {
el = document.createElement("input");
el.type = "color";
el.value = row.value && /^#[0-9a-fA-F]{6}$/.test(row.value) ? row.value : "#000000";
return { el: el, node: el };
}
if (row.kind === "percent") {
// "mm or %" (coFloatOrPercent/coFloatsOrPercents): a free-text field showing the serialized
// value (e.g. "10%" or "0.5"). The unit hints at the sidebar semantics (mm or %), so it's
// not shown here - the value itself carries the % when applicable.
el = document.createElement("input");
el.type = "text";
el.value = row.value != null ? String(row.value) : "";
return { el: el, node: el };
}
// text
el = document.createElement("input");
el.type = "text";
el.value = row.value != null ? String(row.value) : "";
return { el: el, node: el };
}
// One labeled control row in the editor card.
function renderControlRow(row, i) {
var wrap = document.createElement("div");
wrap.className = "editor-row";
if (row.label != null) {
var lab = document.createElement("label");
lab.className = "editor-label";
lab.textContent = row.label;
wrap.appendChild(lab);
}
var ctrl = settingInputFor(row);
if (ctrl.extra)
wrap.appendChild(ctrl.extra); // datalist for open-enum combos
wrap.appendChild(ctrl.node);
if (row.unit) {
var unit = document.createElement("span");
unit.className = "editor-unit";
unit.textContent = row.unit;
wrap.appendChild(unit);
}
settingFieldEls[i] = ctrl.el;
return wrap;
}
// Render the editor card into listEl (phase === "setting"). Keeps the search head hidden so the
// card owns the layout.
function renderSettingStage() {
listEl.innerHTML = "";
listEl.className = "dial-list setting";
if (countEl) countEl.hidden = true;
if (!settingDesc || !settingDesc.opt_key) {
var ph = document.createElement("div");
ph.className = "dial-empty";
ph.textContent = "Loading…";
listEl.appendChild(ph);
return;
}
var card = document.createElement("div");
card.className = "dial-editor";
if (settingDesc.breadcrumb) {
var crumb = document.createElement("div");
crumb.className = "row-eyebrow";
crumb.textContent = settingDesc.breadcrumb;
card.appendChild(crumb);
}
var titleRow = document.createElement("div");
titleRow.className = "editor-title-row";
var titleIcon = document.createElement("img");
titleIcon.className = "editor-preview-icon";
titleIcon.setAttribute("aria-hidden", "true");
titleIcon.alt = "";
var pIcon = dropdownIcon(settingDesc.enum_options || [], settingDesc.value);
titleIcon.src = pIcon || "";
titleIcon.hidden = !pIcon;
titleRow.appendChild(titleIcon);
settingPreviewIcon = titleIcon;
var title = document.createElement("div");
title.className = "editor-title";
title.textContent = settingDesc.title || "";
titleRow.appendChild(title);
card.appendChild(titleRow);
if (settingDesc.tooltip) {
var tt = document.createElement("div");
tt.className = "editor-tooltip";
tt.textContent = settingDesc.tooltip;
card.appendChild(tt);
}
var actions = document.createElement("div");
actions.className = "editor-actions";
if (settingDesc.editable) {
settingRows = settingControlRows(settingDesc);
settingFieldEls = [];
if (settingRows.length) {
settingRows.forEach(function (row, i) { card.appendChild(renderControlRow(row, i)); });
} else {
var empty = document.createElement("div");
empty.className = "dial-empty";
empty.textContent = "Nothing editable here";
card.appendChild(empty);
}
var apply = document.createElement("button");
apply.className = "ed-btn ed-btn-primary";
apply.textContent = "Apply";
apply.onclick = applySetting;
actions.appendChild(apply);
} else {
var ro = document.createElement("div");
ro.className = "editor-readonly";
ro.textContent = "This setting can't be edited here";
card.appendChild(ro);
var open = document.createElement("button");
open.className = "ed-btn";
open.textContent = "Open in sidebar";
open.onclick = openSettingInSidebar;
actions.appendChild(open);
}
var cancel = document.createElement("button");
cancel.className = "ed-btn";
cancel.textContent = "Cancel";
cancel.onclick = exitPhase;
actions.appendChild(cancel);
card.appendChild(actions);
var hint = document.createElement("div");
hint.className = "editor-hint";
hint.textContent = "Enter to apply · Esc to cancel";
card.appendChild(hint);
listEl.appendChild(card);
}
function applySetting() {
if (!settingDesc || !settingDesc.editable) return;
var value = settingCollectedValue(settingDesc, settingRows, settingFieldEls);
if (value === undefined) {
flashHint("Enter a valid value");
return;
}
SendMessage({ command: "set_setting", id: settingId, value: value });
}
function openSettingInSidebar() {
if (!settingDesc) return;
SendMessage({ command: "open_setting_in_sidebar", opt_key: settingDesc.opt_key, type: settingDesc.type, category: settingDesc.category || "" });
}
// When a dropdown option is picked, mirror its pattern pictogram onto the editor title's preview so
// the current selection is visible without opening the menu. Non-enum / icon-less rows no-op.
function onSettingValueChanged(desc, option) {
if (!settingPreviewIcon) return;
var icon = (option && option.icon) || "";
settingPreviewIcon.src = icon;
settingPreviewIcon.hidden = !icon;
}
function enterSettingPhase(a) {
if (!a) return;
phase = "setting";
query = ""; qEl.value = ""; syncClearButton();
sel = { zone: "list", i: 0 };
settingId = a.id;
settingDesc = null;
settingRows = [];
settingFieldEls = [];
if (headEl) headEl.hidden = true;
render({ resetScroll: true });
SendMessage({ command: "setting_descriptor", id: a.id });
}
function renderList() {
if (phase === "tab")
renderTabList();
else if (phase === "percent")
renderPercentList();
else if (phase === "setting")
renderSettingStage();
else
renderCommandsList();
}
@@ -1284,7 +822,6 @@ function activateEntry(a) {
if (!a) return;
if (a.input === "percent") { enterPercentPhase(); return; }
if (a.input === "tab") { enterTabsPhase(); return; }
if (a.input === "setting") { enterSettingPhase(a); return; }
run(a);
}
@@ -1337,14 +874,11 @@ function enterTabsPhase() {
function exitPhase() {
phase = "commands"; tabOptions = []; query = ""; qEl.value = "";
settingId = ""; settingDesc = null; settingRows = []; settingFieldEls = [];
settingPreviewIcon = null;
closeOtherDropDowns(null);
if (headEl) headEl.hidden = false;
sel = { zone: "list", i: 0 };
// why: builtKey caches phase|query so renderCommandsList can skip a rebuild on arrow-nav/click.
// Leftover from the setting phase it matches the (empty-query) commands key, which would skip
// the rebuild and leave the editor card in the list. Reset it so the commands view is rebuilt.
// It survives a second-phase exit (which never goes through exitPhase from the commands view),
// so without a reset the cached empty-query key would skip the rebuild and leave stale content.
builtKey = "";
qEl.placeholder = "Search " + ACTIONS.length + " actions";
syncClearButton();
@@ -1354,19 +888,6 @@ function exitPhase() {
function focusInput() { setTimeout(function () { if (qEl) qEl.focus(); }, 0); }
// Move keyboard focus onto the first editable field of the setting editor card. Deferred so the
// element is attached and its text is selectable by the time we focus it. For text-editable inputs
// also select the existing value so the user can type straight over it.
function focusSettingEditor() {
setTimeout(function () {
var el = settingFieldEls && settingFieldEls[0];
if (!el) return;
if (el.focus) el.focus();
if ((el.tagName === "INPUT") && el.select)
el.select();
}, 0);
}
// ---- init --------------------------------------------------------------------
function OnInit() {
qEl = $("q"); listEl = $("list"); favEl = $("favBar"); clearEl = $("clear"); eyeEl = $("favEyebrow"); countEl = $("count");
@@ -1397,21 +918,10 @@ function OnInit() {
// why: dismiss the fav context menu on any click/scroll away from it (capture scroll to catch nested scrollers).
document.addEventListener("click", hideFavMenu);
// Dismiss an open editor dropdown on any outside click. Toggle/option clicks stopPropagation
// so they don't immediately close the menu they just opened/picked from.
document.addEventListener("click", function () {
if (openDropDownEl) closeEditorDropDown();
});
document.addEventListener("scroll", hideFavMenu, true);
document.addEventListener("keydown", function (e) {
if (favMenuEl && !favMenuEl.hidden && e.key === "Escape") { e.preventDefault(); hideFavMenu(); return; }
// While an editor dropdown menu is open it owns the keys: Escape closes the menu (a second
// Esc exits the phase), Enter/arrows select options natively, and we must not apply/exit.
if (phase === "setting" && openDropDownEl && openDropDownEl.parentNode) {
if (e.key === "Escape") { e.preventDefault(); closeEditorDropDown(); }
return;
}
// Quick-launch a numbered favourite: Alt/Option + digit (0 = the 10th). Only in the
// commands phase, where the pinned bar is shown.
if (phase === "commands" && e.altKey && !e.ctrlKey && !e.metaKey) {
@@ -1432,8 +942,8 @@ function OnInit() {
// let Left/Right fall through so they move the caret in the focused search field.
var lr = e.key === "ArrowLeft" || e.key === "ArrowRight";
if (e.key === "ArrowDown" || e.key === "ArrowUp" || (lr && sel.zone === "fav")) {
// In the percent/setting phases the input controls own the caret - arrows edit text, not rows.
if (phase === "percent" || phase === "setting") return;
// In the percent phase the input control owns the caret - arrows edit text, not rows.
if (phase === "percent") return;
e.preventDefault();
sel = nextSel(sel, e.key, list.length, favs.length);
// why: entering/leaving the fav zone toggles the eyebrow line, changing launcher height;
@@ -1442,7 +952,6 @@ function OnInit() {
} else if (e.key === "Enter") {
e.preventDefault();
if (phase === "percent") runJumpToLayer(query.trim());
else if (phase === "setting") applySetting();
else runSelected();
} else if (e.key === "Escape") {
e.preventDefault();