cedro 0.1.4 → 0.1.6

package/src/ui/valuebar.ui.ts

@@ -0,0 +1,116 @@
+import "./styles/valuebar.css";
+import { OrientationTypes } from "src/types/orientation.type";
+import { Widget } from "./widget.ui";
+import { Draggable } from "./draggable.ui";
+
+export class ValueBar extends Widget {
+    orientation: OrientationTypes;
+    value: number;
+
+    containerBar: Widget;
+    bar: Widget;
+    handler: Widget;
+
+    draggable: Draggable;
+
+    constructor(
+        id: string,
+        orientation: OrientationTypes = "horizontal",
+        parent: Widget | null = null
+    ) {
+        super(id, "div", parent);
+
+        this.containerBar = new Widget(id + ".containerBar", "div", this);
+        this.bar = new Widget(id + ".bar", "div", this.containerBar);
+        this.handler = new Widget(id + ".handler", "div", this);
+
+        this.addClass("WUIValueBar");
+        this.containerBar.addClass("WUIValueBarContainer");
+        this.bar.addClass("WUIValueBarBar");
+        this.handler.addClass("WUIValueBarHandler");
+
+        this.draggable = new Draggable(this.handler, orientation);
+
+        this.handler.subscribe({
+            event: "drag",
+            then: (_e, _w) => {
+                this.updateValueFromHandlerPosition();
+            },
+        });
+
+        this.orientation = orientation;
+        this.value = 10;
+        this.handler.raisteTop();
+    }
+
+    public setValue(value: number): void {
+        this.value = value;
+        this.render();
+    }
+
+    public updateValueFromHandlerPosition(): void {
+        if (this.orientation === "horizontal") {
+            const maxX = this.draggable.maxX ? this.draggable.maxX : 1;
+            const ratio = this.handler.getX() / maxX;
+            this.value = Math.round(ratio * 100);
+        } else if (this.orientation === "vertical") {
+            const maxY = this.draggable.maxY ? this.draggable.maxY : 1;
+            const ratio = this.handler.getY() / maxY;
+            this.value = Math.round(ratio * 100);
+        }
+
+        this.render();
+    }
+
+    public render(): void {
+        super.render();
+
+        if (this.orientation === "horizontal") {
+            const handlerSize = 24;
+            const heightBar = 14;
+            const width = this.getW() - 3;
+            const height = this.getH();
+            const widthBar = width * (this.value / 100);
+
+            this.containerBar.setX(0);
+            this.containerBar.setY(height / 2 - heightBar / 2);
+            this.containerBar.setH(heightBar);
+            this.containerBar.setW(width);
+
+            this.bar.setX(0);
+            this.bar.setY(0);
+            this.bar.setW(widthBar);
+            this.bar.setH(heightBar - 4);
+
+            this.handler.setX(widthBar - handlerSize + 2);
+            this.handler.setY(height / 2 - handlerSize / 2);
+            this.handler.setWH(handlerSize, handlerSize);
+
+            this.draggable.setMinX(0);
+            this.draggable.setMaxX(width - handlerSize + 2);
+        } else if (this.orientation === "vertical") {
+            const handlerSize = 24;
+            const widthBar = 14;
+            const height = this.getH() - 3;
+            const width = this.getW();
+            const heightBar = height * (this.value / 100);
+
+            this.containerBar.setY(0);
+            this.containerBar.setX(width / 2 - widthBar / 2);
+            this.containerBar.setW(widthBar);
+            this.containerBar.setH(height);
+
+            this.bar.setX(0);
+            this.bar.setY(0);
+            this.bar.setH(heightBar);
+            this.bar.setW(widthBar - 4);
+
+            this.handler.setY(heightBar - handlerSize + 2);
+            this.handler.setX(width / 2 - handlerSize / 2);
+            this.handler.setWH(handlerSize, handlerSize);
+
+            this.draggable.setMinY(0);
+            this.draggable.setMaxY(height - handlerSize + 2);
+        }
+    }
+}

package/src/ui/vpanel.ui.ts

