cedro 0.1.3 → 0.1.5

package/src/ui/datagrid.ui.ts

@@ -0,0 +1,231 @@
+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>();
+
+        this.addClass("WUIDataGrid");
+    }
+
+    public hideFooter(): void {
+        this.footerContainer.setFixedSize(0);
+    }
+
+    public showFooter(): void {
+        this.footerContainer.setFixedSize(DATA_GRID_FOOTER_HEIGHT);
+    }
+
+    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";
+            row.addClass("WUIDataGrid-Row");
+
+            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,165 @@
+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;
+
+    draggingClass: string | 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.draggingClass = null;
+
+        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();
+            },
+        });
+
+        this.background.setVisible(false);
+    }
+
+    public setBackgroundCursor(cursor: string): void {
+        this.background.getBody().style.cursor = cursor;
+    }
+
+    public setDraggingClass(draggingClass: string | null): void {
+        this.draggingClass = draggingClass;
+    }
+
+    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();
+
+        if (this.draggingClass) {
+            this.target.addClass(this.draggingClass);
+        }
+    }
+
+    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);
+
+        if (this.draggingClass) {
+            this.target.deleteClass(this.draggingClass);
+        }
+    }
+
+    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/hpanel.ui.ts

@@ -0,0 +1,127 @@
+import { Draggable } from "./draggable.ui";
+import "./styles/hpanel.css";
+import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+
+const HPANEL_HANDLER_SIZE = 4;
+
+export class HPanel extends Widget {
+    leftContent: Widget | null;
+    rightContent: Widget | null;
+
+    leftWidth: number | null;
+    rightWidth: number | null;
+
+    handler: Widget;
+    draggable: Draggable;
+
+    constructor(id: string, parent: Widget | null = null) {
+        super(id, "div", parent);
+        this.setAlign(WidgetAlignTypes.HORIZONTAL);
+        this.setType(WidgetTypes.FILL);
+
+        this.handler = new Widget(id + ".handler", "div", null);
+        this.handler.addClass("WUIHPanelHandler");
+
+        this.draggable = new Draggable(this.handler, "horizontal");
+        this.draggable.setDraggingClass("WUIHPanelDragging");
+        this.draggable.setBackgroundCursor("col-resize");
+
+        this.handler.subscribe({
+            event: "drag",
+            then: (_e, _w) => {
+                this.updateSizeFromHandlerPosition();
+            },
+        });
+
+        this.subscribe({
+            event: "mousemove",
+            then: (e, _w) => {
+                this.updateHandlerOpacity(e as MouseEvent);
+            },
+        });
+
+        this.leftContent = null;
+        this.rightContent = null;
+
+        this.leftWidth = null;
+        this.rightWidth = null;
+    }
+
+    private updateHandlerOpacity(e: MouseEvent): void {
+        const handlerX = this.handler.getX();
+        const mouseX = e.clientX;
+        const umbral = 100; //Distancia donde comienza a aparecer.
+        const minDistance = 20; //Distancia a la que toma 100 de opacidad
+        const distance = Math.abs(mouseX - handlerX);
+
+        if (distance < umbral && distance > minDistance) {
+            const ratio = 1 - distance / umbral;
+            this.handler.getBody().style.opacity = ratio.toString();
+        } else if (distance < minDistance) {
+            this.handler.getBody().style.opacity = "1";
+        } else {
+            this.handler.getBody().style.opacity = "0";
+        }
+    }
+
+    public setLeft(content: Widget, fixWidth: number | null = null): void {
+        this.leftContent = content;
+        this.leftWidth = fixWidth;
+        if (fixWidth !== null) {
+            this.rightWidth = null;
+            this.leftContent.setFixedSize(fixWidth);
+        }
+        this.addChild(content);
+
+        const spacer = new Widget("spacer." + Date.now().toString(), "div", null);
+        spacer.setType(WidgetTypes.FILL);
+        spacer.setFixedSize(HPANEL_HANDLER_SIZE);
+        this.addChild(spacer);
+    }
+
+    public setRight(content: Widget, fixWidth: number | null = null): void {
+        this.rightContent = content;
+        this.rightWidth = fixWidth;
+        if (fixWidth !== null) {
+            this.leftWidth = null;
+            this.rightContent.setFixedSize(fixWidth);
+        }
+        this.addChild(content);
+    }
+
+    private updateSizeFromHandlerPosition(): void {
+        if (this.leftWidth !== null) {
+            const leftX = this.leftContent ? this.leftContent.getX(true) : 0;
+            this.leftWidth = this.handler.getX() - leftX;
+        } else if (this.rightWidth !== null) {
+            this.rightWidth = this.getW() - this.handler.getX();
+        }
+
+        this.render();
+    }
+
+    public render(): void {
+        super.render();
+        this.handler.setW(HPANEL_HANDLER_SIZE);
+        this.handler.setH(this.getH());
+
+        if (this.leftWidth !== null) {
+            const leftX = this.leftContent ? this.leftContent.getX(true) : 0;
+            this.handler.setX(leftX + this.leftWidth);
+            this.leftContent?.setFixedSize(this.leftWidth);
+        } else if (this.rightWidth !== null) {
+            const rightX = this.rightContent ? this.rightContent.getX(true) : 0;
+            this.handler.setX(rightX + this.rightWidth);
+            this.rightContent?.setFixedSize(this.rightWidth);
+        } else {
+            if (this.leftWidth === null) {
+                this.leftWidth = this.getW() / 2 - HPANEL_HANDLER_SIZE / 2;
+            }
+            const leftX = this.leftContent ? this.leftContent.getX(true) : 0;
+            this.handler.setX(leftX + this.leftWidth);
+            this.leftContent?.setFixedSize(this.leftWidth);
+        }
+
+        this.handler.setY(this.getY(true));
+    }
+}

