@usman404/crowjs 1.0.4 → 1.1.0

package/Core/Component.js

@@ -10,8 +10,15 @@ export class Component{
    * @param {Object} options - Configuration options
    * @param {string} options.type - The type identifier of the component
    * @param {string|null} options.id - Unique identifier for the component
+   * @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, {type="", id=null} = {}){
+  constructor(x, y, width, height, {type="", id=null, margin=0, marginx=null, marginy=null, marginl=null, marginr=null, margint=null, marginb=null, minWidth=0, minHeight=0, showDebugOverlay=false} = {}){
     this.x = x;
     this.y = y;
     this.id = id;
@@ -22,6 +29,74 @@ export class Component{
     this.root = null;
     this.eventListeners = {};
     this.children = [];
+    this.showDebugOverlay = showDebugOverlay;
+
+    // Margin resolution
+    const resolvedMarginx = (marginx ?? margin ?? 0);
+    const resolvedMarginy = (marginy ?? margin ?? 0);
+    this.margin = margin;
+    this.marginx = resolvedMarginx;
+    this.marginy = resolvedMarginy;
+    this.marginl = marginl ?? resolvedMarginx;
+    this.marginr = marginr ?? resolvedMarginx;
+    this.margint = margint ?? resolvedMarginy;
+    this.marginb = marginb ?? resolvedMarginy;
+
+    // Minimum dimensions
+    this.minWidth = minWidth;
+    this.minHeight = minHeight;
+  }
+
+  /**
+   * Returns the x-coordinate including left margin (outer bound)
+   * @returns {number}
+   */
+  get outerX() {
+    return this.x - this.marginl;
+  }
+
+  /**
+   * Returns the y-coordinate including top margin (outer bound)
+   * @returns {number}
+   */
+  get outerY() {
+    return this.y - this.margint;
+  }
+
+  /**
+   * Returns the total width including left and right margins
+   * @returns {number}
+   */
+  get outerWidth() {
+    return this.width + this.marginl + this.marginr;
+  }
+
+  /**
+   * Returns the total height including top and bottom margins
+   * @returns {number}
+   */
+  get outerHeight() {
+    return this.height + this.margint + this.marginb;
+  }
+
+  /**
+   * Returns the effective minimum width, accounting for children's constraints.
+   * Subclasses (e.g. GridFrame, ScrollFrame) override this to compute
+   * the minimum from their children's requirements.
+   * @returns {number}
+   */
+  getEffectiveMinWidth() {
+    return this.minWidth;
+  }
+
+  /**
+   * Returns the effective minimum height, accounting for children's constraints.
+   * Subclasses (e.g. GridFrame, ScrollFrame) override this to compute
+   * the minimum from their children's requirements.
+   * @returns {number}
+   */
+  getEffectiveMinHeight() {
+    return this.minHeight;
   }
 
   //to show itself
@@ -423,4 +498,135 @@ export class Component{
     }
   }
 
+  /**
+   * Draws debug overlay for margin and padding visualization.
+   * Margin is shown in orange, padding in blue, both with low opacity.
+   * Small numbers are drawn when there is enough room.
+   */
+  drawDebugOverlay(){
+    const marginColor = [255, 140, 0, 80];   // orange, low opacity
+    const marginBorder = [255, 100, 0];       // orange, high contrast border
+    const paddingColor = [0, 120, 255, 80];   // blue, low opacity
+    const paddingBorder = [0, 80, 220];       // blue, high contrast border
+    const borderWeight = 1.5;
+    const labelColor = [0, 0, 0, 200];
+    const minLabelSize = 8;
+    const labelFontSize = 9;
+
+    push();
+
+    // --- Margin areas (orange) ---
+    // Top margin
+    if(this.margint > 0){
+      fill(...marginColor);
+      stroke(...marginBorder);
+      strokeWeight(borderWeight);
+      rect(this.x, this.y - this.margint, this.width, this.margint);
+      this._drawDebugLabel(this.margint, this.x, this.y - this.margint, this.width, this.margint, labelColor, labelFontSize, minLabelSize);
+    }
+    // Bottom margin
+    if(this.marginb > 0){
+      fill(...marginColor);
+      stroke(...marginBorder);
+      strokeWeight(borderWeight);
+      rect(this.x, this.y + this.height, this.width, this.marginb);
+      this._drawDebugLabel(this.marginb, this.x, this.y + this.height, this.width, this.marginb, labelColor, labelFontSize, minLabelSize);
+    }
+    // Left margin (full outer height including top/bottom margins)
+    if(this.marginl > 0){
+      fill(...marginColor);
+      stroke(...marginBorder);
+      strokeWeight(borderWeight);
+      rect(this.x - this.marginl, this.y - this.margint, this.marginl, this.height + this.margint + this.marginb);
+      this._drawDebugLabel(this.marginl, this.x - this.marginl, this.y - this.margint, this.marginl, this.height + this.margint + this.marginb, labelColor, labelFontSize, minLabelSize);
+    }
+    // Right margin (full outer height including top/bottom margins)
+    if(this.marginr > 0){
+      fill(...marginColor);
+      stroke(...marginBorder);
+      strokeWeight(borderWeight);
+      rect(this.x + this.width, this.y - this.margint, this.marginr, this.height + this.margint + this.marginb);
+      this._drawDebugLabel(this.marginr, this.x + this.width, this.y - this.margint, this.marginr, this.height + this.margint + this.marginb, labelColor, labelFontSize, minLabelSize);
+    }
+
+    // --- Padding areas (blue) ---
+    // Resolve padding values: TextComponent uses padl/padr/padt/padb, Frame uses padx/pady
+    let pl = this.padl ?? this.padx ?? 0;
+    let pr = this.padr ?? this.padx ?? 0;
+    let pt = this.padt ?? this.pady ?? 0;
+    let pb = this.padb ?? this.pady ?? 0;
+
+    // Top padding
+    if(pt > 0){
+      fill(...paddingColor);
+      stroke(...paddingBorder);
+      strokeWeight(borderWeight);
+      rect(this.x, this.y, this.width, pt);
+      this._drawDebugLabel(pt, this.x, this.y, this.width, pt, labelColor, labelFontSize, minLabelSize);
+    }
+    // Bottom padding
+    if(pb > 0){
+      fill(...paddingColor);
+      stroke(...paddingBorder);
+      strokeWeight(borderWeight);
+      rect(this.x, this.y + this.height - pb, this.width, pb);
+      this._drawDebugLabel(pb, this.x, this.y + this.height - pb, this.width, pb, labelColor, labelFontSize, minLabelSize);
+    }
+    // Left padding (between top and bottom padding)
+    if(pl > 0){
+      fill(...paddingColor);
+      stroke(...paddingBorder);
+      strokeWeight(borderWeight);
+      rect(this.x, this.y + pt, pl, this.height - pt - pb);
+      this._drawDebugLabel(pl, this.x, this.y + pt, pl, this.height - pt - pb, labelColor, labelFontSize, minLabelSize);
+    }
+    // Right padding (between top and bottom padding)
+    if(pr > 0){
+      fill(...paddingColor);
+      stroke(...paddingBorder);
+      strokeWeight(borderWeight);
+      rect(this.x + this.width - pr, this.y + pt, pr, this.height - pt - pb);
+      this._drawDebugLabel(pr, this.x + this.width - pr, this.y + pt, pr, this.height - pt - pb, labelColor, labelFontSize, minLabelSize);
+    }
+
+    pop();
+  }
+
+  /**
+   * Draws a small numeric label centered in a debug overlay region if there's enough room
+   * @param {number} value - The numeric value to display
+   * @param {number} rx - Region x
+   * @param {number} ry - Region y
+   * @param {number} rw - Region width
+   * @param {number} rh - Region height
+   * @param {number[]} labelColor - RGBA color array for text
+   * @param {number} fontSize - Font size for the label
+   * @param {number} minSize - Minimum region dimension to show label
+   * @private
+   */
+  _drawDebugLabel(value, rx, ry, rw, rh, labelColor, fontSize, minSize){
+    if(rw < minSize || rh < minSize) return;
+    push();
+    fill(...labelColor);
+    noStroke();
+    textSize(fontSize);
+    textAlign(CENTER, CENTER);
+    text(Math.round(value), rx + rw / 2, ry + rh / 2);
+    pop();
+  }
+
+  /**
+   * Recursively draws debug overlays for this component and all children.
+   * Draws if the component's own showDebugOverlay is true, or if the root's showDebugOverlay is true.
+   */
+  drawDebugOverlayRecursive(){
+    const rootDebug = this.root && this.root.showDebugOverlay;
+    if(this.showDebugOverlay || rootDebug){
+      this.drawDebugOverlay();
+    }
+    for(let i = 0; i < this.children.length; i++){
+      this.children[i].drawDebugOverlayRecursive();
+    }
+  }
+
 }

