Redo fill logic

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

@@ -1,6 +1,6 @@
 import paper from '@scratch/paper';
 import Modes from '../../lib/modes';
-import {drawRect} from '../bitmap';
+import {fillRect} from '../bitmap';
 import {createCanvas, getRaster} from '../layer';
 import {clearSelection} from '../selection';
 import BoundingBoxTool from '../selection-tools/bounding-box-tool';
@@ -134,7 +134,7 @@ class RectTool extends paper.Tool {
         const tmpCanvas = createCanvas();
         const context = tmpCanvas.getContext('2d');
         context.fillStyle = this.color;
-        drawRect(this.rect, context);
+        fillRect(this.rect, context);
         getRaster().drawImage(tmpCanvas, new paper.Point());
 
         this.rect.remove();

src/helper/bitmap.js

@@ -523,7 +523,7 @@ const floodFillAll = function (x, y, color, context) {
  * @param {!paper.Shape.Rectangle} rect The rectangle to draw to the canvas
  * @param {!HTMLCanvas2DContext} context The context in which to draw
  */
-const drawRect = function (rect, context) {
+const fillRect = function (rect, context) {
     // No rotation component to matrix
     if (rect.matrix.b === 0 && rect.matrix.c === 0) {
         const width = rect.size.width * rect.matrix.a;
@@ -541,25 +541,27 @@ const drawRect = function (rect, context) {
     const heightPoint = rect.matrix.transform(new paper.Point(-rect.size.width / 2, rect.size.height / 2));
     const endPoint = rect.matrix.transform(new paper.Point(rect.size.width / 2, rect.size.height / 2));
     const center = rect.matrix.transform(new paper.Point());
-    forEachLinePoint(startPoint, widthPoint, (x, y) => {
+    const points = [startPoint, widthPoint, heightPoint, endPoint].sort((a, b) => a.x - b.x);
-        context.fillRect(x, y, 1, 1);
+
-    });
+    const solveY = (point1, point2, x) => {
-    forEachLinePoint(startPoint, heightPoint, (x, y) => {
+        if (point2.x === point1.x) return center.x > point1.x ? Number.NEGATIVE_INFINITY : Number.POSITIVE_INFINITY;
-        context.fillRect(x, y, 1, 1);
+        return ((point2.y - point1.y) / (point2.x - point1.x) * (x - point1.x)) + point1.y;
-    });
+    };
-    forEachLinePoint(endPoint, widthPoint, (x, y) => {
+    for (let x = Math.round(points[0].x); x < Math.round(points[3].x); x++) {
-        context.fillRect(x, y, 1, 1);
+        const ys = [
-    });
+            solveY(startPoint, widthPoint, x + .5),
-    forEachLinePoint(endPoint, heightPoint, (x, y) => {
+            solveY(startPoint, heightPoint, x + .5),
-        context.fillRect(x, y, 1, 1);
+            solveY(endPoint, widthPoint, x + .5),
-    });
+            solveY(endPoint, heightPoint, x + .5)
-    floodFill(~~center.x, ~~center.y, context.fillStyle, context);
+        ].sort((a, b) => a - b);
+        context.fillRect(x, Math.round(ys[1]), 1, Math.max(1, Math.round(ys[2]) - Math.round(ys[1])));
+    }
 };
 
 export {
     convertToBitmap,
     convertToVector,
-    drawRect,
+    fillRect,
     floodFill,
     floodFillAll,
     getBrushMark,