@nu-art/floating-windows 0.400.7

package/_dispatchers/focus-window.d.ts

@@ -0,0 +1,5 @@
+import { ThunderDispatcher } from '@nu-art/thunderstorm-frontend/index';
+export interface FloatingWindows_FocusWindow {
+    __onFocusFloatingWindow: (windowKey: string) => void;
+}
+export declare const dispatcher_FloatingWindows_FocusWindow: ThunderDispatcher<FloatingWindows_FocusWindow, "__onFocusFloatingWindow", [windowKey: string], void>;

package/_dispatchers/focus-window.js

@@ -0,0 +1,2 @@
+import { ThunderDispatcher } from '@nu-art/thunderstorm-frontend/index';
+export const dispatcher_FloatingWindows_FocusWindow = new ThunderDispatcher('__onFocusFloatingWindow');

package/_dispatchers/models-updated.d.ts

@@ -0,0 +1,5 @@
+import { ThunderDispatcher } from '@nu-art/thunderstorm-frontend/index';
+export interface FloatingWindows_WindowsUpdated {
+    __onFloatingWindowsUpdated: VoidFunction;
+}
+export declare const dispatch_FloatingWindows_WindowsUpdated: ThunderDispatcher<FloatingWindows_WindowsUpdated, "__onFloatingWindowsUpdated", [], void>;

package/_dispatchers/models-updated.js

@@ -0,0 +1,2 @@
+import { ThunderDispatcher } from '@nu-art/thunderstorm-frontend/index';
+export const dispatch_FloatingWindows_WindowsUpdated = new ThunderDispatcher('__onFloatingWindowsUpdated');

package/_modules/ModuleFE_FloatingWindows.d.ts

@@ -0,0 +1,11 @@
+import { Module } from '@nu-art/ts-common';
+import { Model_FloatingWindow } from '../types.js';
+declare class ModuleFE_FloatingWindow_Class extends Module {
+    readonly windowModels: Model_FloatingWindow[];
+    window: {
+        add: (model: Model_FloatingWindow) => void;
+        remove: (key: string) => void;
+    };
+}
+export declare const ModuleFE_FloatingWindows: ModuleFE_FloatingWindow_Class;
+export {};

package/_modules/ModuleFE_FloatingWindows.js

@@ -0,0 +1,22 @@
+import { Module, removeFromArrayByIndex } from '@nu-art/ts-common';
+import { dispatcher_FloatingWindows_FocusWindow } from '../_dispatchers/focus-window.js';
+import { dispatch_FloatingWindows_WindowsUpdated } from '../_dispatchers/models-updated.js';
+class ModuleFE_FloatingWindow_Class extends Module {
+    windowModels = [];
+    window = {
+        add: (model) => {
+            if (this.windowModels.find(item => item.key === model.key))
+                return void dispatcher_FloatingWindows_FocusWindow.dispatchUI(model.key);
+            this.windowModels.push({ ...model });
+            dispatch_FloatingWindows_WindowsUpdated.dispatchUI();
+        },
+        remove: (key) => {
+            const index = this.windowModels.findIndex(model => model.key === key);
+            if (index === -1)
+                return;
+            removeFromArrayByIndex(this.windowModels, index);
+            dispatch_FloatingWindows_WindowsUpdated.dispatchUI();
+        }
+    };
+}
+export const ModuleFE_FloatingWindows = new ModuleFE_FloatingWindow_Class();

package/_ui/ATS_FloatingWindows/ATS_FloatingWindows.d.ts

@@ -0,0 +1,2 @@
+import { AppToolsScreen } from '@nu-art/thunderstorm-frontend/index';
+export declare const ATS_FloatingWindows: AppToolsScreen;