@@ -0,0 +1,128 @@
+import { Draggable } from "./draggable.ui";
+import "./styles/vpanel.css";
+import { Widget, WidgetAlignTypes, WidgetTypes } from "./widget.ui";
+
+const VPANEL_HANDLER_SIZE = 4;
+
+export class VPanel extends Widget {
+    topContent: Widget | null;
+    bottomContent: Widget | null;
+
+    topHeight: number | null;
+    bottomHeight: number | null;
+
+    handler: Widget;
+    draggable: Draggable;
+
+    constructor(id: string, parent: Widget | null = null) {
+        super(id, "div", parent);
+        this.setAlign(WidgetAlignTypes.VERTICAL);
+        this.setType(WidgetTypes.FILL);
+        //this.setPadding(VPANEL_HANDLER_SIZE);
+
+        this.handler = new Widget(id + ".handler", "div", null);
+        this.handler.addClass("WUIVPanelHandler");
+
+        this.draggable = new Draggable(this.handler, "vertical");
+        this.draggable.setDraggingClass("WUIVPanelDragging");
+        this.draggable.setBackgroundCursor("row-resize");
+
+        this.handler.subscribe({
+            event: "drag",
+            then: (_e, _w) => {
+                this.updateSizeFromHandlerPosition();
+            },
+        });
+
+        this.subscribe({
+            event: "mousemove",
+            then: (e, _w) => {
+                this.updateHandlerOpacity(e as MouseEvent);
+            },
+        });
+
+        this.topContent = null;
+        this.bottomContent = null;
+
+        this.topHeight = null;
+        this.bottomHeight = null;
+    }
+
+    private updateHandlerOpacity(e: MouseEvent): void {
+        const handlerY = this.handler.getY();
+        const mouseY = e.clientY;
+        const umbral = 100; //Distancia donde comienza a aparecer.
+        const minDistance = 20; //Distancia a la que toma 100 de opacidad
+        const distance = Math.abs(mouseY - handlerY);
+
+        if (distance < umbral && distance > minDistance) {
+            const ratio = 1 - distance / umbral;
+            this.handler.getBody().style.opacity = ratio.toString();
+        } else if (distance < minDistance) {
+            this.handler.getBody().style.opacity = "1";
+        } else {
+            this.handler.getBody().style.opacity = "0";
+        }
+    }
+
+    public setTop(content: Widget, fixHeight: number | null = null): void {
+        this.topContent = content;
+        this.topHeight = fixHeight;
+        if (fixHeight !== null) {
+            this.bottomHeight = null;
+            this.topContent.setFixedSize(fixHeight);
+        }
+        this.addChild(content);
+
+        const spacer = new Widget("spacer." + Date.now().toString(), "div", null);
+        spacer.setType(WidgetTypes.FILL);
+        spacer.setFixedSize(VPANEL_HANDLER_SIZE);
+        this.addChild(spacer);
+    }
+
+    public setBottom(content: Widget, fixHeight: number | null = null): void {
+        this.bottomContent = content;
+        this.bottomHeight = fixHeight;
+        if (fixHeight !== null) {
+            this.topHeight = null;
+            this.bottomContent.setFixedSize(fixHeight);
+        }
+        this.addChild(content);
+    }
+
+    private updateSizeFromHandlerPosition(): void {
+        if (this.topHeight !== null) {
+            const topY = this.topContent ? this.topContent.getY(true) : 0;
+            this.topHeight = this.handler.getY() - topY;
+        } else if (this.bottomHeight !== null) {
+            this.bottomHeight = this.getH() - this.handler.getY();
+        }
+
+        this.render();
+    }
+
+    public render(): void {
+        super.render();
+        this.handler.setH(VPANEL_HANDLER_SIZE);
+        this.handler.setW(this.getW());
+
+        if (this.topHeight !== null) {
+            const topY = this.topContent ? this.topContent.getY(true) : 0;
+            this.handler.setY(topY + this.topHeight);
+            this.topContent?.setFixedSize(this.topHeight);
+        } else if (this.bottomHeight !== null) {
+            const bottomY = this.bottomContent ? this.bottomContent.getY(true) : 0;
+            this.handler.setY(bottomY + this.bottomHeight);
+            this.bottomContent?.setFixedSize(this.bottomHeight);
+        } else {
+            if (this.topHeight === null) {
+                this.topHeight = this.getH() / 2 - VPANEL_HANDLER_SIZE / 2;
+            }
+            const topY = this.topContent ? this.topContent.getY(true) : 0;
+            this.handler.setY(topY + this.topHeight);
+            this.topContent?.setFixedSize(this.topHeight);
+        }
+
+        this.handler.setX(this.getX(true));
+    }
+}

package/src/ui/widget.ui.ts

@@ -144,6 +144,13 @@ export class Widget implements IWidget {
         window.w.set(this.id, this);
     }
 
+    public dispose(): void {
+        this.removeAllChilds();
+        const body = this.getBody();
+        const parent = body.parentNode;
+        parent?.removeChild(body);
+    }
+
     public run(eventId: WUIEvent): void {
         this.subscribers.forEach((callback) => {
             if (callback.event == eventId) {
@@ -259,7 +266,7 @@ export class Widget implements IWidget {
         });
     }
 
-    public setFixedSize(s: number): void {
+    public setFixedSize(s: number | null): void {
         this.fixedSize = s;
     }
 
@@ -439,7 +446,16 @@ export class Widget implements IWidget {
      *
      * @return {number} The value of the 'left' property.
      */
-    public getX(): number {
+    public getX(recursive: boolean = false): number {
+        if (!recursive) {
+            return this.left;
+        }
+
+        const parent = this.getParent();
+
+        if (parent) {
+            return this.left + parent.getX(true);
+        }
         return this.left;
     }
 
@@ -448,7 +464,16 @@ export class Widget implements IWidget {
      *
      * @return {number} The value of Y.
      */
-    public getY(): number {
+    public getY(recursive: boolean = false): number {
+        if (!recursive) {
+            return this.top;
+        }
+
+        const parent = this.getParent();
+
+        if (parent) {
+            return this.top + parent.getY(true);
+        }
         return this.top;
     }