@amaui/ui-react
Version:
UI for React
550 lines (549 loc) • 30.4 kB
JavaScript
"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("@amaui/utils");
const style_react_1 = require("@amaui/style-react");
const IconMaterialCenterFocusWeakW100_1 = __importDefault(require("@amaui/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: {
'& .amaui-List-root': {
maxHeight: 240,
overflow: 'hidden auto'
}
},
disabled: {
pointerEvents: 'none',
opacity: 0.54,
cursor: 'default'
}
}), { name: 'amaui-HTMLCanvas' });
const HTMLCanvas = react_1.default.forwardRef((props_, ref) => {
const theme = (0, style_react_1.useAmauiTheme)();
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.amauiHTMLCanvas) === 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(undefined),
container: react_1.default.useRef(undefined),
miniMap: react_1.default.useRef(undefined),
minZoom: react_1.default.useRef(minZoom),
maxZoom: react_1.default.useRef(maxZoom),
positions: react_1.default.useRef(positions),
previousMouseEvent: react_1.default.useRef(),
mouseDown: react_1.default.useRef(false),
mouseDownMiniMap: react_1.default.useRef(false),
keyDown: react_1.default.useRef(undefined),
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)
};
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;
}
}, []);
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;
}
}, []);
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) && [
'amaui-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) && [
'amaui-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) && [
'amaui-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] })));
});
HTMLCanvas.displayName = 'amaui-HTMLCanvas';
exports.default = HTMLCanvas;