package/_ui/ATS_FloatingWindows/ATS_FloatingWindows.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ComponentSync, LL_H_C, LL_V_L } from '@nu-art/thunderstorm-frontend/index';
+import { thunderstormCapabilitiesGroup } from '@nu-art/thunderstorm-frontend/consts';
+import { ModuleFE_FloatingWindows } from '../../_modules/ModuleFE_FloatingWindows.js';
+import { windowRect } from '../../_utils/get-window-rect.js';
+class ATS_FloatingWindows_Class extends ComponentSync {
+    openHalfLeft = () => {
+        const model = {
+            key: 'ats-window-1',
+            content: (cb) => this.renderWindowContent('Test Half Left', cb),
+            resizable: true,
+            moveable: true,
+            rect: windowRect.halfScreen_Left()
+        };
+        ModuleFE_FloatingWindows.window.add(model);
+    };
+    openHalfRight = () => {
+        const model = {
+            key: 'ats-window-2',
+            content: (cb) => this.renderWindowContent('Test Half Right', cb),
+            resizable: true,
+            moveable: true,
+            rect: windowRect.halfScreen_Right(),
+        };
+        ModuleFE_FloatingWindows.window.add(model);
+    };
+    openThirdLeft = () => {
+        const model = {
+            key: 'ats-window-3',
+            content: (cb) => this.renderWindowContent('Test Third Left', cb),
+            resizable: true,
+            moveable: true,
+            rect: windowRect.thirdScreen_Left(),
+        };
+        ModuleFE_FloatingWindows.window.add(model);
+    };
+    openThirdMiddle = () => {
+        const model = {
+            key: 'ats-window-4',
+            content: (cb) => this.renderWindowContent('Test Third Middle', cb),
+            resizable: true,
+            moveable: true,
+            rect: windowRect.thirdScreen_Middle(),
+        };
+        ModuleFE_FloatingWindows.window.add(model);
+    };
+    openThirdRight = () => {
+        const model = {
+            key: 'ats-window-5',
+            content: (cb) => this.renderWindowContent('Test Third Right', cb),
+            resizable: true,
+            moveable: true,
+            rect: windowRect.thirdScreen_Right(),
+        };
+        ModuleFE_FloatingWindows.window.add(model);
+    };
+    render() {
+        return _jsxs(LL_V_L, { style: { gap: 10 }, children: [_jsx(Button, { variant: 'primary', onClick: this.openHalfLeft, children: "Open Half Left" }), _jsx(Button, { variant: 'primary', onClick: this.openHalfRight, children: "Open Half Right" }), _jsx(Button, { variant: 'primary', onClick: this.openThirdLeft, children: "Open Third Left" }), _jsx(Button, { variant: 'primary', onClick: this.openThirdMiddle, children: "Open Third Middle" }), _jsx(Button, { variant: 'primary', onClick: this.openThirdRight, children: "Open Third Right" })] });
+    }
+    renderWindowContent = (content, cb) => {
+        return _jsxs(LL_H_C, { style: { gap: 10 }, children: [content, _jsx(Button, { variant: 'secondary', onClick: cb, children: "Close" })] });
+    };
+}
+export const ATS_FloatingWindows = {
+    key: 'ats__floating-windows',
+    name: 'Floating Windows',
+    renderer: ATS_FloatingWindows_Class,
+    group: thunderstormCapabilitiesGroup
+};

package/_ui/TS_FloatingWindow/TS_FloatingWindow.d.ts

@@ -0,0 +1,32 @@
+import { ComponentSync } from '@nu-art/thunderstorm-frontend';
+import { Model_FloatingWindow } from '../../types.js';
+import { FloatingWindows_FocusWindow } from '../../_dispatchers/focus-window.js';
+import './TS_FloatingWindow.scss';
+type Props = {
+    model: Model_FloatingWindow;
+};
+export declare class TS_FloatingWindow extends ComponentSync<Props> implements FloatingWindows_FocusWindow {
+    static runningZIndex: number;
+    private wrapperRef;
+    private anchorRef;
+    private focusTimeout?;
+    private resizeDebouncer;
+    private resizeObserver;
+    private dragOffset?;
+    __onFocusFloatingWindow: (windowKey: string) => void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private closeWindow;
+    private getClassName;
+    private getStyle;
+    private getWrapperElement;
+    private getAnchorElement;
+    private onResize;
+    private onFocus;
+    private onDragStart;
+    private onDragMove;
+    private onDragEnd;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private render_DragAnchor;
+}
+export {};

package/_ui/TS_FloatingWindow/TS_FloatingWindow.js

