diff --git a/src/index.tsx b/src/index.tsx index f41b3104b..825c02c6f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -121,6 +121,7 @@ let lastMouseUp: ((e: any) => void) | null = null; class App extends React.Component<{}, AppState> { public componentDidMount() { document.addEventListener("keydown", this.onKeyDown, false); + document.addEventListener("mousemove", this.getCurrentCursorPosition); window.addEventListener("resize", this.onResize, false); const savedState = restoreFromLocalStorage(elements); @@ -131,6 +132,11 @@ class App extends React.Component<{}, AppState> { public componentWillUnmount() { document.removeEventListener("keydown", this.onKeyDown, false); + document.removeEventListener( + "mousemove", + this.getCurrentCursorPosition, + false + ); window.removeEventListener("resize", this.onResize, false); } @@ -145,6 +151,8 @@ class App extends React.Component<{}, AppState> { viewBackgroundColor: "#ffffff", scrollX: 0, scrollY: 0, + cursorX: 0, + cursorY: 0, name: DEFAULT_PROJECT_NAME }; @@ -152,6 +160,10 @@ class App extends React.Component<{}, AppState> { this.forceUpdate(); }; + private getCurrentCursorPosition = (e: MouseEvent) => { + this.setState({ cursorX: e.x, cursorY: e.y }); + }; + private onKeyDown = (event: KeyboardEvent) => { if (isInputLike(event.target)) return; @@ -333,11 +345,11 @@ class App extends React.Component<{}, AppState> { } }; - private pasteFromClipboard = (x?: number, y?: number) => { + private pasteFromClipboard = () => { if (navigator.clipboard) { navigator.clipboard .readText() - .then(text => this.addElementsFromPaste(text, x, y)); + .then(text => this.addElementsFromPaste(text)); } }; @@ -555,7 +567,7 @@ class App extends React.Component<{}, AppState> { options: [ navigator.clipboard && { label: "Paste", - action: () => this.pasteFromClipboard(x, y) + action: () => this.pasteFromClipboard() } ], top: e.clientY, @@ -578,7 +590,7 @@ class App extends React.Component<{}, AppState> { }, navigator.clipboard && { label: "Paste", - action: () => this.pasteFromClipboard(x, y) + action: () => this.pasteFromClipboard() }, { label: "Copy Styles", action: this.copyStyles }, { label: "Paste Styles", action: this.pasteStyles }, @@ -998,7 +1010,7 @@ class App extends React.Component<{}, AppState> { })); }; - private addElementsFromPaste = (paste: string, x?: number, y?: number) => { + private addElementsFromPaste = (paste: string) => { let parsedElements; try { parsedElements = JSON.parse(paste); @@ -1009,12 +1021,11 @@ class App extends React.Component<{}, AppState> { parsedElements[0].type // need to implement a better check here... ) { clearSelection(elements); - if (x == null) x = window.innerWidth / 2 - this.state.scrollX - 10; - if (y == null) y = window.innerHeight / 2 - this.state.scrollY - 10; + const minX = Math.min(...parsedElements.map(element => element.x)); const minY = Math.min(...parsedElements.map(element => element.y)); - const dx = x - minX; - const dy = y - minY; + const dx = this.state.cursorX - this.state.scrollX - minX; + const dy = this.state.cursorY - this.state.scrollY - minY; parsedElements.forEach(parsedElement => { parsedElement.x += dx; diff --git a/src/types.ts b/src/types.ts index ea9af6702..02a0c0e29 100644 --- a/src/types.ts +++ b/src/types.ts @@ -11,5 +11,7 @@ export type AppState = { viewBackgroundColor: string; scrollX: number; scrollY: number; + cursorX: number; + cursorY: number; name: string; };