Initial rough sprite/costume/backdrop libraries #7

tmickel · 2016-10-19T22:10:07Z

Adds a component for rendering costumes to canvases
Adds a modal component that uses react-modal, and some infrastructure for controlling which one shows in GUI.
Adds a "library" and "library item" component to show libraries and selectable grids.
Adds a "media-library.js" to lib, which knows how to download all needed Media Library JSON from scratchr2.
Adds specific libraries (costume, backdrop, sprite) which know how to render library components and tell the VM when to create/change those (paired with Functions to add Sprite2/costumes/backdrops scratch-vm#291).

Still needs:

Styling pass after design thoughts from Carl.
Performance improvements: especially with the Sprite library, which requires downloading a separate JSON for each sprite.
Bug fixes/clean up?

But I wanted to get this in for review so we can think about the general approach.

rschamp

Looks really good overall!

When you resolve conflicts, would you please follow the pattern for passing down props via the GUI component?

Mostly just style nits other than that. This was really quick, thanks!

src/components/costume-canvas.js

+            scale * img.width,
+            scale * img.height);
+        context.rotate(-angle);
+        context.translate(-contextTranslateX, -contextTranslateY);


src/components/library.js

+    render () {
+        let gridItems = [];
+        let itemId = 0;
+        for (let dataItem of this.props.data) {


src/containers/backdrop-library.js

+        }
+        this.props.vm.addBackdrop(vmBackdrop);
+    }
+    render () {


src/containers/gui.js

+                <SpriteSelector vm={this.props.vm}
+                    openNewSprite={() => this.openModal('sprite-library')}
+                    openNewCostume={() => this.openModal('costume-library')}
+                    openNewBackdrop={() => this.openModal('backdrop-library')} />


src/containers/sprite-library.js

+    }
+    componentWillReceiveProps (nextProps) {
+        if (nextProps.visible && this.state.data.length === 0) {
+            this.props.mediaLibrary.getMediaLibrary('sprite', this.setData.bind(this));


src/containers/sprite-library.js

+                    name: libraryItem.objName,
+                    md5: libraryItem.costumes[0].baseLayerMD5,
+                    json: libraryKey
+                }


src/components/costume-canvas.js

+ */
+
+class CostumeCanvas extends React.Component {
+    render () {


# Conflicts: # package.json # src/containers/gui.js

tmickel · 2016-10-20T17:46:03Z

@rschamp Thanks for the quick review. I resolved the conflicts and followed the props pattern you started in the places where it was. I'm a little confused about where else that pattern should be followed though. Everywhere? Should we never access this.props except to unpack it?

rschamp · 2016-10-20T19:56:28Z

I'm a little confused about where else that pattern should be followed though. Everywhere? Should we never access this.props except to unpack it?

I think it should just be followed in container components' render methods, since the container will wrap the presentation component, and we want to be able to override the presentation component props via the container component.

Not sure how scalable this is but it was useful at least once already working on the audio gui prototype.

rschamp · 2016-10-20T20:01:18Z

Thanks!

Update from official repo

# [4.1.0-hotfix.1](v4.0.38...v4.1.0-hotfix.1) (2024-10-19) ### Bug Fixes * add pinch to zoom support ([#21](#21)) ([a690749](a690749)) * add support for Scratch-style procedures ([#6](#6)) ([df207e4](df207e4)) * adjust key event filtering to fix the when key pressed block ([#13](#13)) ([06b011f](06b011f)) * allow typing into comments ([#15](#15)) ([668fbb9](668fbb9)) * avoid clearing the state of the sensing_of block by refreshing the toolbox ([#28](#28)) ([9bd036b](9bd036b)) * call reportValue on the ScratchBlocks module instead of the workspace ([#11](#11)) ([1898c52](1898c52)) * call the new glow methods on ScratchBlocks ([#12](#12)) ([be4386d](be4386d)) * fix bug that prevented displaying the procedure editor modal on mobile ([#26](#26)) ([8b1bf24](8b1bf24)) * make dropdown menu shadow block colors consistent ([#22](#22)) ([45d4803](45d4803)) * modify inject options to reflect Scratch behaviors ([#5](#5)) ([59bf3c5](59bf3c5)) * only refresh the toolbox when procedures are created via undo ([#19](#19)) ([f6dfd53](f6dfd53)) * partially roll back flyout optimization ([#25](#25)) ([1745c59](1745c59)) * patch the getCheckboxState method in the new flyout ([#7](#7)) ([dd98dd8](dd98dd8)) * preserve toolbox scroll position when switching between sprites/the stage ([#10](#10)) ([c8bc880](c8bc880)) * prevent exception when switching languages ([#27](#27)) ([d174ae9](d174ae9)) * reenable the Scratch colour eyedropper ([a7b1a10](a7b1a10)) * select extension categories when added ([#8](#8)) ([2d58403](2d58403)) * show the correct toolbox based on sprites or the stage being selected ([#4](#4)) ([dbbb251](dbbb251)) * specify the function to be used for prompting about variables ([#17](#17)) ([ee80f13](ee80f13)) * temporarily disable functionality in scratch-gui for compatibility with patched scratch-blocks ([#1](#1)) ([905f043](905f043)) * update the toolbox in response to procedure deletion/creation ([#18](#18)) ([505011d](505011d)) * Use toolboxitemid instead of id as the identifier attribute for toolbox categories ([#9](#9)) ([077415b](077415b)) ### Features * plumb Scratch variable support into the UI ([#16](#16)) ([c92f244](c92f244))

# [4.1.0-beta.1](v4.0.38...v4.1.0-beta.1) (2024-10-19) ### Bug Fixes * add pinch to zoom support ([#21](#21)) ([a690749](a690749)) * add support for Scratch-style procedures ([#6](#6)) ([df207e4](df207e4)) * adjust key event filtering to fix the when key pressed block ([#13](#13)) ([06b011f](06b011f)) * allow typing into comments ([#15](#15)) ([668fbb9](668fbb9)) * avoid clearing the state of the sensing_of block by refreshing the toolbox ([#28](#28)) ([9bd036b](9bd036b)) * call reportValue on the ScratchBlocks module instead of the workspace ([#11](#11)) ([1898c52](1898c52)) * call the new glow methods on ScratchBlocks ([#12](#12)) ([be4386d](be4386d)) * fix bug that prevented displaying the procedure editor modal on mobile ([#26](#26)) ([8b1bf24](8b1bf24)) * make dropdown menu shadow block colors consistent ([#22](#22)) ([45d4803](45d4803)) * modify inject options to reflect Scratch behaviors ([#5](#5)) ([59bf3c5](59bf3c5)) * only refresh the toolbox when procedures are created via undo ([#19](#19)) ([f6dfd53](f6dfd53)) * partially roll back flyout optimization ([#25](#25)) ([1745c59](1745c59)) * patch the getCheckboxState method in the new flyout ([#7](#7)) ([dd98dd8](dd98dd8)) * preserve toolbox scroll position when switching between sprites/the stage ([#10](#10)) ([c8bc880](c8bc880)) * prevent exception when switching languages ([#27](#27)) ([d174ae9](d174ae9)) * reenable the Scratch colour eyedropper ([a7b1a10](a7b1a10)) * **release:** release beta branch under beta label(?) ([e5cc322](e5cc322)) * select extension categories when added ([#8](#8)) ([2d58403](2d58403)) * show the correct toolbox based on sprites or the stage being selected ([#4](#4)) ([dbbb251](dbbb251)) * specify the function to be used for prompting about variables ([#17](#17)) ([ee80f13](ee80f13)) * temporarily disable functionality in scratch-gui for compatibility with patched scratch-blocks ([#1](#1)) ([905f043](905f043)) * update the toolbox in response to procedure deletion/creation ([#18](#18)) ([505011d](505011d)) * Use toolboxitemid instead of id as the identifier attribute for toolbox categories ([#9](#9)) ([077415b](077415b)) ### Features * plumb Scratch variable support into the UI ([#16](#16)) ([c92f244](c92f244))

# [4.1.0-spork.1](v4.0.39...v4.1.0-spork.1) (2024-10-21) ### Bug Fixes * add pinch to zoom support ([#21](#21)) ([a690749](a690749)) * add support for Scratch-style procedures ([#6](#6)) ([df207e4](df207e4)) * adjust key event filtering to fix the when key pressed block ([#13](#13)) ([06b011f](06b011f)) * allow typing into comments ([#15](#15)) ([668fbb9](668fbb9)) * avoid clearing the state of the sensing_of block by refreshing the toolbox ([#28](#28)) ([9bd036b](9bd036b)) * call reportValue on the ScratchBlocks module instead of the workspace ([#11](#11)) ([1898c52](1898c52)) * call the new glow methods on ScratchBlocks ([#12](#12)) ([be4386d](be4386d)) * fix bug that prevented displaying the procedure editor modal on mobile ([#26](#26)) ([8b1bf24](8b1bf24)) * make dropdown menu shadow block colors consistent ([#22](#22)) ([45d4803](45d4803)) * modify inject options to reflect Scratch behaviors ([#5](#5)) ([59bf3c5](59bf3c5)) * only refresh the toolbox when procedures are created via undo ([#19](#19)) ([f6dfd53](f6dfd53)) * partially roll back flyout optimization ([#25](#25)) ([1745c59](1745c59)) * patch the getCheckboxState method in the new flyout ([#7](#7)) ([dd98dd8](dd98dd8)) * preserve toolbox scroll position when switching between sprites/the stage ([#10](#10)) ([c8bc880](c8bc880)) * prevent exception when switching languages ([#27](#27)) ([d174ae9](d174ae9)) * reenable the Scratch colour eyedropper ([a7b1a10](a7b1a10)) * **release:** release beta branch under beta label(?) ([17c5b19](17c5b19)) * select extension categories when added ([#8](#8)) ([2d58403](2d58403)) * show the correct toolbox based on sprites or the stage being selected ([#4](#4)) ([dbbb251](dbbb251)) * specify the function to be used for prompting about variables ([#17](#17)) ([ee80f13](ee80f13)) * temporarily disable functionality in scratch-gui for compatibility with patched scratch-blocks ([#1](#1)) ([905f043](905f043)) * update the toolbox in response to procedure deletion/creation ([#18](#18)) ([505011d](505011d)) * Use toolboxitemid instead of id as the identifier attribute for toolbox categories ([#9](#9)) ([077415b](077415b)) ### Features * plumb Scratch variable support into the UI ([#16](#16)) ([c92f244](c92f244))

# [5.2.0-hotfix.1](v5.1.36...v5.2.0-hotfix.1) (2025-02-13) ### Bug Fixes * add pinch to zoom support ([#21](#21)) ([a690749](a690749)) * add support for Scratch-style procedures ([#6](#6)) ([df207e4](df207e4)) * allow typing into comments ([#15](#15)) ([668fbb9](668fbb9)) * avoid clearing the state of the sensing_of block by refreshing the toolbox ([#28](#28)) ([9bd036b](9bd036b)) * call reportValue on the ScratchBlocks module instead of the workspace ([#11](#11)) ([1898c52](1898c52)) * call the new glow methods on ScratchBlocks ([#12](#12)) ([be4386d](be4386d)) * fix bug that prevented displaying the procedure editor modal on mobile ([#26](#26)) ([8b1bf24](8b1bf24)) * fix preserving toolbox scroll position for new continuous toolbox plugin ([#30](#30)) ([b8f19dc](b8f19dc)) * make dropdown menu shadow block colors consistent ([#22](#22)) ([45d4803](45d4803)) * modify inject options to reflect Scratch behaviors ([#5](#5)) ([59bf3c5](59bf3c5)) * only refresh the toolbox when procedures are created via undo ([#19](#19)) ([f6dfd53](f6dfd53)) * partially roll back flyout optimization ([#25](#25)) ([1745c59](1745c59)) * patch the getCheckboxState method in the new flyout ([#7](#7)) ([dd98dd8](dd98dd8)) * preserve toolbox scroll position when switching between sprites/the stage ([#10](#10)) ([c8bc880](c8bc880)) * prevent exception when switching languages ([#27](#27)) ([d174ae9](d174ae9)) * reenable the Scratch colour eyedropper ([a7b1a10](a7b1a10)) * **release:** release beta branch under beta label(?) ([17c5b19](17c5b19)) * select extension categories when added ([#8](#8)) ([2d58403](2d58403)) * show the correct toolbox based on sprites or the stage being selected ([#4](#4)) ([dbbb251](dbbb251)) * specify the function to be used for prompting about variables ([#17](#17)) ([ee80f13](ee80f13)) * temporarily disable functionality in scratch-gui for compatibility with patched scratch-blocks ([#1](#1)) ([905f043](905f043)) * update "colour" property names for dark theme and mocks ([de06a2f](de06a2f)) * update the toolbox in response to procedure deletion/creation ([#18](#18)) ([505011d](505011d)) * Use toolboxitemid instead of id as the identifier attribute for toolbox categories ([#9](#9)) ([077415b](077415b)) ### Features * plumb Scratch variable support into the UI ([#16](#16)) ([c92f244](c92f244))

# [5.2.0-spork.1](v5.1.103...v5.2.0-spork.1) (2025-08-27) ### Bug Fixes * add pinch to zoom support ([#21](#21)) ([a690749](a690749)) * add support for Scratch-style procedures ([#6](#6)) ([df207e4](df207e4)) * adjust key event filtering to fix the when key pressed block ([#13](#13)) ([06b011f](06b011f)) * allow typing into comments ([#15](#15)) ([668fbb9](668fbb9)) * avoid clearing the state of the sensing_of block by refreshing the toolbox ([#28](#28)) ([9bd036b](9bd036b)) * call reportValue on the ScratchBlocks module instead of the workspace ([#11](#11)) ([1898c52](1898c52)) * call the new glow methods on ScratchBlocks ([#12](#12)) ([be4386d](be4386d)) * fix bug that prevented displaying the procedure editor modal on mobile ([#26](#26)) ([8b1bf24](8b1bf24)) * fix issue that could prevent variables from appearing in the toolbox ([#31](#31)) ([0570261](0570261)) * fix preserving toolbox scroll position for new continuous toolbox plugin ([#30](#30)) ([b8f19dc](b8f19dc)) * make dropdown menu shadow block colors consistent ([#22](#22)) ([45d4803](45d4803)) * modify inject options to reflect Scratch behaviors ([#5](#5)) ([59bf3c5](59bf3c5)) * only refresh the toolbox when procedures are created via undo ([#19](#19)) ([f6dfd53](f6dfd53)) * partially roll back flyout optimization ([#25](#25)) ([1745c59](1745c59)) * patch the getCheckboxState method in the new flyout ([#7](#7)) ([dd98dd8](dd98dd8)) * plumb `FieldNote` through to the VM ([#33](#33)) ([fb762c2](fb762c2)) * preserve toolbox scroll position when switching between sprites/the stage ([#10](#10)) ([c8bc880](c8bc880)) * prevent exception when switching languages ([#27](#27)) ([d174ae9](d174ae9)) * reenable the Scratch colour eyedropper ([a7b1a10](a7b1a10)) * **release:** release beta branch under beta label(?) ([17c5b19](17c5b19)) * select extension categories when added ([#8](#8)) ([2d58403](2d58403)) * show the correct toolbox based on sprites or the stage being selected ([#4](#4)) ([dbbb251](dbbb251)) * specify the function to be used for prompting about variables ([#17](#17)) ([ee80f13](ee80f13)) * temporarily disable functionality in scratch-gui for compatibility with patched scratch-blocks ([#1](#1)) ([905f043](905f043)) * update the toolbox in response to procedure deletion/creation ([#18](#18)) ([505011d](505011d)) * use serialization wrapper ([#32](#32)) ([6e46a18](6e46a18)) * Use toolboxitemid instead of id as the identifier attribute for toolbox categories ([#9](#9)) ([077415b](077415b)) ### Features * plumb Scratch variable support into the UI ([#16](#16)) ([c92f244](c92f244))

Initial rough sprite/costume/backdrop libraries

41c1765

tmickel added the pr - needs review label Oct 19, 2016

tmickel added this to the November 14 milestone Oct 19, 2016

tmickel assigned rschamp Oct 19, 2016

rschamp suggested changes Oct 20, 2016

View reviewed changes

rschamp added pr - changes requested and removed pr - needs review labels Oct 20, 2016

rschamp assigned tmickel and unassigned rschamp Oct 20, 2016

tmickel added 9 commits October 20, 2016 13:10

Merge branch 'master' into feature/libraries

7a675cd

# Conflicts: # package.json # src/containers/gui.js

CostumeCanvas nits

93645ea

Idiomatic "map"

ee72f23

Various nits

a6bdf09

bindAll throughout

14afd85

Return the library item object

7c5cecb

Add defaults for library props

7d36701

Fix the props situation

bd22602

Fix id for selected item, return when CostumeCanvas draw fails

9cc4dcf

tmickel added pr - needs review and removed pr - changes requested labels Oct 20, 2016

tmickel assigned rschamp and unassigned tmickel Oct 20, 2016

tmickel added 2 commits October 20, 2016 13:46

Fix merge duplication of package.json

bd900a9

NL for library item

7fcf71d

rschamp approved these changes Oct 20, 2016

View reviewed changes

rschamp added pr - good to merge and removed pr - needs review labels Oct 20, 2016

rschamp removed their assignment Oct 20, 2016

rschamp assigned tmickel Oct 20, 2016

tmickel merged commit 13efe77 into scratchfoundation:master Oct 21, 2016

tmickel deleted the feature/libraries branch October 21, 2016 13:54

prapti-khawas referenced this pull request in q4blocks/scratch-gui Jul 13, 2018

Merge pull request #7 from LLK/develop

1685303

Update from official repo

rschamp mentioned this pull request Jul 25, 2018

Remove costume canvas and just display tiles using <img> tags #2730

Merged

Samq64 mentioned this pull request Jul 14, 2021

Add realtime collaboration #7355

Closed

cwillisf pushed a commit that referenced this pull request Oct 11, 2024

fix: patch the getCheckboxState method in the new flyout (#7)

dd98dd8

Initial rough sprite/costume/backdrop libraries #7

Initial rough sprite/costume/backdrop libraries #7

Uh oh!

Conversation

tmickel commented Oct 19, 2016

Uh oh!

rschamp left a comment

Choose a reason for hiding this comment

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

tmickel commented Oct 20, 2016

Uh oh!

rschamp commented Oct 20, 2016

Uh oh!

rschamp commented Oct 20, 2016

Uh oh!

Uh oh!