@opentui/core 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/3d.js +553 -235
- package/README.md +4 -4
- package/Renderable.d.ts +6 -3
- package/index.d.ts +1 -0
- package/index.js +359 -272
- package/lib/TrackedNode.d.ts +0 -1
- package/package.json +8 -8
- package/renderables/ASCIIFont.d.ts +1 -1
- package/renderables/Input.d.ts +23 -20
- package/renderables/Select.d.ts +37 -25
- package/renderables/TabSelect.d.ts +1 -1
- package/renderables/Text.d.ts +1 -1
- package/LICENSE +0 -21
package/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// src/Renderable.ts
|
|
3
3
|
import { EventEmitter as EventEmitter3 } from "events";
|
|
4
4
|
|
|
5
|
-
// node_modules/yoga-layout/dist/binaries/yoga-wasm-base64-esm.js
|
|
5
|
+
// ../../node_modules/yoga-layout/dist/binaries/yoga-wasm-base64-esm.js
|
|
6
6
|
var loadYoga = (() => {
|
|
7
7
|
var _scriptDir = import.meta.url;
|
|
8
8
|
return function(loadYoga2) {
|
|
@@ -1307,7 +1307,7 @@ var loadYoga = (() => {
|
|
|
1307
1307
|
})();
|
|
1308
1308
|
var yoga_wasm_base64_esm_default = loadYoga;
|
|
1309
1309
|
|
|
1310
|
-
// node_modules/yoga-layout/dist/src/generated/YGEnums.js
|
|
1310
|
+
// ../../node_modules/yoga-layout/dist/src/generated/YGEnums.js
|
|
1311
1311
|
var Align = /* @__PURE__ */ function(Align2) {
|
|
1312
1312
|
Align2[Align2["Auto"] = 0] = "Auto";
|
|
1313
1313
|
Align2[Align2["FlexStart"] = 1] = "FlexStart";
|
|
@@ -1510,7 +1510,7 @@ var constants = {
|
|
|
1510
1510
|
};
|
|
1511
1511
|
var YGEnums_default = constants;
|
|
1512
1512
|
|
|
1513
|
-
// node_modules/yoga-layout/dist/src/wrapAssembly.js
|
|
1513
|
+
// ../../node_modules/yoga-layout/dist/src/wrapAssembly.js
|
|
1514
1514
|
function wrapAssembly(lib) {
|
|
1515
1515
|
function patch(prototype, name, fn) {
|
|
1516
1516
|
const original = prototype[name];
|
|
@@ -1612,7 +1612,7 @@ function wrapAssembly(lib) {
|
|
|
1612
1612
|
};
|
|
1613
1613
|
}
|
|
1614
1614
|
|
|
1615
|
-
// node_modules/yoga-layout/dist/src/index.js
|
|
1615
|
+
// ../../node_modules/yoga-layout/dist/src/index.js
|
|
1616
1616
|
var Yoga = wrapAssembly(await yoga_wasm_base64_esm_default());
|
|
1617
1617
|
var src_default = Yoga;
|
|
1618
1618
|
|
|
@@ -1626,7 +1626,6 @@ class TrackedNode extends EventEmitter {
|
|
|
1626
1626
|
metadata;
|
|
1627
1627
|
parent;
|
|
1628
1628
|
children;
|
|
1629
|
-
zIndex;
|
|
1630
1629
|
_destroyed = false;
|
|
1631
1630
|
_width = "auto";
|
|
1632
1631
|
_height = "auto";
|
|
@@ -1637,7 +1636,6 @@ class TrackedNode extends EventEmitter {
|
|
|
1637
1636
|
this.metadata = metadata;
|
|
1638
1637
|
this.parent = null;
|
|
1639
1638
|
this.children = [];
|
|
1640
|
-
this.zIndex = 0;
|
|
1641
1639
|
}
|
|
1642
1640
|
parseWidth(width) {
|
|
1643
1641
|
if (this._destroyed) {
|
|
@@ -1694,9 +1692,6 @@ class TrackedNode extends EventEmitter {
|
|
|
1694
1692
|
childNode.parent = this;
|
|
1695
1693
|
const index = this.children.length;
|
|
1696
1694
|
this.children.push(childNode);
|
|
1697
|
-
if (!childNode.zIndex) {
|
|
1698
|
-
childNode.zIndex = this.zIndex + 100;
|
|
1699
|
-
}
|
|
1700
1695
|
this.yogaNode.insertChild(childNode.yogaNode, index);
|
|
1701
1696
|
try {
|
|
1702
1697
|
childNode.yogaNode.setWidth(childNode.parseWidth(childNode._width));
|
|
@@ -1749,7 +1744,6 @@ class TrackedNode extends EventEmitter {
|
|
|
1749
1744
|
childNode.parent.removeChild(childNode);
|
|
1750
1745
|
}
|
|
1751
1746
|
childNode.parent = this;
|
|
1752
|
-
childNode.zIndex = this.zIndex + 100;
|
|
1753
1747
|
const boundedIndex = Math.max(0, Math.min(index, this.children.length));
|
|
1754
1748
|
this.children.splice(boundedIndex, 0, childNode);
|
|
1755
1749
|
this.yogaNode.insertChild(childNode.yogaNode, boundedIndex);
|
|
@@ -2254,38 +2248,8 @@ class Renderable extends EventEmitter3 {
|
|
|
2254
2248
|
if (options.maxHeight !== undefined) {
|
|
2255
2249
|
node.setMaxHeight(options.maxHeight);
|
|
2256
2250
|
}
|
|
2257
|
-
|
|
2258
|
-
|
|
2259
|
-
if (top !== undefined)
|
|
2260
|
-
node.setMargin(Edge.Top, top);
|
|
2261
|
-
if (right !== undefined)
|
|
2262
|
-
node.setMargin(Edge.Right, right);
|
|
2263
|
-
if (bottom !== undefined)
|
|
2264
|
-
node.setMargin(Edge.Bottom, bottom);
|
|
2265
|
-
if (left !== undefined)
|
|
2266
|
-
node.setMargin(Edge.Left, left);
|
|
2267
|
-
} else if (options.margin !== undefined) {
|
|
2268
|
-
node.setMargin(Edge.Top, options.margin);
|
|
2269
|
-
node.setMargin(Edge.Right, options.margin);
|
|
2270
|
-
node.setMargin(Edge.Bottom, options.margin);
|
|
2271
|
-
node.setMargin(Edge.Left, options.margin);
|
|
2272
|
-
}
|
|
2273
|
-
if (typeof options.padding === "object") {
|
|
2274
|
-
const { top, right, bottom, left } = options.padding;
|
|
2275
|
-
if (top !== undefined)
|
|
2276
|
-
node.setPadding(Edge.Top, top);
|
|
2277
|
-
if (right !== undefined)
|
|
2278
|
-
node.setPadding(Edge.Right, right);
|
|
2279
|
-
if (bottom !== undefined)
|
|
2280
|
-
node.setPadding(Edge.Bottom, bottom);
|
|
2281
|
-
if (left !== undefined)
|
|
2282
|
-
node.setPadding(Edge.Left, left);
|
|
2283
|
-
} else if (options.padding !== undefined) {
|
|
2284
|
-
node.setPadding(Edge.Top, options.padding);
|
|
2285
|
-
node.setPadding(Edge.Right, options.padding);
|
|
2286
|
-
node.setPadding(Edge.Bottom, options.padding);
|
|
2287
|
-
node.setPadding(Edge.Left, options.padding);
|
|
2288
|
-
}
|
|
2251
|
+
this.margin = options.margin;
|
|
2252
|
+
this.padding = options.padding;
|
|
2289
2253
|
}
|
|
2290
2254
|
setPosition(position) {
|
|
2291
2255
|
this._position = position;
|
|
@@ -2375,6 +2339,46 @@ class Renderable extends EventEmitter3 {
|
|
|
2375
2339
|
this.layoutNode.yogaNode.setMaxHeight(maxHeight);
|
|
2376
2340
|
this.requestLayout();
|
|
2377
2341
|
}
|
|
2342
|
+
set margin(margin) {
|
|
2343
|
+
const node = this.layoutNode.yogaNode;
|
|
2344
|
+
if (typeof margin === "object") {
|
|
2345
|
+
const { top, right, bottom, left } = margin;
|
|
2346
|
+
if (top !== undefined)
|
|
2347
|
+
node.setMargin(Edge.Top, top);
|
|
2348
|
+
if (right !== undefined)
|
|
2349
|
+
node.setMargin(Edge.Right, right);
|
|
2350
|
+
if (bottom !== undefined)
|
|
2351
|
+
node.setMargin(Edge.Bottom, bottom);
|
|
2352
|
+
if (left !== undefined)
|
|
2353
|
+
node.setMargin(Edge.Left, left);
|
|
2354
|
+
} else if (margin !== undefined) {
|
|
2355
|
+
node.setMargin(Edge.Top, margin);
|
|
2356
|
+
node.setMargin(Edge.Right, margin);
|
|
2357
|
+
node.setMargin(Edge.Bottom, margin);
|
|
2358
|
+
node.setMargin(Edge.Left, margin);
|
|
2359
|
+
}
|
|
2360
|
+
this.requestLayout();
|
|
2361
|
+
}
|
|
2362
|
+
set padding(padding) {
|
|
2363
|
+
const node = this.layoutNode.yogaNode;
|
|
2364
|
+
if (typeof padding === "object") {
|
|
2365
|
+
const { top, right, bottom, left } = padding;
|
|
2366
|
+
if (top !== undefined)
|
|
2367
|
+
node.setPadding(Edge.Top, top);
|
|
2368
|
+
if (right !== undefined)
|
|
2369
|
+
node.setPadding(Edge.Right, right);
|
|
2370
|
+
if (bottom !== undefined)
|
|
2371
|
+
node.setPadding(Edge.Bottom, bottom);
|
|
2372
|
+
if (left !== undefined)
|
|
2373
|
+
node.setPadding(Edge.Left, left);
|
|
2374
|
+
} else if (padding !== undefined) {
|
|
2375
|
+
node.setPadding(Edge.Top, padding);
|
|
2376
|
+
node.setPadding(Edge.Right, padding);
|
|
2377
|
+
node.setPadding(Edge.Bottom, padding);
|
|
2378
|
+
node.setPadding(Edge.Left, padding);
|
|
2379
|
+
}
|
|
2380
|
+
this.requestLayout();
|
|
2381
|
+
}
|
|
2378
2382
|
getLayoutNode() {
|
|
2379
2383
|
return this.layoutNode;
|
|
2380
2384
|
}
|
|
@@ -2439,10 +2443,7 @@ class Renderable extends EventEmitter3 {
|
|
|
2439
2443
|
}
|
|
2440
2444
|
this.needsUpdate();
|
|
2441
2445
|
}
|
|
2442
|
-
|
|
2443
|
-
if (this.renderableMap.has(obj.id)) {
|
|
2444
|
-
this.remove(obj.id);
|
|
2445
|
-
}
|
|
2446
|
+
replaceParent(obj) {
|
|
2446
2447
|
if (obj.parent) {
|
|
2447
2448
|
obj.parent.remove(obj.id);
|
|
2448
2449
|
}
|
|
@@ -2450,13 +2451,40 @@ class Renderable extends EventEmitter3 {
|
|
|
2450
2451
|
if (this.ctx) {
|
|
2451
2452
|
obj.propagateContext(this.ctx);
|
|
2452
2453
|
}
|
|
2453
|
-
|
|
2454
|
+
}
|
|
2455
|
+
add(obj, index) {
|
|
2456
|
+
if (this.renderableMap.has(obj.id)) {
|
|
2457
|
+
console.warn(`A renderable with id ${obj.id} already exists in ${this.id}, removing it`);
|
|
2458
|
+
this.remove(obj.id);
|
|
2459
|
+
}
|
|
2460
|
+
this.replaceParent(obj);
|
|
2461
|
+
const childLayoutNode = obj.getLayoutNode();
|
|
2462
|
+
let insertedIndex;
|
|
2463
|
+
if (index !== undefined) {
|
|
2464
|
+
this.renderableArray.splice(index, 0, obj);
|
|
2465
|
+
insertedIndex = this.layoutNode.insertChild(childLayoutNode, index);
|
|
2466
|
+
} else {
|
|
2467
|
+
this.renderableArray.push(obj);
|
|
2468
|
+
insertedIndex = this.layoutNode.addChild(childLayoutNode);
|
|
2469
|
+
}
|
|
2454
2470
|
this.needsZIndexSort = true;
|
|
2455
2471
|
this.renderableMap.set(obj.id, obj);
|
|
2456
|
-
const childLayoutNode = obj.getLayoutNode();
|
|
2457
|
-
this.layoutNode.addChild(childLayoutNode);
|
|
2458
2472
|
this.requestLayout();
|
|
2459
2473
|
this.emit("child:added", obj);
|
|
2474
|
+
return insertedIndex;
|
|
2475
|
+
}
|
|
2476
|
+
insertBefore(obj, anchor) {
|
|
2477
|
+
if (!anchor) {
|
|
2478
|
+
return this.add(obj);
|
|
2479
|
+
}
|
|
2480
|
+
if (!this.renderableMap.has(anchor.id)) {
|
|
2481
|
+
throw new Error("Anchor does not exist");
|
|
2482
|
+
}
|
|
2483
|
+
const anchorIndex = this.renderableArray.indexOf(anchor);
|
|
2484
|
+
if (anchorIndex === -1) {
|
|
2485
|
+
throw new Error("Anchor does not exist");
|
|
2486
|
+
}
|
|
2487
|
+
return this.add(obj, anchorIndex);
|
|
2460
2488
|
}
|
|
2461
2489
|
propagateContext(ctx) {
|
|
2462
2490
|
this.ctx = ctx;
|
|
@@ -2530,6 +2558,12 @@ class Renderable extends EventEmitter3 {
|
|
|
2530
2558
|
this.removeAllListeners();
|
|
2531
2559
|
this.destroySelf();
|
|
2532
2560
|
}
|
|
2561
|
+
destroyRecursively() {
|
|
2562
|
+
this.destroy();
|
|
2563
|
+
for (const child of this.renderableArray) {
|
|
2564
|
+
child.destroyRecursively();
|
|
2565
|
+
}
|
|
2566
|
+
}
|
|
2533
2567
|
destroySelf() {}
|
|
2534
2568
|
processMouseEvent(event) {
|
|
2535
2569
|
this.onMouseEvent(event);
|
|
@@ -2557,22 +2591,6 @@ class RootRenderable extends Renderable {
|
|
|
2557
2591
|
this.layoutNode.yogaNode.setFlexDirection(FlexDirection.Column);
|
|
2558
2592
|
this.calculateLayout();
|
|
2559
2593
|
}
|
|
2560
|
-
add(obj) {
|
|
2561
|
-
super.add(obj);
|
|
2562
|
-
const childLayoutNode = obj.getLayoutNode();
|
|
2563
|
-
this.layoutNode.addChild(childLayoutNode);
|
|
2564
|
-
this.requestLayout();
|
|
2565
|
-
this.emit("added" /* ADDED */, obj);
|
|
2566
|
-
}
|
|
2567
|
-
remove(id) {
|
|
2568
|
-
const obj = this.getRenderable(id);
|
|
2569
|
-
if (obj) {
|
|
2570
|
-
this.layoutNode.removeChild(obj.getLayoutNode());
|
|
2571
|
-
this.emit("removed" /* REMOVED */, obj);
|
|
2572
|
-
this.requestLayout();
|
|
2573
|
-
}
|
|
2574
|
-
super.remove(id);
|
|
2575
|
-
}
|
|
2576
2594
|
requestLayout() {
|
|
2577
2595
|
this.needsUpdate();
|
|
2578
2596
|
}
|
|
@@ -2816,9 +2834,8 @@ var DebugOverlayCorner;
|
|
|
2816
2834
|
DebugOverlayCorner2[DebugOverlayCorner2["bottomRight"] = 3] = "bottomRight";
|
|
2817
2835
|
})(DebugOverlayCorner ||= {});
|
|
2818
2836
|
// src/zig.ts
|
|
2819
|
-
import { dlopen,
|
|
2820
|
-
import {
|
|
2821
|
-
import { existsSync, readFileSync } from "fs";
|
|
2837
|
+
import { dlopen, toArrayBuffer } from "bun:ffi";
|
|
2838
|
+
import { existsSync } from "fs";
|
|
2822
2839
|
|
|
2823
2840
|
// src/text-buffer.ts
|
|
2824
2841
|
class TextBuffer {
|
|
@@ -2905,25 +2922,13 @@ class TextBuffer {
|
|
|
2905
2922
|
}
|
|
2906
2923
|
|
|
2907
2924
|
// src/zig.ts
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
var __filename2 = fileURLToPath(import.meta.url);
|
|
2912
|
-
var __dirname2 = dirname(__filename2);
|
|
2913
|
-
var packageJson = JSON.parse(readFileSync(join(__dirname2, ...__filename2.endsWith(".ts") ? ["..", "dist", "./package.json"] : ["./package.json"]), { encoding: "utf8" }));
|
|
2914
|
-
function findLibrary() {
|
|
2915
|
-
try {
|
|
2916
|
-
const isWindows = process.platform === "win32";
|
|
2917
|
-
const libraryName = isWindows ? "opentui" : "libopentui";
|
|
2918
|
-
const targetLibPath = require2.resolve(`${packageJson.name}-${process.platform}-${process.arch}/${libraryName}.${suffix}`);
|
|
2919
|
-
if (existsSync(targetLibPath)) {
|
|
2920
|
-
return targetLibPath;
|
|
2921
|
-
}
|
|
2922
|
-
} catch {}
|
|
2925
|
+
var module = await import(`@opentui/core-${process.platform}-${process.arch}/index.ts`);
|
|
2926
|
+
var targetLibPath = module.default;
|
|
2927
|
+
if (!existsSync(targetLibPath)) {
|
|
2923
2928
|
throw new Error(`opentui is not supported on the current platform: ${process.platform}-${process.arch}`);
|
|
2924
2929
|
}
|
|
2925
2930
|
function getOpenTUILib(libPath) {
|
|
2926
|
-
const resolvedLibPath = libPath ||
|
|
2931
|
+
const resolvedLibPath = libPath || targetLibPath;
|
|
2927
2932
|
return dlopen(resolvedLibPath, {
|
|
2928
2933
|
createRenderer: {
|
|
2929
2934
|
args: ["u32", "u32"],
|
|
@@ -3547,6 +3552,9 @@ class FFIRenderLib {
|
|
|
3547
3552
|
}
|
|
3548
3553
|
var opentuiLibPath;
|
|
3549
3554
|
var opentuiLib;
|
|
3555
|
+
function setRenderLibPath(libPath) {
|
|
3556
|
+
opentuiLibPath = libPath;
|
|
3557
|
+
}
|
|
3550
3558
|
function resolveRenderLib() {
|
|
3551
3559
|
if (!opentuiLib) {
|
|
3552
3560
|
opentuiLib = new FFIRenderLib(opentuiLibPath);
|
|
@@ -7160,6 +7168,22 @@ function getCallerInfo() {
|
|
|
7160
7168
|
const columnNumber = parseInt(match[4], 10) || 0;
|
|
7161
7169
|
return { functionName, fullPath, fileName, lineNumber, columnNumber };
|
|
7162
7170
|
}
|
|
7171
|
+
var capture = new Capture;
|
|
7172
|
+
var mockStdout = new CapturedWritableStream("stdout", capture);
|
|
7173
|
+
var mockStderr = new CapturedWritableStream("stderr", capture);
|
|
7174
|
+
if (process.env.SKIP_CONSOLE_CACHE !== "true") {
|
|
7175
|
+
global.console = new console.Console({
|
|
7176
|
+
stdout: mockStdout,
|
|
7177
|
+
stderr: mockStderr,
|
|
7178
|
+
colorMode: true,
|
|
7179
|
+
inspectOptions: {
|
|
7180
|
+
compact: false,
|
|
7181
|
+
breakLength: 80,
|
|
7182
|
+
depth: 2
|
|
7183
|
+
}
|
|
7184
|
+
});
|
|
7185
|
+
}
|
|
7186
|
+
|
|
7163
7187
|
class TerminalConsoleCache extends EventEmitter5 {
|
|
7164
7188
|
originalConsole;
|
|
7165
7189
|
_cachedLogs = [];
|
|
@@ -7240,19 +7264,6 @@ class TerminalConsoleCache extends EventEmitter5 {
|
|
|
7240
7264
|
this.deactivate();
|
|
7241
7265
|
}
|
|
7242
7266
|
}
|
|
7243
|
-
var capture = new Capture;
|
|
7244
|
-
var mockStdout = new CapturedWritableStream("stdout", capture);
|
|
7245
|
-
var mockStderr = new CapturedWritableStream("stderr", capture);
|
|
7246
|
-
global.console = new console.Console({
|
|
7247
|
-
stdout: mockStdout,
|
|
7248
|
-
stderr: mockStderr,
|
|
7249
|
-
colorMode: true,
|
|
7250
|
-
inspectOptions: {
|
|
7251
|
-
compact: false,
|
|
7252
|
-
breakLength: 80,
|
|
7253
|
-
depth: 2
|
|
7254
|
-
}
|
|
7255
|
-
});
|
|
7256
7267
|
var terminalConsoleCache = new TerminalConsoleCache;
|
|
7257
7268
|
process.on("exit", () => {
|
|
7258
7269
|
terminalConsoleCache.destroy();
|
|
@@ -8953,7 +8964,7 @@ class FrameBufferRenderable extends Renderable {
|
|
|
8953
8964
|
buffer.drawFrameBuffer(this.x, this.y, this.frameBuffer);
|
|
8954
8965
|
}
|
|
8955
8966
|
destroySelf() {
|
|
8956
|
-
this.frameBuffer
|
|
8967
|
+
this.frameBuffer?.destroy();
|
|
8957
8968
|
super.destroySelf();
|
|
8958
8969
|
}
|
|
8959
8970
|
}
|
|
@@ -8966,7 +8977,7 @@ class GroupRenderable extends Renderable {
|
|
|
8966
8977
|
// src/renderables/Text.ts
|
|
8967
8978
|
class TextRenderable extends Renderable {
|
|
8968
8979
|
selectable = true;
|
|
8969
|
-
_text;
|
|
8980
|
+
_text = stringToStyledText("");
|
|
8970
8981
|
_defaultFg;
|
|
8971
8982
|
_defaultBg;
|
|
8972
8983
|
_defaultAttributes;
|
|
@@ -8979,7 +8990,9 @@ class TextRenderable extends Renderable {
|
|
|
8979
8990
|
constructor(id, options) {
|
|
8980
8991
|
super(id, options);
|
|
8981
8992
|
this.selectionHelper = new TextSelectionHelper(() => this.x, () => this.y, () => this._plainText.length, () => this._lineInfo);
|
|
8982
|
-
|
|
8993
|
+
if (options.content) {
|
|
8994
|
+
this._text = typeof options.content === "string" ? stringToStyledText(options.content) : options.content;
|
|
8995
|
+
}
|
|
8983
8996
|
this._defaultFg = options.fg ? parseColor(options.fg) : RGBA.fromValues(1, 1, 1, 1);
|
|
8984
8997
|
this._defaultBg = options.bg ? parseColor(options.bg) : RGBA.fromValues(0, 0, 0, 0);
|
|
8985
8998
|
this._defaultAttributes = options.attributes ?? 0;
|
|
@@ -9141,14 +9154,15 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
|
|
|
9141
9154
|
selectionHelper;
|
|
9142
9155
|
constructor(id, options) {
|
|
9143
9156
|
const font = options.font || "tiny";
|
|
9144
|
-
const
|
|
9157
|
+
const text = options.text || "";
|
|
9158
|
+
const measurements = measureText({ text, font });
|
|
9145
9159
|
super(id, {
|
|
9146
9160
|
...options,
|
|
9147
|
-
width: measurements.width,
|
|
9148
|
-
height: measurements.height,
|
|
9161
|
+
width: measurements.width || 1,
|
|
9162
|
+
height: measurements.height || 1,
|
|
9149
9163
|
respectAlpha: true
|
|
9150
9164
|
});
|
|
9151
|
-
this._text =
|
|
9165
|
+
this._text = text;
|
|
9152
9166
|
this._font = font;
|
|
9153
9167
|
this._fg = Array.isArray(options.fg) ? options.fg : [options.fg || RGBA.fromInts(255, 255, 255, 255)];
|
|
9154
9168
|
this._bg = options.bg || RGBA.fromValues(0, 0, 0, 0);
|
|
@@ -9276,30 +9290,30 @@ var InputRenderableEvents;
|
|
|
9276
9290
|
|
|
9277
9291
|
class InputRenderable extends Renderable {
|
|
9278
9292
|
focusable = true;
|
|
9279
|
-
|
|
9280
|
-
|
|
9281
|
-
|
|
9282
|
-
|
|
9283
|
-
|
|
9284
|
-
|
|
9285
|
-
|
|
9286
|
-
|
|
9287
|
-
|
|
9288
|
-
|
|
9289
|
-
|
|
9293
|
+
_value = "";
|
|
9294
|
+
_cursorPosition = 0;
|
|
9295
|
+
_placeholder;
|
|
9296
|
+
_backgroundColor;
|
|
9297
|
+
_textColor;
|
|
9298
|
+
_focusedBackgroundColor;
|
|
9299
|
+
_focusedTextColor;
|
|
9300
|
+
_placeholderColor;
|
|
9301
|
+
_cursorColor;
|
|
9302
|
+
_maxLength;
|
|
9303
|
+
_lastCommittedValue = "";
|
|
9290
9304
|
constructor(id, options) {
|
|
9291
9305
|
super(id, { ...options, buffered: true });
|
|
9292
|
-
this.
|
|
9293
|
-
this.
|
|
9294
|
-
this.
|
|
9295
|
-
this.
|
|
9296
|
-
this.
|
|
9297
|
-
this.
|
|
9298
|
-
this.
|
|
9299
|
-
this.
|
|
9300
|
-
this.
|
|
9301
|
-
this.
|
|
9302
|
-
this.
|
|
9306
|
+
this._backgroundColor = parseColor(options.backgroundColor || "transparent");
|
|
9307
|
+
this._textColor = parseColor(options.textColor || "#FFFFFF");
|
|
9308
|
+
this._focusedBackgroundColor = parseColor(options.focusedBackgroundColor || options.backgroundColor || "#1a1a1a");
|
|
9309
|
+
this._focusedTextColor = parseColor(options.focusedTextColor || options.textColor || "#FFFFFF");
|
|
9310
|
+
this._placeholder = options.placeholder || "";
|
|
9311
|
+
this._value = options.value || "";
|
|
9312
|
+
this._lastCommittedValue = this._value;
|
|
9313
|
+
this._cursorPosition = this._value.length;
|
|
9314
|
+
this._maxLength = options.maxLength || 1000;
|
|
9315
|
+
this._placeholderColor = parseColor(options.placeholderColor || "#666666");
|
|
9316
|
+
this._cursorColor = parseColor(options.cursorColor || "#FFFFFF");
|
|
9303
9317
|
}
|
|
9304
9318
|
updateCursorPosition() {
|
|
9305
9319
|
if (!this._focused)
|
|
@@ -9309,28 +9323,28 @@ class InputRenderable extends Renderable {
|
|
|
9309
9323
|
const contentWidth = this.width;
|
|
9310
9324
|
const maxVisibleChars = contentWidth - 1;
|
|
9311
9325
|
let displayStartIndex = 0;
|
|
9312
|
-
if (this.
|
|
9313
|
-
displayStartIndex = this.
|
|
9326
|
+
if (this._cursorPosition >= maxVisibleChars) {
|
|
9327
|
+
displayStartIndex = this._cursorPosition - maxVisibleChars + 1;
|
|
9314
9328
|
}
|
|
9315
|
-
const cursorDisplayX = this.
|
|
9329
|
+
const cursorDisplayX = this._cursorPosition - displayStartIndex;
|
|
9316
9330
|
if (cursorDisplayX >= 0 && cursorDisplayX < contentWidth) {
|
|
9317
9331
|
const absoluteCursorX = this.x + contentX + cursorDisplayX + 1;
|
|
9318
9332
|
const absoluteCursorY = this.y + contentY + 1;
|
|
9319
9333
|
CliRenderer.setCursorPosition(absoluteCursorX, absoluteCursorY, true);
|
|
9320
|
-
CliRenderer.setCursorColor(this.
|
|
9334
|
+
CliRenderer.setCursorColor(this._cursorColor);
|
|
9321
9335
|
}
|
|
9322
9336
|
}
|
|
9323
9337
|
focus() {
|
|
9324
9338
|
super.focus();
|
|
9325
|
-
CliRenderer.setCursorStyle("block", true, this.
|
|
9339
|
+
CliRenderer.setCursorStyle("block", true, this._cursorColor);
|
|
9326
9340
|
this.updateCursorPosition();
|
|
9327
9341
|
}
|
|
9328
9342
|
blur() {
|
|
9329
9343
|
super.blur();
|
|
9330
9344
|
CliRenderer.setCursorPosition(0, 0, false);
|
|
9331
|
-
if (this.
|
|
9332
|
-
this.
|
|
9333
|
-
this.emit("change" /* CHANGE */, this.
|
|
9345
|
+
if (this._value !== this._lastCommittedValue) {
|
|
9346
|
+
this._lastCommittedValue = this._value;
|
|
9347
|
+
this.emit("change" /* CHANGE */, this._value);
|
|
9334
9348
|
}
|
|
9335
9349
|
}
|
|
9336
9350
|
renderSelf(buffer, deltaTime) {
|
|
@@ -9343,20 +9357,20 @@ class InputRenderable extends Renderable {
|
|
|
9343
9357
|
refreshFrameBuffer() {
|
|
9344
9358
|
if (!this.frameBuffer)
|
|
9345
9359
|
return;
|
|
9346
|
-
const bgColor = this._focused ? this.
|
|
9360
|
+
const bgColor = this._focused ? this._focusedBackgroundColor : this._backgroundColor;
|
|
9347
9361
|
this.frameBuffer.clear(bgColor);
|
|
9348
9362
|
const contentX = 0;
|
|
9349
9363
|
const contentY = 0;
|
|
9350
9364
|
const contentWidth = this.width;
|
|
9351
9365
|
const contentHeight = this.height;
|
|
9352
|
-
const displayText = this.
|
|
9353
|
-
const isPlaceholder = !this.
|
|
9354
|
-
const baseTextColor = this._focused ? this.
|
|
9355
|
-
const textColor = isPlaceholder ? this.
|
|
9366
|
+
const displayText = this._value || this._placeholder;
|
|
9367
|
+
const isPlaceholder = !this._value && this._placeholder;
|
|
9368
|
+
const baseTextColor = this._focused ? this._focusedTextColor : this._textColor;
|
|
9369
|
+
const textColor = isPlaceholder ? this._placeholderColor : baseTextColor;
|
|
9356
9370
|
const maxVisibleChars = contentWidth - 1;
|
|
9357
9371
|
let displayStartIndex = 0;
|
|
9358
|
-
if (this.
|
|
9359
|
-
displayStartIndex = this.
|
|
9372
|
+
if (this._cursorPosition >= maxVisibleChars) {
|
|
9373
|
+
displayStartIndex = this._cursorPosition - maxVisibleChars + 1;
|
|
9360
9374
|
}
|
|
9361
9375
|
const visibleText = displayText.substring(displayStartIndex, displayStartIndex + maxVisibleChars);
|
|
9362
9376
|
if (visibleText) {
|
|
@@ -9366,67 +9380,61 @@ class InputRenderable extends Renderable {
|
|
|
9366
9380
|
this.updateCursorPosition();
|
|
9367
9381
|
}
|
|
9368
9382
|
}
|
|
9369
|
-
|
|
9370
|
-
|
|
9371
|
-
|
|
9372
|
-
|
|
9373
|
-
|
|
9383
|
+
get value() {
|
|
9384
|
+
return this._value;
|
|
9385
|
+
}
|
|
9386
|
+
set value(value) {
|
|
9387
|
+
const newValue = value.substring(0, this._maxLength);
|
|
9388
|
+
if (this._value !== newValue) {
|
|
9389
|
+
this._value = newValue;
|
|
9390
|
+
this._cursorPosition = Math.min(this._cursorPosition, this._value.length);
|
|
9374
9391
|
this.needsUpdate();
|
|
9375
9392
|
this.updateCursorPosition();
|
|
9376
|
-
this.emit("input" /* INPUT */, this.
|
|
9393
|
+
this.emit("input" /* INPUT */, this._value);
|
|
9377
9394
|
}
|
|
9378
9395
|
}
|
|
9379
|
-
|
|
9380
|
-
|
|
9381
|
-
|
|
9382
|
-
getPlaceholder() {
|
|
9383
|
-
return this.placeholder;
|
|
9384
|
-
}
|
|
9385
|
-
setPlaceholder(placeholder) {
|
|
9386
|
-
if (this.placeholder !== placeholder) {
|
|
9387
|
-
this.placeholder = placeholder;
|
|
9396
|
+
set placeholder(placeholder) {
|
|
9397
|
+
if (this._placeholder !== placeholder) {
|
|
9398
|
+
this._placeholder = placeholder;
|
|
9388
9399
|
this.needsUpdate();
|
|
9389
9400
|
}
|
|
9390
9401
|
}
|
|
9391
|
-
|
|
9392
|
-
|
|
9393
|
-
|
|
9394
|
-
|
|
9395
|
-
const newPosition = Math.max(0, Math.min(position, this.value.length));
|
|
9396
|
-
if (this.cursorPosition !== newPosition) {
|
|
9397
|
-
this.cursorPosition = newPosition;
|
|
9402
|
+
set cursorPosition(position) {
|
|
9403
|
+
const newPosition = Math.max(0, Math.min(position, this._value.length));
|
|
9404
|
+
if (this._cursorPosition !== newPosition) {
|
|
9405
|
+
this._cursorPosition = newPosition;
|
|
9398
9406
|
this.needsUpdate();
|
|
9399
9407
|
this.updateCursorPosition();
|
|
9400
9408
|
}
|
|
9401
9409
|
}
|
|
9402
9410
|
insertText(text) {
|
|
9403
|
-
if (this.
|
|
9411
|
+
if (this._value.length + text.length > this._maxLength) {
|
|
9404
9412
|
return;
|
|
9405
9413
|
}
|
|
9406
|
-
const beforeCursor = this.
|
|
9407
|
-
const afterCursor = this.
|
|
9408
|
-
this.
|
|
9409
|
-
this.
|
|
9414
|
+
const beforeCursor = this._value.substring(0, this._cursorPosition);
|
|
9415
|
+
const afterCursor = this._value.substring(this._cursorPosition);
|
|
9416
|
+
this._value = beforeCursor + text + afterCursor;
|
|
9417
|
+
this._cursorPosition += text.length;
|
|
9410
9418
|
this.needsUpdate();
|
|
9411
9419
|
this.updateCursorPosition();
|
|
9412
|
-
this.emit("input" /* INPUT */, this.
|
|
9420
|
+
this.emit("input" /* INPUT */, this._value);
|
|
9413
9421
|
}
|
|
9414
9422
|
deleteCharacter(direction) {
|
|
9415
|
-
if (direction === "backward" && this.
|
|
9416
|
-
const beforeCursor = this.
|
|
9417
|
-
const afterCursor = this.
|
|
9418
|
-
this.
|
|
9419
|
-
this.
|
|
9423
|
+
if (direction === "backward" && this._cursorPosition > 0) {
|
|
9424
|
+
const beforeCursor = this._value.substring(0, this._cursorPosition - 1);
|
|
9425
|
+
const afterCursor = this._value.substring(this._cursorPosition);
|
|
9426
|
+
this._value = beforeCursor + afterCursor;
|
|
9427
|
+
this._cursorPosition--;
|
|
9420
9428
|
this.needsUpdate();
|
|
9421
9429
|
this.updateCursorPosition();
|
|
9422
|
-
this.emit("input" /* INPUT */, this.
|
|
9423
|
-
} else if (direction === "forward" && this.
|
|
9424
|
-
const beforeCursor = this.
|
|
9425
|
-
const afterCursor = this.
|
|
9426
|
-
this.
|
|
9430
|
+
this.emit("input" /* INPUT */, this._value);
|
|
9431
|
+
} else if (direction === "forward" && this._cursorPosition < this._value.length) {
|
|
9432
|
+
const beforeCursor = this._value.substring(0, this._cursorPosition);
|
|
9433
|
+
const afterCursor = this._value.substring(this._cursorPosition + 1);
|
|
9434
|
+
this._value = beforeCursor + afterCursor;
|
|
9427
9435
|
this.needsUpdate();
|
|
9428
9436
|
this.updateCursorPosition();
|
|
9429
|
-
this.emit("input" /* INPUT */, this.
|
|
9437
|
+
this.emit("input" /* INPUT */, this._value);
|
|
9430
9438
|
}
|
|
9431
9439
|
}
|
|
9432
9440
|
handleKeyPress(key) {
|
|
@@ -9434,16 +9442,16 @@ class InputRenderable extends Renderable {
|
|
|
9434
9442
|
const keySequence = typeof key === "string" ? key : key.sequence;
|
|
9435
9443
|
switch (keyName2) {
|
|
9436
9444
|
case "left":
|
|
9437
|
-
this.
|
|
9445
|
+
this.cursorPosition = this._cursorPosition - 1;
|
|
9438
9446
|
return true;
|
|
9439
9447
|
case "right":
|
|
9440
|
-
this.
|
|
9448
|
+
this.cursorPosition = this._cursorPosition + 1;
|
|
9441
9449
|
return true;
|
|
9442
9450
|
case "home":
|
|
9443
|
-
this.
|
|
9451
|
+
this.cursorPosition = 0;
|
|
9444
9452
|
return true;
|
|
9445
9453
|
case "end":
|
|
9446
|
-
this.
|
|
9454
|
+
this.cursorPosition = this._value.length;
|
|
9447
9455
|
return true;
|
|
9448
9456
|
case "backspace":
|
|
9449
9457
|
this.deleteCharacter("backward");
|
|
@@ -9453,11 +9461,11 @@ class InputRenderable extends Renderable {
|
|
|
9453
9461
|
return true;
|
|
9454
9462
|
case "return":
|
|
9455
9463
|
case "enter":
|
|
9456
|
-
if (this.
|
|
9457
|
-
this.
|
|
9458
|
-
this.emit("change" /* CHANGE */, this.
|
|
9464
|
+
if (this._value !== this._lastCommittedValue) {
|
|
9465
|
+
this._lastCommittedValue = this._value;
|
|
9466
|
+
this.emit("change" /* CHANGE */, this._value);
|
|
9459
9467
|
}
|
|
9460
|
-
this.emit("enter" /* ENTER */, this.
|
|
9468
|
+
this.emit("enter" /* ENTER */, this._value);
|
|
9461
9469
|
return true;
|
|
9462
9470
|
default:
|
|
9463
9471
|
if (keySequence && keySequence.length === 1 && keySequence.charCodeAt(0) >= 32 && keySequence.charCodeAt(0) <= 126) {
|
|
@@ -9468,15 +9476,37 @@ class InputRenderable extends Renderable {
|
|
|
9468
9476
|
}
|
|
9469
9477
|
return false;
|
|
9470
9478
|
}
|
|
9471
|
-
|
|
9472
|
-
|
|
9473
|
-
|
|
9474
|
-
|
|
9475
|
-
|
|
9476
|
-
if (this.value.length > maxLength) {
|
|
9477
|
-
this.setValue(this.value.substring(0, maxLength));
|
|
9479
|
+
set maxLength(maxLength) {
|
|
9480
|
+
this._maxLength = maxLength;
|
|
9481
|
+
if (this._value.length > maxLength) {
|
|
9482
|
+
this._value = this._value.substring(0, maxLength);
|
|
9483
|
+
this.needsUpdate();
|
|
9478
9484
|
}
|
|
9479
9485
|
}
|
|
9486
|
+
set backgroundColor(color) {
|
|
9487
|
+
this._backgroundColor = parseColor(color);
|
|
9488
|
+
this.needsUpdate();
|
|
9489
|
+
}
|
|
9490
|
+
set textColor(color) {
|
|
9491
|
+
this._textColor = parseColor(color);
|
|
9492
|
+
this.needsUpdate();
|
|
9493
|
+
}
|
|
9494
|
+
set focusedBackgroundColor(color) {
|
|
9495
|
+
this._focusedBackgroundColor = parseColor(color);
|
|
9496
|
+
this.needsUpdate();
|
|
9497
|
+
}
|
|
9498
|
+
set focusedTextColor(color) {
|
|
9499
|
+
this._focusedTextColor = parseColor(color);
|
|
9500
|
+
this.needsUpdate();
|
|
9501
|
+
}
|
|
9502
|
+
set placeholderColor(color) {
|
|
9503
|
+
this._placeholderColor = parseColor(color);
|
|
9504
|
+
this.needsUpdate();
|
|
9505
|
+
}
|
|
9506
|
+
set cursorColor(color) {
|
|
9507
|
+
this._cursorColor = parseColor(color);
|
|
9508
|
+
this.needsUpdate();
|
|
9509
|
+
}
|
|
9480
9510
|
destroySelf() {
|
|
9481
9511
|
if (this._focused) {
|
|
9482
9512
|
CliRenderer.setCursorPosition(0, 0, false);
|
|
@@ -9493,47 +9523,47 @@ var SelectRenderableEvents;
|
|
|
9493
9523
|
|
|
9494
9524
|
class SelectRenderable extends Renderable {
|
|
9495
9525
|
focusable = true;
|
|
9496
|
-
|
|
9526
|
+
_options = [];
|
|
9497
9527
|
selectedIndex = 0;
|
|
9498
9528
|
scrollOffset = 0;
|
|
9499
9529
|
maxVisibleItems;
|
|
9500
|
-
|
|
9501
|
-
|
|
9502
|
-
|
|
9503
|
-
|
|
9504
|
-
|
|
9505
|
-
|
|
9506
|
-
|
|
9507
|
-
|
|
9508
|
-
|
|
9509
|
-
|
|
9510
|
-
|
|
9511
|
-
|
|
9512
|
-
|
|
9530
|
+
_backgroundColor;
|
|
9531
|
+
_textColor;
|
|
9532
|
+
_focusedBackgroundColor;
|
|
9533
|
+
_focusedTextColor;
|
|
9534
|
+
_selectedBackgroundColor;
|
|
9535
|
+
_selectedTextColor;
|
|
9536
|
+
_descriptionColor;
|
|
9537
|
+
_selectedDescriptionColor;
|
|
9538
|
+
_showScrollIndicator;
|
|
9539
|
+
_wrapSelection;
|
|
9540
|
+
_showDescription;
|
|
9541
|
+
_font;
|
|
9542
|
+
_itemSpacing;
|
|
9513
9543
|
linesPerItem;
|
|
9514
9544
|
fontHeight;
|
|
9515
|
-
|
|
9545
|
+
_fastScrollStep;
|
|
9516
9546
|
constructor(id, options) {
|
|
9517
9547
|
super(id, { ...options, buffered: true });
|
|
9518
|
-
this.
|
|
9519
|
-
this.
|
|
9520
|
-
this.
|
|
9521
|
-
this.
|
|
9522
|
-
this.
|
|
9523
|
-
this.
|
|
9524
|
-
this.
|
|
9525
|
-
this.
|
|
9526
|
-
this.
|
|
9527
|
-
this.
|
|
9528
|
-
this.fontHeight = this.
|
|
9529
|
-
this.linesPerItem = this.
|
|
9530
|
-
this.linesPerItem += this.
|
|
9548
|
+
this._backgroundColor = parseColor(options.backgroundColor || "transparent");
|
|
9549
|
+
this._textColor = parseColor(options.textColor || "#FFFFFF");
|
|
9550
|
+
this._focusedBackgroundColor = parseColor(options.focusedBackgroundColor || options.backgroundColor || "#1a1a1a");
|
|
9551
|
+
this._focusedTextColor = parseColor(options.focusedTextColor || options.textColor || "#FFFFFF");
|
|
9552
|
+
this._options = options.options || [];
|
|
9553
|
+
this._showScrollIndicator = options.showScrollIndicator ?? false;
|
|
9554
|
+
this._wrapSelection = options.wrapSelection ?? false;
|
|
9555
|
+
this._showDescription = options.showDescription ?? true;
|
|
9556
|
+
this._font = options.font;
|
|
9557
|
+
this._itemSpacing = options.itemSpacing || 0;
|
|
9558
|
+
this.fontHeight = this._font ? measureText({ text: "A", font: this._font }).height : 1;
|
|
9559
|
+
this.linesPerItem = this._showDescription ? this._font ? this.fontHeight + 1 : 2 : this._font ? this.fontHeight : 1;
|
|
9560
|
+
this.linesPerItem += this._itemSpacing;
|
|
9531
9561
|
this.maxVisibleItems = Math.max(1, Math.floor(this.height / this.linesPerItem));
|
|
9532
|
-
this.
|
|
9533
|
-
this.
|
|
9534
|
-
this.
|
|
9535
|
-
this.
|
|
9536
|
-
this.
|
|
9562
|
+
this._selectedBackgroundColor = parseColor(options.selectedBackgroundColor || "#334455");
|
|
9563
|
+
this._selectedTextColor = parseColor(options.selectedTextColor || "#FFFF00");
|
|
9564
|
+
this._descriptionColor = parseColor(options.descriptionColor || "#888888");
|
|
9565
|
+
this._selectedDescriptionColor = parseColor(options.selectedDescriptionColor || "#CCCCCC");
|
|
9566
|
+
this._fastScrollStep = options.fastScrollStep || 5;
|
|
9537
9567
|
this.needsUpdate();
|
|
9538
9568
|
}
|
|
9539
9569
|
renderSelf(buffer, deltaTime) {
|
|
@@ -9544,15 +9574,15 @@ class SelectRenderable extends Renderable {
|
|
|
9544
9574
|
}
|
|
9545
9575
|
}
|
|
9546
9576
|
refreshFrameBuffer() {
|
|
9547
|
-
if (!this.frameBuffer || this.
|
|
9577
|
+
if (!this.frameBuffer || this._options.length === 0)
|
|
9548
9578
|
return;
|
|
9549
|
-
const bgColor = this._focused ? this.
|
|
9579
|
+
const bgColor = this._focused ? this._focusedBackgroundColor : this._backgroundColor;
|
|
9550
9580
|
this.frameBuffer.clear(bgColor);
|
|
9551
9581
|
const contentX = 0;
|
|
9552
9582
|
const contentY = 0;
|
|
9553
9583
|
const contentWidth = this.width;
|
|
9554
9584
|
const contentHeight = this.height;
|
|
9555
|
-
const visibleOptions = this.
|
|
9585
|
+
const visibleOptions = this._options.slice(this.scrollOffset, this.scrollOffset + this.maxVisibleItems);
|
|
9556
9586
|
for (let i = 0;i < visibleOptions.length; i++) {
|
|
9557
9587
|
const actualIndex = this.scrollOffset + i;
|
|
9558
9588
|
const option = visibleOptions[i];
|
|
@@ -9561,14 +9591,14 @@ class SelectRenderable extends Renderable {
|
|
|
9561
9591
|
if (itemY + this.linesPerItem - 1 >= contentY + contentHeight)
|
|
9562
9592
|
break;
|
|
9563
9593
|
if (isSelected) {
|
|
9564
|
-
const contentHeight2 = this.linesPerItem - this.
|
|
9565
|
-
this.frameBuffer.fillRect(contentX, itemY, contentWidth, contentHeight2, this.
|
|
9594
|
+
const contentHeight2 = this.linesPerItem - this._itemSpacing;
|
|
9595
|
+
this.frameBuffer.fillRect(contentX, itemY, contentWidth, contentHeight2, this._selectedBackgroundColor);
|
|
9566
9596
|
}
|
|
9567
9597
|
const nameContent = `${isSelected ? "\u25B6 " : " "}${option.name}`;
|
|
9568
|
-
const baseTextColor = this._focused ? this.
|
|
9569
|
-
const nameColor = isSelected ? this.
|
|
9598
|
+
const baseTextColor = this._focused ? this._focusedTextColor : this._textColor;
|
|
9599
|
+
const nameColor = isSelected ? this._selectedTextColor : baseTextColor;
|
|
9570
9600
|
let descX = contentX + 3;
|
|
9571
|
-
if (this.
|
|
9601
|
+
if (this._font) {
|
|
9572
9602
|
const indicator = isSelected ? "\u25B6 " : " ";
|
|
9573
9603
|
this.frameBuffer.drawText(indicator, contentX + 1, itemY, nameColor);
|
|
9574
9604
|
const indicatorWidth = 2;
|
|
@@ -9577,40 +9607,43 @@ class SelectRenderable extends Renderable {
|
|
|
9577
9607
|
x: contentX + 1 + indicatorWidth,
|
|
9578
9608
|
y: itemY,
|
|
9579
9609
|
fg: nameColor,
|
|
9580
|
-
bg: isSelected ? this.
|
|
9581
|
-
font: this.
|
|
9610
|
+
bg: isSelected ? this._selectedBackgroundColor : bgColor,
|
|
9611
|
+
font: this._font
|
|
9582
9612
|
});
|
|
9583
9613
|
descX = contentX + 1 + indicatorWidth;
|
|
9584
9614
|
} else {
|
|
9585
9615
|
this.frameBuffer.drawText(nameContent, contentX + 1, itemY, nameColor);
|
|
9586
9616
|
}
|
|
9587
|
-
if (this.
|
|
9588
|
-
const descColor = isSelected ? this.
|
|
9589
|
-
const descBg = this._focused ? this.
|
|
9617
|
+
if (this._showDescription && itemY + this.fontHeight < contentY + contentHeight) {
|
|
9618
|
+
const descColor = isSelected ? this._selectedDescriptionColor : this._descriptionColor;
|
|
9619
|
+
const descBg = this._focused ? this._focusedBackgroundColor : this._backgroundColor;
|
|
9590
9620
|
this.frameBuffer.drawText(option.description, descX, itemY + this.fontHeight, descColor);
|
|
9591
9621
|
}
|
|
9592
9622
|
}
|
|
9593
|
-
if (this.
|
|
9623
|
+
if (this._showScrollIndicator && this._options.length > this.maxVisibleItems) {
|
|
9594
9624
|
this.renderScrollIndicatorToFrameBuffer(contentX, contentY, contentWidth, contentHeight);
|
|
9595
9625
|
}
|
|
9596
9626
|
}
|
|
9597
9627
|
renderScrollIndicatorToFrameBuffer(contentX, contentY, contentWidth, contentHeight) {
|
|
9598
9628
|
if (!this.frameBuffer)
|
|
9599
9629
|
return;
|
|
9600
|
-
const scrollPercent = this.selectedIndex / Math.max(1, this.
|
|
9630
|
+
const scrollPercent = this.selectedIndex / Math.max(1, this._options.length - 1);
|
|
9601
9631
|
const indicatorHeight = Math.max(1, contentHeight - 2);
|
|
9602
9632
|
const indicatorY = contentY + 1 + Math.floor(scrollPercent * indicatorHeight);
|
|
9603
9633
|
const indicatorX = contentX + contentWidth - 1;
|
|
9604
9634
|
this.frameBuffer.drawText("\u2588", indicatorX, indicatorY, parseColor("#666666"));
|
|
9605
9635
|
}
|
|
9606
|
-
|
|
9607
|
-
this.
|
|
9636
|
+
get options() {
|
|
9637
|
+
return this._options;
|
|
9638
|
+
}
|
|
9639
|
+
set options(options) {
|
|
9640
|
+
this._options = options;
|
|
9608
9641
|
this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, options.length - 1));
|
|
9609
9642
|
this.updateScrollOffset();
|
|
9610
9643
|
this.needsUpdate();
|
|
9611
9644
|
}
|
|
9612
9645
|
getSelectedOption() {
|
|
9613
|
-
return this.
|
|
9646
|
+
return this._options[this.selectedIndex] || null;
|
|
9614
9647
|
}
|
|
9615
9648
|
getSelectedIndex() {
|
|
9616
9649
|
return this.selectedIndex;
|
|
@@ -9619,8 +9652,8 @@ class SelectRenderable extends Renderable {
|
|
|
9619
9652
|
const newIndex = this.selectedIndex - steps;
|
|
9620
9653
|
if (newIndex >= 0) {
|
|
9621
9654
|
this.selectedIndex = newIndex;
|
|
9622
|
-
} else if (this.
|
|
9623
|
-
this.selectedIndex = this.
|
|
9655
|
+
} else if (this._wrapSelection && this._options.length > 0) {
|
|
9656
|
+
this.selectedIndex = this._options.length - 1;
|
|
9624
9657
|
} else {
|
|
9625
9658
|
this.selectedIndex = 0;
|
|
9626
9659
|
}
|
|
@@ -9630,12 +9663,12 @@ class SelectRenderable extends Renderable {
|
|
|
9630
9663
|
}
|
|
9631
9664
|
moveDown(steps = 1) {
|
|
9632
9665
|
const newIndex = this.selectedIndex + steps;
|
|
9633
|
-
if (newIndex < this.
|
|
9666
|
+
if (newIndex < this._options.length) {
|
|
9634
9667
|
this.selectedIndex = newIndex;
|
|
9635
|
-
} else if (this.
|
|
9668
|
+
} else if (this._wrapSelection && this._options.length > 0) {
|
|
9636
9669
|
this.selectedIndex = 0;
|
|
9637
9670
|
} else {
|
|
9638
|
-
this.selectedIndex = this.
|
|
9671
|
+
this.selectedIndex = this._options.length - 1;
|
|
9639
9672
|
}
|
|
9640
9673
|
this.updateScrollOffset();
|
|
9641
9674
|
this.needsUpdate();
|
|
@@ -9648,7 +9681,7 @@ class SelectRenderable extends Renderable {
|
|
|
9648
9681
|
}
|
|
9649
9682
|
}
|
|
9650
9683
|
setSelectedIndex(index) {
|
|
9651
|
-
if (index >= 0 && index < this.
|
|
9684
|
+
if (index >= 0 && index < this._options.length) {
|
|
9652
9685
|
this.selectedIndex = index;
|
|
9653
9686
|
this.updateScrollOffset();
|
|
9654
9687
|
this.needsUpdate();
|
|
@@ -9656,10 +9689,10 @@ class SelectRenderable extends Renderable {
|
|
|
9656
9689
|
}
|
|
9657
9690
|
}
|
|
9658
9691
|
updateScrollOffset() {
|
|
9659
|
-
if (!this.
|
|
9692
|
+
if (!this._options)
|
|
9660
9693
|
return;
|
|
9661
9694
|
const halfVisible = Math.floor(this.maxVisibleItems / 2);
|
|
9662
|
-
const newScrollOffset = Math.max(0, Math.min(this.selectedIndex - halfVisible, this.
|
|
9695
|
+
const newScrollOffset = Math.max(0, Math.min(this.selectedIndex - halfVisible, this._options.length - this.maxVisibleItems));
|
|
9663
9696
|
if (newScrollOffset !== this.scrollOffset) {
|
|
9664
9697
|
this.scrollOffset = newScrollOffset;
|
|
9665
9698
|
this.needsUpdate();
|
|
@@ -9676,11 +9709,11 @@ class SelectRenderable extends Renderable {
|
|
|
9676
9709
|
switch (keyName2) {
|
|
9677
9710
|
case "up":
|
|
9678
9711
|
case "k":
|
|
9679
|
-
this.moveUp(isShift ? this.
|
|
9712
|
+
this.moveUp(isShift ? this._fastScrollStep : 1);
|
|
9680
9713
|
return true;
|
|
9681
9714
|
case "down":
|
|
9682
9715
|
case "j":
|
|
9683
|
-
this.moveDown(isShift ? this.
|
|
9716
|
+
this.moveDown(isShift ? this._fastScrollStep : 1);
|
|
9684
9717
|
return true;
|
|
9685
9718
|
case "return":
|
|
9686
9719
|
case "enter":
|
|
@@ -9689,31 +9722,83 @@ class SelectRenderable extends Renderable {
|
|
|
9689
9722
|
}
|
|
9690
9723
|
return false;
|
|
9691
9724
|
}
|
|
9692
|
-
|
|
9693
|
-
return this.
|
|
9725
|
+
get showScrollIndicator() {
|
|
9726
|
+
return this._showScrollIndicator;
|
|
9694
9727
|
}
|
|
9695
|
-
|
|
9696
|
-
this.
|
|
9728
|
+
set showScrollIndicator(show) {
|
|
9729
|
+
this._showScrollIndicator = show;
|
|
9697
9730
|
this.needsUpdate();
|
|
9698
9731
|
}
|
|
9699
|
-
|
|
9700
|
-
return this.
|
|
9732
|
+
get showDescription() {
|
|
9733
|
+
return this._showDescription;
|
|
9701
9734
|
}
|
|
9702
|
-
|
|
9703
|
-
if (this.
|
|
9704
|
-
this.
|
|
9705
|
-
this.linesPerItem = this.
|
|
9706
|
-
this.linesPerItem += this.
|
|
9735
|
+
set showDescription(show) {
|
|
9736
|
+
if (this._showDescription !== show) {
|
|
9737
|
+
this._showDescription = show;
|
|
9738
|
+
this.linesPerItem = this._showDescription ? this._font ? this.fontHeight + 1 : 2 : this._font ? this.fontHeight : 1;
|
|
9739
|
+
this.linesPerItem += this._itemSpacing;
|
|
9707
9740
|
this.maxVisibleItems = Math.max(1, Math.floor(this.height / this.linesPerItem));
|
|
9708
9741
|
this.updateScrollOffset();
|
|
9709
9742
|
this.needsUpdate();
|
|
9710
9743
|
}
|
|
9711
9744
|
}
|
|
9712
|
-
|
|
9713
|
-
return this.
|
|
9745
|
+
get wrapSelection() {
|
|
9746
|
+
return this._wrapSelection;
|
|
9714
9747
|
}
|
|
9715
|
-
|
|
9716
|
-
this.
|
|
9748
|
+
set wrapSelection(wrap) {
|
|
9749
|
+
this._wrapSelection = wrap;
|
|
9750
|
+
}
|
|
9751
|
+
set backgroundColor(color) {
|
|
9752
|
+
this._backgroundColor = parseColor(color);
|
|
9753
|
+
this.needsUpdate();
|
|
9754
|
+
}
|
|
9755
|
+
set textColor(color) {
|
|
9756
|
+
this._textColor = parseColor(color);
|
|
9757
|
+
this.needsUpdate();
|
|
9758
|
+
}
|
|
9759
|
+
set focusedBackgroundColor(color) {
|
|
9760
|
+
this._focusedBackgroundColor = parseColor(color);
|
|
9761
|
+
this.needsUpdate();
|
|
9762
|
+
}
|
|
9763
|
+
set focusedTextColor(color) {
|
|
9764
|
+
this._focusedTextColor = parseColor(color);
|
|
9765
|
+
this.needsUpdate();
|
|
9766
|
+
}
|
|
9767
|
+
set selectedBackgroundColor(color) {
|
|
9768
|
+
this._selectedBackgroundColor = parseColor(color);
|
|
9769
|
+
this.needsUpdate();
|
|
9770
|
+
}
|
|
9771
|
+
set selectedTextColor(color) {
|
|
9772
|
+
this._selectedTextColor = parseColor(color);
|
|
9773
|
+
this.needsUpdate();
|
|
9774
|
+
}
|
|
9775
|
+
set descriptionColor(color) {
|
|
9776
|
+
this._descriptionColor = parseColor(color);
|
|
9777
|
+
this.needsUpdate();
|
|
9778
|
+
}
|
|
9779
|
+
set selectedDescriptionColor(color) {
|
|
9780
|
+
this._selectedDescriptionColor = parseColor(color);
|
|
9781
|
+
this.needsUpdate();
|
|
9782
|
+
}
|
|
9783
|
+
set font(font) {
|
|
9784
|
+
this._font = font;
|
|
9785
|
+
this.fontHeight = measureText({ text: "A", font: this._font }).height;
|
|
9786
|
+
this.linesPerItem = this._showDescription ? this._font ? this.fontHeight + 1 : 2 : this._font ? this.fontHeight : 1;
|
|
9787
|
+
this.linesPerItem += this._itemSpacing;
|
|
9788
|
+
this.maxVisibleItems = Math.max(1, Math.floor(this.height / this.linesPerItem));
|
|
9789
|
+
this.updateScrollOffset();
|
|
9790
|
+
this.needsUpdate();
|
|
9791
|
+
}
|
|
9792
|
+
set itemSpacing(spacing) {
|
|
9793
|
+
this._itemSpacing = spacing;
|
|
9794
|
+
this.linesPerItem = this._showDescription ? this._font ? this.fontHeight + 1 : 2 : this._font ? this.fontHeight : 1;
|
|
9795
|
+
this.linesPerItem += this._itemSpacing;
|
|
9796
|
+
this.maxVisibleItems = Math.max(1, Math.floor(this.height / this.linesPerItem));
|
|
9797
|
+
this.updateScrollOffset();
|
|
9798
|
+
this.needsUpdate();
|
|
9799
|
+
}
|
|
9800
|
+
set fastScrollStep(step) {
|
|
9801
|
+
this._fastScrollStep = step;
|
|
9717
9802
|
}
|
|
9718
9803
|
}
|
|
9719
9804
|
// src/renderables/TabSelect.ts
|
|
@@ -9735,7 +9820,7 @@ function calculateDynamicHeight(showUnderline, showDescription) {
|
|
|
9735
9820
|
|
|
9736
9821
|
class TabSelectRenderable extends Renderable {
|
|
9737
9822
|
focusable = true;
|
|
9738
|
-
options;
|
|
9823
|
+
options = [];
|
|
9739
9824
|
selectedIndex = 0;
|
|
9740
9825
|
scrollOffset = 0;
|
|
9741
9826
|
tabWidth;
|
|
@@ -9976,8 +10061,10 @@ export {
|
|
|
9976
10061
|
t,
|
|
9977
10062
|
stringToStyledText,
|
|
9978
10063
|
strikethrough,
|
|
10064
|
+
setRenderLibPath,
|
|
9979
10065
|
rgbToHex,
|
|
9980
10066
|
reverse,
|
|
10067
|
+
resolveRenderLib,
|
|
9981
10068
|
renderFontToFrameBuffer,
|
|
9982
10069
|
red,
|
|
9983
10070
|
parseKeypress,
|