@@ -0,0 +1,130 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { _className, ComponentSync } from '@nu-art/thunderstorm-frontend';
+import { BadImplementationException, Debounce, Second } from '@nu-art/ts-common';
+import { ModuleFE_FloatingWindows } from '../../_modules/ModuleFE_FloatingWindows.js';
+import './TS_FloatingWindow.scss';
+export class TS_FloatingWindow extends ComponentSync {
+    static runningZIndex = 0;
+    wrapperRef = React.createRef();
+    anchorRef = React.createRef();
+    focusTimeout;
+    resizeDebouncer = new Debounce(() => this.onResize(), 100, 250);
+    resizeObserver = new ResizeObserver(() => this.resizeDebouncer.trigger());
+    dragOffset;
+    //######################### Life Cycle #########################
+    //Logic for programmatic focus
+    __onFocusFloatingWindow = (windowKey) => {
+        if (windowKey !== this.props.model.key)
+            return;
+        const wrapper = this.wrapperRef.current;
+        if (!wrapper)
+            return;
+        wrapper.focus();
+        wrapper.classList.add('focus');
+        //Bring to foreground
+        if (Number(wrapper.style.zIndex) !== TS_FloatingWindow.runningZIndex)
+            wrapper.style.zIndex = `${++TS_FloatingWindow.runningZIndex}`;
+        this.focusTimeout = setTimeout(() => {
+            wrapper.classList.remove('focus');
+            delete this.focusTimeout;
+        }, Second);
+    };
+    componentDidMount() {
+        const wrapper = this.getWrapperElement();
+        //Focus the window when it first mounts
+        wrapper.focus();
+        this.resizeObserver.observe(wrapper);
+    }
+    componentWillUnmount() {
+        clearTimeout(this.focusTimeout);
+        this.resizeObserver.disconnect();
+    }
+    //######################### Logic #########################
+    closeWindow = () => {
+        ModuleFE_FloatingWindows.window.remove(this.props.model.key);
+    };
+    getClassName = () => {
+        const model = this.props.model;
+        return _className('ts-floating-window', model.resizable && 'resizable', model.className);
+    };
+    getStyle = () => {
+        const model = this.props.model;
+        return {
+            left: model.rect.x,
+            top: model.rect.y,
+            width: model.rect.width,
+            height: model.rect.height,
+            zIndex: ++TS_FloatingWindow.runningZIndex,
+        };
+    };
+    getWrapperElement = () => {
+        const wrapper = this.wrapperRef.current;
+        if (!wrapper)
+            throw new BadImplementationException('Wrapper ref disconnected!');
+        return wrapper;
+    };
+    getAnchorElement = () => {
+        const anchorElement = this.anchorRef.current;
+        if (!anchorElement)
+            throw new BadImplementationException('Anchor ref disconnected!');
+        return anchorElement;
+    };
+    //######################### Event Callbacks #########################
+    onResize = () => {
+        const wrapper = this.getWrapperElement();
+        const model = this.props.model;
+        const rect = wrapper.getBoundingClientRect();
+        model.rect.x = rect.x;
+        model.rect.y = rect.y;
+        model.rect.height = rect.height;
+        model.rect.width = rect.width;
+    };
+    //Logic for UI focus
+    onFocus = () => {
+        const wrapper = this.getWrapperElement();
+        //Bring to foreground
+        if (Number(wrapper.style.zIndex) !== TS_FloatingWindow.runningZIndex)
+            wrapper.style.zIndex = `${++TS_FloatingWindow.runningZIndex}`;
+    };
+    onDragStart = (e) => {
+        const anchor = this.getAnchorElement();
+        const wrapper = this.getWrapperElement();
+        anchor.addEventListener('pointermove', this.onDragMove);
+        anchor.addEventListener('pointerup', this.onDragEnd);
+        wrapper.classList.add('dragging');
+        //Calc x & y offset from wrapper top-left corner
+        this.dragOffset = {
+            x: e.clientX - this.props.model.rect.x,
+            y: e.clientY - this.props.model.rect.y,
+        };
+    };
+    onDragMove = (e) => {
+        const newX = e.clientX - (this.dragOffset?.x ?? 0);
+        const newY = e.clientY - (this.dragOffset?.y ?? 0);
+        this.props.model.rect.x = newX;
+        this.props.model.rect.y = newY;
+        const wrapper = this.getWrapperElement();
+        wrapper.style.left = `${newX}px`;
+        wrapper.style.top = `${newY}px`;
+    };
+    onDragEnd = () => {
+        const anchor = this.getAnchorElement();
+        const wrapper = this.getWrapperElement();
+        anchor.removeEventListener('pointermove', this.onDragMove);
+        anchor.removeEventListener('pointerup', this.onDragEnd);
+        wrapper.classList.remove('dragging');
+        delete this.dragOffset;
+    };
+    //######################### Render #########################
+    render() {
+        const model = this.props.model;
+        return _jsxs("div", { ref: this.wrapperRef, className: this.getClassName(), style: this.getStyle(), tabIndex: 0, onFocus: this.onFocus, children: [this.render_DragAnchor(), model.content(this.closeWindow)] });
+    }
+    render_DragAnchor = () => {
+        const model = this.props.model;
+        if (!model.moveable)
+            return;
+        return _jsx("div", { ref: this.anchorRef, className: 'ts-floating-window__drag-anchor', onPointerDown: this.onDragStart });
+    };
+}

