wenay-react2 1.0.1

package/lib/common/src/components/Menu/RightMenu.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { sleepAsync } from 'wenay-common2';
+import { GetModalFuncJSX } from "../Modal";
+import { DivOutsideClick, useDraggable } from "../../hooks";
+import { DraggableOutlineDiv } from "../Dnd";
+export function DropdownMenu({ elements, style, position: initialPosition = 'right', position2: initialPos2 = 'top' }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isFixed, setIsFixed] = useState(false);
+    const [select, setSelect] = useState(null);
+    const data = useRef({ m1: false, m2: false });
+    // Получаем JSX-функции модального окна
+    const jsx = useMemo(GetModalFuncJSX, []);
+    const jsxRender = useMemo(() => _jsx(jsx.Render, {}), [jsx]);
+    const [position, setPosition] = useState(initialPosition);
+    const [isTop, setIsTop] = useState(initialPos2 === 'top');
+    const positionLast = useRef({ x: 0, y: 0 });
+    const handleDragEnd = useCallback((finalPosition) => {
+        // Обработка горизонтального смещения
+        if (position === 'left') {
+            positionLast.current.x += finalPosition.x;
+            if (positionLast.current.x > window.innerWidth * 0.6) {
+                positionLast.current.x = window.innerWidth - positionLast.current.x;
+                setPosition('right');
+            }
+        }
+        else if (position === 'right') {
+            positionLast.current.x -= finalPosition.x;
+            if (positionLast.current.x > window.innerWidth * 0.6) {
+                positionLast.current.x = window.innerWidth - positionLast.current.x;
+                setPosition('left');
+            }
+        }
+        // Обработка вертикального смещения
+        if (isTop) {
+            positionLast.current.y += finalPosition.y;
+            if (positionLast.current.y > document.documentElement.clientHeight * 0.6) {
+                positionLast.current.y = document.documentElement.clientHeight - positionLast.current.y;
+                setIsTop(false);
+            }
+        }
+        else {
+            positionLast.current.y -= finalPosition.y;
+            if (positionLast.current.y > document.documentElement.clientHeight * 0.6) {
+                positionLast.current.y = document.documentElement.clientHeight - positionLast.current.y;
+                setIsTop(true);
+            }
+        }
+    }, [position, isTop]);
+    const { position: pos, dragProps } = useDraggable(0, 0, 50, handleDragEnd, () => { });
+    // Обработчики кликов и наведения
+    const handleClickOutside = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+    const handleToggle = useCallback(() => {
+        setIsFixed((prev) => !prev);
+        setIsOpen((prev) => !prev);
+    }, []);
+    const handleSelect = useCallback((item, index) => {
+        jsx.set(item.subMenuContent);
+        setSelect(index);
+    }, [jsx]);
+    const handleContentMouseEnter = useCallback(() => {
+        data.current.m1 = true;
+    }, []);
+    const handleContentMouseLeave = useCallback(async () => {
+        data.current.m1 = false;
+        await sleepAsync(50);
+        if (!data.current.m1 && !data.current.m2) {
+            jsx.set(null);
+            setSelect(null);
+        }
+    }, [jsx]);
+    const handleSubmenuMouseEnter = useCallback(() => {
+        data.current.m2 = true;
+    }, []);
+    const handleSubmenuMouseLeave = useCallback(async () => {
+        data.current.m2 = false;
+        await sleepAsync(50);
+        if (!data.current.m1 && !data.current.m2) {
+            jsx.set(null);
+            setSelect(null);
+        }
+    }, [jsx]);
+    // Отрисовка выпадающего меню (dop)
+    const dop = (isFixed || isOpen) && (_jsxs("div", { onMouseEnter: () => {
+            data.current.m1 = true;
+        }, onMouseLeave: () => {
+            data.current.m1 = false;
+            jsx.set(null);
+            setSelect(null);
+        }, className: `dropdown-content2 ${!isTop ? 'dropdown-up' : ''}`, style: {
+            display: 'flex',
+            [position]: 0,
+            right: position === 'left' ? 'auto' : 0,
+            flexDirection: position === 'left' ? 'row' : 'row-reverse'
+        }, children: [_jsx("div", { className: "dropdown-content", onMouseEnter: handleContentMouseEnter, onMouseLeave: handleContentMouseLeave, children: elements.map((item, index) => (_jsx("div", { className: `menu-item ${select === index ? 'force-hover' : ''}`, onMouseEnter: () => handleSelect(item, index), onClick: () => handleSelect(item, index), children: item.label }, index))) }), _jsx("div", { onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: handleSubmenuMouseLeave, children: jsx.JSX ? (_jsx("div", { className: "submenu", style: { width: '40vw', minHeight: '70vh' }, children: jsxRender })) : null })] }));
+    // Вычисление смещений
+    const computedX = position === 'left'
+        ? positionLast.current.x + pos.x
+        : positionLast.current.x - pos.x;
+    const computedY = isTop
+        ? positionLast.current.y + pos.y
+        : positionLast.current.y - pos.y;
+    // Вычисление стилей контейнера меню
+    const containerStyle = useMemo(() => {
+        const computedStyle = {
+            ...style,
+            display: 'flex'
+        };
+        // Горизонтальное позиционирование
+        if (position === 'left') {
+            computedStyle.left = Math.max(0, Math.min(computedX, window.innerWidth - 50));
+            computedStyle.right = 'auto';
+        }
+        else {
+            computedStyle.right = Math.max(0, Math.min(computedX, window.innerWidth - 50));
+            computedStyle.left = 'auto';
+        }
+        // Вертикальное позиционирование
+        if (isTop) {
+            computedStyle.top = Math.max(0, Math.min(computedY, window.innerHeight - 50));
+            computedStyle.bottom = 'auto';
+        }
+        else {
+            computedStyle.bottom = Math.max(0, Math.min(computedY, window.innerHeight - 50));
+            computedStyle.top = 'auto';
+        }
+        return computedStyle;
+    }, [style, position, isTop, computedX, computedY]);
+    return (_jsxs(DivOutsideClick, { outsideClick: handleClickOutside, className: `menu-container ${isFixed ? 'activeM' : ''}`, style: containerStyle, onMouseEnter: () => !isFixed && setIsOpen(true), onMouseLeave: () => !isFixed && setIsOpen(false), children: [_jsx("div", { ...dragProps, className: "menu-button", onClick: handleToggle, children: "\u2630" }), dop] }));
+}
+export function MenuRightApi() {
+    const elements = [];
+    let render = null;
+    return {
+        set(array) {
+            const el = array.filter((e) => elements.indexOf(e) === -1);
+            if (el.length === 0)
+                return;
+            elements.push(...el);
+            render?.(elements);
+        },
+        delete(array) {
+            array.forEach((e) => elements.splice(elements.indexOf(e), 1));
+        },
+        get() {
+            return elements;
+        },
+        Render({ style }) {
+            const [el, setEl] = useState(elements);
+            useEffect(() => {
+                render = setEl;
+                return () => {
+                    render = null;
+                };
+            }, []);
+            return _jsx(DropdownMenu, { elements: el, style: style, position: "left" });
+        }
+    };
+}
+export function DropdownMenuTest() {
+    const testData = [
+        { label: "Item 1", subMenuContent: () => _jsx(SubMenu, {}) },
+        { label: "Item 2", subMenuContent: () => _jsx(SubMenu2, {}) },
+        { label: "Item 3", subMenuContent: () => _jsx(SubMenu, {}) }
+    ];
+    const menu = useMemo(MenuRightApi, []);
+    useEffect(() => {
+        menu.set(testData);
+    }, []);
+    return _jsx(menu.Render, {});
+}
+const SubMenu = () => {
+    return (_jsxs("div", { className: "maxSize", children: [_jsx(DraggableOutlineDiv, {}), _jsx("div", { className: "submenu-item", children: "Subitem 1" }), _jsx("div", { className: "submenu-item", children: "Subitem 2" }), _jsx("div", { className: "submenu-item", children: "Subitem 3" })] }));
+};
+const SubMenu2 = () => {
+    return (_jsxs("div", { children: [_jsx("div", { className: "submenu-item", children: "Subitem 33331" }), _jsx("div", { className: "submenu-item", children: "Subitem 33332" }), _jsx("div", { className: "submenu-item", children: "Subitem 33333" })] }));
+};

