Skip to content

Commit

Permalink
feat: preserve aspect ratio when resizing images and drawings (#109)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jmjuanes
jmjuanes authored Oct 27, 2024
1 parent 0132fa6 commit 5ea6a0a
Showing 1 changed file with 58 additions and 53 deletions.
111 changes: 58 additions & 53 deletions app/elements.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,61 @@ const checkStrokeStyleValue = initialValue => {
return initialValue === STROKES.NONE ? STROKES.SOLID : initialValue;
};

// allow to perserve the aspect ratio of the element
const preserveAspectRatio = (element, snapshot, event) => {
if (event.shiftKey) {
const ratio = (snapshot.y2 - snapshot.y1) / Math.max(1, snapshot.x2 - snapshot.x1);
if (event.handler === HANDLERS.CORNER_TOP_LEFT) {
if (event.dx * ratio < event.dy) {
element.y1 = snapshot.y1 + ((element.x1 - snapshot.x1) * ratio);
}
else {
element.x1 = snapshot.x1 + ((element.y1 - snapshot.y1) / ratio);
}
}
else if (event.handler === HANDLERS.CORNER_TOP_RIGHT) {
if ((-1) * event.dx * ratio < event.dy) {
element.y1 = snapshot.y1 - ((element.x2 - snapshot.x2) * ratio);
}
else {
element.x2 = snapshot.x2 - ((element.y1 - snapshot.y1) / ratio);
}
}
else if (event.handler === HANDLERS.CORNER_BOTTOM_LEFT) {
if ((-1) * event.dx * ratio > event.dy) {
element.y2 = snapshot.y2 - ((element.x1 - snapshot.x1) * ratio);
}
else {
element.x1 = snapshot.x1 - ((element.y2 - snapshot.y2) / ratio);
}
}
else if (event.handler === HANDLERS.CORNER_BOTTOM_RIGHT) {
if (event.dx * ratio > event.dy) {
element.y2 = snapshot.y2 + ((element.x2 - snapshot.x2) * ratio);
}
else {
element.x2 = snapshot.x2 + ((element.y2 - snapshot.y2) / ratio);
}
}
else if (event.handler === HANDLERS.EDGE_TOP) {
element.x1 = snapshot.x1 + ((snapshot.x2 - snapshot.x1) / 2) - ((element.y2 - element.y1) / (2 * ratio));
element.x2 = snapshot.x2 - ((snapshot.x2 - snapshot.x1) / 2) + ((element.y2 - element.y1) / (2 * ratio));
}
else if (event.handler === HANDLERS.EDGE_BOTTOM) {
element.x1 = snapshot.x1 + ((snapshot.x2 - snapshot.x1) / 2) - ((element.y2 - element.y1) / (2 * ratio));
element.x2 = snapshot.x2 - ((snapshot.x2 - snapshot.x1) / 2) + ((element.y2 - element.y1) / (2 * ratio));
}
else if (event.handler === HANDLERS.EDGE_LEFT) {
element.y1 = snapshot.y1 + ((snapshot.y2 - snapshot.y1) / 2) - ((element.x2 - element.x1) * ratio) / 2;
element.y2 = snapshot.y2 - ((snapshot.y2 - snapshot.y1) / 2) + ((element.x2 - element.x1) * ratio) / 2;
}
else if (event.handler === HANDLERS.EDGE_RIGHT) {
element.y1 = snapshot.y1 + ((snapshot.y2 - snapshot.y1) / 2) - ((element.x2 - element.x1) * ratio) / 2;
element.y2 = snapshot.y2 - ((snapshot.y2 - snapshot.y1) / 2) + ((element.x2 - element.x1) * ratio) / 2;
}
}
};

export const elementsConfig = {
[ELEMENTS.SHAPE]: {
displayName: "Shape",
Expand Down Expand Up @@ -138,59 +193,7 @@ export const elementsConfig = {
y2: Math.max(element.y1, element.y2),
});
},
onResize: (element, snapshot, event, getPosition) => {
if (event.shiftKey) {
const ratio = (snapshot.y2 - snapshot.y1) / Math.max(1, snapshot.x2 - snapshot.x1);
if (event.handler === HANDLERS.CORNER_TOP_LEFT) {
if (event.dx * ratio < event.dy) {
element.y1 = snapshot.y1 + ((element.x1 - snapshot.x1) * ratio);
}
else {
element.x1 = snapshot.x1 + ((element.y1 - snapshot.y1) / ratio);
}
}
else if (event.handler === HANDLERS.CORNER_TOP_RIGHT) {
if ((-1) * event.dx * ratio < event.dy) {
element.y1 = snapshot.y1 - ((element.x2 - snapshot.x2) * ratio);
}
else {
element.x2 = snapshot.x2 - ((element.y1 - snapshot.y1) / ratio);
}
}
else if (event.handler === HANDLERS.CORNER_BOTTOM_LEFT) {
if ((-1) * event.dx * ratio > event.dy) {
element.y2 = snapshot.y2 - ((element.x1 - snapshot.x1) * ratio);
}
else {
element.x1 = snapshot.x1 - ((element.y2 - snapshot.y2) / ratio);
}
}
else if (event.handler === HANDLERS.CORNER_BOTTOM_RIGHT) {
if (event.dx * ratio > event.dy) {
element.y2 = snapshot.y2 + ((element.x2 - snapshot.x2) * ratio);
}
else {
element.x2 = snapshot.x2 + ((element.y2 - snapshot.y2) / ratio);
}
}
else if (event.handler === HANDLERS.EDGE_TOP) {
element.x1 = snapshot.x1 + ((snapshot.x2 - snapshot.x1) / 2) - ((element.y2 - element.y1) / (2 * ratio));
element.x2 = snapshot.x2 - ((snapshot.x2 - snapshot.x1) / 2) + ((element.y2 - element.y1) / (2 * ratio));
}
else if (event.handler === HANDLERS.EDGE_BOTTOM) {
element.x1 = snapshot.x1 + ((snapshot.x2 - snapshot.x1) / 2) - ((element.y2 - element.y1) / (2 * ratio));
element.x2 = snapshot.x2 - ((snapshot.x2 - snapshot.x1) / 2) + ((element.y2 - element.y1) / (2 * ratio));
}
else if (event.handler === HANDLERS.EDGE_LEFT) {
element.y1 = snapshot.y1 + ((snapshot.y2 - snapshot.y1) / 2) - ((element.x2 - element.x1) * ratio) / 2;
element.y2 = snapshot.y2 - ((snapshot.y2 - snapshot.y1) / 2) + ((element.x2 - element.x1) * ratio) / 2;
}
else if (event.handler === HANDLERS.EDGE_RIGHT) {
element.y1 = snapshot.y1 + ((snapshot.y2 - snapshot.y1) / 2) - ((element.x2 - element.x1) * ratio) / 2;
element.y2 = snapshot.y2 - ((snapshot.y2 - snapshot.y1) / 2) + ((element.x2 - element.x1) * ratio) / 2;
}
}
},
onResize: preserveAspectRatio,
onUpdate: (element, changedKeys) => {
if (element.text && (changedKeys.has("textFont") || changedKeys.has("textSize"))) {
const [textWidth, textHeight] = measureText(element.text || " ", element.textSize, element.textFont);
Expand Down Expand Up @@ -521,6 +524,7 @@ export const elementsConfig = {
element.drawWidth = Math.abs(element.x2 - element.x1);
element.drawHeight = Math.abs(element.y2 - element.y1);
},
onResize: preserveAspectRatio,
},
[ELEMENTS.IMAGE]: {
displayName: "Image",
Expand All @@ -529,6 +533,7 @@ export const elementsConfig = {
[FIELDS.ASSET_ID]: "",
[FIELDS.OPACITY]: DEFAULTS.OPACITY,
}),
onResize: preserveAspectRatio,
},
[ELEMENTS.NOTE]: {
displayName: "Note",
Expand Down

0 comments on commit 5ea6a0a

Please sign in to comment.