From 84901ebb98222373a8b8e3e0ec8e9a4fd3b7ddc6 Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Thu, 4 May 2017 13:10:32 -0400
Subject: [PATCH] Use storage to retrieve costume data urls
---
src/components/asset-panel/selector.jsx | 2 +-
.../sprite-selector/sprite-selector.jsx | 16 +++++++---------
src/containers/sprite-selector-item.jsx | 11 ++++++++++-
src/containers/stage-selector.jsx | 13 ++++++++++++-
4 files changed, 30 insertions(+), 12 deletions(-)
diff --git a/src/components/asset-panel/selector.jsx b/src/components/asset-panel/selector.jsx
index d0d076bab..b2c278bbe 100644
--- a/src/components/asset-panel/selector.jsx
+++ b/src/components/asset-panel/selector.jsx
@@ -27,8 +27,8 @@ const Selector = props => {
<Box className={styles.listArea}>
{items.map((item, index) => (
<SpriteSelectorItem
+ assetId={item.assetId}
className={styles.listItem}
- costumeURL={item.url}
id={index}
key={`asset-${index}`}
name={item.name}
diff --git a/src/components/sprite-selector/sprite-selector.jsx b/src/components/sprite-selector/sprite-selector.jsx
index df4834374..3410c7580 100644
--- a/src/components/sprite-selector/sprite-selector.jsx
+++ b/src/components/sprite-selector/sprite-selector.jsx
@@ -53,17 +53,15 @@ const SpriteSelectorComponent = function (props) {
{Object.keys(sprites)
// Re-order by list order
.sort((id1, id2) => sprites[id1].order - sprites[id2].order)
- .map(id => (
+ .map(id => sprites[id])
+ .map(sprite => (
<SpriteSelectorItem
+ assetId={sprite.costume && sprite.costume.assetId}
className={styles.sprite}
- costumeURL={
- sprites[id].costume &&
- sprites[id].costume.url
- }
- id={id}
- key={id}
- name={sprites[id].name}
- selected={id === selectedId}
+ id={sprite.id}
+ key={sprite.id}
+ name={sprite.name}
+ selected={sprite.id === selectedId}
onClick={onSelectSprite}
onDeleteButtonClick={onDeleteSprite}
/>
diff --git a/src/containers/sprite-selector-item.jsx b/src/containers/sprite-selector-item.jsx
index a9182996e..dacac38e1 100644
--- a/src/containers/sprite-selector-item.jsx
+++ b/src/containers/sprite-selector-item.jsx
@@ -2,6 +2,8 @@ const bindAll = require('lodash.bindall');
const PropTypes = require('prop-types');
const React = require('react');
+const {connect} = require('react-redux');
+
const SpriteSelectorItemComponent = require('../components/sprite-selector-item/sprite-selector-item.jsx');
class SpriteSelectorItem extends React.Component {
@@ -40,6 +42,7 @@ class SpriteSelectorItem extends React.Component {
}
SpriteSelectorItem.propTypes = {
+ assetId: PropTypes.string,
costumeURL: PropTypes.string,
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
name: PropTypes.string,
@@ -48,4 +51,10 @@ SpriteSelectorItem.propTypes = {
selected: PropTypes.bool
};
-module.exports = SpriteSelectorItem;
+const mapStateToProps = (state, {assetId}) => ({
+ costumeURL: assetId && state.vm.runtime.storage.get(assetId).encodeDataURI()
+});
+
+module.exports = connect(
+ mapStateToProps
+)(SpriteSelectorItem);
diff --git a/src/containers/stage-selector.jsx b/src/containers/stage-selector.jsx
index d37a4437c..9b4b83d0d 100644
--- a/src/containers/stage-selector.jsx
+++ b/src/containers/stage-selector.jsx
@@ -2,6 +2,8 @@ const bindAll = require('lodash.bindall');
const PropTypes = require('prop-types');
const React = require('react');
+const {connect} = require('react-redux');
+
const StageSelectorComponent = require('../components/stage-selector/stage-selector.jsx');
class StageSelector extends React.Component {
@@ -18,6 +20,7 @@ class StageSelector extends React.Component {
render () {
const {
/* eslint-disable no-unused-vars */
+ assetId,
id,
onSelect,
/* eslint-enable no-unused-vars */
@@ -36,4 +39,12 @@ StageSelector.propTypes = {
id: PropTypes.string,
onSelect: PropTypes.func
};
-module.exports = StageSelector;
+
+const mapStateToProps = (state, {assetId}) => ({
+ url: assetId && state.vm.runtime.storage.get(assetId).encodeDataURI()
+});
+
+module.exports = connect(
+ mapStateToProps,
+ () => ({}) // omit dispatch prop
+)(StageSelector);
--
GitLab