@onesy/ui-react 1.0.163 → 1.0.165

package/Whiteboard/Whiteboard.js

@@ -70,15 +70,10 @@ const useStyle = (0, _styleReact.style)(theme => ({
 const colorSelect = 'hsl(244deg 64% 64%)';
 const colorSelectBackground = 'hsla(244deg 64% 64% / 4%)';
 const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
   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 props = _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_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
   const {
       valueDefault,
       onChange: onChangeProps,
@@ -171,7 +166,7 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   refs.mouseDown.current = mouseDown;
   refs.tool.current = tool;
   refs.grid.current = grid;
-  const init = _react.default.useCallback(() => {
+  const init = () => {
     // Todo
     // items
     // load all of the images in memory and attach theme to items as image elements
@@ -181,25 +176,25 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       render();
       setLoaded(true);
     }, 40);
-  }, []);
+  };
   _react.default.useEffect(() => {
     if (!['zoom'].includes(tool)) refs.previousTool.current = tool;
   }, [tool]);
-  const onChange = _react.default.useCallback(() => {
+  const onChange = () => {
     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);
+  };
+  const getItems = (selected = undefined) => refs.items.current.filter(item => selected === undefined || item.se === selected);
+  const getItem = () => refs.items.current[refs.items.current.length - 1];
+  const filterItems = () => {
+    const toRemove = refs.items.current.filter(item_0 => {
+      var _item_0$s;
+      if (refs.tool.current === 'text' && item_0 !== refs.textActive.current) item_0.se = false;
+      const lines = ((_item_0$s = item_0.s) === null || _item_0$s === void 0 ? void 0 : _item_0$s.lines) || [];
+      return !(item_0.v !== 't' || item_0 === refs.textActive.current || lines.length > 1 || lines[0].length);
     });
     if (toRemove.length) remove(toRemove);
-  }, []);
-  const add = _react.default.useCallback(toAdd => {
+  };
+  const add = toAdd => {
     const itemsAdd = (Array.isArray(toAdd) ? toAdd : [toAdd]).filter(Boolean);
     const items = getItems();
 
@@ -209,22 +204,22 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     // 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);
+  };
+  const remove = toRemove_0 => {
+    const itemsRemove = (Array.isArray(toRemove_0) ? toRemove_0 : [toRemove_0]).filter(Boolean);
+    const items_0 = getItems();
+    const IDs = itemsRemove === null || itemsRemove === void 0 ? void 0 : itemsRemove.map(item_1 => item_1.i);
+    const toRemoveIDs = items_0.filter(item_2 => IDs.includes(item_2.i)).map(item_3 => item_3.i);
     if (!toRemoveIDs) return;
 
     // add to undo stack snapshot of current state
-    refs.undo.current.push([...items]);
+    refs.undo.current.push([...items_0]);
 
     // clear redo stack
     refs.redo.current = [];
-    refs.items.current = refs.items.current.filter(item => !toRemoveIDs.includes(item.i));
-  }, []);
-  const reset = _react.default.useCallback(() => {
+    refs.items.current = refs.items.current.filter(item_4 => !toRemoveIDs.includes(item_4.i));
+  };
+  const reset = () => {
     refs.on.current = false;
     refs.moveStarted.current = false;
     refs.image.current = null;
@@ -232,25 +227,25 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     // 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 transform = coordinate => coordinate / refs.scale.current;
+  const selectAll = () => {
+    return [...refs.items.current].filter(Boolean).map(item_5 => {
+      item_5.se = true;
+      return item_5;
     });
-  }, []);
-  const unselectAll = _react.default.useCallback(eventReact => {
+  };
+  const unselectAll = 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;
+    return [...refs.items.current].filter(Boolean).map(item_6 => {
+      if (shift) return item_6;
+      item_6.se = false;
+      return item_6;
     });
-  }, []);
-  const onInteractionDown = _react.default.useCallback((body, eventReact) => {
-    const event = (eventReact === null || eventReact === void 0 ? void 0 : eventReact.nativeEvent) || eventReact;
+  };
+  const onInteractionDown = (body, eventReact_0) => {
+    const event_0 = (eventReact_0 === null || eventReact_0 === void 0 ? void 0 : eventReact_0.nativeEvent) || eventReact_0;
     const {
       offsetX: x,
       offsetY: y,
@@ -273,7 +268,7 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         y: 0
       }
     };
-    const shift = event === null || event === void 0 ? void 0 : event.shiftKey;
+    const shift_0 = event_0 === null || event_0 === void 0 ? void 0 : event_0.shiftKey;
     const ui = refs.ui.current.getContext('2d');
     const rect = refs.ui.current.getBoundingClientRect();
     refs.start.current.x = clientX - rect.left;
@@ -285,15 +280,15 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       y: transform(start.y - refs.move.current.y)
     };
     Object.keys(settings).forEach(item_ => ui[item_] = settings[item_]);
-    let item;
-    const items = getItems();
+    let item_7;
+    const items_1 = 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 itemsReversed = [...items_1].reverse();
+      const itemsClicked = itemsReversed.filter(item__0 => {
+        return item__0.c && startTransformed.x >= item__0.c[0] && startTransformed.x <= item__0.c[0] + item__0.c[2] && startTransformed.y >= item__0.c[1] && startTransformed.y <= item__0.c[1] + item__0.c[3];
       });
       const itemsSelected = getItems(true);
       const clicked = itemsClicked[0];
@@ -304,16 +299,16 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
           ar: []
         };
       }
