Fix selecting shapes rendering incorrectly

src/main.js

@@ -11,7 +11,6 @@ import {
   titleCase,
   getMousePositionFraction,
   getKeyframesSurrounding,
-  invertPixels,
   lerpColor,
   lerp,
   camelToWords,
@@ -2501,6 +2500,23 @@ class BaseShape {
     let ctx = context.ctx;
     ctx.lineWidth = this.lineWidth;
     ctx.lineCap = "round";
+
+    // Create a repeating pattern for indicating selected shapes
+    let patternCanvas = document.createElement('canvas');
+    patternCanvas.width = 2;
+    patternCanvas.height = 2;
+    let patternCtx = patternCanvas.getContext('2d');
+    // Draw the pattern:
+    // black,       transparent,
+    // transparent, white
+    patternCtx.fillStyle = 'black';
+    patternCtx.fillRect(0, 0, 1, 1);
+    patternCtx.clearRect(1, 0, 1, 1);
+    patternCtx.clearRect(0, 1, 1, 1);
+    patternCtx.fillStyle = 'white';
+    patternCtx.fillRect(1, 1, 1, 1);
+    let pattern = ctx.createPattern(patternCanvas, 'repeat'); // repeat the pattern across the canvas
+
     // for (let region of this.regions) {
     //   // if (region.filled) continue;
     //   if ((region.fillStyle || region.fillImage) && region.filled) {
@@ -2546,6 +2562,10 @@ class BaseShape {
         }
       }
       ctx.fill();
+      if (context.selected) {
+        ctx.fillStyle = pattern
+        ctx.fill()
+      }
     }
     if (this.stroked && !context.debugColor) {
       for (let curve of this.curves) {
@@ -2561,6 +2581,10 @@ class BaseShape {
           curve.points[3].y,
         );
         ctx.stroke();
+        if (context.selected) {
+          ctx.strokeStyle = pattern
+          ctx.stroke()
+        }
 
         // // Debug, show curve control points
         // ctx.beginPath()
@@ -3230,13 +3254,11 @@ class GraphicsObject {
       if (context.activeObject == this && !layer.visible) continue;
       let frame = layer.getFrame(this.currentFrameNum);
       for (let shape of frame.shapes) {
+        let cxt = {...context}
         if (context.shapeselection.indexOf(shape) >= 0) {
-          invertPixels(ctx, config.fileWidth, config.fileHeight);
+          cxt.selected = true
-        }
-        shape.draw(context);
-        if (context.shapeselection.indexOf(shape) >= 0) {
-          invertPixels(ctx, config.fileWidth, config.fileHeight);
         }
+        shape.draw(cxt);
       }
       for (let child of layer.children) {
         if (child == context.activeObject) continue;

src/utils.js

@@ -41,56 +41,6 @@ function getKeyframesSurrounding(frames, index) {
     return { lastKeyframeBefore, firstKeyframeAfter };
 }
 
-function invertPixels(ctx, width, height) {
-    // Create an off-screen canvas for the pattern
-    const patternCanvas = document.createElement('canvas');
-    const patternContext = patternCanvas.getContext('2d');
-
-    // Define the size of the repeating pattern (2x2 pixels)
-    const patternSize = 2;
-    patternCanvas.width = patternSize;
-    patternCanvas.height = patternSize;
-
-    // Create the alternating pattern (regular and inverted pixels)
-    function createInvertedPattern() {
-      const patternData = patternContext.createImageData(patternSize, patternSize);
-      const data = patternData.data;
-
-      // Fill the pattern with alternating colors (inverted every other pixel)
-      for (let i = 0; i < patternSize; i++) {
-        for (let j = 0; j < patternSize; j++) {
-          const index = (i * patternSize + j) * 4;
-          // Determine if we should invert the color
-          if ((i + j) % 2 === 0 || j%2===0) {
-            data[index] = 0; // Red
-            data[index + 1] = 0; // Green
-            data[index + 2] = 0; // Blue
-            data[index + 3] = 255; // Alpha
-          } else {
-            data[index] = 255; // Red (inverted)
-            data[index + 1] = 255; // Green (inverted)
-            data[index + 2] = 255; // Blue (inverted)
-            data[index + 3] = 255; // Alpha
-          }
-        }
-      }
-
-      // Set the pattern on the off-screen canvas
-      patternContext.putImageData(patternData, 0, 0);
-      return patternCanvas;
-    }
-
-    // Create the pattern using the function
-    const pattern = ctx.createPattern(createInvertedPattern(), 'repeat');
-
-    // Draw a rectangle with the pattern
-    ctx.globalCompositeOperation = "difference"
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, width, height);
-
-    ctx.globalCompositeOperation = "source-over"
-}
-
 function lerp(a, b, t) {
   return a + (b - a) * t;
 }
@@ -918,7 +868,6 @@ export {
   titleCase,
   getMousePositionFraction,
   getKeyframesSurrounding,
-  invertPixels,
   lerp,
   lerpColor,
   camelToWords,