@usman404/crowjs 1.0.4 → 1.1.0

package/Frames/ScrollFrame.js

@@ -14,6 +14,7 @@ export class ScrollFrame 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,6 +22,8 @@ export class ScrollFrame extends Frame{
    * @param {boolean} options.enableHScroll - Enable horizontal scrolling
    * @param {number} options.scrollSensitivity - Scroll speed
    * @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 {string} options.alignment - Layout alignment ("v" or "h")
    * @param {number} options.nearestBorderThreshold - Border detection threshold
    * @param {Component|null} options.parent - Parent component
@@ -29,25 +32,35 @@ export class ScrollFrame extends Frame{
    * @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,
       enableVScroll=false,
       enableHScroll=false,
       scrollSensitivity=20,
       bannerHeight=35,
+      bannerColor='#2a2a3d',
+      bannerDotColor='#6a6a8a',
       alignment="v", //v for vertical, h for horizontal
       nearestBorderThreshold=8,
       parent=null,
@@ -56,15 +69,39 @@ export class ScrollFrame extends Frame{
       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});
       
       this.preferences = [];
       //used for calculating weighted dimensions of child elements
@@ -155,10 +192,10 @@ export class ScrollFrame extends Frame{
       //show the top banner
       if(this.alwaysShowBanner || (this.enableReposition && this.isBannerShown)){
         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, (this.bannerHeight)/4);
         ellipse(this.x+this.width/2 - (this.bannerHeight)/2, this.y+(this.bannerHeight)/2, (this.bannerHeight)/4, (this.bannerHeight)/4);
         ellipse(this.x+this.width/2 + (this.bannerHeight)/2, this.y+(this.bannerHeight)/2, (this.bannerHeight)/4, (this.bannerHeight)/4);
@@ -669,34 +706,104 @@ export class ScrollFrame extends Frame{
         }
       }
     }
