diff --git a/index.html b/index.html index e394563..1c161cd 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@ } - #hydra-bg { + .fullscreencanvas { position: fixed; /* ignore margins */ top: 0px; left: 0px; @@ -39,20 +39,6 @@ display: block; } - #feedback { - position: fixed; /* ignore margins */ - top: 0px; - left: 0px; - width: 100%; /* fill screen */ - height: 100%; - background-size: cover; - overflow-y: hidden; - z-index: -1; /* place behind everything else */ - display: block; - } - - - details br { display: none; } @@ -465,8 +451,9 @@
Hello kids
diff --git a/src/DomElements.ts b/src/DomElements.ts index f5d8c57..de5b0ce 100644 --- a/src/DomElements.ts +++ b/src/DomElements.ts @@ -48,6 +48,7 @@ export const singleElements = { error_line: "error_line", hydra_canvas: "hydra-bg", feedback: "feedback", + scope: "scope", }; export const buttonGroups = { diff --git a/src/WindowBehavior.ts b/src/WindowBehavior.ts index 84a966f..2ddba53 100644 --- a/src/WindowBehavior.ts +++ b/src/WindowBehavior.ts @@ -1,7 +1,6 @@ import { type Editor } from "./main"; -const handleResize = (app: Editor) => { - const canvas = app.interface.feedback as HTMLCanvasElement | null; // add type guard +const handleResize = (canvas: HTMLCanvasElement) => { if (!canvas) return; canvas.width = window.innerWidth; canvas.height = window.innerHeight; @@ -22,7 +21,12 @@ export const installWindowBehaviors = ( window: Window, preventMultipleTabs: boolean = false ) => { - window.addEventListener("resize", () => handleResize(app)); + window.addEventListener("resize", () => + handleResize(app.interface.scope as HTMLCanvasElement) + ); + window.addEventListener("resize", () => + handleResize(app.interface.feedback as HTMLCanvasElement) + ); window.addEventListener("beforeunload", () => { // @ts-ignore event.preventDefault(); diff --git a/src/main.ts b/src/main.ts index e65ffc8..7d796be 100644 --- a/src/main.ts +++ b/src/main.ts @@ -62,7 +62,6 @@ export class Editor { osc: OscilloscopeConfig = { enabled: true, color: "#fdba74", - randomColor: true, thickness: 2, fftSize: 2048, orientation: "horizontal", @@ -92,7 +91,8 @@ export class Editor { this.initializeElements(); this.initializeButtonGroups(); this.initializeHydra(); - this.setCanvas(); + this.setCanvas(this.interface.feedback as HTMLCanvasElement); + this.setCanvas(this.interface.scope as HTMLCanvasElement); // ================================================================================ // Loading the universe from local storage @@ -148,7 +148,7 @@ export class Editor { // ================================================================================ installEditor(this); - runOscilloscope(this.interface.feedback as HTMLCanvasElement, this); + runOscilloscope(this.interface.scope as HTMLCanvasElement, this); // First evaluation of the init file tryEvaluate(this, this.universes[this.selected_universe.toString()].init); @@ -456,9 +456,7 @@ export class Editor { this.hydra = this.hydra_backend.synth; } - private setCanvas(): void { - const canvas = this.interface.feedback as HTMLCanvasElement | null; // add type guard - + private setCanvas(canvas: HTMLCanvasElement): void { if (!canvas) return; const ctx = canvas.getContext("2d");