From 6713c7ad0f2cef9df506969469342e65a9df57ac Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 23 Jan 2019 13:58:42 -0500
Subject: [PATCH] Fix issue where dragPayload was being invalidated for sprites
Use PureComponent instead since it is a simple shouldComponentUpdate check now.
---
.../sprite-selector/sprite-list.jsx | 2 +-
src/containers/sprite-selector-item.jsx | 17 +-------
src/lib/backpack/sprite-payload.js | 40 +++++++++++--------
3 files changed, 26 insertions(+), 33 deletions(-)
diff --git a/src/components/sprite-selector/sprite-list.jsx b/src/components/sprite-selector/sprite-list.jsx
index de727969e..3f8910fe5 100644
--- a/src/components/sprite-selector/sprite-list.jsx
+++ b/src/components/sprite-selector/sprite-list.jsx
@@ -80,7 +80,7 @@ const SpriteList = function (props) {
[styles.raised]: isRaised,
[styles.receivedBlocks]: receivedBlocks
})}
- dragPayload={sprite}
+ dragPayload={sprite.id}
dragType={DragConstants.SPRITE}
id={sprite.id}
index={index}
diff --git a/src/containers/sprite-selector-item.jsx b/src/containers/sprite-selector-item.jsx
index f284be34e..56d9d3e07 100644
--- a/src/containers/sprite-selector-item.jsx
+++ b/src/containers/sprite-selector-item.jsx
@@ -14,7 +14,7 @@ import SpriteSelectorItemComponent from '../components/sprite-selector-item/spri
const dragThreshold = 3; // Same as the block drag threshold
-class SpriteSelectorItem extends React.Component {
+class SpriteSelectorItem extends React.PureComponent {
constructor (props) {
super(props);
bindAll(this, [
@@ -33,16 +33,6 @@ class SpriteSelectorItem extends React.Component {
// Asset ID of the current decoded costume
this.decodedAssetId = null;
}
- shouldComponentUpdate (nextProps) {
- // Ignore dragPayload due to https://github.com/LLK/scratch-gui/issues/3172.
- // This function should be removed once the issue is fixed.
- for (const property in nextProps) {
- if (property !== 'dragPayload' && this.props[property] !== nextProps[property]) {
- return true;
- }
- }
- return false;
- }
getCostumeData () {
if (this.props.costumeURL) return this.props.costumeURL;
if (!this.props.asset) return null;
@@ -153,10 +143,7 @@ SpriteSelectorItem.propTypes = {
asset: PropTypes.instanceOf(storage.Asset),
costumeURL: PropTypes.string,
dispatchSetHoveredSprite: PropTypes.func.isRequired,
- dragPayload: PropTypes.shape({
- name: PropTypes.string,
- body: PropTypes.string
- }),
+ dragPayload: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
dragType: PropTypes.string,
dragging: PropTypes.bool,
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
diff --git a/src/lib/backpack/sprite-payload.js b/src/lib/backpack/sprite-payload.js
index 12fc68c40..6343dc407 100644
--- a/src/lib/backpack/sprite-payload.js
+++ b/src/lib/backpack/sprite-payload.js
@@ -1,23 +1,29 @@
import jpegThumbnail from './jpeg-thumbnail';
-const spritePayload = (sprite, vm) => vm.exportSprite(
- sprite.id,
- 'base64'
-).then(zippedSprite => {
- const payload = {
- type: 'sprite',
- name: sprite.name,
- mime: 'application/zip',
- body: zippedSprite,
- // Filled in below
- thumbnail: ''
- };
+const spritePayload = (id, vm) => {
+ const target = vm.runtime.getTargetById(id);
+ if (!target) return null;
- const costumeDataUrl = sprite.costume.asset.encodeDataURI();
- return jpegThumbnail(costumeDataUrl).then(thumbnail => {
- payload.thumbnail = thumbnail.replace('data:image/jpeg;base64,', '');
- return payload;
+ return vm.exportSprite(
+ id,
+ 'base64'
+ ).then(zippedSprite => {
+ const payload = {
+ type: 'sprite',
+ name: target.sprite.name,
+ mime: 'application/zip',
+ body: zippedSprite,
+ // Filled in below
+ thumbnail: ''
+ };
+
+ const costumeDataUrl = target.sprite.costumes[target.currentCostume].asset.encodeDataURI();
+
+ return jpegThumbnail(costumeDataUrl).then(thumbnail => {
+ payload.thumbnail = thumbnail.replace('data:image/jpeg;base64,', '');
+ return payload;
+ });
});
-});
+};
export default spritePayload;
--
GitLab