Added initial brush logic

src/components/document-canvas/document-canvas.vue

@@ -31,14 +31,15 @@
 
 <script>
 import { mapState, mapGetters } from "vuex";
-import { canvas } from "zcanvas";
+import { canvas }    from "zcanvas";
+import DrawableLayer from "@/components/ui/sprites/drawable-layer";
 import {
     createSpriteForGraphic, runSpriteFn, flushSpritesInLayer, flushCache,
 } from "@/utils/canvas-util";
 
 /* internal methods */
 
-let lastDocument, zCanvas;
+let lastDocument, zCanvas, drawableLayer;
 
 export default {
     computed: {
@@ -89,9 +90,13 @@ export default {
                     isDraggable = true;
                     break;
                 case "brush":
+                    if ( !drawableLayer ) {
+                        drawableLayer = new DrawableLayer( this.activeDocument );
+                        zCanvas.addChild( drawableLayer );
+                    }
                     break;
             }
-            runSpriteFn( sprite => sprite.setDraggable( isDraggable ));
+            runSpriteFn( sprite => sprite.setDraggable( isDraggable || sprite instanceof DrawableLayer ));
         }
     },
     mounted() {

src/components/ui/sprites/drawable-layer.js

@@ -0,0 +1,41 @@
+import { sprite }       from "zcanvas";
+import { createCanvas } from "@/utils/canvas-util";
+
+function DrawableLayer({ width, height }) {
+    const { cvs, ctx } = createCanvas( width, height );
+    const opts = {
+        bitmap: cvs, x: 0, y: 0, width, height
+    };
+    DrawableLayer.super( this, "constructor", opts ); // zCanvas inheritance
+
+    this.setDraggable( true );
+
+    // TODO: setters and cache for these
+    const radius = 30; // TODO: setter
+    const innerRadius = 5;
+    const outerRadius = 70;
+    const opacity = .5; // 0 - 1 range
+    ctx.globalAlpha = opacity;
+
+    const { cvs: brush, ctx: brushCtx } = createCanvas( radius * 2, radius * 2 );
+
+    // Radii of the white glow.
+    // Radius of the entire circle.
+
+    const x = radius;
+    const y = radius;
+    const gradient = ctx.createRadialGradient( x, y, innerRadius, x, y, outerRadius );
+    gradient.addColorStop( 0, 'rgba(255,0,0,1)' );
+    gradient.addColorStop( 1, 'rgba(255,255,255,1)' );
+
+    brushCtx.arc( x, y, radius, 0, 2 * Math.PI );
+
+    brushCtx.fillStyle = gradient;
+    brushCtx.fill();
+
+    this.handleMove = function( x, y ) {
+        ctx.drawImage( brush, x - radius / 2, y - radius / 2 );
+    }
+}
+sprite.extend( DrawableLayer );
+export default DrawableLayer;

src/utils/canvas-util.js

@@ -10,9 +10,14 @@ const spriteCache = new Map();
  * Creates a new HTMLCanvasElement, returning both
  * the element and its CanvasRenderingContext2D
  */
-export const createCanvas = () => {
+export const createCanvas = ( optWidth = 0, optHeight = 0 ) => {
     const cvs = document.createElement( "canvas" );
     const ctx = cvs.getContext( "2d" );
+
+    if ( optWidth !== 0 && optHeight !== 0 ) {
+        cvs.width  = optWidth;
+        cvs.height = optHeight;
+    }    
     return { cvs, ctx };
 };