Skip to content

Commit 82ae78a

Browse files
KierPalinKierPalin
authored
Merge pull request #2: GridNavigator, Scene & Button Improvements
2 parents 949c832 + 4223d3a commit 82ae78a

File tree

4 files changed

+87
-62
lines changed

4 files changed

+87
-62
lines changed

‎button.ts‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
namespace user_interface_base {
2-
32
export class Borders {
43
constructor(
54
public top: number,
65
public bottom: number,
76
public left: number,
87
public right: number
9-
) {}
8+
) { }
109
}
1110

1211
export class ButtonStyle {
1312
constructor(
1413
public fill: number,
1514
public borders: Borders,
1615
public shadow: boolean
17-
) {}
16+
) { }
1817
}
1918

2019
export namespace ButtonStyles {
@@ -148,8 +147,8 @@ namespace user_interface_base {
148147
return !this.icon.invisible
149148
}
150149

151-
public hover(hov: boolean) {}
152-
public update() {}
150+
public hover(hov: boolean) { }
151+
public update() { }
153152

154153
isOffScreenX(): boolean {
155154
return this.icon.isOffScreenX()
@@ -202,13 +201,11 @@ namespace user_interface_base {
202201
public selected: boolean
203202
private dynamicBoundaryColorsOn: boolean
204203
private boundaryColor: number
204+
public state: number[]
205205
public pressable: boolean
206206

207207
public get ariaId(): string {
208-
return (
209-
this._ariaId ||
210-
(typeof this.iconId === "string" ? <string>this.iconId : "")
211-
)
208+
return this._ariaId
212209
}
213210

214211
public set ariaId(value: string) {
@@ -221,29 +218,30 @@ namespace user_interface_base {
221218
value: this.ariaId,
222219
force,
223220
}
224-
accessibility.setLiveContent(msg)
221+
accessibility.setLiveContent(msg)
225222
}
226223

227224
constructor(opts: {
228225
parent?: IPlaceable
229226
style?: ButtonStyle
230-
icon: string | Bitmap
227+
icon?: string | Bitmap
231228
ariaId?: string
232-
x: number
233-
y: number
229+
x?: number
230+
y?: number
234231
onClick?: (button: Button) => void,
235232
dynamicBoundaryColorsOn?: boolean
236233
boundaryColor?: number,
237-
flipIcon?: boolean
234+
flipIcon?: boolean,
235+
state?: number[]
238236
}) {
239237
super(
240-
opts.x,
241-
opts.y,
238+
(opts.x != null) ? opts.x : 0,
239+
(opts.y != null) ? opts.y : 0,
242240
opts.style || ButtonStyles.Transparent,
243241
opts.parent && opts.parent.xfrm
244242
)
245243
this.iconId = opts.icon
246-
this._ariaId = opts.ariaId
244+
this._ariaId = (opts.ariaId != null) ? opts.ariaId : ""
247245
this.onClick = opts.onClick
248246
this.buildSprite(this.image_())
249247

@@ -267,6 +265,8 @@ namespace user_interface_base {
267265
this.dynamicBoundaryColorsOn = true
268266
this.boundaryColor = opts.boundaryColor
269267
}
268+
269+
this.state = opts.state
270270
}
271271

272272
public getIcon() {
@@ -283,10 +283,10 @@ namespace user_interface_base {
283283

284284
private image_() {
285285
return typeof this.iconId == "string"
286-
? getIcon(this.iconId,false)
286+
? getIcon(this.iconId, false)
287287
: this.iconId
288288
}
289-
289+
290290
public setIcon(iconId: string, img?: Bitmap) {
291291
this.iconId = iconId
292292
if (img) this.icon.setImage(img)
@@ -310,7 +310,7 @@ namespace user_interface_base {
310310
super.draw()
311311

312312
if (this.dynamicBoundaryColorsOn) {
313-
const boundaryColour = (this.selected && this.pressable) ? 7: this.boundaryColor
313+
const boundaryColour = (this.selected && this.pressable) ? 7 : this.boundaryColor
314314

315315
for (let dist = 1; dist <= 3; dist++) {
316316
Screen.outlineBoundsXfrm(

‎cursor.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ namespace user_interface_base {
2323
}
2424

2525
export interface CursorState {
26-
navigator: INavigator
26+
navigator: INavigator
2727
pos: Vec2
2828
ariaId: string
2929
size: Bounds
@@ -48,7 +48,7 @@ namespace user_interface_base {
4848
this.cancelHandlerStack = []
4949
this.moveDest = new Vec2()
5050
this.setSize()
51-
51+
5252
this.cursorOutlineColour = DEFAULT_CURSOR_OUTLINE_COLOUR
5353
}
5454

@@ -70,7 +70,7 @@ namespace user_interface_base {
7070
public snapTo(x: number, y: number, ariaId: string, sizeHint: Bounds) {
7171
this.setSize(
7272
sizeHint ||
73-
new Bounds({ left: 0, top: 0, width: 16, height: 16 })
73+
new Bounds({ left: 0, top: 0, width: 16, height: 16 })
7474
)
7575
this.moveDest.x = this.xfrm.localPos.x = x
7676
this.moveDest.y = this.xfrm.localPos.y = y

‎navigator.ts‎

Lines changed: 56 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -146,41 +146,64 @@ namespace user_interface_base {
146146
}
147147

148148

149+
149150
export class GridNavigator extends RowNavigator {
150151
private height: number;
151-
private width: number;
152-
153-
constructor(height: number, width: number) {
152+
private widths: number[];
153+
154+
constructor(height: number, width?: number, widths?: number[]) {
154155
super()
155156
this.height = height
156-
this.width = width
157+
158+
if (widths != null) {
159+
this.widths = widths
160+
}
161+
else {
162+
width = (width != null) ? width : 1
163+
this.widths = []
164+
for (let _ = 0; _ < width; _++)
165+
this.widths.push(width)
166+
}
167+
}
168+
169+
public addButtons(btns: Button[]) {
170+
this.buttonGroups.push(btns)
157171
}
158172

159173
public move(dir: CursorDir) {
160174
switch (dir) {
161175
case CursorDir.Up: {
162176
this.row = (((this.row - 1) % this.height) + this.height) % this.height; // Non-negative modulo
177+
178+
// Row above could have less cols, adjust if neccessary:
179+
if (this.widths[this.row] <= this.col)
180+
this.col = this.widths[this.row] - 1
181+
163182
break
164183
}
165184

166185
case CursorDir.Down: {
167186
this.row = (this.row + 1) % this.height;
187+
188+
// Row below could have less cols, adjust if neccessary:
189+
if (this.widths[this.row] <= this.col)
190+
this.col = this.widths[this.row] - 1
168191
break
169192
}
170193

171194
case CursorDir.Left: {
172195
if (this.col == 0)
173-
this.col = this.width - 1
196+
this.col = this.widths[this.row] - 1
174197
else
175198
this.col -= 1
176199
break
177200
}
178201

179202
case CursorDir.Right: {
180-
if (this.col == this.width)
203+
if (this.col == this.widths[this.row])
181204
this.col = 0
182-
else
183-
this.col = (this.col + 1) % this.width
205+
else
206+
this.col = (this.col + 1) % this.widths[this.row]
184207
break
185208
}
186209

@@ -192,16 +215,19 @@ namespace user_interface_base {
192215
}
193216
}
194217

195-
const btn = this.buttonGroups[0][(this.row * this.width) + this.col]
218+
const index = this.widths.slice(0, this.row).reduce((p, c) => p + c, 0)
219+
const btn = this.buttonGroups[0][index + this.col]
196220
this.reportAria(btn)
197221
return btn
198222
}
199223

200224
public getCurrent(): Button {
201-
return this.buttonGroups[0][(this.row * this.width) + this.col]
225+
const index = this.widths.slice(0, this.row).reduce((p, c) => p + c, 0)
226+
return this.buttonGroups[0][index + this.col]
202227
}
203228
}
204229

230+
205231
// mostly a matrix, except for last row, which may be ragged
206232
// also supports delete button
207233
// add support for aria
@@ -210,7 +236,7 @@ namespace user_interface_base {
210236
protected row: number
211237
protected col: number
212238

213-
constructor(private picker: Picker) {}
239+
constructor(private picker: Picker) { }
214240

215241
private get width() {
216242
return this.picker.width
@@ -257,7 +283,7 @@ namespace user_interface_base {
257283
this.deleteButton = undefined
258284
}
259285

260-
addButtons(btns: ButtonBase[]) {}
286+
addButtons(btns: ButtonBase[]) { }
261287

262288
addDelete(btn: Button) {
263289
this.deleteButton = btn
@@ -346,11 +372,11 @@ namespace user_interface_base {
346372
if (this.row == -1) {
347373
accessibility.setLiveContent(<
348374
accessibility.TextAccessibilityMessage
349-
>{
350-
type: "text",
351-
value: "delete_tile",
352-
force: true,
353-
})
375+
>{
376+
type: "text",
377+
value: "delete_tile",
378+
force: true,
379+
})
354380
}
355381
}
356382
}
@@ -368,13 +394,13 @@ namespace user_interface_base {
368394
const on = true // TODO: btn.getIcon() == "solid_red"
369395
accessibility.setLiveContent(<
370396
accessibility.LEDAccessibilityMessage
371-
>{
372-
type: "led",
373-
on,
374-
x: this.col,
375-
y: this.row,
376-
force: true,
377-
})
397+
>{
398+
type: "led",
399+
on,
400+
x: this.col,
401+
y: this.row,
402+
force: true,
403+
})
378404
}
379405
}
380406

@@ -392,12 +418,12 @@ namespace user_interface_base {
392418
const index = this.hasDelete ? this.row - 1 : this.row
393419
accessibility.setLiveContent(<
394420
accessibility.NoteAccessibilityMessage
395-
>{
396-
type: "note",
397-
on,
398-
index,
399-
force: true,
400-
})
421+
>{
422+
type: "note",
423+
on,
424+
index,
425+
force: true,
426+
})
401427
}
402428
}
403429
}

‎scene.ts‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
namespace user_interface_base {
2-
32
const INPUT_PRIORITY = 10
43
const UPDATE_PRIORITY = 20
54
const RENDER_PRIORITY = 30
65
const SCREEN_PRIORITY = 100
76

8-
export abstract class Scene implements IComponent {
7+
export abstract class Scene implements IComponent {
98
private xfrm_: Affine
109
private color_: number
1110
private backgroundCaptured_ = false
@@ -22,7 +21,7 @@ namespace user_interface_base {
2221
this.color_ = v
2322
}
2423

25-
constructor(protected app: AppInterface, public name: string) {
24+
constructor(public app?: AppInterface, public name?: string) {
2625
this.xfrm_ = new Affine()
2726
this.color_ = 12
2827
}
@@ -39,7 +38,7 @@ namespace user_interface_base {
3938
}
4039
}
4140

42-
/* abstract */ shutdown() {}
41+
/* abstract */ shutdown() { }
4342

4443
/* override */ activate() {
4544
profile()
@@ -49,15 +48,15 @@ namespace user_interface_base {
4948
profile()
5049
}
5150

52-
/* abstract */ update() {}
51+
/* abstract */ update() { }
5352

54-
/* abstract */ draw() {}
53+
/* abstract */ draw() { }
5554

56-
protected handleClick(x: number, y: number) {}
55+
protected handleClick(x: number, y: number) { }
5756

58-
protected handleMove(x: number, y: number) {}
57+
protected handleMove(x: number, y: number) { }
5958

60-
protected handleWheel(dx: number, dy: number) {}
59+
protected handleWheel(dx: number, dy: number) { }
6160

6261
get backgroundCaptured() {
6362
return !!this.backgroundCaptured_

0 commit comments

Comments
 (0)