144 lines
3.7 KiB
JavaScript
144 lines
3.7 KiB
JavaScript
import * as React from 'react';
|
|
import { createRoot } from 'react-dom/client';
|
|
import PropTypes from 'prop-types';
|
|
import { HUNDRED_PERCENT } from '/imports/utils/slideCalcUtils';
|
|
import Styled from '../styles';
|
|
|
|
const DEFAULT_TOOL_COUNT = 9;
|
|
|
|
class PanToolInjector extends React.Component {
|
|
componentDidMount() {
|
|
this.addPanTool();
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
const {
|
|
zoomValue,
|
|
fitToWidth,
|
|
isPanning,
|
|
setIsPanning,
|
|
tldrawAPI,
|
|
panSelected,
|
|
setPanSelected,
|
|
} = this.props;
|
|
if (prevProps.zoomValue !== zoomValue
|
|
|| prevProps.fitToWidth !== fitToWidth
|
|
|| prevProps.isPanning !== isPanning
|
|
|| prevProps.tldrawAPI !== tldrawAPI
|
|
|| prevProps.panSelected !== panSelected
|
|
) {
|
|
this.addPanTool();
|
|
if (panSelected) {
|
|
setIsPanning(true);
|
|
setPanSelected(true);
|
|
} else {
|
|
setIsPanning(false);
|
|
setPanSelected(false);
|
|
}
|
|
}
|
|
}
|
|
|
|
addPanTool() {
|
|
const {
|
|
zoomValue,
|
|
fitToWidth,
|
|
setIsPanning,
|
|
formatMessage,
|
|
tldrawAPI,
|
|
panSelected,
|
|
setPanSelected,
|
|
} = this.props;
|
|
|
|
if (panSelected) {
|
|
tldrawAPI?.selectTool('select');
|
|
}
|
|
|
|
const tools = document.querySelectorAll('[id*="TD-PrimaryTools-"]');
|
|
tools.forEach((tool) => {
|
|
const { classList } = tool.firstElementChild;
|
|
if (panSelected) {
|
|
classList.add('overrideSelect');
|
|
} else {
|
|
classList.remove('overrideSelect');
|
|
}
|
|
});
|
|
|
|
const parentElement = document.getElementById('TD-PrimaryTools');
|
|
if (!parentElement) return;
|
|
|
|
if (parentElement.childElementCount === DEFAULT_TOOL_COUNT) {
|
|
parentElement.removeChild(parentElement.children[1]);
|
|
}
|
|
|
|
if (parentElement.childElementCount < DEFAULT_TOOL_COUNT) {
|
|
const label = formatMessage({
|
|
id: 'app.whiteboard.toolbar.tools.hand',
|
|
description: 'presentation toolbar pan label',
|
|
});
|
|
const container = document.createElement('span');
|
|
parentElement.appendChild(container);
|
|
|
|
const root = createRoot(container);
|
|
|
|
root.render(
|
|
<Styled.PanTool
|
|
key="bbb-panBtn"
|
|
role="button"
|
|
data-test="panButton"
|
|
data-zoom={zoomValue}
|
|
className={panSelected ? 'select' : 'overrideSelect'}
|
|
color="light"
|
|
icon="hand"
|
|
size="md"
|
|
label={label}
|
|
aria-label={label}
|
|
tooltipdelay={700}
|
|
tooltipplacement="top"
|
|
onClick={() => {
|
|
setPanSelected(true);
|
|
setIsPanning(true);
|
|
if (!(zoomValue <= HUNDRED_PERCENT && !fitToWidth)) {
|
|
const panButton = document.querySelector('[data-test="panButton"]');
|
|
if (panButton) {
|
|
panButton.classList.remove('selectOverride');
|
|
panButton.classList.add('select');
|
|
}
|
|
}
|
|
}}
|
|
hideLabel
|
|
{...{
|
|
panSelected,
|
|
}}
|
|
/>,
|
|
);
|
|
|
|
const { lastChild } = parentElement;
|
|
const secondChild = parentElement.children[1];
|
|
parentElement.insertBefore(lastChild, secondChild);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
PanToolInjector.propTypes = {
|
|
fitToWidth: PropTypes.bool.isRequired,
|
|
zoomValue: PropTypes.number.isRequired,
|
|
formatMessage: PropTypes.func.isRequired,
|
|
isPanning: PropTypes.bool.isRequired,
|
|
setIsPanning: PropTypes.func.isRequired,
|
|
tldrawAPI: PropTypes.shape({
|
|
selectTool: PropTypes.func.isRequired,
|
|
}),
|
|
panSelected: PropTypes.bool.isRequired,
|
|
setPanSelected: PropTypes.func.isRequired,
|
|
};
|
|
|
|
PanToolInjector.defaultProps = {
|
|
tldrawAPI: null,
|
|
};
|
|
|
|
export default PanToolInjector;
|