-      if (!shift && !(clicked !== null && clicked !== void 0 && clicked.se && itemsSelected.length > 1)) unselectAll();
+      if (!shift_0 && !(clicked !== null && clicked !== void 0 && clicked.se && itemsSelected.length > 1)) unselectAll();
       if (clicked) {
-        clicked.se = shift ? !clicked.se : true;
+        clicked.se = shift_0 ? !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]);
+      const selectedText = items_1.find(item__1 => item__1.c && startTransformed.x >= item__1.c[0] && startTransformed.x <= item__1.c[0] + item__1.c[2] && startTransformed.y >= item__1.c[1] && startTransformed.y <= item__1.c[1] + item__1.c[3]);
       if (selectedText) {
         var _selectedText$s;
         refs.textActive.current = selectedText;
@@ -334,7 +329,7 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
           char: charIndex
         };
       } else {
-        item = {
+        item_7 = {
           i: (0, _utils.getID)(),
           v: 't',
           p: [startTransformed.x, startTransformed.y],
@@ -349,13 +344,13 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
           se: true,
           a: _date.OnesyDate.milliseconds
         };
-        refs.textActive.current = item;
+        refs.textActive.current = item_7;
       }
     } else {
       // pen
       if (t === 'pen') {
         // point
-        item = {
+        item_7 = {
           i: (0, _utils.getID)(),
           v: 'dp',
           p: [transform(x - refs.move.current.x), transform(y - refs.move.current.y)],
@@ -366,7 +361,7 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }
       // circle, rectangle, line, line-arrow
       if (['circle', 'rectangle', 'triangle', 'line', 'line-arrow'].includes(t)) {
-        item = {
+        item_7 = {
           i: (0, _utils.getID)(),
           p: [],
           ar: [],
@@ -387,7 +382,7 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         // Todo
         // add url of the image
         // instead of embeding the image
-        item = {
+        item_7 = {
           i: (0, _utils.getID)(),
           v: 'i',
           p: [],
@@ -402,116 +397,116 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         };
       }
     }
-    if (item) add(item);
+    if (item_7) add(item_7);
     filterItems();
 
     // render
     render();
     setMouseDown(true);
-  }, []);
-  const onMouseDown = _react.default.useCallback(event => {
+  };
+  const onMouseDown = event_1 => {
     const {
       offsetX,
       offsetY,
-      clientX,
-      clientY
-    } = event.nativeEvent;
+      clientX: clientX_0,
+      clientY: clientY_0
+    } = event_1.nativeEvent;
     onInteractionDown({
       offsetX,
       offsetY,
-      clientX,
-      clientY
-    }, event);
-  }, [onInteractionDown]);
-  const onTouchStart = _react.default.useCallback(event => {
+      clientX: clientX_0,
+      clientY: clientY_0
+    }, event_1);
+  };
+  const onTouchStart = event_2 => {
     // Get the first touch point
-    const touch = event.touches[0];
+    const touch = event_2.touches[0];
     const {
-      clientX,
-      clientY
+      clientX: clientX_1,
+      clientY: clientY_1
     } = touch;
     let {
-      offsetX,
-      offsetY
+      offsetX: offsetX_0,
+      offsetY: offsetY_0
     } = touch;
     const targetElement = touch.target;
     if (targetElement instanceof HTMLElement) {
       // Get the bounding rectangle of the target element
-      const rect = targetElement.getBoundingClientRect();
+      const rect_0 = targetElement.getBoundingClientRect();
 
       // Calculate the offsetX and offsetY
-      offsetX = touch.clientX - rect.left;
-      offsetY = touch.clientY - rect.top;
+      offsetX_0 = touch.clientX - rect_0.left;
+      offsetY_0 = touch.clientY - rect_0.top;
     }
     onInteractionDown({
-      offsetX,
-      offsetY,
-      clientX,
-      clientY
-    }, event);
-  }, [onInteractionDown]);
-  const removeItems = _react.default.useCallback(() => {
+      offsetX: offsetX_0,
+      offsetY: offsetY_0,
+      clientX: clientX_1,
+      clientY: clientY_1
+    }, event_2);
+  };
+  const removeItems = () => {
     // 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);
+      const toRemove_1 = [];
+      for (const item_8 of refs.remove.current) {
+        const index = refs.items.current.findIndex(itemItems => itemItems === item_8);
+        if (index > -1) toRemove_1.push(item_8);
       }
-      if (toRemove.length) remove(toRemove);
+      if (toRemove_1.length) remove(toRemove_1);
       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) || {};
+  };
+  const onUpdateCoordinates = () => {
+    const items_2 = getItems();
+    items_2.forEach(item_9 => {
+      const p = (item_9 === null || item_9 === void 0 ? void 0 : item_9.p) || [];
+      const ar = (item_9 === null || item_9 === void 0 ? void 0 : item_9.ar) || [];
+      const s = (item_9 === null || item_9 === void 0 ? void 0 : item_9.s) || {};
       if (p.length) {
         // cache
         // x1, y1, width. height for position on the screen
-        const v = item.v;
+        const v = item_9.v;
 
         // draw point
         if (v === 'dp') {
           const lineWidth = s.lineWidth || 10;
-          item.c = [p[0] - lineWidth / 2, p[1] - lineWidth / 2, lineWidth, lineWidth];
+          item_9.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 x_0 = [];
+          const y_0 = [];
+          for (let i_0 = 0; i_0 < p.length; i_0 += 2) {
+            x_0.push(p[i_0]);
+            y_0.push(p[i_0 + 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];
+          const xMin = Math.min(...x_0);
+          const yMin = Math.min(...y_0);
+          const xMax = Math.max(...x_0);
+          const yMax = Math.max(...y_0);
+          item_9.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];
+          const x_1 = [p[0], ar[0]];
+          const y_1 = [p[1], ar[1]];
+          const xMin_0 = Math.min(...x_1);
+          const yMin_0 = Math.min(...y_1);
+          const xMax_0 = Math.max(...x_1);
+          const yMax_0 = Math.max(...y_1);
+          item_9.c = [xMin_0, yMin_0, xMax_0 - xMin_0, yMax_0 - yMin_0];
         }
         // object rectangle, object square
         else if (['or', 'os'].includes(v)) {
-          item.c = [...p, ...ar];
+          item_9.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];
+            item_9.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];
+            item_9.c = [p[0] - ar[0], p[1] - ar[1], ar[0] * 2, ar[1] * 2];
           }
         }
         // object triangle, object triangle equilateral
@@ -520,16 +515,16 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
           const {
             height
           } = s;
-          item.c = [x1, y1 - height, x2 - x1, height];
+          item_9.c = [x1, y1 - height, x2 - x1, height];
         }
         // image
         else if (['i', 't'].includes(v)) {
-          item.c = [...p, ...ar];
+          item_9.c = [...p, ...ar];
         }
       }
     });
