Merge pull request scratchfoundation#5513 from adroitwhiz/drag-new-method

Extract dragged sprites' drawables in screen space

Author: adroitwhiz

src/containers/stage.jsx

@@ -304,25 +304,31 @@ class Stage extends React.Component {
         }
         this.setState({mouseDownTimeoutId: null});
     }
-    drawDragCanvas (drawableData) {
+    /**
+     * Initialize the position of the "dragged sprite" canvas
+     * @param {DrawableExtraction} drawableData The data returned from renderer.extractDrawableScreenSpace
+     * @param {number} x The x position of the initial drag event
+     * @param {number} y The y position of the initial drag event
+     */
+    drawDragCanvas (drawableData, x, y) {
         const {
-            data,
-            width,
-            height,
-            x,
-            y
+            imageData,
+            x: boundsX,
+            y: boundsY,
+            width: boundsWidth,
+            height: boundsHeight
         } = drawableData;
-        this.dragCanvas.width = width;
-        this.dragCanvas.height = height;
-        // Need to convert uint8array from WebGL readPixels into Uint8ClampedArray
-        // for ImageData constructor. Shares underlying buffer, so it is fast.
-        const imageData = new ImageData(
-            new Uint8ClampedArray(data.buffer), width, height);
+        this.dragCanvas.width = imageData.width;
+        this.dragCanvas.height = imageData.height;
+        // On high-DPI devices, the canvas size in layout-pixels is not equal to the size of the extracted data.
+        this.dragCanvas.style.width = `${boundsWidth}px`;
+        this.dragCanvas.style.height = `${boundsHeight}px`;
+
         this.dragCanvas.getContext('2d').putImageData(imageData, 0, 0);
         // Position so that pick location is at (0, 0) so that  positionDragCanvas()
         // can use translation to move to mouse position smoothly.
-        this.dragCanvas.style.left = `${-x}px`;
-        this.dragCanvas.style.top = `${-y}px`;
+        this.dragCanvas.style.left = `${boundsX - x}px`;
+        this.dragCanvas.style.top = `${boundsY - y}px`;
         this.dragCanvas.style.display = 'block';
     }
     clearDragCanvas () {
@@ -349,17 +355,20 @@ class Stage extends React.Component {
         // Dragging always brings the target to the front
         target.goToFront();
 
-        // Extract the drawable art
-        const drawableData = this.renderer.extractDrawable(drawableId, x, y);
+        const [scratchMouseX, scratchMouseY] = this.getScratchCoords(x, y);
+        const offsetX = target.x - scratchMouseX;
+        const offsetY = -(target.y + scratchMouseY);
 
         this.props.vm.startDrag(targetId);
         this.setState({
             isDragging: true,
             dragId: targetId,
-            dragOffset: drawableData.scratchOffset
+            dragOffset: [offsetX, offsetY]
         });
         if (this.props.useEditorDragStyle) {
-            this.drawDragCanvas(drawableData);
+            // Extract the drawable art
+            const drawableData = this.renderer.extractDrawableScreenSpace(drawableId);
+            this.drawDragCanvas(drawableData, x, y);
             this.positionDragCanvas(x, y);
             this.props.vm.postSpriteInfo({visible: false});
             this.props.vm.renderer.draw();