@onesy/ui-react 1.0.129 → 1.0.131

package/HTMLCanvas/HTMLCanvas.js

@@ -1,549 +1,759 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const IconMaterialCenterFocusWeakW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialCenterFocusWeakW100"));
-const Line_1 = __importDefault(require("../Line"));
-const Surface_1 = __importDefault(require("../Surface"));
-const IconButton_1 = __importDefault(require("../IconButton"));
-const Type_1 = __importDefault(require("../Type"));
-const Tooltip_1 = __importDefault(require("../Tooltip"));
-const Menu_1 = __importDefault(require("../Menu"));
-const ListItem_1 = __importDefault(require("../ListItem"));
-const Label_1 = __importDefault(require("../Label"));
-const Switch_1 = __importDefault(require("../Switch"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        position: 'relative',
-        width: '100%',
-        height: '100%',
-        overflow: 'hidden'
-    },
-    container: {
-        position: 'absolute',
-        transformOrigin: '0 0'
-    },
-    miniMap: {
-        position: 'absolute',
-        bottom: '12px',
-        left: '12px',
-        borderRadius: 8,
-        background: theme.palette.background.default.primary,
-        border: theme.palette.light ? '' : `1px solid ${theme.palette.text.divider}`,
-        boxShadow: theme.shadows.values.default[2],
-        cursor: 'pointer'
-    },
-    miniMapMain: {
-        position: 'absolute',
-        inset: 0
-    },
-    miniMapViewport: {
-        position: 'absolute',
-        borderRadius: 14,
-        border: `2px solid ${theme.palette.color.info.main}`
-    },
-    actions: {
-        position: 'absolute',
-        top: '8px',
-        right: '8px',
-        padding: '4px 20px',
-        borderRadius: 140,
-        background: theme.palette.background.default[theme.palette.light ? 'primary' : 'quaternary'],
-        boxShadow: theme.shadows.values.default[1],
-        overflow: 'auto hidden',
-        zIndex: '1'
-    },
-    // luv you: https://stackoverflow.com/a/32861765
-    guidelines_lines: {
-        backgroundSize: '40px 40px',
-        backgroundImage: `linear-gradient(to right, ${theme.palette.text.default.quaternary} 0.5px, transparent 0.5px), linear-gradient(to bottom, ${theme.palette.text.default.quaternary} 0.5px, transparent 0.5px)`
-    },
-    guidelines_dots: {
-        backgroundSize: '40px 40px',
-        backgroundImage: `radial-gradient(circle, ${theme.palette.text.default.tertiary} 0.5px, transparent 0.5px)`,
-        backgroundPosition: `20px 20px`
-    },
-    move: {
-        cursor: 'grabbing',
-        userSelect: 'none'
-    },
-    zoom: {
-        width: 40,
-        height: 34,
-        cursor: 'pointer',
-        userSelect: 'none'
-    },
-    menu: {
-        '& .onesy-List-root': {
-            maxHeight: 240,
-            overflow: 'hidden auto'
-        }
-    },
-    disabled: {
-        pointerEvents: 'none',
-        opacity: 0.54,
-        cursor: 'default'
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _IconMaterialCenterFocusWeakW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCenterFocusWeakW100"));
+var _Line = _interopRequireDefault(require("../Line"));
+var _Surface = _interopRequireDefault(require("../Surface"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _Type = _interopRequireDefault(require("../Type"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _Menu = _interopRequireDefault(require("../Menu"));
+var _ListItem = _interopRequireDefault(require("../ListItem"));
+var _Label = _interopRequireDefault(require("../Label"));
+var _Switch = _interopRequireDefault(require("../Switch"));
+var _utils2 = require("../utils");
+const _excluded = ["size", "width", "height", "minZoom", "maxZoom", "showGuidelinesDefault", "guidelines", "pre", "post", "miniMap", "methods", "onChange", "onWheel", "onMouseDown", "onTouchStart", "noActions", "noGuideLines", "noFitCenter", "noZoomMenu", "disabled", "IconCenter", "ContainerProps", "IconButtonProps", "Component", "className", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const useStyle = (0, _styleReact.style)(theme => ({
+  root: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden'
+  },
+  container: {
+    position: 'absolute',
+    transformOrigin: '0 0'
+  },
+  miniMap: {
+    position: 'absolute',
+    bottom: '12px',
+    left: '12px',
+    borderRadius: 8,
+    background: theme.palette.background.default.primary,
+    border: theme.palette.light ? '' : `1px solid ${theme.palette.text.divider}`,
+    boxShadow: theme.shadows.values.default[2],
+    cursor: 'pointer'
+  },
+  miniMapMain: {
+    position: 'absolute',
+    inset: 0
+  },
+  miniMapViewport: {
+    position: 'absolute',
+    borderRadius: 14,
+    border: `2px solid ${theme.palette.color.info.main}`
+  },
+  actions: {
+    position: 'absolute',
+    top: '8px',
+    right: '8px',
+    padding: '4px 20px',
+    borderRadius: 140,
+    background: theme.palette.background.default[theme.palette.light ? 'primary' : 'quaternary'],
+    boxShadow: theme.shadows.values.default[1],
+    overflow: 'auto hidden',
+    zIndex: '1'
+  },
+  // luv you: https://stackoverflow.com/a/32861765
+  guidelines_lines: {
+    backgroundSize: '40px 40px',
+    backgroundImage: `linear-gradient(to right, ${theme.palette.text.default.quaternary} 0.5px, transparent 0.5px), linear-gradient(to bottom, ${theme.palette.text.default.quaternary} 0.5px, transparent 0.5px)`
+  },
+  guidelines_dots: {
+    backgroundSize: '40px 40px',
+    backgroundImage: `radial-gradient(circle, ${theme.palette.text.default.tertiary} 0.5px, transparent 0.5px)`,
+    backgroundPosition: `20px 20px`
+  },
+  move: {
+    cursor: 'grabbing',
+    userSelect: 'none'
+  },
+  zoom: {
+    width: 40,
+    height: 34,
+    cursor: 'pointer',
+    userSelect: 'none'
+  },
+  menu: {
+    '& .onesy-List-root': {
+      maxHeight: 240,
+      overflow: 'hidden auto'
     }
-}), { name: 'onesy-HTMLCanvas' });
-const HTMLCanvas = react_1.default.forwardRef((props_, ref) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyHTMLCanvas) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
-    const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
-    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
-    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
-    const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
-    const Menu = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Menu) || Menu_1.default; }, [theme]);
-    const ListItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ListItem) || ListItem_1.default; }, [theme]);
-    const Label = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Label) || Label_1.default; }, [theme]);
-    const Switch = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Switch) || Switch_1.default; }, [theme]);
-    const { size = 'regular', width = 240000, height = 240000, minZoom = 0.04, maxZoom = 4, showGuidelinesDefault, guidelines = 'dots', pre, post, miniMap: useMiniMap = true, methods, onChange: onChange_, onWheel: onWheel_, onMouseDown: onMouseDown_, onTouchStart: onTouchStart_, noActions, noGuideLines, noFitCenter, noZoomMenu, disabled, IconCenter = IconMaterialCenterFocusWeakW100_1.default, ContainerProps, IconButtonProps, Component = Line, className, children } = props, other = __rest(props, ["size", "width", "height", "minZoom", "maxZoom", "showGuidelinesDefault", "guidelines", "pre", "post", "miniMap", "methods", "onChange", "onWheel", "onMouseDown", "onTouchStart", "noActions", "noGuideLines", "noFitCenter", "noZoomMenu", "disabled", "IconCenter", "ContainerProps", "IconButtonProps", "Component", "className", "children"]);
-    const { classes } = useStyle();
-    const [positions, setPositions] = react_1.default.useState({ zoom: 1, left: 0, top: 0 });
-    const [keyDown, setKeyDown] = react_1.default.useState();
-    const [showGuidelines, setShowGuidelines] = react_1.default.useState(!!showGuidelinesDefault);
-    const refs = {
-        root: react_1.default.useRef(null),
-        container: react_1.default.useRef(null),
-        miniMap: react_1.default.useRef(null),
-        minZoom: react_1.default.useRef(minZoom),
-        maxZoom: react_1.default.useRef(maxZoom),
-        positions: react_1.default.useRef(positions),
-        previousMouseEvent: react_1.default.useRef(null),
-        mouseDown: react_1.default.useRef(false),
-        mouseDownMiniMap: react_1.default.useRef(false),
-        keyDown: react_1.default.useRef(null),
-        boundaries: react_1.default.useRef({ x: [width * (positions === null || positions === void 0 ? void 0 : positions.zoom) * -1, 0], y: [height * (positions === null || positions === void 0 ? void 0 : positions.zoom) * -1, 0] }),
-        width: react_1.default.useRef(width),
-        height: react_1.default.useRef(height),
-        disabled: react_1.default.useRef(disabled)
+  },
+  disabled: {
+    pointerEvents: 'none',
+    opacity: 0.54,
+    cursor: 'default'
+  }
+}), {
+  name: 'onesy-HTMLCanvas'
+});
+const HTMLCanvas = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyHTMLCanvas) === 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 Surface = _react.default.useMemo(() => {
+    var _theme$elements2;
+    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
+  }, [theme]);
+  const IconButton = _react.default.useMemo(() => {
+    var _theme$elements3;
+    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.IconButton) || _IconButton.default;
+  }, [theme]);
+  const Type = _react.default.useMemo(() => {
+    var _theme$elements4;
+    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Type) || _Type.default;
+  }, [theme]);
+  const Tooltip = _react.default.useMemo(() => {
+    var _theme$elements5;
+    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Tooltip) || _Tooltip.default;
+  }, [theme]);
+  const Menu = _react.default.useMemo(() => {
+    var _theme$elements6;
+    return (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Menu) || _Menu.default;
+  }, [theme]);
+  const ListItem = _react.default.useMemo(() => {
+    var _theme$elements7;
+    return (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.ListItem) || _ListItem.default;
+  }, [theme]);
+  const Label = _react.default.useMemo(() => {
+    var _theme$elements8;
+    return (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.Label) || _Label.default;
+  }, [theme]);
+  const Switch = _react.default.useMemo(() => {
+    var _theme$elements9;
+    return (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.Switch) || _Switch.default;
+  }, [theme]);
+  const {
+      size = 'regular',
+      width = 240000,
+      height = 240000,
+      minZoom = 0.04,
+      maxZoom = 4,
+      showGuidelinesDefault,
+      guidelines = 'dots',
+      pre,
+      post,
+      miniMap: useMiniMap = true,
+      methods,
+      onChange: onChange_,
+      onWheel: onWheel_,
+      onMouseDown: onMouseDown_,
+      onTouchStart: onTouchStart_,
+      noActions,
+      noGuideLines,
+      noFitCenter,
+      noZoomMenu,
+      disabled,
+      IconCenter = _IconMaterialCenterFocusWeakW.default,
+      ContainerProps,
+      IconButtonProps,
+      Component = Line,
+      className,
+      children
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [positions, setPositions] = _react.default.useState({
+    zoom: 1,
+    left: 0,
+    top: 0
+  });
+  const [keyDown, setKeyDown] = _react.default.useState();
+  const [showGuidelines, setShowGuidelines] = _react.default.useState(!!showGuidelinesDefault);
+  const refs = {
+    root: _react.default.useRef(null),
+    container: _react.default.useRef(null),
+    miniMap: _react.default.useRef(null),
+    minZoom: _react.default.useRef(minZoom),
+    maxZoom: _react.default.useRef(maxZoom),
+    positions: _react.default.useRef(positions),
+    previousMouseEvent: _react.default.useRef(null),
+    mouseDown: _react.default.useRef(false),
+    mouseDownMiniMap: _react.default.useRef(false),
+    keyDown: _react.default.useRef(null),
+    boundaries: _react.default.useRef({
+      x: [width * (positions === null || positions === void 0 ? void 0 : positions.zoom) * -1, 0],
+      y: [height * (positions === null || positions === void 0 ? void 0 : positions.zoom) * -1, 0]
+    }),
+    width: _react.default.useRef(width),
+    height: _react.default.useRef(height),
+    disabled: _react.default.useRef(disabled)
+  };
+  refs.positions.current = positions;
+  refs.minZoom.current = minZoom;
+  refs.maxZoom.current = maxZoom;
+  refs.keyDown.current = keyDown;
+  refs.width.current = width;
+  refs.height.current = height;
+  refs.disabled.current = disabled;
+  _react.default.useEffect(() => {
+    if ((0, _utils.is)('object', methods)) {
+      methods.updatePositions = updatePositions;
+    }
+  }, [methods]);
+  const onChange = _react.default.useCallback(valueNew => {
+    const root = refs.root.current;
+    const values = _objectSpread(_objectSpread(_objectSpread({}, refs.positions.current), valueNew), {}, {
+      root: {
+        width: root.clientWidth,
+        height: root.clientHeight
+      },
+      boundaries: refs.boundaries.current
+    });
+    if ((0, _utils.is)('function', onChange_)) onChange_(values);
+  }, [onChange_]);
+  const updateBoundaries = _react.default.useCallback((valueZoom = (_refs$positions$curre => (_refs$positions$curre = refs.positions.current) === null || _refs$positions$curre === void 0 ? void 0 : _refs$positions$curre.zoom)()) => {
+    const root = refs.root.current;
+    const rootRect = root.getBoundingClientRect();
+    refs.boundaries.current = {
+      x: [refs.width.current * valueZoom * -1 + rootRect.width, 0],
+      y: [refs.height.current * valueZoom * -1 + rootRect.height, 0]
     };
-    refs.positions.current = positions;
-    refs.minZoom.current = minZoom;
-    refs.maxZoom.current = maxZoom;
-    refs.keyDown.current = keyDown;
-    refs.width.current = width;
-    refs.height.current = height;
-    refs.disabled.current = disabled;
-    react_1.default.useEffect(() => {
-        if ((0, utils_1.is)('object', methods)) {
-            methods.updatePositions = updatePositions;
-        }
-    }, [methods]);
-    const onChange = react_1.default.useCallback((valueNew) => {
-        const root = refs.root.current;
-        const values = Object.assign(Object.assign(Object.assign({}, refs.positions.current), valueNew), { root: {
-                width: root.clientWidth,
-                height: root.clientHeight
-            }, boundaries: refs.boundaries.current });
-        if ((0, utils_1.is)('function', onChange_))
-            onChange_(values);
-    }, [onChange_]);
-    const updateBoundaries = react_1.default.useCallback((valueZoom) => {
-        var _a;
-        if (valueZoom === void 0) { valueZoom = (_a = refs.positions.current) === null || _a === void 0 ? void 0 : _a.zoom; }
-        const root = refs.root.current;
-        const rootRect = root.getBoundingClientRect();
-        refs.boundaries.current = {
-            x: [(refs.width.current * valueZoom * -1) + rootRect.width, 0],
-            y: [(refs.height.current * valueZoom * -1) + rootRect.height, 0]
-        };
-    }, []);
-    react_1.default.useEffect(() => {
-        // update boundaries
-        updateBoundaries();
-    }, [width, height, positions]);
-    const updatePositions = react_1.default.useCallback((valueNew) => {
-        valueNew.zoom = (0, utils_1.clamp)(valueNew.zoom, refs.minZoom.current, refs.maxZoom.current);
-        valueNew.top = (0, utils_1.clamp)(valueNew.top, ...refs.boundaries.current.y);
-        valueNew.left = (0, utils_1.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_1.default.useCallback((values, event) => {
-        const root = refs.root.current;
-        const container = refs.container.current;
-        const rootRect = root.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_ = (0, utils_1.clamp)(values.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);
-        }
-        else {
-            if (values.top !== undefined) {
-                top = values.top;
-            }
-            if (values.left !== undefined) {
-                left = values.left;
-            }
-        }
-        // update
-        updatePositions({ zoom: zoom_, left, top });
-    }, []);
-    const zoom = react_1.default.useCallback((value = 1, event) => {
-        update({ zoom: value });
-    }, []);
-    const onCenter = react_1.default.useCallback(() => {
-        const root = refs.root.current;
-        const container = refs.container.current;
-        const rootRect = root.getBoundingClientRect();
-        const items = Array.from(container.children);
-        // container
-        // reset
-        container.style.transform = `matrix(1, 0, 0, 1, 0, 0)`;
-        const values = {
-            top: Number.MAX_SAFE_INTEGER,
-            left: Number.MAX_SAFE_INTEGER,
-            width: 0,
-            height: 0
-        };
-        // left, top
-        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);
-        });
-        // 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));
-        });
-        if (!items.length) {
-            values.top = container.clientHeight / 2;
-            values.left = container.clientWidth / 2;
-            values.width = values.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 zoomPadding = 0.94;
-        let zoom_ = Math.min((0, utils_1.clamp)(rootRect.width / values.width, 0, 4) * zoomPadding, (0, utils_1.clamp)(rootRect.height / values.height, 0, 4) * zoomPadding);
-        if (!items.length || items.length === 1)
-            zoom_ = 1;
-        // update
-        // top, left
-        update({ zoom: 1, top, left });
-        // update
-        // zoom
-        if (zoom_ !== 1)
-            update({ zoom: zoom_ });
-    }, []);
-    const init = react_1.default.useCallback(() => {
-        // initially
-        // center
-        onCenter();
-    }, []);
-    const onWheel = react_1.default.useCallback((event) => {
-        var _a;
-        if (event.target === refs.root.current || ((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.contains(event.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;
-            // zoom
-            if (event.deltaY !== 0 && meta) {
-                const delta = event.deltaY * -0.0024;
-                const value = positions_.zoom + delta;
-                update({ zoom: value, x, y, delta }, event);
-                event.preventDefault();
-            }
-            // move
-            else if (!meta) {
-                // vertical
-                if (event.deltaY !== 0) {
-                    const value = positions_.top + event.deltaY * -1;
-                    update({ top: value, x, y });
-                }
-                // horizontal
-                if (event.deltaX !== 0) {
-                    const value = positions_.left + event.deltaX * -1;
-                    update({ left: value, x, y });
-                }
-                event.preventDefault();
-            }
-        }
-    }, []);
-    const onKeyUp = react_1.default.useCallback(() => {
-        setKeyDown(null);
-    }, []);
-    const onKeyDown = react_1.default.useCallback((event) => {
-        if (event.key === ' ')
-            setKeyDown(event.key);
-    }, []);
-    const onMouseUp = react_1.default.useCallback(() => {
-        refs.mouseDown.current = false;
-        refs.mouseDownMiniMap.current = false;
-        refs.previousMouseEvent.current = undefined;
-    }, []);
-    const onMouseDown = react_1.default.useCallback((event) => {
-        refs.mouseDown.current = true;
-        if ((0, utils_1.is)('function', onMouseDown_))
-            onMouseDown_(event);
-    }, [onMouseDown_]);
-    const onTouchStart = react_1.default.useCallback((event) => {
-        refs.mouseDown.current = true;
-        if ((0, utils_1.is)('function', onTouchStart_))
-            onTouchStart_(event);
-    }, [onTouchStart_]);
-    const onMouseDownMiniMap = react_1.default.useCallback((event) => {
-        refs.mouseDownMiniMap.current = true;
-    }, []);
-    const onTouchStartMiniMap = react_1.default.useCallback((event) => {
-        refs.mouseDownMiniMap.current = true;
-    }, []);
-    const onMoveMiniMap = react_1.default.useCallback((x_, y_, event) => {
-        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 miniMap_ = refs.miniMap.current;
-            const rectMiniMap = miniMap_.getBoundingClientRect();
-            const ratios = {
-                containerMiniMap: container.clientWidth / 170,
-                rootContainer: root.clientWidth / container.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);
-            update({ left, top });
-        }
-    }, []);
-    const onMove = react_1.default.useCallback((x_, y_, event) => {
-        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;
-            update({ left, top });
-        }
-    }, []);
-    const onMouseMove = react_1.default.useCallback((event) => {
-        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;
+  }, []);
+  _react.default.useEffect(() => {
+    // update boundaries
+    updateBoundaries();
+  }, [width, height, positions]);
+  const updatePositions = _react.default.useCallback(valueNew => {
+    valueNew.zoom = (0, _utils.clamp)(valueNew.zoom, refs.minZoom.current, refs.maxZoom.current);
+    valueNew.top = (0, _utils.clamp)(valueNew.top, ...refs.boundaries.current.y);
+    valueNew.left = (0, _utils.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.default.useCallback((values, event) => {
+    const root = refs.root.current;
+    const container = refs.container.current;
+    const rootRect = root.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_ = (0, _utils.clamp)(values.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;
+    } else {
+      if (values.top !== undefined) {
+        top = values.top;
+      }
+      if (values.left !== undefined) {
+        left = values.left;
+      }
+    }
+
+    // update
+    updatePositions({
+      zoom: zoom_,
+      left,
+      top
+    });
+  }, []);
+  const zoom = _react.default.useCallback((value = 1, event) => {
+    update({
+      zoom: value
+    });
+  }, []);
+  const onCenter = _react.default.useCallback(() => {
+    const root = refs.root.current;
+    const container = refs.container.current;
+    const rootRect = root.getBoundingClientRect();
+    const items = Array.from(container.children);
+
+    // container
+    // reset
+    container.style.transform = `matrix(1, 0, 0, 1, 0, 0)`;
+    const values = {
+      top: Number.MAX_SAFE_INTEGER,
+      left: Number.MAX_SAFE_INTEGER,
+      width: 0,
+      height: 0
+    };
+
+    // left, top
+    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);
+    });
+
+    // 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));
+    });
+    if (!items.length) {
+      values.top = container.clientHeight / 2;
+      values.left = container.clientWidth / 2;
+      values.width = values.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 zoomPadding = 0.94;
+    let zoom_ = Math.min((0, _utils.clamp)(rootRect.width / values.width, 0, 4) * zoomPadding, (0, _utils.clamp)(rootRect.height / values.height, 0, 4) * zoomPadding);
+    if (!items.length || items.length === 1) zoom_ = 1;
+
+    // update
+    // top, left
+    update({
+      zoom: 1,
+      top,
+      left
+    });
+
+    // update
+    // zoom
+    if (zoom_ !== 1) update({
+      zoom: zoom_
+    });
+  }, []);
+  const init = _react.default.useCallback(() => {
+    // initially
+    // center
+    onCenter();
+  }, []);
+  const onWheel = _react.default.useCallback(event => {
+    var _refs$root$current;
+    if (event.target === refs.root.current || (_refs$root$current = refs.root.current) !== null && _refs$root$current !== void 0 && _refs$root$current.contains(event.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;
+
+      // zoom
+      if (event.deltaY !== 0 && meta) {
+        const delta = event.deltaY * -0.0024;
+        const value = positions_.zoom + delta;
+        update({
+          zoom: value,
+          x,
+          y,
+          delta
+        }, event);
+        event.preventDefault();
+      }
+      // move
+      else if (!meta) {
+        // vertical
+        if (event.deltaY !== 0) {
+          const value = positions_.top + event.deltaY * -1;
+          update({
+            top: value,
+            x,
+            y
+          });
         }
-    }, []);
-    const onTouchMove = react_1.default.useCallback((event) => {
-        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;
-            // Normalize for use as a mouseDown value
-            refs.previousMouseEvent.current.clientY = clientY;
-            refs.previousMouseEvent.current.clientX = clientX;
+
+        // horizontal
+        if (event.deltaX !== 0) {
+          const value = positions_.left + event.deltaX * -1;
+          update({
+            left: value,
+            x,
+            y
+          });
         }
-    }, []);
-    react_1.default.useEffect(() => {
-        var _a;
-        // init
-        init();
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        window.addEventListener('wheel', onWheel, { passive: false });
-        rootDocument.addEventListener('keyup', onKeyUp);
-        rootDocument.addEventListener('keydown', onKeyDown);
-        rootDocument.addEventListener('mousemove', onMouseMove);
-        rootDocument.addEventListener('touchmove', onTouchMove, { passive: true });
-        rootDocument.addEventListener('mouseup', onMouseUp);
-        rootDocument.addEventListener('touchend', onMouseUp);
-        return () => {
-            window.removeEventListener('wheel', onWheel);
-            rootDocument.removeEventListener('keyup', onKeyUp);
-            rootDocument.removeEventListener('keydown', onKeyDown);
-            rootDocument.removeEventListener('mousemove', onMouseMove);
-            rootDocument.removeEventListener('touchmove', onTouchMove);
-            rootDocument.removeEventListener('mouseup', onMouseUp);
-            rootDocument.removeEventListener('touchend', onMouseUp);
-        };
-    }, []);
-    const onShowGuidelines = react_1.default.useCallback((valueNew) => {
-        setShowGuidelines(valueNew);
-    }, []);
-    const zoomOptions = react_1.default.useMemo(() => {
-        return [
-            { name: 'Zoom to fit', props: { onClick: (event) => onCenter() } },
-            { name: 'Zoom to 25%', value: 0.25, props: { onClick: (event) => zoom(0.25, event) } },
-            { name: 'Zoom to 50%', value: 0.5, props: { onClick: (event) => zoom(0.5, event) } },
-            { name: 'Zoom to 75%', value: 0.75, props: { onClick: (event) => zoom(0.75, event) } },
-            { name: 'Zoom to 100%', value: 1, props: { onClick: (event) => zoom(1, event) } },
-            { name: 'Zoom to 125%', value: 1.25, props: { onClick: (event) => zoom(1.25, event) } },
-            { name: 'Zoom to 150%', value: 1.5, props: { onClick: (event) => zoom(1.5, event) } },
-            { name: 'Zoom to 175%', value: 1.75, props: { onClick: (event) => zoom(1.75, event) } },
-            { name: 'Zoom to 200%', value: 2, props: { onClick: (event) => zoom(2, event) } },
-            { name: 'Zoom to 400%', value: 4, props: { onClick: (event) => zoom(4, event) } }
-        ];
-    }, []);
-    const miniMap = react_1.default.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 width_ = 170;
-        const height_ = 170 / ratios.container;
-        const zoomPerSize = container.clientWidth / width_;
-        const viewportStyles = {
-            width: (width_ * ratios.rootContainer) * zoomAdjusted,
-            height: ((width_ / ratios.root) * ratios.rootContainer) * zoomAdjusted
-        };
-        viewportStyles.left = (Math.abs(positions.left) / zoomPerSize) * zoomAdjusted;
-        viewportStyles.top = (Math.abs(positions.top) / zoomPerSize) * zoomAdjusted;
-        return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: refs.miniMap, onMouseDown: onMouseDownMiniMap, onTouchStart: onTouchStartMiniMap, className: (0, style_react_1.classNames)([
-                classes.miniMap
-            ]), style: {
-                width: width_,
-                height: height_
-            } }, { children: [(0, jsx_runtime_1.jsx)(Line, { className: classes.miniMapMain }), (0, jsx_runtime_1.jsx)(Line, { className: classes.miniMapViewport, style: Object.assign({}, viewportStyles) })] })));
-    }, [positions, onMouseDownMiniMap, onTouchStartMiniMap]);
-    const updateMiniMap = react_1.default.useCallback((0, utils_1.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 itemsContainerMap = {};
-        itemsContainer.forEach(element => {
-            itemsContainerMap[element.dataset.id] = element;
-        });
-        const miniMapItems = miniMap_.children[0];
-        const itemsMiniMapItems = Array.from(miniMapItems.children);
-        const itemsMiniMapItemsMap = {};
-        itemsMiniMapItems.forEach(element => {
-            itemsMiniMapItemsMap[element.dataset.id] = element;
-        });
-        const ratios = {
-            root: root.clientWidth / root.clientHeight,
-            container: container.clientWidth / container.clientHeight,
-            contanerMiniMap: 170 / container.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`;
-        };
-        itemsContainer.forEach(item => {
-            const id = item.dataset.id;
-            const itemCopy = item.cloneNode();
-            updateItemCopy(itemCopy);
-            // add
-            if (!itemsMiniMapItemsMap[id]) {
-                miniMapItems.append(itemCopy);
-            }
-            // update
-            else {
-                const itemExisting = itemsMiniMapItemsMap[id];
-                itemExisting.style.left = itemCopy.style.left;
-                itemExisting.style.top = itemCopy.style.top;
-                itemExisting.style.width = itemCopy.style.width;
-                itemExisting.style.height = itemCopy.style.height;
-            }
-        });
-        itemsMiniMapItems.forEach(item => {
-            const id = item.dataset.id;
-            // remove
-            if (!itemsContainerMap[id]) {
-                item.remove();
-            }
-        });
-    }, 440), []);
-    react_1.default.useEffect(() => {
-        // update
-        // mini map
-        if (useMiniMap)
-            updateMiniMap();
-    }, [children, useMiniMap]);
-    return ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: (item) => {
-            if (ref) {
-                if ((0, utils_1.is)('function', ref))
-                    ref(item);
-                ref.current = item;
-            }
-            refs.root.current = item;
-        }, color: 'default', gap: 0, align: 'unset', justify: 'unset', flex: true, fullWidth: true, onMouseDown: onMouseDown, onTouchStart: onTouchStart, Component: Component, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('HTMLCanvas', theme) && [
-                'onesy-HTMLCanvas-root'
-            ],
-            className,
-            classes.root,
-            keyDown === ' ' && classes.move,
-            disabled && classes.disabled
-        ]) }, other, { children: [pre, !noActions && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', align: 'center', justify: 'flex-start', className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('HTMLCanvas', theme) && [
-                        'onesy-HTMLCanvas-actions'
-                    ],
-                    classes.actions
-                ]) }, { children: [!noGuideLines && ((0, jsx_runtime_1.jsxs)(Label, Object.assign({ value: showGuidelines, onChange: onShowGuidelines, size: 'small' }, { children: [(0, jsx_runtime_1.jsx)(Switch, {}), "Guidelines"] }))), !noFitCenter && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'flex-end' }, { children: (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: 'Fit' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ size: size, onClick: onCenter }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconCenter, {}) })) })) }))), !noZoomMenu && ((0, jsx_runtime_1.jsx)(Menu, Object.assign({ menuItems: zoomOptions.map((item, index) => ((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: item.name }))), value: item.name, selected: +(positions.zoom).toFixed(2) === +(item.value || 0).toFixed(2) }, item.props, { size: 'small', button: true }), item.name))), className: classes.menu }, { children: (0, jsx_runtime_1.jsx)(Line, Object.assign({ align: 'center', justify: 'center', className: classes.zoom }, { children: (0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: size === 'large' ? 'b2' : size === 'regular' ? 'b3' : 'b3', align: 'center', whiteSpace: 'nowrap', fullWidth: true }, { children: [(positions.zoom * 100).toFixed(0), "%"] })) })) })))] }))), (0, jsx_runtime_1.jsx)(Line, Object.assign({}, ContainerProps, { ref: (item) => {
-                    if (ContainerProps === null || ContainerProps === void 0 ? void 0 : ContainerProps.ref) {
-                        if ((0, utils_1.is)('function', ContainerProps === null || ContainerProps === void 0 ? void 0 : ContainerProps.ref))
-                            ContainerProps.ref(item);
-                        ContainerProps.ref.current = item;
-                    }
-                    refs.container.current = item;
-                }, gap: 0, align: 'unset', justify: 'unset', flex: true, fullWidth: true, className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('HTMLCanvas', theme) && [
-                        'onesy-HTMLCanvas-container'
-                    ],
-                    ContainerProps === null || ContainerProps === void 0 ? void 0 : ContainerProps.className,
-                    classes.container,
-                    showGuidelines && guidelines && classes[`guidelines_${[true, 'dots'].includes(guidelines) ? 'dots' : 'lines'}`]
-                ]), style: Object.assign({ width,
-                    height }, ContainerProps === null || ContainerProps === void 0 ? void 0 : ContainerProps.style) }, { children: children })), useMiniMap && miniMap, post] })));
+        event.preventDefault();
+      }
+    }
+  }, []);
+  const onKeyUp = _react.default.useCallback(() => {
+    setKeyDown(null);
+  }, []);
+  const onKeyDown = _react.default.useCallback(event => {
+    if (event.key === ' ') setKeyDown(event.key);
+  }, []);
+  const onMouseUp = _react.default.useCallback(() => {
+    refs.mouseDown.current = false;
+    refs.mouseDownMiniMap.current = false;
+    refs.previousMouseEvent.current = undefined;
+  }, []);
+  const onMouseDown = _react.default.useCallback(event => {
+    refs.mouseDown.current = true;
+    if ((0, _utils.is)('function', onMouseDown_)) onMouseDown_(event);
+  }, [onMouseDown_]);
+  const onTouchStart = _react.default.useCallback(event => {
+    refs.mouseDown.current = true;
+    if ((0, _utils.is)('function', onTouchStart_)) onTouchStart_(event);
+  }, [onTouchStart_]);
+  const onMouseDownMiniMap = _react.default.useCallback(event => {
+    refs.mouseDownMiniMap.current = true;
+  }, []);
+  const onTouchStartMiniMap = _react.default.useCallback(event => {
+    refs.mouseDownMiniMap.current = true;
+  }, []);
+  const onMoveMiniMap = _react.default.useCallback((x_, y_, event) => {
+    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 miniMap_ = refs.miniMap.current;
+      const rectMiniMap = miniMap_.getBoundingClientRect();
+      const ratios = {
+        containerMiniMap: container.clientWidth / 170,
+        rootContainer: root.clientWidth / container.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;
+      update({
+        left,
+        top
+      });
+    }
+  }, []);
+  const onMove = _react.default.useCallback((x_, y_, event) => {
+    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;
+      update({
+        left,
+        top
+      });
+    }
+  }, []);
+  const onMouseMove = _react.default.useCallback(event => {
+    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;
+    }
+  }, []);
+  const onTouchMove = _react.default.useCallback(event => {
+    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;
+
+      // Normalize for use as a mouseDown value
+      refs.previousMouseEvent.current.clientY = clientY;
+      refs.previousMouseEvent.current.clientX = clientX;
+    }
+  }, []);
+  _react.default.useEffect(() => {
+    var _refs$root$current2;
+    // init
+    init();
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
+    window.addEventListener('wheel', onWheel, {
+      passive: false
+    });
+    rootDocument.addEventListener('keyup', onKeyUp);
+    rootDocument.addEventListener('keydown', onKeyDown);
+    rootDocument.addEventListener('mousemove', onMouseMove);
+    rootDocument.addEventListener('touchmove', onTouchMove, {
+      passive: true
+    });
+    rootDocument.addEventListener('mouseup', onMouseUp);
+    rootDocument.addEventListener('touchend', onMouseUp);
+    return () => {
+      window.removeEventListener('wheel', onWheel);
+      rootDocument.removeEventListener('keyup', onKeyUp);
+      rootDocument.removeEventListener('keydown', onKeyDown);
+      rootDocument.removeEventListener('mousemove', onMouseMove);
+      rootDocument.removeEventListener('touchmove', onTouchMove);
+      rootDocument.removeEventListener('mouseup', onMouseUp);
+      rootDocument.removeEventListener('touchend', onMouseUp);
+    };
+  }, []);
+  const onShowGuidelines = _react.default.useCallback(valueNew => {
+    setShowGuidelines(valueNew);
+  }, []);
+  const zoomOptions = _react.default.useMemo(() => {
+    return [{
+      name: 'Zoom to fit',
+      props: {
+        onClick: event => onCenter()
+      }
+    }, {
+      name: 'Zoom to 25%',
+      value: 0.25,
+      props: {
+        onClick: event => zoom(0.25, event)
+      }
+    }, {
+      name: 'Zoom to 50%',
+      value: 0.5,
+      props: {
+        onClick: event => zoom(0.5, event)
+      }
+    }, {
+      name: 'Zoom to 75%',
+      value: 0.75,
+      props: {
+        onClick: event => zoom(0.75, event)
+      }
+    }, {
+      name: 'Zoom to 100%',
+      value: 1,
+      props: {
+        onClick: event => zoom(1, event)
+      }
+    }, {
+      name: 'Zoom to 125%',
+      value: 1.25,
+      props: {
+        onClick: event => zoom(1.25, event)
+      }
+    }, {
+      name: 'Zoom to 150%',
+      value: 1.5,
+      props: {
+        onClick: event => zoom(1.5, event)
+      }
+    }, {
+      name: 'Zoom to 175%',
+      value: 1.75,
+      props: {
+        onClick: event => zoom(1.75, event)
+      }
+    }, {
+      name: 'Zoom to 200%',
+      value: 2,
+      props: {
+        onClick: event => zoom(2, event)
+      }
+    }, {
+      name: 'Zoom to 400%',
+      value: 4,
+      props: {
+        onClick: event => zoom(4, event)
+      }
+    }];
+  }, []);
+  const miniMap = _react.default.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 width_ = 170;
+    const height_ = 170 / ratios.container;
+    const zoomPerSize = container.clientWidth / width_;
+    const viewportStyles = {
+      width: width_ * ratios.rootContainer * zoomAdjusted,
+      height: width_ / ratios.root * ratios.rootContainer * zoomAdjusted
+    };
+    viewportStyles.left = Math.abs(positions.left) / zoomPerSize * zoomAdjusted;
+    viewportStyles.top = Math.abs(positions.top) / zoomPerSize * zoomAdjusted;
+    return /*#__PURE__*/_react.default.createElement(Line, {
+      ref: refs.miniMap,
+      onMouseDown: onMouseDownMiniMap,
+      onTouchStart: onTouchStartMiniMap,
+      className: (0, _styleReact.classNames)([classes.miniMap]),
+      style: {
+        width: width_,
+        height: height_
+      }
+    }, /*#__PURE__*/_react.default.createElement(Line, {
+      className: classes.miniMapMain
+    }), /*#__PURE__*/_react.default.createElement(Line, {
+      className: classes.miniMapViewport,
+      style: _objectSpread({}, viewportStyles)
+    }));
+  }, [positions, onMouseDownMiniMap, onTouchStartMiniMap]);
+  const updateMiniMap = _react.default.useCallback((0, _utils.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 itemsContainerMap = {};
+    itemsContainer.forEach(element => {
+      itemsContainerMap[element.dataset.id] = element;
+    });
+    const miniMapItems = miniMap_.children[0];
+    const itemsMiniMapItems = Array.from(miniMapItems.children);
+    const itemsMiniMapItemsMap = {};
+    itemsMiniMapItems.forEach(element => {
+      itemsMiniMapItemsMap[element.dataset.id] = element;
+    });
+    const ratios = {
+      root: root.clientWidth / root.clientHeight,
+      container: container.clientWidth / container.clientHeight,
+      contanerMiniMap: 170 / container.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`;
+    };
+    itemsContainer.forEach(item => {
+      const id = item.dataset.id;
+      const itemCopy = item.cloneNode();
+      updateItemCopy(itemCopy);
+
+      // add
+      if (!itemsMiniMapItemsMap[id]) {
+        miniMapItems.append(itemCopy);
+      }
+      // update
+      else {
+        const itemExisting = itemsMiniMapItemsMap[id];
+        itemExisting.style.left = itemCopy.style.left;
+        itemExisting.style.top = itemCopy.style.top;
+        itemExisting.style.width = itemCopy.style.width;
+        itemExisting.style.height = itemCopy.style.height;
+      }
+    });
+    itemsMiniMapItems.forEach(item => {
+      const id = item.dataset.id;
+
+      // remove
+      if (!itemsContainerMap[id]) {
+        item.remove();
+      }
+    });
+  }, 440), []);
+  _react.default.useEffect(() => {
+    // update
+    // mini map
+    if (useMiniMap) updateMiniMap();
+  }, [children, useMiniMap]);
+  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);
+        ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    color: "default",
+    gap: 0,
+    align: "unset",
+    justify: "unset",
+    flex: true,
+    fullWidth: true,
+    onMouseDown: onMouseDown,
+    onTouchStart: onTouchStart,
+    Component: Component,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('HTMLCanvas', theme) && ['onesy-HTMLCanvas-root'], className, classes.root, keyDown === ' ' && classes.move, disabled && classes.disabled])
+  }, other), pre, !noActions && /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 0.5,
+    direction: "row",
+    align: "center",
+    justify: "flex-start",
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('HTMLCanvas', theme) && ['onesy-HTMLCanvas-actions'], classes.actions])
+  }, !noGuideLines && /*#__PURE__*/_react.default.createElement(Label, {
+    value: showGuidelines,
+    onChange: onShowGuidelines,
+    size: "small"
+  }, /*#__PURE__*/_react.default.createElement(Switch, null), "Guidelines"), !noFitCenter && /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1,
+    direction: "row",
+    align: "center",
+    justify: "flex-end"
+  }, /*#__PURE__*/_react.default.createElement(Tooltip, {
+    name: "Fit"
+  }, /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    size: size,
+    onClick: onCenter
+  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconCenter, null)))), !noZoomMenu && /*#__PURE__*/_react.default.createElement(Menu, {
+    menuItems: zoomOptions.map((item, index) => /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
+      key: item.name,
+      primary: /*#__PURE__*/_react.default.createElement(Type, {
+        version: "b3"
+      }, item.name),
+      value: item.name,
+      selected: +positions.zoom.toFixed(2) === +(item.value || 0).toFixed(2)
+    }, item.props, {
+      size: "small",
+      button: true
+    }))),
+    className: classes.menu
+  }, /*#__PURE__*/_react.default.createElement(Line, {
+    align: "center",
+    justify: "center",
+    className: classes.zoom
+  }, /*#__PURE__*/_react.default.createElement(Type, {
+    version: size === 'large' ? 'b2' : size === 'regular' ? 'b3' : 'b3',
+    align: "center",
+    whiteSpace: "nowrap",
+    fullWidth: true
+  }, (positions.zoom * 100).toFixed(0), "%")))), /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({}, ContainerProps, {
+    ref: item => {
+      if (ContainerProps !== null && ContainerProps !== void 0 && ContainerProps.ref) {
+        if ((0, _utils.is)('function', ContainerProps === null || ContainerProps === void 0 ? void 0 : ContainerProps.ref)) ContainerProps.ref(item);
+        ContainerProps.ref.current = item;
+      }
+      refs.container.current = item;
+    },
+    gap: 0,
+    align: "unset",
+    justify: "unset",
+    flex: true,
+    fullWidth: true,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('HTMLCanvas', theme) && ['onesy-HTMLCanvas-container'], ContainerProps === null || ContainerProps === void 0 ? void 0 : ContainerProps.className, classes.container, showGuidelines && guidelines && classes[`guidelines_${[true, 'dots'].includes(guidelines) ? 'dots' : 'lines'}`]]),
+    style: _objectSpread({
+      width,
+      height
+    }, ContainerProps === null || ContainerProps === void 0 ? void 0 : ContainerProps.style)
+  }), children), useMiniMap && miniMap, post);
 });
 HTMLCanvas.displayName = 'onesy-HTMLCanvas';
-exports.default = HTMLCanvas;
+var _default = exports.default = HTMLCanvas;