@onesy/ui-react 1.0.130 → 1.0.132

package/Whiteboard/Whiteboard.js

@@ -1,1334 +1,1434 @@
 "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'
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _date = require("@onesy/date");
+var _Line = _interopRequireDefault(require("../Line"));
+var _utils2 = require("../utils");
+const _excluded = ["valueDefault", "onChange", "minZoom", "maxZoom", "grid", "settings", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const useStyle = (0, _styleReact.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'
     }
-}), { name: 'onesy-Whiteboard' });
+  },
+  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 = {
+const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyWhiteboard) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const Line = _react.default.useMemo(() => {
+    var _theme$elements;
+    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.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'
-        })
+      },
+      className
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [size, setSize] = _react.default.useState({});
+  const [tool, setTool] = _react.default.useState('select');
+  const [mouseDown, setMouseDown] = _react.default.useState(false);
+  const [grid, setGrid] = _react.default.useState(gridProps);
+  const [loaded, setLoaded] = _react.default.useState(false);
+  const refs = {
+    root: _react.default.useRef(null),
+    ui: _react.default.useRef(null),
+    interactive: _react.default.useRef(null),
+    on: _react.default.useRef(false),
+    items: _react.default.useRef(valueDefault || []),
+    previous: _react.default.useRef({
+      x: 0,
+      y: 0
+    }),
+    previousMouse: _react.default.useRef({
+      x: 0,
+      y: 0
+    }),
+    moveStarted: _react.default.useRef(false),
+    undo: _react.default.useRef([]),
+    redo: _react.default.useRef([]),
+    move: _react.default.useRef({
+      x: 0,
+      y: 0
+    }),
+    offset: _react.default.useRef({
+      x: 0,
+      y: 0
+    }),
+    start: _react.default.useRef({
+      x: 0,
+      y: 0
+    }),
+    end: _react.default.useRef({
+      x: 0,
+      y: 0
+    }),
+    scale: _react.default.useRef(1),
+    mouseDown: _react.default.useRef(mouseDown),
+    mouseMove: _react.default.useRef({
+      current: {
+        x: 0,
+        y: 0
+      },
+      previous: undefined,
+      delta: {
+        x: 0,
+        y: 0
+      }
+    }),
+    tool: _react.default.useRef(tool),
+    previousTool: _react.default.useRef(tool),
+    toolUpdateAuto: _react.default.useRef(false),
+    remove: _react.default.useRef([]),
+    grid: _react.default.useRef(grid),
+    typing: _react.default.useRef(false),
+    image: _react.default.useRef((0, _utils.isEnvironment)('browser') && new Image()),
+    aspectRatio: _react.default.useRef(1),
+    select: _react.default.useRef(null),
+    textActive: _react.default.useRef(null),
+    textSettings: _react.default.useRef({
+      lineHeight: 20,
+      padding: 5,
+      fillStyle: 'black'
+    })
+  };
+  refs.mouseDown.current = mouseDown;
+  refs.tool.current = tool;
+  refs.grid.current = grid;
+  const init = _react.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.default.useEffect(() => {
+    if (!['zoom'].includes(tool)) refs.previousTool.current = tool;
+  }, [tool]);
+  const onChange = _react.default.useCallback(() => {
+    if ((0, _utils.is)('function', onChangeProps)) onChangeProps(refs.items.current);
+  }, [onChangeProps]);
+  const getItems = _react.default.useCallback((selected = undefined) => refs.items.current.filter(item => selected === undefined || item.se === selected), []);
+  const getItem = _react.default.useCallback(() => refs.items.current[refs.items.current.length - 1], []);
+  const filterItems = _react.default.useCallback(() => {
+    const toRemove = refs.items.current.filter(item => {
+      var _item$s;
+      if (refs.tool.current === 'text' && item !== refs.textActive.current) item.se = false;
+      const lines = ((_item$s = item.s) === null || _item$s === void 0 ? void 0 : _item$s.lines) || [];
+      return !(item.v !== 't' || item === refs.textActive.current || lines.length > 1 || lines[0].length);
+    });
+    if (toRemove.length) remove(toRemove);
+  }, []);
+  const add = _react.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.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.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.default.useCallback(coordinate => coordinate / refs.scale.current, []);
+  const selectAll = _react.default.useCallback(() => {
+    return [...refs.items.current].filter(Boolean).map(item => {
+      item.se = true;
+      return item;
+    });
+  }, []);
+  const unselectAll = _react.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.default.useCallback((body, eventReact) => {
+    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.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)
+    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: []
         };
