cedro 0.1.9 → 0.1.10

package/src/ui/widget.ui.ts

@@ -1,3 +1,4 @@
+import { UID } from "../core/uid";
 import { IWidget, WUIEvent, WUICallback } from "../interfaces/widget.interface";
 import { Vector2D } from "../types/vector2d.type";
 import { WidgetEventProps, WidgetProps } from "./widget.builder";
@@ -44,8 +45,12 @@ export class Widget implements IWidget {
     bodyTagName: string;
     body: HTMLElement;
 
-    constructor(id: string, bodyTagName: string = "div", parent: IWidget | null = null) {
-        this.id = id;
+    constructor(
+        id: string | null = "",
+        bodyTagName: string = "div",
+        parent: IWidget | null = null
+    ) {
+        this.id = id ? id : UID();
 
         this.overflow = false;
 
@@ -289,9 +294,8 @@ export class Widget implements IWidget {
         }
 
         if (freeStyle) {
-            //this.body.style.position = "relative";
+            this.deleteClass("WUINonFreePosition");
             this.addClass("WUIFixPosition");
-            //this.body.style.overflow = "auto";
             this.body.style.left = "";
             this.body.style.top = "";
             this.body.style.width = "";
@@ -301,8 +305,10 @@ export class Widget implements IWidget {
             this.body.style.right = "";
         } else {
             if (this.type === WidgetTypes.CUSTOM || this.type === WidgetTypes.FILL) {
-                this.body.style.position = "absolute";
-                this.body.style.overflow = "hidden";
+                // this.body.style.position = "absolute";
+                // this.body.style.overflow = "hidden";
+                this.deleteClass("WUIFixPosition");
+                this.addClass("WUINonFreePosition");
             }
         }
 
@@ -362,6 +368,8 @@ export class Widget implements IWidget {
         this.parent = parent;
         this.parent?.body.appendChild(this.body);
 
+        this.setType(this.type); //TODO: revisar, se coloca para tratar de que reconozca al padre como freestyle en caso de serlo.
+
         //this.parent?.addChild(this);
     }
 
@@ -596,6 +604,7 @@ export class Widget implements IWidget {
     public addChild(child: IWidget | null = null): void {
         if (!child) return;
         this.childs.push(child);
+
         child.setParent(this);
 
         child.init();
@@ -603,6 +612,17 @@ export class Widget implements IWidget {
         child.render();*/
     }
 
+    public populate(): void {
+        //se agrega a si mismo a window.w y a sus hijos.
+        if (!window.w.get(this.id)) {
+            window.w.set(this.id, this);
+        }
+
+        for (const child of this.childs) {
+            child.populate();
+        }
+    }
+
     /**
      * Disables the selection feature.
      *
@@ -638,9 +658,25 @@ export class Widget implements IWidget {
      * @return {type} description of return value
      */
     public init(): void {
-        if (this.type !== WidgetTypes.FREE) {
-            this.body.style.position = "absolute";
-            this.body.style.overflow = "hidden";
+        let freeStyle = false;
+
+        if (this.type === WidgetTypes.FREE) {
+            freeStyle = true;
+        }
+
+        const parent = this.getParent();
+
+        if (parent) {
+            if (parent.type === WidgetTypes.FREE) {
+                freeStyle = true;
+            }
+        }
+
+        if (!freeStyle) {
+            this.deleteClass("WUIFixPosition");
+            this.addClass("WUINonFreePosition");
+            // this.body.style.position = "absolute";
+            // this.body.style.overflow = "hidden";
         }
 
         this.initPosition();
@@ -758,6 +794,12 @@ export class Widget implements IWidget {
             currentPosition += elementSize;
             child.render();
         }
+
+        this.subscribers.forEach((callback) => {
+            if (callback.event == "render") {
+                callback.then(new Event("render"), this);
+            }
+        });
     }
 
     /**
@@ -855,7 +897,13 @@ export class Widget implements IWidget {
                 child.free();
             }
         }
+
         window.w.delete(this.id);
+
+        const body = this.getBody();
+        const parent = body.parentNode;
+        if (!parent && !body) return;
+        parent?.removeChild(body);
     }
 
     public dispose(): void {
@@ -877,12 +925,17 @@ export function getOnlyEventProps(props: WidgetProps): WidgetEventProps {
         onMouseOut: props.onMouseOut,
         onMouseLeave: props.onMouseLeave,
         onWheel: props.onWheel,
+        onRender: props.onRender,
     };
 
     return eventProps;
 }
 
-export function connectWidgetCallback(id: string, props: WidgetEventProps): void {
+export function connectWidgetCallback(
+    id: string | null | undefined,
+    props: WidgetEventProps
+): void {
+    if (!id) return;
     connectWidget("widget-added-" + id, {
         event: "widget-load",
         then: (_e, _w) => {
@@ -892,63 +945,70 @@ export function connectWidgetCallback(id: string, props: WidgetEventProps): void
                 widget.subscribe({
                     event: "click",
                     then: (_e, _w) => {
-                        props.onClick ? props.onClick() : null;
+                        props.onClick ? props.onClick({}) : null;
                     },
                 });
 
                 widget.subscribe({
                     event: "drag",
                     then: (_e, _w) => {
-                        props.onDrag ? props.onDrag() : null;
+                        props.onDrag ? props.onDrag({}) : null;
                     },
                 });
 
                 widget.subscribe({
                     event: "resize",
                     then: (_e, _w) => {
-                        props.onResize ? props.onResize() : null;
+                        props.onResize ? props.onResize({}) : null;
                     },
                 });
 
                 widget.subscribe({
                     event: "mousedown",
                     then: (_e, _w) => {
-                        props.onMouseDown ? props.onMouseDown() : null;
+                        props.onMouseDown ? props.onMouseDown({}) : null;
                     },
                 });
 
                 widget.subscribe({
                     event: "mouseup",
                     then: (_e, _w) => {
-                        props.onMouseUp ? props.onMouseUp() : null;
+                        props.onMouseUp ? props.onMouseUp({}) : null;
                     },
                 });
 
                 widget.subscribe({
                     event: "mousemove",
                     then: (_e, _w) => {
-                        props.onMouseMove ? props.onMouseMove() : null;
+                        props.onMouseMove ? props.onMouseMove({}) : null;
                     },
                 });
 
                 widget.subscribe({
                     event: "mouseout",
                     then: (_e, _w) => {
-                        props.onMouseOut ? props.onMouseOut() : null;
+                        props.onMouseOut ? props.onMouseOut({}) : null;
                     },
                 });
 
                 widget.subscribe({
                     event: "mouseleave",
                     then: (_e, _w) => {
-                        props.onMouseLeave ? props.onMouseLeave() : null;
+                        props.onMouseLeave ? props.onMouseLeave({}) : null;
                     },
                 });
 
                 widget.subscribe({
                     event: "wheel",
                     then: (_e, _w) => {
-                        props.onWheel ? props.onWheel() : null;
+                        props.onWheel ? props.onWheel({}) : null;
+                    },
+                });
+
+                widget.subscribe({
+                    event: "render",
+                    then: (_e, _w) => {
+                        props.onRender ? props.onRender({}) : null;
                     },
                 });
             }

package/src/ui/Icon.ui.ts

@@ -1,64 +0,0 @@
-import { Colors } from "./colors.ui";
-import { Widget } from "./widget.ui";
-
-export type IconVariants = "Filled" | "Outlined" | "Round" | "Sharp" | "Two Tone";
-
-export class Icon extends Widget {
-    variant: IconVariants;
-    color: Colors;
-    icon: string;
-
-    constructor(
-        id: string,
-        icon: string,
-        variant: IconVariants = "Filled",
-        parent: Widget | null = null
-    ) {
-        super(id, "span", parent);
-
-        this.variant = variant;
-        this.color = "primary";
-        this.icon = icon;
-
-        if (this.variant === "Filled") {
-            this.addClass("material-icons");
-        } else {
-            this.addClass(
-                "material-icons-" + this.variant.toString().replace(" ", "-").toLowerCase()
-            );
-        }
-
-        this.setIcon(icon);
-
-        this.init();
-    }
-
-    public init(): void {
-        super.init();
-    }
-
-    setIcon(icon: string): void {
-        this.icon = icon;
-        this.body.innerHTML = icon;
-    }
-
-    setVariant(variant: IconVariants = "Filled"): void {
-        this.variant = variant;
-    }
-
-    setColor(color: Colors = "primary"): void {
-        this.color = color;
-    }
-
-    getVariant(): IconVariants {
-        return this.variant;
-    }
-
-    getColor(): Colors {
-        return this.color;
-    }
-
-    getIcon(): string {
-        return this.icon;
-    }
-}

package/src/ui/accordion.ui.ts

@@ -1,71 +0,0 @@
-import "./styles/accordion.css";
-import { IconButton } from "./IconButton.ui";
-import { Label } from "./label.ui";
-import { Widget, WidgetTypes } from "./widget.ui";
-
-const ACCORDION_HEADER_HEIGHT = 40;
-
-type AccordionItem = {
-    header: Widget;
-    content: Widget;
-};
-
-export class Accordion extends Widget {
-    items: Map<string, AccordionItem>;
-    selectedItemId: string | null;
-    constructor(id: string, parent: Widget | null = null) {
-        super(id, "div", parent);
-
-        this.items = new Map<string, AccordionItem>();
-
-        this.selectedItemId = null;
-
-        this.addClass("WUIAccordion");
-    }
-
-    public selectItem(id: string): void {
-        const selected = this.items.get(id);
-
-        if (this.selectedItemId !== null) {
-            //deseleccionamos
-            const previous = this.items.get(this.selectedItemId);
-
-            if (previous) {
-                previous.content.setFixedSize(0);
-            }
-        }
-
-        if (selected) {
-            this.selectedItemId = id;
-            selected.content.setFixedSize(null);
-        }
-
-        this.render();
-    }
-
-    public addItem(title: string, icon: string, content: Widget): void {
-        const header =
-            icon !== ""
-                ? new IconButton(content.id + ".header", icon, null)
-                : new Label(content.id + ".header", "span", null);
-
-        header.setType(WidgetTypes.FILL);
-        header.setFixedSize(ACCORDION_HEADER_HEIGHT);
-        header.setText(title);
-
-        header.subscribe({
-            event: "click",
-            then: (_e, _w) => {
-                this.selectItem(content.id);
-            },
-        });
-
-        content.setType(WidgetTypes.FILL);
-        content.setFixedSize(0);
-
-        this.items.set(content.id, { header, content });
-
-        this.addChild(header);
-        this.addChild(content);
-    }
-}

package/src/ui/buttonColor.ui.ts

@@ -1,24 +0,0 @@
-import "./styles/buttoncolor.css";
-import { Button } from "./button.ui";
-import { Widget } from "./widget.ui";
-
-export class ButtonColor extends Button {
-    inputColor: Widget;
-    constructor(id: string, parent: Widget | null = null) {
-        super(id, parent);
-
-        this.inputColor = new Widget(id + ".inputColor", "input", this);
-        this.inputColor.getBody().setAttribute("type", "color");
-        this.inputColor.addClass("WUIButtonColorInput");
-    }
-
-    public setValue(value: string): void {
-        this.inputColor.getBody().setAttribute("value", value);
-    }
-
-    public getValue(): string {
-        const value = this.inputColor.getBody().getAttribute("value");
-
-        return value ? value : "";
-    }
-}

package/src/ui/buttonmenu.ui.ts

@@ -1,59 +0,0 @@
-import { Button } from "./button.ui";
-import { Menu } from "./menu.ui";
-import { SelectItem } from "./select.ui";
-
-export class ButtonMenu extends Button {
-    menu: Menu;
-    items: Array<SelectItem>;
-    selectedItem: SelectItem | null;
-
-    public constructor(id: string) {
-        super(id);
-
-        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/datagrid.ui.ts

@@ -1,231 +0,0 @@
-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();
-    }
-}