@usman404/crowjs 1.0.3 → 1.1.0

package/Frames/Frame.js

@@ -22,6 +22,8 @@ export class Frame extends FrameComponent{
    * @param {number} pady - Vertical padding
    * @param {boolean} alwaysShowBanner - Whether to always show the banner
    * @param {number} bannerHeight - Height of the top banner
+   * @param {p5.Color|string} bannerColor - Banner background color
+   * @param {p5.Color|string} bannerDotColor - Banner dot indicator color
    * @param {number} nearestBorderThreshold - Distance threshold for border detection
    * @param {Component|null} parent - Parent component
    * @param {string} type - Component type
@@ -30,15 +32,24 @@ export class Frame extends FrameComponent{
    * @param {boolean} enableResizing - Allow resizing
    * @param {boolean} enableOptimisedResizing - Use optimized resizing
    * @param {boolean} enableShadow - Enable shadow rendering
-   * @param {string} shadowColor - Shadow color
-   * @param {number} shadowIntensity - Shadow opacity
-   * @param {number} shadowSpread - Shadow spread
-   * @param {number} shadowDetail - Number of shadow layers
+  * @param {string} shadowColor - Shadow color (CSS color string)
+  * @param {number} shadowBlur - Shadow blur radius
+  * @param {number} shadowOffsetX - Shadow offset on X axis
+  * @param {number} shadowOffsetY - Shadow offset on Y axis
+   * @param {Object} marginOptions - Margin options
+   * @param {number} marginOptions.margin - General margin for all sides
+   * @param {number} marginOptions.marginx - Horizontal margin (left and right)
+   * @param {number} marginOptions.marginy - Vertical margin (top and bottom)
+   * @param {number} marginOptions.marginl - Left margin
+   * @param {number} marginOptions.marginr - Right margin
+   * @param {number} marginOptions.margint - Top margin
+   * @param {number} marginOptions.marginb - Bottom margin
    */
     constructor(x, y, width, height, id, backgroundColor, borderColor, highlightedBorderColor, borderWidth,
-      cornerRadius, padx, pady, alwaysShowBanner, bannerHeight, nearestBorderThreshold, parent, type, 
-      enableReposition, enableOptimisedReposition, enableResizing, enableOptimisedResizing, enableShadow, shadowColor, shadowIntensity, shadowSpread, shadowDetail){
-      super(x, y, width, height, {parent: parent, type: type, id: id});
+      cornerRadius, padx, pady, alwaysShowBanner, bannerHeight, bannerColor, bannerDotColor, nearestBorderThreshold, parent, type, 
+      enableReposition, enableOptimisedReposition, enableResizing, enableOptimisedResizing, enableShadow, shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY,
+      {margin=0, marginx=null, marginy=null, marginl=null, marginr=null, margint=null, marginb=null, minWidth=0, minHeight=0, showDebugOverlay=false} = {}){
+      super(x, y, width, height, {parent: parent, type: type, id: id, margin: margin, marginx: marginx, marginy: marginy, marginl: marginl, marginr: marginr, margint: margint, marginb: marginb, minWidth: minWidth, minHeight: minHeight, showDebugOverlay: showDebugOverlay});
   
       this.backgroundColor = backgroundColor;
       this.borderColor = borderColor;
@@ -47,6 +58,7 @@ export class Frame extends FrameComponent{
       this.cornerRadius = cornerRadius;
       this.padx = padx;
       this.pady = pady;
+      this.pad = (this.padx === this.pady) ? this.padx : null;
   
       this.enableShadow = enableShadow;
       this.enableReposition = enableReposition;
@@ -57,6 +69,8 @@ export class Frame extends FrameComponent{
 
       if(this.enableReposition || this.alwaysShowBanner){
         this.bannerHeight = bannerHeight;
+        this.bannerColor = bannerColor;
+        this.bannerDotColor = bannerDotColor;
         
         if(this.enableReposition){
           this.isBannerShown = false;
@@ -74,13 +88,14 @@ export class Frame extends FrameComponent{
       if(this.enableResizing){
         this.nearestBorder = null;
         this.nearestBorderThreshold = nearestBorderThreshold;
+        this._isResizing = false;
       }
 
       if(this.enableShadow){
-        this.shadowColor = shadowColor;//rgb value
-        this.shadowIntensity = shadowIntensity;//opacity value between 0 and 1
-        this.shadowSpread = shadowSpread;//stroke width of each of those rectangles
-        this.shadowDetail = shadowDetail;//number of rectangles that will be drawn around the component
+        this.shadowColor = shadowColor;
+        this.shadowBlur = shadowBlur;
+        this.shadowOffsetX = shadowOffsetX;
+        this.shadowOffsetY = shadowOffsetY;
       }
 
       this.addEventListener("hover", (event) => this.onMouseHover(event));
@@ -92,12 +107,21 @@ export class Frame extends FrameComponent{
       this.addEventListener("reposition", (event) => this.onRepos(event));
     }
 
+    /**
+   * Sets a unified padding value for both axes
+   * @param {number} pad - Padding value to apply to both axes
+   */
+    setPad(pad){
+      this.pad = pad;
+      this.padx = pad;
+      this.pady = pad;
+    }
+
     /**
    * Handles frame resize events
    * @param {GUIEvent} event - The resize event
    */
     onResize(event){
-      console.log("resizing...");
       event.stopPropagation();
     }
 
@@ -106,7 +130,6 @@ export class Frame extends FrameComponent{
    * @param {GUIEvent} event - The reposition event
    */
     onRepos(event){
-      console.log("repositioning...");
     }
 
     /**
@@ -114,6 +137,10 @@ export class Frame extends FrameComponent{
    * @param {GUIEvent} event - The release event
    */
     onMouseRelease(event){
+      if(this.enableResizing){
+        this._isResizing = false;
+      }
+
       if(!this.isOverBannerArea()){
         cursor("");
       }
@@ -144,7 +171,9 @@ export class Frame extends FrameComponent{
     onMouseHover(event){
       // console.log("mouse hovering...");
       if(this.enableResizing) {
-        this.checkAndFindNearestBorder();
+        if(!this._isResizing){
+          this.checkAndFindNearestBorder();
+        }
         if(this.isNearBorder()){
           if(this.isBannerShown){
             this.clearHoverCache({clearResizingCache:false});
@@ -182,6 +211,8 @@ export class Frame extends FrameComponent{
    */
     onMouseBtnPress(event) {
       if(this.enableResizing && this.isNearBorder()){
+        this._isResizing = true;
+
         //dummy resize frame
         if(this.enableOptimisedResizing){
           this.createDummyFrame(DummyFrame.RESIZE_DF);
@@ -218,16 +249,14 @@ export class Frame extends FrameComponent{
    */
     onMouseDrag(event){
       if(this.enableResizing){
-        if(this.isNearBorder() && !this.isRepositioning()){
+        if((this.isNearBorder() || this._isResizing) && !this.isRepositioning()){
           this.updateDimensions();
-          this.dispatchTrickleDownEvent(new GUIEvent(event.x, event.y, "resize", this));
           return;
         }
       }
 
       if(this.enableReposition && this.isRepositioning()){
         this.updatePosition();
-        this.dispatchTrickleDownEvent(new GUIEvent(event.x, event.y, "reposition", this));
       }
     }
 
@@ -358,14 +387,17 @@ export class Frame extends FrameComponent{
    * Updates frame dimensions during resizing
    */
     updateDimensions(){
+      const effMinW = this.getEffectiveMinWidth();
+      const effMinH = this.getEffectiveMinHeight();
+
       if(this.nearestBorder=="left" || this.nearestBorder=="right"){
         if( this.nearestBorder=="left"){
-          if(this.x+this.width-mouseX>=this.bannerHeight){
+          if(this.x+this.width-mouseX>=effMinW){
             this.width = this.x + this.width - mouseX;
             this.x = mouseX;
           }
         } else {
-          if(mouseX-this.x>=this.bannerHeight){
+          if(mouseX-this.x>=effMinW){
             this.width = mouseX - this.x;
           }
         }
@@ -378,12 +410,12 @@ export class Frame extends FrameComponent{
 
       } else if(this.nearestBorder=="top"||this.nearestBorder=="bottom"){
         if(this.nearestBorder=="top"){
-          if(this.y+this.height-mouseY>=this.bannerHeight){
+          if(this.y+this.height-mouseY>=effMinH){
             this.height =this.y + this.height - mouseY;
             this.y = mouseY;
           }
         } else {
-          if(mouseY-this.y>=this.bannerHeight){
+          if(mouseY-this.y>=effMinH){
             this.height = mouseY - this.y;
           }
         }
@@ -400,39 +432,39 @@ export class Frame extends FrameComponent{
 
       } else {
         if(this.nearestBorder=="top-left"){
-          if(this.x+this.width-mouseX>=50){
+          if(this.x+this.width-mouseX>=effMinW){
             this.width = this.x + this.width - mouseX;
             this.x = mouseX;
           }
 
-          if(this.y+this.height-mouseY>=50){
+          if(this.y+this.height-mouseY>=effMinH){
             this.height =this.y + this.height - mouseY;
             this.y = mouseY;
           }
         } else if(this.nearestBorder=="top-right"){
-          if(mouseX-this.x>=50){
+          if(mouseX-this.x>=effMinW){
             this.width = mouseX - this.x;
           }
 
-          if(this.y+this.height-mouseY>=50){
+          if(this.y+this.height-mouseY>=effMinH){
             this.height =this.y + this.height - mouseY;
             this.y = mouseY;
           }
         } else if(this.nearestBorder=="bottom-left"){
-          if(this.x+this.width-mouseX>=50){
+          if(this.x+this.width-mouseX>=effMinW){
             this.width = this.x + this.width - mouseX;
             this.x = mouseX;
           }
 
-          if(mouseY-this.y>=50){
+          if(mouseY-this.y>=effMinH){
             this.height = mouseY - this.y;
           }
         } else if(this.nearestBorder=="bottom-right"){
-          if(mouseX-this.x>=50){
+          if(mouseX-this.x>=effMinW){
             this.width = mouseX - this.x;
           }
 
-          if(mouseY-this.y>=50){
+          if(mouseY-this.y>=effMinH){
             this.height = mouseY - this.y;
           }
         }
@@ -455,13 +487,14 @@ export class Frame extends FrameComponent{
       this.x = mouseX - abs(this.xDist);
       this.y = mouseY - abs(this.yDist);
   
-      if(this.prevX-this.x==0 && this.prevY-this.y==0){
+      let xDiff = this.prevX - this.x;
+      let yDiff = this.prevY - this.y;
+
+      if(xDiff === 0 && yDiff === 0){
         return;
       }
   
-      //console.log("(",this.x,",",this.y,")");
-      
-      this.updatePosUtil(this.prevX-this.x, this.prevY-this.y);
+      this.updatePosUtil(xDiff, yDiff);
     }
    /**
    * Clears hover and interaction cache
@@ -485,47 +518,74 @@ export class Frame extends FrameComponent{
       
       if(clearResizingCache && this.enableResizing){
         this.nearestBorder=null;
+        this._isResizing = false;
         // console.log("resizing cache removed...");
       }
 
       // console.log("");
     }
     /**
-   * Converts RGB color string to array
-   * @param {string} shadowColor - RGB color string
-   * @returns {number[]|null} Array of RGB values or null
+   * Updates shadow color
+   * @param {string} shadowColor - Shadow color (CSS color string)
    */
-    rgbToArray(shadowColor) {
-      let match = shadowColor.match(/\d+/g);
-      return match ? match.map(Number) : null;
+    setShadowColor(shadowColor){
+      this.shadowColor = shadowColor;
+    }
+
+    /**
+   * Updates shadow blur radius
+   * @param {number} shadowBlur - Shadow blur
+   */
+    setShadowBlur(shadowBlur){
+      this.shadowBlur = shadowBlur;
+    }
+
+    /**
+   * Updates shadow X offset
+   * @param {number} shadowOffsetX - Shadow offset on X axis
+   */
+    setShadowOffsetX(shadowOffsetX){
+      this.shadowOffsetX = shadowOffsetX;
+    }
+
+    /**
+   * Updates shadow Y offset
+   * @param {number} shadowOffsetY - Shadow offset on Y axis
+   */
+    setShadowOffsetY(shadowOffsetY){
+      this.shadowOffsetY = shadowOffsetY;
     }
     /**
    * Renders shadow effect around the frame
    * @param {Object} options - Shadow options
    */
     drawShadow({}={}){
-      let color = this.rgbToArray(this.shadowColor);
-      if(color==null){
-        console.log("shadow color value is not in the correct format: rgb(0,0,0)");
+      if(this.width<=0 || this.height<=0){
         return;
       }
 
-      if(this.shadowIntensity>1){
-        this.shadowIntensity=1;
-        console.log("shadow intensity should be between 0 and 1 inclusive.\nAny value given outside of the range will be clipped to the ends.");
-      } else if(this.shadowIntensity<0){
-        console.log("shadow intensity should be between 0 and 1 inclusive.\nAny value given outside of the range will be clipped to the ends.");
-        this.shadowIntensity=0;
-      }
+      let blur = Math.max(0, this.shadowBlur ?? 0);
+      let offsetX = this.shadowOffsetX ?? 0;
+      let offsetY = this.shadowOffsetY ?? 0;
+      let resolvedShadowColor = (typeof this.shadowColor === "string")
+        ? this.shadowColor
+        : (this.shadowColor && this.shadowColor.toString ? this.shadowColor.toString() : "rgba(0,0,0,0.35)");
 
-      for(let i=1; i<=this.shadowDetail; i++){
-        push();
-        noFill();
-        let alpha = this.shadowIntensity * pow(1 - i / this.shadowDetail, 2);
-        stroke(`rgba(${color[0]}, ${color[1]}, ${color[2]}, ${alpha})`);
-        strokeWeight(this.shadowSpread);
-        rect(this.x-((i*this.shadowSpread)/2), this.y-((i*this.shadowSpread)/2), this.width+(i*this.shadowSpread), this.height+(i*this.shadowSpread), this.cornerRadius);
-        pop();
+      if(blur===0 && offsetX===0 && offsetY===0){
+        return;
       }
+
+      let baseFill = this.backgroundColor ?? color(0, 0, 0, 0);
+
+      push();
+      let ctx = drawingContext;
+      ctx.shadowColor = resolvedShadowColor;
+      ctx.shadowBlur = blur;
+      ctx.shadowOffsetX = offsetX;
+      ctx.shadowOffsetY = offsetY;
+      noStroke();
+      fill(baseFill);
+      rect(this.x, this.y, this.width, this.height, this.cornerRadius);
+      pop();
     }
   }

package/Frames/FrameComponent.js

@@ -11,9 +11,16 @@ export class FrameComponent extends Component{
    * @param {Component|null} options.parent - Parent component
    * @param {string} options.type - Component type
    * @param {string|null} options.id - Component ID
+   * @param {number} options.margin - General margin for all sides
+   * @param {number} options.marginx - Horizontal margin (left and right)
+   * @param {number} options.marginy - Vertical margin (top and bottom)
+   * @param {number} options.marginl - Left margin
+   * @param {number} options.marginr - Right margin
+   * @param {number} options.margint - Top margin
+   * @param {number} options.marginb - Bottom margin
    */
-    constructor(x, y, width, height, {parent=null, type="", id=null} = {}){
-        super(x, y, width, height, {parent: parent, type: type, id: id,});
+    constructor(x, y, width, height, {parent=null, type="", id=null, margin=0, marginx=null, marginy=null, marginl=null, marginr=null, margint=null, marginb=null, minWidth=0, minHeight=0, showDebugOverlay=false} = {}){
+        super(x, y, width, height, {parent: parent, type: type, id: id, margin: margin, marginx: marginx, marginy: marginy, marginl: marginl, marginr: marginr, margint: margint, marginb: marginb, minWidth: minWidth, minHeight: minHeight, showDebugOverlay: showDebugOverlay});
     }
 
     /**

package/Frames/GridFrame.js

@@ -14,6 +14,7 @@ export class GridFrame extends Frame{
    * @param {p5.Color} options.highlightedBorderColor - Highlighted border color
    * @param {number} options.borderWidth - Border width
    * @param {number} options.cornerRadius - Corner radius
+  * @param {number} options.pad - Unified padding for both axes
    * @param {number} options.padx - Horizontal padding
    * @param {number} options.pady - Vertical padding
    * @param {boolean} options.alwaysShowBanner - Always show banner
@@ -21,47 +22,83 @@ export class GridFrame extends Frame{
    * @param {number} options.cols - Number of columns in grid
    * @param {number} options.nearestBorderThreshold - Border detection threshold
    * @param {number} options.bannerHeight - Banner height
+   * @param {p5.Color|string} options.bannerColor - Banner background color
+   * @param {p5.Color|string} options.bannerDotColor - Banner dot indicator color
    * @param {Component|null} options.parent - Parent component
    * @param {boolean} options.enableReposition - Allow dragging
    * @param {boolean} options.enableOptimisedReposition - Optimized repositioning
    * @param {boolean} options.enableResizing - Allow resizing
    * @param {boolean} options.enableOptimisedResizing - Optimized resizing
    * @param {boolean} options.enableShadow - Enable shadow
-   * @param {string} options.shadowColor - Shadow color
-   * @param {number} options.shadowIntensity - Shadow opacity
-   * @param {number} options.shadowSpread - Shadow spread
-   * @param {number} options.shadowDetail - Shadow layers
+  * @param {string} options.shadowColor - Shadow color (CSS color string)
+  * @param {number} options.shadowBlur - Shadow blur radius
+  * @param {number} options.shadowOffsetX - Shadow offset on X axis
+  * @param {number} options.shadowOffsetY - Shadow offset on Y axis
+   * @param {number} options.margin - General margin for all sides
+   * @param {number} options.marginx - Horizontal margin (left and right)
+   * @param {number} options.marginy - Vertical margin (top and bottom)
+   * @param {number} options.marginl - Left margin
+   * @param {number} options.marginr - Right margin
+   * @param {number} options.margint - Top margin
+   * @param {number} options.marginb - Bottom margin
    */
     constructor(x, y, width, height, {
       id=null,
-      backgroundColor = color(255),
-      borderColor = color(0),
-      highlightedBorderColor = color(0),
+      backgroundColor = color('#1e1e2e'),
+      borderColor = color('#3a3a4d'),
+      highlightedBorderColor = color('#5a5a7a'),
       borderWidth = 1,
-      cornerRadius = 0,
-      padx=0,
-      pady=0,
+      cornerRadius = 8,
+      pad=null,
+      padx=null,
+      pady=null,
       alwaysShowBanner = false,
       rows=1,
       cols=1,
       nearestBorderThreshold=8,
       bannerHeight=35,
+      bannerColor='#2a2a3d',
+      bannerDotColor='#6a6a8a',
       parent=null,
       enableReposition=false,
       enableOptimisedReposition=false,
       enableResizing=false,
       enableOptimisedResizing=false,
       enableShadow=false,
-      shadowColor= 'rgb(0,0,0)',
-      shadowIntensity = 0.3,
-      shadowSpread = 1,
-      shadowDetail = 10,
+      shadowColor= 'rgba(0,0,0,0.5)',
+      shadowBlur = 12,
+      shadowOffsetX = 0,
+      shadowOffsetY = 4,
+      margin = 0,
+      marginx = null,
+      marginy = null,
+      marginl = null,
+      marginr = null,
+      margint = null,
+      marginb = null,
+      minWidth = 0,
+      minHeight = 0,
+      showDebugOverlay = false,
     }
     ){
+      if (pad !== null && pad !== undefined) {
+        padx = pad;
+        pady = pad;
+      }
+
+      if (padx === null || padx === undefined) {
+        padx = 0;
+      }
+
+      if (pady === null || pady === undefined) {
+        pady = 0;
+      }
+
       bannerHeight = bannerHeight%height;
       super(x, y, width, height, id, backgroundColor, borderColor, highlightedBorderColor, borderWidth,
-        cornerRadius, padx, pady, alwaysShowBanner, bannerHeight, nearestBorderThreshold, parent, "Frame",
-        enableReposition, enableOptimisedReposition, enableResizing, enableOptimisedResizing, enableShadow, shadowColor, shadowIntensity, shadowSpread, shadowDetail);
+        cornerRadius, padx, pady, alwaysShowBanner, bannerHeight, bannerColor, bannerDotColor, nearestBorderThreshold, parent, "Frame",
+        enableReposition, enableOptimisedReposition, enableResizing, enableOptimisedResizing, enableShadow, shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY,
+        {margin, marginx, marginy, marginl, marginr, margint, marginb, minWidth, minHeight, showDebugOverlay});
 
       //for storing child elements
       this.rows=rows;
@@ -224,6 +261,62 @@ export class GridFrame extends Frame{
       this.colWeights[colNum] = weight;
       this.totalColWeight+=weight;
     }
+
+    /**
+   * Computes the effective minimum width from children's constraints.
+   * @returns {number}
+   */
+    getEffectiveMinWidth() {
+      let minW = this.minWidth;
+      if (!this.grid) return minW;
+
+      let maxNeeded = 0;
+      for (let i = 0; i < this.cols; i++) {
+        for (let j = 0; j < this.rows; j++) {
+          if (this.grid[j][i] != null && this.grid[j][i] != "taken") {
+            let curr = this.grid[j][i];
+            let childMin = curr[0].getEffectiveMinWidth();
+            if (childMin <= 0) continue;
+            let childNeeded = childMin + curr[3] + curr[4] + curr[0].marginl + curr[0].marginr;
+            let spanWeight = 0;
+            for (let k = 0; k < curr[2]; k++) spanWeight += this.colWeights[i + k];
+            let needed = childNeeded * this.totalColWeight / spanWeight + 2 * this.padx;
+            maxNeeded = Math.max(maxNeeded, needed);
+          }
+        }
+      }
+
+      return Math.max(minW, maxNeeded);
+    }
+
+    /**
+   * Computes the effective minimum height from children's constraints.
+   * @returns {number}
+   */
+    getEffectiveMinHeight() {
+      let minH = this.minHeight;
+      if (!this.grid) return minH;
+
+      let bannerH = (this.alwaysShowBanner || this.enableReposition) ? (this.bannerHeight || 0) : 0;
+
+      let maxNeeded = 0;
+      for (let i = 0; i < this.rows; i++) {
+        for (let j = 0; j < this.cols; j++) {
+          if (this.grid[i][j] != null && this.grid[i][j] != "taken") {
+            let curr = this.grid[i][j];
+            let childMin = curr[0].getEffectiveMinHeight();
+            if (childMin <= 0) continue;
+            let childNeeded = childMin + curr[5] + curr[6] + curr[0].margint + curr[0].marginb;
+            let spanWeight = 0;
+            for (let k = 0; k < curr[1]; k++) spanWeight += this.rowWeights[i + k];
+            let needed = childNeeded * this.totalRowWeight / spanWeight + 2 * this.pady + bannerH;
+            maxNeeded = Math.max(maxNeeded, needed);
+          }
+        }
+      }
+
+      return Math.max(minH, maxNeeded);
+    }
   
     /**
    * Initializes the grid structure with specified rows and columns
@@ -266,14 +359,17 @@ export class GridFrame extends Frame{
           if(this.grid && this.grid[j][i]!=null && this.grid[j][i]!="taken"){
             let curr = this.grid[j][i];
   
-            curr[0].x = x + curr[3];
+            curr[0].x = x + curr[3] + curr[0].marginl;
             curr[0].width = 0;
   
             for(let k=0; k<curr[2]; k++){
               curr[0].width += (this.colWeights[i+k]/this.totalColWeight) * w;
             }
   
-            curr[0].width -= curr[3] + curr[4];
+            curr[0].width -= curr[3] + curr[4] + curr[0].marginl + curr[0].marginr;
+
+            // Clamp to child's effective minimum width
+            curr[0].width = Math.max(curr[0].width, curr[0].getEffectiveMinWidth());
   
             if(curr[0].type=="Frame"){
               curr[0].adjustWidth(curr[0].x + curr[0].padx, curr[0].width - 2*curr[0].padx);
@@ -300,15 +396,18 @@ export class GridFrame extends Frame{
           if(this.grid && this.grid[i][j]!=null && this.grid[i][j]!="taken"){
             let curr = this.grid[i][j];
   
-            curr[0].y = y + curr[5];
+            curr[0].y = y + curr[5] + curr[0].margint;
             curr[0].height = 0;
   
             for(let k=0; k<curr[1]; k++){
               curr[0].height += (this.rowWeights[i+k]/this.totalRowWeight) * h;
             }
   
-            curr[0].height -= curr[5] + curr[6];
+            curr[0].height -= curr[5] + curr[6] + curr[0].margint + curr[0].marginb;
   
+            // Clamp to child's effective minimum height
+            curr[0].height = Math.max(curr[0].height, curr[0].getEffectiveMinHeight());
+
             //console.log("curr[0].type:"+curr[0].type);
 
             if(curr[0].type=="Frame"){
@@ -353,8 +452,8 @@ export class GridFrame extends Frame{
         y += (this.rowWeights[i]/this.totalRowWeight) * h;
       }
   
-      this.grid[row][col][0].x = x + this.grid[row][col][3];
-      this.grid[row][col][0].y = y + this.grid[row][col][5];
+      this.grid[row][col][0].x = x + this.grid[row][col][3] + this.grid[row][col][0].marginl;
+      this.grid[row][col][0].y = y + this.grid[row][col][5] + this.grid[row][col][0].margint;
   
       this.expandElement(row, col, rowSpan, colSpan);
   
@@ -445,8 +544,13 @@ export class GridFrame extends Frame{
         }
       }
   
-      this.grid[row][col][0].width = w - this.grid[row][col][3] - this.grid[row][col][4];
-      this.grid[row][col][0].height = h - this.grid[row][col][5] - this.grid[row][col][6];
+      this.grid[row][col][0].width = w - this.grid[row][col][3] - this.grid[row][col][4] - this.grid[row][col][0].marginl - this.grid[row][col][0].marginr;
+      this.grid[row][col][0].height = h - this.grid[row][col][5] - this.grid[row][col][6] - this.grid[row][col][0].margint - this.grid[row][col][0].marginb;
+
+      // Clamp to child's effective min dimensions
+      this.grid[row][col][0].width = Math.max(this.grid[row][col][0].width, this.grid[row][col][0].getEffectiveMinWidth());
+      this.grid[row][col][0].height = Math.max(this.grid[row][col][0].height, this.grid[row][col][0].getEffectiveMinHeight());
+
       this.grid[row][col][1] = yLimit+1;
       this.grid[row][col][2] = xLimit+1;
     }
@@ -523,10 +627,10 @@ export class GridFrame extends Frame{
       //showing the top banner
       if(this.alwaysShowBanner || (this.enableReposition && this.isBannerShown==true)){
         noStroke();
-        fill(0);
-        rect(this.x, this.y, this.width, this.bannerHeight);
+        fill(this.bannerColor);
+        rect(this.x, this.y, this.width, this.bannerHeight, this.cornerRadius, this.cornerRadius, 0, 0);
   
-        fill(255);        
+        fill(this.bannerDotColor);
         ellipse(this.x+this.width/2,
            this.y+(this.bannerHeight)/2,
            (this.bannerHeight)/4,