08: refacter code by using MVVM pattern, but really slow

skatsuta · skatsuta · commit 2228130a6d01 · 2016-12-17T03:38:13.000+09:00
Signed-off-by: Soshi Katsuta &lt;soshi.katsuta@gmail.com&gt;
diff --git a/08 - Fun with HTML5 Canvas/index.js b/08 - Fun with HTML5 Canvas/index.js
@@ -1,41 +1,90 @@
-class Painter {
-  constructor(ctx) {
-    ctx.strokeStyle = '#BADA55';
-    ctx.lineJoin = 'round';
-    ctx.lineCap = 'round';
-    this.ctx = ctx;
+class Notifier {
+  constructor() {
+    this.handlers = [];
+  }
 
-    this.MIN_LINE_WIDTH = 1;
-    this.MAX_LINE_WIDTH = 100;
+  observe(handler) {
+    this.handlers.push(handler);
+  }
 
-    this.isDrawing = false;
-    this.lastX = this.lastY = 0;
-    this.hue = 0;
-    this.direction = true;
+  fire() {
+    this.handlers.forEach(handler => handler());
   }
+}
 
-  draw(e) {
-    if (!this.isDrawing) { return; }
+class Painting {
+  constructor(lineWidth) {
+    this.lineWidth = lineWidth;
+    this.lastX = this.lastY = this.hue = 0;
+    this.direction = true;
+    this.notifier = new Notifier();
+  }
 
-    const ctx = this.ctx;
-    ctx.strokeStyle = `hsl(${this.hue}, 100%, 50%)`;
-    ctx.beginPath();
-    ctx.moveTo(this.lastX, this.lastY);
-    ctx.lineTo(e.offsetX, e.offsetY);
-    ctx.stroke();
+  observe(handler) {
+    this.notifier.observe(handler);
+  }
 
-    [this.lastX, this.lastY] = [e.offsetX, e.offsetY];
+  draw(e) {
+    this.lastX = e.offsetX;
+    this.lastY = e.offsetY;
     this.hue < 360 ? this.hue++ : this.hue = 0;
 
-    if (ctx.lineWidth <= this.MIN_LINE_WIDTH || ctx.lineWidth >= this.MAX_LINE_WIDTH) {
+    const minLineWidth = 1;
+    const maxLineWidth = 100;
+    if (this.lineWidth < minLineWidth || this.lineWidth > maxLineWidth) {
       this.direction = !this.direction;
     }
-    this.direction ? ctx.lineWidth++ : ctx.lineWidth--;
+    this.direction ? this.lineWidth++ : this.lineWidth--;
+
+    this.notifier.fire();
+  }
+
+  startDrawing(e) {
+    this.lastX = e.offsetX;
+    this.lastY = e.offsetY;
+
+    this.notifier.fire();
+  }
+}
+
+class CtxViewModel {
+  constructor(ctx) {
+    this.painting = new Painting(ctx.lineWidth);
+
+    this.isDrawing = false;
+    this.lastX = this.painting.lastX;
+    this.lastY = this.painting.lastY;
+    this.hue = this.painting.hue;
+
+    this.ctx = ctx;
+    this.ctx.lineWidth = 1;
+    this.ctx.lineJoin = 'round';
+    this.ctx.lineCap = 'round';
+    this.ctx.strokeStyle = '#BADA55';
+
+    // register handler to observer
+    this.painting.observe(() => {
+      this.lastX = this.painting.lastX;
+      this.lastY = this.painting.lastY;
+      this.ctx.lineWidth = this.painting.lineWidth;
+      this.ctx.strokeStyle = `hsl(${this.painting.hue}, 100%, 50%)`;
+    });
+  }
+
+  draw(e) {
+    if (!this.isDrawing) { return; }
+
+    this.painting.draw(e);
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(this.lastX, this.lastY);
+    this.ctx.lineTo(e.offsetX, e.offsetY);
+    this.ctx.stroke();
   }
 
   startDrawing(e) {
     this.isDrawing = true;
-    [this.lastX, this.lastY] = [e.offsetX, e.offsetY];
+    this.painting.startDrawing(e);
   }
 
   stopDrawing() {
@@ -46,10 +95,10 @@ class Painter {
 const canvas = document.querySelector('#draw');
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
-const painter = new Painter(canvas.getContext('2d'));
+const ctxVm = new CtxViewModel(canvas.getContext('2d'));
 [
-  { eventType: 'mousemove', callback: e => painter.draw(e) },
-  { eventType: 'mousedown', callback: e => painter.startDrawing(e) },
-  { eventType: 'mouseup',   callback: () => painter.stopDrawing() },
-  { eventType: 'mouseout',  callback: () => painter.stopDrawing() }
+  { eventType: 'mousemove', callback: e => ctxVm.draw(e) },
+  { eventType: 'mousedown', callback: e => ctxVm.startDrawing(e) },
+  { eventType: 'mouseup',   callback: () => ctxVm.stopDrawing() },
+  { eventType: 'mouseout',  callback: () => ctxVm.stopDrawing() }
 ].forEach(({eventType, callback}) => canvas.addEventListener(eventType, callback));
