Paste image selection now appear in the center instead of top left of the Document

README.md

@@ -80,7 +80,6 @@ npm run lint
 * Drawing masks on a rotated layer that is panned (or mirrored) is broken
 * Dragging of masks on rotated/mirror content is kinda broken
 * Restoring of document with rotated layers (smaller than document size) restores at incorrect offset
-* Pasted selections should appear in center
 * When resizing document, positioned layers do not scale their position correctly
 * Render service should use the tool-options-text debounce on first font load to ensure font is present on document load
 * Render service should measure total text bounding box upfront and scale resulting bitmap (can be done after render)

src/components/document-canvas/document-canvas.vue

@@ -190,7 +190,7 @@ export default {
                 zCanvas.addChild( this.drag );
                 const classList = zCanvas.getElement().classList;
                 classList.remove( ...classList );
-                classList.add( "cursor-move" );
+                classList.add( "cursor-drag" );
             } else {
                 this.drag.dispose();
                 this.handleCursor(); // restore cursor to value appropriate to current tool
@@ -297,6 +297,7 @@ export default {
             switch ( this.activeTool ) {
                 default:
                     break;
+                case ToolTypes.MOVE:
                 case ToolTypes.DRAG:
                     canvasClasses.add( "cursor-drag" );
                     break;

src/store/index.js

@@ -170,10 +170,15 @@ export default {
         clearSelection({ getters }) {
             runSpriteFn( sprite => sprite.resetSelection(), getters.activeDocument );
         },
-        pasteSelection({ commit, dispatch, state }) {
-            commit( "addLayer",
-                { type: LAYER_IMAGE, source: state.selectionContent.image, ...state.selectionContent.size }
-            );
+        pasteSelection({ commit, getters, dispatch, state }) {
+            const { image, size } = state.selectionContent;
+            commit( "addLayer", {
+                type: LAYER_IMAGE,
+                source: image,
+                ...size,
+                x: getters.activeDocument.width  / 2 - size.width  / 2,
+                y: getters.activeDocument.height / 2 - size.height / 2,
+            });
             dispatch( "clearSelection" );
         },
         /**

tests/unit/store/store.spec.js

@@ -1,4 +1,5 @@
 import store, { PROJECT_FILE_EXTENSION } from "@/store";
+import { LAYER_IMAGE } from "@/definitions/layer-types";
 
 const { mutations, actions } = store;
 
@@ -231,5 +232,24 @@ describe( "Vuex store", () => {
             expect( mockUpdateFn ).toHaveBeenNthCalledWith( 2, "saveBlobAsFile", expect.any( Object ), `foo${PROJECT_FILE_EXTENSION}` );
             expect( commit ).toHaveBeenCalledWith( "showNotification", expect.any( Object ));
         });
+
+        it( "should be able to paste the current in-memory image selection at the center of the Document", async () => {
+            const state = {
+                selectionContent: { image: { src: "foo" }, size: { width: 40, height: 30 } },
+            };
+            const mockedGetters = { activeDocument: { width: 200, height: 150 } };
+            const commit   = jest.fn();
+            const dispatch = jest.fn();
+            await actions.pasteSelection({ state, getters: mockedGetters, commit, dispatch });
+            expect( commit ).toHaveBeenCalledWith( "addLayer", {
+                type: LAYER_IMAGE,
+                source: state.selectionContent.image,
+                width: state.selectionContent.size.width,
+                height: state.selectionContent.size.height,
+                x: 80,
+                y: 60
+            });
+            expect( dispatch ).toHaveBeenCalledWith( "clearSelection" );
+        });
     });
 });