package/lib/common/src/components/Menu/StickerMenu.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+interface StickerMenuProps {
+}
+declare const StickerMenu: React.FC<StickerMenuProps>;
+export default StickerMenu;

package/lib/common/src/components/Menu/StickerMenu.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+const StickerMenu = () => {
+    // Флаг состояния: открыто меню или закрыто
+    const [isOpen, setIsOpen] = useState(false);
+    // Сдвиг по X в процессе перетаскивания
+    const [dragX, setDragX] = useState(0);
+    // Рефы для отслеживания начала перетаскивания и самого процесса
+    const startXRef = useRef(null);
+    const draggingRef = useRef(false);
+    // Настройки размеров: общая ширина меню и ширина видимой части (стикер) при закрытом состоянии
+    const menuWidth = 250; // общая ширина открытого меню
+    const stickerWidth = 50; // ширина видимой части при закрытом меню
+    // Начало перетаскивания (мышь)
+    const handleMouseDown = (e) => {
+        draggingRef.current = true;
+        startXRef.current = e.clientX;
+    };
+    // Начало перетаскивания (касание)
+    const handleTouchStart = (e) => {
+        draggingRef.current = true;
+        startXRef.current = e.touches[0].clientX;
+    };
+    // Обработка движения мыши
+    const handleMouseMove = (e) => {
+        if (!draggingRef.current || startXRef.current === null)
+            return;
+        const deltaX = e.clientX - startXRef.current;
+        setDragX(deltaX);
+    };
+    // Обработка движения при касании
+    const handleTouchMove = (e) => {
+        if (!draggingRef.current || startXRef.current === null)
+            return;
+        const deltaX = e.touches[0].clientX - startXRef.current;
+        setDragX(deltaX);
+    };
+    // Завершение перетаскивания (мышь)
+    const handleMouseUp = () => {
+        if (!draggingRef.current)
+            return;
+        finishDrag();
+    };
+    // Завершение перетаскивания (касание)
+    const handleTouchEnd = () => {
+        if (!draggingRef.current)
+            return;
+        finishDrag();
+    };
+    // Функция завершения перетаскивания: если сдвиг больше половины ширины меню — переключаем состояние
+    const finishDrag = () => {
+        draggingRef.current = false;
+        if (dragX < -menuWidth / 2) {
+            setIsOpen(true);
+        }
+        else if (dragX > menuWidth / 2) {
+            setIsOpen(false);
+        }
+        setDragX(0);
+        startXRef.current = null;
+    };
+    // Подписываемся на глобальные события движения и завершения перетаскивания
+    useEffect(() => {
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('touchmove', handleTouchMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        document.addEventListener('touchend', handleTouchEnd);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('touchmove', handleTouchMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            document.removeEventListener('touchend', handleTouchEnd);
+        };
+    }, [dragX]);
+    // Переключение состояния меню по клику
+    const handleClick = () => {
+        setIsOpen(!isOpen);
+    };
+    /*
+      Вычисляем итоговый сдвиг по X:
+      - Когда меню закрыто, сдвигаем его влево так, чтобы виден был только стикер.
+      - При перетаскивании корректируем позицию относительно текущего сдвига.
+    */
+    let translateX = 0;
+    if (dragX !== 0) {
+        // Если меню открыто, перетаскиваем вправо (открытие) только в отрицательном направлении
+        // Если закрыто — перетаскиваем влево (открытие) только в положительном направлении
+        translateX = isOpen ? Math.min(0, dragX) : Math.max(0, dragX);
+    }
+    const baseTranslate = isOpen ? 0 : -(menuWidth - stickerWidth);
+    const finalTranslate = baseTranslate + translateX;
+    // Стили для контейнера меню
+    const containerStyle = {
+        position: 'fixed',
+        top: '50%',
+        right: 0,
+        transform: `translateX(${finalTranslate}px) translateY(-50%)`,
+        width: `${menuWidth}px`,
+        height: '300px',
+        backgroundColor: '#ffeb3b',
+        borderRadius: '8px 0 0 8px',
+        boxShadow: '0 0 5px rgba(0,0,0,0.3)',
+        transition: draggingRef.current ? 'none' : 'transform 0.3s ease',
+        cursor: 'pointer',
+        userSelect: 'none',
+        overflow: 'hidden'
+    };
+    return (_jsx("div", { style: containerStyle, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, onClick: handleClick, children: _jsxs("div", { style: { padding: '10px' }, children: [_jsx("h3", { children: "\u041C\u0435\u043D\u044E" }), isOpen && (_jsxs("ul", { style: { listStyle: 'none', padding: 0 }, children: [_jsx("li", { children: "\u041F\u0443\u043D\u043A\u0442 1" }), _jsx("li", { children: "\u041F\u0443\u043D\u043A\u0442 2" }), _jsx("li", { children: "\u041F\u0443\u043D\u043A\u0442 3" })] }))] }) }));
+};
+export default StickerMenu;

package/lib/common/src/components/Menu/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RightMenu';
+export * from './StickerMenu';

package/lib/common/src/components/Menu/index.js

@@ -0,0 +1,2 @@
+export * from './RightMenu';
+export * from './StickerMenu';

package/lib/common/src/components/Modal/LeftModal.d.ts

@@ -0,0 +1,58 @@
+import React from "react";
+import { ColorString } from "wenay-common2";
+export declare function LeftModal({ arr, zIndex }: {
+    arr: [React.JSX.Element, React.JSX.Element][];
+    zIndex: number;
+}): import("react/jsx-runtime").JSX.Element;
+type MenuItem = {
+    id?: number;
+    button: React.JSX.Element;
+    color?: ColorString;
+    textB?: string;
+    el: () => React.JSX.Element;
+};
+type MenuItemPartial = Omit<MenuItem, "button"> & {
+    button?: MenuItem["button"];
+};
+export declare function getApiLeftMenu(): {
+    modal: {
+        set(jsx: React.JSX.Element | null): void;
+        JSX: React.JSX.Element | null;
+        Render(): React.JSX.Element | null;
+        addJSX(jsx: React.JSX.Element): React.JSX.Element;
+        dellBy(jsx: React.JSX.Element): void;
+        readonly arrJSX: import("react/jsx-runtime").JSX.Element[];
+        RenderArr(): import("react/jsx-runtime").JSX.Element[];
+    };
+    renderBy(): void;
+    getMenu: () => Map<string, MenuItem[]>;
+    setMenu: (items: (MenuItemPartial | MenuItem)[], key?: string) => void;
+    Modal2: ({ menu, zIndex, zIndex0, key }: {
+        zIndex: number;
+        zIndex0?: number;
+        key?: string;
+        menu?: (MenuItemPartial | MenuItem)[];
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const ApiLeftMenu: {
+    modal: {
+        set(jsx: React.JSX.Element | null): void;
+        JSX: React.JSX.Element | null;
+        Render(): React.JSX.Element | null;
+        addJSX(jsx: React.JSX.Element): React.JSX.Element;
+        dellBy(jsx: React.JSX.Element): void;
+        readonly arrJSX: import("react/jsx-runtime").JSX.Element[];
+        RenderArr(): import("react/jsx-runtime").JSX.Element[];
+    };
+    renderBy(): void;
+    getMenu: () => Map<string, MenuItem[]>;
+    setMenu: (items: (MenuItemPartial | MenuItem)[], key?: string) => void;
+    Modal2: ({ menu, zIndex, zIndex0, key }: {
+        zIndex: number;
+        zIndex0?: number;
+        key?: string;
+        menu?: (MenuItemPartial | MenuItem)[];
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export declare function TestLeft333(): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/common/src/components/Modal/LeftModal.js

@@ -0,0 +1,284 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { colorGenerator2, sleepAsync } from "wenay-common2";
+import { Drag22 } from "../Dnd";
+import { renderBy, updateBy } from "../../../updateBy";
+import { GetModalJSX } from "./Modal";
+function useViewport() {
+    const [width, setWidth] = useState(window.innerWidth);
+    useEffect(() => {
+        const handleResize = () => setWidth(window.innerWidth);
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return { width };
+}
+// Custom hook for smooth snap scrolling animation
+function useSmoothSnapScroll() {
+    const animationState = useRef({ isAnimating: false });
+    const currentPosition = useRef({ x: 0, y: 0 });
+    const animateTo = async (target, onUpdate, onComplete) => {
+        animationState.current.isAnimating = true;
+        const step = 40;
+        const animate = async () => {
+            if (!animationState.current.isAnimating || currentPosition.current.x === target) {
+                return;
+            }
+            const direction = target > currentPosition.current.x ? 1 : -1;
+            await sleepAsync(10);
+            const nextPosition = currentPosition.current.x + direction * step;
+            if (Math.abs(target - nextPosition) < step) {
+                animationState.current.isAnimating = false;
+                currentPosition.current.x = target;
+                onUpdate(target);
+                onComplete?.();
+                return;
+            }
+            currentPosition.current.x = nextPosition;
+            onUpdate(nextPosition);
+            animate();
+        };
+        await animate();
+    };
+    const stopAnimation = () => {
+        animationState.current.isAnimating = false;
+    };
+    return { animateTo, stopAnimation, currentPosition };
+}
+const MENU_WIDTH_RATIO = 0.8;
+// Main sidebar menu component with snap scrolling behavior
+function SidebarMenuComponent({ y_, x_, api, arr, zIndex }) {
+    const [page, setPage] = useState(null);
+    const [x, setX] = useState(x_);
+    const [y, setY] = useState(y_);
+    const [open, setOpen] = useState(false);
+    // Size references for menu and element dimensions
+    const viewportSize = useRef(null);
+    const elementSize = useRef(null);
+    const lastPosition = useRef({ x: 0, y: 0, auto: false });
+    const currentPosition = useRef({ x: 0, y: 0, auto: false });
+    const scrollRef = useRef(null);
+    const dragStatus = useRef({ status: 0 });
+    const { width: viewportWidth } = useViewport();
+    const mainPage = useMemo(() => (_jsxs("div", { ref: scrollRef, style: {
+            height: "100vh",
+            width: Math.round(MENU_WIDTH_RATIO * 100) + "vw",
+            overflow: "auto",
+            scrollbarWidth: "none",
+            scrollBehavior: "smooth",
+            scrollSnapType: "y mandatory"
+        }, children: [arr.map(([button, page], i) => (_jsx("div", { ref: e => e?.scrollTo(), style: { scrollSnapAlign: "start" }, id: String(i), children: page }, i))), _jsx("div", {})] })), [arr]);
+    const menuItems = arr.map((e, i) => (_jsx("div", { style: { paddingBottom: 10, width: "100%" }, onMouseDown: () => setPage(mainPage), onTouchStart: () => setPage(mainPage), children: _jsx("a", { rel: "ds", href: `#${i}`, style: {
+                font: "inherit",
+                color: "inherit",
+                textDecoration: "inherit",
+                cursor: "default",
+            }, children: e[0] }) }, i)));
+    // Smooth animation function to target position
+    const animateToPosition = async (target) => {
+        lastPosition.current.auto = true;
+        const step = 40;
+        if (!lastPosition.current.auto)
+            return;
+        const animate = async () => {
+            if (!lastPosition.current.auto || currentPosition.current.x === target)
+                return;
+            const direction = target > currentPosition.current.x ? 1 : -1;
+            await sleepAsync(10);
+            const nextPos = currentPosition.current.x + direction * step;
+            if (Math.abs(target - nextPos) < step) {
+                lastPosition.current.auto = false;
+                currentPosition.current.x = target;
+                if (target === 0)
+                    setOpen(false);
+                setX(target);
+                return;
+            }
+            currentPosition.current.x = nextPos;
+            setX(nextPos);
+            animate();
+        };
+        await animate();
+    };
+    useEffect(() => {
+        const menuApi = {
+            moveStop: () => {
+                currentPosition.current.auto = false;
+                lastPosition.current.auto = false;
+            },
+            moveToStart: () => {
+                animateToPosition(0);
+            },
+            moveToEnd: () => {
+                animateToPosition(viewportSize.current?.width ? viewportSize.current.width * -1 : -500);
+            },
+            y: yNew => {
+                let newY = yNew + lastPosition.current.y;
+                if (newY < 0)
+                    newY = 0;
+                if (dragStatus.current.status === 1) {
+                    currentPosition.current.y = newY;
+                    setY(newY);
+                }
+            },
+            open: setOpen,
+            x: (xNew) => {
+                let newX = xNew + lastPosition.current.x;
+                currentPosition.current.x = newX;
+                if (newX < 0)
+                    setOpen(true);
+                if (newX === 0)
+                    setOpen(false);
+                setX(newX);
+            },
+            start: () => {
+                menuApi.moveStop?.();
+                lastPosition.current.x = currentPosition.current.x;
+                lastPosition.current.y = currentPosition.current.y;
+            },
+            stop: () => {
+                if (lastPosition.current.x > currentPosition.current.x + 3) {
+                    animateToPosition(viewportSize.current ? MENU_WIDTH_RATIO * viewportWidth * -1 : -300);
+                }
+                else if (lastPosition.current.x + 3 < currentPosition.current.x &&
+                    Math.abs(lastPosition.current.y - currentPosition.current.y) <=
+                        Math.abs(lastPosition.current.x - currentPosition.current.x)) {
+                    animateToPosition(0);
+                }
+                else {
+                    if (viewportSize.current) {
+                        if (Math.abs(currentPosition.current.x) > viewportSize.current.width * 0.5) {
+                            animateToPosition(viewportSize.current.width * -1);
+                        }
+                        else {
+                            animateToPosition(0);
+                        }
+                    }
+                }
+            },
+        };
+        api(menuApi);
+    }, [viewportWidth]);
+    return _jsxs(_Fragment, { children: [_jsx("div", { ref: e => {
+                    if (e) {
+                        const rect = e.getBoundingClientRect();
+                        elementSize.current = {
+                            height: rect.height,
+                            width: rect.width,
+                        };
+                    }
+                }, style: { position: "absolute", right: x * -1, top: y, zIndex }, onClick: () => {
+                    if (!open) {
+                        setOpen(true);
+                        animateToPosition(viewportSize.current ? MENU_WIDTH_RATIO * viewportWidth * -1 : -300);
+                    }
+                }, onMouseDown: () => {
+                    dragStatus.current.status = 1;
+                }, onMouseLeave: () => {
+                    dragStatus.current.status = 0;
+                }, onMouseUp: () => {
+                    dragStatus.current.status = 0;
+                }, children: menuItems }), _jsx("div", { ref: e => {
+                    if (e) {
+                        const rect = e.getBoundingClientRect();
+                        viewportSize.current = {
+                            height: rect.height,
+                            width: rect.width,
+                        };
+                    }
+                }, style: { position: "absolute", left: `calc(100% + ${x}px)`, zIndex } }), open && (_jsxs("div", { style: { width: -x, overflow: "hidden" }, children: [_jsx("div", { ref: e => {
+                            if (e) {
+                                const rect = e.getBoundingClientRect();
+                                viewportSize.current = {
+                                    height: rect.height,
+                                    width: rect.width,
+                                };
+                            }
+                        }, className: "maxSize" }), mainPage] }))] });
+}
+export function LeftModal({ arr, zIndex }) {
+    const currentPos = useRef({ x: 0, y: 0, auto: false });
+    const menuApiRef = useRef(null);
+    const sidebarComponent = useMemo(() => (_jsx(SidebarMenuComponent, { arr: arr, zIndex: zIndex, api: (apiInstance) => {
+            menuApiRef.current = apiInstance;
+        }, x_: currentPos.current.x, y_: currentPos.current.y })), [arr, zIndex]);
+    const draggableWrapper = useMemo(() => (_jsx(Drag22, { onX: (xNew) => menuApiRef.current?.x(xNew), right: true, onY: (yNew) => menuApiRef.current?.y(yNew), x: 0, y: 0, onStart: () => menuApiRef.current?.start?.(), onStop: () => menuApiRef.current?.stop?.(), children: sidebarComponent })), [sidebarComponent]);
+    return _jsx("div", { className: "maxSize", children: draggableWrapper });
+}
+function LeftMenuComponent({ api, menu = [], zIndex }) {
+    return _jsx(LeftModal, { arr: menu.map(item => [item.button, item.el()]), zIndex: zIndex });
+}
+export function getApiLeftMenu() {
+    const createDefaultButton = ({ color, text }) => {
+        return (_jsx("div", { className: "blur", style: {
+                minHeight: "4vh",
+                minWidth: "50px",
+                marginBottom: 10,
+                fontSize: 12,
+                textAlign: "center",
+                background: color,
+                color: "rgba(255,255,255,0.1)"
+            }, children: text ?? "" }));
+    };
+    const createDefaultElement = ({ color, children, textB }) => {
+        const viewportWidth = window.innerWidth;
+        return (_jsxs("div", { className: "blur", style: {
+                minHeight: "100vh",
+                width: viewportWidth > 800 ? "100%" : "calc(100vw - 50px)",
+                background: color,
+                position: "relative"
+            }, children: [textB && (_jsx("div", { style: {
+                        position: "absolute",
+                        right: 0,
+                        top: 0,
+                        fontSize: 28,
+                        color: "rgba(255,255,255,0.1)"
+                    }, children: textB })), children()] }));
+    };
+    let menuApi = null;
+    const menuStore = new Map();
+    const setMenu = (items, key = "base") => {
+        const colorGen = colorGenerator2({ min: 0, max: 90 });
+        const currentMenuLength = getAllMenuItems().length;
+        const baseColors = [];
+        for (let i = 0; i < currentMenuLength + items.length; i++) {
+            const colorResult = colorGen.next();
+            if (!colorResult.done) {
+                const [r, g, b] = colorResult.value;
+                baseColors.push(`rgb(${r},${g},${b}, 0.3)`);
+            }
+        }
+        const itemColors = items.map((item, i) => item.color ?? baseColors[item.id ?? i + currentMenuLength]);
+        const menuItems = items.map((item, i) => ({
+            ...item,
+            button: item.button ?? createDefaultButton({ text: item.textB, color: itemColors[i] }),
+            el: () => createDefaultElement({ color: itemColors[i], children: item.el, textB: item.textB })
+        }));
+        menuStore.set(key, menuItems);
+    };
+    function getAllMenuItems() {
+        return [...menuStore.values()].flat();
+    }
+    function Modal2({ menu, zIndex, zIndex0, key }) {
+        if (menu)
+            setMenu(menu, key);
+        updateBy(menuStore);
+        return (_jsxs("div", { className: "maxSize", style: { position: "absolute", zIndex: zIndex0 }, children: [_jsx(modal.Render, {}), _jsx(LeftMenuComponent, { zIndex: zIndex, api: a => menuApi = a, menu: getAllMenuItems() })] }));
+    }
+    const modal = GetModalJSX();
+    return {
+        modal,
+        renderBy() { renderBy(menuStore); },
+        getMenu: () => menuStore,
+        setMenu: setMenu,
+        Modal2: Modal2
+    };
+}
+export const ApiLeftMenu = getApiLeftMenu();
+ApiLeftMenu.setMenu([
+    { button: _jsx("div", { style: { width: 200, height: 50, background: "rgb(92,50,213)" }, children: "1" }), el: () => _jsx("div", { children: "1" }), color: "rgb(92,50,213)" },
+    { button: _jsx("div", { style: { width: 200, height: 50, background: "rgb(98,149,58)" }, children: "2" }), el: () => _jsx("div", { children: "2" }) },
+], "test");
+export function TestLeft333() {
+    return _jsx(ApiLeftMenu.Modal2, { zIndex: 20 });
+}

package/lib/common/src/components/Modal/Modal.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+export declare function inputModal({ setModalJSX, func, name, txt }: {
+    txt?: string;
+    name?: string;
+    setModalJSX: React.Dispatch<React.SetStateAction<React.JSX.Element | null>>;
+    func: (txt: string) => void;
+}): void;
+export declare function confirmModal({ setModalJSX, func }: {
+    setModalJSX: React.Dispatch<React.SetStateAction<React.JSX.Element | null>>;
+    func: () => any;
+}): void;
+export declare function GetModalJSX(): {
+    set(jsx: React.JSX.Element | null): void;
+    JSX: React.JSX.Element | null;
+    Render(): React.JSX.Element | null;
+    addJSX(jsx: React.JSX.Element): React.JSX.Element;
+    dellBy(jsx: React.JSX.Element): void;
+    readonly arrJSX: import("react/jsx-runtime").JSX.Element[];
+    RenderArr(): import("react/jsx-runtime").JSX.Element[];
+};
+type t1 = (() => React.JSX.Element | null) | null;
+export declare function GetModalFuncJSX(): {
+    set(jsx: t1): void;
+    JSX: t1;
+    Render(): React.JSX.Element | null;
+    addJSX(jsx: t1): t1;
+    dellBy(jsx: t1): void;
+    readonly arrJSX: (import("react/jsx-runtime").JSX.Element | null)[];
+    RenderArr(): (import("react/jsx-runtime").JSX.Element | null)[];
+};
+export {};