cedro 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "cedro",
-    "version": "0.1.2",
+    "version": "0.1.3",
     "type": "module",
     "devDependencies": {
         "@types/node": "^20.4.4",

package/src/core/application.core.ts

@@ -50,6 +50,7 @@ class WApplication implements IApplication {
 
         window.addEventListener("load", () => {
             this.screen.updateSize();
+            this.getRoot().resize();
         });
 
         this.alertDialog = new Dialog("Dialog.alert", null);
@@ -58,11 +59,7 @@ class WApplication implements IApplication {
         this.theme.load();
     }
 
-    alert(
-        msg: string,
-        onOk: () => void = () => {},
-        onCancell: () => void = () => {}
-    ): void {
+    alert(msg: string, onOk: () => void = () => {}, onCancell: () => void = () => {}): void {
         const mesageLabel = new Label("alert.label", "span");
 
         mesageLabel.setType(WidgetTypes.FILL);
@@ -80,11 +77,7 @@ class WApplication implements IApplication {
         this.alertDialog.show();
     }
 
-    confirm(
-        msg: string,
-        onOk: () => void = () => {},
-        onCancell: () => void = () => {}
-    ): void {
+    confirm(msg: string, onOk: () => void = () => {}, onCancell: () => void = () => {}): void {
         const mesageLabel = new Label("alert.label", "span");
 
         mesageLabel.setType(WidgetTypes.FILL);
@@ -123,12 +116,7 @@ class WApplication implements IApplication {
         this.root.render();
     }
 
-    addMediaQuery(
-        query: string,
-        minWidth: number,
-        maxWidth: number,
-        cb: (app: IApplication) => void
-    ): void {
+    addMediaQuery(query: string, minWidth: number, maxWidth: number, cb: (app: IApplication) => void): void {
         this.mediaQueries.set(query, { minWidth, maxWidth, cb });
     }
 
@@ -145,10 +133,7 @@ class WApplication implements IApplication {
 
                 for (let query of app.mediaQueries.entries()) {
                     const { minWidth, maxWidth, cb } = query[1];
-                    if (
-                        minWidth <= app.screen.dimensions.x &&
-                        maxWidth > app.screen.dimensions.x
-                    ) {
+                    if (minWidth <= app.screen.dimensions.x && maxWidth > app.screen.dimensions.x) {
                         cb(this as IApplication);
                         //break; quite el break para dar soporte a mas de un media quiery del mismo tipo.
                     }

package/src/ui/IconButton.ui.ts

@@ -1,5 +1,5 @@
 import "./styles/button.css";
-import { Widget, WidgetTypes } from "./widget.ui";
+import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
 import { Button } from "./button.ui";
 import { Icon } from "./Icon.ui";
 import { Label } from "./label.ui";
@@ -8,19 +8,13 @@ export class IconButton extends Button {
     icon: Icon;
     label: Label;
 
-    constructor(
-        id: string,
-        icon: string = "dark_mode",
-        parent: Widget | null = null
-    ) {
+    constructor(id: string, icon: string = "dark_mode", parent: Widget | null = null) {
         super(id, parent);
 
+        this.setAlign(WidgetAlignTypes.HORIZONTAL);
         this.icon = new Icon(id + ".icon", icon, undefined, this);
         this.label = new Label(id + ".label", undefined, this);
 
-        this.icon.setType(WidgetTypes.FREE);
-        this.label.setType(WidgetTypes.FREE);
-
         this.init();
     }
 
@@ -28,35 +22,49 @@ export class IconButton extends Button {
         super.init();
     }
 
+    public onlyIcon(): boolean {
+        if (this.label.getText().length > 0) return false;
+        return true;
+    }
+
     public render(): void {
         super.render();
 
-        this.label.getBody().style.position = "absolute";
-        this.icon.getBody().style.position = "absolute";
+        const iconWidth = 24;
+        const padding = 5;
 
-        const labelHeight = this.label.getBody().clientHeight;
-        const labelWidth = this.label.getBody().clientWidth;
+        if (this.onlyIcon()) {
+            this.icon.getBody().style.position = "absolute";
 
-        //const iconHeight = this.icon.getBody().clientHeight;
-        const iconWidth = 24;
+            const startX = this.getBody().clientWidth / 2 - iconWidth / 2;
+            const startY = this.getH() / 2 - iconWidth / 2;
 
-        const startX =
-            this.getBody().clientWidth / 2 - (iconWidth + labelWidth) / 2;
-        const startY = this.getH() / 2 - 24 / 2;
-        const startLabelY = this.getH() / 2 - labelHeight / 2;
+            this.icon.setX(startX);
+            this.icon.setY(startY);
+        } else {
+            this.label.getBody().style.position = "absolute";
+            this.icon.getBody().style.position = "absolute";
 
-        if (startX < 0 || startY < 0) {
-            setTimeout(() => {
-                this.render();
-            }, 500);
-            return;
-        }
+            const labelHeight = this.label.getBody().clientHeight;
+
+            const startX = padding; //this.getBody().clientWidth / 2 - (iconWidth + labelWidth) / 2;
+            const startLabelX = startX + iconWidth + padding;
+            const startY = this.getH() / 2 - iconWidth / 2;
+            const startLabelY = this.getH() / 2 - labelHeight / 2;
 
-        this.icon.setX(startX);
-        this.label.setX(startX + iconWidth + 5);
+            if (startX < 0 || startY < 0) {
+                setTimeout(() => {
+                    this.render();
+                }, 500);
+                return;
+            }
 
-        this.icon.setY(startY);
-        this.label.setY(startLabelY);
+            this.icon.setX(startX);
+            this.label.setX(startLabelX + padding);
+
+            this.icon.setY(startY);
+            this.label.setY(startLabelY);
+        }
     }
 
     public setText(text: string): void {

package/src/ui/index.ts

@@ -1,24 +1,13 @@
-import { Button } from "./button.ui"
-import { Widget } from "./widget.ui"
-import { Dialog } from "./dialog"
-import { Icon } from "./Icon.ui"
-import { IconButton } from "./IconButton.ui"
-import { Label } from "./label.ui"
-import { Menu } from "./menu.ui"
-import { Select } from "./select.ui"
-import { Textbox } from "./textbox.ui"
-import {createWidget} from "./widget.builder.ui"
+import { Button } from "./button.ui";
+import { Widget } from "./widget.ui";
+import { Dialog } from "./dialog";
+import { Icon } from "./Icon.ui";
+import { IconButton } from "./IconButton.ui";
+import { Label } from "./label.ui";
+import { Menu } from "./menu.ui";
+import { Select } from "./select.ui";
+import { Textbox } from "./textbox.ui";
+import { Toolbar } from "./toolbar.ui";
+import { createWidget } from "./widget.builder.ui";
 
-
-export{
-    Button,
-    Widget,
-    Dialog,
-    Icon,
-    IconButton,
-    Label,
-    Menu,
-    Select,
-    Textbox,
-    createWidget,
-}
+export { Button, Widget, Dialog, Icon, IconButton, Label, Menu, Select, Textbox, Toolbar, createWidget };

package/src/ui/menu.ui.ts

@@ -10,11 +10,7 @@ export class Menu extends Widget {
     triggeredBy: IWidget | null;
     triggeredBySearchCode: any;
     withCalculation: boolean;
-    constructor(
-        id: string,
-        trigeredById: string | null,
-        parent: IWidget | null = null
-    ) {
+    constructor(id: string, trigeredById: string | null, parent: IWidget | null = null) {
         super(id, "div", parent);
 
         this.background = new Widget(this.id + ".background", "div", null);
@@ -39,6 +35,7 @@ export class Menu extends Widget {
                 clearInterval(this.triggeredBySearchCode);
                 return;
             }
+
             if (window.w.get(this.triggeredById)) {
                 this.triggeredBy = window.w.get(this.triggeredById) as IWidget;
 
@@ -61,6 +58,7 @@ export class Menu extends Widget {
     }
 
     public close(): void {
+        this.deleteClass("WUIMenuTransparent");
         this.deleteClass("WUIMenuVisible");
         this.addClass("WUIMenuHidden");
         this.background.setVisible(false);
@@ -96,6 +94,7 @@ export class Menu extends Widget {
             for (const [, dataOption] of this.options) {
                 const option = dataOption as IconButton;
                 option.addClass("WUIMenuOptions100w");
+                option.render();
             }
             this.deleteClass("WUIMenuTransparent");
             this.addClass("WUIMenuHidden");

package/src/ui/select.ui.ts

@@ -37,9 +37,7 @@ export class Select extends Textbox {
 
                 this.menu.wakeUp();
 
-                if (
-                    this.getBody().clientWidth > this.menu.getBody().clientWidth
-                ) {
+                if (this.getBody().clientWidth > this.menu.getBody().clientWidth) {
                     this.menu.setW(this.getBody().clientWidth);
                 }
             },
@@ -50,9 +48,7 @@ export class Select extends Textbox {
             then: (_e, clickedOption) => {
                 const option = clickedOption as IconButton;
 
-                const fintOption = this.items.find(
-                    (item) => item.id === option.id
-                );
+                const fintOption = this.items.find((item) => item.id === option.id);
 
                 if (fintOption) {
                     this.selectedItem = fintOption;

package/src/ui/styles/dialog.css

@@ -14,7 +14,7 @@
 .WUIDialogHide {
     background-color: transparent;
     box-shadow: none;
-    display: none;
+    display: none !important;
 }
 
 .WUITitlebar {

package/src/ui/styles/menu.css

@@ -14,8 +14,8 @@
 }
 
 .WUIMenuHidden {
-    display: none;
     opacity: 0;
+    display: none !important;
 }
 
 .WUIMenuVisible {

package/src/ui/toolbar.ui.ts

@@ -0,0 +1,203 @@
+import { IWidget } from "src/interfaces/widget.interface";
+import { Widget, WidgetTypes } from "./widget.ui";
+import { IconButton } from "./IconButton.ui";
+
+export type ToolbarOrientationTypes = "horizontal" | "vertical";
+const TOOLBAR_SIZE = 40;
+const TOOLBAR_BUTTON_SIZE = 40;
+
+export class Toolbar extends Widget {
+    orientation: ToolbarOrientationTypes;
+    items: Map<string, IWidget>;
+    size: number; //Indica el alto o ancho de la toolbar.
+
+    itemsContainer: Widget;
+    btnLeft: IconButton;
+    btnRight: IconButton;
+
+    constructor(id: string, parent: Widget | null = null, orientationType: ToolbarOrientationTypes = "horizontal") {
+        super(id, "div", parent);
+        this.orientation = orientationType;
+        this.size = TOOLBAR_SIZE;
+        this.items = new Map<string, IWidget>();
+
+        this.itemsContainer = new Widget(this.id + ".itemsContainer", "div", this);
+        this.itemsContainer.setType(WidgetTypes.CUSTOM);
+        this.itemsContainer.getBody().style.position = "absolute";
+        this.itemsContainer.getBody().style.overflow = "hidden";
+
+        this.setType(WidgetTypes.FILL);
+        this.getBody().style.overflow = "hidden";
+
+        this.btnLeft = new IconButton(this.id + ".btnLeft", this.getIconLeft());
+        this.btnLeft.setType(WidgetTypes.CUSTOM);
+        this.btnLeft.getBody().style.position = "absolute";
+        this.btnLeft.setW(TOOLBAR_BUTTON_SIZE);
+        this.btnLeft.setH(TOOLBAR_SIZE);
+        this.addChild(this.btnLeft);
+
+        this.btnRight = new IconButton(this.id + ".btnRight", this.getIconRight());
+        this.btnRight.setType(WidgetTypes.CUSTOM);
+        this.btnRight.getBody().style.position = "absolute";
+        this.btnRight.setW(TOOLBAR_BUTTON_SIZE);
+        this.btnRight.setH(TOOLBAR_SIZE);
+        this.addChild(this.btnRight);
+
+        this.btnLeft.subscribe({
+            event: "click",
+            then: () => {
+                if (this.orientation === "horizontal") {
+                    this.itemsContainer.getBody().scrollLeft -= TOOLBAR_SIZE;
+                } else {
+                    this.itemsContainer.getBody().scrollTop -= TOOLBAR_SIZE;
+                }
+            },
+        });
+
+        this.btnRight.subscribe({
+            event: "click",
+            then: () => {
+                if (this.orientation === "horizontal") {
+                    this.itemsContainer.getBody().scrollLeft += TOOLBAR_SIZE;
+                } else {
+                    this.itemsContainer.getBody().scrollTop += TOOLBAR_SIZE;
+                }
+            },
+        });
+    }
+
+    public getIconLeft(): string {
+        if (this.orientation === "horizontal") {
+            return "arrow_left";
+        }
+        return "arrow_drop_up";
+    }
+
+    public getIconRight(): string {
+        if (this.orientation === "horizontal") {
+            return "arrow_right";
+        }
+        return "arrow_drop_down";
+    }
+
+    /**
+     * Set the orientation of the toolbar.
+     *
+     * @param {ToolbarOrientationTypes} orientationType - the type of orientation to set
+     * @return {void}
+     */
+    public setOrientation(orientationType: ToolbarOrientationTypes, size: number = TOOLBAR_SIZE): void {
+        this.orientation = orientationType;
+        this.size = size;
+    }
+
+    public setSize(size: number): void {
+        this.size = size;
+    }
+
+    /**
+     * Adds an item to the collection.
+     *
+     * @param {string} id - The ID of the item.
+     * @param {IWidget} widget - The widget to be added.
+     */
+    addItem(id: string, widget: IWidget) {
+        widget.setParent(this.itemsContainer);
+
+        widget.setType(WidgetTypes.CUSTOM);
+
+        if (this.orientation === "vertical") {
+            widget.setW(this.size);
+        } else {
+            widget.setH(this.size);
+        }
+
+        this.items.set(id, widget);
+    }
+
+    public init(): void {
+        super.init();
+    }
+
+    public getFullSize(): number {
+        //Devuelve el tamaño que tiene la toolbar para mostrar todos los botones.
+
+        let size = 0;
+        for (const item of this.items.values()) {
+            if (this.orientation === "horizontal") {
+                size += item.getW();
+            } else if (this.orientation === "vertical") {
+                size += item.getH();
+            }
+        }
+        return size;
+    }
+
+    public render(): void {
+        const fullSize = this.getFullSize();
+        const availableSize = this.orientation === "horizontal" ? this.getW() : this.getH();
+
+        if (fullSize > availableSize) {
+            this.btnLeft.setVisible(true);
+            this.btnRight.setVisible(true);
+
+            if (this.orientation === "horizontal") {
+                this.itemsContainer.setY(0);
+                this.itemsContainer.setX(TOOLBAR_BUTTON_SIZE);
+                this.itemsContainer.setW(availableSize - TOOLBAR_BUTTON_SIZE * 2);
+                this.itemsContainer.setH(TOOLBAR_SIZE);
+
+                this.btnLeft.setX(0);
+                this.btnLeft.setW(TOOLBAR_BUTTON_SIZE);
+                this.btnLeft.setH(TOOLBAR_SIZE);
+                this.btnRight.setX(availableSize - TOOLBAR_BUTTON_SIZE);
+                this.btnRight.setW(TOOLBAR_BUTTON_SIZE);
+                this.btnRight.setH(TOOLBAR_SIZE);
+            } else {
+                this.itemsContainer.setY(TOOLBAR_BUTTON_SIZE);
+                this.itemsContainer.setX(0);
+                this.itemsContainer.setW(TOOLBAR_SIZE);
+                this.itemsContainer.setH(availableSize - TOOLBAR_BUTTON_SIZE * 2);
+
+                this.btnLeft.setY(0);
+                this.btnLeft.setW(TOOLBAR_SIZE);
+                this.btnLeft.setH(TOOLBAR_BUTTON_SIZE);
+                this.btnRight.setY(availableSize - TOOLBAR_BUTTON_SIZE);
+                this.btnRight.setW(TOOLBAR_SIZE);
+                this.btnRight.setH(TOOLBAR_BUTTON_SIZE);
+            }
+        } else {
+            this.btnLeft.setVisible(false);
+            this.btnRight.setVisible(false);
+
+            if (this.orientation === "horizontal") {
+                this.itemsContainer.setY(0);
+                this.itemsContainer.setX(0);
+                this.itemsContainer.setW(fullSize);
+                this.itemsContainer.setH(TOOLBAR_SIZE);
+            } else {
+                this.itemsContainer.setY(0);
+                this.itemsContainer.setX(0);
+                this.itemsContainer.setW(TOOLBAR_SIZE);
+                this.itemsContainer.setH(fullSize);
+            }
+        }
+
+        let currentPosition: number = 0;
+
+        for (const item of this.items.values()) {
+            if (this.orientation === "vertical") {
+                item.setY(currentPosition);
+                currentPosition += item.getH();
+                item.setX(0);
+            } else {
+                item.setX(currentPosition);
+                item.setY(0);
+                currentPosition += item.getW();
+            }
+            item.render();
+        }
+
+        super.render();
+    }
+}

package/src/ui/widget.ui.ts

@@ -42,11 +42,7 @@ export class Widget implements IWidget {
     bodyTagName: string;
     body: HTMLElement;
 
-    constructor(
-        id: string,
-        bodyTagName: string = "div",
-        parent: IWidget | null = null
-    ) {
+    constructor(id: string, bodyTagName: string = "div", parent: IWidget | null = null) {
         this.id = id;
 
         this.overflow = false;
@@ -120,12 +116,12 @@ export class Widget implements IWidget {
         this.init();
 
         this.getMaxZIndex();
+
+        window.w.set(this.id, this);
     }
 
     public subscribe(cb: WUICallback) {
-        const randomId =
-            Math.random().toString(36).substring(2, 15) +
-            Math.random().toString(36).substring(2, 15);
+        const randomId = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
 
         this.subscribers.set(`${randomId}.${cb.event}`, cb);
     }
@@ -268,10 +264,7 @@ export class Widget implements IWidget {
             this.body.style.bottom = "";
             this.body.style.right = "";
         } else {
-            if (
-                this.type === WidgetTypes.CUSTOM ||
-                this.type === WidgetTypes.FILL
-            ) {
+            if (this.type === WidgetTypes.CUSTOM || this.type === WidgetTypes.FILL) {
                 this.body.style.position = "absolute";
                 this.body.style.overflow = "hidden";
             }
@@ -461,7 +454,6 @@ export class Widget implements IWidget {
         var clientLeft = docElem.clientLeft || body.clientLeft || 0;
         var top = box.top + scrollTop - clientTop;
         var left = box.left + scrollLeft - clientLeft;
-
         return { x: Math.round(left), y: Math.round(top) };
     }
 
@@ -629,10 +621,7 @@ export class Widget implements IWidget {
 
         const padding = this.padding;
 
-        const size =
-            this.align === WidgetAlignTypes.HORIZONTAL
-                ? this.width
-                : this.height;
+        const size = this.align === WidgetAlignTypes.HORIZONTAL ? this.width : this.height;
 
         let currentPosition = padding;
 
@@ -699,29 +688,17 @@ export class Widget implements IWidget {
                 child.setX(currentPosition);
 
                 if (child.type === WidgetTypes.FILL) {
-                    child.setWH(
-                        elementSize - padding,
-                        this.getH() - padding * 2
-                    );
+                    child.setWH(elementSize - padding, this.getH() - padding * 2);
                 } else {
-                    child.setWH(
-                        elementSize - padding,
-                        this.getH() - padding * 2
-                    );
+                    child.setWH(elementSize - padding, this.getH() - padding * 2);
                 }
             } else if (this.align === WidgetAlignTypes.VERTICAL) {
                 child.setX(padding);
                 child.setY(currentPosition);
                 if (child.type === WidgetTypes.FILL) {
-                    child.setWH(
-                        this.getW() - padding * 2,
-                        elementSize - padding
-                    );
+                    child.setWH(this.getW() - padding * 2, elementSize - padding);
                 } else {
-                    child.setWH(
-                        this.getW() - padding * 2,
-                        elementSize - padding
-                    );
+                    child.setWH(this.getW() - padding * 2, elementSize - padding);
                 }
             }
             currentPosition += elementSize;
@@ -761,10 +738,7 @@ export class Widget implements IWidget {
         return content as HTMLElement;
     }
 
-    private getMaxZIndex(
-        maxZindex: number = 0,
-        node: ChildNode | null = null
-    ): number {
+    private getMaxZIndex(maxZindex: number = 0, node: ChildNode | null = null): number {
         const parent = node ? node : document.body;
 
         if (parent instanceof HTMLElement) {

package/tsconfig.json

@@ -26,5 +26,8 @@
     "noFallthroughCasesInSwitch": true,
 
     "baseUrl": ".",
-  }
+    
+  },
+  "include": ["src"]
+
 }

package/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/svg+xml" href="/icon.svg" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>cedro</title>
-        <link rel="stylesheet" href="src/ui/styles/main.css" />
-    </head>
-    <body>
-        <script type="module" src="/src/main.tsx"></script>
-    </body>
-</html>