@usman404/crowjs 1.0.4 → 1.1.0

package/UIComponents/TextField.js

@@ -17,38 +17,57 @@ export class TextField extends Input{
    * @param {number} options.borderWidth - Border width
    * @param {number} options.cornerRadius - Corner radius
    * @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 {string} options.placeholder - Placeholder text
+   * @param {string} options.placeholderColor - Placeholder text color (muted)
    * @param {string} options.text - Initial text
    * @param {string} options.textAlign - Text alignment
-   * @param {number} options.padding - Internal padding
+   * @param {number} options.pad - Internal padding
+   * @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,
         parent=null,
-        backgroundColor='rgb(255, 255, 255)',
-        textColor='rgb(0, 0, 0)',
+        backgroundColor='rgb(30, 30, 46)',
+        textColor='rgb(224, 224, 224)',
         borderFlag = true,
-        borderColor = color(0),
+        borderColor = color('#3a3a4d'),
         borderWidth = 1, 
-        cornerRadius = 0,
+        cornerRadius = 8,
         enableShadow=false,
-        shadowColor= 'rgb(0,0,0)',
-        shadowIntensity= 0.4,
-        shadowSpread= 3,
-        shadowDetail=5,
+        shadowColor= 'rgba(0,0,0,0.5)',
+        shadowBlur= 12,
+        shadowOffsetX= 0,
+        shadowOffsetY= 4,
         placeholder="",
+        placeholderColor='rgb(120, 120, 140)',
         text="",
         textAlign = "left",
-        padding = 10,
+        pad = 10,
+        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, backgroundColor, borderFlag, borderColor,
-            borderWidth, cornerRadius, enableShadow, shadowColor, shadowIntensity,
-            shadowSpread, shadowDetail, {parent: parent, type: "Input", id: id});
+            borderWidth, cornerRadius, enableShadow, shadowColor, shadowBlur,
+            shadowOffsetX, shadowOffsetY, {parent: parent, type: "Input", id: id, margin: margin, marginx: marginx, marginy: marginy, marginl: marginl, marginr: marginr, margint: margint, marginb: marginb, minWidth: minWidth, minHeight: minHeight, showDebugOverlay: showDebugOverlay});
         
             this.cursorPos = 0;
             this.text = text;
