From 6a87934f7094a951349defadad18ca0c966bd452 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 24 May 2017 09:27:40 -0400
Subject: [PATCH] Use hover to cycle costumes
---
src/components/library-item/library-item.jsx | 3 ++
src/containers/sprite-library.jsx | 41 +++++++++++++++++++-
2 files changed, 42 insertions(+), 2 deletions(-)
diff --git a/src/components/library-item/library-item.jsx b/src/components/library-item/library-item.jsx
index 8e113c9be..52c8ca1a5 100644
--- a/src/components/library-item/library-item.jsx
+++ b/src/components/library-item/library-item.jsx
@@ -14,6 +14,9 @@ class LibraryItem extends React.Component {
'handleMouseLeave'
]);
}
+ shouldComponentUpdate (nextProps) {
+ return this.props.iconURL !== nextProps.iconURL;
+ }
handleClick (e) {
this.props.onSelect(this.props.id);
e.preventDefault();
diff --git a/src/containers/sprite-library.jsx b/src/containers/sprite-library.jsx
index 0a1bcaa3e..6738bacd8 100644
--- a/src/containers/sprite-library.jsx
+++ b/src/containers/sprite-library.jsx
@@ -11,18 +11,55 @@ class SpriteLibrary extends React.Component {
constructor (props) {
super(props);
bindAll(this, [
- 'handleItemSelect'
+ 'handleItemSelect',
+ 'handleMouseEnter',
+ 'handleMouseLeave',
+ 'rotateCostume'
]);
+ this.state = {
+ activeSprite: null,
+ costumeIndex: 0,
+ sprites: spriteLibraryContent
+ };
+ }
+ componentWillReceiveProps (newProps) {
+ if (!newProps.visible) clearInterval(this.intervalId);
}
handleItemSelect (item) {
this.props.vm.addSprite2(JSON.stringify(item.json));
}
+ handleMouseEnter (item) {
+ this.setState({activeSprite: item});
+ if (this.intervalId) clearInterval(this.intervalId);
+ this.intervalId = setInterval(this.rotateCostume, 300);
+ }
+ handleMouseLeave () {
+ this.intervalId = clearInterval(this.intervalId);
+ }
+ rotateCostume () {
+ const costumes = this.state.activeSprite.json.costumes;
+ const nextCostumeIndex = (this.state.costumeIndex + 1) % costumes.length;
+ this.setState({
+ costumeIndex: nextCostumeIndex,
+ sprites: this.state.sprites.map(sprite => {
+ if (sprite.name === this.state.activeSprite.name) {
+ return {
+ ...sprite,
+ md5: sprite.json.costumes[nextCostumeIndex].baseLayerMD5
+ };
+ }
+ return sprite;
+ })
+ });
+ }
render () {
return (
<LibraryComponent
- data={spriteLibraryContent}
+ data={this.state.sprites}
title="Sprite Library"
visible={this.props.visible}
+ onItemMouseEnter={this.handleMouseEnter}
+ onItemMouseLeave={this.handleMouseLeave}
onItemSelected={this.handleItemSelect}
onRequestClose={this.props.onRequestClose}
/>
--
GitLab