@usman404/crowjs 1.0.4 → 1.1.0

package/UIComponents/Label.js

@@ -1,7 +1,7 @@
-import {UIComponent} from './UIComponent.js';
+import { TextComponent } from './TextComponent.js';
 import { Component } from '../Core/Component.js';
 
-export class Label extends UIComponent{
+export class Label extends TextComponent{
   /**
    * Creates a text label component
    * @param {number} x - The x-coordinate
@@ -19,10 +19,10 @@ export class Label extends UIComponent{
    * @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.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
@@ -32,57 +32,114 @@ export class Label extends UIComponent{
    * @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
    */
     constructor(x, y, width, height, label,
        {id=null,
         parent = null,
-        backgroundColor = color(200),
-        textColor = color(0),
+        backgroundColor = color('#1e1e2e'),
+        textColor = color('#e0e0e0'),
         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,
         HTextAlign="center",
         VTextAlign="center",
         pad = 5,
-        padx = 0,
-        pady = 0,
-        padl = 0,
-        padr = 0,
-        padt = 0,
-        padb = 0,
+        padx = null,
+        pady = null,
+        padl = null,
+        padr = null,
+        padt = null,
+        padb = null,
+        wrap = false,
+        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,
+        minWidth = 0,
+        minHeight = 0,
+        showDebugOverlay = false,
       } = {}) {
-      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;
+      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,
+      });
     }
 
-    // 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
      */
@@ -103,36 +160,7 @@ export class Label extends UIComponent{
       
       // 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);
+      this.renderText();
       // rect(x, y, this.labelSize, this.labelSize);
       
       // Border
@@ -146,89 +174,5 @@ export class Label extends UIComponent{
       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();
-    }
   }