+
+    /**
+   * Computes the effective minimum width from children's constraints.
+   * @returns {number}
+   */
+    getEffectiveMinWidth() {
+      let minW = this.minWidth;
+      let len = this.children.length;
+      if (len === 0) return minW;
+
+      let maxNeeded = 0;
+      let invWeight = this.totalWeight > 0 ? 1 / this.totalWeight : 0;
+      for (let i = 0; i < len; i++) {
+        let curr = this.children[i];
+        let pref = this.preferences[i];
+        let childMin = curr.getEffectiveMinWidth();
+        if (childMin <= 0) continue;
+        let childNeeded = childMin + pref[1] + pref[2] + curr.marginl + curr.marginr;
+        if (this.alignment === "v") {
+          // All children share full width
+          maxNeeded = Math.max(maxNeeded, childNeeded + 2 * this.padx);
+        } else {
+          // Horizontal: proportional distribution
+          let weight = pref[0];
+          let needed = childNeeded / (weight * invWeight) + 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;
+      let len = this.children.length;
+      if (len === 0) return minH;
+
+      let bannerH = (this.alwaysShowBanner || this.enableReposition) ? (this.bannerHeight || 0) : 0;
+
+      let maxNeeded = 0;
+      let invWeight = this.totalWeight > 0 ? 1 / this.totalWeight : 0;
+      for (let i = 0; i < len; i++) {
+        let curr = this.children[i];
+        let pref = this.preferences[i];
+        let childMin = curr.getEffectiveMinHeight();
+        if (childMin <= 0) continue;
+        let childNeeded = childMin + pref[3] + pref[4] + curr.margint + curr.marginb;
+        if (this.alignment === "v") {
+          // Vertical: proportional distribution
+          let weight = pref[0];
+          let needed = childNeeded / (weight * invWeight) + 2 * this.pady + bannerH;
+          maxNeeded = Math.max(maxNeeded, needed);
+        } else {
+          // All children share full height
+          maxNeeded = Math.max(maxNeeded, childNeeded + 2 * this.pady + bannerH);
+        }
+      }
+
+      return Math.max(minH, maxNeeded);
+    }
+
     /**
    * Adjusts child component heights based on weights and alignment
    * @param {number} y - Starting y position
    * @param {number} h - Available height
    */
     adjustHeight(y, h){
-      //[element, weight, padL, padR, padT, padB]
-      for(let i=0; i<this.children.length; i++){
+      let len = this.children.length;
+      let invWeight = this.totalWeight > 0 ? 1 / this.totalWeight : 0;
+      for(let i=0; i<len; i++){
   
         let curr = this.children[i];
+        let pref = this.preferences[i];
   
-        if(i-1>=0){
+        if(i > 0){
           let prev = this.children[i-1];
           if(this.alignment=="v"){
-            curr.y = prev.y + prev.height + this.preferences[i-1][4] + this.preferences[i][3];
+            curr.y = prev.y + prev.height + prev.marginb + this.preferences[i-1][4] + curr.margint + pref[3];
           } else {
-            curr.y = y + this.preferences[i][3];
+            curr.y = y + curr.margint + pref[3];
           }
         } else {
-          curr.y = y + this.preferences[i][3];
+          curr.y = y + curr.margint + pref[3];
         }
         
         if(this.enableVScroll==false){
           if(this.alignment=="v"){
-            curr.height = (this.preferences[i][0]/(this.totalWeight))*(h) - this.preferences[i][3] - this.preferences[i][4];
+            curr.height = (pref[0] * invWeight) * h - pref[3] - pref[4] - curr.margint - curr.marginb;
           } else {
-            curr.height = h - this.preferences[i][3] - this.preferences[i][4];
+            curr.height = h - pref[3] - pref[4] - curr.margint - curr.marginb;
           }
+
+          // Clamp to child's effective minimum height
+          curr.height = Math.max(curr.height, curr.getEffectiveMinHeight());
         }
   
         if(curr.type=="Frame"){
@@ -715,26 +822,31 @@ export class ScrollFrame extends Frame{
    * @param {number} w - Available width
    */
     adjustWidth(x, w){
-      //[element, weight, padL, padR, padT, padB]
-      for(let i=0; i<this.children.length; i++){
+      let len = this.children.length;
+      let invWeight = this.totalWeight > 0 ? 1 / this.totalWeight : 0;
+      for(let i=0; i<len; i++){
         let curr = this.children[i];
-        if(i-1>=0){
+        let pref = this.preferences[i];
+        if(i > 0){
           let prev = this.children[i-1];
           if(this.alignment!="v"){
-            curr.x = prev.x + prev.width + this.preferences[i-1][2] + this.preferences[i][1];
+            curr.x = prev.x + prev.width + prev.marginr + this.preferences[i-1][2] + curr.marginl + pref[1];
           } else {
-            curr.x = x + this.preferences[i][1];
+            curr.x = x + curr.marginl + pref[1];
           }
         } else {
-          curr.x = x + this.preferences[i][1];
+          curr.x = x + curr.marginl + pref[1];
         }
   
         if(this.enableHScroll==false){
           if(this.alignment=="v"){
-            curr.width = w - this.preferences[i][1] - this.preferences[i][2];
+            curr.width = w - pref[1] - pref[2] - curr.marginl - curr.marginr;
           } else {
-            curr.width = (this.preferences[i][0]/(this.totalWeight))*(w) - this.preferences[i][1] - this.preferences[i][2];
+            curr.width = (pref[0] * invWeight) * w - pref[1] - pref[2] - curr.marginl - curr.marginr;
           }
+
+          // Clamp to child's effective minimum width
+          curr.width = Math.max(curr.width, curr.getEffectiveMinWidth());
         }
   
         if(curr.type=="Frame"){
@@ -753,11 +865,13 @@ export class ScrollFrame extends Frame{
    * @param {number} yDiff - Y position difference
    */
     updatePosUtil(xDiff, yDiff){
-      for(let i=0; i<this.children.length; i++){
-        this.children[i].x -= xDiff;
-        this.children[i].y -= yDiff;
-        if(this.children[i].type=="Frame"){
-          this.children[i].updatePosUtil(xDiff, yDiff);
+      let len = this.children.length;
+      for(let i=0; i<len; i++){
+        let child = this.children[i];
+        child.x -= xDiff;
+        child.y -= yDiff;
+        if(child.type==="Frame"){
+          child.updatePosUtil(xDiff, yDiff);
         }
       }
     }

package/README.md

@@ -3,7 +3,7 @@
 
 ![Logo](/crowjs-01-01.png)
 
-## ✨ Features
+## Features
 - Minimal and canvas-native UI for p5.js sketches  
 - Frames, nested layouts, scrollable & grid containers  
 - Customizable UI components: buttons, sliders, toggles, input fields, etc.  
@@ -12,7 +12,7 @@
 - Fully drawn inside p5.js (no HTML overlays or DOM interference)  
 - Ideal for creative coding, simulations, visual experiments, and tools  
 
-## 🚀 Getting Started
+## Getting Started
 
 ### 1. Install
 
@@ -99,31 +99,31 @@ window.keyPressed = function(event){
 }
 ```
 
-## 🧰 Components Overview
+## Components Overview
 - `Label(x, y, width, height, text, {options})`  
 - `ScrollFrame`, `GridFrame`, `Label`, etc.  
 
 More components and documentation coming soon.
 
-## 📚 Documentation & Tutorials
+## Documentation & Tutorials
 A full **video series** and documentation site are in the works!  
 Stay tuned for:  
 - Getting started tutorials  
 - Custom component creation  
 - Internals of CrowJS for contributors  
 
-## 💡 Why CrowJS?
+## Why CrowJS?
 While p5.js is amazing for generative art and simulations, there's a noticeable gap when it comes to in-sketch UI. CrowJS fills that gap by giving you a canvas-first GUI framework that blends seamlessly with your visuals.
 
-## 🤝 Contributing
+## Contributing
 CrowJS is open-source! Contributions, bug reports, and ideas are welcome.  
 See the `CONTRIBUTING.md` file for details.
 
-## 📄 License
+## License
 This project is licensed under the MIT License.  
 See the `LICENSE` file for details.
 
-## 🌐 Links
+## Links
 - My sketches: [https://editor.p5js.org/Usman_Ali/sketches/](p5js.org/Usman_Ali/sketches/)
 - p5.js: [https://p5js.org](https://p5js.org)
 

package/UIComponents/Button.js

@@ -0,0 +1,281 @@
+import { TextComponent } from './TextComponent.js';
+import { Component } from '../Core/Component.js';
+
+export class Button extends TextComponent {
+  /**
+   * Creates a button component with hover/press visuals and click behavior
+   * @param {number} x - The x-coordinate
+   * @param {number} y - The y-coordinate
+   * @param {number} width - The width
+   * @param {number} height - The height
+   * @param {string} label - The text to display
+   * @param {Object} options - Configuration options
+   * @param {string|null} options.id - Component ID
+   * @param {Component|null} options.parent - Parent component
+   * @param {p5.Color} options.backgroundColor - Background color
+   * @param {p5.Color} options.textColor - Text color
+   * @param {p5.Color} options.hoverBackgroundColor - Background on hover
+   * @param {p5.Color} options.hoverTextColor - Text color on hover
+   * @param {p5.Color} options.pressedBackgroundColor - Background on press
+   * @param {p5.Color} options.pressedTextColor - Text color on press
+   * @param {boolean} options.borderFlag - Whether to show border
+   * @param {p5.Color} options.borderColor - Border color
+   * @param {number} options.borderWidth - Border width
+   * @param {number} options.cornerRadius - Corner radius
+   * @param {boolean} options.enableShadow - Enable shadow rendering
+  * @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 {string} options.HTextAlign - Horizontal text alignment
+   * @param {string} options.VTextAlign - Vertical text alignment
+   * @param {number} options.pad - General padding
+   * @param {number} options.padx - Horizontal padding
+   * @param {number} options.pady - Vertical padding
+   * @param {number} options.padl - Left padding
+   * @param {number} options.padr - Right padding
+   * @param {number} options.padt - Top padding
+   * @param {number} options.padb - Bottom padding
+   * @param {boolean} options.wrap - Whether to wrap text
+   * @param {string} options.wrapMode - Wrap mode: "word" or "char"
+   * @param {string} options.noWrapMode - No-wrap mode: "ellipsis" or "font-size"
+   * @param {string} options.ellipsisMode - Ellipsis mode: "leading", "center", or "trailing"
+   * @param {p5.Image|null} options.icon - Icon image (null = text only)
+   * @param {number} options.iconSize - Icon display size in pixels
+   * @param {string} options.iconPosition - "left", "right", "top", or "bottom"
+   * @param {number} options.iconGap - Gap between icon and text
+   * @param {p5.Color|null} options.iconTintColor - Optional icon tint
+   * @param {number} options.iconOpacity - Icon opacity 0-255
+   * @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
+   * @param {boolean} options.enabled - Whether the button is enabled
+   */
+  constructor(x, y, width, height, label,
+    {
+      id = null,
+      parent = null,
+      backgroundColor = color('#2a2a3d'),
+      textColor = color('#e0e0e0'),
+      hoverBackgroundColor = color('#3a3a5a'),
+      hoverTextColor = color('#ffffff'),
+      pressedBackgroundColor = color('#4a4a6a'),
+      pressedTextColor = color('#ffffff'),
+      borderFlag = true,
+      borderColor = color('#3a3a4d'),
+      borderWidth = 1,
+      cornerRadius = 8,
+      enableShadow = false,
+      shadowColor = 'rgba(0,0,0,0.5)',
+      shadowBlur = 12,
+      shadowOffsetX = 0,
+      shadowOffsetY = 4,
+      HTextAlign = 'center',
+      VTextAlign = 'center',
+      pad = 5,
+      padx = null,
+      pady = null,
+      padl = null,
+      padr = null,
+      padt = null,
+      padb = null,
+      wrap = true,
+      wrapMode = 'word',
+      noWrapMode = 'font-size',
+      ellipsisMode = 'trailing',
+      icon = null,
+      iconSize = 20,
+      iconPosition = 'left',
+      iconGap = 6,
+      iconTintColor = null,
+      iconOpacity = 255,
+      margin = 0,
+      marginx = null,
+      marginy = null,
+      marginl = null,
+      marginr = null,
+      margint = null,
+      marginb = null,
+      enabled = true,
+      minWidth = 0,
+      minHeight = 0,
+      showDebugOverlay = false,
+    } = {}) {
+    super(x, y, width, height, label, {
+      id,
+      parent,
+      backgroundColor,
+      textColor,
+      borderFlag,
+      borderColor,
+      borderWidth,
+      cornerRadius,
+      enableShadow,
+      shadowColor,
+      shadowBlur,
+      shadowOffsetX,
+      shadowOffsetY,
+      HTextAlign,
+      VTextAlign,
+      pad,
+      padx,
+      pady,
+      padl,
+      padr,
+      padt,
+      padb,
+      wrap,
+      wrapMode,
+      noWrapMode,
+      ellipsisMode,
+      icon,
+      iconSize,
+      iconPosition,
+      iconGap,
+      iconTintColor,
+      iconOpacity,
+      margin,
+      marginx,
+      marginy,
+      marginl,
+      marginr,
+      margint,
+      marginb,
+      minWidth,
+      minHeight,
+      showDebugOverlay,
+    });
+
+    this.hoverBackgroundColor = hoverBackgroundColor;
+    this.hoverTextColor = hoverTextColor;
+    this.pressedBackgroundColor = pressedBackgroundColor;
+    this.pressedTextColor = pressedTextColor;
+
+    this.enabled = enabled;
+    this.isHovered = false;
+    this.isPressed = false;
+
+    this.addEventListener('mouseEnter', () => {
+      if (!this.enabled) return;
+      this.isHovered = true;
+    });
+
+    this.addEventListener('hover', (event) => {
+      if (!this.enabled) return;
+      cursor('pointer');
+      event.stopPropagation();
+    });
+
+    this.addEventListener('mouseLeave', () => {
+      this.isHovered = false;
+      this.isPressed = false;
+      cursor('');
+    });
+
+    this.addEventListener('press', () => {
+      if (!this.enabled) return;
+      this.isPressed = true;
+    });
+
+    this.addEventListener('release', () => {
+      this.isPressed = false;
+    });
+  }
+
+  /**
+   * Renders the button with hover/press visuals
+   */
+  show() {
+    if (this.enableShadow) {
+      this.drawShadow();
+    }
+
+    push();
+    beginClip();
+    rect(this.x, this.y, this.width, this.height, this.cornerRadius);
+    endClip();
+    translate(this.x, this.y);
+
+    // Background
+    fill(this.getBackgroundColor());
+    rect(0, 0, this.width, this.height, this.cornerRadius);
+
+    // Text
+    fill(this.getTextColor());
+    this.renderText();
+
+    // Border
+    if (this.borderFlag) {
+      noFill();
+      stroke(this.getBorderColor());
+      strokeWeight(this.borderWidth);
+      rect(0, 0, this.width, this.height, this.cornerRadius);
+    }
+
+    pop();
+  }
+
+  /**
+   * Enables or disables the button
+   * @param {boolean} enabled - True to enable, false to disable
+   */
+  setEnabled(enabled) {
+    this.enabled = enabled;
+    if (!enabled) {
+      this.isHovered = false;
+      this.isPressed = false;
+    }
+  }
+
+  getBackgroundColor() {
+    if (!this.enabled) {
+      return this.backgroundColor;
+    }
+
+    if (this.isPressed && this.pressedBackgroundColor !== null) {
+      return this.pressedBackgroundColor;
+    }
+
+    if (this.isHovered && this.hoverBackgroundColor !== null) {
+      return this.hoverBackgroundColor;
+    }
+
+    return this.backgroundColor;
+  }
+
+  getTextColor() {
+    if (!this.enabled) {
+      return this.textColor;
+    }
+
+    if (this.isPressed && this.pressedTextColor !== null) {
+      return this.pressedTextColor;
+    }
+
+    if (this.isHovered && this.hoverTextColor !== null) {
+      return this.hoverTextColor;
+    }
+
+    return this.textColor;
+  }
+
+  getBorderColor() {
+    if (!this.enabled) {
+      return this.borderColor;
+    }
+
+    if (this.isPressed) {
+      return color('#6a6a9a');
+    }
+
+    if (this.isHovered) {
+      return color('#5a5a7a');
+    }
+
+    return this.borderColor;
+  }
+}