-        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;
+      }
+      if (!shift && !(clicked !== null && clicked !== 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) {
+        var _selectedText$s;
+        refs.textActive.current = selectedText;
+        selectedText.se = true;
+        const relativeY = startTransformed.y - selectedText.c[1] - padding;
+        const lineIndex = Math.floor(relativeY / lineHeight);
+        const clickedLine = ((_selectedText$s = selectedText.s) === null || _selectedText$s === void 0 || (_selectedText$s = _selectedText$s.lines) === null || _selectedText$s === void 0 ? void 0 : _selectedText$s[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;
+          }
         }
-        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
-                    ];
-                }
+        selectedText.s.cursor = {
+          line: lineIndex,
+          char: charIndex
+        };
+      } else {
+        item = {
+          i: (0, _utils.getID)(),
+          v: 't',
+          p: [startTransformed.x, startTransformed.y],
+          ar: [15, lineHeight + padding * 2],
+          s: _objectSpread(_objectSpread({}, refs.textSettings.current), {}, {
+            lines: [''],
+            cursor: {
+              line: 0,
+              char: 0
             }
-        });
-    }, []);
-    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)
+          }),
+          se: true,
+          a: _date.OnesyDate.milliseconds
         };
-        const max = {
-            x: Math.max(px1, px2),
-            y: Math.max(py1, py2)
+        refs.textActive.current = item;
+      }
+    } else {
+      // pen
+      if (t === 'pen') {
+        // point
+        item = {
+          i: (0, _utils.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.copy)(settings),
+          a: _date.OnesyDate.milliseconds
         };
-        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();
+      }
+      // circle, rectangle, line, line-arrow
+      if (['circle', 'rectangle', 'triangle', 'line', 'line-arrow'].includes(t)) {
+        item = {
+          i: (0, _utils.getID)(),
+          p: [],
+          ar: [],
+          s: (0, _utils.copy)(settings),
+          a: _date.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.getID)(),
+          v: 'i',
+          p: [],
+          ar: [],
+          s: {
+            // Todo
+            // remove in the future
+            image: refs.image.current,
+            aspectRatio: refs.aspectRatio.current
+          },
+          a: _date.OnesyDate.milliseconds
+        };
+      }
+    }
+    if (item) add(item);
+    filterItems();
+
+    // render
+    render();
+    setMouseDown(true);
+  }, []);
+  const onMouseDown = _react.default.useCallback(event => {
+    const {
+      offsetX,
+      offsetY,
+      clientX,
+      clientY
+    } = event.nativeEvent;
+    onInteractionDown({
+      offsetX,
+      offsetY,
+      clientX,
+      clientY
+    }, event);
+  }, [onInteractionDown]);
+  const onTouchStart = _react.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.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.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];
         }
-    }, [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);
-            }
+        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];
         }
-        // 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 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 rectangle, object square
         else if (['or', 'os'].includes(v)) {
-            path.roundRect(p[0], p[1], ...ar);
+          item.c = [...p, ...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 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, object triangle equilateral
         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();
+          const [x1, y1, x2] = p;
+          const {
+            height
+          } = s;
+          item.c = [x1, y1 - height, x2 - x1, height];
         }
-        // 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
+        // image
+        else if (['i', 't'].includes(v)) {
+          item.c = [...p, ...ar];
         }
-    }, []);
-    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 onSelect = _react.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.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.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.default.useCallback(item => {
+    const path = new Path2D();
+    const {
+      v,
+      p,
+      ar
+    } = item;
+
+    // draw line
+    if (v === 'dl') {
+      const points = (0, _utils.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]);
         }
-    }, []);
-    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;
-            }
+        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.default.useCallback(item => {
+    var _item$s3, _item$s4;
+    const ui = refs.ui.current.getContext('2d');
+
+    // settings
+    Object.keys(item.s || {}).forEach(key => {
+      var _item$s2;
+      return ui[key] = (_item$s2 = item.s) === null || _item$s2 === void 0 ? void 0 : _item$s2[key];
+    });
+    ui.globalAlpha = refs.remove.current.includes(item) ? 0.25 : ((_item$s3 = item.s) === null || _item$s3 === void 0 ? void 0 : _item$s3.globalAlpha) !== undefined ? (_item$s4 = item.s) === null || _item$s4 === void 0 ? void 0 : _item$s4.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.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.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.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.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.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.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.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.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.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;
         });
-        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 });
+      }
+
+      // 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.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 = _objectSpread({}, 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];
         }
