"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const utils_1 = require("@onesy/utils");
const style_react_1 = require("@onesy/style-react");
const date_1 = require("@onesy/date");
const Line_1 = __importDefault(require("../Line"));
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.style)(theme => ({
    root: {
        position: 'relative'
    },
    canvas: {
        position: 'absolute',
        inset: 0,
        width: '100%',
        height: '100%',
        imageRendering: 'pixelated',
        background: '#fff',
        appearance: 'none',
        border: 'none',
        userSelect: 'none',
        transition: theme.methods.transitions.make('opacity'),
        '&[disabled]': {
            opacity: 0.7,
            pointerEvents: 'none'
        }
    },
    ui: {
        zIndex: 0
    },
    object: {
        cursor: 'crosshair'
    },
    pen: {
        cursor: 'crosshair'
    },
    pan: {
        cursor: 'grab'
    },
    panning: {
        cursor: 'grabbing'
    },
    zoom: {
        cursor: 'zoom-in'
    },
    eraser: {
        cursor: 'not-allowed'
    },
    image: {
        cursor: 'copy'
    },
    text: {
        cursor: 'text'
    }
}), { name: 'onesy-Whiteboard' });
const colorSelect = 'hsl(244deg 64% 64%)';
const colorSelectBackground = 'hsla(244deg 64% 64% / 4%)';
const Whiteboard = react_1.default.forwardRef((props_, ref) => {
    const theme = (0, style_react_1.useOnesyTheme)();
    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyWhiteboard) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
    const { valueDefault, onChange: onChangeProps, 
    // 10%
    minZoom = 10, 
    // 400%
    maxZoom = 4000, grid: gridProps = true, settings = {
        lineCap: 'round',
        lineJoin: 'round',
        lineWidth: 10,
        fillStyle: 'lightgreen',
        strokeStyle: 'lightgreen',
        globalAlpha: 0.44
    }, className } = props, other = __rest(props, ["valueDefault", "onChange", "minZoom", "maxZoom", "grid", "settings", "className"]);
    const { classes } = useStyle();
    const [size, setSize] = react_1.default.useState({});
    const [tool, setTool] = react_1.default.useState('select');
    const [mouseDown, setMouseDown] = react_1.default.useState(false);
    const [grid, setGrid] = react_1.default.useState(gridProps);
    const [loaded, setLoaded] = react_1.default.useState(false);
    const refs = {
        root: react_1.default.useRef(null),
        ui: react_1.default.useRef(null),
        interactive: react_1.default.useRef(null),
        on: react_1.default.useRef(false),
        items: react_1.default.useRef(valueDefault || []),
        previous: react_1.default.useRef({ x: 0, y: 0 }),
        previousMouse: react_1.default.useRef({ x: 0, y: 0 }),
        moveStarted: react_1.default.useRef(false),
        undo: react_1.default.useRef([]),
        redo: react_1.default.useRef([]),
        move: react_1.default.useRef({ x: 0, y: 0 }),
        offset: react_1.default.useRef({ x: 0, y: 0 }),
        start: react_1.default.useRef({ x: 0, y: 0 }),
        end: react_1.default.useRef({ x: 0, y: 0 }),
        scale: react_1.default.useRef(1),
        mouseDown: react_1.default.useRef(mouseDown),
        mouseMove: react_1.default.useRef({
            current: { x: 0, y: 0 },
            previous: undefined,
            delta: { x: 0, y: 0 }
        }),
        tool: react_1.default.useRef(tool),
        previousTool: react_1.default.useRef(tool),
        toolUpdateAuto: react_1.default.useRef(false),
        remove: react_1.default.useRef([]),
        grid: react_1.default.useRef(grid),
        typing: react_1.default.useRef(false),
        image: react_1.default.useRef((0, utils_1.isEnvironment)('browser') && new Image()),
        aspectRatio: react_1.default.useRef(1),
        select: react_1.default.useRef(null),
        textActive: react_1.default.useRef(null),
        textSettings: react_1.default.useRef({
            lineHeight: 20,
            padding: 5,
            fillStyle: 'black'
        })
    };
    refs.mouseDown.current = mouseDown;
    refs.tool.current = tool;
    refs.grid.current = grid;
    const init = react_1.default.useCallback(() => {
        // Todo
        // items
        // load all of the images in memory and attach theme to items as image elements
        // once it's all done, setLoaded(true), render
        setTimeout(() => {
            render();
            setLoaded(true);
        }, 40);
    }, []);
    react_1.default.useEffect(() => {
        if (!['zoom'].includes(tool))
            refs.previousTool.current = tool;
    }, [tool]);
    const onChange = react_1.default.useCallback(() => {
        if ((0, utils_1.is)('function', onChangeProps))
            onChangeProps(refs.items.current);
    }, [onChangeProps]);
    const getItems = react_1.default.useCallback((selected = undefined) => refs.items.current.filter(item => selected === undefined || item.se === selected), []);
    const getItem = react_1.default.useCallback(() => refs.items.current[refs.items.current.length - 1], []);
    const filterItems = react_1.default.useCallback(() => {
        const toRemove = refs.items.current.filter(item => {
            var _a;
            if (refs.tool.current === 'text' && item !== refs.textActive.current)
                item.se = false;
            const lines = ((_a = item.s) === null || _a === void 0 ? void 0 : _a.lines) || [];
            return !(item.v !== 't' || (item === refs.textActive.current || (lines.length > 1 || lines[0].length)));
        });
        if (toRemove.length)
            remove(toRemove);
    }, []);
    const add = react_1.default.useCallback((toAdd) => {
        const itemsAdd = (Array.isArray(toAdd) ? toAdd : [toAdd]).filter(Boolean);
        const items = getItems();
        // add to undo stack snapshot of current state
        refs.undo.current.push([...items]);
        // clear redo stack
        refs.redo.current = [];
        refs.items.current.push(...itemsAdd);
    }, []);
    const remove = react_1.default.useCallback((toRemove) => {
        const itemsRemove = (Array.isArray(toRemove) ? toRemove : [toRemove]).filter(Boolean);
        const items = getItems();
        const IDs = itemsRemove === null || itemsRemove === void 0 ? void 0 : itemsRemove.map(item => item.i);
        const toRemoveIDs = items.filter(item => IDs.includes(item.i)).map(item => item.i);
        if (!toRemoveIDs)
            return;
        // add to undo stack snapshot of current state
        refs.undo.current.push([...items]);
        // clear redo stack
        refs.redo.current = [];
        refs.items.current = refs.items.current.filter(item => !toRemoveIDs.includes(item.i));
    }, []);
    const reset = react_1.default.useCallback(() => {
        refs.on.current = false;
        refs.moveStarted.current = false;
        refs.image.current = null;
        // new move start
        refs.offset.current.x = refs.move.current.x;
        refs.offset.current.y = refs.move.current.y;
    }, []);
    const transform = react_1.default.useCallback((coordinate) => coordinate / refs.scale.current, []);
    const selectAll = react_1.default.useCallback(() => {
        return [...refs.items.current].filter(Boolean).map(item => {
            item.se = true;
            return item;
        });
    }, []);
    const unselectAll = react_1.default.useCallback((eventReact) => {
        const event = (eventReact === null || eventReact === void 0 ? void 0 : eventReact.nativeEvent) || eventReact;
        const shift = event === null || event === void 0 ? void 0 : event.shiftKey;
        return [...refs.items.current].filter(Boolean).map(item => {
            if (shift)
                return item;
            item.se = false;
            return item;
        });
    }, []);
    const onInteractionDown = react_1.default.useCallback((body, eventReact) => {
        var _a, _b;
        const event = (eventReact === null || eventReact === void 0 ? void 0 : eventReact.nativeEvent) || eventReact;
        const { offsetX: x, offsetY: y, clientX, clientY } = body;
        refs.on.current = true;
        refs.previous.current = { x, y };
        refs.mouseMove.current = {
            current: { x: 0, y: 0 },
            previous: undefined,
            delta: { x: 0, y: 0 }
        };
        const shift = event === null || event === void 0 ? void 0 : event.shiftKey;
        const ui = refs.ui.current.getContext('2d');
        const rect = refs.ui.current.getBoundingClientRect();
        refs.start.current.x = clientX - rect.left;
        refs.start.current.y = clientY - rect.top;
        refs.textActive.current = null;
        const start = refs.start.current;
        const startTransformed = {
            x: transform(start.x - refs.move.current.x),
            y: transform(start.y - refs.move.current.y)
        };
        Object.keys(settings).forEach(item_ => ui[item_] = settings[item_]);
        let item;
        const items = getItems();
        const t = refs.tool.current;
        refs.select.current = null;
        if (t === 'select') {
            // z-index top to bottom order
            const itemsReversed = [...items].reverse();
            const itemsClicked = itemsReversed.filter(item_ => {
                return item_.c && startTransformed.x >= item_.c[0] && startTransformed.x <= item_.c[0] + item_.c[2] && startTransformed.y >= item_.c[1] && startTransformed.y <= item_.c[1] + item_.c[3];
            });
            const itemsSelected = getItems(true);
            const clicked = itemsClicked[0];
            if (!clicked) {
                unselectAll();
                refs.select.current = { p: [], ar: [] };
            }
            if (!shift && !((clicked === null || clicked === void 0 ? void 0 : clicked.se) && itemsSelected.length > 1))
                unselectAll();
            if (clicked) {
                clicked.se = shift ? !clicked.se : true;
            }
        }
        else if (t === 'text') {
            const { lineHeight, padding } = refs.textSettings.current;
            const selectedText = items.find(item_ => item_.c && startTransformed.x >= item_.c[0] && startTransformed.x <= item_.c[0] + item_.c[2] && startTransformed.y >= item_.c[1] && startTransformed.y <= item_.c[1] + item_.c[3]);
            if (selectedText) {
                refs.textActive.current = selectedText;
                selectedText.se = true;
                const relativeY = startTransformed.y - selectedText.c[1] - padding;
                const lineIndex = Math.floor(relativeY / lineHeight);
                const clickedLine = ((_b = (_a = selectedText.s) === null || _a === void 0 ? void 0 : _a.lines) === null || _b === void 0 ? void 0 : _b[lineIndex]) || '';
                const relativeX = startTransformed.x - selectedText.c[0] - padding;
                let charIndex = clickedLine.length;
                for (let i = 0; i < clickedLine.length; i++) {
                    if (relativeX < ui.measureText(clickedLine.slice(0, i + 1)).width) {
                        charIndex = i;
                        break;
                    }
                }
                selectedText.s.cursor = { line: lineIndex, char: charIndex };
            }
            else {
                item = {
                    i: (0, utils_1.getID)(),
                    v: 't',
                    p: [startTransformed.x, startTransformed.y],
                    ar: [15, lineHeight + (padding * 2)],
                    s: Object.assign(Object.assign({}, refs.textSettings.current), { lines: [''], cursor: { line: 0, char: 0 } }),
                    se: true,
                    a: date_1.OnesyDate.milliseconds
                };
                refs.textActive.current = item;
            }
        }
        else {
            // pen
            if (t === 'pen') {
                // point
                item = {
                    i: (0, utils_1.getID)(),
                    v: 'dp',
                    p: [transform(x - refs.move.current.x), transform(y - refs.move.current.y)],
                    ar: [ui.lineWidth / 2, 0, Math.PI * 2],
                    s: (0, utils_1.copy)(settings),
                    a: date_1.OnesyDate.milliseconds
                };
            }
            // circle, rectangle, line, line-arrow
            if (['circle', 'rectangle', 'triangle', 'line', 'line-arrow'].includes(t)) {
                item = {
                    i: (0, utils_1.getID)(),
                    p: [],
                    ar: [],
                    s: (0, utils_1.copy)(settings),
                    a: date_1.OnesyDate.milliseconds
                };
            }
            // pan
            if (t === 'pan') {
                // new move start
                refs.offset.current.x = refs.move.current.x;
                refs.offset.current.y = refs.move.current.y;
            }
            // image
            else if (t === 'image' && refs.image.current.complete && refs.image.current.src) {
                refs.aspectRatio.current = refs.image.current.width / refs.image.current.height;
                // Todo
                // add url of the image
                // instead of embeding the image
                item = {
                    i: (0, utils_1.getID)(),
                    v: 'i',
                    p: [],
                    ar: [],
                    s: {
                        // Todo
                        // remove in the future
                        image: refs.image.current,
                        aspectRatio: refs.aspectRatio.current
                    },
                    a: date_1.OnesyDate.milliseconds
                };
            }
        }
        if (item)
            add(item);
        filterItems();
        // render
        render();
        setMouseDown(true);
    }, []);
    const onMouseDown = react_1.default.useCallback((event) => {
        const { offsetX, offsetY, clientX, clientY } = event.nativeEvent;
        onInteractionDown({ offsetX, offsetY, clientX, clientY }, event);
    }, [onInteractionDown]);
    const onTouchStart = react_1.default.useCallback((event) => {
        // Get the first touch point
        const touch = event.touches[0];
        const { clientX, clientY } = touch;
        let { offsetX, offsetY } = touch;
        const targetElement = touch.target;
        if (targetElement instanceof HTMLElement) {
            // Get the bounding rectangle of the target element
            const rect = targetElement.getBoundingClientRect();
            // Calculate the offsetX and offsetY
            offsetX = touch.clientX - rect.left;
            offsetY = touch.clientY - rect.top;
        }
        onInteractionDown({ offsetX, offsetY, clientX, clientY }, event);
    }, [onInteractionDown]);
    const removeItems = react_1.default.useCallback(() => {
        // remove
        if (refs.remove.current.length) {
            const toRemove = [];
            for (const item of refs.remove.current) {
                const index = refs.items.current.findIndex(itemItems => itemItems === item);
                if (index > -1)
                    toRemove.push(item);
            }
            if (toRemove.length)
                remove(toRemove);
            refs.remove.current = [];
        }
    }, []);
    const onUpdateCoordinates = react_1.default.useCallback(() => {
        const items = getItems();
        items.forEach(item => {
            const p = (item === null || item === void 0 ? void 0 : item.p) || [];
            const ar = (item === null || item === void 0 ? void 0 : item.ar) || [];
            const s = (item === null || item === void 0 ? void 0 : item.s) || {};
            if (p.length) {
                // cache
                // x1, y1, width. height for position on the screen
                const v = item.v;
                // draw point
                if (v === 'dp') {
                    const lineWidth = s.lineWidth || 10;
                    item.c = [
                        p[0] - (lineWidth / 2),
                        p[1] - (lineWidth / 2),
                        lineWidth,
                        lineWidth
                    ];
                }
                // draw line
                else if (v === 'dl') {
                    const x = [];
                    const y = [];
                    for (let i = 0; i < p.length; i += 2) {
                        x.push(p[i]);
                        y.push(p[i + 1]);
                    }
                    const xMin = Math.min(...x);
                    const yMin = Math.min(...y);
                    const xMax = Math.max(...x);
                    const yMax = Math.max(...y);
                    item.c = [
                        xMin,
                        yMin,
                        xMax - xMin,
                        yMax - yMin
                    ];
                }
                // object line, object arrow
                else if (['ol', 'oa'].includes(v)) {
                    const x = [p[0], ar[0]];
                    const y = [p[1], ar[1]];
                    const xMin = Math.min(...x);
                    const yMin = Math.min(...y);
                    const xMax = Math.max(...x);
                    const yMax = Math.max(...y);
                    item.c = [
                        xMin,
                        yMin,
                        xMax - xMin,
                        yMax - yMin
                    ];
                }
                // object rectangle, object square
                else if (['or', 'os'].includes(v)) {
                    item.c = [
                        ...p,
                        ...ar
                    ];
                }
                //  object circle, object ellipse
                else if (['oc', 'oe'].includes(v)) {
                    if (v === 'oc') {
                        item.c = [
                            p[0] - ar[0],
                            p[1] - ar[0],
                            ar[0] * 2,
                            ar[0] * 2
                        ];
                    }
                    else {
                        item.c = [
                            p[0] - ar[0],
                            p[1] - ar[1],
                            ar[0] * 2,
                            ar[1] * 2
                        ];
                    }
                }
                // object triangle, object triangle equilateral
                else if (['ot', 'ote'].includes(v)) {
                    const [x1, y1, x2] = p;
                    const { height } = s;
                    item.c = [
                        x1,
                        y1 - height,
                        x2 - x1,
                        height
                    ];
                }
                // image
                else if (['i', 't'].includes(v)) {
                    item.c = [
                        ...p,
                        ...ar
                    ];
                }
            }
        });
    }, []);
    const onSelect = react_1.default.useCallback(() => {
        const select = refs.select.current;
        if (!select)
            return;
        const px1 = select.p[0];
        const px2 = px1 + select.ar[0];
        const py1 = select.p[1];
        const py2 = py1 + select.ar[1];
        const min = {
            x: Math.min(px1, px2),
            y: Math.min(py1, py2)
        };
        const max = {
            x: Math.max(px1, px2),
            y: Math.max(py1, py2)
        };
        const items = getItems();
        items.forEach(item => {
            const { c } = item;
            const [x1, y1] = c;
            let [x2, y2] = c;
            x2 = x1 + x2;
            y2 = y1 + y2;
            const minItem = {
                x: Math.min(x1, x2),
                y: Math.min(y1, y2)
            };
            const maxItem = {
                x: Math.max(x1, x2),
                y: Math.max(y1, y2)
            };
            const selected = (minItem.x >= min.x && maxItem.x <= max.x) && (minItem.y >= min.y && maxItem.y <= max.y);
            if (selected)
                item.se = true;
        });
    }, []);
    const onMouseUp = react_1.default.useCallback((event) => {
        if (refs.mouseDown.current) {
            refs.select.current = null;
            // update coordinates
            onUpdateCoordinates();
            // reset
            reset();
            // remove
            removeItems();
            console.log('items', refs.items.current);
            // onChange
            onChange();
            setMouseDown(false);
            if (['circle', 'rectangle', 'triangle', 'line', 'line-arrow', 'image'].includes(refs.previousTool.current)) {
                setTool('select');
            }
            render();
        }
    }, [onChange]);
    const updateTextBoxDimensions = react_1.default.useCallback((item) => {
        const ui = refs.ui.current.getContext('2d');
        const { lineHeight, padding } = refs.textSettings.current;
        ui.font = '16px Arial';
        const maxWidth = Math.max(...item.s.lines.map(line => ui.measureText(line).width));
        item.ar[0] = maxWidth + padding * 2.5;
        item.ar[1] = item.s.lines.length * lineHeight + padding * 2;
    }, []);
    const getPath = react_1.default.useCallback((item) => {
        const path = new Path2D();
        const { v, p, ar } = item;
        // draw line
        if (v === 'dl') {
            const points = (0, utils_1.arrayToParts)(p, 2);
            for (let i = 0; i < points.length - 1; i++) {
                const current = points[i];
                const next = points[i + 1];
                // calculate the control point for the curve
                const midX = (current[0] + next[0]) / 2;
                const midY = (current[1] + next[1]) / 2;
                if (i === 0) {
                    // start from the first point
                    path.moveTo(current[0], current[1]);
                }
                path.quadraticCurveTo(current[0], current[1], midX, midY);
            }
        }
        // draw point, object circle
        else if (['dp', 'oc'].includes(v) && ar.length === 3) {
            path.arc(p[0], p[1], ...ar);
        }
        // object ellipse
        else if (v === 'oe' && ar.length === 5) {
            path.ellipse(p[0], p[1], ...ar);
        }
        // object rectangle
        else if (['or', 'os'].includes(v)) {
            path.roundRect(p[0], p[1], ...ar);
        }
        // object line
        else if (['ol', 'oa'].includes(v) && ar.length === 2) {
            path.moveTo(p[0], p[1]);
            path.lineTo(...ar);
            // draw an arrow
            if (v === 'oa') {
                // Length of the arrowhead
                const headLength = 40;
                const angle = Math.atan2(ar[1] - p[1], ar[0] - p[0]);
                path.moveTo(ar[0], ar[1]);
                path.lineTo(ar[0] - headLength * Math.cos(angle - Math.PI / 6), ar[1] - headLength * Math.sin(angle - Math.PI / 6));
                path.moveTo(ar[0], ar[1]);
                path.lineTo(ar[0] - headLength * Math.cos(angle + Math.PI / 6), ar[1] - headLength * Math.sin(angle + Math.PI / 6));
            }
        }
        // object triangle
        else if (['ot', 'ote'].includes(v)) {
            path.moveTo(p[0], p[1]);
            path.lineTo(p[2], p[3]);
            path.lineTo(p[4], p[5]);
            path.closePath();
        }
        return path;
    }, []);
    const draw = react_1.default.useCallback((item) => {
        var _a, _b;
        const ui = refs.ui.current.getContext('2d');
        // settings
        Object.keys(item.s || {}).forEach(key => { var _a; return ui[key] = (_a = item.s) === null || _a === void 0 ? void 0 : _a[key]; });
        ui.globalAlpha = refs.remove.current.includes(item) ? 0.25 : ((_a = item.s) === null || _a === void 0 ? void 0 : _a.globalAlpha) !== undefined ? (_b = item.s) === null || _b === void 0 ? void 0 : _b.globalAlpha : 1;
        ui.beginPath();
        const path = getPath(item);
        const v = item.v;
        if (['dp'].includes(v))
            ui.fill(path);
        else if (['dl', 'oc', 'oe', 'or', 'os', 'ol', 'oa', 'ot', 'ote'].includes(v))
            ui.stroke(path);
    }, []);
    const drawGrid = react_1.default.useCallback(() => {
        const uiCanvas = refs.ui.current;
        const ui = refs.ui.current.getContext('2d');
        const zoom = refs.scale.current;
        const gridSize = 70;
        const offsetX = refs.move.current.x / zoom;
        const offsetY = refs.move.current.y / zoom;
        // Calculate start positions based on offsets
        const startX = Math.floor(-offsetX / gridSize) * gridSize;
        const startY = Math.floor(-offsetY / gridSize) * gridSize;
        const width = (uiCanvas.clientWidth * 1.5) / (zoom < 1 ? zoom : 1);
        const height = (uiCanvas.clientHeight * 1.5) / (zoom < 1 ? zoom : 1);
        if (gridSize < 30)
            return;
        // Draw main grid lines
        ui.globalAlpha = 1;
        ui.lineWidth = (zoom < 0.5 ? 0.3 : zoom <= 1 ? 0.5 : 0.7) / zoom;
        ui.strokeStyle = '#ccc';
        // grid
        for (let x = startX; x < width + Math.abs(startX); x += gridSize) {
            ui.beginPath();
            ui.moveTo(x, startY);
            ui.lineTo(x, height + startY);
            ui.stroke();
        }
        for (let y = startY; y < height + Math.abs(startY); y += gridSize) {
            ui.beginPath();
            ui.moveTo(startX, y);
            ui.lineTo(width + startX, y);
            ui.stroke();
        }
        // subgrid
        if (gridSize * zoom > 100) {
            // Draw subgrid lines if zoomed in
            const subGridSize = gridSize / 5;
            ui.lineWidth = (zoom <= 5 ? 0.6 : zoom <= 10 ? 0.8 : 1) / zoom;
            ui.strokeStyle = '#ddd';
            const dash = zoom < 1 ? 3 * zoom : 3 / zoom;
            ui.setLineDash([dash, dash]);
            for (let x = startX; x < width + Math.abs(startX); x += subGridSize) {
                // without overlap
                if (!(x % gridSize))
                    continue;
                ui.beginPath();
                ui.moveTo(x, startY);
                ui.lineTo(x, height + startY);
                ui.stroke();
            }
            for (let y = startY; y < height + Math.abs(startY); y += subGridSize) {
                // without overlap
                if (!(y % gridSize))
                    continue;
                ui.beginPath();
                ui.moveTo(startX, y);
                ui.lineTo(width + startX, y);
                ui.stroke();
            }
            ui.setLineDash([]); // Reset line dash
        }
    }, []);
    const drawImage = react_1.default.useCallback((item) => {
        const ui = refs.ui.current.getContext('2d');
        ui.globalAlpha = 1;
        ui.drawImage(item.s.image || refs.image.current, ...item.p, ...item.ar);
    }, []);
    const drawCursor = react_1.default.useCallback((item) => {
        if (!item || !item.s.cursor)
            return;
        const ui = refs.ui.current.getContext('2d');
        const { line, char } = item.s.cursor;
        const currentLine = item.s.lines[line] || '';
        const textWidth = ui.measureText(currentLine.slice(0, char)).width;
        const { padding, lineHeight } = refs.textSettings.current;
        const cursorX = item.p[0] + padding + textWidth;
        const cursorY = item.p[1] + padding + (line + 1) * lineHeight;
        ui.fillStyle = 'black';
        ui.fillRect(cursorX, cursorY - lineHeight + 3, 2, lineHeight - 5);
    }, []);
    const drawText = react_1.default.useCallback((item) => {
        const ui = refs.ui.current.getContext('2d');
        const zoom = refs.scale.current;
        const [x, y] = item.p;
        const [width, height] = item.ar;
        const { lineHeight, padding, fillStyle } = refs.textSettings.current;
        const selected = (refs.tool.current === 'text' && item.se);
        // Draw the box
        ui.globalAlpha = 1;
        ui.fillStyle = 'transparent';
        ui.fillRect(x, y, width, height);
        ui.lineWidth = 1 / zoom;
        ui.strokeStyle = selected ? colorSelect : 'transparent';
        ui.strokeRect(x, y, width, height);
        // Draw the text
        ui.fillStyle = fillStyle || 'black';
        ui.font = '16px Arial';
        item.s.lines.forEach((line, index) => {
            ui.fillText(line, x + padding, y + padding + (index + 1) * lineHeight - 5);
        });
        if (selected)
            drawCursor(item);
    }, []);
    const drawSelect = react_1.default.useCallback((item) => {
        const ui = refs.ui.current.getContext('2d');
        const [x, y, width, height] = item.c || [];
        const path = new Path2D();
        path.rect(x, y, width, height);
        ui.globalAlpha = 1;
        ui.strokeStyle = colorSelect;
        ui.lineCap = 'square';
        ui.lineJoin = 'bevel';
        ui.lineWidth = 1 / refs.scale.current;
        ui.stroke(path);
    }, []);
    const drawSelection = react_1.default.useCallback(() => {
        const ui = refs.ui.current.getContext('2d');
        const zoom = refs.scale.current;
        // canvas selection
        const select = refs.select.current;
        if (select) {
            ui.globalAlpha = 1;
            ui.globalCompositeOperation = 'source-over';
            ui.lineWidth = 1 / zoom;
            ui.lineCap = 'square';
            ui.lineJoin = 'bevel';
            ui.strokeStyle = colorSelect;
            ui.fillStyle = colorSelectBackground;
            const path = getPath(select);
            ui.fill(path);
            ui.stroke(path);
        }
    }, []);
    const render = react_1.default.useCallback(() => {
        const ui = refs.ui.current.getContext('2d');
        const items = refs.items.current.filter(Boolean);
        // methods
        ui.clearRect(0, 0, refs.ui.current.width, refs.ui.current.height);
        ui.save();
        // pan
        ui.translate(refs.move.current.x, refs.move.current.y);
        // zoom
        ui.scale(refs.scale.current, refs.scale.current);
        // grid
        if (refs.grid.current)
            drawGrid();
        // draw
        items.forEach(item => {
            // image
            if (item.v === 'i' && item.ar.length === 2)
                drawImage(item);
            // text
            else if (item.v === 't')
                drawText(item);
            // other
            else
                draw(item);
            // select
            if (item.se)
                drawSelect(item);
        });
        // canvas selection
        drawSelection();
        ui.restore();
    }, []);
    // Snap angle to nearest multiple of 15 degrees
    const snapToAngle = react_1.default.useCallback((dx, dy) => {
        // Current angle in radians
        const angle = Math.atan2(dy, dx);
        // Snap to nearest 15 degrees
        const snappedAngle = Math.round(angle / (Math.PI / 12)) * (Math.PI / 12);
        // Length of the vector
        const length = Math.sqrt(dx * dx + dy * dy);
        return {
            x: Math.cos(snappedAngle) * length,
            y: Math.sin(snappedAngle) * length
        };
    }, []);
    const onMoveItems = react_1.default.useCallback((x, y) => {
        const itemsSelected = getItems(true);
        itemsSelected.forEach(item => {
            const v = item.v;
            // draw line
            if (v === 'dl') {
                item.p = item.p.map((value, index) => {
                    return index % 2 ? value + y : value + x;
                });
            }
            // rectangle, draw point, object circle, ellipse, object line, object arrow, object triangle, image, text
            if (['or', 'os', 'dp', 'oc', 'oe', 'ol', 'oa', 'ot', 'ote', 'i', 't'].includes(v)) {
                item.p[0] += x;
                item.p[1] += y;
            }
            // object line
            if (['ol', 'oa'].includes(v)) {
                item.ar[0] += x;
                item.ar[1] += y;
            }
            // object triangle
            if (['ot', 'ote'].includes(v)) {
                item.p[2] += x;
                item.p[4] += x;
                item.p[3] += y;
                item.p[5] += y;
            }
        });
        onUpdateCoordinates();
    }, []);
    const onMove = react_1.default.useCallback((body, event) => {
        if (!refs.on.current)
            return;
        const { offsetX: x, offsetY: y, clientX, clientY } = body;
        const xo = transform(x - refs.move.current.x);
        const yo = transform(y - refs.move.current.y);
        const ui = refs.ui.current.getContext('2d');
        const rect = refs.ui.current.getBoundingClientRect();
        const currentX = clientX - rect.left;
        const currentY = clientY - rect.top;
        const start = refs.start.current;
        const startTransformed = {
            x: transform(start.x - refs.move.current.x),
            y: transform(start.y - refs.move.current.y)
        };
        const item = getItem();
        const items = getItems();
        const t = refs.tool.current;
        const shiftKey = event.shiftKey;
        const zoom = refs.scale.current;
        refs.mouseMove.current.current = { x: clientX / zoom, y: clientY / zoom };
        refs.mouseMove.current.delta = { x: refs.mouseMove.current.previous ? refs.mouseMove.current.current.x - refs.mouseMove.current.previous.x : 0, y: refs.mouseMove.current.previous ? refs.mouseMove.current.current.y - refs.mouseMove.current.previous.y : 0 };
        refs.mouseMove.current.previous = Object.assign({}, refs.mouseMove.current.current);
        const delta = refs.mouseMove.current.delta;
        // select
        if (t === 'select') {
            if (!refs.moveStarted.current)
                refs.moveStarted.current = true;
            if (refs.select.current) {
                unselectAll();
                const width = currentX - start.x;
                const height = currentY - start.y;
                const isSquare = shiftKey;
                const radius = 0;
                if (isSquare) {
                    const side = Math.min(Math.abs(width), Math.abs(height));
                    refs.select.current.v = 'os';
                    refs.select.current.p = [startTransformed.x, startTransformed.y];
                    refs.select.current.ar = [transform(Math.sign(width) * side), transform(Math.sign(height) * side), radius];
                }
                else {
                    refs.select.current.v = 'or';
                    refs.select.current.p = [startTransformed.x, startTransformed.y];
                    refs.select.current.ar = [transform(width), transform(height), radius];
                }
            }
            else
                onMoveItems(delta.x, delta.y);
        }
        // pen
        else if (t === 'pen' && item) {
            // same path from draw point, to move
            if (!refs.moveStarted.current) {
                item.v = 'dl';
                refs.moveStarted.current = true;
            }
            // Add the current point to the path
            item.p.push(xo, yo);
        }
        // pan
        else if (t === 'pan') {
            refs.move.current.x = x - refs.previous.current.x + refs.offset.current.x;
            refs.move.current.y = y - refs.previous.current.y + refs.offset.current.y;
        }
        // eraser
        else if (t === 'eraser') {
            // find all items that x, y collides with, with certain radius
            for (const i of items) {
                const isPointInStroke = ui.isPointInStroke(getPath(i), xo, yo);
                if (isPointInStroke)
                    refs.remove.current.push(i);
            }
        }
        // object line, object arrow
        else if (['line', 'line-arrow'].includes(t)) {
            const snapAt15Degrees = shiftKey;
            let endX = currentX;
            let endY = currentY;
            if (snapAt15Degrees) {
                const snapped = snapToAngle(currentX - start.x, currentY - start.y);
                endX = start.x + snapped.x;
                endY = start.y + snapped.y;
            }
            item.v = t === 'line' ? 'ol' : 'oa';
            item.p = [startTransformed.x, startTransformed.y];
            item.ar = [transform(endX - refs.move.current.x), transform(endY - refs.move.current.y)];
        }
        // object circle
        else if (t === 'circle') {
            const width = currentX - start.x;
            const height = currentY - start.y;
            const isCircle = shiftKey;
            if (isCircle) {
                const radius = Math.min(Math.abs(width), Math.abs(height)) / 2;
                const centerX = start.x + Math.sign(width) * radius;
                const centerY = start.y + Math.sign(height) * radius;
                item.v = 'oc';
                item.p = [transform(centerX - refs.move.current.x), transform(centerY - refs.move.current.y)];
                item.ar = [transform(radius), 0, Math.PI * 2];
            }
            else {
                item.v = 'oe';
                item.p = [transform((start.x + width / 2) - refs.move.current.x), transform((start.y + height / 2) - refs.move.current.y)];
                item.ar = [transform(Math.abs(width) / 2), transform(Math.abs(height) / 2), 0, 0, Math.PI * 2];
            }
        }
        // object rectangle
        else if (t === 'rectangle') {
            const width = currentX - start.x;
            const height = currentY - start.y;
            const isSquare = shiftKey;
            const radius = 0;
            if (isSquare) {
                const side = Math.min(Math.abs(width), Math.abs(height));
                item.v = 'os';
                item.p = [startTransformed.x, startTransformed.y];
                item.ar = [transform(Math.sign(width) * side), transform(Math.sign(height) * side), radius];
            }
            else {
                item.v = 'or';
                item.p = [startTransformed.x, startTransformed.y];
                item.ar = [transform(width), transform(height), radius];
            }
        }
        // object triangle
        else if (['triangle'].includes(t)) {
            const endX = xo;
            const endY = yo;
            const base = Math.abs(endX - startTransformed.x);
            const height = shiftKey ? base * Math.sqrt(3) / 2 : Math.abs(endY - startTransformed.y);
            const points = [startTransformed.x, startTransformed.y, endX, startTransformed.y, startTransformed.x + (endX - startTransformed.x) / 2, startTransformed.y - height];
            item.v = shiftKey ? 'ote' : 'ot';
            item.p = points;
            item.s = Object.assign(Object.assign({}, item.s), { height });
        }
        // image
        else if (t === 'image' && (refs.image.current.complete && refs.image.current.src)) {
            const width = transform(currentX - start.x);
            const height = transform(currentY - start.y);
            const keepAspectRatio = !shiftKey;
            let currentWidth;
            let currentHeight;
            if (keepAspectRatio) {
                if (Math.abs(width / refs.aspectRatio.current) <= Math.abs(height)) {
                    currentWidth = width;
                    currentHeight = width / refs.aspectRatio.current;
                }
                else {
                    currentWidth = height * refs.aspectRatio.current;
                    currentHeight = height;
                }
            }
            else {
                currentWidth = width;
                currentHeight = height;
            }
            if (keepAspectRatio) {
                if ((width < 0 && currentWidth > 0) ||
                    (width > 0 && currentWidth < 0))
                    currentWidth *= -1;
                if ((height < 0 && currentHeight > 0) ||
                    (height > 0 && currentHeight < 0))
                    currentHeight *= -1;
            }
            item.p = [startTransformed.x, startTransformed.y];
            item.ar = [currentWidth, currentHeight];
        }
        // select box
        onSelect();
        // render
        render();
    }, []);
    const onMouseMove = react_1.default.useCallback((event) => {
        const { offsetX, offsetY, clientX, clientY } = event;
        onMove({ offsetX, offsetY, clientX, clientY }, event);
    }, [onMove]);
    const onTouchMove = react_1.default.useCallback((event) => {
        // Get the first touch point
        const touch = event.touches[0];
        const { clientX, clientY } = touch;
        let { offsetX, offsetY } = touch;
        const targetElement = touch.target;
        if (targetElement instanceof HTMLElement) {
            // Get the bounding rectangle of the target element
            const rect = targetElement.getBoundingClientRect();
            // Calculate the offsetX and offsetY
            offsetX = touch.clientX - rect.left;
            offsetY = touch.clientY - rect.top;
        }
        onMove({ offsetX, offsetY, clientX, clientY }, event);
    }, [onInteractionDown]);
    const undo = react_1.default.useCallback(() => {
        if (!refs.undo.current.length)
            return;
        // add current state to redo
        refs.redo.current.push([...getItems()]);
        // restore the undo state
        refs.items.current = refs.undo.current.pop();
        // render
        render();
    }, []);
    const redo = react_1.default.useCallback(() => {
        if (!refs.redo.current.length)
            return;
        // add current state to undo
        refs.undo.current.push([...getItems()]);
        // restore the redo state
        refs.items.current = refs.redo.current.pop();
        // render
        render();
    }, []);
    const onWheel = react_1.default.useCallback((eventReact) => {
        const event = eventReact.nativeEvent;
        // zoom
        if (event.metaKey || event.ctrlKey) {
            setTool('zoom');
            refs.toolUpdateAuto.current = true;
            const zoomFactor = 1.054;
            const mouseX = event.offsetX;
            const mouseY = event.offsetY;
            const scale = refs.scale.current;
            // Convert mouse position to canvas coordinates
            const canvasX = (mouseX - refs.move.current.x) / scale;
            const canvasY = (mouseY - refs.move.current.y) / scale;
            // Adjust scale
            const zoomIn = event.deltaY < 0;
            const newScale = zoomIn ? scale * zoomFactor : scale / zoomFactor;
            if (newScale <= (maxZoom / 100) && newScale >= (minZoom / 100)) {
                // Update origin to focus on mouse position
                refs.move.current.x -= canvasX * (newScale - scale);
                refs.move.current.y -= canvasY * (newScale - scale);
                refs.scale.current = newScale;
                render();
            }
        }
        // pan
        else if (!refs.mouseDown.current) {
            refs.move.current.x -= event.deltaX;
            refs.move.current.y -= event.deltaY;
            render();
        }
    }, [minZoom, maxZoom]);
    const onPaste = react_1.default.useCallback((event) => {
        event.preventDefault();
        // Get clipboard data
        const items = Array.from(event.clipboardData.items);
        // Loop through clipboard items to find an image
        for (const item of items) {
            if (item.type.startsWith('image/')) {
                // Get the image file
                const blob = item.getAsFile();
                refs.image.current = new Image();
                // Load the image and draw it on the canvas
                refs.image.current.onload = () => {
                    refs.aspectRatio.current = refs.image.current.width / refs.image.current.height;
                    // Todo
                    // 1) Upload the image first, than read it in image src
                    // 2) Add url of the image
                    // instead of embeding the image
                    const item_ = {
                        i: (0, utils_1.getID)(),
                        v: 'i',
                        p: [],
                        ar: [],
                        s: {
                            // Todo
                            // remove in the future
                            image: refs.image.current,
                            aspectRatio: refs.aspectRatio.current
                        },
                        a: date_1.OnesyDate.milliseconds
                    };
                    add(item_);
                    setTool('image');
                };
                // Create an object URL for the blob and set it as the image source
                refs.image.current.src = URL.createObjectURL(blob);
                break;
            }
        }
    }, []);
    react_1.default.useEffect(() => {
        const method = () => {
            const width = refs.root.current.offsetWidth;
            const height = refs.root.current.offsetHeight;
            setSize({ width, height });
        };
        const onKeyUp = (event) => {
            if (refs.toolUpdateAuto.current)
                setTool(refs.previousTool.current || 'pen');
        };
        const onKeyDown = async (event) => {
            var _a, _b, _c, _d;
            refs.toolUpdateAuto.current = false;
            const { key } = event;
            const itemsAll = [...refs.items.current].filter(Boolean);
            const t = refs.tool.current;
            const zoom = refs.scale.current;
            if (['a', 'A'].includes(key) && (event.metaKey || event.ctrlKey)) {
                event.preventDefault();
                selectAll();
                render();
            }
            else if (t === 'select' && ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Backspace'].includes(key)) {
                const value = event.shiftKey ? 10 : 1;
                if (key === 'ArrowUp')
                    onMoveItems(0, -value / zoom);
                if (key === 'ArrowDown')
                    onMoveItems(0, value / zoom);
                if (key === 'ArrowLeft')
                    onMoveItems(-value / zoom, 0);
                if (key === 'ArrowRight')
                    onMoveItems(value / zoom, 0);
                if (key === 'Backspace') {
                    const toRemove = [];
                    refs.items.current.forEach(item => {
                        if (item.se)
                            toRemove.push(item);
                    });
                    if (toRemove.length)
                        remove(toRemove);
                }
                render();
            }
            else if (key === 'Escape') {
                setTool('select');
                refs.textActive.current = null;
                unselectAll();
                filterItems();
                render();
            }
            else if (tool === 'text') {
                const selectedTextBox = itemsAll.find(item => item.v === 't' && item.se);
                if (!selectedTextBox)
                    return;
                const { line, char } = selectedTextBox.s.cursor;
                const lines = selectedTextBox.s.lines;
                const currentLine = lines[line];
                if (['ArrowLeft', 'ArrowRight'].includes(key)) {
                    event.preventDefault();
                    selectedTextBox.s.cursor.char += key === 'ArrowLeft' ? -1 : 1;
                    if (selectedTextBox.s.cursor.char < 0) {
                        selectedTextBox.s.cursor.line--;
                        selectedTextBox.s.cursor.char = (_a = lines[selectedTextBox.s.cursor.line]) === null || _a === void 0 ? void 0 : _a.length;
                    }
                    else if ((selectedTextBox.s.cursor.char > ((_b = lines[line]) === null || _b === void 0 ? void 0 : _b.length)) && line !== lines.length - 1) {
                        selectedTextBox.s.cursor.line++;
                        selectedTextBox.s.cursor.char = 0;
                    }
                    selectedTextBox.s.cursor.line = (0, utils_1.clamp)(selectedTextBox.s.cursor.line, 0, lines.length - 1);
                    selectedTextBox.s.cursor.char = (0, utils_1.clamp)(selectedTextBox.s.cursor.char, 0, (_c = lines[selectedTextBox.s.cursor.line]) === null || _c === void 0 ? void 0 : _c.length);
                }
                if (['ArrowUp', 'ArrowDown'].includes(key)) {
                    event.preventDefault();
                    selectedTextBox.s.cursor.line += key === 'ArrowUp' ? -1 : 1;
                    selectedTextBox.s.cursor.line = (0, utils_1.clamp)(selectedTextBox.s.cursor.line, 0, lines.length - 1);
                    selectedTextBox.s.cursor.char = (0, utils_1.clamp)(selectedTextBox.s.cursor.char, 0, (_d = lines[selectedTextBox.s.cursor.line]) === null || _d === void 0 ? void 0 : _d.length);
                }
                else if (key === 'Enter') {
                    event.preventDefault();
                    const newLine = currentLine.slice(char);
                    lines[line] = currentLine.slice(0, char);
                    lines.splice(line + 1, 0, newLine);
                    selectedTextBox.s.cursor.line++;
                    selectedTextBox.s.cursor.char = 0;
                }
                else if (key === 'Backspace') {
                    event.preventDefault();
                    if (char > 0) {
                        lines[line] = currentLine.slice(0, char - 1) + currentLine.slice(char);
                        selectedTextBox.s.cursor.char--;
                    }
                    else if (line > 0) {
                        const prevLine = lines[line - 1];
                        selectedTextBox.s.cursor.char = prevLine.length;
                        lines[line - 1] += lines[line];
                        lines.splice(line, 1);
                        selectedTextBox.s.cursor.line--;
                    }
                }
                else if (key.length === 1) {
                    if ([' '].includes(key))
                        event.preventDefault();
                    let textClipboard = '';
                    const isPaste = (event.ctrlKey || event.metaKey) && ['v', 'V'].includes(key);
                    if (isPaste) {
                        try {
                            textClipboard = await window.navigator.clipboard.readText();
                        }
                        catch (error) { }
                    }
                    const text = isPaste ? textClipboard : key;
                    selectedTextBox.s.lines[line] = currentLine.slice(0, char) + text + currentLine.slice(char);
                    selectedTextBox.s.cursor.char += text.length;
                }
                updateTextBoxDimensions(selectedTextBox);
                selectedTextBox.c = [
                    ...selectedTextBox.p,
                    ...selectedTextBox.ar
                ];
                render();
            }
            else {
                if (event.metaKey && key === 'z') {
                    if (event.shiftKey)
                        redo();
                    else
                        undo();
                }
                if (key === ' ') {
                    refs.toolUpdateAuto.current = true;
                    setTool('pan');
                }
                // tools
                if (event.shiftKey) {
                    if (['E', 'D', 'P', 'S', 'C', 'R', 'I', 'L', 'A', 'T', 'G'].includes(key))
                        refs.toolUpdateAuto.current = false;
                    if (key === 'E')
                        setTool('eraser');
                    if (key === 'D')
                        setTool('pen');
                    if (key === 'P')
                        setTool('pan');
                    if (key === 'S')
                        setTool('select');
                    if (key === 'C')
                        setTool('circle');
                    if (key === 'R')
                        setTool('rectangle');
                    if (key === 'I')
                        setTool('triangle');
                    if (key === 'L')
                        setTool('line');
                    if (key === 'A')
                        setTool('line-arrow');
                    if (key === 'T')
                        setTool('text');
                    if (key === 'G') {
                        setGrid(previous => !previous);
                        render();
                    }
                }
            }
        };
        window.addEventListener('resize', method);
        window.document.addEventListener('mouseup', onMouseUp);
        window.document.addEventListener('touchend', onMouseUp);
        window.document.addEventListener('mousemove', onMouseMove);
        window.document.addEventListener('touchmove', onTouchMove);
        window.document.addEventListener('keyup', onKeyUp);
        window.document.addEventListener('keydown', onKeyDown);
        window.document.addEventListener('paste', onPaste);
        method();
        init();
        return () => {
            window.removeEventListener('resize', method);
            window.document.removeEventListener('mouseup', onMouseUp);
            window.document.removeEventListener('touchend', onMouseUp);
            window.document.removeEventListener('mousemove', onMouseMove);
            window.document.removeEventListener('touchmove', onTouchMove);
            window.document.removeEventListener('keyup', onKeyUp);
            window.document.removeEventListener('keydown', onKeyDown);
            window.document.removeEventListener('paste', onPaste);
        };
    }, []);
    const onChangeInputFile = react_1.default.useCallback((event) => {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = eventReader => {
                refs.image.current = new Image();
                refs.image.current.src = eventReader.target.result;
                refs.toolUpdateAuto.current = true;
                event.target.value = '';
                setTool('image');
            };
            reader.readAsDataURL(file);
        }
    }, []);
    const propsCanvas = {
        width: size.width,
        height: size.height,
        disabled: !loaded,
        style: {
            width: size.width,
            height: size.height,
        }
    };
    return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: (item) => {
            if (ref) {
                if ((0, utils_1.is)('function', ref))
                    ref(item);
                else
                    ref.current = item;
            }
            refs.root.current = item;
        }, flex: true, fullWidth: true, className: (0, style_react_1.classNames)([
            (0, utils_2.staticClassName)('Whiteboard', theme) && [
                'onesy-Whiteboard-root'
            ],
            className,
            classes.root
        ]) }, other, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ id: 'controls', style: { position: 'absolute', zIndex: 14, top: 12, left: '50%' } }, { children: (0, jsx_runtime_1.jsx)("input", { type: 'file', accept: 'image/*', onChange: onChangeInputFile }) })), (0, jsx_runtime_1.jsx)("canvas", Object.assign({ ref: refs.ui, onMouseDown: onMouseDown, onTouchStart: onTouchStart, onWheel: onWheel, className: (0, style_react_1.classNames)([
                    classes.canvas,
                    classes.interactive,
                    tool === 'pan' && classes[!mouseDown ? 'pan' : 'panning'],
                    tool === 'image' && classes.image,
                    tool === 'text' && classes.text,
                    ['pen', 'eraser', 'zoom'].includes(tool) && classes[tool],
                    ['circle', 'rectangle', 'triangle', 'line', 'arrow'].includes(tool) && classes.object
                ]) }, propsCanvas))] })));
});
Whiteboard.displayName = 'onesy-Whiteboard';
exports.default = Whiteboard;