cedro 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "cedro",
-    "version": "0.1.3",
+    "version": "0.1.4",
     "type": "module",
     "devDependencies": {
         "@types/node": "^20.4.4",

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/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

@@ -7,7 +7,23 @@ 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 { Button, Widget, Dialog, Icon, IconButton, Label, Menu, Select, Textbox, Toolbar, createWidget };
+export {
+    Button,
+    Widget,
+    Dialog,
+    Icon,
+    IconButton,
+    Label,
+    Menu,
+    Select,
+    Tabs,
+    Textbox,
+    Toolbar,
+    DataGrid,
+    createWidget,
+};

package/src/ui/scroll.ui.ts

@@ -0,0 +1,185 @@
+import { OrientationTypes } from "src/types/orientation.type";
+import "./styles/scroll.css";
+import { Widget, WidgetTypes } from "./widget.ui";
+import { Draggable } from "./draggable.ui";
+
+const SCROLL_SIZE = 10;
+
+type ScrollData = {
+    scrollHeight: number;
+    areaHeight: number;
+    scrollBarHeight: number;
+    scrollWidth: number;
+    areaWidth: number;
+    scrollBarWidth: number;
+    scrollWidt: number;
+    availablePositionSize: number;
+    ratioScroll: number;
+    position: number;
+    scrollPositionY: number;
+};
+
+export class Scroll extends Widget {
+    contentArea: Widget;
+    orientation: OrientationTypes;
+
+    drag: Draggable;
+
+    constructor(id: string, contentArea: Widget, orientation: OrientationTypes = "vertical") {
+        super(id, "div", contentArea.getParent());
+
+        this.contentArea = contentArea;
+        this.orientation = orientation;
+
+        this.setType(WidgetTypes.CUSTOM);
+
+        this.getBody().style.overflow = "hidden";
+        this.getBody().style.position = "absolute";
+
+        this.addClass("WUIScrollbar");
+
+        this.drag = new Draggable(this, orientation);
+
+        this.contentArea.subscribe({
+            event: "wheel",
+            then: (e, _w) => {
+                const wheel = e as WheelEvent;
+                this.contentArea.getBody().scrollBy(0, wheel.deltaY);
+                this.render();
+            },
+        });
+
+        this.subscribe({
+            event: "drag",
+            then: (_e, _w) => {
+                this.updateScrollPositionByScrollbar();
+            },
+        });
+    }
+
+    private getScrollData(): ScrollData {
+        let returnData: ScrollData = {
+            scrollHeight: 0,
+            areaHeight: 0,
+            scrollBarHeight: 0,
+            scrollWidth: 0,
+            areaWidth: 0,
+            scrollBarWidth: 0,
+            scrollWidt: 0,
+            availablePositionSize: 0,
+            ratioScroll: 0,
+            position: 0,
+            scrollPositionY: 0,
+        };
+
+        if (this.orientation === "vertical") {
+            returnData.scrollHeight = this.contentArea.getBody().scrollHeight;
+            returnData.areaHeight = this.contentArea.getH();
+            returnData.scrollBarHeight =
+                returnData.areaHeight * (returnData.areaHeight / returnData.scrollHeight);
+            returnData.availablePositionSize =
+                returnData.areaHeight - returnData.scrollBarHeight - 1;
+            returnData.ratioScroll =
+                this.contentArea.getBody().scrollTop /
+                (returnData.areaHeight - returnData.scrollBarHeight);
+            returnData.position = returnData.availablePositionSize * returnData.ratioScroll;
+
+            if (returnData.scrollBarHeight >= returnData.areaHeight) {
+                returnData.scrollBarHeight = returnData.areaHeight;
+            }
+        } else if (this.orientation === "horizontal") {
+            returnData.scrollWidth = this.contentArea.getBody().scrollWidth;
+            returnData.areaWidth = this.contentArea.getW();
+            returnData.scrollBarWidth =
+                returnData.areaWidth * (returnData.areaWidth / returnData.scrollWidth);
+            returnData.availablePositionSize = returnData.areaWidth - returnData.scrollBarWidth - 1;
+            returnData.ratioScroll =
+                this.contentArea.getBody().scrollLeft /
+                (returnData.areaWidth - returnData.scrollBarWidth);
+            returnData.position = returnData.availablePositionSize * returnData.ratioScroll;
+            returnData.scrollPositionY = this.contentArea.getH() + this.contentArea.getY();
+            if (returnData.scrollBarWidth >= returnData.areaWidth) {
+                returnData.scrollBarWidth = returnData.areaWidth;
+            }
+        }
+        return returnData;
+    }
+
+    private updateScrollPositionByScrollbar(): void {
+        const scrollData = this.getScrollData();
+
+        if (this.orientation === "vertical") {
+            const recorrido = scrollData.scrollHeight - scrollData.areaHeight;
+            const maxY = this.drag.maxY ? this.drag.maxY : 1;
+            const ratio = (this.getY() - this.contentArea.getY()) / maxY;
+            this.contentArea.getBody().scrollTop = recorrido * ratio;
+        } else if (this.orientation === "horizontal") {
+            const recorrido = scrollData.scrollWidth - scrollData.areaWidth;
+            const maxX = this.drag.maxX ? this.drag.maxX : 1;
+            const ratio = (this.getX() - this.contentArea.getX()) / maxX;
+            this.contentArea.getBody().scrollLeft = recorrido * ratio;
+        }
+    }
+
+    public render(): void {
+        super.render();
+
+        const scrollData = this.getScrollData();
+
+        if (this.orientation === "vertical") {
+            if (scrollData.areaHeight < scrollData.scrollHeight) {
+                this.setVisible(true);
+            } else {
+                this.setVisible(false);
+                return;
+            }
+
+            this.setX(this.contentArea.getW() - SCROLL_SIZE - 1);
+            this.setY(1 + this.contentArea.getY() + scrollData.position);
+            this.setH(scrollData.scrollBarHeight);
+            this.setW(SCROLL_SIZE);
+            this.raisteTop();
+
+            const minY = 1 + this.contentArea.getY();
+            const maxY = this.contentArea.getY() + scrollData.availablePositionSize;
+
+            this.drag.setMinY(minY);
+            this.drag.setMaxY(maxY);
+
+            if (this.getY() > maxY) {
+                this.setY(maxY);
+            }
+
+            if (this.getY() < minY) {
+                this.setY(minY);
+            }
+        } else if (this.orientation === "horizontal") {
+            if (scrollData.areaWidth < scrollData.scrollWidth) {
+                this.setVisible(true);
+            } else {
+                this.setVisible(false);
+                return;
+            }
+
+            this.setX(1 + this.contentArea.getX() + scrollData.position);
+            this.setY(scrollData.scrollPositionY - SCROLL_SIZE - 1);
+            this.setW(scrollData.scrollBarWidth);
+            this.setH(SCROLL_SIZE);
+            this.raisteTop();
+
+            const minX = 1 + this.contentArea.getX();
+            const maxX = this.contentArea.getX() + scrollData.availablePositionSize;
+
+            this.drag.setMinX(minX);
+            this.drag.setMaxX(maxX);
+
+            if (this.getX() > maxX) {
+                this.setX(maxX);
+            }
+
+            if (this.getX() < minX) {
+                this.setX(minX);
+            }
+        }
+    }
+}

package/src/ui/styles/datagrid.css

@@ -0,0 +1,10 @@
+.WUIDataGrid-Header {
+    border-bottom: solid 1px var(--palette-primary-text-light);
+}
+
+.WUIDataGrid-HeaderLabel {
+    border-right: solid 1px var(--palette-primary-text-light);
+    /*border-bottom: solid 1px var(--palette-primary-text-light);*/
+    padding-left: 5px;
+    font-weight: bold;
+}

package/src/ui/styles/draggable.css

@@ -0,0 +1,9 @@
+.WUIDraggableBackground {
+    background-color: rgba(0, 0, 0, 0.01);
+    opacity: 0.1;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+}

package/src/ui/styles/scroll.css

@@ -0,0 +1,4 @@
+.WUIScrollbar {
+    background-color: var(--palette-action-hover);
+    border-radius: 5px;
+}

package/src/ui/styles/tabs.css

@@ -0,0 +1,33 @@
+.WUITabControl {
+    border-top: none !important;
+    border-left: none !important;
+    border-right: none !important;
+    border-bottom: none !important;
+    background-color: var(--palette-background-default);
+    box-sizing: border-box;
+    font-weight: normal;
+    text-align: center;
+    cursor: default;
+    padding-left: 15px;
+    padding-right: 15px;
+    border-radius: 0px !important;
+}
+
+.WUITabControlActive {
+    border-top: none !important;
+    border-left: none !important;
+    border-right: none !important;
+    border-bottom: solid 2px var(--palette-primary-dark) !important;
+    background-color: var(--palette-divider);
+    box-sizing: border-box;
+    font-weight: bold;
+    text-align: center;
+    cursor: default;
+    padding-left: 15px;
+    padding-right: 15px;
+    border-radius: 0px !important;
+}
+
+.WUITabContainer {
+    border-top: solid 1px var(--palette-divider);
+}

package/src/ui/tabs.ui.ts

@@ -0,0 +1,131 @@
+import "./styles/tabs.css";
+
+import { OrientationTypes } from "src/types/orientation.type";
+import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+import { Toolbar } from "./toolbar.ui";
+import { Label } from "./label.ui";
+import { IconButton } from "./IconButton.ui";
+
+const TAB_HEADER_HEIGHT = 40;
+
+export type TabItem = {
+    title: string;
+    content: Widget;
+};
+
+class TabControl extends Label {
+    constructor(id: string, parent: Widget | null = null, text: string) {
+        super(id, "span", parent);
+        this.setText(text);
+        this.addClass("WUITabControl");
+        this.getBody().style.lineHeight = TAB_HEADER_HEIGHT + "px";
+    }
+}
+export class Tabs extends Widget {
+    orientation: OrientationTypes;
+
+    header: Widget;
+    content: Widget;
+
+    itemControls: Toolbar;
+
+    items: Map<string, TabItem>;
+
+    constructor(
+        id: string,
+        parent: Widget | null = null,
+        orientation: OrientationTypes = "horizontal"
+    ) {
+        super(id, "div", parent);
+        this.orientation = orientation;
+
+        this.header = new Widget(id + ".header", "div");
+        this.header.setType(WidgetTypes.FILL);
+        this.header.setFixedSize(TAB_HEADER_HEIGHT);
+
+        this.content = new Widget(id + ".content", "div");
+        this.content.setType(WidgetTypes.FILL);
+        this.content.addClass("WUITabContainer");
+
+        this.setType(WidgetTypes.FILL);
+
+        if (this.orientation === "horizontal") {
+            this.setAlign(WidgetAlignTypes.VERTICAL);
+        } else {
+            this.setAlign(WidgetAlignTypes.HORIZONTAL);
+        }
+
+        this.addChild(this.header);
+        this.addChild(this.content);
+
+        this.items = new Map<string, TabItem>();
+
+        this.itemControls = new Toolbar(id + ".itemControls", this.header);
+    }
+
+    public setOrientation(orientation: OrientationTypes) {
+        this.orientation = orientation;
+    }
+
+    public addTab(id: string, title: string, content: Widget) {
+        this.items.set(id, { title, content });
+
+        const itemControl = new TabControl(id + ".itemControl", null, title);
+        //itemControl.setW(100);
+        itemControl.setH(TAB_HEADER_HEIGHT);
+
+        itemControl.subscribe({
+            event: "click",
+            then: (_e, _w) => {
+                this.setTab(id);
+            },
+        });
+
+        this.itemControls.addItem(id, itemControl);
+    }
+
+    public addIconTab(id: string, icon: string, content: Widget) {
+        this.items.set(id, { title: icon, content });
+
+        const itemControl = new IconButton(id + ".itemControl", icon);
+        itemControl.setW(40);
+        itemControl.setH(TAB_HEADER_HEIGHT);
+
+        itemControl.subscribe({
+            event: "click",
+            then: (_e, _w) => {
+                this.setTab(id);
+            },
+        });
+
+        this.itemControls.addItem(id, itemControl);
+    }
+
+    public setTab(id: string) {
+        this.content.removeAllChilds();
+        const actualTab = this.items.get(id);
+
+        for (const itemId of this.items.keys()) {
+            if (itemId != id) {
+                this.items.get(itemId)?.content.setVisible(false);
+                const ctrlTab = window.w.get(itemId + ".itemControl");
+                if (ctrlTab) {
+                    ctrlTab.deleteClass("WUITabControlActive");
+                    ctrlTab.addClass("WUITabControl");
+                }
+            } else {
+                const ctrlTab = window.w.get(itemId + ".itemControl");
+                if (ctrlTab) {
+                    ctrlTab.addClass("WUITabControlActive");
+                }
+            }
+        }
+
+        if (actualTab) {
+            this.items.get(id)?.content.setVisible(true);
+            this.content.addChild(actualTab.content);
+        }
+
+        this.render();
+    }
+}

package/src/ui/toolbar.ui.ts

@@ -1,13 +1,13 @@
 import { IWidget } from "src/interfaces/widget.interface";
 import { Widget, WidgetTypes } from "./widget.ui";
 import { IconButton } from "./IconButton.ui";
+import { OrientationTypes } from "src/types/orientation.type";
 
-export type ToolbarOrientationTypes = "horizontal" | "vertical";
 const TOOLBAR_SIZE = 40;
 const TOOLBAR_BUTTON_SIZE = 40;
 
 export class Toolbar extends Widget {
-    orientation: ToolbarOrientationTypes;
+    orientation: OrientationTypes;
     items: Map<string, IWidget>;
     size: number; //Indica el alto o ancho de la toolbar.
 
@@ -15,7 +15,7 @@ export class Toolbar extends Widget {
     btnLeft: IconButton;
     btnRight: IconButton;
 
-    constructor(id: string, parent: Widget | null = null, orientationType: ToolbarOrientationTypes = "horizontal") {
+    constructor(id: string, parent: Widget | null = null, orientationType: OrientationTypes = "horizontal") {
         super(id, "div", parent);
         this.orientation = orientationType;
         this.size = TOOLBAR_SIZE;
@@ -86,7 +86,7 @@ export class Toolbar extends Widget {
      * @param {ToolbarOrientationTypes} orientationType - the type of orientation to set
      * @return {void}
      */
-    public setOrientation(orientationType: ToolbarOrientationTypes, size: number = TOOLBAR_SIZE): void {
+    public setOrientation(orientationType: OrientationTypes, size: number = TOOLBAR_SIZE): void {
         this.orientation = orientationType;
         this.size = size;
     }

package/src/ui/widget.ui.ts

@@ -113,6 +113,30 @@ export class Widget implements IWidget {
             });
         });
 
+        this.body.addEventListener("wheel", (e) => {
+            this.subscribers.forEach((callback) => {
+                if (callback.event == "wheel") {
+                    callback.then(e, this);
+                }
+            });
+        });
+
+        this.body.addEventListener("mouseout", (e) => {
+            this.subscribers.forEach((callback) => {
+                if (callback.event == "mouseout") {
+                    callback.then(e, this);
+                }
+            });
+        });
+
+        this.body.addEventListener("mouseleave", (e) => {
+            this.subscribers.forEach((callback) => {
+                if (callback.event == "mouseleave") {
+                    callback.then(e, this);
+                }
+            });
+        });
+
         this.init();
 
         this.getMaxZIndex();
@@ -120,8 +144,18 @@ export class Widget implements IWidget {
         window.w.set(this.id, this);
     }
 
+    public run(eventId: WUIEvent): void {
+        this.subscribers.forEach((callback) => {
+            if (callback.event == eventId) {
+                callback.then(new Event(eventId), this);
+            }
+        });
+    }
+
     public subscribe(cb: WUICallback) {
-        const randomId = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+        const randomId =
+            Math.random().toString(36).substring(2, 15) +
+            Math.random().toString(36).substring(2, 15);
 
         this.subscribers.set(`${randomId}.${cb.event}`, cb);
     }