@onesy/ui-react 1.0.163 → 1.0.165

package/esm/HTMLCanvas/HTMLCanvas.js

@@ -95,16 +95,16 @@ const useStyle = style(theme => ({
 });
 const HTMLCanvas = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyHTMLCanvas?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
-  const Menu = React.useMemo(() => theme?.elements?.Menu || MenuElement, [theme]);
-  const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
-  const Label = React.useMemo(() => theme?.elements?.Label || LabelElement, [theme]);
-  const Switch = React.useMemo(() => theme?.elements?.Switch || SwitchElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyHTMLCanvas?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Tooltip = theme?.elements?.Tooltip || TooltipElement;
+  const Menu = theme?.elements?.Menu || MenuElement;
+  const ListItem = theme?.elements?.ListItem || ListItemElement;
+  const Label = theme?.elements?.Label || LabelElement;
+  const Switch = theme?.elements?.Switch || SwitchElement;
   const {
       size = 'regular',
       width = 240_000,
@@ -175,7 +175,7 @@ const HTMLCanvas = /*#__PURE__*/React.forwardRef((props_, ref) => {
       methods.updatePositions = updatePositions;
     }
   }, [methods]);
-  const onChange = React.useCallback(valueNew => {
+  const onChange = valueNew => {
     const root = refs.root.current;
     const values = _objectSpread(_objectSpread(_objectSpread({}, refs.positions.current), valueNew), {}, {
       root: {
@@ -185,56 +185,56 @@ const HTMLCanvas = /*#__PURE__*/React.forwardRef((props_, ref) => {
       boundaries: refs.boundaries.current
     });
     if (is('function', onChange_)) onChange_(values);
-  }, [onChange_]);
-  const updateBoundaries = React.useCallback((valueZoom = refs.positions.current?.zoom) => {
-    const root = refs.root.current;
-    const rootRect = root.getBoundingClientRect();
+  };
+  const updateBoundaries = (valueZoom = refs.positions.current?.zoom) => {
+    const root_0 = refs.root.current;
+    const rootRect = root_0.getBoundingClientRect();
     refs.boundaries.current = {
       x: [refs.width.current * valueZoom * -1 + rootRect.width, 0],
       y: [refs.height.current * valueZoom * -1 + rootRect.height, 0]
     };
-  }, []);
+  };
   React.useEffect(() => {
     // update boundaries
     updateBoundaries();
   }, [width, height, positions]);
-  const updatePositions = React.useCallback(valueNew => {
-    valueNew.zoom = clamp(valueNew.zoom, refs.minZoom.current, refs.maxZoom.current);
-    valueNew.top = clamp(valueNew.top, ...refs.boundaries.current.y);
-    valueNew.left = clamp(valueNew.left, ...refs.boundaries.current.x);
-    refs.container.current.style.transform = `matrix(${valueNew.zoom}, 0, 0, ${valueNew.zoom}, ${valueNew.left}, ${valueNew.top})`;
-    setPositions(valueNew);
-    onChange(valueNew);
-  }, []);
-  const update = React.useCallback((values, event) => {
-    const root = refs.root.current;
+  const updatePositions = valueNew_0 => {
+    valueNew_0.zoom = clamp(valueNew_0.zoom, refs.minZoom.current, refs.maxZoom.current);
+    valueNew_0.top = clamp(valueNew_0.top, ...refs.boundaries.current.y);
+    valueNew_0.left = clamp(valueNew_0.left, ...refs.boundaries.current.x);
+    refs.container.current.style.transform = `matrix(${valueNew_0.zoom}, 0, 0, ${valueNew_0.zoom}, ${valueNew_0.left}, ${valueNew_0.top})`;
+    setPositions(valueNew_0);
+    onChange(valueNew_0);
+  };
+  const update = (values_0, event) => {
+    const root_1 = refs.root.current;
     const container = refs.container.current;
-    const rootRect = root.getBoundingClientRect();
+    const rootRect_0 = root_1.getBoundingClientRect();
     const transform = window.getComputedStyle(container).transform;
     const matrix = new DOMMatrixReadOnly(transform);
     let left = matrix.e || 0;
     let top = matrix.f || 0;
     let zoom_ = matrix.a || 1;
     const {
-      x = event ? event.clientX - rootRect.x : rootRect.width / 2,
-      y = event ? event.clientY - rootRect.y : rootRect.height / 2
-    } = values;
-    if (values.zoom !== undefined) {
-      zoom_ = clamp(values.zoom, refs.minZoom.current, refs.maxZoom.current);
+      x = event ? event.clientX - rootRect_0.x : rootRect_0.width / 2,
+      y = event ? event.clientY - rootRect_0.y : rootRect_0.height / 2
+    } = values_0;
+    if (values_0.zoom !== undefined) {
+      zoom_ = clamp(values_0.zoom, refs.minZoom.current, refs.maxZoom.current);
 
       // update boundaries
       updateBoundaries(zoom_);
 
       // left, top
       const zoomDelta = zoom_ / matrix.a;
-      left = values.left !== undefined ? values.left : x - (left >= 0 ? left - x : x - left) * zoomDelta;
-      top = values.top !== undefined ? values.top : y - (top >= 0 ? top - y : y - top) * zoomDelta;
+      left = values_0.left !== undefined ? values_0.left : x - (left >= 0 ? left - x : x - left) * zoomDelta;
+      top = values_0.top !== undefined ? values_0.top : y - (top >= 0 ? top - y : y - top) * zoomDelta;
     } else {
-      if (values.top !== undefined) {
-        top = values.top;
+      if (values_0.top !== undefined) {
+        top = values_0.top;
       }
-      if (values.left !== undefined) {
-        left = values.left;
+      if (values_0.left !== undefined) {
+        left = values_0.left;
       }
     }
 
@@ -244,22 +244,22 @@ const HTMLCanvas = /*#__PURE__*/React.forwardRef((props_, ref) => {
       left,
       top
     });
-  }, []);
-  const zoom = React.useCallback((value = 1, event) => {
+  };
+  const zoom = (value = 1, event_0) => {
     update({
       zoom: value
     });
-  }, []);
-  const onCenter = React.useCallback(() => {
-    const root = refs.root.current;
-    const container = refs.container.current;
-    const rootRect = root.getBoundingClientRect();
-    const items = Array.from(container.children);
+  };
+  const onCenter = () => {
+    const root_2 = refs.root.current;
+    const container_0 = refs.container.current;
+    const rootRect_1 = root_2.getBoundingClientRect();
+    const items = Array.from(container_0.children);
 
     // container
     // reset
-    container.style.transform = `matrix(1, 0, 0, 1, 0, 0)`;
-    const values = {
+    container_0.style.transform = `matrix(1, 0, 0, 1, 0, 0)`;
+    const values_1 = {
       top: Number.MAX_SAFE_INTEGER,
       left: Number.MAX_SAFE_INTEGER,
       width: 0,
@@ -270,184 +270,184 @@ const HTMLCanvas = /*#__PURE__*/React.forwardRef((props_, ref) => {
     items.forEach(item => {
       const itemRect = item.getBoundingClientRect();
       item.rect = itemRect;
-      values.top = Math.min(values.top, itemRect.top - rootRect.top);
-      values.left = Math.min(values.left, itemRect.left - rootRect.left);
+      values_1.top = Math.min(values_1.top, itemRect.top - rootRect_1.top);
+      values_1.left = Math.min(values_1.left, itemRect.left - rootRect_1.left);
     });
 
     // width, height
-    items.forEach(item => {
-      const itemRect = item.rect;
-      const top_ = itemRect.top - rootRect.top;
-      const left_ = itemRect.left - rootRect.left;
-      const right = left_ + itemRect.width;
-      const bottom = top_ + itemRect.height;
-      values.width = Math.max(values.width, Math.abs(right) - Math.abs(values.left));
-      values.height = Math.max(values.height, Math.abs(bottom) - Math.abs(values.top));
+    items.forEach(item_0 => {
+      const itemRect_0 = item_0.rect;
+      const top_ = itemRect_0.top - rootRect_1.top;
+      const left_ = itemRect_0.left - rootRect_1.left;
+      const right = left_ + itemRect_0.width;
+      const bottom = top_ + itemRect_0.height;
+      values_1.width = Math.max(values_1.width, Math.abs(right) - Math.abs(values_1.left));
+      values_1.height = Math.max(values_1.height, Math.abs(bottom) - Math.abs(values_1.top));
     });
     if (!items.length) {
-      values.top = container.clientHeight / 2;
-      values.left = container.clientWidth / 2;
-      values.width = values.height = 0;
+      values_1.top = container_0.clientHeight / 2;
+      values_1.left = container_0.clientWidth / 2;
+      values_1.width = values_1.height = 0;
     }
-    const top = (values.top + values.height / 2 - rootRect.height / 2) * -1;
-    const left = (values.left + values.width / 2 - rootRect.width / 2) * -1;
+    const top_0 = (values_1.top + values_1.height / 2 - rootRect_1.height / 2) * -1;
+    const left_0 = (values_1.left + values_1.width / 2 - rootRect_1.width / 2) * -1;
     const zoomPadding = 0.94;
-    let zoom_ = Math.min(clamp(rootRect.width / values.width, 0, 4) * zoomPadding, clamp(rootRect.height / values.height, 0, 4) * zoomPadding);
-    if (!items.length || items.length === 1) zoom_ = 1;
+    let zoom__0 = Math.min(clamp(rootRect_1.width / values_1.width, 0, 4) * zoomPadding, clamp(rootRect_1.height / values_1.height, 0, 4) * zoomPadding);
+    if (!items.length || items.length === 1) zoom__0 = 1;
 
     // update
     // top, left
     update({
       zoom: 1,
-      top,
-      left
+      top: top_0,
+      left: left_0
     });
 
     // update
     // zoom
-    if (zoom_ !== 1) update({
-      zoom: zoom_
+    if (zoom__0 !== 1) update({
+      zoom: zoom__0
     });
-  }, []);
-  const init = React.useCallback(() => {
+  };
+  const init = () => {
     // initially
     // center
     onCenter();
-  }, []);
-  const onWheel = React.useCallback(event => {
-    if (event.target === refs.root.current || refs.root.current?.contains(event.target)) {
+  };
+  const onWheel = event_1 => {
+    if (event_1.target === refs.root.current || refs.root.current?.contains(event_1.target)) {
       const positions_ = refs.positions.current;
-      const root = refs.root.current;
-      const rootRect = root.getBoundingClientRect();
-      const x = event.clientX - rootRect.x;
-      const y = event.clientY - rootRect.y;
-      const meta = event.ctrlKey || event.metaKey;
+      const root_3 = refs.root.current;
+      const rootRect_2 = root_3.getBoundingClientRect();
+      const x_0 = event_1.clientX - rootRect_2.x;
+      const y_0 = event_1.clientY - rootRect_2.y;
+      const meta = event_1.ctrlKey || event_1.metaKey;
 
       // zoom
-      if (event.deltaY !== 0 && meta) {
-        const delta = event.deltaY * -0.0024;
-        const value = positions_.zoom + delta;
+      if (event_1.deltaY !== 0 && meta) {
+        const delta = event_1.deltaY * -0.0024;
+        const value_0 = positions_.zoom + delta;
         update({
-          zoom: value,
-          x,
-          y,
+          zoom: value_0,
+          x: x_0,
+          y: y_0,
           delta
-        }, event);
-        event.preventDefault();
+        }, event_1);
+        event_1.preventDefault();
       }
       // move
       else if (!meta) {
         // vertical
-        if (event.deltaY !== 0) {
-          const value = positions_.top + event.deltaY * -1;
+        if (event_1.deltaY !== 0) {
+          const value_1 = positions_.top + event_1.deltaY * -1;
           update({
-            top: value,
-            x,
-            y
+            top: value_1,
+            x: x_0,
+            y: y_0
           });
         }
 
         // horizontal
-        if (event.deltaX !== 0) {
-          const value = positions_.left + event.deltaX * -1;
+        if (event_1.deltaX !== 0) {
+          const value_2 = positions_.left + event_1.deltaX * -1;
           update({
-            left: value,
-            x,
-            y
+            left: value_2,
+            x: x_0,
+            y: y_0
           });
         }
-        event.preventDefault();
+        event_1.preventDefault();
       }
     }
-  }, []);
-  const onKeyUp = React.useCallback(() => {
+  };
+  const onKeyUp = () => {
     setKeyDown(null);
-  }, []);
-  const onKeyDown = React.useCallback(event => {
-    if (event.key === ' ') setKeyDown(event.key);
-  }, []);
-  const onMouseUp = React.useCallback(() => {
+  };
+  const onKeyDown = event_2 => {
+    if (event_2.key === ' ') setKeyDown(event_2.key);
+  };
+  const onMouseUp = () => {
     refs.mouseDown.current = false;
     refs.mouseDownMiniMap.current = false;
     refs.previousMouseEvent.current = undefined;
-  }, []);
-  const onMouseDown = React.useCallback(event => {
+  };
+  const onMouseDown = event_3 => {
     refs.mouseDown.current = true;
-    if (is('function', onMouseDown_)) onMouseDown_(event);
-  }, [onMouseDown_]);
-  const onTouchStart = React.useCallback(event => {
+    if (is('function', onMouseDown_)) onMouseDown_(event_3);
+  };
+  const onTouchStart = event_4 => {
     refs.mouseDown.current = true;
-    if (is('function', onTouchStart_)) onTouchStart_(event);
-  }, [onTouchStart_]);
-  const onMouseDownMiniMap = React.useCallback(event => {
+    if (is('function', onTouchStart_)) onTouchStart_(event_4);
+  };
+  const onMouseDownMiniMap = event_5 => {
     refs.mouseDownMiniMap.current = true;
-  }, []);
-  const onTouchStartMiniMap = React.useCallback(event => {
+  };
+  const onTouchStartMiniMap = event_6 => {
     refs.mouseDownMiniMap.current = true;
-  }, []);
-  const onMoveMiniMap = React.useCallback((x_, y_, event) => {
+  };
+  const onMoveMiniMap = (x_, y_, event_7) => {
     if (refs.mouseDownMiniMap.current && refs.previousMouseEvent.current && !refs.disabled.current) {
-      const positions_ = refs.positions.current;
-      const root = refs.root.current;
-      const container = refs.container.current;
+      const positions__0 = refs.positions.current;
+      const root_4 = refs.root.current;
+      const container_1 = refs.container.current;
       const miniMap_ = refs.miniMap.current;
       const rectMiniMap = miniMap_.getBoundingClientRect();
       const ratios = {
-        containerMiniMap: container.clientWidth / 170,
-        rootContainer: root.clientWidth / container.clientWidth
+        containerMiniMap: container_1.clientWidth / 170,
+        rootContainer: root_4.clientWidth / container_1.clientWidth
       };
-      const zoomAdjusted = 1 / positions_.zoom;
-      const x = (event.clientX - rectMiniMap.x) * ratios.containerMiniMap / zoomAdjusted;
-      const y = (event.clientY - rectMiniMap.y) * ratios.containerMiniMap / zoomAdjusted;
-      const left = x * -1 + root.clientWidth / 2;
-      const top = y * -1 + root.clientHeight / 2;
+      const zoomAdjusted = 1 / positions__0.zoom;
+      const x_1 = (event_7.clientX - rectMiniMap.x) * ratios.containerMiniMap / zoomAdjusted;
+      const y_1 = (event_7.clientY - rectMiniMap.y) * ratios.containerMiniMap / zoomAdjusted;
+      const left_1 = x_1 * -1 + root_4.clientWidth / 2;
+      const top_1 = y_1 * -1 + root_4.clientHeight / 2;
       update({
-        left,
-        top
+        left: left_1,
+        top: top_1
       });
     }
-  }, []);
-  const onMove = React.useCallback((x_, y_, event) => {
+  };
+  const onMove = (x__0, y__0, event_8) => {
     if (refs.keyDown.current === ' ' && refs.mouseDown.current && refs.previousMouseEvent.current && !refs.disabled.current) {
       const {
         clientX: xPrevious,
         clientY: yPrevious
       } = refs.previousMouseEvent.current;
-      const positions_ = refs.positions.current;
-      const x = x_ - xPrevious;
-      const y = y_ - yPrevious;
-      const left = x + positions_.left;
-      const top = y + positions_.top;
+      const positions__1 = refs.positions.current;
+      const x_2 = x__0 - xPrevious;
+      const y_2 = y__0 - yPrevious;
+      const left_2 = x_2 + positions__1.left;
+      const top_2 = y_2 + positions__1.top;
       update({
-        left,
-        top
+        left: left_2,
+        top: top_2
       });
     }
-  }, []);
-  const onMouseMove = React.useCallback(event => {
+  };
+  const onMouseMove = event_9 => {
     if ((refs.mouseDown.current || refs.mouseDownMiniMap.current) && !refs.disabled.current) {
       const {
         clientY,
         clientX
-      } = event;
-      if (refs.mouseDownMiniMap.current) onMoveMiniMap(clientX, clientY, event);else if (refs.mouseDown.current) onMove(clientX, clientY, event);
-      refs.previousMouseEvent.current = event;
+      } = event_9;
+      if (refs.mouseDownMiniMap.current) onMoveMiniMap(clientX, clientY, event_9);else if (refs.mouseDown.current) onMove(clientX, clientY, event_9);
+      refs.previousMouseEvent.current = event_9;
     }
-  }, []);
-  const onTouchMove = React.useCallback(event => {
+  };
+  const onTouchMove = event_10 => {
     if ((refs.mouseDown.current || refs.mouseDownMiniMap.current) && !refs.disabled.current) {
       const {
-        clientY,
-        clientX
-      } = event.touches[0];
-      if (refs.mouseDownMiniMap.current) onMoveMiniMap(clientX, clientY, event);else if (refs.mouseDown.current) onMove(clientX, clientY, event);
-      refs.previousMouseEvent.current = event;
+        clientY: clientY_0,
+        clientX: clientX_0
+      } = event_10.touches[0];
+      if (refs.mouseDownMiniMap.current) onMoveMiniMap(clientX_0, clientY_0, event_10);else if (refs.mouseDown.current) onMove(clientX_0, clientY_0, event_10);
+      refs.previousMouseEvent.current = event_10;
 
       // Normalize for use as a mouseDown value
-      refs.previousMouseEvent.current.clientY = clientY;
-      refs.previousMouseEvent.current.clientX = clientX;
+      refs.previousMouseEvent.current.clientY = clientY_0;
+      refs.previousMouseEvent.current.clientX = clientX_0;
     }
-  }, []);
+  };
   React.useEffect(() => {
     // init
     init();
@@ -473,90 +473,90 @@ const HTMLCanvas = /*#__PURE__*/React.forwardRef((props_, ref) => {
       rootDocument.removeEventListener('touchend', onMouseUp);
     };
   }, []);
-  const onShowGuidelines = React.useCallback(valueNew => {
-    setShowGuidelines(valueNew);
-  }, []);
+  const onShowGuidelines = valueNew_1 => {
+    setShowGuidelines(valueNew_1);
+  };
   const zoomOptions = React.useMemo(() => {
     return [{
       name: 'Zoom to fit',
       props: {
-        onClick: event => onCenter()
+        onClick: event_11 => onCenter()
       }
     }, {
       name: 'Zoom to 25%',
       value: 0.25,
       props: {
-        onClick: event => zoom(0.25, event)
+        onClick: event_12 => zoom(0.25, event_12)
       }
     }, {
       name: 'Zoom to 50%',
       value: 0.5,
       props: {
-        onClick: event => zoom(0.5, event)
+        onClick: event_13 => zoom(0.5, event_13)
       }
     }, {
       name: 'Zoom to 75%',
       value: 0.75,
       props: {
-        onClick: event => zoom(0.75, event)
+        onClick: event_14 => zoom(0.75, event_14)
       }
     }, {
       name: 'Zoom to 100%',
       value: 1,
       props: {
-        onClick: event => zoom(1, event)
+        onClick: event_15 => zoom(1, event_15)
       }
     }, {
       name: 'Zoom to 125%',
       value: 1.25,
       props: {
-        onClick: event => zoom(1.25, event)
+        onClick: event_16 => zoom(1.25, event_16)
       }
     }, {
       name: 'Zoom to 150%',
       value: 1.5,
       props: {
-        onClick: event => zoom(1.5, event)
+        onClick: event_17 => zoom(1.5, event_17)
       }
     }, {
       name: 'Zoom to 175%',
       value: 1.75,
       props: {
-        onClick: event => zoom(1.75, event)
+        onClick: event_18 => zoom(1.75, event_18)
       }
     }, {
       name: 'Zoom to 200%',
       value: 2,
       props: {
-        onClick: event => zoom(2, event)
+        onClick: event_19 => zoom(2, event_19)
       }
     }, {
       name: 'Zoom to 400%',
       value: 4,
       props: {
-        onClick: event => zoom(4, event)
+        onClick: event_20 => zoom(4, event_20)
       }
     }];
   }, []);
   const miniMap = React.useMemo(() => {
-    const root = refs.root.current;
-    const container = refs.container.current;
-    if (!container) return null;
-    const zoomAdjusted = 1 / positions.zoom;
-    const ratios = {
-      root: root.clientWidth / root.clientHeight,
-      container: container.clientWidth / container.clientHeight,
-      rootContainer: root.clientWidth / container.clientWidth
+    const root_5 = refs.root.current;
+    const container_2 = refs.container.current;
+    if (!container_2) return null;
+    const zoomAdjusted_0 = 1 / positions.zoom;
+    const ratios_0 = {
+      root: root_5.clientWidth / root_5.clientHeight,
+      container: container_2.clientWidth / container_2.clientHeight,
+      rootContainer: root_5.clientWidth / container_2.clientWidth
     };
     const width_ = 170;
-    const height_ = 170 / ratios.container;
-    const zoomPerSize = container.clientWidth / width_;
+    const height_ = 170 / ratios_0.container;
+    const zoomPerSize = container_2.clientWidth / width_;
     const viewportStyles = {
-      width: width_ * ratios.rootContainer * zoomAdjusted,
-      height: width_ / ratios.root * ratios.rootContainer * zoomAdjusted
+      width: width_ * ratios_0.rootContainer * zoomAdjusted_0,
+      height: width_ / ratios_0.root * ratios_0.rootContainer * zoomAdjusted_0
     };
-    viewportStyles.left = Math.abs(positions.left) / zoomPerSize * zoomAdjusted;
-    viewportStyles.top = Math.abs(positions.top) / zoomPerSize * zoomAdjusted;
+    viewportStyles.left = Math.abs(positions.left) / zoomPerSize * zoomAdjusted_0;
+    viewportStyles.top = Math.abs(positions.top) / zoomPerSize * zoomAdjusted_0;
     return /*#__PURE__*/React.createElement(Line, {
       ref: refs.miniMap,
       onMouseDown: onMouseDownMiniMap,
@@ -573,40 +573,40 @@ const HTMLCanvas = /*#__PURE__*/React.forwardRef((props_, ref) => {
       style: _objectSpread({}, viewportStyles)
     }));
   }, [positions, onMouseDownMiniMap, onTouchStartMiniMap]);
-  const updateMiniMap = React.useCallback(debounce(() => {
-    const root = refs.root.current;
-    const container = refs.container.current;
-    const miniMap_ = refs.miniMap.current;
-    if (!miniMap_) return;
-    const itemsContainer = Array.from(container.children);
+  const updateMiniMap = debounce(() => {
+    const root_6 = refs.root.current;
+    const container_3 = refs.container.current;
+    const miniMap__0 = refs.miniMap.current;
+    if (!miniMap__0) return;
+    const itemsContainer = Array.from(container_3.children);
     const itemsContainerMap = {};
     itemsContainer.forEach(element => {
       itemsContainerMap[element.dataset.id] = element;
     });
-    const miniMapItems = miniMap_.children[0];
+    const miniMapItems = miniMap__0.children[0];
     const itemsMiniMapItems = Array.from(miniMapItems.children);
     const itemsMiniMapItemsMap = {};
-    itemsMiniMapItems.forEach(element => {
-      itemsMiniMapItemsMap[element.dataset.id] = element;
+    itemsMiniMapItems.forEach(element_0 => {
+      itemsMiniMapItemsMap[element_0.dataset.id] = element_0;
     });
-    const ratios = {
-      root: root.clientWidth / root.clientHeight,
-      container: container.clientWidth / container.clientHeight,
-      contanerMiniMap: 170 / container.clientWidth
+    const ratios_1 = {
+      root: root_6.clientWidth / root_6.clientHeight,
+      container: container_3.clientWidth / container_3.clientHeight,
+      contanerMiniMap: 170 / container_3.clientWidth
     };
-    const updateItemCopy = item => {
-      const left = +item.style.left.replace('px', '');
-      const top = +item.style.top.replace('px', '');
-      const width_ = +item.style.width.replace('px', '');
-      const height_ = +item.style.height.replace('px', '');
-      item.style.width = `${width_ * ratios.contanerMiniMap}px`;
-      item.style.height = `${height_ * ratios.contanerMiniMap}px`;
-      item.style.left = `${left * ratios.contanerMiniMap}px`;
-      item.style.top = `${top * ratios.contanerMiniMap}px`;
+    const updateItemCopy = item_1 => {
+      const left_3 = +item_1.style.left.replace('px', '');
+      const top_3 = +item_1.style.top.replace('px', '');
+      const width__0 = +item_1.style.width.replace('px', '');
+      const height__0 = +item_1.style.height.replace('px', '');
+      item_1.style.width = `${width__0 * ratios_1.contanerMiniMap}px`;
+      item_1.style.height = `${height__0 * ratios_1.contanerMiniMap}px`;
+      item_1.style.left = `${left_3 * ratios_1.contanerMiniMap}px`;
+      item_1.style.top = `${top_3 * ratios_1.contanerMiniMap}px`;
     };
-    itemsContainer.forEach(item => {
-      const id = item.dataset.id;
-      const itemCopy = item.cloneNode();
+    itemsContainer.forEach(item_2 => {
+      const id = item_2.dataset.id;
+      const itemCopy = item_2.cloneNode();
       updateItemCopy(itemCopy);
 
       // add
@@ -622,27 +622,27 @@ const HTMLCanvas = /*#__PURE__*/React.forwardRef((props_, ref) => {
         itemExisting.style.height = itemCopy.style.height;
       }
     });
-    itemsMiniMapItems.forEach(item => {
-      const id = item.dataset.id;
+    itemsMiniMapItems.forEach(item_3 => {
+      const id_0 = item_3.dataset.id;
 
       // remove
-      if (!itemsContainerMap[id]) {
-        item.remove();
+      if (!itemsContainerMap[id_0]) {
+        item_3.remove();
       }
     });
-  }, 440), []);
+  }, 440);
   React.useEffect(() => {
     // update
     // mini map
     if (useMiniMap) updateMiniMap();
   }, [children, useMiniMap]);
   return /*#__PURE__*/React.createElement(Surface, _extends({
-    ref: item => {
+    ref: item_4 => {
       if (ref) {
-        if (is('function', ref)) ref(item);
-        ref.current = item;
+        if (is('function', ref)) ref(item_4);
+        ref.current = item_4;
       }
-      refs.root.current = item;
+      refs.root.current = item_4;
     },
     color: "default",
     gap: 0,
@@ -675,14 +675,14 @@ const HTMLCanvas = /*#__PURE__*/React.forwardRef((props_, ref) => {
     size: size,
     onClick: onCenter
   }, IconButtonProps), /*#__PURE__*/React.createElement(IconCenter, null)))), !noZoomMenu && /*#__PURE__*/React.createElement(Menu, {
-    menuItems: zoomOptions.map((item, index) => /*#__PURE__*/React.createElement(ListItem, _extends({
-      key: item.name,
+    menuItems: zoomOptions.map((item_5, index) => /*#__PURE__*/React.createElement(ListItem, _extends({
+      key: item_5.name,
       primary: /*#__PURE__*/React.createElement(Type, {
         version: "b3"
-      }, item.name),
-      value: item.name,
-      selected: +positions.zoom.toFixed(2) === +(item.value || 0).toFixed(2)
-    }, item.props, {
+      }, item_5.name),
+      value: item_5.name,
+      selected: +positions.zoom.toFixed(2) === +(item_5.value || 0).toFixed(2)
+    }, item_5.props, {
       size: "small",
       button: true
     }))),
@@ -697,12 +697,12 @@ const HTMLCanvas = /*#__PURE__*/React.forwardRef((props_, ref) => {
     whiteSpace: "nowrap",
     fullWidth: true
   }, (positions.zoom * 100).toFixed(0), "%")))), /*#__PURE__*/React.createElement(Line, _extends({}, ContainerProps, {
-    ref: item => {
+    ref: item_6 => {
       if (ContainerProps?.ref) {
-        if (is('function', ContainerProps?.ref)) ContainerProps.ref(item);
-        ContainerProps.ref.current = item;
+        if (is('function', ContainerProps?.ref)) ContainerProps.ref(item_6);
+        ContainerProps.ref.current = item_6;
       }
-      refs.container.current = item;
+      refs.container.current = item_6;
     },
     gap: 0,
     align: "unset",