cedro 0.1.8 → 0.1.10

package/src/ui/widget.builder.ts

@@ -0,0 +1,243 @@
+import { UID } from "../core/uid";
+import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+import { addNewWidget } from "./widget.collection";
+import { createTextbox } from "./Textbox.ui";
+import { createButton } from "./button.ui";
+import { createLabel } from "./label.ui";
+import { OrientationTypes } from "src/types/orientation.type";
+import { createContainer } from "./container.ui";
+import { createIconButton } from "./IconButton.ui";
+import { createImage } from "./image.ui";
+import { createCheckbox } from "./checkbox.ui";
+import { createRadioButton } from "./radiobutton.ui";
+import { createToolbar } from "./toolbar.ui";
+import { createProgressBar } from "./progressbar.ui";
+import { createValueBar } from "./valuebar.ui";
+import { VPanel, createVPanel } from "./vpanel.ui";
+import { HPanel, createHPanel } from "./hpanel.ui";
+import { Tabs, createTab } from "./tabs.ui";
+import { createSwitch } from "./switch.ui";
+import { Accordion, createAccordion } from "./accordion.ui";
+import { createButtonStack } from "./buttonstack.ui";
+import { createButtonColor } from "./buttonColor.ui";
+import { createButtonMenu } from "./buttonmenu.ui";
+import { createIconButtonMenu } from "./iconButtonMenu.ui";
+import { createIcon } from "./Icon.ui";
+import { createTextarea } from "./textarea.ui";
+import { createSelect } from "./select.ui";
+import { createDialog, Dialog } from "./dialog";
+import { createDataGrid, DataGrid } from "./datagrid.ui";
+
+export type WidgetEventProps = {
+    onClick?: (args: any) => {} | void;
+    onResize?: (args: any) => {} | void;
+    onMouseDown?: (args: any) => {} | void;
+    onMouseUp?: (args: any) => {} | void;
+    onMouseMove?: (args: any) => {} | void;
+    onMouseOut?: (args: any) => {} | void;
+    onMouseLeave?: (args: any) => {} | void;
+    onWheel?: (args: any) => {} | void;
+    onDrag?: (args: any) => {} | void;
+    onRender?: (args: any) => {} | void;
+};
+
+export type WidgetProps = {
+    id?: string | null;
+    type?: WidgetTypes | null;
+    padding?: number | null;
+    classNames?: string | null;
+    fixedSize?: number | null;
+    orientation?: OrientationTypes | null;
+    hidden?: boolean | null;
+} & WidgetEventProps;
+
+export function createWidget(
+    content: any,
+    parent: Widget | null = null,
+    freedom: boolean = false
+): Widget | null {
+    if (!content.tagName) {
+        return null;
+    }
+
+    let widget: Widget | null = null;
+    let widgetProps: WidgetProps = {
+        id: content.id ? content.id : UID(),
+        type:
+            content.getAttribute("w-type") === null
+                ? WidgetTypes.FILL
+                : parseInt(content.getAttribute("w-type")),
+        orientation:
+            content.getAttribute("w-orientation") === null
+                ? "horizontal"
+                : content.getAttribute("w-orientation"),
+        hidden: content.getAttribute("w-hidden") !== null ? true : false,
+        padding:
+            content.getAttribute("w-padding") === null
+                ? 0
+                : parseInt(content.getAttribute("w-padding")),
+        fixedSize:
+            content.getAttribute("w-fixed-size") === null
+                ? null
+                : parseInt(content.getAttribute("w-fixed-size")),
+        classNames:
+            content.getAttribute("w-classes") === null ? null : content.getAttribute("w-classes"),
+    };
+
+    if (!widgetProps.id) {
+        widgetProps.id = UID();
+    }
+
+    if (content.getAttribute("w-textbox")) {
+        widget = createTextbox(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-textarea")) {
+        widget = createTextarea(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-button")) {
+        widget = createButton(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-icon-button")) {
+        widget = createIconButton(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-button-stack")) {
+        widget = createButtonStack(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-button-color")) {
+        widget = createButtonColor(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-button-menu")) {
+        widget = createButtonMenu(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-icon-button-menu")) {
+        widget = createIconButtonMenu(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-label")) {
+        widget = createLabel(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-image")) {
+        widget = createImage(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-icon")) {
+        widget = createIcon(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-checkbox")) {
+        widget = createCheckbox(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-radiobutton")) {
+        widget = createRadioButton(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-switch")) {
+        widget = createSwitch(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-toolbar")) {
+        widget = createToolbar(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-progressbar")) {
+        widget = createProgressBar(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-valuebar")) {
+        widget = createValueBar(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-tab")) {
+        widget = createTab(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-accordion")) {
+        widget = createAccordion(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-vpanel")) {
+        widget = createVPanel(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-hpanel")) {
+        widget = createHPanel(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-container")) {
+        widget = createContainer(content, parent);
+    } else if (content.getAttribute("w-select")) {
+        widget = createSelect(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-dialog")) {
+        widget = createDialog(widgetProps.id, content, null);
+    } else if (content.getAttribute("w-data-grid")) {
+        widget = createDataGrid(widgetProps.id, content, parent);
+    } else {
+        widget = new Widget(widgetProps.id, content.tagName, parent);
+
+        if (widgetProps.type === WidgetTypes.FREE) {
+            freedom = true;
+        }
+
+        content.getAttributeNames().forEach((key: string) => {
+            if (widget) widget.getBody().setAttribute(key, content.getAttribute(key));
+        });
+
+        (content as HTMLElement).childNodes.forEach((child) => {
+            if (child.hasChildNodes() == true) {
+                createWidget(child, widget, freedom);
+            } else {
+                if (widget) widget.getBody().appendChild(child);
+            }
+        });
+    }
+
+    if (widget) {
+        if (!freedom && widgetProps.type) {
+            widget.setType(widgetProps.type);
+        } else {
+            widget.setType(WidgetTypes.FREE);
+        }
+
+        if (widget instanceof Dialog) {
+            widget.setType(WidgetTypes.CUSTOM);
+        }
+
+        if (
+            widgetProps.orientation &&
+            !(widget instanceof VPanel) &&
+            !(widget instanceof HPanel) &&
+            !(widget instanceof Dialog) &&
+            !(widget instanceof DataGrid) &&
+            !(widget instanceof Tabs)
+        ) {
+            if (widgetProps.orientation === "vertical") {
+                widget.setAlign(WidgetAlignTypes.VERTICAL);
+            } else {
+                widget.setAlign(WidgetAlignTypes.HORIZONTAL);
+            }
+        }
+
+        if (widget instanceof Accordion) {
+            widget.setAlign(WidgetAlignTypes.VERTICAL);
+        }
+
+        if (widget instanceof DataGrid) {
+            widget.setAlign(WidgetAlignTypes.VERTICAL);
+        }
+
+        if (widgetProps.padding) widget.setPadding(widgetProps.padding);
+        if (widgetProps.fixedSize) widget.setFixedSize(widgetProps.fixedSize);
+
+        if (widgetProps.classNames) {
+            const clases = widgetProps.classNames.split(" ");
+            for (const clase of clases) {
+                widget.addClass(clase);
+            }
+        }
+
+        if (widgetProps.hidden) {
+            widget.setVisible(false);
+        }
+
+        addNewWidget(widgetProps.id, widget);
+
+        return widget;
+    }
+
+    return null;
+}
+
+export function normalizeWidget(widget: any, props: WidgetProps) {
+    if (props.fixedSize !== undefined) {
+        widget.setAttribute("w-fixed-size", props.fixedSize);
+    }
+
+    if (props.padding !== undefined) {
+        widget.setAttribute("w-padding", props.padding);
+    }
+
+    if (props.type !== undefined) {
+        widget.setAttribute("w-type", props.type);
+    }
+
+    if (props.hidden !== undefined) {
+        widget.setAttribute("w-hidden", props.hidden);
+    }
+
+    if (props.classNames !== undefined) {
+        widget.setAttribute("w-classes", props.classNames);
+    }
+
+    if (props.orientation !== undefined) {
+        widget.setAttribute("w-orientation", props.orientation);
+    }
+
+    return widget;
+}

package/src/ui/widget.collection.ts

@@ -1,19 +1,71 @@
-import { IWidget } from "../interfaces/widget.interface";
+import WApplication from "src/core/application.core";
+import { IWidget, WUICallback } from "../interfaces/widget.interface";
 
 declare global {
     interface Window {
+        app: WApplication | undefined;
         w: Map<string, IWidget>;
+        widgetConnections: Map<string, WUICallback>;
     }
 
     var w: Map<string, IWidget>;
+    var app: WApplication | undefined;
+    var widgetConnections: Map<string, WUICallback>;
+    var widgetCustomConnections: Map<string, WUICallback>;
 }
 
 export const initWidgetCollection = () => {
-    
-    if(!window.w) {
+    if (!window.w) {
         window.w = new Map<string, IWidget>();
         w = window.w;
     }
-        
-}
 
+    initWidgetConnections();
+};
+
+export const initWidgetConnections = () => {
+    if (!window.widgetConnections) {
+        window.widgetConnections = new Map<string, WUICallback>();
+    }
+
+    if (!window.widgetCustomConnections) {
+        window.widgetCustomConnections = new Map<string, WUICallback>();
+    }
+};
+
+export const addNewWidget = (id: string, widget: IWidget) => {
+    initWidgetCollection();
+    if (!w.get(id)) w.set(id, widget);
+    setTimeout(() => {
+        run("widget-added-" + id);
+        runCustom("widget-custom-added-" + id);
+    });
+};
+
+export const connectWidget = (id: string, callback: WUICallback) => {
+    initWidgetConnections();
+    widgetConnections.set(id, callback);
+};
+
+export const connectCustomWidget = (id: string, callback: WUICallback) => {
+    initWidgetConnections();
+    widgetCustomConnections.set(id, callback);
+};
+
+export const run = (eventId: string) => {
+    for (const [key, value] of widgetConnections.entries()) {
+        if (key == eventId) {
+            value.then(new Event(eventId), null);
+        }
+    }
+    widgetConnections.delete(eventId);
+};
+
+export const runCustom = (eventId: string) => {
+    for (const [key, value] of widgetCustomConnections.entries()) {
+        if (key == eventId) {
+            value.then(new Event(eventId), null);
+        }
+    }
+    widgetCustomConnections.delete(eventId);
+};

package/src/ui/widget.ui.ts

@@ -1,5 +1,8 @@
+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";
+import { addNewWidget, connectWidget } from "./widget.collection";
 
 export enum WidgetTypes {
     FILL = 1,
@@ -42,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;
 
@@ -141,14 +148,7 @@ export class Widget implements IWidget {
 
         this.getMaxZIndex();
 
-        window.w.set(this.id, this);
-    }
-
-    public dispose(): void {
-        this.removeAllChilds();
-        const body = this.getBody();
-        const parent = body.parentNode;
-        parent?.removeChild(body);
+        addNewWidget(this.id, this);
     }
 
     public run(eventId: WUIEvent): void {
@@ -294,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 = "";
@@ -306,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");
             }
         }
 
@@ -367,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);
     }
 
@@ -601,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();
@@ -608,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.
      *
@@ -643,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();
@@ -763,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);
+            }
+        });
     }
 
     /**
@@ -792,7 +829,7 @@ export class Widget implements IWidget {
         this.setVisible(!this.visible);
     }
 
-    renderHTML(content: any): HTMLElement {
+    public renderHTML(content: any): HTMLElement {
         this.body.appendChild(content);
         return content as HTMLElement;
     }
@@ -813,15 +850,15 @@ export class Widget implements IWidget {
         return maxZindex;
     }
 
-    setZIndex(zIndex: number): void {
+    public setZIndex(zIndex: number): void {
         this.getBody().style.zIndex = `${zIndex}`;
     }
 
-    raisteTop(): void {
+    public raisteTop(): void {
         this.setZIndex(this.getMaxZIndex() + 1);
     }
 
-    raiseBottom(): void {
+    public raiseBottom(): void {
         this.setZIndex(0);
     }
 
@@ -831,7 +868,7 @@ export class Widget implements IWidget {
      * @param {IWidget} guest - The widget to attach.
      * @return {void} This function does not return anything.
      */
-    attachWidget(guest: IWidget): void {
+    public attachWidget(guest: IWidget): void {
         this.removeAllChilds();
         this.addChild(guest);
         guest.setParent(this);
@@ -845,7 +882,7 @@ export class Widget implements IWidget {
      *
      * @return {void} No return value.
      */
-    removeAllChilds(): void {
+    public removeAllChilds(): void {
         while (this.getBody().childNodes.length > 0) {
             const child = this.getBody().firstChild;
             if (child) this.getBody().removeChild(child);
@@ -854,12 +891,127 @@ export class Widget implements IWidget {
         this.childs = [];
     }
 
-    free(): void {
+    public free(): void {
         if (this.childs) {
             for (const child of this.childs) {
                 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 {
+        this.removeAllChilds();
+        const body = this.getBody();
+        const parent = body.parentNode;
+        parent?.removeChild(body);
+    }
+}
+
+export function getOnlyEventProps(props: WidgetProps): WidgetEventProps {
+    const eventProps = {
+        onClick: props.onClick,
+        onDrag: props.onDrag,
+        onResize: props.onResize,
+        onMouseDown: props.onMouseDown,
+        onMouseUp: props.onMouseUp,
+        onMouseMove: props.onMouseMove,
+        onMouseOut: props.onMouseOut,
+        onMouseLeave: props.onMouseLeave,
+        onWheel: props.onWheel,
+        onRender: props.onRender,
+    };
+
+    return eventProps;
+}
+
+export function connectWidgetCallback(
+    id: string | null | undefined,
+    props: WidgetEventProps
+): void {
+    if (!id) return;
+    connectWidget("widget-added-" + id, {
+        event: "widget-load",
+        then: (_e, _w) => {
+            const widget = w.get(id) as Widget;
+
+            if (widget) {
+                widget.subscribe({
+                    event: "click",
+                    then: (_e, _w) => {
+                        props.onClick ? props.onClick({}) : null;
+                    },
+                });
+
+                widget.subscribe({
+                    event: "drag",
+                    then: (_e, _w) => {
+                        props.onDrag ? props.onDrag({}) : null;
+                    },
+                });
+
+                widget.subscribe({
+                    event: "resize",
+                    then: (_e, _w) => {
+                        props.onResize ? props.onResize({}) : null;
+                    },
+                });
+
+                widget.subscribe({
+                    event: "mousedown",
+                    then: (_e, _w) => {
+                        props.onMouseDown ? props.onMouseDown({}) : null;
+                    },
+                });
+
+                widget.subscribe({
+                    event: "mouseup",
+                    then: (_e, _w) => {
+                        props.onMouseUp ? props.onMouseUp({}) : null;
+                    },
+                });
+
+                widget.subscribe({
+                    event: "mousemove",
+                    then: (_e, _w) => {
+                        props.onMouseMove ? props.onMouseMove({}) : null;
+                    },
+                });
+
+                widget.subscribe({
+                    event: "mouseout",
+                    then: (_e, _w) => {
+                        props.onMouseOut ? props.onMouseOut({}) : null;
+                    },
+                });
+
+                widget.subscribe({
+                    event: "mouseleave",
+                    then: (_e, _w) => {
+                        props.onMouseLeave ? props.onMouseLeave({}) : null;
+                    },
+                });
+
+                widget.subscribe({
+                    event: "wheel",
+                    then: (_e, _w) => {
+                        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;
-    }
-}