Merge pull request #53 from NuiCpp/devel

Resizeable utility completed.

Author: 5cript

nui/include/nui/frontend/extensions/make_resizeable.hpp

@@ -0,0 +1,14 @@
+#pragma once
+
+#include <nui/frontend/val.hpp>
+
+namespace Nui
+{
+    enum class ResizeableEdge
+    {
+        Right,
+        Bottom
+    };
+
+    void makeResizeable(Nui::val const& element, ResizeableEdge edge = ResizeableEdge::Right);
+}

nui/js/make_resizeable.js

@@ -0,0 +1,61 @@
+const makeResizeable = (element: HTMLElement, borderSize: number, edge?: "right" | "bottom") => {
+    edge = edge || "right";
+
+    let pos: number;
+    const resizer = (() => {
+        if (edge === "right") {
+            return (x: number, y: number, w: number, h: number) => {
+                const dx = -(pos - x);
+                pos = x;
+                element.style.width = (w + dx) + "px";       
+            };
+        }
+        else if (edge === "bottom") {
+            return (x: number, y: number, w: number, h: number) => {
+                const dy = -(pos - y);
+                pos = y;
+                element.style.height = (h + dy) + "px";
+            };
+        }
+        else {
+            throw new Error("Invalid edge");
+        }
+    })();
+
+    const resize = (e: MouseEvent) => {
+        const w = parseInt(getComputedStyle(element, '').width);
+        const h = parseInt(getComputedStyle(element, '').height);
+
+        resizer(e.x, e.y, w, h);
+    }
+
+    element.addEventListener("mousedown", (e: MouseEvent) => {
+        if (!(e.target instanceof Element))
+            return;
+
+        const w = parseInt(getComputedStyle(e.target as Element, '').width);
+        const h = parseInt(getComputedStyle(e.target as Element, '').height);
+
+        if (edge == "right") {
+            if (w - e.x < borderSize + 1 /*rounding tolerance*/) {
+                pos = e.x;
+                document.addEventListener("mousemove", resize, false);
+            }
+        }
+        else if (edge == "bottom") {
+            if (h - e.y < borderSize + 1 /*rounding tolerance*/) {
+                pos = e.y;
+                document.addEventListener("mousemove", resize, false);
+            }
+        }
+    }, false);
+
+    document.addEventListener("mouseup", () => {
+        document.removeEventListener("mousemove", resize, false);
+    }, false);
+}
+
+!('nui_lib' in globalThis) && (globalThis.nui_lib = {});
+globalThis.nui_lib.makeResizeable = makeResizeable;
+
+export default makeResizeable;

nui/js/make_resizeable.ts

@@ -0,0 +1,12 @@
+#include <nui/frontend/extensions/make_resizeable.hpp>
+
+namespace Nui
+{
+    void makeResizeable(Nui::val const& element, ResizeableEdge edge)
+    {
+        Nui::val::global("nui_lib")["makeResizeable"](
+            element,
+            Nui::val{5},
+            Nui::val{edge == ResizeableEdge::Right ? std::string{"right"} : std::string{"bottom"}});
+    }
+}

nui/src/nui/frontend/extensions/make_resizeable.cpp

@@ -6,6 +6,7 @@ set(NUI_FRONTEND_SOURCES_RELATIVE
     components/dialog.cpp
     dom/dom.cpp
     event_system/event_context.cpp
+    extensions/make_resizeable.cpp
     filesystem/file_dialog.cpp
     filesystem/file.cpp
     utility/fragment_listener.cpp