@onesy/ui-react
Version:
UI for React
744 lines (730 loc) • 29.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
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");
var _jsxRuntime = require("react/jsx-runtime");
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) { (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'
}
},
disabled: {
pointerEvents: 'none',
opacity: 0.54,
cursor: 'default'
}
}), {
name: 'onesy-HTMLCanvas'
});
const HTMLCanvas = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9;
const theme = (0, _styleReact.useOnesyTheme)();
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyHTMLCanvas) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
const Surface = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
const IconButton = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.IconButton) || _IconButton.default;
const Type = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Type) || _Type.default;
const Tooltip = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Tooltip) || _Tooltip.default;
const Menu = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Menu) || _Menu.default;
const ListItem = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.ListItem) || _ListItem.default;
const Label = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.Label) || _Label.default;
const Switch = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.Switch) || _Switch.default;
const {
ref,
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 = 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);
};
const updateBoundaries = (valueZoom = (_refs$positions$curre => (_refs$positions$curre = refs.positions.current) === null || _refs$positions$curre === void 0 ? void 0 : _refs$positions$curre.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.default.useEffect(() => {
// update boundaries
updateBoundaries();
}, [width, height, positions]);
const updatePositions = valueNew_0 => {
valueNew_0.zoom = (0, _utils.clamp)(valueNew_0.zoom, refs.minZoom.current, refs.maxZoom.current);
valueNew_0.top = (0, _utils.clamp)(valueNew_0.top, ...refs.boundaries.current.y);
valueNew_0.left = (0, _utils.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_ = (0, _utils.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((0, _utils.clamp)(rootRect_1.width / values_1.width, 0, 4) * zoomPadding, (0, _utils.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 => {
var _refs$root$current;
if (event_1.target === refs.root.current || (_refs$root$current = refs.root.current) !== null && _refs$root$current !== void 0 && _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 ((0, _utils.is)('function', onMouseDown_)) onMouseDown_(event_3);
};
const onTouchStart = event_4 => {
refs.mouseDown.current = true;
if ((0, _utils.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.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 = valueNew_1 => {
setShowGuidelines(valueNew_1);
};
const zoomOptions = _react.default.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.default.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__*/(0, _jsxRuntime.jsxs)(Line, {
ref: refs.miniMap,
onMouseDown: onMouseDownMiniMap,
onTouchStart: onTouchStartMiniMap,
className: (0, _styleReact.classNames)([classes.miniMap]),
style: {
width: width_,
height: height_
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
className: classes.miniMapMain
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
className: classes.miniMapViewport,
style: _objectSpread({}, viewportStyles)
})]
});
}, [positions, onMouseDownMiniMap, onTouchStartMiniMap]);
const updateMiniMap = (0, _utils.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.default.useEffect(() => {
// update
// mini map
if (useMiniMap) updateMiniMap();
}, [children, useMiniMap]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
ref: item_4 => {
if (ref) {
if ((0, _utils.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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('HTMLCanvas', theme) && ['onesy-HTMLCanvas-root'], className, classes.root, keyDown === ' ' && classes.move, disabled && classes.disabled])
}, other), {}, {
children: [pre, !noActions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(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]),
children: [!noGuideLines && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, {
value: showGuidelines,
onChange: onShowGuidelines,
size: "small",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Switch, {}), "Guidelines"]
}), !noFitCenter && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 1,
direction: "row",
align: "center",
justify: "flex-end",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
name: "Fit",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
size: size,
onClick: onCenter
}, IconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconCenter, {})
}))
})
}), !noZoomMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu, {
menuItems: zoomOptions.map((item_5, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, _objectSpread(_objectSpread({
primary: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(Line, {
align: "center",
justify: "center",
className: classes.zoom,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, {
version: size === 'large' ? 'b2' : size === 'regular' ? 'b3' : 'b3',
align: "center",
whiteSpace: "nowrap",
fullWidth: true,
children: [(positions.zoom * 100).toFixed(0), "%"]
})
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({}, ContainerProps), {}, {
ref: item_6 => {
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_6);
ContainerProps.ref.current = item_6;
}
refs.container.current = item_6;
},
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: children
})), useMiniMap && miniMap, post]
}));
};
HTMLCanvas.displayName = 'onesy-HTMLCanvas';
var _default = exports.default = HTMLCanvas;