Merge pull request #510 from paulkaplan/fix-bit-brush-touch

Fix bit brush on touch devices
scratchfoundation · Jun 13, 2018 · 38f2371 · 38f2371
2 parents 389eba6 + f785ac0
commit 38f2371
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/src/components/forms/slider.css b/src/components/forms/slider.css
@@ -17,4 +17,5 @@
     background-color: white;
     border-radius: 100%;
     box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
+    touch-action: none;
 }
diff --git a/src/helper/bit-tools/brush-tool.js b/src/helper/bit-tools/brush-tool.js
@@ -35,6 +35,9 @@ class BrushTool extends paper.Tool {
     }
     // Draw a brush mark at the given point
     draw (x, y) {
+        if (!this.tmpCanvas) {
+            this.tmpCanvas = getBrushMark(this.size, this.color);
+        }
         const roundedUpRadius = Math.ceil(this.size / 2);
         getRaster().drawImage(this.tmpCanvas, new paper.Point(~~x - roundedUpRadius, ~~y - roundedUpRadius));
     }

diff --git a/src/helper/bit-tools/line-tool.js b/src/helper/bit-tools/line-tool.js
@@ -38,6 +38,9 @@ class LineTool extends paper.Tool {
     }
     // Draw a brush mark at the given point
     draw (x, y) {
+        if (!this.tmpCanvas) {
+            this.tmpCanvas = getBrushMark(this.size, this.color);
+        }
         const roundedUpRadius = Math.ceil(this.size / 2);
         this.drawTarget.drawImage(this.tmpCanvas, new paper.Point(~~x - roundedUpRadius, ~~y - roundedUpRadius));
     }
@@ -72,8 +75,8 @@ class LineTool extends paper.Tool {
     handleMouseDown (event) {
         if (event.event.button > 0) return; // only first mouse button
         this.active = true;
-        
-        this.cursorPreview.remove();
+
+        if (this.cursorPreview) this.cursorPreview.remove();
 
         const tmpCanvas = document.createElement('canvas');
         tmpCanvas.width = ART_BOARD_WIDTH;