Skip to content

GridNavigator, Scene & Button Improvements #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KierPalin merged 3 commits into from
Feb 24, 2025
Merged

GridNavigator, Scene & Button Improvements #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
70e15b5
Updated GridNavigator: supports hetrogenous rows
KierPalin Feb 20, 2025
38f0c55
scene constructor args are optional
KierPalin Feb 20, 2025
4223d3a
Button: all args are optional, checks are done in constructor
KierPalin Feb 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
namespace user_interface_base {

export class Borders {
constructor(
public top: number,
public bottom: number,
public left: number,
public right: number
) {}
) { }
}

export class ButtonStyle {
constructor(
public fill: number,
public borders: Borders,
public shadow: boolean
) {}
) { }
}

export namespace ButtonStyles {
Expand Down Expand Up @@ -148,8 +147,8 @@ namespace user_interface_base {
return !this.icon.invisible
}

public hover(hov: boolean) {}
public update() {}
public hover(hov: boolean) { }
public update() { }

isOffScreenX(): boolean {
return this.icon.isOffScreenX()
Expand Down Expand Up @@ -202,13 +201,11 @@ namespace user_interface_base {
public selected: boolean
private dynamicBoundaryColorsOn: boolean
private boundaryColor: number
public state: number[]
public pressable: boolean

public get ariaId(): string {
return (
this._ariaId ||
(typeof this.iconId === "string" ? <string>this.iconId : "")
)
return this._ariaId
}

public set ariaId(value: string) {
Expand All @@ -221,29 +218,30 @@ namespace user_interface_base {
value: this.ariaId,
force,
}
accessibility.setLiveContent(msg)
accessibility.setLiveContent(msg)
}

constructor(opts: {
parent?: IPlaceable
style?: ButtonStyle
icon: string | Bitmap
icon?: string | Bitmap
ariaId?: string
x: number
y: number
x?: number
y?: number
onClick?: (button: Button) => void,
dynamicBoundaryColorsOn?: boolean
boundaryColor?: number,
flipIcon?: boolean
flipIcon?: boolean,
state?: number[]
}) {
super(
opts.x,
opts.y,
(opts.x != null) ? opts.x : 0,
(opts.y != null) ? opts.y : 0,
opts.style || ButtonStyles.Transparent,
opts.parent && opts.parent.xfrm
)
this.iconId = opts.icon
this._ariaId = opts.ariaId
this._ariaId = (opts.ariaId != null) ? opts.ariaId : ""
this.onClick = opts.onClick
this.buildSprite(this.image_())

Expand All @@ -267,6 +265,8 @@ namespace user_interface_base {
this.dynamicBoundaryColorsOn = true
this.boundaryColor = opts.boundaryColor
}

this.state = opts.state
}

public getIcon() {
Expand All @@ -283,10 +283,10 @@ namespace user_interface_base {

private image_() {
return typeof this.iconId == "string"
? getIcon(this.iconId,false)
? getIcon(this.iconId, false)
: this.iconId
}

public setIcon(iconId: string, img?: Bitmap) {
this.iconId = iconId
if (img) this.icon.setImage(img)
Expand All @@ -310,7 +310,7 @@ namespace user_interface_base {
super.draw()

if (this.dynamicBoundaryColorsOn) {
const boundaryColour = (this.selected && this.pressable) ? 7: this.boundaryColor
const boundaryColour = (this.selected && this.pressable) ? 7 : this.boundaryColor

for (let dist = 1; dist <= 3; dist++) {
Screen.outlineBoundsXfrm(
Expand Down
6 changes: 3 additions & 3 deletions cursor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ namespace user_interface_base {
}

export interface CursorState {
navigator: INavigator
navigator: INavigator
pos: Vec2
ariaId: string
size: Bounds
Expand All @@ -48,7 +48,7 @@ namespace user_interface_base {
this.cancelHandlerStack = []
this.moveDest = new Vec2()
this.setSize()

this.cursorOutlineColour = DEFAULT_CURSOR_OUTLINE_COLOUR
}

Expand All @@ -70,7 +70,7 @@ namespace user_interface_base {
public snapTo(x: number, y: number, ariaId: string, sizeHint: Bounds) {
this.setSize(
sizeHint ||
new Bounds({ left: 0, top: 0, width: 16, height: 16 })
new Bounds({ left: 0, top: 0, width: 16, height: 16 })
)
this.moveDest.x = this.xfrm.localPos.x = x
this.moveDest.y = this.xfrm.localPos.y = y
Expand Down
86 changes: 56 additions & 30 deletions navigator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,41 +146,64 @@ namespace user_interface_base {
}



export class GridNavigator extends RowNavigator {
private height: number;
private width: number;
constructor(height: number, width: number) {
private widths: number[];

constructor(height: number, width?: number, widths?: number[]) {
super()
this.height = height
this.width = width

if (widths != null) {
this.widths = widths
}
else {
width = (width != null) ? width : 1
this.widths = []
for (let _ = 0; _ < width; _++)
this.widths.push(width)
}
}

public addButtons(btns: Button[]) {
this.buttonGroups.push(btns)
}

public move(dir: CursorDir) {
switch (dir) {
case CursorDir.Up: {
this.row = (((this.row - 1) % this.height) + this.height) % this.height; // Non-negative modulo

// Row above could have less cols, adjust if neccessary:
if (this.widths[this.row] <= this.col)
this.col = this.widths[this.row] - 1

break
}

case CursorDir.Down: {
this.row = (this.row + 1) % this.height;

// Row below could have less cols, adjust if neccessary:
if (this.widths[this.row] <= this.col)
this.col = this.widths[this.row] - 1
break
}

case CursorDir.Left: {
if (this.col == 0)
this.col = this.width - 1
this.col = this.widths[this.row] - 1
else
this.col -= 1
break
}

case CursorDir.Right: {
if (this.col == this.width)
if (this.col == this.widths[this.row])
this.col = 0
else
this.col = (this.col + 1) % this.width
else
this.col = (this.col + 1) % this.widths[this.row]
break
}

Expand All @@ -192,16 +215,19 @@ namespace user_interface_base {
}
}

const btn = this.buttonGroups[0][(this.row * this.width) + this.col]
const index = this.widths.slice(0, this.row).reduce((p, c) => p + c, 0)
const btn = this.buttonGroups[0][index + this.col]
this.reportAria(btn)
return btn
}

public getCurrent(): Button {
return this.buttonGroups[0][(this.row * this.width) + this.col]
const index = this.widths.slice(0, this.row).reduce((p, c) => p + c, 0)
return this.buttonGroups[0][index + this.col]
}
}


// mostly a matrix, except for last row, which may be ragged
// also supports delete button
// add support for aria
Expand All @@ -210,7 +236,7 @@ namespace user_interface_base {
protected row: number
protected col: number

constructor(private picker: Picker) {}
constructor(private picker: Picker) { }

private get width() {
return this.picker.width
Expand Down Expand Up @@ -257,7 +283,7 @@ namespace user_interface_base {
this.deleteButton = undefined
}

addButtons(btns: ButtonBase[]) {}
addButtons(btns: ButtonBase[]) { }

addDelete(btn: Button) {
this.deleteButton = btn
Expand Down Expand Up @@ -346,11 +372,11 @@ namespace user_interface_base {
if (this.row == -1) {
accessibility.setLiveContent(<
accessibility.TextAccessibilityMessage
>{
type: "text",
value: "delete_tile",
force: true,
})
>{
type: "text",
value: "delete_tile",
force: true,
})
}
}
}
Expand All @@ -368,13 +394,13 @@ namespace user_interface_base {
const on = true // TODO: btn.getIcon() == "solid_red"
accessibility.setLiveContent(<
accessibility.LEDAccessibilityMessage
>{
type: "led",
on,
x: this.col,
y: this.row,
force: true,
})
>{
type: "led",
on,
x: this.col,
y: this.row,
force: true,
})
}
}

Expand All @@ -392,12 +418,12 @@ namespace user_interface_base {
const index = this.hasDelete ? this.row - 1 : this.row
accessibility.setLiveContent(<
accessibility.NoteAccessibilityMessage
>{
type: "note",
on,
index,
force: true,
})
>{
type: "note",
on,
index,
force: true,
})
}
}
}
17 changes: 8 additions & 9 deletions scene.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
namespace user_interface_base {

const INPUT_PRIORITY = 10
const UPDATE_PRIORITY = 20
const RENDER_PRIORITY = 30
const SCREEN_PRIORITY = 100

export abstract class Scene implements IComponent {
export abstract class Scene implements IComponent {
private xfrm_: Affine
private color_: number
private backgroundCaptured_ = false
Expand All @@ -22,7 +21,7 @@ namespace user_interface_base {
this.color_ = v
}

constructor(protected app: AppInterface, public name: string) {
constructor(public app?: AppInterface, public name?: string) {
this.xfrm_ = new Affine()
this.color_ = 12
}
Expand All @@ -39,7 +38,7 @@ namespace user_interface_base {
}
}

/* abstract */ shutdown() {}
/* abstract */ shutdown() { }

/* override */ activate() {
profile()
Expand All @@ -49,15 +48,15 @@ namespace user_interface_base {
profile()
}

/* abstract */ update() {}
/* abstract */ update() { }

/* abstract */ draw() {}
/* abstract */ draw() { }

protected handleClick(x: number, y: number) {}
protected handleClick(x: number, y: number) { }

protected handleMove(x: number, y: number) {}
protected handleMove(x: number, y: number) { }

protected handleWheel(dx: number, dy: number) {}
protected handleWheel(dx: number, dy: number) { }

get backgroundCaptured() {
return !!this.backgroundCaptured_
Expand Down