From 75daa2cf6a827a2c92ac5d1041ea46aab09b0ad7 Mon Sep 17 00:00:00 2001 From: Raphael Forment Date: Wed, 17 Apr 2024 01:19:10 +0200 Subject: [PATCH] Removing one more canvas --- index.html | 21 +++++++----------- src/API/Canvas.ts | 42 ++++++++++++++++++------------------ src/DOM/DomElements.ts | 1 - src/DOM/Visuals/Blinkers.ts | 2 +- src/DOM/WindowBehavior.ts | 2 +- src/main.ts | 43 +++++++++++++++++++++---------------- 6 files changed, 56 insertions(+), 55 deletions(-) diff --git a/index.html b/index.html index ec8357f..5f83fc4 100644 --- a/index.html +++ b/index.html @@ -32,26 +32,22 @@ } .hydracanvas { - position: fixed; /* ignore margins */ - top: 0px; - left: 0px; - width: 100%; /* fill screen */ - height: 100%; + position: fixed; + top: 0px; left: 0px; + width: 100%; height: 100%; background-size: cover; overflow-y: hidden; - z-index: -5; /* place behind everything else */ + z-index: -5; display: block; } .fullscreencanvas { - position: fixed; /* ignore margins */ - top: 0px; - left: 0px; - width: 100%; /* fill screen */ - height: 100%; + position: fixed; + top: 0px; left: 0px; + width: 100%; height: 100%; background-size: cover; overflow-y: hidden; - z-index: -1; /* place behind everything else */ + z-index: -1; display: block; } @@ -576,7 +572,6 @@
-
diff --git a/src/API/Canvas.ts b/src/API/Canvas.ts index 1a7d220..167178d 100644 --- a/src/API/Canvas.ts +++ b/src/API/Canvas.ts @@ -3,7 +3,7 @@ import { ShapeObject, createConicGradient, createLinearGradient, createRadialGra import { Editor } from "../main"; export const w = (app: Editor) => (): number => { - const canvas: HTMLCanvasElement = app.interface.drawings as HTMLCanvasElement; + const canvas: HTMLCanvasElement = app.interface.feedback as HTMLCanvasElement; return canvas.clientWidth; }; @@ -12,7 +12,7 @@ export const pulseLocation = (app: Editor) => (): number => { }; export const clear = (app: Editor) => (): boolean => { - const canvas: HTMLCanvasElement = app.interface.drawings as HTMLCanvasElement; + const canvas: HTMLCanvasElement = app.interface.feedback as HTMLCanvasElement; const ctx = canvas.getContext("2d")!; ctx.clearRect(0, 0, canvas.width, canvas.height); return true; @@ -20,7 +20,7 @@ export const clear = (app: Editor) => (): boolean => { export const h = (app: Editor) => (): number => { - const canvas: HTMLCanvasElement = app.interface.drawings as HTMLCanvasElement; + const canvas: HTMLCanvasElement = app.interface.feedback as HTMLCanvasElement; return canvas.clientHeight; }; @@ -33,28 +33,28 @@ export const wc = (app: Editor) => (): number => { }; export const background = (app: Editor) => (color: string | number, ...gb: number[]): boolean => { - drawBackground(app.interface.drawings as HTMLCanvasElement, color, ...gb); + drawBackground(app.interface.feedback as HTMLCanvasElement, color, ...gb); return true; }; export const bg = background; export const linearGradient = (app: Editor) => (x1: number, y1: number, x2: number, y2: number, ...stops: (number | string)[]): CanvasGradient => { - return createLinearGradient(app.interface.drawings as HTMLCanvasElement, x1, y1, x2, y2, ...stops); + return createLinearGradient(app.interface.feedback as HTMLCanvasElement, x1, y1, x2, y2, ...stops); }; export const radialGradient = (app: Editor) => (x1: number, y1: number, r1: number, x2: number, y2: number, r2: number, ...stops: (number | string)[]) => { - return createRadialGradient(app.interface.drawings as HTMLCanvasElement, x1, y1, r1, x2, y2, r2, ...stops); + return createRadialGradient(app.interface.feedback as HTMLCanvasElement, x1, y1, r1, x2, y2, r2, ...stops); }; export const conicGradient = (app: Editor) => (x: number, y: number, angle: number, ...stops: (number | string)[]) => { - return createConicGradient(app.interface.drawings as HTMLCanvasElement, x, y, angle, ...stops); + return createConicGradient(app.interface.feedback as HTMLCanvasElement, x, y, angle, ...stops); }; export const draw = (app: Editor) => (func: Function): boolean => { if (typeof func === "string") { - drawText(app.interface.drawings as HTMLCanvasElement, func, 24, 0, "Arial", wc(app)(), hc(app)(), "white", "none"); + drawText(app.interface.feedback as HTMLCanvasElement, func, 24, 0, "Arial", wc(app)(), hc(app)(), "white", "none"); } else { - const canvas: HTMLCanvasElement = app.interface.drawings as HTMLCanvasElement; + const canvas: HTMLCanvasElement = app.interface.feedback as HTMLCanvasElement; const ctx = canvas.getContext("2d")!; func(ctx); } @@ -79,7 +79,7 @@ export const balloid = (app: Editor) => ( radius = curves.radius || hc(app)() / 2; curves = curves.curves || 6; } - drawBalloid(app.interface.drawings as HTMLCanvasElement, curves, radius, curve, fillStyle, secondary, x, y); + drawBalloid(app.interface.feedback as HTMLCanvasElement, curves, radius, curve, fillStyle, secondary, x, y); return true; }; @@ -97,7 +97,7 @@ export const equilateral = (app: Editor) => ( rotation = radius.rotation || 0; radius = radius.radius || hc(app)() / 3; } - drawEquilateral(app.interface.drawings as HTMLCanvasElement, radius, fillStyle, rotation, x, y); + drawEquilateral(app.interface.feedback as HTMLCanvasElement, radius, fillStyle, rotation, x, y); return true; }; @@ -117,7 +117,7 @@ export const triangular = (app: Editor) => ( height = width.height || hc(app)() / 3; width = width.width || hc(app)() / 3; } - drawTriangular(app.interface.drawings as HTMLCanvasElement, width, height, fillStyle, rotation, x, y); + drawTriangular(app.interface.feedback as HTMLCanvasElement, width, height, fillStyle, rotation, x, y); return true; }; export const pointy = triangular; @@ -134,7 +134,7 @@ export const ball = (app: Editor) => ( y = radius.y || hc(app)(); radius = radius.radius || hc(app)() / 3; } - drawBall(app.interface.drawings as HTMLCanvasElement, radius, fillStyle, x, y); + drawBall(app.interface.feedback as HTMLCanvasElement, radius, fillStyle, x, y); return true; }; export const circle = ball; @@ -163,7 +163,7 @@ export const donut = (app: Editor) => ( stroke = slices.stroke || "black"; slices = slices.slices || 3; } - drawDonut(app.interface.drawings as HTMLCanvasElement, slices, eaten, radius, hole, fillStyle, secondary, stroke, rotation, x, y); + drawDonut(app.interface.feedback as HTMLCanvasElement, slices, eaten, radius, hole, fillStyle, secondary, stroke, rotation, x, y); return true; }; @@ -189,7 +189,7 @@ export const pie = (app: Editor) => ( eaten = slices.eaten || 0; slices = slices.slices || 3; } - drawPie(app.interface.drawings as HTMLCanvasElement, slices, eaten, radius, fillStyle, secondary, stroke, rotation, x, y); + drawPie(app.interface.feedback as HTMLCanvasElement, slices, eaten, radius, fillStyle, secondary, stroke, rotation, x, y); return true; }; @@ -211,7 +211,7 @@ export const star = (app: Editor) => ( outerRadius = points.outerRadius || radius / 100; points = points.points || 5; } - drawStar(app.interface.drawings as HTMLCanvasElement, points, radius, fillStyle, rotation, outerRadius, x, y); + drawStar(app.interface.feedback as HTMLCanvasElement, points, radius, fillStyle, rotation, outerRadius, x, y); return true; }; @@ -233,7 +233,7 @@ export const stroke = (app: Editor) => ( rotation = width.rotation || 0; width = width.width || 1; } - drawStroke(app.interface.drawings as HTMLCanvasElement, width, strokeStyle, rotation, x1, y1, x2, y2); + drawStroke(app.interface.feedback as HTMLCanvasElement, width, strokeStyle, rotation, x1, y1, x2, y2); return true; }; @@ -253,7 +253,7 @@ export const box = (app: Editor) => ( height = width.height || wc(app)() / 4; width = width.width || wc(app)() / 4; } - drawBox(app.interface.drawings as HTMLCanvasElement, width, height, fillStyle, rotation, x, y); + drawBox(app.interface.feedback as HTMLCanvasElement, width, height, fillStyle, rotation, x, y); return true; }; @@ -275,7 +275,7 @@ export const smiley = (app: Editor) => ( radius = happiness.radius || hc(app)() / 3; happiness = happiness.happiness || 0; } - drawSmiley(app.interface.drawings as HTMLCanvasElement, happiness, radius, eyeSize, fillStyle, rotation, x, y); + drawSmiley(app.interface.feedback as HTMLCanvasElement, happiness, radius, eyeSize, fillStyle, rotation, x, y); return true; }; @@ -299,7 +299,7 @@ export const text = (app: Editor) => ( filter = text.filter || "none"; text = text.text || ""; } - drawText(app.interface.drawings as HTMLCanvasElement, text, fontSize, rotation, font, x, y, fillStyle, filter); + drawText(app.interface.feedback as HTMLCanvasElement, text, fontSize, rotation, font, x, y, fillStyle, filter); return true; }; @@ -322,7 +322,7 @@ export const image = (app: Editor) => ( filter = url.filter || "none"; url = url.url || ""; } - drawImage(app.interface.drawings as HTMLCanvasElement, url, width, height, rotation, x, y, filter); + drawImage(app.interface.feedback as HTMLCanvasElement, url, width, height, rotation, x, y, filter); return true; }; diff --git a/src/DOM/DomElements.ts b/src/DOM/DomElements.ts index 18d07b2..e014f91 100644 --- a/src/DOM/DomElements.ts +++ b/src/DOM/DomElements.ts @@ -56,7 +56,6 @@ export const singleElements = { error_line: "error_line", hydra_canvas: "hydra-bg", feedback: "feedback", - drawings: "drawings", }; export const buttonGroups = { diff --git a/src/DOM/Visuals/Blinkers.ts b/src/DOM/Visuals/Blinkers.ts index 70dc79e..666bd2f 100644 --- a/src/DOM/Visuals/Blinkers.ts +++ b/src/DOM/Visuals/Blinkers.ts @@ -40,7 +40,7 @@ export const blinkScript = ( const blinkDuration = (app.clock.bpm / 60 / app.clock.time_signature[1]) * 200; // @ts-ignore - const ctx = app.interface.feedback.getContext("2d"); // Assuming a canvas context + const ctx = app.interface.feedback.getContext("2d"); /** * Draws a circle at a given shift. diff --git a/src/DOM/WindowBehavior.ts b/src/DOM/WindowBehavior.ts index decc76b..203e06c 100644 --- a/src/DOM/WindowBehavior.ts +++ b/src/DOM/WindowBehavior.ts @@ -45,7 +45,7 @@ export const installWindowBehaviors = ( handleResize(app.interface.feedback as HTMLCanvasElement), ); window.addEventListener("resize", () => - handleResize(app.interface.drawings as HTMLCanvasElement), + handleResize(app.interface.feedback as HTMLCanvasElement), ); window.addEventListener("beforeunload", (event) => { event.preventDefault(); diff --git a/src/main.ts b/src/main.ts index bec869d..e15f285 100644 --- a/src/main.ts +++ b/src/main.ts @@ -104,6 +104,7 @@ export class Editor { public hydra: any; constructor() { + /** * This is the entry point of the application. The Editor instance is created when the page is loaded. * It is responsible for: @@ -124,12 +125,7 @@ export class Editor { this.initializeElements(); this.initializeButtonGroups(); this.setCanvas(this.interface.feedback as HTMLCanvasElement); - this.setCanvas(this.interface.drawings as HTMLCanvasElement); - try { - this.loadHydraSynthAsync(); - } catch (error) { - console.log("Couldn't start Hydra: ", error); - } + this.loadHydraSynthAsync(); // ================================================================================ // Loading the universe from local storage @@ -137,7 +133,6 @@ export class Editor { this.universes = { ...this.settings.universes, - //...template_universes, }; initializeSelectedUniverse(this); @@ -541,26 +536,40 @@ export class Editor { } } + private loadHydraSynthAsync(): void { - /** - * Loads the Hydra Synth asynchronously by creating a script element - * and appending it to the document head. * Once the script is - * loaded successfully, it initializes the Hydra Synth. If there - * is an error loading the script, it logs an error message. - */ + const timeoutDuration = 1000; var script = document.createElement("script"); script.src = "https://unpkg.com/hydra-synth"; script.async = true; + + let timeoutHandle = setTimeout(() => { + script.onerror = null; + script.onload = null; + document.head.removeChild(script); + console.error("Hydra loading timed out"); + this.handleLoadingError(); + }, timeoutDuration); + script.onload = () => { + clearTimeout(timeoutHandle); console.log("Hydra loaded successfully"); this.initializeHydra(); - }; - script.onerror = function() { + } + + script.onerror = () => { + clearTimeout(timeoutHandle); console.error("Error loading Hydra script"); - }; + this.handleLoadingError(); + } + document.head.appendChild(script); } + private handleLoadingError(): void { + console.error("Handling error after failed script load."); + } + private initializeHydra(): void { /** * Initializes the Hydra backend and sets up the Hydra synth. @@ -582,10 +591,8 @@ export class Editor { * Sets the canvas element and configures its size and context. * @param canvas - The HTMLCanvasElement to set. */ - if (!canvas) return; const ctx = canvas.getContext("2d"); const dpr = window.devicePixelRatio || 1; - // Assuming the canvas takes up the whole window canvas.width = window.innerWidth * dpr; canvas.height = window.innerHeight * dpr; if (ctx) {