From ea1de9c1a4347b6c3aac20c3870b2729d53d2732 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Mon, 10 Feb 2020 21:35:03 +0000
Subject: [PATCH] mixin

moved the drawing of boxes into a mixin.js as proof of approach to use mixins for rendering canvas2d
---
 canvas-10-feb/src/components/HelloWorld.vue | 34 ++-------------------
 canvas-10-feb/src/components/mixins/draw.js | 30 ++++++++++++++++++
 canvas-10-feb/src/views/Home.vue            |  2 +-
 3 files changed, 34 insertions(+), 32 deletions(-)
 create mode 100644 canvas-10-feb/src/components/mixins/draw.js

diff --git a/canvas-10-feb/src/components/HelloWorld.vue b/canvas-10-feb/src/components/HelloWorld.vue
index 8743f80..1e88dd3 100644
--- a/canvas-10-feb/src/components/HelloWorld.vue
+++ b/canvas-10-feb/src/components/HelloWorld.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="hello">
-    <h1>{{ msg }}</h1>
+    <h1>Welcome to Vue &amp; Canvas testing ground</h1>
 
     <canvas ref="canvas"></canvas>
 
@@ -21,13 +21,12 @@
 
 <script>
 import { mapState } from 'vuex'
+import { draw } from './mixins/draw.js'
 var canvas = null
 
 export default {
   name: 'HelloWorld',
-  props: {
-    msg: String
-  },
+  mixins: [draw],
 
   computed: mapState({
     configRect: state => state.configRect,
@@ -40,33 +39,6 @@ export default {
     this.draw()
   },
   methods: {
-    draw() {
-      this.box(this.ctx, this.x, this.y)
-    },
-
-    box(ctx, x, y) {
-      ctx.setTransform(1, 0, 0, 1, x, y)
-
-      ctx.fillStyle = this.configRect.fill
-      ctx.fillRect(
-        this.configRect.x,
-        this.configRect.y,
-        this.configRect.height,
-        this.configRect.width
-      )
-
-      ctx.fillStyle = this.configHandle.fill
-      ctx.fillRect(
-        this.configHandle.x,
-        this.configHandle.y,
-        this.configHandle.height,
-        this.configHandle.width
-      )
-
-      ctx.stroke()
-      ctx.setTransform(1, 0, 0, 1, 0, 0)
-    },
-
     clear(ctx) {
       ctx.clearRect(0, 0, canvas.width, canvas.height)
     }
diff --git a/canvas-10-feb/src/components/mixins/draw.js b/canvas-10-feb/src/components/mixins/draw.js
new file mode 100644
index 0000000..5f02803
--- /dev/null
+++ b/canvas-10-feb/src/components/mixins/draw.js
@@ -0,0 +1,30 @@
+export const draw = {
+  methods: {
+    draw() {
+      this.box(this.ctx, this.x, this.y)
+    },
+
+    box(ctx, x, y) {
+      ctx.setTransform(1, 0, 0, 1, x, y)
+
+      ctx.fillStyle = this.configRect.fill
+      ctx.fillRect(
+        this.configRect.x,
+        this.configRect.y,
+        this.configRect.height,
+        this.configRect.width
+      )
+
+      ctx.fillStyle = this.configHandle.fill
+      ctx.fillRect(
+        this.configHandle.x,
+        this.configHandle.y,
+        this.configHandle.height,
+        this.configHandle.width
+      )
+
+      ctx.stroke()
+      ctx.setTransform(1, 0, 0, 1, 0, 0)
+    }
+  }
+}
diff --git a/canvas-10-feb/src/views/Home.vue b/canvas-10-feb/src/views/Home.vue
index 17f2749..540323e 100644
--- a/canvas-10-feb/src/views/Home.vue
+++ b/canvas-10-feb/src/views/Home.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <HelloWorld msg="Welcome to Vue &amp; Canvas testing ground" />
+    <HelloWorld />
   </div>
 </template>
 
-- 
GitLab