cedro 0.1.7 → 0.1.9

package/src/ui/widget.builder.ts

@@ -0,0 +1,159 @@
+import { UID } from "../core/uid";
+import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+import { createTextbox } from "./textbox.ui";
+import { createButton } from "./button.ui";
+import { addNewWidget } from "./widget.collection";
+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";
+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";
+
+export type WidgetEventProps = {
+    onClick?: () => {} | void;
+    onResize?: () => {} | void;
+    onMouseDown?: () => {} | void;
+    onMouseUp?: () => {} | void;
+    onMouseMove?: () => {} | void;
+    onMouseOut?: () => {} | void;
+    onMouseLeave?: () => {} | void;
+    onWheel?: () => {} | void;
+    onDrag?: () => {} | void;
+};
+
+export type WidgetProps = {
+    id: string;
+    type?: WidgetTypes | null;
+    padding?: number | null;
+    classNames?: string | null;
+    fixedSize?: number | null;
+    orientation?: OrientationTypes | 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"),
+        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 (content.getAttribute("w-textbox")) {
+        widget = createTextbox(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-label")) {
+        widget = createLabel(widgetProps.id, content, parent);
+    } else if (content.getAttribute("w-image")) {
+        widget = createImage(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-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 {
+        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 (
+            widgetProps.orientation &&
+            !(widget instanceof VPanel) &&
+            !(widget instanceof HPanel) &&
+            !(widget instanceof Tabs)
+        ) {
+            if (widgetProps.orientation === "vertical") {
+                widget.setAlign(WidgetAlignTypes.VERTICAL);
+            } else {
+                widget.setAlign(WidgetAlignTypes.HORIZONTAL);
+            }
+        }
+        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);
+            }
+        }
+
+        addNewWidget(widgetProps.id, widget);
+
+        return widget;
+    }
+
+    return null;
+}

package/src/ui/widget.collection.ts

@@ -1,19 +1,49 @@
-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>;
 }
 
 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>();
+    }
+};
+
+export const addNewWidget = (id: string, widget: IWidget) => {
+    initWidgetCollection();
+    w.set(id, widget);
+    run("widget-added-" + id);
+};
+
+export const connectWidget = (id: string, callback: WUICallback) => {
+    initWidgetConnections();
+    widgetConnections.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);
+};

package/src/ui/widget.ui.ts

@@ -1,5 +1,7 @@
 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,
@@ -141,14 +143,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 {
@@ -792,7 +787,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 +808,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 +826,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 +840,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,7 +849,7 @@ export class Widget implements IWidget {
         this.childs = [];
     }
 
-    free(): void {
+    public free(): void {
         if (this.childs) {
             for (const child of this.childs) {
                 child.free();
@@ -862,4 +857,101 @@ export class Widget implements IWidget {
         }
         window.w.delete(this.id);
     }
+
+    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,
+    };
+
+    return eventProps;
+}
+
+export function connectWidgetCallback(id: string, props: WidgetEventProps): void {
+    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;
+                    },
+                });
+            }
+        },
+    });
 }

package/src/ui/checkbox.ui.ts

@@ -1,8 +0,0 @@
-import { ToggleButton } from "./toggle.ui";
-import { Widget } from "./widget.ui";
-
-export class Checkbox extends ToggleButton {
-    constructor(id: string, text: string = "", parent: Widget | null = null) {
-        super(id, text, "check_box_outline_blank", "check_box_outlined", parent);
-    }
-}

package/src/ui/container.ui.ts

@@ -1,33 +0,0 @@
-import { OrientationTypes } from "src/types/orientation.type";
-import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
-import { UID } from "../core/uid";
-
-export type ContainerParams = {
-    orientation?: OrientationTypes;
-    parent?: Widget | null;
-    size?: number | null;
-};
-
-export class Container extends Widget {
-    constructor(params: ContainerParams) {
-        const { orientation = "horizontal", parent = null, size = null } = params;
-
-        super(UID(), "div", parent);
-
-        if (orientation === "horizontal") {
-            this.setAlign(WidgetAlignTypes.HORIZONTAL);
-        } else {
-            this.setAlign(WidgetAlignTypes.VERTICAL);
-        }
-
-        if (size !== null) {
-            this.setFixedSize(size);
-        }
-
-        this.setType(WidgetTypes.FILL);
-    }
-}
-
-export function Spacer(): Container {
-    return new Container({});
-}

package/src/ui/image.ui.ts

