BuboBubo/topos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding another canvas

Browse Source
This commit is contained in:
Raphaël Forment
2023-10-22 23:28:08 +02:00
parent 9ca8853539
commit b2f77b3b38
4 changed files with 16 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
index.html
View File

@ -27,7 +27,7 @@
} }
#hydra-bg { .fullscreencanvas {
position: fixed; /* ignore margins */ position: fixed; /* ignore margins */
top: 0px; top: 0px;
left: 0px; left: 0px;
@ -39,20 +39,6 @@
display: block; 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 { details br {
display: none; display: none;
} }
@ -465,8 +451,9 @@
</ul> </ul>
<!-- Here comes the editor itself --> <!-- Here comes the editor itself -->
<div id="editor" class="relative flex flex-row h-screen overflow-y-hidden"> <div id="editor" class="relative flex flex-row h-screen overflow-y-hidden">
<canvas id="hydra-bg"></canvas> <canvas id="hydra-bg" class="fullscreencanvas"></canvas>
<canvas id="feedback"></canvas> <canvas id="scope" class="fullscreencanvas"></canvas>
<canvas id="feedback" class="fullscreencanvas"></canvas>
</div> </div>
<p id="error_line" class="hidden text-red-400 w-screen bg-neutral-900 font-mono absolute bottom-0 pl-2 py-2">Hello kids</p> <p id="error_line" class="hidden text-red-400 w-screen bg-neutral-900 font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
</div> </div>

1
src/DomElements.ts
View File

@ -48,6 +48,7 @@ export const singleElements = {
error_line: "error_line", error_line: "error_line",
hydra_canvas: "hydra-bg", hydra_canvas: "hydra-bg",
feedback: "feedback", feedback: "feedback",
scope: "scope",
}; };
export const buttonGroups = { export const buttonGroups = {

10
src/WindowBehavior.ts
View File

@ -1,7 +1,6 @@
import { type Editor } from "./main"; import { type Editor } from "./main";
const handleResize = (app: Editor) => { const handleResize = (canvas: HTMLCanvasElement) => {
const canvas = app.interface.feedback as HTMLCanvasElement | null; // add type guard
if (!canvas) return; if (!canvas) return;
canvas.width = window.innerWidth; canvas.width = window.innerWidth;
canvas.height = window.innerHeight; canvas.height = window.innerHeight;
@ -22,7 +21,12 @@ export const installWindowBehaviors = (
window: Window, window: Window,
preventMultipleTabs: boolean = false 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", () => { window.addEventListener("beforeunload", () => {
// @ts-ignore // @ts-ignore
event.preventDefault(); event.preventDefault();

10
src/main.ts
View File

@ -62,7 +62,6 @@ export class Editor {
osc: OscilloscopeConfig = { osc: OscilloscopeConfig = {
enabled: true, enabled: true,
color: "#fdba74", color: "#fdba74",
randomColor: true,
thickness: 2, thickness: 2,
fftSize: 2048, fftSize: 2048,
orientation: "horizontal", orientation: "horizontal",
@ -92,7 +91,8 @@ export class Editor {
this.initializeElements(); this.initializeElements();
this.initializeButtonGroups(); this.initializeButtonGroups();
this.initializeHydra(); this.initializeHydra();
this.setCanvas(); this.setCanvas(this.interface.feedback as HTMLCanvasElement);
this.setCanvas(this.interface.scope as HTMLCanvasElement);
// ================================================================================ // ================================================================================
// Loading the universe from local storage // Loading the universe from local storage
@ -148,7 +148,7 @@ export class Editor {
// ================================================================================ // ================================================================================
installEditor(this); installEditor(this);
runOscilloscope(this.interface.feedback as HTMLCanvasElement, this); runOscilloscope(this.interface.scope as HTMLCanvasElement, this);
// First evaluation of the init file // First evaluation of the init file
tryEvaluate(this, this.universes[this.selected_universe.toString()].init); tryEvaluate(this, this.universes[this.selected_universe.toString()].init);
@ -456,9 +456,7 @@ export class Editor {
this.hydra = this.hydra_backend.synth; this.hydra = this.hydra_backend.synth;
} }
private setCanvas(): void { private setCanvas(canvas: HTMLCanvasElement): void {
const canvas = this.interface.feedback as HTMLCanvasElement | null; // add type guard
if (!canvas) return; if (!canvas) return;
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");