-  }, []);
-  const onSelect = _react.default.useCallback(() => {
+  };
+  const onSelect = () => {
     const select = refs.select.current;
     if (!select) return;
     const px1 = select.p[0];
@@ -544,28 +539,28 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       x: Math.max(px1, px2),
       y: Math.max(py1, py2)
     };
-    const items = getItems();
-    items.forEach(item => {
+    const items_3 = getItems();
+    items_3.forEach(item_10 => {
       const {
         c
-      } = item;
-      const [x1, y1] = c;
-      let [x2, y2] = c;
-      x2 = x1 + x2;
-      y2 = y1 + y2;
+      } = item_10;
+      const [x1_0, y1_0] = c;
+      let [x2_0, y2] = c;
+      x2_0 = x1_0 + x2_0;
+      y2 = y1_0 + y2;
       const minItem = {
-        x: Math.min(x1, x2),
-        y: Math.min(y1, y2)
+        x: Math.min(x1_0, x2_0),
+        y: Math.min(y1_0, y2)
       };
       const maxItem = {
-        x: Math.max(x1, x2),
-        y: Math.max(y1, y2)
+        x: Math.max(x1_0, x2_0),
+        y: Math.max(y1_0, 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 selected_0 = minItem.x >= min.x && maxItem.x <= max.x && minItem.y >= min.y && maxItem.y <= max.y;
+      if (selected_0) item_10.se = true;
     });
-  }, []);
-  const onMouseUp = _react.default.useCallback(event => {
+  };
+  const onMouseUp = event_3 => {
     if (refs.mouseDown.current) {
       refs.select.current = null;
 
@@ -587,37 +582,37 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }
       render();
     }
-  }, [onChange]);
-  const updateTextBoxDimensions = _react.default.useCallback(item => {
-    const ui = refs.ui.current.getContext('2d');
+  };
+  const updateTextBoxDimensions = item_11 => {
+    const ui_0 = refs.ui.current.getContext('2d');
     const {
-      lineHeight,
-      padding
+      lineHeight: lineHeight_0,
+      padding: padding_0
     } = 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 => {
+    ui_0.font = '16px Arial';
+    const maxWidth = Math.max(...item_11.s.lines.map(line => ui_0.measureText(line).width));
+    item_11.ar[0] = maxWidth + padding_0 * 2.5;
+    item_11.ar[1] = item_11.s.lines.length * lineHeight_0 + padding_0 * 2;
+  };
+  const getPath = item_12 => {
     const path = new Path2D();
     const {
-      v,
-      p,
-      ar
-    } = item;
+      v: v_0,
+      p: p_0,
+      ar: ar_0
+    } = item_12;
 
     // 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];
+    if (v_0 === 'dl') {
+      const points = (0, _utils.arrayToParts)(p_0, 2);
+      for (let i_1 = 0; i_1 < points.length - 1; i_1++) {
+        const current = points[i_1];
+        const next = points[i_1 + 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) {
+        if (i_1 === 0) {
           // start from the first point
           path.moveTo(current[0], current[1]);
         }
@@ -625,308 +620,308 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }
     }
     // draw point, object circle
-    else if (['dp', 'oc'].includes(v) && ar.length === 3) {
-      path.arc(p[0], p[1], ...ar);
+    else if (['dp', 'oc'].includes(v_0) && ar_0.length === 3) {
+      path.arc(p_0[0], p_0[1], ...ar_0);
     }
     // object ellipse
-    else if (v === 'oe' && ar.length === 5) {
-      path.ellipse(p[0], p[1], ...ar);
+    else if (v_0 === 'oe' && ar_0.length === 5) {
+      path.ellipse(p_0[0], p_0[1], ...ar_0);
     }
     // object rectangle
-    else if (['or', 'os'].includes(v)) {
-      path.roundRect(p[0], p[1], ...ar);
+    else if (['or', 'os'].includes(v_0)) {
+      path.roundRect(p_0[0], p_0[1], ...ar_0);
     }
     // object line
-    else if (['ol', 'oa'].includes(v) && ar.length === 2) {
-      path.moveTo(p[0], p[1]);
-      path.lineTo(...ar);
+    else if (['ol', 'oa'].includes(v_0) && ar_0.length === 2) {
+      path.moveTo(p_0[0], p_0[1]);
+      path.lineTo(...ar_0);
 
       // draw an arrow
-      if (v === 'oa') {
+      if (v_0 === '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));
+        const angle = Math.atan2(ar_0[1] - p_0[1], ar_0[0] - p_0[0]);
+        path.moveTo(ar_0[0], ar_0[1]);
+        path.lineTo(ar_0[0] - headLength * Math.cos(angle - Math.PI / 6), ar_0[1] - headLength * Math.sin(angle - Math.PI / 6));
+        path.moveTo(ar_0[0], ar_0[1]);
+        path.lineTo(ar_0[0] - headLength * Math.cos(angle + Math.PI / 6), ar_0[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]);
+    else if (['ot', 'ote'].includes(v_0)) {
+      path.moveTo(p_0[0], p_0[1]);
+      path.lineTo(p_0[2], p_0[3]);
+      path.lineTo(p_0[4], p_0[5]);
       path.closePath();
     }
     return path;
-  }, []);
-  const draw = _react.default.useCallback(item => {
-    var _item$s3, _item$s4;
-    const ui = refs.ui.current.getContext('2d');
+  };
+  const draw = item_13 => {
+    var _item_13$s2, _item_13$s3;
+    const ui_1 = 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];
+    Object.keys(item_13.s || {}).forEach(key => {
+      var _item_13$s;
+      return ui_1[key] = (_item_13$s = item_13.s) === null || _item_13$s === void 0 ? void 0 : _item_13$s[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(() => {
+    ui_1.globalAlpha = refs.remove.current.includes(item_13) ? 0.25 : ((_item_13$s2 = item_13.s) === null || _item_13$s2 === void 0 ? void 0 : _item_13$s2.globalAlpha) !== undefined ? (_item_13$s3 = item_13.s) === null || _item_13$s3 === void 0 ? void 0 : _item_13$s3.globalAlpha : 1;
+    ui_1.beginPath();
+    const path_0 = getPath(item_13);
+    const v_1 = item_13.v;
+    if (['dp'].includes(v_1)) ui_1.fill(path_0);else if (['dl', 'oc', 'oe', 'or', 'os', 'ol', 'oa', 'ot', 'ote'].includes(v_1)) ui_1.stroke(path_0);
+  };
+  const drawGrid = () => {
     const uiCanvas = refs.ui.current;
-    const ui = refs.ui.current.getContext('2d');
+    const ui_2 = 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;
+    const offsetX_1 = refs.move.current.x / zoom;
+    const offsetY_1 = 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 startX = Math.floor(-offsetX_1 / gridSize) * gridSize;
+    const startY = Math.floor(-offsetY_1 / gridSize) * gridSize;
     const width = uiCanvas.clientWidth * 1.5 / (zoom < 1 ? zoom : 1);
-    const height = uiCanvas.clientHeight * 1.5 / (zoom < 1 ? zoom : 1);
+    const height_0 = 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';
+    ui_2.globalAlpha = 1;
+    ui_2.lineWidth = (zoom < 0.5 ? 0.3 : zoom <= 1 ? 0.5 : 0.7) / zoom;
+    ui_2.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 x_2 = startX; x_2 < width + Math.abs(startX); x_2 += gridSize) {
+      ui_2.beginPath();
+      ui_2.moveTo(x_2, startY);
+      ui_2.lineTo(x_2, height_0 + startY);
+      ui_2.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();
+    for (let y_2 = startY; y_2 < height_0 + Math.abs(startY); y_2 += gridSize) {
+      ui_2.beginPath();
+      ui_2.moveTo(startX, y_2);
+      ui_2.lineTo(width + startX, y_2);
+      ui_2.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';
+      ui_2.lineWidth = (zoom <= 5 ? 0.6 : zoom <= 10 ? 0.8 : 1) / zoom;
+      ui_2.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) {
+      ui_2.setLineDash([dash, dash]);
+      for (let x_3 = startX; x_3 < width + Math.abs(startX); x_3 += subGridSize) {
         // without overlap
-        if (!(x % gridSize)) continue;
-        ui.beginPath();
-        ui.moveTo(x, startY);
-        ui.lineTo(x, height + startY);
-        ui.stroke();
+        if (!(x_3 % gridSize)) continue;
+        ui_2.beginPath();
+        ui_2.moveTo(x_3, startY);
+        ui_2.lineTo(x_3, height_0 + startY);
+        ui_2.stroke();
       }
-      for (let y = startY; y < height + Math.abs(startY); y += subGridSize) {
+      for (let y_3 = startY; y_3 < height_0 + Math.abs(startY); y_3 += subGridSize) {
         // without overlap
-        if (!(y % gridSize)) continue;
-        ui.beginPath();
-        ui.moveTo(startX, y);
-        ui.lineTo(width + startX, y);
-        ui.stroke();
+        if (!(y_3 % gridSize)) continue;
+        ui_2.beginPath();
+        ui_2.moveTo(startX, y_3);
+        ui_2.lineTo(width + startX, y_3);
+        ui_2.stroke();
       }
-      ui.setLineDash([]); // Reset line dash
+      ui_2.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 drawImage = item_14 => {
+    const ui_3 = refs.ui.current.getContext('2d');
+    ui_3.globalAlpha = 1;
+    ui_3.drawImage(item_14.s.image || refs.image.current, ...item_14.p, ...item_14.ar);
+  };
+  const drawCursor = item_15 => {
+    if (!item_15 || !item_15.s.cursor) return;
+    const ui_4 = refs.ui.current.getContext('2d');
     const {
-      line,
+      line: line_0,
       char
-    } = item.s.cursor;
-    const currentLine = item.s.lines[line] || '';
-    const textWidth = ui.measureText(currentLine.slice(0, char)).width;
+    } = item_15.s.cursor;
+    const currentLine = item_15.s.lines[line_0] || '';
+    const textWidth = ui_4.measureText(currentLine.slice(0, char)).width;
     const {
-      padding,
-      lineHeight
+      padding: padding_1,
+      lineHeight: lineHeight_1
     } = 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 cursorX = item_15.p[0] + padding_1 + textWidth;
+    const cursorY = item_15.p[1] + padding_1 + (line_0 + 1) * lineHeight_1;
+    ui_4.fillStyle = 'black';
+    ui_4.fillRect(cursorX, cursorY - lineHeight_1 + 3, 2, lineHeight_1 - 5);
+  };
+  const drawText = item_16 => {
+    const ui_5 = refs.ui.current.getContext('2d');
+    const zoom_0 = refs.scale.current;
+    const [x_4, y_4] = item_16.p;
+    const [width_0, height_1] = item_16.ar;
     const {
-      lineHeight,
-      padding,
+      lineHeight: lineHeight_2,
+      padding: padding_2,
       fillStyle
     } = refs.textSettings.current;
-    const selected = refs.tool.current === 'text' && item.se;
+    const selected_1 = refs.tool.current === 'text' && item_16.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);
+    ui_5.globalAlpha = 1;
+    ui_5.fillStyle = 'transparent';
+    ui_5.fillRect(x_4, y_4, width_0, height_1);
+    ui_5.lineWidth = 1 / zoom_0;
+    ui_5.strokeStyle = selected_1 ? colorSelect : 'transparent';
+    ui_5.strokeRect(x_4, y_4, width_0, height_1);
 
     // 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);
+    ui_5.fillStyle = fillStyle || 'black';
+    ui_5.font = '16px Arial';
+    item_16.s.lines.forEach((line_1, index_0) => {
+      ui_5.fillText(line_1, x_4 + padding_2, y_4 + padding_2 + (index_0 + 1) * lineHeight_2 - 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;
+    if (selected_1) drawCursor(item_16);
+  };
+  const drawSelect = item_17 => {
+    const ui_6 = refs.ui.current.getContext('2d');
+    const [x_5, y_5, width_1, height_2] = item_17.c || [];
+    const path_1 = new Path2D();
+    path_1.rect(x_5, y_5, width_1, height_2);
+    ui_6.globalAlpha = 1;
+    ui_6.strokeStyle = colorSelect;
+    ui_6.lineCap = 'square';
+    ui_6.lineJoin = 'bevel';
+    ui_6.lineWidth = 1 / refs.scale.current;
+    ui_6.stroke(path_1);
+  };
+  const drawSelection = () => {
+    const ui_7 = refs.ui.current.getContext('2d');
+    const zoom_1 = 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 select_0 = refs.select.current;
+    if (select_0) {
+      ui_7.globalAlpha = 1;
+      ui_7.globalCompositeOperation = 'source-over';
+      ui_7.lineWidth = 1 / zoom_1;
+      ui_7.lineCap = 'square';
+      ui_7.lineJoin = 'bevel';
+      ui_7.strokeStyle = colorSelect;
+      ui_7.fillStyle = colorSelectBackground;
+      const path_2 = getPath(select_0);
+      ui_7.fill(path_2);
+      ui_7.stroke(path_2);
     }
-  }, []);
-  const render = _react.default.useCallback(() => {
-    const ui = refs.ui.current.getContext('2d');
-    const items = refs.items.current.filter(Boolean);
+  };
+  const render = () => {
+    const ui_8 = refs.ui.current.getContext('2d');
+    const items_4 = refs.items.current.filter(Boolean);
 
     // methods
-    ui.clearRect(0, 0, refs.ui.current.width, refs.ui.current.height);
-    ui.save();
+    ui_8.clearRect(0, 0, refs.ui.current.width, refs.ui.current.height);
+    ui_8.save();
 
     // pan
-    ui.translate(refs.move.current.x, refs.move.current.y);
+    ui_8.translate(refs.move.current.x, refs.move.current.y);
     // zoom
-    ui.scale(refs.scale.current, refs.scale.current);
+    ui_8.scale(refs.scale.current, refs.scale.current);
 
     // grid
     if (refs.grid.current) drawGrid();
 
     // draw
-    items.forEach(item => {
+    items_4.forEach(item_18 => {
       // image
-      if (item.v === 'i' && item.ar.length === 2) drawImage(item);
+      if (item_18.v === 'i' && item_18.ar.length === 2) drawImage(item_18);
       // text
-      else if (item.v === 't') drawText(item);
+      else if (item_18.v === 't') drawText(item_18);
       // other
-      else draw(item);
+      else draw(item_18);
 
       // select
-      if (item.se) drawSelect(item);
+      if (item_18.se) drawSelect(item_18);
     });
 
     // canvas selection
     drawSelection();
-    ui.restore();
-  }, []);
+    ui_8.restore();
+  };
 
   // Snap angle to nearest multiple of 15 degrees
-  const snapToAngle = _react.default.useCallback((dx, dy) => {
+  const snapToAngle = (dx, dy) => {
     // Current angle in radians
-    const angle = Math.atan2(dy, dx);
+    const angle_0 = Math.atan2(dy, dx);
     // Snap to nearest 15 degrees
-    const snappedAngle = Math.round(angle / (Math.PI / 12)) * (Math.PI / 12);
+    const snappedAngle = Math.round(angle_0 / (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;
+  };
+  const onMoveItems = (x_6, y_6) => {
+    const itemsSelected_0 = getItems(true);
+    itemsSelected_0.forEach(item_19 => {
+      const v_2 = item_19.v;
 
       // draw line
-      if (v === 'dl') {
-        item.p = item.p.map((value, index) => {
-          return index % 2 ? value + y : value + x;
+      if (v_2 === 'dl') {
+        item_19.p = item_19.p.map((value, index_1) => {
+          return index_1 % 2 ? value + y_6 : value + x_6;
         });
       }
 
       // 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;
+      if (['or', 'os', 'dp', 'oc', 'oe', 'ol', 'oa', 'ot', 'ote', 'i', 't'].includes(v_2)) {
+        item_19.p[0] += x_6;
+        item_19.p[1] += y_6;
       }
 
       // object line
-      if (['ol', 'oa'].includes(v)) {
-        item.ar[0] += x;
-        item.ar[1] += y;
+      if (['ol', 'oa'].includes(v_2)) {
+        item_19.ar[0] += x_6;
+        item_19.ar[1] += y_6;
       }
 
       // object triangle
-      if (['ot', 'ote'].includes(v)) {
-        item.p[2] += x;
-        item.p[4] += x;
-        item.p[3] += y;
-        item.p[5] += y;
+      if (['ot', 'ote'].includes(v_2)) {
+        item_19.p[2] += x_6;
+        item_19.p[4] += x_6;
+        item_19.p[3] += y_6;
+        item_19.p[5] += y_6;
       }
     });
     onUpdateCoordinates();
-  }, []);
-  const onMove = _react.default.useCallback((body, event) => {
+  };
+  const onMove = (body_0, event_4) => {
     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)
+      offsetX: x_7,
+      offsetY: y_7,
+      clientX: clientX_2,
+      clientY: clientY_2
+    } = body_0;
+    const xo = transform(x_7 - refs.move.current.x);
+    const yo = transform(y_7 - refs.move.current.y);
+    const ui_9 = refs.ui.current.getContext('2d');
+    const rect_1 = refs.ui.current.getBoundingClientRect();
+    const currentX = clientX_2 - rect_1.left;
+    const currentY = clientY_2 - rect_1.top;
+    const start_0 = refs.start.current;
+    const startTransformed_0 = {
+      x: transform(start_0.x - refs.move.current.x),
+      y: transform(start_0.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;
+    const item_20 = getItem();
+    const items_5 = getItems();
+    const t_0 = refs.tool.current;
+    const shiftKey = event_4.shiftKey;
+    const zoom_2 = refs.scale.current;
     refs.mouseMove.current.current = {
-      x: clientX / zoom,
-      y: clientY / zoom
+      x: clientX_2 / zoom_2,
+      y: clientY_2 / zoom_2
     };
     refs.mouseMove.current.delta = {
       x: refs.mouseMove.current.previous ? refs.mouseMove.current.current.x - refs.mouseMove.current.previous.x : 0,
@@ -936,137 +931,137 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     const delta = refs.mouseMove.current.delta;
 
     // select
-    if (t === 'select') {
+    if (t_0 === '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 width_2 = currentX - start_0.x;
+        const height_3 = currentY - start_0.y;
         const isSquare = shiftKey;
         const radius = 0;
         if (isSquare) {
-          const side = Math.min(Math.abs(width), Math.abs(height));
+          const side = Math.min(Math.abs(width_2), Math.abs(height_3));
           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];
+          refs.select.current.p = [startTransformed_0.x, startTransformed_0.y];
+          refs.select.current.ar = [transform(Math.sign(width_2) * side), transform(Math.sign(height_3) * 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];
+          refs.select.current.p = [startTransformed_0.x, startTransformed_0.y];
+          refs.select.current.ar = [transform(width_2), transform(height_3), radius];
         }
       } else onMoveItems(delta.x, delta.y);
     }
     // pen
-    else if (t === 'pen' && item) {
+    else if (t_0 === 'pen' && item_20) {
       // same path from draw point, to move
       if (!refs.moveStarted.current) {
-        item.v = 'dl';
+        item_20.v = 'dl';
         refs.moveStarted.current = true;
       }
 
       // Add the current point to the path
-      item.p.push(xo, yo);
+      item_20.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;
+    else if (t_0 === 'pan') {
+      refs.move.current.x = x_7 - refs.previous.current.x + refs.offset.current.x;
+      refs.move.current.y = y_7 - refs.previous.current.y + refs.offset.current.y;
     }
     // eraser
-    else if (t === 'eraser') {
+    else if (t_0 === '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);
+      for (const i_2 of items_5) {
+        const isPointInStroke = ui_9.isPointInStroke(getPath(i_2), xo, yo);
+        if (isPointInStroke) refs.remove.current.push(i_2);
       }
     }
     // object line, object arrow
-    else if (['line', 'line-arrow'].includes(t)) {
+    else if (['line', 'line-arrow'].includes(t_0)) {
       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;
+        const snapped = snapToAngle(currentX - start_0.x, currentY - start_0.y);
+        endX = start_0.x + snapped.x;
+        endY = start_0.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)];
+      item_20.v = t_0 === 'line' ? 'ol' : 'oa';
+      item_20.p = [startTransformed_0.x, startTransformed_0.y];
+      item_20.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;
+    else if (t_0 === 'circle') {
+      const width_3 = currentX - start_0.x;
+      const height_4 = currentY - start_0.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];
+        const radius_0 = Math.min(Math.abs(width_3), Math.abs(height_4)) / 2;
+        const centerX = start_0.x + Math.sign(width_3) * radius_0;
+        const centerY = start_0.y + Math.sign(height_4) * radius_0;
+        item_20.v = 'oc';
+        item_20.p = [transform(centerX - refs.move.current.x), transform(centerY - refs.move.current.y)];
+        item_20.ar = [transform(radius_0), 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];
+        item_20.v = 'oe';
+        item_20.p = [transform(start_0.x + width_3 / 2 - refs.move.current.x), transform(start_0.y + height_4 / 2 - refs.move.current.y)];
+        item_20.ar = [transform(Math.abs(width_3) / 2), transform(Math.abs(height_4) / 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 if (t_0 === 'rectangle') {
+      const width_4 = currentX - start_0.x;
+      const height_5 = currentY - start_0.y;
+      const isSquare_0 = shiftKey;
+      const radius_1 = 0;
+      if (isSquare_0) {
+        const side_0 = Math.min(Math.abs(width_4), Math.abs(height_5));
+        item_20.v = 'os';
+        item_20.p = [startTransformed_0.x, startTransformed_0.y];
+        item_20.ar = [transform(Math.sign(width_4) * side_0), transform(Math.sign(height_5) * side_0), radius_1];
       } else {
-        item.v = 'or';
-        item.p = [startTransformed.x, startTransformed.y];
-        item.ar = [transform(width), transform(height), radius];
+        item_20.v = 'or';
+        item_20.p = [startTransformed_0.x, startTransformed_0.y];
+        item_20.ar = [transform(width_4), transform(height_5), radius_1];
       }
     }
     // 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
+    else if (['triangle'].includes(t_0)) {
+      const endX_0 = xo;
+      const endY_0 = yo;
+      const base = Math.abs(endX_0 - startTransformed_0.x);
+      const height_6 = shiftKey ? base * Math.sqrt(3) / 2 : Math.abs(endY_0 - startTransformed_0.y);
+      const points_0 = [startTransformed_0.x, startTransformed_0.y, endX_0, startTransformed_0.y, startTransformed_0.x + (endX_0 - startTransformed_0.x) / 2, startTransformed_0.y - height_6];
+      item_20.v = shiftKey ? 'ote' : 'ot';
+      item_20.p = points_0;
+      item_20.s = _objectSpread(_objectSpread({}, item_20.s), {}, {
+        height: height_6
       });
     }
     // 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);
+    else if (t_0 === 'image' && refs.image.current.complete && refs.image.current.src) {
+      const width_5 = transform(currentX - start_0.x);
+      const height_7 = transform(currentY - start_0.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;
+        if (Math.abs(width_5 / refs.aspectRatio.current) <= Math.abs(height_7)) {
+          currentWidth = width_5;
+          currentHeight = width_5 / refs.aspectRatio.current;
         } else {
-          currentWidth = height * refs.aspectRatio.current;
-          currentHeight = height;
+          currentWidth = height_7 * refs.aspectRatio.current;
+          currentHeight = height_7;
         }
       } else {
-        currentWidth = width;
-        currentHeight = height;
+        currentWidth = width_5;
+        currentHeight = height_7;
       }
       if (keepAspectRatio) {
-        if (width < 0 && currentWidth > 0 || width > 0 && currentWidth < 0) currentWidth *= -1;
-        if (height < 0 && currentHeight > 0 || height > 0 && currentHeight < 0) currentHeight *= -1;
+        if (width_5 < 0 && currentWidth > 0 || width_5 > 0 && currentWidth < 0) currentWidth *= -1;
+        if (height_7 < 0 && currentHeight > 0 || height_7 > 0 && currentHeight < 0) currentHeight *= -1;
       }
-      item.p = [startTransformed.x, startTransformed.y];
-      item.ar = [currentWidth, currentHeight];
+      item_20.p = [startTransformed_0.x, startTransformed_0.y];
+      item_20.ar = [currentWidth, currentHeight];
     }
 
     // select box
@@ -1074,49 +1069,49 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
 
     // render
     render();
-  }, []);
-  const onMouseMove = _react.default.useCallback(event => {
+  };
+  const onMouseMove = event_5 => {
     const {
-      offsetX,
-      offsetY,
-      clientX,
-      clientY
-    } = event;
+      offsetX: offsetX_2,
+      offsetY: offsetY_2,
+      clientX: clientX_3,
+      clientY: clientY_3
+    } = event_5;
     onMove({
-      offsetX,
-      offsetY,
-      clientX,
-      clientY
-    }, event);
-  }, [onMove]);
-  const onTouchMove = _react.default.useCallback(event => {
+      offsetX: offsetX_2,
+      offsetY: offsetY_2,
+      clientX: clientX_3,
+      clientY: clientY_3
+    }, event_5);
+  };
+  const onTouchMove = event_6 => {
     // Get the first touch point
-    const touch = event.touches[0];
+    const touch_0 = event_6.touches[0];
     const {
-      clientX,
-      clientY
-    } = touch;
+      clientX: clientX_4,
+      clientY: clientY_4
+    } = touch_0;
     let {
-      offsetX,
-      offsetY
-    } = touch;
-    const targetElement = touch.target;
-    if (targetElement instanceof HTMLElement) {
+      offsetX: offsetX_3,
+      offsetY: offsetY_3
+    } = touch_0;
+    const targetElement_0 = touch_0.target;
+    if (targetElement_0 instanceof HTMLElement) {
       // Get the bounding rectangle of the target element
-      const rect = targetElement.getBoundingClientRect();
+      const rect_2 = targetElement_0.getBoundingClientRect();
 
       // Calculate the offsetX and offsetY
-      offsetX = touch.clientX - rect.left;
-      offsetY = touch.clientY - rect.top;
+      offsetX_3 = touch_0.clientX - rect_2.left;
+      offsetY_3 = touch_0.clientY - rect_2.top;
     }
     onMove({
-      offsetX,
-      offsetY,
-      clientX,
-      clientY
-    }, event);
-  }, [onInteractionDown]);
-  const undo = _react.default.useCallback(() => {
+      offsetX: offsetX_3,
+      offsetY: offsetY_3,
+      clientX: clientX_4,
+      clientY: clientY_4
+    }, event_6);
+  };
+  const undo = () => {
     if (!refs.undo.current.length) return;
 
     // add current state to redo
@@ -1127,8 +1122,8 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
 
     // render
     render();
-  }, []);
-  const redo = _react.default.useCallback(() => {
+  };
+  const redo = () => {
     if (!refs.redo.current.length) return;
 
     // add current state to undo
@@ -1139,17 +1134,17 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
 
     // render
     render();
-  }, []);
-  const onWheel = _react.default.useCallback(eventReact => {
-    const event = eventReact.nativeEvent;
+  };
+  const onWheel = eventReact_1 => {
+    const event_7 = eventReact_1.nativeEvent;
 
     // zoom
-    if (event.metaKey || event.ctrlKey) {
+    if (event_7.metaKey || event_7.ctrlKey) {
       setTool('zoom');
       refs.toolUpdateAuto.current = true;
       const zoomFactor = 1.054;
-      const mouseX = event.offsetX;
-      const mouseY = event.offsetY;
+      const mouseX = event_7.offsetX;
+      const mouseY = event_7.offsetY;
       const scale = refs.scale.current;
 
       // Convert mouse position to canvas coordinates
@@ -1157,7 +1152,7 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       const canvasY = (mouseY - refs.move.current.y) / scale;
 
       // Adjust scale
-      const zoomIn = event.deltaY < 0;
+      const zoomIn = event_7.deltaY < 0;
       const newScale = zoomIn ? scale * zoomFactor : scale / zoomFactor;
       if (newScale <= maxZoom / 100 && newScale >= minZoom / 100) {
         // Update origin to focus on mouse position
@@ -1169,22 +1164,22 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     }
     // pan
     else if (!refs.mouseDown.current) {
-      refs.move.current.x -= event.deltaX;
-      refs.move.current.y -= event.deltaY;
+      refs.move.current.x -= event_7.deltaX;
+      refs.move.current.y -= event_7.deltaY;
       render();
     }
-  }, [minZoom, maxZoom]);
-  const onPaste = _react.default.useCallback(event => {
-    event.preventDefault();
+  };
+  const onPaste = event_8 => {
+    event_8.preventDefault();
 
     // Get clipboard data
-    const items = Array.from(event.clipboardData.items);
+    const items_6 = Array.from(event_8.clipboardData.items);
 
     // Loop through clipboard items to find an image
-    for (const item of items) {
-      if (item.type.startsWith('image/')) {
+    for (const item_21 of items_6) {
+      if (item_21.type.startsWith('image/')) {
         // Get the image file
-        const blob = item.getAsFile();
+        const blob = item_21.getAsFile();
         refs.image.current = new Image();
 
         // Load the image and draw it on the canvas
@@ -1195,7 +1190,7 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
           // 1) Upload the image first, than read it in image src
           // 2) Add url of the image
           // instead of embeding the image
-          const item_ = {
+          const item__2 = {
             i: (0, _utils.getID)(),
             v: 'i',
             p: [],
@@ -1208,7 +1203,7 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
             },
             a: _date.OnesyDate.milliseconds
           };
-          add(item_);
+          add(item__2);
           setTool('image');
         };
 
@@ -1217,139 +1212,139 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         break;
       }
     }
-  }, []);
+  };
   _react.default.useEffect(() => {
     const method = () => {
-      const width = refs.root.current.offsetWidth;
-      const height = refs.root.current.offsetHeight;
+      const width_6 = refs.root.current.offsetWidth;
+      const height_8 = refs.root.current.offsetHeight;
       setSize({
-        width,
-        height
+        width: width_6,
+        height: height_8
       });
     };
-    const onKeyUp = event => {
+    const onKeyUp = event_9 => {
       if (refs.toolUpdateAuto.current) setTool(refs.previousTool.current || 'pen');
     };
-    const onKeyDown = async event => {
+    const onKeyDown = async event_10 => {
       refs.toolUpdateAuto.current = false;
       const {
-        key
-      } = event;
+        key: key_0
+      } = event_10;
       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();
+      const t_1 = refs.tool.current;
+      const zoom_3 = refs.scale.current;
+      if (['a', 'A'].includes(key_0) && (event_10.metaKey || event_10.ctrlKey)) {
+        event_10.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);
+      } else if (t_1 === 'select' && ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Backspace'].includes(key_0)) {
+        const value_0 = event_10.shiftKey ? 10 : 1;
+        if (key_0 === 'ArrowUp') onMoveItems(0, -value_0 / zoom_3);
+        if (key_0 === 'ArrowDown') onMoveItems(0, value_0 / zoom_3);
+        if (key_0 === 'ArrowLeft') onMoveItems(-value_0 / zoom_3, 0);
+        if (key_0 === 'ArrowRight') onMoveItems(value_0 / zoom_3, 0);
+        if (key_0 === 'Backspace') {
+          const toRemove_2 = [];
+          refs.items.current.forEach(item_22 => {
+            if (item_22.se) toRemove_2.push(item_22);
           });
-          if (toRemove.length) remove(toRemove);
+          if (toRemove_2.length) remove(toRemove_2);
         }
         render();
-      } else if (key === 'Escape') {
+      } else if (key_0 === 'Escape') {
         setTool('select');
         refs.textActive.current = null;
         unselectAll();
         filterItems();
         render();
       } else if (tool === 'text') {
-        const selectedTextBox = itemsAll.find(item => item.v === 't' && item.se);
+        const selectedTextBox = itemsAll.find(item_23 => item_23.v === 't' && item_23.se);
         if (!selectedTextBox) return;
         const {
-          line,
-          char
+          line: line_2,
+          char: char_0
         } = 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;
+        const lines_0 = selectedTextBox.s.lines;
+        const currentLine_0 = lines_0[line_2];
+        if (['ArrowLeft', 'ArrowRight'].includes(key_0)) {
+          var _lines_0$line_, _lines_0$selectedText2;
+          event_10.preventDefault();
+          selectedTextBox.s.cursor.char += key_0 === 'ArrowLeft' ? -1 : 1;
           if (selectedTextBox.s.cursor.char < 0) {
-            var _lines$selectedTextBo;
+            var _lines_0$selectedText;
             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.char = (_lines_0$selectedText = lines_0[selectedTextBox.s.cursor.line]) === null || _lines_0$selectedText === void 0 ? void 0 : _lines_0$selectedText.length;
+          } else if (selectedTextBox.s.cursor.char > ((_lines_0$line_ = lines_0[line_2]) === null || _lines_0$line_ === void 0 ? void 0 : _lines_0$line_.length) && line_2 !== lines_0.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);
+          selectedTextBox.s.cursor.line = (0, _utils.clamp)(selectedTextBox.s.cursor.line, 0, lines_0.length - 1);
+          selectedTextBox.s.cursor.char = (0, _utils.clamp)(selectedTextBox.s.cursor.char, 0, (_lines_0$selectedText2 = lines_0[selectedTextBox.s.cursor.line]) === null || _lines_0$selectedText2 === void 0 ? void 0 : _lines_0$selectedText2.length);
         }
-        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);
+        if (['ArrowUp', 'ArrowDown'].includes(key_0)) {
+          var _lines_0$selectedText3;
+          event_10.preventDefault();
+          selectedTextBox.s.cursor.line += key_0 === 'ArrowUp' ? -1 : 1;
+          selectedTextBox.s.cursor.line = (0, _utils.clamp)(selectedTextBox.s.cursor.line, 0, lines_0.length - 1);
+          selectedTextBox.s.cursor.char = (0, _utils.clamp)(selectedTextBox.s.cursor.char, 0, (_lines_0$selectedText3 = lines_0[selectedTextBox.s.cursor.line]) === null || _lines_0$selectedText3 === void 0 ? void 0 : _lines_0$selectedText3.length);
+        } else if (key_0 === 'Enter') {
+          event_10.preventDefault();
+          const newLine = currentLine_0.slice(char_0);
+          lines_0[line_2] = currentLine_0.slice(0, char_0);
+          lines_0.splice(line_2 + 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);
+        } else if (key_0 === 'Backspace') {
+          event_10.preventDefault();
+          if (char_0 > 0) {
+            lines_0[line_2] = currentLine_0.slice(0, char_0 - 1) + currentLine_0.slice(char_0);
             selectedTextBox.s.cursor.char--;
-          } else if (line > 0) {
-            const prevLine = lines[line - 1];
+          } else if (line_2 > 0) {
+            const prevLine = lines_0[line_2 - 1];
             selectedTextBox.s.cursor.char = prevLine.length;
-            lines[line - 1] += lines[line];
-            lines.splice(line, 1);
+            lines_0[line_2 - 1] += lines_0[line_2];
+            lines_0.splice(line_2, 1);
             selectedTextBox.s.cursor.line--;
           }
-        } else if (key.length === 1) {
-          if ([' '].includes(key)) event.preventDefault();
+        } else if (key_0.length === 1) {
+          if ([' '].includes(key_0)) event_10.preventDefault();
           let textClipboard = '';
-          const isPaste = (event.ctrlKey || event.metaKey) && ['v', 'V'].includes(key);
+          const isPaste = (event_10.ctrlKey || event_10.metaKey) && ['v', 'V'].includes(key_0);
           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);
+          const text = isPaste ? textClipboard : key_0;
+          selectedTextBox.s.lines[line_2] = currentLine_0.slice(0, char_0) + text + currentLine_0.slice(char_0);
           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 (event_10.metaKey && key_0 === 'z') {
+          if (event_10.shiftKey) redo();else undo();
         }
-        if (key === ' ') {
+        if (key_0 === ' ') {
           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') {
+        if (event_10.shiftKey) {
+          if (['E', 'D', 'P', 'S', 'C', 'R', 'I', 'L', 'A', 'T', 'G'].includes(key_0)) refs.toolUpdateAuto.current = false;
+          if (key_0 === 'E') setTool('eraser');
+          if (key_0 === 'D') setTool('pen');
+          if (key_0 === 'P') setTool('pan');
+          if (key_0 === 'S') setTool('select');
+          if (key_0 === 'C') setTool('circle');
+          if (key_0 === 'R') setTool('rectangle');
+          if (key_0 === 'I') setTool('triangle');
+          if (key_0 === 'L') setTool('line');
+          if (key_0 === 'A') setTool('line-arrow');
+          if (key_0 === 'T') setTool('text');
+          if (key_0 === 'G') {
             setGrid(previous => !previous);
             render();
           }
@@ -1377,20 +1372,20 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       window.document.removeEventListener('paste', onPaste);
     };
   }, []);
-  const onChangeInputFile = _react.default.useCallback(event => {
-    const file = event.target.files[0];
+  const onChangeInputFile = event_11 => {
+    const file = event_11.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 = '';
+        event_11.target.value = '';
         setTool('image');
       };
       reader.readAsDataURL(file);
     }
-  }, []);
+  };
   const propsCanvas = {
     width: size.width,
     height: size.height,
@@ -1401,11 +1396,11 @@ const Whiteboard = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     }
   };
   return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: item => {
+    ref: item_24 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_24);else ref.current = item_24;
       }
-      refs.root.current = item;
+      refs.root.current = item_24;
     },
     flex: true,
     fullWidth: true,