initial refactoring work

src/utils.js

@@ -145,10 +145,27 @@ function generateWaveform(img, buffer, imgHeight, frameWidth, framesPerSecond) {
   img.src = dataUrl;
 }
 
+function multiplyMatrices(a, b) {
+  let result = [
+    [0, 0, 0],
+    [0, 0, 0],
+    [0, 0, 0]
+  ];
+
+  for (let i = 0; i < 3; i++) {
+    for (let j = 0; j < 3; j++) {
+      for (let k = 0; k < 3; k++) {
+        result[i][j] += a[i][k] * b[k][j];
+      }
+    }
+  }
+
+  return result;
+}
+
 function floodFillRegion(
   startPoint,
   epsilon,
-  offset, // TODO: this needs to be a generalized transform
   fileWidth,
   fileHeight,
   context,
@@ -156,6 +173,8 @@ function floodFillRegion(
   debugPaintbucket) {
   // Helper function to check if the point is at the boundary of the region
   function isBoundaryPoint(point) {
+    return point.x <= 0 || point.x >= fileWidth ||
+           point.y <= 0 || point.y >= fileHeight;
     return point.x <= offset.x || point.x >= offset.x + fileWidth ||
           point.y <= offset.y || point.y >= offset.y + fileHeight;
   }
@@ -873,6 +892,7 @@ export {
   camelToWords,
   generateWaveform,
   floodFillRegion,
+  multiplyMatrices,
   getShapeAtPoint,
   hslToRgb,
   hsvToRgb,

src/widgets.js

@@ -5,12 +5,26 @@ class Widget {
         this._globalEvents = new Set()
         this.x = x
         this.y = y
+        this.rotation = 0
         this.children = []
     }
     handleMouseEvent(eventType, x, y) {
         for (let child of this.children) {
-            if (child.hitTest(x, y) || child._globalEvents.has(eventType)) {
+            // Adjust for translation
-                child.handleMouseEvent(eventType, x-child.x, y-child.y)
+            const dx = x - child.x;
+            const dy = y - child.y;
+    
+            // Apply inverse rotation
+            const cosTheta = Math.cos(child.rotation);
+            const sinTheta = Math.sin(child.rotation);
+    
+            // Rotate coordinates to child's local space
+            const rotatedX = dx * cosTheta + dy * sinTheta;
+            const rotatedY = -dx * sinTheta + dy * cosTheta;
+    
+            // First, perform hit test using original (global) coordinates
+            if (child.hitTest(rotatedX, rotatedY) || child._globalEvents.has(eventType)) {
+                child.handleMouseEvent(eventType, rotatedX, rotatedY);
             }
         }
         const eventTypes = [
@@ -26,8 +40,9 @@ class Widget {
         }
     }
     hitTest(x, y) {
-        if ((x >= this.x) && (x <= this.x+this.width) &&
+        // if ((x >= this.x) && (x <= this.x+this.width) &&
-            (y >= this.y) && (y <= this.y+this.height)) {
+        //     (y >= this.y) && (y <= this.y+this.height)) {
+        if ((x>=0) && (x <= this.width) && (y >= 0) && (y <= this.height)) {
             return true
         }
         return false
@@ -36,6 +51,7 @@ class Widget {
         for (let child of this.children) {
             const transform = ctx.getTransform()
             ctx.translate(child.x, child.y)
+            ctx.rotate(child.rotation)
             child.draw(ctx)
             ctx.setTransform(transform)
         }