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