package/_ui/TS_FloatingWindow/TS_FloatingWindow.scss

@@ -0,0 +1,38 @@
+.ts-floating-window {
+  position: fixed;
+  background: #fff;
+  padding: 16px;
+  min-width: 20px;
+  min-height: 20px;
+  max-width: calc(100vw - 32px);
+  max-height: calc(100vh - 32px);
+  border: 1px solid black;
+
+  .ts-floating-window__drag-anchor {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 20px;
+    height: 20px;
+    cursor: move;
+  }
+
+  &.dragging {
+    .ts-floating-window__drag-anchor {
+      position: fixed;
+      width: 100vw;
+      height: 100vh;
+    }
+  }
+
+  &.resizable {
+    resize: both;
+    overflow: auto;
+  }
+
+  @supports selector(::-webkit-resizer) {
+    &::-webkit-resizer {
+      appearance: none;
+    }
+  }
+}

package/_ui/TS_FloatingWindows/TS_FloatingWindows.d.ts

@@ -0,0 +1,14 @@
+import { ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import { FloatingWindows_WindowsUpdated } from '../../_dispatchers/models-updated.js';
+import './TS_FloatingWindows.scss';
+import { Model_FloatingWindow } from '../../types.js';
+type State = {
+    windowModels: Model_FloatingWindow[];
+};
+export declare class TS_FloatingWindows extends ComponentSync<unknown, State> implements FloatingWindows_WindowsUpdated {
+    __onFloatingWindowsUpdated: () => void;
+    protected deriveStateFromProps(nextProps: unknown, state: State): State;
+    componentDidUpdate(): void;
+    render(): import("react/jsx-runtime").JSX.Element | undefined;
+}
+export {};

package/_ui/TS_FloatingWindows/TS_FloatingWindows.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ComponentSync } from '@nu-art/thunderstorm-frontend/index';
+import { ModuleFE_FloatingWindows } from '../../_modules/ModuleFE_FloatingWindows.js';
+import './TS_FloatingWindows.scss';
+import { TS_FloatingWindow } from '../TS_FloatingWindow/TS_FloatingWindow.js';
+export class TS_FloatingWindows extends ComponentSync {
+    //######################### Life Cycle #########################
+    __onFloatingWindowsUpdated = () => {
+        this.forceUpdate();
+    };
+    deriveStateFromProps(nextProps, state) {
+        state.windowModels ??= ModuleFE_FloatingWindows.windowModels;
+        return state;
+    }
+    componentDidUpdate() {
+        if (!this.state.windowModels.length)
+            TS_FloatingWindow.runningZIndex = 0;
+    }
+    //######################### Logic #########################
+    //######################### Render #########################
+    render() {
+        if (!this.state.windowModels?.length)
+            return;
+        return _jsx("div", { id: 'ts-floating-windows', children: this.state.windowModels.map(model => {
+                return _jsx(TS_FloatingWindow, { model: model }, model.key);
+            }) });
+    }
+}

package/_ui/TS_FloatingWindows/TS_FloatingWindows.scss

@@ -0,0 +1,5 @@
+#ts-floating-windows {
+  width: 0;
+  height: 0;
+  isolation: isolate;
+}

package/_utils/get-window-rect.d.ts

@@ -0,0 +1,32 @@
+export declare const windowRect: {
+    halfScreen_Left: () => {
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+    };
+    halfScreen_Right: () => {
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+    };
+    thirdScreen_Left: () => {
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+    };
+    thirdScreen_Middle: () => {
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+    };
+    thirdScreen_Right: () => {
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+    };
+};

