smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Resize multiple elements (rectangles, diamonds and ellipses onl… (#1193)

Browse source 
* experiment resizing multiple elements

* hack common component

* calculate scale properly (still se only)fg

* prioritize multi selection

* take handle offset into calculation

* fix master merge

* refactor resizeElements out from App

* wip: handlerRectanglesFromCoords

* fix test with type assertion

* properly show handles wip

* revert previous one and do a tweak

* remove unnecessary assignments

* replace hack code with good one

* refactor coords in arg

* resize NW

* resize from sw,ne

* fix with setResizeHandle

* do not show hint while resizing multiple elements

* empty commit

* fix format
This commit is contained in:
Daishi Kato 2020-04-07 17:49:59 +09:00 • committed by GitHub
parent b60f5fcf06
commit 2cc1105ff5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 808 additions and 510 deletions
Download patch file Download diff file Expand all files Collapse all files

59
src/renderer/renderScene.ts
View file

@ -3,7 +3,14 @@ import { RoughSVG } from "roughjs/bin/svg";
import { FlooredNumber, AppState } from "../types";
import { ExcalidrawElement } from "../element/types";
import { getElementAbsoluteCoords, handlerRectangles } from "../element";
import {
getElementAbsoluteCoords,
OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
handlerRectanglesFromCoords,
handlerRectangles,
getCommonBounds,
canResizeMutlipleElements,
} from "../element";
import { roundRect } from "./roundRect";
import { SceneState } from "../scene/types";
@ -263,6 +270,56 @@ export function renderScene(
}
});
context.translate(-sceneState.scrollX, -sceneState.scrollY);
} else if (locallySelectedElements.length > 1) {
if (canResizeMutlipleElements(locallySelectedElements)) {
const dashedLinePadding = 4 / sceneState.zoom;
context.translate(sceneState.scrollX, sceneState.scrollY);
context.fillStyle = "#fff";
const [x1, y1, x2, y2] = getCommonBounds(locallySelectedElements);
const initialLineDash = context.getLineDash();
context.setLineDash([2 / sceneState.zoom]);
const lineWidth = context.lineWidth;
context.lineWidth = 1 / sceneState.zoom;
strokeRectWithRotation(
context,
x1 - dashedLinePadding,
y1 - dashedLinePadding,
x2 - x1 + dashedLinePadding * 2,
y2 - y1 + dashedLinePadding * 2,
(x1 + x2) / 2,
(y1 + y2) / 2,
0,
);
context.lineWidth = lineWidth;
context.setLineDash(initialLineDash);
const handlers = handlerRectanglesFromCoords(
[x1, y1, x2, y2],
0,
sceneState.zoom,
undefined,
OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
);
Object.keys(handlers).forEach((key) => {
const handler = handlers[key as HandlerRectanglesRet];
if (handler !== undefined) {
const lineWidth = context.lineWidth;
context.lineWidth = 1 / sceneState.zoom;
strokeRectWithRotation(
context,
handler[0],
handler[1],
handler[2],
handler[3],
handler[0] + handler[2] / 2,
handler[1] + handler[3] / 2,
0,
true, // fill before stroke
);
context.lineWidth = lineWidth;
}
});
context.translate(-sceneState.scrollX, -sceneState.scrollY);
}
}
}