package/Core/GUIEvent/KeyboardEvent.js

@@ -8,7 +8,8 @@ export class KeyboardEvent extends GUIEvent{
    * @param {string} type - The type of keyboard event
    * @param {Component} target - The target component
    */
-    constructor(x, y, type, target){
+    constructor(x, y, type, target, nativeEvent){
         super(x, y, type, target);
+        this.nativeEvent = nativeEvent || null;
     }
 }

package/Core/Root.js

@@ -5,8 +5,10 @@ import { Component } from "./Component.js";
 export class Root{
    /**
    * Creates the root manager that handles all GUI components and events
+   * @param {Object} options - Configuration options
+   * @param {boolean} options.showDebugOverlay - When true, visualizes margin (orange) and padding (blue) for all components
    */
-    constructor(){
+    constructor({showDebugOverlay = false} = {}){
       /** @type {Array<Component>} */
       this.layers = [];//determines order of display
       this.lastActiveElement = -2;
@@ -17,6 +19,8 @@ export class Root{
       this.elementsMap = new Map();//for storing ids
       // this.preferences = {};
       this.focusedField = null;//for focusable input fields
+      this.showDebugOverlay = showDebugOverlay;//for visualizing padding and margin
+      this._pressedInsideFocusedField = false;
     }
 
     /**
@@ -38,12 +42,18 @@ export class Root{
     }
   
     /**
-   * Renders all components in the correct z-order
+   * Renders all components in the correct z-order.
+   * When showDebugOverlay is true, also draws margin/padding visualization.
    */
     show(){
       for(let i=0; i<this.layers.length; i++){
         this.layers[i].show();
       }
+
+      // Always run the recursive check; each component decides based on its own flag or root's flag
+      for(let i=0; i<this.layers.length; i++){
+        this.layers[i].drawDebugOverlayRecursive();
+      }
     }
   
     /**
@@ -228,8 +238,8 @@ export class Root{
    * @param {Event|null} options.e - The original browser event
    */
     handleMouseEvent(type, x, y, {e=null}={}){
-      //currently engaged element
-      if(mouseIsPressed && !this.isNum(this.activeElement)){
+      //currently engaged element (only for continuous events like drag, not for new press/click)
+      if(type !== "press" && type !== "click" && mouseIsPressed && !this.isNum(this.activeElement)){
         this.sendToFront(this.activeElement);
 
         let target = this.activeElement;
@@ -256,7 +266,15 @@ export class Root{
       //clicked somewhere outside
       if(target==null){
         if(type=="click"||type=="press"){
+          // If the press started inside the focused field (drag-select that ended outside), don't blur
+          if(type=="click" && this._pressedInsideFocusedField){
+            this._pressedInsideFocusedField = false;
+            this.activeElement = -1;
+            return;
+          }
+
           if(!this.focusedField){
+            this.activeElement = -1;
             return;
           }
 
@@ -280,7 +298,19 @@ export class Root{
           if(!this.focusedField.isFocused){
             this.focusedField.focus();
           }
+
+          // Track that this press originated inside the focused field
+          if(type=="press"){
+            this._pressedInsideFocusedField = true;
+          }
           
+        } else {
+          // Pressed/clicked on a non-input component: blur focused field
+          if(type=="press" && this.focusedField){
+            this.focusedField.blur();
+            this.focusedField = null;
+          }
+          this._pressedInsideFocusedField = false;
         }
       }
     }
@@ -291,33 +321,13 @@ export class Root{
    * @param {number} x - The x-coordinate
    * @param {number} y - The y-coordinate
    */
-    handleKeyboardEvent(type, x, y){
-      if(this.focusedField){
-        // console.log(this.focusedField);
-        let target = this.focusedField;
-        let event = new KeyboardEvent(x, y, type, target);
-        // console.log(event);
-        target.dispatchEvent(event);
-        return;
-      }
-
-      let target = null;
-      for(let i=this.layers.length-1; i>=0; i--){
-        target = this.layers[i].findTarget();
-        if(target!=null){
-          // console.log(target.constructor.name);
-          this.lastActiveElement = this.activeElement;
-          this.activeElement = target;
-          break;
-        }
-      }
-
-      if(target==null){
-        this.activeElement = -1;
+    handleKeyboardEvent(type, x, y, nativeEvent){
+      if(!this.focusedField){
         return;
       }
 
-      let event = new KeyboardEvent(x, y, type, target);
+      let target = this.focusedField;
+      let event = new KeyboardEvent(x, y, type, target, nativeEvent);
       target.dispatchEvent(event);
     }
 
@@ -533,8 +543,8 @@ export class Root{
    * @param {number} x - The current mouse x-coordinate
    * @param {number} y - The current mouse y-coordinate
    */
-    keyPressedEventListeners(x, y){
-      this.handleKeyboardEvent("keyPress", x, y);
+    keyPressedEventListeners(x, y, nativeEvent){
+      this.handleKeyboardEvent("keyPress", x, y, nativeEvent);
     }
 
     //runs continously when a key is pressed

package/Frames/DummyFrame.js

@@ -71,74 +71,76 @@ export class DummyFrame extends Component{
    */
     updateDimensions(){
         // console.log("updating dimensions...");
+        const effMinW = this.parent.getEffectiveMinWidth();
+        const effMinH = this.parent.getEffectiveMinHeight();
 
         switch(this.nearestBorder){
             case "left":
-                if(this.x+this.width-mouseX>=this.parent.bannerHeight){
+                if(this.x+this.width-mouseX>=effMinW){
                     this.width = this.x + this.width - mouseX;
                     this.x = mouseX;
                 }
 
                 break;
             case "right":
-                if(mouseX-this.x>=this.parent.bannerHeight){
+                if(mouseX-this.x>=effMinW){
                     this.width = mouseX - this.x;
                 }
 
                 break;
             case "top":
-                if(this.y+this.height-mouseY>=this.parent.bannerHeight){
+                if(this.y+this.height-mouseY>=effMinH){
                     this.height =this.y + this.height - mouseY;
                     this.y = mouseY;
                 }
 
                 break;
             case "bottom":
-                if(mouseY-this.y>=this.parent.bannerHeight){
+                if(mouseY-this.y>=effMinH){
                     this.height = mouseY - this.y;
                 }
 
                 break;
             case "top-left":
-                if(this.x+this.width-mouseX>=this.parent.bannerHeight){
+                if(this.x+this.width-mouseX>=effMinW){
                     this.width = this.x + this.width - mouseX;
                     this.x = mouseX;
                 }
     
-                if(this.y+this.height-mouseY>=this.parent.bannerHeight){
+                if(this.y+this.height-mouseY>=effMinH){
                     this.height =this.y + this.height - mouseY;
                     this.y = mouseY;
                 }
 
                 break;
             case "top-right":
-                if(mouseX-this.x>=this.parent.bannerHeight){
+                if(mouseX-this.x>=effMinW){
                     this.width = mouseX - this.x;
                 }
     
-                if(this.y+this.height-mouseY>=this.parent.bannerHeight){
+                if(this.y+this.height-mouseY>=effMinH){
                     this.height =this.y + this.height - mouseY;
                     this.y = mouseY;
                 }
 
                 break;
             case "bottom-left":
-                if(this.x+this.width-mouseX>=this.parent.bannerHeight){
+                if(this.x+this.width-mouseX>=effMinW){
                     this.width = this.x + this.width - mouseX;
                     this.x = mouseX;
                 }
     
-                if(mouseY-this.y>=this.parent.bannerHeight){
+                if(mouseY-this.y>=effMinH){
                     this.height = mouseY - this.y;
                 }
 
                 break;
             case "bottom-right":
-                if(mouseX-this.x>=this.parent.bannerHeight){
+                if(mouseX-this.x>=effMinW){
                     this.width = mouseX - this.x;
                 }
     
-                if(mouseY-this.y>=this.parent.bannerHeight){
+                if(mouseY-this.y>=effMinH){
                     this.height = mouseY - this.y;
                 }