= {}) {
+ if (!group) {
+ console.error("toButton called with null group");
+ return null;
+ }
+ const {
+ stateIndexes = [0, 1, 2, 0],
+ defaultTransform = [null, null, null, null],
+ z = 0,
+ cursor = "pointer",
+ callback = null,
+ focusable = true,
+ } = options;
+
+ if (!Array.isArray(group.children) || group.children.length === 0) {
+ console.error("Group must have children to elevate to Button");
+ return null;
+ }
+
+ const transforms: Array<[number, number, number, number]> = [];
+ const images: string[] = [];
+
+ stateIndexes.forEach(stateIndex => {
+ const layer = stateIndex >= 0 ? group.children[stateIndex] : null;
+
+ transforms.push([
+ layer?.x || defaultTransform[0] || 0,
+ layer?.y || defaultTransform[1] || 0,
+ layer?.width || defaultTransform[2] || 10,
+ layer?.height || defaultTransform[3] || 10,
+ ]);
+ images.push(layer ? (layer.domElement as HTMLImageElement)?.src || layer.sceneData.path || "" : "");
+ });
+
+ const buttonData = {
+ ...group.sceneData,
+ transforms,
+ z,
+ cursor,
+ images,
+ zIndex: group.zIndex,
+ callback,
+ focusable,
+ } as ButtonData;
+
+ const button = new Button(buttonData, group.parent, group.scene);
+ window.getEngine().getTopScene().addObject(button);
+
+ // Destroy all children first
+ group.children.forEach(child => child.destroy());
+
+ // Preserve the layer index in the parent's children array
+ preserveLayerIndex(group, button);
+
+ return button;
+}
diff --git a/src/Graphics/FocusableElement.ts b/src/Graphics/FocusableElement.ts
new file mode 100644
index 00000000..391f0ccf
--- /dev/null
+++ b/src/Graphics/FocusableElement.ts
@@ -0,0 +1,114 @@
+import type { IScene } from "@/Scene/Scene";
+import type { SceneElementData } from "@/Scene/SceneData";
+import $ from "jquery";
+import { SceneElement } from "./SceneElement";
+
+export class FocusableElement extends SceneElement {
+ permanentlyNonFocusable: boolean;
+ manualEnabled: boolean | null = null; // null = follow scene, true = enabled, false = disabled
+
+ constructor(
+ data: SceneElementData & { focusable?: boolean },
+ parent: SceneElement | null = null,
+ scene: IScene | null = null,
+ ) {
+ super(data, parent, scene);
+ this.permanentlyNonFocusable = data && data.focusable === false;
+
+ if (this.permanentlyNonFocusable) {
+ console.log("Element " + (data.name || "") + " set as non-focusable by data.");
+ $(this.domElement).attr("tabindex", "-1").addClass("non-focusable");
+ } else {
+ $(this.domElement).addClass("focusable");
+ }
+
+ this.updateFocusability();
+ }
+
+ setEnabled(enabled: boolean | null) {
+ this.manualEnabled = enabled;
+ this.updateFocusability();
+ }
+
+ applyInteractableState(enabled: boolean) {
+ if (!this.domElement) return;
+ const $el = $(this.domElement);
+ if (enabled) {
+ $el.css("pointer-events", "auto");
+ $el.removeAttr("tabindex");
+ $el.prop("disabled", false);
+ $el.removeClass("non-focusable").addClass("focusable");
+ } else {
+ if (this.scene && $el.is(":focus")) this.scene.lastFocusedElement = this.domElement;
+ $el.css("pointer-events", "none");
+ $el.prop("disabled", true);
+ $el.attr("tabindex", "-1");
+ if ($el.is(":focus")) $el.blur();
+ $el.removeClass("focusable").addClass("non-focusable");
+ }
+ if (this.permanentlyNonFocusable) {
+ $el.attr("tabindex", "-1").addClass("non-focusable");
+ if ($el.is(":focus")) $el.blur();
+ }
+ }
+
+ updateFocusability() {
+ if (!this.domElement) return;
+ if (this.manualEnabled === true) {
+ this.applyInteractableState(true);
+ return;
+ }
+ if (this.manualEnabled === false) {
+ this.applyInteractableState(false);
+ return;
+ }
+ // Follow scene state when manualEnabled is null
+ const isSceneFocusable = this.scene ? this.scene.isFocusable : true;
+ this.applyInteractableState(!!isSceneFocusable);
+ }
+
+ setFocus() {
+ if (!this.domElement) return false;
+ const $el = $(this.domElement);
+
+ const isFocusableNow =
+ !$el.prop("disabled") &&
+ $el.attr("tabindex") !== "-1" &&
+ ($el.css("pointer-events") || "").toLowerCase() !== "none" &&
+ $el.is(":visible") &&
+ $el.hasClass("focusable") &&
+ !$el.hasClass("non-focusable") &&
+ this.scene
+ ? this.scene.isFocusable !== false
+ : true;
+
+ if (!isFocusableNow) return false;
+
+ // Remember last focused element in the scene, if applicable
+ if (this.scene) this.scene.lastFocusedElement = this.domElement;
+
+ try {
+ // Prefer native focus with preventScroll to avoid jumping
+ if (typeof this.domElement.focus === "function") {
+ this.domElement.focus({ preventScroll: true });
+ } else {
+ $el.trigger("focus");
+ }
+ } catch (e) {
+ // Fallback if options aren't supported
+ try {
+ this.domElement.focus();
+ } catch (_) {}
+ }
+
+ return document && document.activeElement === this.domElement;
+ }
+
+ static updateFocusabilityRecursive(obj: FocusableElement | null) {
+ if (!obj) return;
+ if (typeof obj.updateFocusability === "function") obj.updateFocusability();
+ if (obj.children && obj.children.length) {
+ obj.children.forEach(child => FocusableElement.updateFocusabilityRecursive(child as FocusableElement));
+ }
+ }
+}
diff --git a/src/Graphics/Graphics.Background.js b/src/Graphics/Graphics.Background.js
deleted file mode 100644
index b3296d0b..00000000
--- a/src/Graphics/Graphics.Background.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import { SceneElement, preserveLayerIndex } from './Graphics.SceneElement.js';
-
-export class Background extends SceneElement {
- constructor(data, parent = null, scene = null) {
- data.isBackground = true;
-
- super(data, parent, scene);
-
- this.backgroundId = `bg-${Math.random().toString(36).substr(2, 9)}`;
- this.backgroundImageUrl = null;
- this.backgroundSize = data.backgroundSize || 'auto';
- this.backgroundPosition = data.backgroundPosition || 'center';
- this.backgroundRepeat = data.backgroundRepeat || 'no-repeat';
- this.transition = data.transition || null;
-
- // Infinite scroll properties
- this.scrollSpeed = {
- x: data.scrollSpeedX || 0,
- y: data.scrollSpeedY || 0
- };
- this.scrollOffset = { x: 0, y: 0 };
-
- this.recreateDOMAsBackground();
- }
-
- recreateDOMAsBackground() {
- if (this.domElement) {
- $(this.domElement).remove();
- }
-
- this.domElement = $('')
- .attr('id', this.backgroundId)
- .attr('layer-name', this.sceneData.name || 'Background')
- .css(this.buildBaseStyle({
- 'background-size': this.backgroundSize,
- 'background-repeat': this.backgroundRepeat,
- 'background-position': this.backgroundPosition,
- 'transition': this.transition || 'none',
- }))
- [0];
-
- super.syncDom();
- }
-
- async loadImage(path) {
- const fullImagePath = `/assets/scenes/${this.scene.name}/${path}.webp`;
- this.updateBackgroundImage(fullImagePath);
- }
-
- updateBackgroundImage(backgroundImageUrl = null) {
- if (!this.domElement) return;
- this.backgroundImageUrl = backgroundImageUrl;
- if(!backgroundImageUrl) this.backgroundImageUrl = '';
- $(this.domElement).css('background-image', `url('${this.backgroundImageUrl}')`);
- this.updateScrollPosition();
- }
-
- updateScrollPosition() {
- if (!this.domElement || (this.scrollSpeed?.x || 0) == 0 && (this.scrollSpeed?.y || 0) == 0) return;
- $(this.domElement).css('background-position', `${this.scrollOffset?.x || 0}px ${this.scrollOffset?.y || 0}px`);
- }
-
- resetScrollOffset() {
- this.scrollOffset.x = 0;
- this.scrollOffset.y = 0;
- this.updateScrollPosition();
- }
-
- update(deltaTime) {
- // Handle scroll offset
- if ((this.scrollSpeed?.x || 0) !== 0 || (this.scrollSpeed?.y || 0) !== 0) {
- if(isNaN(this.scrollOffset.x) || isNaN(this.scrollOffset.y)) {
- this.scrollOffset.x = 0;
- this.scrollOffset.y = 0;
- }
- this.scrollOffset.x += this.scrollSpeed.x * deltaTime;
- this.scrollOffset.y += this.scrollSpeed.y * deltaTime;
-
- this.updateScrollPosition();
- }
- }
-}
-
-export function toBackground(element, options = {}) {
- const {
- backgroundSize = 'cover',
- backgroundPosition = 'center',
- backgroundRepeat = 'repeat',
- scrollSpeedX = 0,
- scrollSpeedY = 0,
- transition = null,
- } = options;
-
- if (!element || !element.sceneData) {
- console.error('Element must be a valid SceneElement to elevate to Background');
- return null;
- }
-
- const backgroundData = {
- ...element.sceneData,
- backgroundSize,
- backgroundPosition,
- backgroundRepeat,
- scrollSpeedX,
- scrollSpeedY,
- transition,
- };
-
- const background = new Background(backgroundData, element.parent, element.scene);
- background.loadImage(element.sceneData.path);
-
- // Preserve the layer index in the parent's children array
- preserveLayerIndex(element, background);
-
- return background;
-}
diff --git a/src/Graphics/Graphics.Button.js b/src/Graphics/Graphics.Button.js
deleted file mode 100644
index 6bc440d8..00000000
--- a/src/Graphics/Graphics.Button.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import { FocusableElement } from './Graphics.FocusableElement.js';
-import { preserveLayerIndex } from './Graphics.SceneElement.js';
-
-export class Button extends FocusableElement {
- constructor(data, parent = null, scene) {
- data.isButton = true;
-
- super(data, parent, scene);
-
- this.transforms = data.transforms || [];
- this.width = this.transforms[0]?.[2] || 10;
- this.height = this.transforms[0]?.[3] || 10;
-
- this.images = data.images;
- this.onClickHandler = null;
- this.buttonId = `btn-${Math.random().toString(36).substr(2, 9)}`;
- this.isButton = true;
- this.transform.z = data.z || 0;
- this.cursor = data.cursor || 'pointer';
-
- this.recreateDOMAsButton();
- this.injectCSSRules();
- if(data.callback) this.onClick(data.callback);
- }
-
- recreateDOMAsButton() {
- let classNames = ''
- if (this.domElement) {
- classNames = $(this.domElement).attr('class').split(' ');
- $(this.domElement).remove();
- }
-
- this.domElement = $('