Cursor boundary colour can now be set to match that of the button it moves to.

Author: KierPalin

button.ts

@@ -195,14 +195,14 @@ namespace user_interface_base {
     }
 
     export class Button extends ButtonBase {
-        private iconId: string | Bitmap
-        private _ariaId: string
+        public boundaryColor: number
+        public state: number[]
+        public pressable: boolean
         public onClick?: (button: Button) => void
         public selected: boolean
+        private iconId: string | Bitmap
+        private _ariaId: string
         private dynamicBoundaryColorsOn: boolean
-        private boundaryColor: number
-        public state: number[]
-        public pressable: boolean
 
         public get ariaId(): string {
             return this._ariaId
@@ -212,14 +212,12 @@ namespace user_interface_base {
             this._ariaId = value
         }
 
-
         get getLocalX() { return this.xfrm.localPos.x }
         get getLocalY() { return this.xfrm.localPos.y }
 
         set setLocalX(x: number) { this.xfrm.localPos.x = x }
         set setLocalY(y: number) { this.xfrm.localPos.y = y }
 
-
         reportAria(force = false) {
             const msg: accessibility.TileAccessibilityMessage = {
                 type: "tile",
@@ -274,6 +272,10 @@ namespace user_interface_base {
                 this.boundaryColor = opts.boundaryColor
             }
 
+            else {
+                this.boundaryColor = 0
+            }
+
             this.state = opts.state
         }
 

cursor.ts

@@ -38,7 +38,6 @@ namespace user_interface_base {
         ariaPos: Vec2
         ariaId: string
         size: Bounds
-        borderThickness: number
         visible = true
 
         resetOutlineColourOnMove = false
@@ -48,15 +47,16 @@ namespace user_interface_base {
             this.xfrm = new Affine()
             this.cancelHandlerStack = []
             this.moveDest = new Vec2()
-            this.borderThickness = 3
             this.setSize()
 
             this.cursorOutlineColour = DEFAULT_CURSOR_OUTLINE_COLOUR
         }
 
-        public moveTo(pos: Vec2, ariaId: string, sizeHint: Bounds) {
+        public moveTo(pos: Vec2, ariaId: string, sizeHint: Bounds, newBoundaryColour?: number) {
             if (this.resetOutlineColourOnMove)
                 this.setOutlineColour(DEFAULT_CURSOR_OUTLINE_COLOUR)
+            if (newBoundaryColour)
+                this.setOutlineColour(newBoundaryColour)
 
             this.setSize(sizeHint)
             this.moveDest.copyFrom(pos)
@@ -72,7 +72,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
@@ -86,8 +86,7 @@ namespace user_interface_base {
             else this.size = size.clone()
         }
 
-        public setOutlineColour(colour: number = 9) {
-            // 9 is the DEFAULT_CURSOR_OUTLINE_COLOUR
+        public setOutlineColour(colour: number = 9) { // 9 is the DEFAULT_CURSOR_OUTLINE_COLOUR
             this.cursorOutlineColour = colour
         }
 
@@ -131,23 +130,19 @@ namespace user_interface_base {
             return false
         }
 
-        public setBorderThickness(thickness: number) {
-            this.borderThickness = thickness
-        }
-
         update() {
             this.xfrm.localPos.copyFrom(this.moveDest)
         }
 
         draw() {
             if (!this.visible) return
 
-            for (let dist = 1; dist <= this.borderThickness; dist++) {
+            for (let dist = 1; dist <= 3; dist++) {
                 Screen.outlineBoundsXfrm(
                     this.xfrm,
                     this.size,
                     dist,
-                    this.cursorOutlineColour,
+                    this.cursorOutlineColour
                 )
             }
 
@@ -159,11 +154,11 @@ namespace user_interface_base {
                 const h = font.charHeight
                 const x = Math.max(
                     Screen.LEFT_EDGE + 1,
-                    Math.min(Screen.RIGHT_EDGE - 1 - w, pos.x - (w >> 1)),
+                    Math.min(Screen.RIGHT_EDGE - 1 - w, pos.x - (w >> 1))
                 )
                 const y = Math.min(
                     pos.y + (this.size.width >> 1) + (font.charHeight >> 1) + 1,
-                    Screen.BOTTOM_EDGE - 1 - font.charHeight,
+                    Screen.BOTTOM_EDGE - 1 - font.charHeight
                 )
                 Screen.fillRect(x - 1, y - 1, w + 1, h + 2, 15)
                 Screen.print(text, x, y, 1, font)

cursorscene.ts

@@ -50,7 +50,8 @@ namespace user_interface_base {
             this.cursor.moveTo(
                 target.xfrm.worldPos,
                 target.ariaId,
-                target.bounds
+                target.bounds,
+                this.navigator.makeCursorButtonBoundaryColor() ? target.boundaryColor : undefined
             )
         }
 

navigator.ts

@@ -9,7 +9,8 @@ namespace user_interface_base {
         screenToButton: (x: number, y: number) => Button
         initialCursor: (row: number, col: number) => Button
         updateAria: () => void
-        drawComponents(): void;
+        drawComponents(): void
+        makeCursorButtonBoundaryColor(): boolean
     }
 
     export const BACK_BUTTON_ERROR_KIND = "back_button"
@@ -47,6 +48,10 @@ namespace user_interface_base {
             this.buttonGroups.push(btns)
         }
 
+        public makeCursorButtonBoundaryColor() {
+            return false;
+        }
+
         /**
         * Append a col during runtime.
         * Does not need to be the same size as the grid height
@@ -175,8 +180,9 @@ namespace user_interface_base {
     export class GridNavigator extends RowNavigator {
         private height: number;
         private widths: number[];
+        private cursorColorIsButtonColor: boolean;
 
-        constructor(btns?: Button[][]) {
+        constructor(btns?: Button[][], cursorColorIsButtonColor: boolean = false) {
             super()
 
             if (btns) {
@@ -187,6 +193,13 @@ namespace user_interface_base {
                 this.height = 0;
                 this.widths = []
             }
+
+            this.cursorColorIsButtonColor = cursorColorIsButtonColor;
+        }
+
+
+        public isCursorColorIsButtonColor() {
+            return this.cursorColorIsButtonColor;
         }
 
         public setBtns(btns: Button[][]) {
@@ -304,6 +317,9 @@ namespace user_interface_base {
         public addRow(btns: Button[]) { }
         public addCol(btns: Button[]) { }
 
+        public makeCursorButtonBoundaryColor() {
+            return false;
+        }
 
         moveToIndex(index: number) {
             control.assert(index < this.length, "index out of bounds")