|
|
|
|
@ -794,7 +794,8 @@ class App extends React.Component<AppProps, AppState> {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
public async componentDidMount() {
|
|
|
|
|
this.excalidrawContainerValue.container = this.excalidrawContainerRef.current;
|
|
|
|
|
this.excalidrawContainerValue.container =
|
|
|
|
|
this.excalidrawContainerRef.current;
|
|
|
|
|
|
|
|
|
|
if (
|
|
|
|
|
process.env.NODE_ENV === ENV.TEST ||
|
|
|
|
|
@ -836,10 +837,8 @@ class App extends React.Component<AppProps, AppState> {
|
|
|
|
|
this.resizeObserver = new ResizeObserver(() => {
|
|
|
|
|
// compute isMobile state
|
|
|
|
|
// ---------------------------------------------------------------------
|
|
|
|
|
const {
|
|
|
|
|
width,
|
|
|
|
|
height,
|
|
|
|
|
} = this.excalidrawContainerRef.current!.getBoundingClientRect();
|
|
|
|
|
const { width, height } =
|
|
|
|
|
this.excalidrawContainerRef.current!.getBoundingClientRect();
|
|
|
|
|
this.isMobile =
|
|
|
|
|
width < MQ_MAX_WIDTH_PORTRAIT ||
|
|
|
|
|
(height < MQ_MAX_HEIGHT_LANDSCAPE && width < MQ_MAX_WIDTH_LANDSCAPE);
|
|
|
|
|
@ -1243,9 +1242,8 @@ class App extends React.Component<AppProps, AppState> {
|
|
|
|
|
async (event: ClipboardEvent | null) => {
|
|
|
|
|
// #686
|
|
|
|
|
const target = document.activeElement;
|
|
|
|
|
const isExcalidrawActive = this.excalidrawContainerRef.current?.contains(
|
|
|
|
|
target,
|
|
|
|
|
);
|
|
|
|
|
const isExcalidrawActive =
|
|
|
|
|
this.excalidrawContainerRef.current?.contains(target);
|
|
|
|
|
if (!isExcalidrawActive) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
@ -2207,7 +2205,10 @@ class App extends React.Component<AppProps, AppState> {
|
|
|
|
|
}));
|
|
|
|
|
this.resetShouldCacheIgnoreZoomDebounced();
|
|
|
|
|
} else {
|
|
|
|
|
gesture.lastCenter = gesture.initialDistance = gesture.initialScale = null;
|
|
|
|
|
gesture.lastCenter =
|
|
|
|
|
gesture.initialDistance =
|
|
|
|
|
gesture.initialScale =
|
|
|
|
|
null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (isHoldingSpace || isPanning || isDraggingScrollBar) {
|
|
|
|
|
@ -2516,13 +2517,11 @@ class App extends React.Component<AppProps, AppState> {
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const onPointerMove = this.onPointerMoveFromPointerDownHandler(
|
|
|
|
|
pointerDownState,
|
|
|
|
|
);
|
|
|
|
|
const onPointerMove =
|
|
|
|
|
this.onPointerMoveFromPointerDownHandler(pointerDownState);
|
|
|
|
|
|
|
|
|
|
const onPointerUp = this.onPointerUpFromPointerDownHandler(
|
|
|
|
|
pointerDownState,
|
|
|
|
|
);
|
|
|
|
|
const onPointerUp =
|
|
|
|
|
this.onPointerUpFromPointerDownHandler(pointerDownState);
|
|
|
|
|
|
|
|
|
|
const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);
|
|
|
|
|
const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);
|
|
|
|
|
@ -2727,10 +2726,11 @@ class App extends React.Component<AppProps, AppState> {
|
|
|
|
|
allHitElements: [],
|
|
|
|
|
wasAddedToSelection: false,
|
|
|
|
|
hasBeenDuplicated: false,
|
|
|
|
|
hasHitCommonBoundingBoxOfSelectedElements: this.isHittingCommonBoundingBoxOfSelectedElements(
|
|
|
|
|
origin,
|
|
|
|
|
selectedElements,
|
|
|
|
|
),
|
|
|
|
|
hasHitCommonBoundingBoxOfSelectedElements:
|
|
|
|
|
this.isHittingCommonBoundingBoxOfSelectedElements(
|
|
|
|
|
origin,
|
|
|
|
|
selectedElements,
|
|
|
|
|
),
|
|
|
|
|
},
|
|
|
|
|
drag: {
|
|
|
|
|
hasOccurred: false,
|
|
|
|
|
@ -2807,14 +2807,15 @@ class App extends React.Component<AppProps, AppState> {
|
|
|
|
|
const elements = this.scene.getElements();
|
|
|
|
|
const selectedElements = getSelectedElements(elements, this.state);
|
|
|
|
|
if (selectedElements.length === 1 && !this.state.editingLinearElement) {
|
|
|
|
|
const elementWithTransformHandleType = getElementWithTransformHandleType(
|
|
|
|
|
elements,
|
|
|
|
|
this.state,
|
|
|
|
|
pointerDownState.origin.x,
|
|
|
|
|
pointerDownState.origin.y,
|
|
|
|
|
this.state.zoom,
|
|
|
|
|
event.pointerType,
|
|
|
|
|
);
|
|
|
|
|
const elementWithTransformHandleType =
|
|
|
|
|
getElementWithTransformHandleType(
|
|
|
|
|
elements,
|
|
|
|
|
this.state,
|
|
|
|
|
pointerDownState.origin.x,
|
|
|
|
|
pointerDownState.origin.y,
|
|
|
|
|
this.state.zoom,
|
|
|
|
|
event.pointerType,
|
|
|
|
|
);
|
|
|
|
|
if (elementWithTransformHandleType != null) {
|
|
|
|
|
this.setState({
|
|
|
|
|
resizingElement: elementWithTransformHandleType.element,
|
|
|
|
|
@ -2890,9 +2891,10 @@ class App extends React.Component<AppProps, AppState> {
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const hitElement = pointerDownState.hit.element;
|
|
|
|
|
const someHitElementIsSelected = pointerDownState.hit.allHitElements.some(
|
|
|
|
|
(element) => this.isASelectedElement(element),
|
|
|
|
|
);
|
|
|
|
|
const someHitElementIsSelected =
|
|
|
|
|
pointerDownState.hit.allHitElements.some((element) =>
|
|
|
|
|
this.isASelectedElement(element),
|
|
|
|
|
);
|
|
|
|
|
if (
|
|
|
|
|
(hitElement === null || !someHitElementIsSelected) &&
|
|
|
|
|
!event.shiftKey &&
|
|
|
|
|
@ -3554,8 +3556,8 @@ class App extends React.Component<AppProps, AppState> {
|
|
|
|
|
? {
|
|
|
|
|
// if using ctrl/cmd, select the hitElement only if we
|
|
|
|
|
// haven't box-selected anything else
|
|
|
|
|
[pointerDownState.hit.element
|
|
|
|
|
.id]: !elementsWithinSelection.length,
|
|
|
|
|
[pointerDownState.hit.element.id]:
|
|
|
|
|
!elementsWithinSelection.length,
|
|
|
|
|
}
|
|
|
|
|
: null),
|
|
|
|
|
},
|
|
|
|
|
@ -4429,7 +4431,9 @@ class App extends React.Component<AppProps, AppState> {
|
|
|
|
|
// This will only work as of Chrome 86,
|
|
|
|
|
// but can be safely ignored on older releases.
|
|
|
|
|
const item = event.dataTransfer.items[0];
|
|
|
|
|
(file as any).handle = await (item as any).getAsFileSystemHandle();
|
|
|
|
|
(file as any).handle = await (
|
|
|
|
|
item as any
|
|
|
|
|
).getAsFileSystemHandle();
|
|
|
|
|
} catch (error: any) {
|
|
|
|
|
console.warn(error.name, error.message);
|
|
|
|
|
}
|
|
|
|
|
@ -4551,10 +4555,8 @@ class App extends React.Component<AppProps, AppState> {
|
|
|
|
|
const type = element ? "element" : "canvas";
|
|
|
|
|
|
|
|
|
|
const container = this.excalidrawContainerRef.current!;
|
|
|
|
|
const {
|
|
|
|
|
top: offsetTop,
|
|
|
|
|
left: offsetLeft,
|
|
|
|
|
} = container.getBoundingClientRect();
|
|
|
|
|
const { top: offsetTop, left: offsetLeft } =
|
|
|
|
|
container.getBoundingClientRect();
|
|
|
|
|
const left = event.clientX - offsetLeft;
|
|
|
|
|
const top = event.clientY - offsetTop;
|
|
|
|
|
|
|
|
|
|
|
Lipis
3 years ago
committed by
GitHub