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

Snap to element center

Browse source
This commit is contained in:
hazam 2020-01-09 00:25:47 +05:00
parent 068dca604f
commit 72a4ae3633
2 changed files with 41 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/index.tsx
View file

@ -8,7 +8,8 @@ import {
duplicateElement, duplicateElement,
resizeTest, resizeTest,
isTextElement, isTextElement,
textWysiwyg textWysiwyg,
getElementAbsoluteCoords
} from "./element"; } from "./element";
import { import {
clearSelection, clearSelection,
@ -110,6 +111,7 @@ function addTextElement(
const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5; const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
const ELEMENT_TRANSLATE_AMOUNT = 1; const ELEMENT_TRANSLATE_AMOUNT = 1;
const TEXT_TO_CENTER_SNAP_THRASHOLD = 60;
let lastCanvasWidth = -1; let lastCanvasWidth = -1;
let lastCanvasHeight = -1; let lastCanvasHeight = -1;
@ -932,12 +934,6 @@ class App extends React.Component<{}, AppState> {
e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX; e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
const y = e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY; const y = e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
const elementAtPosition = getElementAtPosition(elements, x, y); const elementAtPosition = getElementAtPosition(elements, x, y);
if (elementAtPosition && !isTextElement(elementAtPosition)) {
return;
} else if (elementAtPosition) {
elements.splice(elements.indexOf(elementAtPosition), 1);
this.forceUpdate();
}
const element = newElement( const element = newElement(
"text", "text",
@ -954,7 +950,11 @@ class App extends React.Component<{}, AppState> {
let initText = ""; let initText = "";
let textX = e.clientX; let textX = e.clientX;
let textY = e.clientY; let textY = e.clientY;
if (elementAtPosition) {
if (elementAtPosition && isTextElement(elementAtPosition)) {
elements.splice(elements.indexOf(elementAtPosition), 1);
this.forceUpdate();
Object.assign(element, elementAtPosition); Object.assign(element, elementAtPosition);
// x and y will change after calling addTextElement function // x and y will change after calling addTextElement function
element.x = elementAtPosition.x + elementAtPosition.width / 2; element.x = elementAtPosition.x + elementAtPosition.width / 2;
@ -970,6 +970,39 @@ class App extends React.Component<{}, AppState> {
elementAtPosition.y + elementAtPosition.y +
CANVAS_WINDOW_OFFSET_TOP + CANVAS_WINDOW_OFFSET_TOP +
elementAtPosition.height / 2; elementAtPosition.height / 2;
} else {
const elementClickedInside = elements
.slice()
.reverse()
.find(element => {
const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
return x1 < x && x < x2 && y1 < y && y < y2;
});
if (elementClickedInside) {
const elementCenterX =
elementClickedInside.x + elementClickedInside.width / 2;
const elementCenterY =
elementClickedInside.y + elementClickedInside.height / 2;
const distanceToCenter = Math.hypot(
x - elementCenterX,
y - elementCenterY
);
if (distanceToCenter < TEXT_TO_CENTER_SNAP_THRASHOLD) {
element.x = elementCenterX;
element.y = elementCenterY;
textX =
this.state.scrollX +
elementClickedInside.x +
CANVAS_WINDOW_OFFSET_LEFT +
elementClickedInside.width / 2;
textY =
this.state.scrollY +
elementClickedInside.y +
CANVAS_WINDOW_OFFSET_TOP +
elementClickedInside.height / 2;
}
}
} }
textWysiwyg({ textWysiwyg({

1
src/renderer/renderElement.ts
View file

@ -138,7 +138,6 @@ export function renderElement(
context.fillStyle = fillStyle; context.fillStyle = fillStyle;
context.font = font; context.font = font;
context.globalAlpha = 1; context.globalAlpha = 1;
console.log(element);
} else { } else {
throw new Error("Unimplemented type " + element.type); throw new Error("Unimplemented type " + element.type);
} }