cedro 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "cedro",
-    "version": "0.1.2",
+    "version": "0.1.4",
     "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/interfaces/widget.interface.ts

@@ -7,7 +7,11 @@ export type WUIEvent =
     | "mousedown"
     | "mouseup"
     | "mousemove"
-    | "option-clicked";
+    | "mouseout"
+    | "mouseleave"
+    | "option-clicked"
+    | "wheel"
+    | "drag";
 
 export type WUICallback = {
     event: WUIEvent;
@@ -48,6 +52,7 @@ export interface IWidget {
 
     subscribe: (cb: WUICallback) => void;
     unsubscribe: (event: WUIEvent) => void;
+    run(eventId: WUIEvent): void;
 
     setPadding(p: number): void;
 

package/src/types/orientation.type.ts

@@ -0,0 +1 @@
+export type OrientationTypes = "horizontal" | "vertical";

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/datagrid.ui.ts

@@ -0,0 +1,216 @@
+import "./styles/datagrid.css";
+import { Label } from "./label.ui";
+import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+import { Scroll } from "./scroll.ui";
+
+const DATA_GRID_HEADER_HEIGHT = 30;
+const DATA_GRID_FOOTER_HEIGHT = 40;
+const DATA_GRID_ROW_HEIGHT = 20;
+const DATA_GRID_MIN_COLUMN_WIDTH = 24;
+
+type DataGridColumn = {
+    header: string;
+    width: number | null;
+    handler: (args: any) => void;
+};
+
+export class DataGrid extends Widget {
+    headerContainer: Widget;
+    dataContainer: Widget;
+    footerContainer: Widget;
+    data: Array<any>;
+    verticalScrollbar: Scroll;
+    horizontalScrollbar: Scroll;
+
+    rowHeight: number;
+
+    columns: Array<DataGridColumn>;
+
+    constructor(id: string, parent: Widget | null = null) {
+        super(id, "div", parent);
+
+        this.rowHeight = DATA_GRID_ROW_HEIGHT;
+
+        this.headerContainer = new Widget(id + ".header", "div");
+        this.headerContainer.setType(WidgetTypes.FILL);
+        this.headerContainer.setFixedSize(DATA_GRID_HEADER_HEIGHT);
+        this.headerContainer.addClass("WUIDataGrid-Header");
+
+        this.dataContainer = new Widget(id + ".data", "div");
+        this.dataContainer.setType(WidgetTypes.FILL);
+
+        this.footerContainer = new Widget(id + ".footer", "div");
+        this.footerContainer.setType(WidgetTypes.FILL);
+        this.footerContainer.setFixedSize(DATA_GRID_FOOTER_HEIGHT);
+
+        this.setType(WidgetTypes.FILL);
+        this.setAlign(WidgetAlignTypes.VERTICAL);
+
+        this.addChild(this.headerContainer);
+        this.addChild(this.dataContainer);
+        this.addChild(this.footerContainer);
+
+        this.verticalScrollbar = new Scroll(id + ".VerticalScrollbar", this.dataContainer);
+        this.horizontalScrollbar = new Scroll(id + ".HorizontalScrollbar", this.dataContainer, "horizontal");
+
+        this.columns = new Array<DataGridColumn>();
+
+        this.data = new Array<any>();
+    }
+
+    private getFreeWidth(): number {
+        let freeW = 0;
+        for (let i = 0; i < this.columns.length; i++) {
+            let width = this.columns[i].width;
+            if (width) {
+                freeW += width;
+            }
+        }
+
+        freeW = this.dataContainer.getW() - freeW;
+
+        if (freeW < DATA_GRID_MIN_COLUMN_WIDTH) {
+            freeW = DATA_GRID_MIN_COLUMN_WIDTH;
+        }
+        return freeW;
+    }
+
+    private getAllColumnsWidth(): number {
+        let returnValue = 0;
+        for (let i = 0; i < this.columns.length; i++) {
+            let width = this.columns[i].width;
+            if (width) {
+                returnValue += width;
+            }
+        }
+        return returnValue;
+    }
+
+    public init(): void {
+        super.init();
+
+        this.createHeaders();
+    }
+
+    private createHeaders(): void {
+        if (!this.columns) {
+            return;
+        }
+
+        for (let i = 0; i < this.columns.length; i++) {
+            const btn = new Label(this.id + "header." + i, "span");
+            btn.addClass("WUIDataGrid-HeaderLabel");
+            this.headerContainer.addChild(btn);
+        }
+
+        this.buildRows();
+        this.renderHeaders();
+    }
+
+    private renderHeaders(): void {
+        if (!this.columns) {
+            return;
+        }
+
+        let startX = 0;
+        for (let i = 0; i < this.columns.length; i++) {
+            const column = this.columns[i];
+            const btn = window.w.get(this.id + "header." + i) as Label;
+            const width = column.width ? column.width : this.getFreeWidth();
+            btn.setType(WidgetTypes.CUSTOM);
+            btn.setX(startX);
+            btn.setY(0);
+            btn.setW(width);
+            btn.setH(DATA_GRID_HEADER_HEIGHT);
+            btn.getBody().style.lineHeight = DATA_GRID_HEADER_HEIGHT + "px";
+            btn.setText(column.header);
+            this.headerContainer.addChild(btn);
+            startX += width;
+        }
+    }
+
+    private buildRows(): void {
+        let rowY = 0;
+
+        for (let i = 0; i < this.data.length; i++) {
+            const row = new Widget(this.id + ".row." + i, "div");
+
+            row.setType(WidgetTypes.CUSTOM);
+            row.getBody().style.position = "absolute";
+            row.getBody().style.overflow = "hidden";
+
+            this.dataContainer.addChild(row);
+
+            for (let j = 0; j < this.columns.length; j++) {
+                const column = this.columns[j];
+                const fieldId = this.id + ".row." + i + ".column." + j;
+                column.handler({
+                    data: this.data[i],
+                    index: i,
+                    fieldId: fieldId,
+                    row: row,
+                });
+                const columnWidget = window.w.get(fieldId) as Widget;
+                columnWidget.getBody().style.position = "absolute";
+            }
+            rowY += this.rowHeight;
+        }
+    }
+
+    private renderRows(): void {
+        let rowY = 0;
+
+        for (let i = 0; i < this.data.length; i++) {
+            const row = window.w.get(this.id + ".row." + i) as Widget;
+
+            row.setX(0);
+            row.setY(rowY);
+            row.setW(this.getAllColumnsWidth());
+            row.setH(this.rowHeight);
+
+            let widgetX = 0;
+            for (let j = 0; j < this.columns.length; j++) {
+                const column = this.columns[j];
+                const fieldId = this.id + ".row." + i + ".column." + j;
+                const columnWidget = window.w.get(fieldId) as Widget;
+                columnWidget.setY(0);
+                columnWidget.setX(widgetX);
+                columnWidget.setH(this.rowHeight);
+                if (column.width) {
+                    columnWidget.setW(column.width);
+                } else {
+                    columnWidget.setW(this.getFreeWidth());
+                }
+                widgetX += column.width ? column.width : columnWidget.getW();
+            }
+            rowY += this.rowHeight;
+        }
+    }
+
+    public render(): void {
+        super.render();
+        this.renderHeaders();
+        this.renderRows();
+        this.verticalScrollbar.render();
+        this.horizontalScrollbar.render();
+    }
+
+    public setRowHeight(rowHeight: number): void {
+        this.rowHeight = rowHeight;
+    }
+
+    public addColumn(header: string, width: number | null, handler: (args: any) => void) {
+        this.columns.push({ header, width, handler });
+    }
+
+    public getHeader(index: number): Label {
+        return window.w.get(this.id + "header." + index) as Label;
+    }
+
+    public setData(data: Array<any>): void {
+        this.data = data;
+
+        this.buildRows();
+        this.renderRows();
+    }
+}

package/src/ui/draggable.ui.ts

@@ -0,0 +1,143 @@
+import { OrientationTypes } from "src/types/orientation.type";
+import "./styles/draggable.css";
+import { Widget, WidgetTypes } from "./widget.ui";
+
+export type DragOrientation = OrientationTypes | "both";
+
+export class Draggable {
+    target: Widget;
+    background: Widget;
+
+    dragging: boolean = false;
+    dragDistX: number;
+    dragDistY: number;
+    dragOrientation: DragOrientation;
+
+    minX: number | null;
+    minY: number | null;
+    maxX: number | null;
+    maxY: number | null;
+
+    constructor(widget: Widget, orientation: DragOrientation = "both") {
+        this.target = widget;
+
+        this.background = new Widget(this.target.id + ".Draggable.Background", "div", null);
+        this.background.setType(WidgetTypes.CUSTOM);
+        this.background.addClass("WUIDraggableBackground");
+
+        this.dragDistX = 0;
+        this.dragDistY = 0;
+
+        this.maxX = null;
+        this.maxY = null;
+
+        this.minX = null;
+        this.minY = null;
+
+        this.dragOrientation = orientation;
+
+        this.target.subscribe({
+            event: "mousedown",
+            then: (e, _w) => {
+                this.startDrag(e as MouseEvent);
+            },
+        });
+
+        this.background.subscribe({
+            event: "mousemove",
+            then: (e, _w) => {
+                this.draggingTarget(e as MouseEvent);
+            },
+        });
+
+        this.background.subscribe({
+            event: "mouseup",
+            then: (_e, _w) => {
+                this.endDrag();
+            },
+        });
+
+        this.background.subscribe({
+            event: "mouseout",
+            then: (_e, _w) => {
+                this.endDrag();
+            },
+        });
+
+        this.background.subscribe({
+            event: "mouseleave",
+            then: (_e, _w) => {
+                this.endDrag();
+            },
+        });
+    }
+
+    private startDrag(e: MouseEvent): void {
+        e.preventDefault();
+        const mouseX = e.clientX;
+        const mouseY = e.clientY;
+        this.dragDistX = Math.abs(this.target.getX() - mouseX);
+        this.dragDistY = Math.abs(this.target.getY() - mouseY);
+        this.dragging = true;
+        this.background.setVisible(true);
+        this.background.raisteTop();
+    }
+
+    private draggingTarget(e: MouseEvent): void {
+        if (!this.dragging) {
+            return;
+        }
+
+        e.preventDefault();
+
+        const mouseX = e.clientX;
+        const mouseY = e.clientY;
+
+        if (this.dragOrientation === "both" || this.dragOrientation === "horizontal") {
+            let newX = mouseX - this.dragDistX;
+            if (this.maxX != null && newX > this.maxX) {
+                newX = this.maxX;
+            }
+
+            if (this.minX != null && newX < this.minX) {
+                newX = this.minX;
+            }
+            this.target.setX(newX);
+        }
+
+        if (this.dragOrientation === "both" || this.dragOrientation === "vertical") {
+            let newY = mouseY - this.dragDistY;
+            if (this.maxY != null && newY > this.maxY) {
+                newY = this.maxY;
+            }
+
+            if (this.minY != null && newY < this.minY) {
+                newY = this.minY;
+            }
+            this.target.setY(newY);
+        }
+
+        this.target.run("drag");
+    }
+
+    private endDrag(): void {
+        this.dragging = false;
+        this.background.setVisible(false);
+    }
+
+    public setMaxX(x: number | null): void {
+        this.maxX = x;
+    }
+
+    public setMaxY(y: number | null): void {
+        this.maxY = y;
+    }
+
+    public setMinX(x: number | null): void {
+        this.minX = x;
+    }
+
+    public setMinY(y: number | null): void {
+        this.minY = y;
+    }
+}

package/src/ui/index.ts

@@ -1,16 +1,18 @@
-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 { Tabs } from "./tabs.ui";
+import { Toolbar } from "./toolbar.ui";
+import { DataGrid } from "./datagrid.ui";
+import { createWidget } from "./widget.builder.ui";
 
-
-export{
+export {
     Button,
     Widget,
     Dialog,
@@ -19,6 +21,9 @@ export{
     Label,
     Menu,
     Select,
+    Tabs,
     Textbox,
+    Toolbar,
+    DataGrid,
     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");