paste on cursor position

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;

src/types.ts

@@ -11,5 +11,7 @@ export type AppState = {
   viewBackgroundColor: string;
   scrollX: number;
   scrollY: number;
+  cursorX: number;
+  cursorY: number;
   name: string;
 };