@@ -1,49 +0,0 @@
-import "./styles/image.css";
-import { Widget, WidgetTypes } from "./widget.ui";
-
-export class Image extends Widget {
-    imageContainer: Widget;
-    image: Widget;
-    constructor(id: string, src: string = "", parent: Widget | null = null) {
-        super(id, "div", parent);
-
-        this.imageContainer = new Widget(id + ".imageContainer", "div", this);
-        this.imageContainer.addClass("WUIImageContainer");
-
-        this.image = new Widget(id + ".image", "img", this.imageContainer);
-        this.image.setType(WidgetTypes.CUSTOM);
-        this.image.getBody().setAttribute("src", src);
-    }
-
-    public render(): void {
-        super.render();
-
-        this.imageContainer.setX(0);
-        this.imageContainer.setY(0);
-        this.imageContainer.setWH(this.getW(), this.getH());
-    }
-
-    public fillWidth(): void {
-        this.image.addClass("WUIImageFillWidth");
-    }
-
-    public fillHeight(): void {
-        this.image.addClass("WUIImageFillHeight");
-    }
-
-    public setAlternateText(text: string): void {
-        this.image.getBody().setAttribute("alt", text);
-    }
-
-    public setImageUrl(url: string): void {
-        this.image.getBody().setAttribute("src", url);
-    }
-
-    public getImageUrl(): string | null {
-        return this.image.getBody().getAttribute("src");
-    }
-
-    public getAlternateText(): string | null {
-        return this.image.getBody().getAttribute("alt");
-    }
-}

package/src/ui/label.ui.ts

@@ -1,57 +0,0 @@
-import { Colors } from "./colors.ui";
-import { Widget } from "./widget.ui";
-
-export type LabelVariants = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
-
-export class Label extends Widget {
-    variant: LabelVariants;
-    color: Colors;
-    text: string;
-
-    constructor(id: string, variant: LabelVariants = "span", parent: Widget | null = null) {
-        super(id, variant, parent);
-
-        this.variant = variant;
-        this.color = "primary";
-        this.text = "";
-
-        this.init();
-    }
-
-    public init(): void {
-        super.init();
-    }
-
-    public centerV(): void {
-        this.getBody().style.lineHeight = this.getH() + "px";
-    }
-
-    public centerH(): void {
-        this.getBody().style.textAlign = "center";
-    }
-
-    public setText(text: string): void {
-        this.text = text;
-        this.body.innerHTML = text;
-    }
-
-    public setVariant(variant: LabelVariants = "span"): void {
-        this.variant = variant;
-    }
-
-    public setColor(color: Colors = "primary"): void {
-        this.color = color;
-    }
-
-    public getVariant(): LabelVariants {
-        return this.variant;
-    }
-
-    public getColor(): Colors {
-        return this.color;
-    }
-
-    public getText(): string {
-        return this.text;
-    }
-}

package/src/ui/progressbar.ui.ts

@@ -1,74 +0,0 @@
-import { Label } from "./label.ui";
-import "./styles/progressbar.css";
-import { Widget } from "./widget.ui";
-
-const PROGRESS_BAR_HEIGHT = 40;
-
-//icono para el progress bar interactivo humidity_high
-
-export class ProgressBar extends Widget {
-    private value: number;
-    private paddingBar: number;
-
-    private bar: Widget;
-    private lblValue: Label;
-
-    public constructor(id: string, parent: Widget | null = null) {
-        super(id, "div", parent);
-
-        this.setH(PROGRESS_BAR_HEIGHT);
-
-        this.paddingBar = 0;
-
-        this.bar = new Widget(id + ".bar", "div", this);
-        this.bar.addClass("WUIProgressBarBar");
-
-        this.value = 0;
-        this.addClass("WUIProgressBarContainer");
-
-        this.lblValue = new Label(id + ".value", "span", this);
-        this.lblValue.setText(this.value + "%");
-
-        this.lblValue.addClass("WUIProgressBarLabel");
-    }
-
-    public setPaddingBar(p: number): void {
-        this.paddingBar = p;
-    }
-
-    public hideLabel(): void {
-        this.lblValue.setVisible(false);
-    }
-
-    public displayLabel(): void {
-        this.lblValue.setVisible(true);
-    }
-
-    public render(): void {
-        super.render();
-
-        const padding = this.paddingBar;
-        const width = this.getW() - padding;
-        const height = this.getH();
-        const widthBar = width * (this.value / 100);
-
-        this.lblValue.setX(width / 2 - this.lblValue.getW() / 2);
-        this.lblValue.setY(height / 2 - this.lblValue.getH() / 2);
-        this.lblValue.raisteTop();
-
-        this.bar.setX(padding);
-        this.bar.setY(padding);
-        this.bar.setW(widthBar);
-        this.bar.setH(height - padding * 2);
-    }
-
-    public setValue(value: number): void {
-        this.value = value;
-        this.lblValue.setText(this.value + "%");
-        this.render();
-    }
-
-    public getValue(): number {
-        return this.value;
-    }
-}

package/src/ui/radiobutton.ts

@@ -1,8 +0,0 @@
-import { ToggleButton } from "./toggle.ui";
-import { Widget } from "./widget.ui";
-
-export class RadioButton extends ToggleButton {
-    constructor(id: string, text: string = "", parent: Widget | null = null) {
-        super(id, text, "radio_button_unchecked", "radio_button_checked", parent);
-    }
-}

package/src/ui/switch.ui.ts

@@ -1,7 +0,0 @@
-import { ToggleButton } from "./toggle.ui";
-import { Widget } from "./widget.ui";
-export class Switch extends ToggleButton {
-    constructor(id: string, text: string = "", parent: Widget | null = null) {
-        super(id, text, "toggle_off", "toggle_on", parent);
-    }
-}