jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Media Editor: reset object position and rotation 

Co-authored-by: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
This commit is contained in:
automated-signal 2022-02-24 15:58:06 -08:00 committed by GitHub
parent 8080098827
commit e19df56a58
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 56 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
ts/components/MediaEditor.tsx
View File

@ -719,6 +719,7 @@ export const MediaEditor = ({
width: image.width,
};
setImageState(newImageState);
moveFabricObjectsForReset(fabricCanvas, imageState);
takeSnapshot('reset', newImageState);
}}
type="button"
@ -740,7 +741,7 @@ export const MediaEditor = ({
const center = obj.getCenterPoint();
obj.set('angle', ((obj.angle || 0) - 90) % 360);
obj.set('angle', ((obj.angle || 0) + 270) % 360);
obj.setPositionByOrigin(
new fabric.Point(center.y, imageState.width - center.x),
@ -1131,6 +1132,60 @@ function moveFabricObjectsForCrop(
});
}
function moveFabricObjectsForReset(
fabricCanvas: fabric.Canvas,
oldImageState: Readonly<ImageStateType>
): void {
fabricCanvas.getObjects().forEach(obj => {
if (obj.excludeFromExport) {
return;
}
let newCenterX: number;
let newCenterY: number;
// First, reset position changes caused by image rotation:
const oldCenter = obj.getCenterPoint();
const distanceFromRightEdge = oldImageState.width - oldCenter.x;
const distanceFromBottomEdge = oldImageState.height - oldCenter.y;
switch (oldImageState.angle % 360) {
case 0:
newCenterX = oldCenter.x;
newCenterY = oldCenter.y;
break;
case 90:
newCenterX = oldCenter.y;
newCenterY = distanceFromRightEdge;
break;
case 180:
newCenterX = distanceFromRightEdge;
newCenterY = distanceFromBottomEdge;
break;
case 270:
newCenterX = distanceFromBottomEdge;
newCenterY = oldCenter.x;
break;
default:
throw new Error('Unexpected angle');
}
// Next, reset position changes caused by crop:
newCenterX += oldImageState.cropX;
newCenterY += oldImageState.cropY;
// It's important to set the angle *before* setting the position, because
// Fabric's positioning is affected by object angle.
obj.set('angle', (obj.angle || 0) - oldImageState.angle);
obj.setPositionByOrigin(
new fabric.Point(newCenterX, newCenterY),
'center',
'center'
);
obj.setCoords();
});
}
function drawFabricBackgroundImage({
fabricCanvas,
image,