-        // 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];
+      } 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 = _objectSpread(_objectSpread({}, 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;
         }
-        // select box
-        onSelect();
-        // render
+      } 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.default.useCallback(event => {
+    const {
+      offsetX,
+      offsetY,
+      clientX,
+      clientY
+    } = event;
+    onMove({
+      offsetX,
+      offsetY,
+      clientX,
+      clientY
+    }, event);
+  }, [onMove]);
+  const onTouchMove = _react.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.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.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.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();
-    }, []);
-    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;
+      }
+    }
+    // pan
+    else if (!refs.mouseDown.current) {
+      refs.move.current.x -= event.deltaX;
+      refs.move.current.y -= event.deltaY;
+      render();
+    }
+  }, [minZoom, maxZoom]);
+  const onPaste = _react.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.getID)(),
+            v: 'i',
+            p: [],
+            ar: [],
+            s: {
+              // Todo
+              // remove in the future
+              image: refs.image.current,
+              aspectRatio: refs.aspectRatio.current
+            },
+            a: _date.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.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 => {
+      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);
         }
-        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
+      } else if (key === 'Escape') {
+        setTool('select');
+        refs.textActive.current = null;
+        unselectAll();
+        filterItems();
         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();
-            }
+      } 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)) {
+          var _lines$line, _lines$selectedTextBo2;
+          event.preventDefault();
+          selectedTextBox.s.cursor.char += key === 'ArrowLeft' ? -1 : 1;
+          if (selectedTextBox.s.cursor.char < 0) {
+            var _lines$selectedTextBo;
+            selectedTextBox.s.cursor.line--;
+            selectedTextBox.s.cursor.char = (_lines$selectedTextBo = lines[selectedTextBox.s.cursor.line]) === null || _lines$selectedTextBo === void 0 ? void 0 : _lines$selectedTextBo.length;
+          } else if (selectedTextBox.s.cursor.char > ((_lines$line = lines[line]) === null || _lines$line === void 0 ? void 0 : _lines$line.length) && line !== lines.length - 1) {
+            selectedTextBox.s.cursor.line++;
+            selectedTextBox.s.cursor.char = 0;
+          }
+          selectedTextBox.s.cursor.line = (0, _utils.clamp)(selectedTextBox.s.cursor.line, 0, lines.length - 1);
+          selectedTextBox.s.cursor.char = (0, _utils.clamp)(selectedTextBox.s.cursor.char, 0, (_lines$selectedTextBo2 = lines[selectedTextBox.s.cursor.line]) === null || _lines$selectedTextBo2 === void 0 ? void 0 : _lines$selectedTextBo2.length);
         }
-        // pan
-        else if (!refs.mouseDown.current) {
-            refs.move.current.x -= event.deltaX;
-            refs.move.current.y -= event.deltaY;
-            render();
+        if (['ArrowUp', 'ArrowDown'].includes(key)) {
+          var _lines$selectedTextBo3;
+          event.preventDefault();
+          selectedTextBox.s.cursor.line += key === 'ArrowUp' ? -1 : 1;
+          selectedTextBox.s.cursor.line = (0, _utils.clamp)(selectedTextBox.s.cursor.line, 0, lines.length - 1);
+          selectedTextBox.s.cursor.char = (0, _utils.clamp)(selectedTextBox.s.cursor.char, 0, (_lines$selectedTextBo3 = lines[selectedTextBox.s.cursor.line]) === null || _lines$selectedTextBo3 === void 0 ? void 0 : _lines$selectedTextBo3.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;
         }
-    }, [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;
-            }
+        updateTextBoxDimensions(selectedTextBox);
+        selectedTextBox.c = [...selectedTextBox.p, ...selectedTextBox.ar];
+        render();
+      } else {
+        if (event.metaKey && key === 'z') {
+          if (event.shiftKey) redo();else undo();
         }
-    }, []);
-    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);
+        if (key === ' ') {
+          refs.toolUpdateAuto.current = true;
+          setTool('pan');
         }
-    }, []);
-    const propsCanvas = {
-        width: size.width,
-        height: size.height,
-        disabled: !loaded,
-        style: {
-            width: size.width,
-            height: size.height,
+
+        // 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();
+          }
         }
+      }
     };
-    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))] })));
+    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.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 /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    flex: true,
+    fullWidth: true,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Whiteboard', theme) && ['onesy-Whiteboard-root'], className, classes.root])
+  }, other), /*#__PURE__*/_react.default.createElement("div", {
+    id: "controls",
+    style: {
+      position: 'absolute',
+      zIndex: 14,
+      top: 12,
+      left: '50%'
+    }
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "file",
+    accept: "image/*",
+    onChange: onChangeInputFile
+  })), /*#__PURE__*/_react.default.createElement("canvas", (0, _extends2.default)({
+    ref: refs.ui,
+    onMouseDown: onMouseDown,
+    onTouchStart: onTouchStart,
+    onWheel: onWheel,
+    className: (0, _styleReact.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;
+var _default = exports.default = Whiteboard;