Move getBrushMark to helper

src/helper/bit-tools/brush-tool.js

@@ -1,6 +1,6 @@
 import paper from '@scratch/paper';
 import {getRaster} from '../layer';
-import {forEachLinePoint, fillEllipse} from '../bitmap';
+import {forEachLinePoint, getBrushMark} from '../bitmap';
 import {getGuideLayer} from '../layer';
 
 /**
@@ -42,6 +42,7 @@ class BrushTool extends paper.Tool {
         if (!this.size) {
             return;
         }
+
         // The cursor preview was unattached from the view by an outside process,
         // such as changing costumes or undo.
         if (this.cursorPreview && !this.cursorPreview.parent) {
@@ -53,30 +54,13 @@ class BrushTool extends paper.Tool {
                 this.cursorPreview.remove();
             }
 
-            this.tmpCanvas = document.createElement('canvas');
+            this.tmpCanvas = getBrushMark(this.size, this.color);
-            const roundedUpRadius = Math.ceil(this.size / 2);
-            this.tmpCanvas.width = roundedUpRadius * 2;
-            this.tmpCanvas.height = roundedUpRadius * 2;
-            const context = this.tmpCanvas.getContext('2d');
-            context.imageSmoothingEnabled = false;
-            context.fillStyle = this.color;
-            // Small squares for pixel artists
-            if (this.size <= 5) {
-                if (this.size % 2) {
-                    context.fillRect(1, 1, this.size, this.size);
-                } else {
-                    context.fillRect(0, 0, this.size, this.size);
-                }
-            } else {
-                const roundedDownRadius = ~~(this.size / 2);
-                fillEllipse(roundedDownRadius, roundedDownRadius, roundedDownRadius, roundedDownRadius, context);
-            }
-
             this.cursorPreview = new paper.Raster(this.tmpCanvas);
             this.cursorPreview.guide = true;
             this.cursorPreview.parent = getGuideLayer();
             this.cursorPreview.data.isHelperItem = true;
         }
+
         this.lastSize = this.size;
         this.lastColor = this.color;
     }

src/helper/bit-tools/line-tool.js

@@ -1,6 +1,6 @@
 import paper from '@scratch/paper';
 import {getRaster} from '../layer';
-import {forEachLinePoint, fillEllipse} from '../bitmap';
+import {forEachLinePoint, getBrushMark} from '../bitmap';
 import {getGuideLayer} from '../layer';
 import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT} from '../view';
 
@@ -56,25 +56,7 @@ class LineTool extends paper.Tool {
                 this.cursorPreview.remove();
             }
 
-            this.tmpCanvas = document.createElement('canvas');
+            this.tmpCanvas = getBrushMark(this.size, this.color);
-            const roundedUpRadius = Math.ceil(this.size / 2);
-            this.tmpCanvas.width = roundedUpRadius * 2;
-            this.tmpCanvas.height = roundedUpRadius * 2;
-            const context = this.tmpCanvas.getContext('2d');
-            context.imageSmoothingEnabled = false;
-            context.fillStyle = this.color;
-            // Small squares for pixel artists
-            if (this.size <= 5) {
-                if (this.size % 2) {
-                    context.fillRect(1, 1, this.size, this.size);
-                } else {
-                    context.fillRect(0, 0, this.size, this.size);
-                }
-            } else {
-                const roundedDownRadius = ~~(this.size / 2);
-                fillEllipse(roundedDownRadius, roundedDownRadius, roundedDownRadius, roundedDownRadius, context);
-            }
-
             this.cursorPreview = new paper.Raster(this.tmpCanvas);
             this.cursorPreview.guide = true;
             this.cursorPreview.parent = getGuideLayer();

src/helper/bitmap.js

@@ -81,6 +81,34 @@ const fillEllipse = function (centerX, centerY, radiusX, radiusY, context) {
     }
 };
 
+/**
+ * @param {!number} size The diameter of the brush
+ * @param {!string} color The css color of the brush
+ * @return {HTMLCanvasElement} a canvas with the brush mark printed on it
+ */
+const getBrushMark = function (size, color) {
+    size = ~~size;
+    const canvas = document.createElement('canvas');
+    const roundedUpRadius = Math.ceil(size / 2);
+    canvas.width = roundedUpRadius * 2;
+    canvas.height = roundedUpRadius * 2;
+    const context = canvas.getContext('2d');
+    context.imageSmoothingEnabled = false;
+    context.fillStyle = color;
+    // Small squares for pixel artists
+    if (size <= 5) {
+        if (size % 2) {
+            context.fillRect(1, 1, size, size);
+        } else {
+            context.fillRect(0, 0, size, size);
+        }
+    } else {
+        const roundedDownRadius = ~~(size / 2);
+        fillEllipse(roundedDownRadius, roundedDownRadius, roundedDownRadius, roundedDownRadius, context);
+    }
+    return canvas;
+};
+
 const rowBlank_ = function (imageData, width, y) {
     for (let x = 0; x < width; ++x) {
         if (imageData.data[(y * width << 2) + (x << 2) + 3] !== 0) return false;
@@ -114,6 +142,7 @@ const trim = function (raster) {
 };
 
 export {
+    getBrushMark,
     fillEllipse,
     forEachLinePoint,
     trim