Fix paint bucket coordinates inside objects

src/main.js

@@ -40,6 +40,7 @@ import {
   rotateAroundPointIncremental,
   rgbToHsv,
   multiplyMatrices,
+  growBoundingBox,
 } from "./utils.js";
 import {
   backgroundColor,
@@ -1976,13 +1977,6 @@ function deriveControlPoints(S, A, E, e1, e2, t) {
   return { v1, v2, C1, C2 };
 }
 
-function growBoundingBox(bboxa, bboxb) {
-  bboxa.x.min = Math.min(bboxa.x.min, bboxb.x.min);
-  bboxa.y.min = Math.min(bboxa.y.min, bboxb.y.min);
-  bboxa.x.max = Math.max(bboxa.x.max, bboxb.x.max);
-  bboxa.y.max = Math.max(bboxa.y.max, bboxb.y.max);
-}
-
 function regionToBbox(region) {
   return {
     x: {
@@ -2633,6 +2627,7 @@ class Layer extends Widget {
   }
   mousedown(x, y) {
     const mouse = {x: x, y: y}
+    if (this==context.activeLayer) {
       switch(mode) {
         case "rectangle":
         case "ellipse":
@@ -2704,8 +2699,10 @@ class Layer extends Widget {
           break;
       }
     }
+  }
   mousemove(x, y) {
     const mouse = {x: x, y: y}
+    if (this==context.activeLayer) {
       switch (mode) {
         case "draw":
           if (this.activeShape) {
@@ -2788,8 +2785,10 @@ class Layer extends Widget {
           break;
       }
     }
+  }
   mouseup(x, y) {
     this.clicked = false
+    if (this==context.activeLayer) {
       switch (mode) {
         case "draw":
           if (this.activeShape) {
@@ -2806,6 +2805,7 @@ class Layer extends Widget {
       }
     }
   }
+}
 
 class AudioLayer {
   constructor(uuid, name) {
@@ -3579,6 +3579,10 @@ class GraphicsObject extends Widget {
     // this.children = []
 
     this.shapes = [];
+
+    this._globalEvents.add("mousedown")
+    this._globalEvents.add("mousemove")
+    this._globalEvents.add("mouseup")
   }
   static fromJSON(json) {
     const graphicsObject = new GraphicsObject(json.idx);
@@ -4059,6 +4063,11 @@ Object.defineProperty(context, "activeObject", {
     return this.objectStack.at(-1);
   },
 });
+Object.defineProperty(context, "activeLayer", {
+  get: function () {
+    return this.objectStack.at(-1).activeLayer
+  }
+})
 context.objectStack = [root];
 
 async function greet() {
@@ -6875,6 +6884,22 @@ function renderLayers() {
               2 * Math.PI,
             );
             ctx.fill();
+            if (frameInfo.valueAtN.keyTypes.has("motion")) {
+              ctx.strokeStyle = "#7a00b3";
+              ctx.lineWidth = 2;
+              ctx.beginPath()
+              ctx.moveTo(j*frameWidth, layerHeight*0.25)
+              ctx.lineTo((j+1)*frameWidth, layerHeight*0.25)
+              ctx.stroke()
+            }
+            if (frameInfo.valueAtN.keyTypes.has("shape")) {
+              ctx.strokeStyle = "#9bff9b";
+              ctx.lineWidth = 2;
+              ctx.beginPath()
+              ctx.moveTo(j*frameWidth, layerHeight*0.35)
+              ctx.lineTo((j+1)*frameWidth, layerHeight*0.35)
+              ctx.stroke()
+            }
           } else if (frameInfo.prev && frameInfo.next) {
             ctx.fillStyle = foregroundColor;
             drawBorderedRect(