mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
feat: snap when cropping as well (#8831)
* crop with snap * make crop snap work with cmd as well * turn off grid with cmd as well in crop
This commit is contained in:
parent
2af3221974
commit
551bae07a7
1 changed files with 26 additions and 3 deletions
|
@ -10356,7 +10356,7 @@ class App extends React.Component<AppProps, AppState> {
|
||||||
const [x, y] = getGridPoint(
|
const [x, y] = getGridPoint(
|
||||||
pointerCoords.x - pointerDownState.resize.offset.x,
|
pointerCoords.x - pointerDownState.resize.offset.x,
|
||||||
pointerCoords.y - pointerDownState.resize.offset.y,
|
pointerCoords.y - pointerDownState.resize.offset.y,
|
||||||
this.getEffectiveGridSize(),
|
event[KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize(),
|
||||||
);
|
);
|
||||||
|
|
||||||
const croppingElement = this.scene
|
const croppingElement = this.scene
|
||||||
|
@ -10382,6 +10382,28 @@ class App extends React.Component<AppProps, AppState> {
|
||||||
image &&
|
image &&
|
||||||
!(image instanceof Promise)
|
!(image instanceof Promise)
|
||||||
) {
|
) {
|
||||||
|
const [gridX, gridY] = getGridPoint(
|
||||||
|
pointerCoords.x,
|
||||||
|
pointerCoords.y,
|
||||||
|
event[KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize(),
|
||||||
|
);
|
||||||
|
|
||||||
|
const dragOffset = {
|
||||||
|
x: gridX - pointerDownState.originInGrid.x,
|
||||||
|
y: gridY - pointerDownState.originInGrid.y,
|
||||||
|
};
|
||||||
|
|
||||||
|
this.maybeCacheReferenceSnapPoints(event, [croppingElement]);
|
||||||
|
|
||||||
|
const { snapOffset, snapLines } = snapResizingElements(
|
||||||
|
[croppingElement],
|
||||||
|
[croppingAtStateStart],
|
||||||
|
this,
|
||||||
|
event,
|
||||||
|
dragOffset,
|
||||||
|
transformHandleType,
|
||||||
|
);
|
||||||
|
|
||||||
mutateElement(
|
mutateElement(
|
||||||
croppingElement,
|
croppingElement,
|
||||||
cropElement(
|
cropElement(
|
||||||
|
@ -10389,8 +10411,8 @@ class App extends React.Component<AppProps, AppState> {
|
||||||
transformHandleType,
|
transformHandleType,
|
||||||
image.naturalWidth,
|
image.naturalWidth,
|
||||||
image.naturalHeight,
|
image.naturalHeight,
|
||||||
x,
|
x + snapOffset.x,
|
||||||
y,
|
y + snapOffset.y,
|
||||||
event.shiftKey
|
event.shiftKey
|
||||||
? croppingAtStateStart.width / croppingAtStateStart.height
|
? croppingAtStateStart.width / croppingAtStateStart.height
|
||||||
: undefined,
|
: undefined,
|
||||||
|
@ -10410,6 +10432,7 @@ class App extends React.Component<AppProps, AppState> {
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
isCropping: transformHandleType && transformHandleType !== "rotation",
|
isCropping: transformHandleType && transformHandleType !== "rotation",
|
||||||
|
snapLines,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue