feat: resize multiple elements including two-point lines (#1607)

This commit is contained in:
Daishi Kato 2020-05-18 17:36:30 +09:00 committed by GitHub
parent 6b628bb1a6
commit 4d2e8f9ad1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 12 deletions

View File

@ -114,6 +114,7 @@ const getLinearElementAbsoluteCoords = (
element: ExcalidrawLinearElement, element: ExcalidrawLinearElement,
): [number, number, number, number] => { ): [number, number, number, number] => {
if (element.points.length < 2 || !getShapeForElement(element)) { if (element.points.length < 2 || !getShapeForElement(element)) {
// XXX this is just a poor estimate and not very useful
const { minX, minY, maxX, maxY } = element.points.reduce( const { minX, minY, maxX, maxY } = element.points.reduce(
(limits, [x, y]) => { (limits, [x, y]) => {
limits.minY = Math.min(limits.minY, y); limits.minY = Math.min(limits.minY, y);
@ -219,6 +220,7 @@ const getLinearElementRotatedBounds = (
cy: number, cy: number,
): [number, number, number, number] => { ): [number, number, number, number] => {
if (element.points.length < 2 || !getShapeForElement(element)) { if (element.points.length < 2 || !getShapeForElement(element)) {
// XXX this is just a poor estimate and not very useful
const { minX, minY, maxX, maxY } = element.points.reduce( const { minX, minY, maxX, maxY } = element.points.reduce(
(limits, [x, y]) => { (limits, [x, y]) => {
[x, y] = rotate(element.x + x, element.y + y, cx, cy, element.angle); [x, y] = rotate(element.x + x, element.y + y, cx, cy, element.angle);
@ -311,7 +313,7 @@ export const getResizedElementAbsoluteCoords = (
nextWidth: number, nextWidth: number,
nextHeight: number, nextHeight: number,
): [number, number, number, number] => { ): [number, number, number, number] => {
if (!isLinearElement(element) || element.points.length <= 2) { if (!isLinearElement(element)) {
return [ return [
element.x, element.x,
element.y, element.y,

View File

@ -407,7 +407,7 @@ export const canResizeMutlipleElements = (
return elements.every( return elements.every(
(element) => (element) =>
["rectangle", "diamond", "ellipse"].includes(element.type) || ["rectangle", "diamond", "ellipse"].includes(element.type) ||
(isLinearElement(element) && element.points.length > 2), isLinearElement(element),
); );
}; };

View File

@ -18,21 +18,28 @@ export function rescalePoints(
const prevMinDimension = Math.min(...prevDimValues); const prevMinDimension = Math.min(...prevDimValues);
const prevDimensionSize = prevMaxDimension - prevMinDimension; const prevDimensionSize = prevMaxDimension - prevMinDimension;
const dimensionScaleFactor = nextDimensionSize / prevDimensionSize; const dimensionScaleFactor =
prevDimensionSize === 0 ? 1 : nextDimensionSize / prevDimensionSize;
let nextMinDimension = Infinity; let nextMinDimension = Infinity;
const scaledPoints = prevPoints.map((prevPoint) => const scaledPoints = prevPoints.map(
prevPoint.map((value, currentDimension) => { (prevPoint) =>
if (currentDimension !== dimension) { prevPoint.map((value, currentDimension) => {
return value; if (currentDimension !== dimension) {
} return value;
const scaledValue = value * dimensionScaleFactor; }
nextMinDimension = Math.min(scaledValue, nextMinDimension); const scaledValue = value * dimensionScaleFactor;
return scaledValue; nextMinDimension = Math.min(scaledValue, nextMinDimension);
}), return scaledValue;
}) as [number, number],
); );
if (scaledPoints.length === 2) {
// we don't tranlate two-point lines
return scaledPoints;
}
const translation = prevMinDimension - nextMinDimension; const translation = prevMinDimension - nextMinDimension;
const nextPoints = scaledPoints.map( const nextPoints = scaledPoints.map(