package/_utils/get-window-rect.js

@@ -0,0 +1,22 @@
+export const windowRect = {
+    halfScreen_Left: () => {
+        const width = (window.innerWidth - 32) / 2;
+        return { width, height: window.innerHeight - 32, x: 16, y: 16 };
+    },
+    halfScreen_Right: () => {
+        const width = (window.innerWidth - 32) / 2;
+        return { width, height: window.innerHeight - 32, x: width + 16, y: 16 };
+    },
+    thirdScreen_Left: () => {
+        const width = (window.innerWidth - 32) / 3;
+        return { width, height: window.innerHeight - 32, x: 16, y: 16 };
+    },
+    thirdScreen_Middle: () => {
+        const width = (window.innerWidth - 32) / 3;
+        return { width, height: window.innerHeight - 32, x: width + 16, y: 16 };
+    },
+    thirdScreen_Right: () => {
+        const width = (window.innerWidth - 32) / 3;
+        return { width, height: window.innerHeight - 32, x: (2 * width) + 16, y: 16 };
+    }
+};

package/ats.d.ts

@@ -0,0 +1 @@
+export * from './_ui/ATS_FloatingWindows/ATS_FloatingWindows.js';

package/ats.js

@@ -0,0 +1 @@
+export * from './_ui/ATS_FloatingWindows/ATS_FloatingWindows.js';

package/index.d.ts

@@ -0,0 +1,7 @@
+export * from './types.js';
+export * from './_modules/ModuleFE_FloatingWindows.js';
+export * from './_dispatchers/models-updated.js';
+export * from './_dispatchers/focus-window.js';
+export * from './_utils/get-window-rect.js';
+export * from './_ui/TS_FloatingWindows/TS_FloatingWindows.js';
+export * from './_ui/TS_FloatingWindow/TS_FloatingWindow.js';

package/index.js

@@ -0,0 +1,7 @@
+export * from './types.js';
+export * from './_modules/ModuleFE_FloatingWindows.js';
+export * from './_dispatchers/models-updated.js';
+export * from './_dispatchers/focus-window.js';
+export * from './_utils/get-window-rect.js';
+export * from './_ui/TS_FloatingWindows/TS_FloatingWindows.js';
+export * from './_ui/TS_FloatingWindow/TS_FloatingWindow.js';

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@nu-art/floating-windows",
+  "version": "0.400.7",
+  "description": "Floating Windows",
+  "keywords": [
+    "TacB0sS",
+    "express",
+    "infra",
+    "nu-art",
+    "thunderstorm",
+    "typescript"
+  ],
+  "homepage": "https://github.com/nu-art-js/thunderstorm",
+  "bugs": {
+    "url": "https://github.com/nu-art-js/thunderstorm/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:nu-art-js/thunderstorm.git"
+  },
+  "license": "Apache-2.0",
+  "author": "TacB0sS",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "tsc"
+  },
+  "contributors": [
+    {
+      "name": "TacB0sS"
+    },
+    {
+      "name": "Cipher",
+      "url": "https://www.linkedin.com/in/itay-leybovich-470b87229/"
+    }
+  ],
+  "publishConfig": {
+    "directory": "dist",
+    "linkDirectory": true
+  },
+  "dependencies": {
+    "@nu-art/ts-common": "0.400.7",
+    "@nu-art/ts-styles": "0.400.7",
+    "@nu-art/thunderstorm-frontend": "0.400.7",
+    "@nu-art/thunderstorm-shared": "0.400.7",
+    "react": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0"
+  },
+  "unitConfig": {
+    "type": "typescript-lib"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./*": {
+      "types": "./*.d.ts",
+      "import": "./*.js"
+    }
+  }
+}

package/types.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export type FloatingWindowRect = {
+    width?: number;
+    height?: number;
+    x: number;
+    y: number;
+};
+export type Model_FloatingWindow = {
+    key: string;
+    content: (closeWindowCB: VoidFunction) => ReactNode;
+    rect: FloatingWindowRect;
+    resizable?: boolean;
+    moveable?: boolean;
+    className?: string;
+};

package/types.js

@@ -0,0 +1 @@
+export {};