package/src/ui/iconButtonMenu.ui.ts

@@ -0,0 +1,59 @@
+import { IconButton } from "./IconButton.ui";
+import { Menu } from "./menu.ui";
+import { SelectItem } from "./select.ui";
+
+export class IconButtonMenu extends IconButton {
+    menu: Menu;
+    items: Array<SelectItem>;
+    selectedItem: SelectItem | null;
+
+    public constructor(id: string, icon: string) {
+        super(id, icon);
+
+        this.menu = new Menu(this.id + ".menu", this.id, null);
+
+        this.items = new Array<SelectItem>();
+        this.selectedItem = null;
+
+        this.subscribe({
+            event: "click",
+            then: () => {
+                this.menu.clearOptions();
+                this.items.forEach((item) => {
+                    this.menu.addOption(item.id, item.icon, item.label);
+                });
+
+                this.menu.wakeUp();
+
+                if (this.getW() > this.menu.getW()) {
+                    this.menu.setW(this.getBody().clientWidth);
+                    console.log("cambiando ancho...");
+                }
+            },
+        });
+
+        /*this.menu.subscribe({
+            event: "option-clicked",
+            then: (_e, clickedOption) => {
+                const option = clickedOption as IconButton;
+
+                const fintOption = this.items.find((item) => item.id === option.id);
+
+                if (fintOption) {
+                    this.selectedItem = fintOption;
+                }
+
+                const selectedText = this.selectedItem?.label;
+                if (selectedText) {
+                    this.setText(selectedText);
+                } else {
+                    this.setText("");
+                }
+            },
+        });*/
+    }
+
+    public addItem(id: string, label: string, icon: string): void {
+        this.items.push(new SelectItem(id, label, icon));
+    }
+}

package/src/ui/index.ts

@@ -1,13 +1,57 @@
+import { Accordion } from "./accordion";
 import { Button } from "./button.ui";
-import { Widget } from "./widget.ui";
+import { ButtonColor } from "./buttonColor.ui";
+import { ButtonMenu } from "./buttonmenu.ui";
+import { ButtonStack } from "./buttonstack.ui";
+import { Checkbox } from "./checkbox.ui";
+import { WidgetAlignTypes, WidgetTypes, Widget } from "./widget.ui";
 import { Dialog } from "./dialog";
+import { HPanel } from "./hpanel.ui";
 import { Icon } from "./Icon.ui";
 import { IconButton } from "./IconButton.ui";
 import { Label } from "./label.ui";
 import { Menu } from "./menu.ui";
+import { ProgressBar } from "./progressbar.ui";
 import { Select } from "./select.ui";
+import { Switch } from "./switch.ui";
 import { Textbox } from "./textbox.ui";
+import { Tabs } from "./tabs.ui";
+import { TextArea } from "./textarea.ui";
 import { Toolbar } from "./toolbar.ui";
+import { DataGrid } from "./datagrid.ui";
+import { RadioButton } from "./radiobutton";
+import { ValueBar } from "./valuebar.ui";
+import { VPanel } from "./vpanel.ui";
 import { createWidget } from "./widget.builder.ui";
+import { IconButtonMenu } from "./iconButtonMenu.ui";
 
-export { Button, Widget, Dialog, Icon, IconButton, Label, Menu, Select, Textbox, Toolbar, createWidget };
+export {
+    Accordion,
+    Button,
+    ButtonColor,
+    ButtonMenu,
+    ButtonStack,
+    Checkbox,
+    Dialog,
+    HPanel,
+    Icon,
+    IconButton,
+    IconButtonMenu,
+    Label,
+    Menu,
+    ProgressBar,
+    RadioButton,
+    Select,
+    Switch,
+    Tabs,
+    TextArea,
+    Textbox,
+    Toolbar,
+    ValueBar,
+    VPanel,
+    DataGrid,
+    Widget,
+    WidgetAlignTypes,
+    WidgetTypes,
+    createWidget,
+};

package/src/ui/loading.ui.ts

@@ -0,0 +1,10 @@
+import "./styles/loading.css";
+import { Widget } from "./widget.ui";
+
+export class Loading extends Widget {
+    constructor(id: string, parent: Widget | null = null) {
+        super(id, "div", parent);
+        this.addClass("WUILoading");
+        this.setVisible(false);
+    }
+}