105 lines
2.4 KiB
TypeScript
105 lines
2.4 KiB
TypeScript
/**
|
|
* The user selection rectangle gets displayed when a user drags the mouse while pressing shift
|
|
*/
|
|
import { XYPosition } from '../../types';
|
|
import { defineComponent, PropType } from 'vue-demi';
|
|
import store from '../../store';
|
|
|
|
type UserSelectionProps = {
|
|
selectionKeyPressed: boolean;
|
|
};
|
|
|
|
function getMousePosition(event: MouseEvent): XYPosition | void {
|
|
const reactFlowNode = (event.target as Element).closest('.react-flow');
|
|
if (!reactFlowNode) {
|
|
return;
|
|
}
|
|
|
|
const containerBounds = reactFlowNode.getBoundingClientRect();
|
|
|
|
return {
|
|
x: event.clientX - containerBounds.left,
|
|
y: event.clientY - containerBounds.top
|
|
};
|
|
}
|
|
|
|
const SelectionRect = defineComponent({
|
|
setup() {
|
|
const pinia = store();
|
|
|
|
if (!pinia.userSelectionRect.draw) {
|
|
return null;
|
|
}
|
|
|
|
return () => (
|
|
<div
|
|
class="react-flow__selection"
|
|
style={{
|
|
width: pinia.userSelectionRect.width,
|
|
height: pinia.userSelectionRect.height,
|
|
transform: `translate(${pinia.userSelectionRect.x}px, ${pinia.userSelectionRect.y}px)`
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
});
|
|
|
|
export default defineComponent({
|
|
components: { SelectionRect },
|
|
props: {
|
|
selectionKeyPressed: {
|
|
type: Boolean as PropType<UserSelectionProps['selectionKeyPressed']>,
|
|
required: true
|
|
}
|
|
},
|
|
setup(props) {
|
|
const pinia = store();
|
|
const renderUserSelectionPane = pinia.selectionActive || props.selectionKeyPressed;
|
|
|
|
if (!pinia.elementsSelectable || !renderUserSelectionPane) {
|
|
return null;
|
|
}
|
|
|
|
const onMouseDown = (event: MouseEvent): void => {
|
|
const mousePos = getMousePosition(event);
|
|
if (!mousePos) {
|
|
return;
|
|
}
|
|
|
|
pinia.setUserSelection(mousePos);
|
|
};
|
|
|
|
const onMouseMove = (event: MouseEvent): void => {
|
|
if (!props.selectionKeyPressed || !pinia.selectionActive) {
|
|
return;
|
|
}
|
|
const mousePos = getMousePosition(event);
|
|
|
|
if (!mousePos) {
|
|
return;
|
|
}
|
|
|
|
pinia.updateUserSelection(mousePos);
|
|
};
|
|
|
|
const onMouseUp = () => pinia.unsetUserSelection();
|
|
|
|
const onMouseLeave = () => {
|
|
pinia.unsetUserSelection();
|
|
pinia.unsetNodesSelection();
|
|
};
|
|
|
|
return () => (
|
|
<div
|
|
class="react-flow__selectionpane"
|
|
onMousedown={onMouseDown}
|
|
onMousemove={onMouseMove}
|
|
onMouseup={onMouseUp}
|
|
onMouseleave={onMouseLeave}
|
|
>
|
|
<SelectionRect />
|
|
</div>
|
|
);
|
|
}
|
|
});
|