github.com/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2024-11-10 11:35:52 +01:00
Code Releases Wiki Activity

fix: library onClick paste off-center (#3462)

Browse Source
This commit is contained in:
David Luzar 2021-04-18 13:33:05 +02:00 committed by GitHub
parent c0047269c1
commit 7d29351d66
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 34 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/App.tsx
View File

@ -433,12 +433,7 @@ class App extends React.Component<AppProps, AppState> {
}
public render() {
const {
zenModeEnabled,
width: canvasDOMWidth,
height: canvasDOMHeight,
viewModeEnabled,
} = this.state;
const { zenModeEnabled, viewModeEnabled } = this.state;
const {
onCollabButtonClick,
@ -447,9 +442,6 @@ class App extends React.Component<AppProps, AppState> {
renderCustomStats,
} = this.props;
const DEFAULT_PASTE_X = canvasDOMWidth / 2;
const DEFAULT_PASTE_Y = canvasDOMHeight / 2;
return (
<div
className={clsx("excalidraw excalidraw-container", {
@ -476,11 +468,10 @@ class App extends React.Component<AppProps, AppState> {
onCollabButtonClick={onCollabButtonClick}
onLockToggle={this.toggleLock}
onInsertElements={(elements) =>
this.addElementsFromPasteOrLibrary(
this.addElementsFromPasteOrLibrary({
elements,
DEFAULT_PASTE_X,
DEFAULT_PASTE_Y,
)
position: "center",
})
}
zenModeEnabled={zenModeEnabled}
toggleZenMode={this.toggleZenMode}
@ -1251,7 +1242,10 @@ class App extends React.Component<AppProps, AppState> {
},
});
} else if (data.elements) {
this.addElementsFromPasteOrLibrary(data.elements);
this.addElementsFromPasteOrLibrary({
elements: data.elements,
position: "cursor",
});
} else if (data.text) {
this.addTextFromPaste(data.text);
}
@ -1260,16 +1254,28 @@ class App extends React.Component<AppProps, AppState> {
},
);
private addElementsFromPasteOrLibrary = (
clipboardElements: readonly ExcalidrawElement[],
clientX = cursorX,
clientY = cursorY,
) => {
const [minX, minY, maxX, maxY] = getCommonBounds(clipboardElements);
private addElementsFromPasteOrLibrary = (opts: {
elements: readonly ExcalidrawElement[];
position: { clientX: number; clientY: number } | "cursor" | "center";
}) => {
const [minX, minY, maxX, maxY] = getCommonBounds(opts.elements);
const elementsCenterX = distance(minX, maxX) / 2;
const elementsCenterY = distance(minY, maxY) / 2;
const clientX =
typeof opts.position === "object"
? opts.position.clientX
: opts.position === "cursor"
? cursorX
: this.state.width / 2 + this.state.offsetLeft;
const clientY =
typeof opts.position === "object"
? opts.position.clientY
: opts.position === "cursor"
? cursorY
: this.state.height / 2 + this.state.offsetTop;
const { x, y } = viewportCoordsToSceneCoords(
{ clientX, clientY },
this.state,
@ -1282,7 +1288,7 @@ class App extends React.Component<AppProps, AppState> {
const [gridX, gridY] = getGridPoint(dx, dy, this.state.gridSize);
const oldIdToDuplicatedId = new Map();
const newElements = clipboardElements.map((element) => {
const newElements = opts.elements.map((element) => {
const newElement = duplicateElement(
this.state.editingGroupId,
groupIdMap,
@ -1301,7 +1307,7 @@ class App extends React.Component<AppProps, AppState> {
];
fixBindingsAfterDuplication(
nextElements,
clipboardElements,
opts.elements,
oldIdToDuplicatedId,
);
@ -1455,8 +1461,8 @@ class App extends React.Component<AppProps, AppState> {
private updateCurrentCursorPosition = withBatchedUpdates(
(event: MouseEvent) => {
cursorX = event.x;
cursorY = event.y;
cursorX = event.clientX;
cursorY = event.clientY;
},
);
@ -3700,11 +3706,10 @@ class App extends React.Component<AppProps, AppState> {
const libraryShapes = event.dataTransfer.getData(MIME_TYPES.excalidrawlib);
if (libraryShapes !== "") {
this.addElementsFromPasteOrLibrary(
JSON.parse(libraryShapes),
event.clientX,
event.clientY,
);
this.addElementsFromPasteOrLibrary({
elements: JSON.parse(libraryShapes),
position: event,
});
return;
}