added 2 setters, removed redundant code, changed doneCallback to promise

Zazzik1 · Aug 20, 2023 · 9ab4c3e · 9ab4c3e
1 parent 95a5254
commit 9ab4c3e
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 51 deletions.
diff --git a/src/Mandelbrot.ts b/src/Mandelbrot.ts
@@ -5,22 +5,21 @@ import MandelbrotWorker from "~/workers/mandelbrot.worker";
 export default class Mandelbrot {
     protected canvas: HTMLCanvasElement;
     protected ctx: CanvasRenderingContext2D;
-    protected done?: Function;
-    public iterations: number = 120;
+    protected resolveDrawFn?: Function;
+    protected iterations: number = 120;
     protected workersNo = DEFAULT_WORKERS_NO;
     protected workersFinished: boolean[] = [];
     protected workers: Worker[] = [];
     protected rgb: RGBColorPalette = DEFAULT_RGB;
-    public colorOffset: number = DEFAULT_COLOR_OFFSET;
+    protected colorOffset: number = DEFAULT_COLOR_OFFSET;
     protected isRunning: boolean = false;
 
-    constructor(canvas: HTMLCanvasElement, doneCallback?: Function) {
+    constructor(canvas: HTMLCanvasElement) {
         if (!canvas) throw new Error("canvas was not provided")
         this.canvas = canvas;
         const ctx = canvas.getContext("2d");
         if (!ctx) throw new Error('ctx == null');
         this.ctx = ctx
-        this.done = doneCallback;
 
         for(let i=0; i < this.workersNo; i++){
             this.workersFinished[i] = false;
@@ -38,42 +37,53 @@ export default class Mandelbrot {
             this.workers.push(worker);
         }
     }
-    public async draw(x1: number, y1: number, x2: number, y2: number) {
-        const { width, height } = this.canvas;
-        if (this.isRunning) await this.forceStopWorkers();
-        this.ctx.clearRect(0, 0, width, height);
-        this.isRunning = true;
 
-        const task: Task = {
-            x1: x1,
-            y1: y1,
-            x2: x2,
-            y2: y2,
-            width,
-            height,
-            da: (x2 - x1) / width,
-            db: (y2 - y1) / height,
-            iterations: this.iterations,
-            colorOffset: this.colorOffset,
-        }
-
-        const { workersNo } = this;
-        for (let i = 0; i < workersNo; i++) {
-            let worker = this.workers[i];
-            this.workersFinished[i] = false;
-            const message: MandelbrotWorkerMessageData = {
-                type: 'calculate',
-                payload: {
-                    task: task,
-                    workerId: i,
-                    linesToDo: height / workersNo,
-                    startingLine: height * i / workersNo,
-                    rgb: this.rgb,
+    public setColorOffset(colorOffset: number) {
+        this.colorOffset = colorOffset;
+    }
+
+    public setIterations(iterations: number) {
+        this.iterations = iterations;
+    }
+
+    public draw(x1: number, y1: number, x2: number, y2: number) {
+        return new Promise(async (resolve) => {
+            const { width, height } = this.canvas;
+            if (this.isRunning) await this.forceStopWorkers();
+            this.resolveDrawFn = resolve;
+            this.ctx.clearRect(0, 0, width, height);
+            this.isRunning = true;
+
+            const task: Task = {
+                x1: x1,
+                y1: y1,
+                x2: x2,
+                y2: y2,
+                width,
+                height,
+                da: (x2 - x1) / width,
+                db: (y2 - y1) / height,
+                iterations: this.iterations,
+                colorOffset: this.colorOffset,
+            }
+
+            const { workersNo } = this;
+            for (let i = 0; i < workersNo; i++) {
+                let worker = this.workers[i];
+                this.workersFinished[i] = false;
+                const message: MandelbrotWorkerMessageData = {
+                    type: 'calculate',
+                    payload: {
+                        task: task,
+                        workerId: i,
+                        linesToDo: height / workersNo,
+                        startingLine: height * i / workersNo,
+                        rgb: this.rgb,
+                    }
                 }
+                worker.postMessage(message);
             }
-            worker.postMessage(message);
-
-        }
+        })
     }
 
     public forceStopWorkers() {
@@ -106,10 +116,8 @@ export default class Mandelbrot {
     }
 
     protected tryToFinish() {
-        if (typeof this.done !== "function") return;
-        if (this.areAllWorkersFinished()) {
-            this.isRunning = false;
-            this.done();
-        }
+        if (!this.areAllWorkersFinished()) return;
+        this.isRunning = false;
+        if (typeof this.resolveDrawFn === "function") this.resolveDrawFn();
     }
 }
diff --git a/src/index.ts b/src/index.ts
@@ -46,19 +46,14 @@ function draw() {
     };
     let x1 = input.get(INPUTS.X1);
     let y1 = input.get(INPUTS.Y1);
-    mandelbrot.iterations = input.get(INPUTS.ITER);
-    mandelbrot.colorOffset = +input.get(INPUTS.COLOR_OFFSET);
+    mandelbrot.setIterations(input.get(INPUTS.ITER));
+    mandelbrot.setColorOffset(input.get(INPUTS.COLOR_OFFSET));
     mandelbrot.draw(x1, y1, x1 + len, y1 + len2);
 }
 
 function reset() {
-    if (canvas == null) throw new Error('canvas is not defined');
-    input.set(INPUTS.LEN, 3);
-    input.set(INPUTS.LEN2, 3 / canvas.width * canvas.height);
-    input.set(INPUTS.X1, -2);
-    input.set(INPUTS.Y1, -1.5);
-    input.set(INPUTS.COLOR_OFFSET, 0);
     stateManager.clearState();
+    loadInitialStateFromURLParams();
     draw();
 }