sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Draw horizontal/vertical lines/arrows when shift pressed (#430)

Browse Source 
* Draw horizontal/vertical lines/arrows when shift pressed

* Refactor resizing with delta

* Resize arrows/lines perfectly when shift pressed
This commit is contained in:
Günay Mert Karadoğan 2020-01-23 09:21:04 +00:00 committed by David Luzar
parent dfb7c2b744
commit 926b4f24e6
4 changed files with 129 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/element/index.ts
View File

@ -12,4 +12,8 @@ export { resizeTest, getCursorForResizingElement } from "./resizeTest";
export { isTextElement } from "./typeChecks";
export { textWysiwyg } from "./textWysiwyg";
export { redrawTextBoundingBox } from "./textElement";
export { isInvisiblySmallElement } from "./sizeChecks";
export {
getPerfectElementSize,
isInvisiblySmallElement,
resizePerfectLineForNWHandler
} from "./sizeHelpers";

5
src/element/sizeChecks.ts
View File

@ -1,5 +0,0 @@
import { ExcalidrawElement } from "./types";
export function isInvisiblySmallElement(element: ExcalidrawElement): boolean {
return element.width === 0 && element.height === 0;
}

59
src/element/sizeHelpers.ts Normal file
View File

@ -0,0 +1,59 @@
import { ExcalidrawElement } from "./types";
export function isInvisiblySmallElement(element: ExcalidrawElement): boolean {
return element.width === 0 && element.height === 0;
}
/**
* Makes a perfect shape or diagonal/horizontal/vertical line
*/
export function getPerfectElementSize(
elementType: string,
width: number,
height: number
): { width: number; height: number } {
const absWidth = Math.abs(width);
const absHeight = Math.abs(height);
if (elementType === "line" || elementType === "arrow") {
if (absHeight < absWidth / 2) {
height = 0;
} else if (absWidth < absHeight / 2) {
width = 0;
} else {
height = absWidth * Math.sign(height);
}
} else if (elementType !== "selection") {
height = absWidth * Math.sign(height);
}
return { width, height };
}
export function resizePerfectLineForNWHandler(
element: ExcalidrawElement,
x: number,
y: number
) {
const anchorX = element.x + element.width;
const anchorY = element.y + element.height;
const distanceToAnchorX = x - anchorX;
const distanceToAnchorY = y - anchorY;
if (Math.abs(distanceToAnchorX) < Math.abs(distanceToAnchorY) / 2) {
element.x = anchorX;
element.width = 0;
element.y = y;
element.height = -distanceToAnchorY;
} else if (Math.abs(distanceToAnchorY) < Math.abs(element.width) / 2) {
element.y = anchorY;
element.height = 0;
} else {
element.x = x;
element.width = -distanceToAnchorX;
element.height =
Math.sign(distanceToAnchorY) *
Math.sign(distanceToAnchorX) *
element.width;
element.y = anchorY - element.height;
}
}

101
src/index.tsx
View File

@ -13,7 +13,9 @@ import {
isTextElement,
textWysiwyg,
getElementAbsoluteCoords,
getCursorForResizingElement
getCursorForResizingElement,
getPerfectElementSize,
resizePerfectLineForNWHandler
} from "./element";
import {
clearSelection,
@ -940,67 +942,83 @@ export class App extends React.Component<any, AppState> {
const selectedElements = elements.filter(el => el.isSelected);
if (selectedElements.length === 1) {
const { x, y } = viewportCoordsToSceneCoords(e, this.state);
let deltaX = 0;
let deltaY = 0;
const deltaX = x - lastX;
const deltaY = y - lastY;
const element = selectedElements[0];
switch (resizeHandle) {
case "nw":
deltaX = lastX - x;
element.width += deltaX;
element.x -= deltaX;
element.width -= deltaX;
element.x += deltaX;
if (e.shiftKey) {
element.y += element.height - element.width;
element.height = element.width;
if (
element.type === "arrow" ||
element.type === "line"
) {
resizePerfectLineForNWHandler(element, x, y);
} else {
element.y += element.height - element.width;
element.height = element.width;
}
} else {
const deltaY = lastY - y;
element.height += deltaY;
element.y -= deltaY;
element.height -= deltaY;
element.y += deltaY;
}
break;
case "ne":
element.width += x - lastX;
element.width += deltaX;
if (e.shiftKey) {
element.y += element.height - element.width;
element.height = element.width;
} else {
deltaY = lastY - y;
element.height += deltaY;
element.y -= deltaY;
element.height -= deltaY;
element.y += deltaY;
}
break;
case "sw":
deltaX = lastX - x;
element.width += deltaX;
element.x -= deltaX;
element.width -= deltaX;
element.x += deltaX;
if (e.shiftKey) {
element.height = element.width;
} else {
element.height += y - lastY;
element.height += deltaY;
}
break;
case "se":
element.width += x - lastX;
if (e.shiftKey) {
element.height = element.width;
if (
element.type === "arrow" ||
element.type === "line"
) {
const { width, height } = getPerfectElementSize(
element.type,
x - element.x,
y - element.y
);
element.width = width;
element.height = height;
} else {
element.width += deltaX;
element.height = element.width;
}
} else {
element.height += y - lastY;
element.width += deltaX;
element.height += deltaY;
}
break;
case "n":
deltaY = lastY - y;
element.height += deltaY;
element.y -= deltaY;
element.height -= deltaY;
element.y += deltaY;
break;
case "w":
deltaX = lastX - x;
element.width += deltaX;
element.x -= deltaX;
element.width -= deltaX;
element.x += deltaX;
break;
case "s":
element.height += y - lastY;
element.height += deltaY;
break;
case "e":
element.width += x - lastX;
element.width += deltaX;
break;
}
@ -1056,12 +1074,23 @@ export class App extends React.Component<any, AppState> {
CANVAS_WINDOW_OFFSET_TOP -
draggingElement.y -
this.state.scrollY;
draggingElement.width = width;
// Make a perfect square or circle when shift is enabled
draggingElement.height =
e.shiftKey && this.state.elementType !== "selection"
? Math.abs(width) * Math.sign(height)
: height;
if (e.shiftKey) {
let {
width: newWidth,
height: newHeight
} = getPerfectElementSize(
this.state.elementType,
width,
height
);
draggingElement.width = newWidth;
draggingElement.height = newHeight;
} else {
draggingElement.width = width;
draggingElement.height = height;
}
draggingElement.shape = null;
if (this.state.elementType === "selection") {