@@ -56,19 +75,32 @@ export class TextField extends Input{
             this.displayXOffset = 0;
 
             this.textAlign = textAlign;
-            this.padding = padding;
+            this.pad = pad;
+            this.padl = pad;
+            this.padr = pad;
+            this.padt = pad;
+            this.padb = pad;
             this.textColor = textColor;
             this.placeholder = placeholder;
+            this.placeholderColor = placeholderColor;
 
             this.cursorVisible = true;
-            this.lastCursorToggle = millis();
+            this.lastCursorToggle = 0;
             this.cursorBlinkInterval = 500;
 
             this.selectionStart = null;
             this.selectionEnd = null;
             this.isSelecting = false;
 
+            // Key repeat state for long-press behavior
+            this._lastKeyCode = null;
+            this._keyDownStartTime = 0;
+            this._lastRepeatTime = 0;
+            this._keyRepeatDelay = 500;  // ms before repeat starts
+            this._keyRepeatInterval = 30; // ms between repeats
+
             this.addEventListener("keyPress", (event)=>this.onKeyPress(event));
+            this.addEventListener("keyDown", (event)=>this.onKeyDown(event));
             // this.addEventListener("click", (event)=>this.onMouseClick(event));
             this.addEventListener("press", (event)=>this.onMousePress(event)); // NEW
             this.addEventListener("drag", (event)=>this.onMouseDrag(event));
@@ -83,7 +115,8 @@ export class TextField extends Input{
    * @param {MouseEvent} event - The hover event
    */
     onMouseHover(event){
-        // event.stopPropagation();
+        cursor('text');
+        event.stopPropagation();
     }
 
     /**
@@ -108,6 +141,9 @@ export class TextField extends Input{
         // Cursor usually hides after blur in textfields
         this.cursorVisible = false;
 
+        // Reset key repeat state
+        this._lastKeyCode = null;
+
         console.log("blur called!");
 
         event.stopPropagation();
@@ -161,38 +197,122 @@ export class TextField extends Input{
         }
     }
 
-    onKeyPress(event) {
-        // ADDED: if there's an active selection and user types or presses backspace/delete,
-        // we should remove the selection first (so typed char replaces selection)
+    /**
+     * Handles continuous key down for key repeat (long-press arrow keys, backspace, etc.)
+     * Called from draw loop while key is held.
+     */
+    onKeyDown(event) {
+        const now = millis();
+        const repeatableKeys = [LEFT_ARROW, RIGHT_ARROW, BACKSPACE];
+
+        if (!repeatableKeys.includes(keyCode)) {
+            return;
+        }
+
+        // Detect new key press
+        if (this._lastKeyCode !== keyCode) {
+            this._lastKeyCode = keyCode;
+            this._keyDownStartTime = now;
+            this._lastRepeatTime = 0;
+            return; // first press handled by onKeyPress
+        }
+
+        // Wait for initial delay before repeating
+        if (now - this._keyDownStartTime < this._keyRepeatDelay) {
+            return;
+        }
+
+        // Throttle repeats
+        if (now - this._lastRepeatTime < this._keyRepeatInterval) {
+            return;
+        }
+
+        this._lastRepeatTime = now;
+        this._handleRepeatable();
+    }
+
+    /**
+     * Executes the repeatable key action (shared by onKeyPress and onKeyDown repeat).
+     */
+    _handleRepeatable() {
         const hasSelection = this.selectionStart !== null && this.selectionStart !== this.selectionEnd;
 
         if (keyCode === LEFT_ARROW) {
+            if (keyIsDown(SHIFT) && (this.selectionStart === null || this.selectionStart === this.selectionEnd)) {
+                this.selectionStart = this.cursorPos;
+                this.selectionEnd = this.cursorPos;
+            }
+
             if (keyIsDown(CONTROL)) {
                 this.jumpLeftByOneWord();
             } else {
                 this.moveCursorLeft(1);
             }
-            // collapse selection when using arrows (typical behavior)
-            this.selectionStart = this.selectionEnd = this.cursorPos;
+
+            if (keyIsDown(SHIFT)) {
+                this.selectionEnd = this.cursorPos;
+            } else {
+                this.selectionStart = this.selectionEnd = this.cursorPos;
+            }
         } else if (keyCode === RIGHT_ARROW) {
+            if (keyIsDown(SHIFT) && (this.selectionStart === null || this.selectionStart === this.selectionEnd)) {
+                this.selectionStart = this.cursorPos;
+                this.selectionEnd = this.cursorPos;
+            }
+
             if (keyIsDown(CONTROL)) {
                 this.jumpRightByOneWord();
             } else {
                 this.moveCursorRight(1);
             }
-            this.selectionStart = this.selectionEnd = this.cursorPos;
+
+            if (keyIsDown(SHIFT)) {
+                this.selectionEnd = this.cursorPos;
+            } else {
+                this.selectionStart = this.selectionEnd = this.cursorPos;
+            }
         } else if (keyCode === BACKSPACE) {
             if (hasSelection) {
-                // ADDED: delete selection (Backspace with selection deletes selection)
                 this.deleteSelectedText();
             } else if (keyIsDown(CONTROL)) {
                 this.deleteOneWord();
             } else {
                 this.deleteOneChar();
             }
-            // collapse selection after deletion
             this.selectionStart = this.selectionEnd = this.cursorPos;
+        }
+
+        this.cursorVisible = true;
+        this.lastCursorToggle = millis();
+    }
+
+    onKeyPress(event) {
+        // Reset key repeat tracking on new press
+        this._lastKeyCode = keyCode;
+        this._keyDownStartTime = millis();
+        this._lastRepeatTime = 0;
+
+        // ADDED: if there's an active selection and user types or presses backspace/delete,
+        // we should remove the selection first (so typed char replaces selection)
+        const hasSelection = this.selectionStart !== null && this.selectionStart !== this.selectionEnd;
+
+        if (keyCode === LEFT_ARROW || keyCode === RIGHT_ARROW || keyCode === BACKSPACE) {
+            this._handleRepeatable();
+            return; // cursor/selection already updated, skip to end
+        } else if (keyIsDown(CONTROL) && (key === 'a' || key === 'A')) {
+            // Select all text in the field
+            this.selectionStart = 0;
+            this.selectionEnd = this.text.length;
+            this.cursorPos = this.text.length;
+            // Prevent the browser from selecting all page content
+            if (event.nativeEvent) {
+                event.nativeEvent.preventDefault();
+            }
         } else if (key.length === 1) {
+            // Skip if Ctrl is held (avoid inserting control characters)
+            if (keyIsDown(CONTROL)) {
+                return;
+            }
             // ADDED: if a selection exists, remove it before insertion so typed char replaces selection
             if (hasSelection) {
                 this.deleteSelectedText();
@@ -222,10 +342,10 @@ export class TextField extends Input{
 
         if (this.textAlign === "left") {
             // left aligned starts at left padding, minus the scroll offset
-            return this.x + this.padding - this.displayXOffset;
+            return this.x + this.pad - this.displayXOffset;
         } else if (this.textAlign === "right") {
             // right aligned: text ends at width - padding, so start is that minus fullWidth
-            return this.x + this.width - this.padding - fullWidth - this.displayXOffset;
+            return this.x + this.width - this.pad - fullWidth - this.displayXOffset;
         } else { // center or anything else
             return this.x + this.width / 2 - fullWidth / 2 - this.displayXOffset;
         }
@@ -278,6 +398,10 @@ export class TextField extends Input{
 
             // ADDED: clear selection anchors and ensure they reflect cursor
             this.selectionStart = this.selectionEnd = null;
+
+            // Reset scroll offset and ensure cursor is visible
+            this.displayXOffset = 0;
+            this.scrollCursorIntoView();
         }
     }
 
@@ -406,8 +530,8 @@ export class TextField extends Input{
             cursorX = this.findTextWidth(0, this.cursorPos);
         }
     
-        if (cursorX - this.displayXOffset > this.width - this.padding) {
-            this.displayXOffset = cursorX - this.width + 2*this.padding;
+        if (cursorX - this.displayXOffset > this.width - this.pad) {
+            this.displayXOffset = cursorX - this.width + 2*this.pad;
         }
     
         if(!cursorX){
@@ -425,8 +549,8 @@ export class TextField extends Input{
             cursorX = this.findTextWidth(0, this.cursorPos);
         }
     
-        if(cursorX - this.displayXOffset < this.padding){
-            this.displayXOffset = cursorX - this.padding;
+        if(cursorX - this.displayXOffset < this.pad){
+            this.displayXOffset = cursorX - this.pad;
         }
     
         if(!cursorX){
@@ -480,7 +604,7 @@ export class TextField extends Input{
         
         let x, y;
         if(this.textAlign==="left"){
-            x = this.x - this.displayXOffset + this.padding;
+            x = this.x - this.displayXOffset + this.pad;
         } else if(this.textAlign==="right") {
             x = this.x - this.displayXOffset + this.width - this.textSize;
         }
@@ -492,16 +616,23 @@ export class TextField extends Input{
             
             let highlightX = x + this.findTextWidth(0, start);
             let highlightWidth = this.findTextWidth(start, end);
-            let highlightY = y - this.textSize * 0.7;
             
             push();
             fill('rgba(15, 111, 206, 0.7)');
             noStroke();
-            rect(highlightX, highlightY, highlightWidth, this.textSize);
+            rect(highlightX, this.y + this.pad, highlightWidth, this.height - 2 * this.pad);
             pop();
         }
 
-        text(this.text, x, y);
+        if (this.text.length === 0 && this.placeholder && !this.isFocused) {
+            push();
+            fill(this.placeholderColor);
+            noStroke();
+            text(this.placeholder, x, y);
+            pop();
+        } else {
+            text(this.text, x, y);
+        }
 
         if (millis() - this.lastCursorToggle > this.cursorBlinkInterval) {
             this.cursorVisible = !this.cursorVisible;
@@ -513,7 +644,7 @@ export class TextField extends Input{
             if (this.cursorVisible) {
                 stroke(this.textColor);
                 strokeWeight(2);
-                line(cursorX, y - this.textSize * 0.5, cursorX, y + this.textSize * 0.45);
+                line(cursorX, this.y + this.pad, cursorX, this.y + this.height - this.pad);
             }
         }
 
@@ -531,7 +662,7 @@ export class TextField extends Input{
    * Updates text size based on current height
    */
     updateTextSize(){
-        this.textSize = this.height * 0.9;
+        this.textSize = (this.height - 2 * this.pad) * 0.9;
         this.scrollCursorIntoView();
     }
 

package/UIComponents/UIComponent.js

@@ -13,19 +13,26 @@ export class UIComponent extends Component{
    * @param {number} borderWidth - Border width
    * @param {number} cornerRadius - Corner radius for rounded corners
    * @param {boolean} enableShadow - Whether to render shadow
-   * @param {string} shadowColor - Shadow color in RGB format
-   * @param {number} shadowIntensity - Shadow opacity (0-1)
-   * @param {number} shadowSpread - Shadow spread amount
-   * @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} options - Additional options
    * @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, backgroundColor, borderFlag, borderColor,
-         borderWidth, cornerRadius, enableShadow, shadowColor, shadowIntensity,
-         shadowSpread, shadowDetail, {parent=null, type="", id=null} = {}){
-        super(x, y, width, height, {parent: parent, type: type, id: id});
+         borderWidth, cornerRadius, enableShadow, shadowColor, shadowBlur,
+         shadowOffsetX, shadowOffsetY, {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});
 
         this.backgroundColor = backgroundColor;
 
@@ -38,10 +45,10 @@ export class UIComponent extends Component{
         this.enableShadow = enableShadow;
 
         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.cornerRadius = cornerRadius;
@@ -57,41 +64,67 @@ export class UIComponent extends Component{
    */
     updateHeight(){};
     /**
-   * Converts RGB color string to array of numbers
-   * @param {string} shadowColor - RGB color string like "rgb(255,255,255)"
-   * @returns {number[]|null} Array of [r, g, b] values or null if invalid
+   * 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 a shadow effect around the component
    * @param {Object} options - Shadow rendering 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/index.js

@@ -15,8 +15,10 @@ const ScrollFrame = require('./Frames/ScrollFrame');
 // UIComponents
 const Input = require('./UIComponents/Input');
 const Label = require('./UIComponents/Label');
+const Button = require('./UIComponents/Button');
 const TextField = require('./UIComponents/TextField');
 const UIComponent = require('./UIComponents/UIComponent');
+const Icon = require('./UIComponents/Icon');
 
 module.exports = {
   // Core
@@ -36,6 +38,8 @@ module.exports = {
   // UIComponents
   Input,
   Label,
+  Button,
   TextField,
-  UIComponent
+  UIComponent,
+  Icon
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usman404/crowjs",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "lightweight and extensible GUI library built on top of p5.js",
   "keywords": [
     "CROWJS"
@@ -18,6 +18,13 @@
   "type": "commonjs",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "docs:dev": "vitepress dev docs --host 0.0.0.0",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
+  },
+  "devDependencies": {
+    "@iconify/vue": "^4.1.2",
+    "vitepress": "^1.6.4"
   }
 }

package/problems.txt

@@ -0,0 +1 @@
+- work on default look of all items.