@usman404/crowjs 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Usman Ali
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,130 @@
+# CrowJS 🐦‍⬛
+**CrowJS** is a lightweight and extensible GUI library built on top of [p5.js](https://p5js.org/), designed for creative coders and simulation builders who need intuitive, canvas-native UI components like buttons, sliders, input fields, and more — all rendered directly inside the p5.js canvas.
+
+![Logo](/crowjs-01-01.png)
+
+## ✨ 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.  
+- Event system inspired by the web (click, hover, focus, blur)  
+- Modular design with support for custom components  
+- Fully drawn inside p5.js (no HTML overlays or DOM interference)  
+- Ideal for creative coding, simulations, visual experiments, and tools  
+
+## 🚀 Getting Started
+
+### 1. Install
+
+To use **CrowJS**, begin by downloading this repository and placing the `CrowJS` folder inside your project's source code.  
+Once included, open the `index.html` file in your browser; it already contains the required setup for p5.js and for loading CrowJS modules.
+
+All GUI development should be done inside **`sketch.js`**, which serves as the main entry point for both your p5.js sketch and all CrowJS components.
+
+---
+
+### ⚠ Important Notes
+- **Do not rename** the `sketch.js` file. CrowJS depends on this filename for consistent module loading.  
+- **Do not alter** the structure or script tags inside `index.html`. Modifying them may prevent CrowJS from running correctly.  
+- A **CDN-based installation** method will be added in the future to make setup even easier.
+
+---
+
+### 2. Basic Example
+```javascript
+import { Root } from "./Core/Root.js";
+import { Label } from "./UIComponents/Label.js";
+
+
+/** @type {Root} */
+let root;
+let clickTimes=1;
+
+window.setup = function(){
+    createCanvas(windowWidth, windowHeight);
+    root = new Root();
+
+    let btnWidth = 200;
+    let btnHeight = 100;
+
+    let btn = new Label((windowWidth/2)-(btnWidth/2), (windowHeight/2)-(btnHeight/2), 200, 100, "Hello! 👋", 
+      {cornerRadius: 20,
+       backgroundColor: "rgba(0, 0, 0, 1)",
+       textColor: "rgba(255, 255, 255, 1)",
+      });
+
+    btn.addEventListener("click", (event)=>{
+      clickTimes+=1;
+      event.target.setText(`You clicked ${clickTimes} \ntimes!`);
+    });
+
+    root.add(btn);
+}
+
+window.draw = function () {
+  background('rgba(255,255,255,255)');
+  root.show();
+  root.mouseEnterEventListeners(mouseX, mouseY);
+  root.hoverEventListeners(mouseX, mouseY);
+  root.mouseLeaveEventListeners(mouseX, mouseY);
+  root.keyDownEventListeners(mouseX, mouseY);
+}
+
+window.mouseDragged = function (){
+  root.mouseDraggedEventListeners(mouseX, mouseY);
+}
+
+window.mouseClicked = function(){ 
+  root.mouseClickedEventListeners(mouseX, mouseY);
+}
+
+window.mousePressed = function(){
+  root.mousePressedEventListeners(mouseX, mouseY);
+}
+
+window.mouseReleased = function(){
+  root.mouseReleasedEventListeners(mouseX, mouseY);
+}
+
+window.mouseWheel = function(event){
+  root.mouseWheelEventListeners(mouseX, mouseY, event);
+}
+
+window.keyPressed = function(event){
+  if (keyCode === UP_ARROW || keyCode === DOWN_ARROW || keyCode === LEFT_ARROW || keyCode === RIGHT_ARROW) {
+    event.preventDefault();
+  }
+
+  root.keyPressedEventListeners(mouseX, mouseY);
+}
+```
+
+## 🧰 Components Overview
+- `Label(x, y, width, height, text, {options})`  
+- `ScrollFrame`, `GridFrame`, `Label`, etc.  
+
+More components and documentation coming soon.
+
+## 📚 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?
+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
+CrowJS is open-source! Contributions, bug reports, and ideas are welcome.  
+See the `CONTRIBUTING.md` file for details.
+
+## 📄 License
+This project is licensed under the MIT License.  
+See the `LICENSE` file for details.
+
+## 🌐 Links
+- My sketches: [https://editor.p5js.org/Usman_Ali/sketches/](p5js.org/Usman_Ali/sketches/)
+- p5.js: [https://p5js.org](https://p5js.org)
+
+Created with ❤️ by **Usman**

package/UIComponents/Input.js

@@ -0,0 +1,78 @@
+import { GUIEvent } from "../Core/GUIEvent/GUIEvent.js";
+import { UIComponent } from "./UIComponent.js";
+import { Component } from "../Core/Component.js";
+
+export class Input extends UIComponent{
+     /**
+   * Creates a base input component
+   * @param {number} x - The x-coordinate
+   * @param {number} y - The y-coordinate
+   * @param {number} width - The width
+   * @param {number} height - The height
+   * @param {p5.Color} backgroundColor - Background color
+   * @param {boolean} borderFlag - Whether to show border
+   * @param {p5.Color} borderColor - Border color
+   * @param {number} borderWidth - Border width
+   * @param {number} cornerRadius - Corner radius
+   * @param {boolean} enableShadow - Enable shadow
+   * @param {string} shadowColor - Shadow color
+   * @param {number} shadowIntensity - Shadow opacity
+   * @param {number} shadowSpread - Shadow spread
+   * @param {number} shadowDetail - Shadow layers
+   * @param {Object} options - Additional options
+   * @param {Component|null} options.parent - Parent component
+   * @param {string} options.type - Component type
+   * @param {string|null} options.id - Component ID
+   */
+    constructor(x, y, width, height, backgroundColor, borderFlag, borderColor, borderWidth,
+        cornerRadius, enableShadow, shadowColor, shadowIntensity, shadowSpread, shadowDetail,
+        {parent=null, type="", id=null} = {}
+    ){
+        super(x, y, width, height, backgroundColor, borderFlag, borderColor,
+            borderWidth, cornerRadius, enableShadow, shadowColor, shadowIntensity,
+            shadowSpread, shadowDetail, {parent: parent, type: type, id: id});
+        this.isFocused = false;
+        // this.addEventListener("focus", (event)=>this.onFocus());
+        // this.addEventListener("blur", (event)=>this.onBlur());
+    }
+
+    /**
+   * Handles focus event
+   * @param {GUIEvent} event - The focus event
+   */
+    onFocus(event){
+        console.log("focused...");
+    }
+
+    /**
+   * Handles blur event
+   * @param {GUIEvent} event - The blur event
+   */
+    onBlur(event){
+        console.log("blurred...");
+    }
+    /**
+   * Sets focus on the input field with visual feedback
+   */
+    focus(){
+        // console.log("Focus!");
+        if(!this.isFocused){
+            this.isFocused = true;
+            this.borderWidth += 3;
+        }
+
+        this.dispatchEventOnlyOnSelf(new GUIEvent(0, 0, "focus", this));
+    }
+    /**
+   * Removes focus from the input field
+   */
+    blur(){
+        // console.log("Blur!");
+        if(this.isFocused){
+            this.isFocused = false;
+            this.borderWidth -= 3;
+        }
+
+        this.dispatchEventOnlyOnSelf(new GUIEvent(0, 0, "blur", this));
+    }
+}

package/UIComponents/Label.js

@@ -0,0 +1,234 @@
+import {UIComponent} from './UIComponent.js';
+import { Component } from '../Core/Component.js';
+
+export class Label extends UIComponent{
+  /**
+   * Creates a text label component
+   * @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 {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
+   * @param {number} options.shadowIntensity - Shadow opacity
+   * @param {number} options.shadowSpread - Shadow spread
+   * @param {number} options.shadowDetail - Shadow layers
+   * @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
+   */
+    constructor(x, y, width, height, label,
+       {id=null,
+        parent = null,
+        backgroundColor = color(200),
+        textColor = color(0),
+        borderFlag = true,
+        borderColor = color(0),
+        borderWidth = 1, 
+        cornerRadius = 0,
+        enableShadow=false,
+        shadowColor= 'rgb(0,0,0)',
+        shadowIntensity= 0.4,
+        shadowSpread= 3,
+        shadowDetail=5,
+        HTextAlign="center",
+        VTextAlign="center",
+        pad = 5,
+        padx = 0,
+        pady = 0,
+        padl = 0,
+        padr = 0,
+        padt = 0,
+        padb = 0,
+      } = {}) {
+      super(x, y, width, height, backgroundColor, borderFlag, borderColor,
+        borderWidth, cornerRadius, enableShadow, shadowColor, shadowIntensity,
+        shadowSpread, shadowDetail, {parent: parent, type: "UIComponent", id: id});
+
+      this.text = label;
+      this.labelSize = 20;
+      this.textColor = textColor;
+
+      this.HTextAlign = HTextAlign;
+      this.VTextAlign = VTextAlign;
+
+      this.pad = pad;
+      this.padx = padx;
+      this.pady = pady;
+      this.padl = padl;
+      this.padr = padr;
+      this.padt = padt;
+      this.padb = padb;
+    }
+
+    // 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
+    // }
+    /**
+     * Renders the label with text, background, and border
+     */
+    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);
+      fill(this.backgroundColor);
+      
+      // Background rectangle
+      rect(0, 0, this.width, this.height, this.cornerRadius);
+      
+      // Text
+      fill(this.textColor);
+      // textAlign(CENTER, CENTER);
+      textSize(this.labelSize);
+
+      let x;
+      if(this.HTextAlign === "left"){
+        textAlign(LEFT, CENTER);
+        x = this.pad;
+      } else if(this.HTextAlign === "right"){
+        textAlign(RIGHT, CENTER);
+        x = this.width - this.pad;
+      } else{
+        //center
+        textAlign(CENTER, CENTER);
+        x = this.width / 2;
+      } 
+
+      let y;
+      if(this.VTextAlign === "top"){
+        textAlign(this.getHTextAlign(), BOTTOM);
+        y = this.labelSize + this.pad;
+      } else if(this.VTextAlign === "bottom"){
+        textAlign(this.getHTextAlign(), TOP);
+        y = this.height - this.labelSize - this.pad;
+      } else {
+        //center
+        textAlign(this.getHTextAlign(), CENTER);
+        y = this.height / 2;
+      }
+
+      text(this.text, x, y);
+      // rect(x, y, this.labelSize, this.labelSize);
+      
+      // Border
+      if (this.borderFlag) {
+        noFill();  // Only for the border
+        stroke(this.borderColor);
+        strokeWeight(this.borderWidth);
+        rect(0, 0, this.width, this.height, this.cornerRadius);  // Fix here
+      }
+      
+      pop();
+    }
+
+    /**
+   * Converts horizontal alignment string to P5 constant
+   * @returns {number} P5 alignment constant
+   */
+    getHTextAlign(){
+      switch(this.HTextAlign){
+        case "left":
+          return LEFT;
+        case "right":
+          return RIGHT;
+        default:
+          return CENTER;
+      }
+    }
+
+    /**
+   * Converts vertical alignment string to P5 constant
+   * @returns {number} P5 alignment constant
+   */
+    getVTextAlign(){
+      switch(this.VTextAlign){
+        case "top":
+          return TOP;
+        case "bottom":
+          return BOTTOM;
+        default:
+          return CENTER;
+      }
+    }
+    
+    /**
+   * Updates the label text and recalculates text size
+   * @param {string} text - The new text to display
+   */
+    setText(text){
+      this.text = text;
+      this.updateLabelSize();
+    }
+    
+    //needs heavy optimizations
+    /**
+   * Dynamically calculates the optimal text size to fit the container
+   * Uses binary search for efficient size calculation
+   */
+    updateLabelSize() {
+      let maxSize = min(this.width * 0.9, this.height * 0.8);
+      let minSize = 1;
+      let low = minSize;
+      let high = maxSize;
+      let bestSize = minSize;
+   
+      const maxLabelWidth = this.width * 0.9;
+      const maxLabelHeight = this.height * 0.8;
+   
+      while (low <= high) {
+         let mid = Math.floor((low + high) / 2);
+         textSize(mid);
+         let labelWidth = textWidth(this.text);
+         let labelHeight = textAscent() + textDescent();
+   
+         if (labelWidth <= maxLabelWidth && labelHeight <= maxLabelHeight) {
+            bestSize = mid;
+            low = mid + 1;
+         } else {
+            high = mid - 1;
+         }
+      }
+   
+      this.labelSize = bestSize;
+    }
+
+    /**
+   * Handles width changes and updates text size accordingly
+   */
+    updateWidth(){
+      this.updateLabelSize();
+    }
+
+    /**
+   * Handles height changes and updates text size accordingly
+   */
+    updateHeight(){
+      this.updateLabelSize();
+    }
+  }
+