Files
dusk/assets/scripts/Crop.js
T
YourWishes b639bc6c4f Reimplement the archived UI widget stack on the new element-tree system
The old widget system (archive/dusk/ui/) depended on infrastructure this
rewrite deleted -- a static X-macro element list, a 9-slice UI_FRAME, and
a global gamepad/keyboard focus stack -- so everything below is rebuilt
on top of the new native uielement_t pool + parent/child tree instead,
gamepad/keyboard-only (no mouse support exists in the input system).

New JS widgets (assets/scripts/), all pure composites of Label/Rectangle
following the Button.js pattern: Checkbox, Tab, Slider, Dropdown. Slider/
Dropdown expose a directionInput(dx, dy) hook so a menu can hand them
LEFT/RIGHT before falling back to cursor movement.

New Menu.js replaces the old global uifocus_t stack: a small push/pop
stack of Menu instances where only the topmost consumes CANCEL/ACCEPT/
direction input each tick (needed for nested modals -- a Settings
sub-page menu plus a "discard changes?" Confirm can be open at once).
Held-direction repeat timing matches the old 0.5s delay / 0.1s repeat.

New overlay composites (added via a new UI.addOverlay()/UI.removeOverlay(),
always drawn/updated after normal roots): FpsCounter, ConsoleOverlay
(one Label per console history line, driven directly rather than via
add() since History (16) exceeds the 8-children-per-element cap), Crop
(letterbox/pillarbox bars), and Fullbox (a reusable tweened full-screen
fade covering both the old fullbox and transition effects -- reuses
shared instances rather than allocate-and-dispose, since disposing an
element from inside its own render() callback risks the same JerryScript
refcount corruption hit earlier in this rewrite).

New Confirm.js (Yes/No dialog) and Settings.js (+ SettingsGeneral/
SettingsInput sub-pages) built on Menu. Display/Audio settings pages are
intentionally not ported -- neither had a real backing engine system
even in the old code. Frame is a flat Rectangle for now, not real 9-slice
(a genuinely bigger native lift, deliberately deferred).

Small native binding additions needed by the above, each with its own
unit test: Time.renderDelta, Console.lineCount/getLine/visible/
consumeDirty, a new Screen module, a new Locale module, Input.deadzone,
a new Save module, and Label.color (was missing entirely). Also fixes
a real gap from the UI.addOverlay() work: uiElementDispose() wasn't
removing disposed elements from the new overlay root array, which would
have left dangling ids behind.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-14 09:05:11 -05:00

65 lines
1.7 KiB
JavaScript

// Copyright (c) 2026 Dominic Masters
//
// This software is released under the MIT License.
// https://opensource.org/licenses/MIT
// Up to 4 black letterbox/pillarbox bars sized from Screen.scanX/Y/
// scanWidth/scanHeight vs Screen.width/height. Recomputed every tick,
// unconditionally -- cheap (four rectangle field writes), and a no-op
// when the scan area already covers the full viewport (Rectangle
// already skips rendering at width/height <= 0).
class Crop extends UIElement {
init() {
this.top = new Rectangle();
this.bottom = new Rectangle();
this.left = new Rectangle();
this.right = new Rectangle();
this.top.color = Crop.COLOR_BARS;
this.bottom.color = Crop.COLOR_BARS;
this.left.color = Crop.COLOR_BARS;
this.right.color = Crop.COLOR_BARS;
this.add(this.top);
this.add(this.bottom);
this.add(this.left);
this.add(this.right);
}
update() {
this.updateChildren();
this._refresh();
}
_refresh() {
const scanX = Screen.scanX;
const scanY = Screen.scanY;
const scanRight = scanX + Screen.scanWidth;
const scanBottom = scanY + Screen.scanHeight;
this.top.x = 0;
this.top.y = 0;
this.top.width = Screen.width;
this.top.height = scanY;
this.bottom.x = 0;
this.bottom.y = scanBottom;
this.bottom.width = Screen.width;
this.bottom.height = Screen.height - scanBottom;
this.left.x = 0;
this.left.y = scanY;
this.left.width = scanX;
this.left.height = Screen.scanHeight;
this.right.x = scanRight;
this.right.y = scanY;
this.right.width = Screen.width - scanRight;
this.right.height = Screen.scanHeight;
}
}
Crop.COLOR_BARS = { r: 0, g: 0, b: 0, a: 255 };
module.exports = Crop;