@onesy/ui-react
Version:
UI for React
734 lines (721 loc) • 25.8 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["ref", "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) { _defineProperty(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; }
import React from 'react';
import { clamp, debounce, is, isEnvironment } from '@onesy/utils';
import { classNames, style, useOnesyTheme } from '@onesy/style-react';
import IconMaterialCenterFocusWeak from '@onesy/icons-material-rounded-react/IconMaterialCenterFocusWeakW100';
import LineElement from '../Line';
import SurfaceElement from '../Surface';
import IconButtonElement from '../IconButton';
import TypeElement from '../Type';
import TooltipElement from '../Tooltip';
import MenuElement from '../Menu';
import ListItemElement from '../ListItem';
import LabelElement from '../Label';
import SwitchElement from '../Switch';
import { staticClassName } from '../utils';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const useStyle = 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'
}
}), {
name: 'onesy-HTMLCanvas'
});
const HTMLCanvas = props_ => {
const theme = useOnesyTheme();
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 {
ref,
size = 'regular',
width = 240_000,
height = 240_000,
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 = IconMaterialCenterFocusWeak,
ContainerProps,
IconButtonProps,
Component = Line,
className,
children
} = props,
other = _objectWithoutProperties(props, _excluded);
const {
classes
} = useStyle();
const [positions, setPositions] = React.useState({
zoom: 1,
left: 0,
top: 0
});
const [keyDown, setKeyDown] = React.useState();
const [showGuidelines, setShowGuidelines] = React.useState(!!showGuidelinesDefault);
const refs = {
root: React.useRef(null),
container: React.useRef(null),
miniMap: React.useRef(null),
minZoom: React.useRef(minZoom),
maxZoom: React.useRef(maxZoom),
positions: React.useRef(positions),
previousMouseEvent: React.useRef(null),
mouseDown: React.useRef(false),
mouseDownMiniMap: React.useRef(false),
keyDown: React.useRef(null),
boundaries: React.useRef({
x: [width * positions?.zoom * -1, 0],
y: [height * positions?.zoom * -1, 0]
}),
width: React.useRef(width),
height: React.useRef(height),
disabled: React.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.useEffect(() => {
if (is('object', methods)) {
methods.updatePositions = updatePositions;
}
}, [methods]);
const onChange = 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 (is('function', onChange_)) onChange_(values);
};
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 = 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_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_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_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_0.top !== undefined) {
top = values_0.top;
}
if (values_0.left !== undefined) {
left = values_0.left;
}
}
// update
updatePositions({
zoom: zoom_,
left,
top
});
};
const zoom = (value = 1, event_0) => {
update({
zoom: value
});
};
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_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,
height: 0
};
// left, top
items.forEach(item => {
const itemRect = item.getBoundingClientRect();
item.rect = itemRect;
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_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_1.top = container_0.clientHeight / 2;
values_1.left = container_0.clientWidth / 2;
values_1.width = values_1.height = 0;
}
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__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: top_0,
left: left_0
});
// update
// zoom
if (zoom__0 !== 1) update({
zoom: zoom__0
});
};
const init = () => {
// initially
// center
onCenter();
};
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_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_1.deltaY !== 0 && meta) {
const delta = event_1.deltaY * -0.0024;
const value_0 = positions_.zoom + delta;
update({
zoom: value_0,
x: x_0,
y: y_0,
delta
}, event_1);
event_1.preventDefault();
}
// move
else if (!meta) {
// vertical
if (event_1.deltaY !== 0) {
const value_1 = positions_.top + event_1.deltaY * -1;
update({
top: value_1,
x: x_0,
y: y_0
});
}
// horizontal
if (event_1.deltaX !== 0) {
const value_2 = positions_.left + event_1.deltaX * -1;
update({
left: value_2,
x: x_0,
y: y_0
});
}
event_1.preventDefault();
}
}
};
const onKeyUp = () => {
setKeyDown(null);
};
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 = event_3 => {
refs.mouseDown.current = true;
if (is('function', onMouseDown_)) onMouseDown_(event_3);
};
const onTouchStart = event_4 => {
refs.mouseDown.current = true;
if (is('function', onTouchStart_)) onTouchStart_(event_4);
};
const onMouseDownMiniMap = event_5 => {
refs.mouseDownMiniMap.current = true;
};
const onTouchStartMiniMap = event_6 => {
refs.mouseDownMiniMap.current = true;
};
const onMoveMiniMap = (x_, y_, event_7) => {
if (refs.mouseDownMiniMap.current && refs.previousMouseEvent.current && !refs.disabled.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_1.clientWidth / 170,
rootContainer: root_4.clientWidth / container_1.clientWidth
};
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: left_1,
top: top_1
});
}
};
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__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: left_2,
top: top_2
});
}
};
const onMouseMove = event_9 => {
if ((refs.mouseDown.current || refs.mouseDownMiniMap.current) && !refs.disabled.current) {
const {
clientY,
clientX
} = 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 = event_10 => {
if ((refs.mouseDown.current || refs.mouseDownMiniMap.current) && !refs.disabled.current) {
const {
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_0;
refs.previousMouseEvent.current.clientX = clientX_0;
}
};
React.useEffect(() => {
// init
init();
const rootDocument = isEnvironment('browser') ? refs.root.current?.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 = valueNew_1 => {
setShowGuidelines(valueNew_1);
};
const zoomOptions = React.useMemo(() => {
return [{
name: 'Zoom to fit',
props: {
onClick: event_11 => onCenter()
}
}, {
name: 'Zoom to 25%',
value: 0.25,
props: {
onClick: event_12 => zoom(0.25, event_12)
}
}, {
name: 'Zoom to 50%',
value: 0.5,
props: {
onClick: event_13 => zoom(0.5, event_13)
}
}, {
name: 'Zoom to 75%',
value: 0.75,
props: {
onClick: event_14 => zoom(0.75, event_14)
}
}, {
name: 'Zoom to 100%',
value: 1,
props: {
onClick: event_15 => zoom(1, event_15)
}
}, {
name: 'Zoom to 125%',
value: 1.25,
props: {
onClick: event_16 => zoom(1.25, event_16)
}
}, {
name: 'Zoom to 150%',
value: 1.5,
props: {
onClick: event_17 => zoom(1.5, event_17)
}
}, {
name: 'Zoom to 175%',
value: 1.75,
props: {
onClick: event_18 => zoom(1.75, event_18)
}
}, {
name: 'Zoom to 200%',
value: 2,
props: {
onClick: event_19 => zoom(2, event_19)
}
}, {
name: 'Zoom to 400%',
value: 4,
props: {
onClick: event_20 => zoom(4, event_20)
}
}];
}, []);
const miniMap = React.useMemo(() => {
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_0.container;
const zoomPerSize = container_2.clientWidth / width_;
const viewportStyles = {
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_0;
viewportStyles.top = Math.abs(positions.top) / zoomPerSize * zoomAdjusted_0;
return /*#__PURE__*/_jsxs(Line, {
ref: refs.miniMap,
onMouseDown: onMouseDownMiniMap,
onTouchStart: onTouchStartMiniMap,
className: classNames([classes.miniMap]),
style: {
width: width_,
height: height_
},
children: [/*#__PURE__*/_jsx(Line, {
className: classes.miniMapMain
}), /*#__PURE__*/_jsx(Line, {
className: classes.miniMapViewport,
style: _objectSpread({}, viewportStyles)
})]
});
}, [positions, onMouseDownMiniMap, onTouchStartMiniMap]);
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__0.children[0];
const itemsMiniMapItems = Array.from(miniMapItems.children);
const itemsMiniMapItemsMap = {};
itemsMiniMapItems.forEach(element_0 => {
itemsMiniMapItemsMap[element_0.dataset.id] = element_0;
});
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_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_2 => {
const id = item_2.dataset.id;
const itemCopy = item_2.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_3 => {
const id_0 = item_3.dataset.id;
// remove
if (!itemsContainerMap[id_0]) {
item_3.remove();
}
});
}, 440);
React.useEffect(() => {
// update
// mini map
if (useMiniMap) updateMiniMap();
}, [children, useMiniMap]);
return /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread({
ref: item_4 => {
if (ref) {
if (is('function', ref)) ref(item_4);
ref.current = item_4;
}
refs.root.current = item_4;
},
color: "default",
gap: 0,
align: "unset",
justify: "unset",
flex: true,
fullWidth: true,
onMouseDown: onMouseDown,
onTouchStart: onTouchStart,
Component: Component,
className: classNames([staticClassName('HTMLCanvas', theme) && ['onesy-HTMLCanvas-root'], className, classes.root, keyDown === ' ' && classes.move, disabled && classes.disabled])
}, other), {}, {
children: [pre, !noActions && /*#__PURE__*/_jsxs(Line, {
gap: 0.5,
direction: "row",
align: "center",
justify: "flex-start",
className: classNames([staticClassName('HTMLCanvas', theme) && ['onesy-HTMLCanvas-actions'], classes.actions]),
children: [!noGuideLines && /*#__PURE__*/_jsxs(Label, {
value: showGuidelines,
onChange: onShowGuidelines,
size: "small",
children: [/*#__PURE__*/_jsx(Switch, {}), "Guidelines"]
}), !noFitCenter && /*#__PURE__*/_jsx(Line, {
gap: 1,
direction: "row",
align: "center",
justify: "flex-end",
children: /*#__PURE__*/_jsx(Tooltip, {
name: "Fit",
children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
size: size,
onClick: onCenter
}, IconButtonProps), {}, {
children: /*#__PURE__*/_jsx(IconCenter, {})
}))
})
}), !noZoomMenu && /*#__PURE__*/_jsx(Menu, {
menuItems: zoomOptions.map((item_5, index) => /*#__PURE__*/_jsx(ListItem, _objectSpread(_objectSpread({
primary: /*#__PURE__*/_jsx(Type, {
version: "b3",
children: 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
}), item_5.name)),
className: classes.menu,
children: /*#__PURE__*/_jsx(Line, {
align: "center",
justify: "center",
className: classes.zoom,
children: /*#__PURE__*/_jsxs(Type, {
version: size === 'large' ? 'b2' : size === 'regular' ? 'b3' : 'b3',
align: "center",
whiteSpace: "nowrap",
fullWidth: true,
children: [(positions.zoom * 100).toFixed(0), "%"]
})
})
})]
}), /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({}, ContainerProps), {}, {
ref: item_6 => {
if (ContainerProps?.ref) {
if (is('function', ContainerProps?.ref)) ContainerProps.ref(item_6);
ContainerProps.ref.current = item_6;
}
refs.container.current = item_6;
},
gap: 0,
align: "unset",
justify: "unset",
flex: true,
fullWidth: true,
className: classNames([staticClassName('HTMLCanvas', theme) && ['onesy-HTMLCanvas-container'], ContainerProps?.className, classes.container, showGuidelines && guidelines && classes[`guidelines_${[true, 'dots'].includes(guidelines) ? 'dots' : 'lines'}`]]),
style: _objectSpread({
width,
height
}, ContainerProps?.style),
children: children
})), useMiniMap && miniMap, post]
}));
};
HTMLCanvas.displayName = 'onesy-HTMLCanvas';
export default HTMLCanvas;