diff --git a/Backgrounds/BACKGROUNDS.json b/Backdrops/BACKDROPS.json similarity index 100% rename from Backgrounds/BACKGROUNDS.json rename to Backdrops/BACKDROPS.json diff --git a/Backgrounds/atom_playground.jpg b/Backdrops/atom_playground.jpg similarity index 100% rename from Backgrounds/atom_playground.jpg rename to Backdrops/atom_playground.jpg diff --git a/Backgrounds/baseball-field.png b/Backdrops/baseball-field.png similarity index 100% rename from Backgrounds/baseball-field.png rename to Backdrops/baseball-field.png diff --git a/Backgrounds/basketball-court1-a.png b/Backdrops/basketball-court1-a.png similarity index 100% rename from Backgrounds/basketball-court1-a.png rename to Backdrops/basketball-court1-a.png diff --git a/Backgrounds/basketball-court1-b.png b/Backdrops/basketball-court1-b.png similarity index 100% rename from Backgrounds/basketball-court1-b.png rename to Backdrops/basketball-court1-b.png diff --git a/Backgrounds/beach_malibu.jpg b/Backdrops/beach_malibu.jpg similarity index 100% rename from Backgrounds/beach_malibu.jpg rename to Backdrops/beach_malibu.jpg diff --git a/Backgrounds/beach_rio.png b/Backdrops/beach_rio.png similarity index 100% rename from Backgrounds/beach_rio.png rename to Backdrops/beach_rio.png diff --git a/Backgrounds/bedroom1.gif b/Backdrops/bedroom1.gif similarity index 100% rename from Backgrounds/bedroom1.gif rename to Backdrops/bedroom1.gif diff --git a/Backgrounds/bedroom2.gif b/Backdrops/bedroom2.gif similarity index 100% rename from Backgrounds/bedroom2.gif rename to Backdrops/bedroom2.gif diff --git a/Backgrounds/bench_with_view.jpg b/Backdrops/bench_with_view.jpg similarity index 100% rename from Backgrounds/bench_with_view.jpg rename to Backdrops/bench_with_view.jpg diff --git a/Backgrounds/berkeley_mural.jpg b/Backdrops/berkeley_mural.jpg similarity index 100% rename from Backgrounds/berkeley_mural.jpg rename to Backdrops/berkeley_mural.jpg diff --git a/Backgrounds/blue_sky.svg b/Backdrops/blue_sky.svg similarity index 100% rename from Backgrounds/blue_sky.svg rename to Backdrops/blue_sky.svg diff --git a/Backgrounds/blue_sky2.svg b/Backdrops/blue_sky2.svg similarity index 100% rename from Backgrounds/blue_sky2.svg rename to Backdrops/blue_sky2.svg diff --git a/Backgrounds/blue_sky3.svg b/Backdrops/blue_sky3.svg similarity index 100% rename from Backgrounds/blue_sky3.svg rename to Backdrops/blue_sky3.svg diff --git a/Backgrounds/boardwalk.jpg b/Backdrops/boardwalk.jpg similarity index 100% rename from Backgrounds/boardwalk.jpg rename to Backdrops/boardwalk.jpg diff --git a/Backgrounds/brick-wall-and-stairs.jpg b/Backdrops/brick-wall-and-stairs.jpg similarity index 100% rename from Backgrounds/brick-wall-and-stairs.jpg rename to Backdrops/brick-wall-and-stairs.jpg diff --git a/Backgrounds/brick-wall1.jpg b/Backdrops/brick-wall1.jpg similarity index 100% rename from Backgrounds/brick-wall1.jpg rename to Backdrops/brick-wall1.jpg diff --git a/Backgrounds/brick-wall2.jpg b/Backdrops/brick-wall2.jpg similarity index 100% rename from Backgrounds/brick-wall2.jpg rename to Backdrops/brick-wall2.jpg diff --git a/Backgrounds/brick_wall1.jpg b/Backdrops/brick_wall1.jpg similarity index 100% rename from Backgrounds/brick_wall1.jpg rename to Backdrops/brick_wall1.jpg diff --git a/Backgrounds/brick_wall2.jpg b/Backdrops/brick_wall2.jpg similarity index 100% rename from Backgrounds/brick_wall2.jpg rename to Backdrops/brick_wall2.jpg diff --git a/Backgrounds/building_at_mit.jpg b/Backdrops/building_at_mit.jpg similarity index 100% rename from Backgrounds/building_at_mit.jpg rename to Backdrops/building_at_mit.jpg diff --git a/Backgrounds/canyon.jpg b/Backdrops/canyon.jpg similarity index 100% rename from Backgrounds/canyon.jpg rename to Backdrops/canyon.jpg diff --git a/Backgrounds/castle1.png b/Backdrops/castle1.png similarity index 100% rename from Backgrounds/castle1.png rename to Backdrops/castle1.png diff --git a/Backgrounds/castle2.png b/Backdrops/castle2.png similarity index 100% rename from Backgrounds/castle2.png rename to Backdrops/castle2.png diff --git a/Backgrounds/castle3.png b/Backdrops/castle3.png similarity index 100% rename from Backgrounds/castle3.png rename to Backdrops/castle3.png diff --git a/Backgrounds/castle4.png b/Backdrops/castle4.png similarity index 100% rename from Backgrounds/castle4.png rename to Backdrops/castle4.png diff --git a/Backgrounds/castle5.jpg b/Backdrops/castle5.jpg similarity index 100% rename from Backgrounds/castle5.jpg rename to Backdrops/castle5.jpg diff --git a/Backgrounds/chalkboard.jpg b/Backdrops/chalkboard.jpg similarity index 100% rename from Backgrounds/chalkboard.jpg rename to Backdrops/chalkboard.jpg diff --git a/Backgrounds/circles.svg b/Backdrops/circles.svg similarity index 100% rename from Backgrounds/circles.svg rename to Backdrops/circles.svg diff --git a/Backgrounds/city_with_water.jpg b/Backdrops/city_with_water.jpg similarity index 100% rename from Backgrounds/city_with_water.jpg rename to Backdrops/city_with_water.jpg diff --git a/Backgrounds/city_with_water2.jpg b/Backdrops/city_with_water2.jpg similarity index 100% rename from Backgrounds/city_with_water2.jpg rename to Backdrops/city_with_water2.jpg diff --git a/Backgrounds/clothing_store.jpg b/Backdrops/clothing_store.jpg similarity index 100% rename from Backgrounds/clothing_store.jpg rename to Backdrops/clothing_store.jpg diff --git a/Backgrounds/desert.gif b/Backdrops/desert.gif similarity index 100% rename from Backgrounds/desert.gif rename to Backdrops/desert.gif diff --git a/Backgrounds/doily.svg b/Backdrops/doily.svg similarity index 100% rename from Backgrounds/doily.svg rename to Backdrops/doily.svg diff --git a/Backgrounds/driveway.jpg b/Backdrops/driveway.jpg similarity index 100% rename from Backgrounds/driveway.jpg rename to Backdrops/driveway.jpg diff --git a/Backgrounds/flower_bed.jpg b/Backdrops/flower_bed.jpg similarity index 100% rename from Backgrounds/flower_bed.jpg rename to Backdrops/flower_bed.jpg diff --git a/Backgrounds/flowers.gif b/Backdrops/flowers.gif similarity index 100% rename from Backgrounds/flowers.gif rename to Backdrops/flowers.gif diff --git a/Backgrounds/forest.jpg b/Backdrops/forest.jpg similarity index 100% rename from Backgrounds/forest.jpg rename to Backdrops/forest.jpg diff --git a/Backgrounds/garden_rock.jpg b/Backdrops/garden_rock.jpg similarity index 100% rename from Backgrounds/garden_rock.jpg rename to Backdrops/garden_rock.jpg diff --git a/Backgrounds/gingerbread.png b/Backdrops/gingerbread.png similarity index 100% rename from Backgrounds/gingerbread.png rename to Backdrops/gingerbread.png diff --git a/Backgrounds/goal1.png b/Backdrops/goal1.png similarity index 100% rename from Backgrounds/goal1.png rename to Backdrops/goal1.png diff --git a/Backgrounds/goal2.png b/Backdrops/goal2.png similarity index 100% rename from Backgrounds/goal2.png rename to Backdrops/goal2.png diff --git a/Backgrounds/graffiti.jpg b/Backdrops/graffiti.jpg similarity index 100% rename from Backgrounds/graffiti.jpg rename to Backdrops/graffiti.jpg diff --git a/Backgrounds/grand_canyon.jpg b/Backdrops/grand_canyon.jpg similarity index 100% rename from Backgrounds/grand_canyon.jpg rename to Backdrops/grand_canyon.jpg diff --git a/Backgrounds/gravel_desert.jpg b/Backdrops/gravel_desert.jpg similarity index 100% rename from Backgrounds/gravel_desert.jpg rename to Backdrops/gravel_desert.jpg diff --git a/Backgrounds/greek_theater.png b/Backdrops/greek_theater.png similarity index 100% rename from Backgrounds/greek_theater.png rename to Backdrops/greek_theater.png diff --git a/Backgrounds/hall.jpg b/Backdrops/hall.jpg similarity index 100% rename from Backgrounds/hall.jpg rename to Backdrops/hall.jpg diff --git a/Backgrounds/hallway_outdoors.jpg b/Backdrops/hallway_outdoors.jpg similarity index 100% rename from Backgrounds/hallway_outdoors.jpg rename to Backdrops/hallway_outdoors.jpg diff --git a/Backgrounds/hay_field.jpg b/Backdrops/hay_field.jpg similarity index 100% rename from Backgrounds/hay_field.jpg rename to Backdrops/hay_field.jpg diff --git a/Backgrounds/hearts1.svg b/Backdrops/hearts1.svg similarity index 100% rename from Backgrounds/hearts1.svg rename to Backdrops/hearts1.svg diff --git a/Backgrounds/hearts2.svg b/Backdrops/hearts2.svg similarity index 100% rename from Backgrounds/hearts2.svg rename to Backdrops/hearts2.svg diff --git a/Backgrounds/hill.jpg b/Backdrops/hill.jpg similarity index 100% rename from Backgrounds/hill.jpg rename to Backdrops/hill.jpg diff --git a/Backgrounds/houses.jpg b/Backdrops/houses.jpg similarity index 100% rename from Backgrounds/houses.jpg rename to Backdrops/houses.jpg diff --git a/Backgrounds/kitchen.jpg b/Backdrops/kitchen.jpg similarity index 100% rename from Backgrounds/kitchen.jpg rename to Backdrops/kitchen.jpg diff --git a/Backgrounds/lake.jpg b/Backdrops/lake.jpg similarity index 100% rename from Backgrounds/lake.jpg rename to Backdrops/lake.jpg diff --git a/Backgrounds/light.svg b/Backdrops/light.svg similarity index 100% rename from Backgrounds/light.svg rename to Backdrops/light.svg diff --git a/Backgrounds/metro1.png b/Backdrops/metro1.png similarity index 100% rename from Backgrounds/metro1.png rename to Backdrops/metro1.png diff --git a/Backgrounds/moon.jpg b/Backdrops/moon.jpg similarity index 100% rename from Backgrounds/moon.jpg rename to Backdrops/moon.jpg diff --git a/Backgrounds/neon_tunnel.svg b/Backdrops/neon_tunnel.svg similarity index 100% rename from Backgrounds/neon_tunnel.svg rename to Backdrops/neon_tunnel.svg diff --git a/Backgrounds/night_city.gif b/Backdrops/night_city.gif similarity index 100% rename from Backgrounds/night_city.gif rename to Backdrops/night_city.gif diff --git a/Backgrounds/night_city_with_street.gif b/Backdrops/night_city_with_street.gif similarity index 100% rename from Backgrounds/night_city_with_street.gif rename to Backdrops/night_city_with_street.gif diff --git a/Backgrounds/parking-ramp.jpg b/Backdrops/parking-ramp.jpg similarity index 100% rename from Backgrounds/parking-ramp.jpg rename to Backdrops/parking-ramp.jpg diff --git a/Backgrounds/party.svg b/Backdrops/party.svg similarity index 100% rename from Backgrounds/party.svg rename to Backdrops/party.svg diff --git a/Backgrounds/party_room.jpg b/Backdrops/party_room.jpg similarity index 100% rename from Backgrounds/party_room.jpg rename to Backdrops/party_room.jpg diff --git a/Backgrounds/pathway.jpg b/Backdrops/pathway.jpg similarity index 100% rename from Backgrounds/pathway.jpg rename to Backdrops/pathway.jpg diff --git a/Backgrounds/playing-field.png b/Backdrops/playing-field.png similarity index 100% rename from Backgrounds/playing-field.png rename to Backdrops/playing-field.png diff --git a/Backgrounds/pool.jpg b/Backdrops/pool.jpg similarity index 100% rename from Backgrounds/pool.jpg rename to Backdrops/pool.jpg diff --git a/Backgrounds/purple.svg b/Backdrops/purple.svg similarity index 100% rename from Backgrounds/purple.svg rename to Backdrops/purple.svg diff --git a/Backgrounds/rays.svg b/Backdrops/rays.svg similarity index 99% rename from Backgrounds/rays.svg rename to Backdrops/rays.svg index 681e221442..dd1a4a1241 100644 --- a/Backgrounds/rays.svg +++ b/Backdrops/rays.svg @@ -1,95 +1,95 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Backgrounds/room1.jpg b/Backdrops/room1.jpg similarity index 100% rename from Backgrounds/room1.jpg rename to Backdrops/room1.jpg diff --git a/Backgrounds/room2.jpg b/Backdrops/room2.jpg similarity index 100% rename from Backgrounds/room2.jpg rename to Backdrops/room2.jpg diff --git a/Backgrounds/room3.jpg b/Backdrops/room3.jpg similarity index 100% rename from Backgrounds/room3.jpg rename to Backdrops/room3.jpg diff --git a/Backgrounds/route66.jpg b/Backdrops/route66.jpg similarity index 100% rename from Backgrounds/route66.jpg rename to Backdrops/route66.jpg diff --git a/Backgrounds/school1.gif b/Backdrops/school1.gif similarity index 100% rename from Backgrounds/school1.gif rename to Backdrops/school1.gif diff --git a/Backgrounds/school2.jpg b/Backdrops/school2.jpg similarity index 100% rename from Backgrounds/school2.jpg rename to Backdrops/school2.jpg diff --git a/Backgrounds/slopes.svg b/Backdrops/slopes.svg similarity index 99% rename from Backgrounds/slopes.svg rename to Backdrops/slopes.svg index cc9ac04275..5f5e109bb8 100644 --- a/Backgrounds/slopes.svg +++ b/Backdrops/slopes.svg @@ -1,9 +1,9 @@ - - - - + + + + - - +1+E5LJnwyMw4M2Y7wd7awmL8/yfAAKNOuE7GXcezAAAAAElFTkSuQmCC"> + + diff --git a/Backgrounds/space.svg b/Backdrops/space.svg similarity index 100% rename from Backgrounds/space.svg rename to Backdrops/space.svg diff --git a/Backgrounds/sparkling.svg b/Backdrops/sparkling.svg similarity index 100% rename from Backgrounds/sparkling.svg rename to Backdrops/sparkling.svg diff --git a/Backgrounds/spotlight-stage.jpg b/Backdrops/spotlight-stage.jpg similarity index 100% rename from Backgrounds/spotlight-stage.jpg rename to Backdrops/spotlight-stage.jpg diff --git a/Backgrounds/spotlight-stage2.svg b/Backdrops/spotlight-stage2.svg similarity index 100% rename from Backgrounds/spotlight-stage2.svg rename to Backdrops/spotlight-stage2.svg diff --git a/Backgrounds/stage1.png b/Backdrops/stage1.png similarity index 100% rename from Backgrounds/stage1.png rename to Backdrops/stage1.png diff --git a/Backgrounds/stage2.png b/Backdrops/stage2.png similarity index 100% rename from Backgrounds/stage2.png rename to Backdrops/stage2.png diff --git a/Backgrounds/stars.gif b/Backdrops/stars.gif similarity index 100% rename from Backgrounds/stars.gif rename to Backdrops/stars.gif diff --git a/Backgrounds/stripes.svg b/Backdrops/stripes.svg similarity index 100% rename from Backgrounds/stripes.svg rename to Backdrops/stripes.svg diff --git a/Backgrounds/the_movies_inside.jpg b/Backdrops/the_movies_inside.jpg similarity index 100% rename from Backgrounds/the_movies_inside.jpg rename to Backdrops/the_movies_inside.jpg diff --git a/Backgrounds/the_movies_outside.jpg b/Backdrops/the_movies_outside.jpg similarity index 100% rename from Backgrounds/the_movies_outside.jpg rename to Backdrops/the_movies_outside.jpg diff --git a/Backgrounds/track.svg b/Backdrops/track.svg similarity index 100% rename from Backgrounds/track.svg rename to Backdrops/track.svg diff --git a/Backgrounds/train_tracks1.jpg b/Backdrops/train_tracks1.jpg similarity index 100% rename from Backgrounds/train_tracks1.jpg rename to Backdrops/train_tracks1.jpg diff --git a/Backgrounds/train_tracks2.gif b/Backdrops/train_tracks2.gif similarity index 100% rename from Backgrounds/train_tracks2.gif rename to Backdrops/train_tracks2.gif diff --git a/Backgrounds/tree-gifts.png b/Backdrops/tree-gifts.png similarity index 100% rename from Backgrounds/tree-gifts.png rename to Backdrops/tree-gifts.png diff --git a/Backgrounds/tree.jpg b/Backdrops/tree.jpg similarity index 100% rename from Backgrounds/tree.jpg rename to Backdrops/tree.jpg diff --git a/Backgrounds/underwater1.png b/Backdrops/underwater1.png similarity index 100% rename from Backgrounds/underwater1.png rename to Backdrops/underwater1.png diff --git a/Backgrounds/underwater2.png b/Backdrops/underwater2.png similarity index 100% rename from Backgrounds/underwater2.png rename to Backdrops/underwater2.png diff --git a/Backgrounds/underwater3.gif b/Backdrops/underwater3.gif similarity index 100% rename from Backgrounds/underwater3.gif rename to Backdrops/underwater3.gif diff --git a/Backgrounds/urban1.png b/Backdrops/urban1.png similarity index 100% rename from Backgrounds/urban1.png rename to Backdrops/urban1.png diff --git a/Backgrounds/urban2.png b/Backdrops/urban2.png similarity index 100% rename from Backgrounds/urban2.png rename to Backdrops/urban2.png diff --git a/Backgrounds/village.jpg b/Backdrops/village.jpg similarity index 100% rename from Backgrounds/village.jpg rename to Backdrops/village.jpg diff --git a/Backgrounds/water_and_rocks.jpg b/Backdrops/water_and_rocks.jpg similarity index 100% rename from Backgrounds/water_and_rocks.jpg rename to Backdrops/water_and_rocks.jpg diff --git a/Backgrounds/wave.jpg b/Backdrops/wave.jpg similarity index 100% rename from Backgrounds/wave.jpg rename to Backdrops/wave.jpg diff --git a/Backgrounds/winter-lights.svg b/Backdrops/winter-lights.svg similarity index 100% rename from Backgrounds/winter-lights.svg rename to Backdrops/winter-lights.svg diff --git a/Backgrounds/winter.svg b/Backdrops/winter.svg similarity index 100% rename from Backgrounds/winter.svg rename to Backdrops/winter.svg diff --git a/Backgrounds/woods.gif b/Backdrops/woods.gif similarity index 100% rename from Backgrounds/woods.gif rename to Backdrops/woods.gif diff --git a/Backgrounds/woods_and_bench.jpg b/Backdrops/woods_and_bench.jpg similarity index 100% rename from Backgrounds/woods_and_bench.jpg rename to Backdrops/woods_and_bench.jpg diff --git a/Backgrounds/xy-grid.gif b/Backdrops/xy-grid.gif similarity index 100% rename from Backgrounds/xy-grid.gif rename to Backdrops/xy-grid.gif diff --git a/src/add-backdrop.svg b/src/add-backdrop.svg new file mode 100644 index 0000000000..691d5843ad --- /dev/null +++ b/src/add-backdrop.svg @@ -0,0 +1,21 @@ + + + + backdrop-library + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/gui.js b/src/gui.js index 64e22f5265..2240e807e6 100644 --- a/src/gui.js +++ b/src/gui.js @@ -2152,7 +2152,7 @@ IDE_Morph.prototype.createOldSpriteBar = function () { [ new SymbolMorph("brush", 12), localize( - this.currentSprite instanceof SpriteMorph ? "Costumes" : "Backgrounds", + this.currentSprite instanceof SpriteMorph ? "Costumes" : "Backdrops", ), ], () => this.currentTab === "costumes", // query @@ -2376,14 +2376,8 @@ IDE_Morph.prototype.createCorral = function (keepSceneAlbum) { new Point(72, this.height() + myself.spriteBar.height()), ); - this.newSpriteButton.bounds.setExtent(new Point(52, 52)); - this.newSpriteButton.label.setCenter(this.newSpriteButton.center()); - this.newSpriteButton.setBottom(this.frame.bottom() - padding); - this.newSpriteButton.setRight(this.frame.right() - padding); - - this.newSpriteFlyout.setCenter(this.newSpriteButton.center()); - this.newSpriteFlyout.setBottom(this.newSpriteButton.center().y); - this.newSpriteFlyout.fixLayout(); + this.newSpriteFlyout.setBottom(this.frame.bottom() - padding); + this.newSpriteFlyout.setRight(this.frame.right() - padding); this.refresh(); }; @@ -2435,154 +2429,12 @@ IDE_Morph.prototype.createCorral = function (keepSceneAlbum) { }; // newSpriteFlyout - this.corral.newSpriteFlyout = new Morph(); - this.corral.newSpriteFlyout.setExtent(new Point(36, 134)); - this.corral.newSpriteFlyout.color = this.accentColor; - this.corral.newSpriteFlyout.hide(); - - this.corral.newSpriteFlyout.render = function (ctx) { - ctx.beginPath(); - ctx.roundRect(0, 0, this.width(), this.height(), [18, 18, 0, 0]); - ctx.fillStyle = this.color.toString(); - ctx.fill(); - }; - - this.corral.newSpriteFlyout.mouseLeave = function () { - if (this.world().hand.morphAtPointer() == myself.corral.newSpriteButton) - return; - - this.hide(); - }; - - this.corral.newSpriteFlyout.fixLayout = function () { - this.turtle.setBottom(this.bottom() - 26); - this.turtle.setLeft(this.left()); - this.turtle.label.setCenter(this.turtle.center()); - - this.camButton.setBottom(this.turtle.top()); - this.camButton.setLeft(this.left()); - this.camButton.label.setCenter(this.camButton.center()); - - this.paintbutton.setBottom(this.camButton.top()); - this.paintbutton.setLeft(this.left()); - this.paintbutton.label.setCenter(this.paintbutton.center()); - }; + this.corral.newSpriteFlyout = new ScratchFlyoutMorph(this, "addNewSprite", "newSprite", this.accentColor); + this.corral.newSpriteFlyout.addItem(() => { this.addNewSprite(true); }, "turtle"); + this.corral.newSpriteFlyout.addItem("newCamSprite", "camera"); + this.corral.newSpriteFlyout.addItem("paintNewSprite", "brush"); + this.corral.newSpriteFlyout.build(); this.corral.add(this.corral.newSpriteFlyout); - - // newSpriteFlyout - turtle - this.corral.newSpriteFlyout.turtle = new TriggerMorph(this, () => { - this.addNewSprite(true); - this.corral.newSpriteFlyout.hide(); - }); - this.corral.newSpriteFlyout.turtle.label.destroy(); - this.corral.newSpriteFlyout.turtle.label = new SymbolMorph( - "turtle", - 20, - WHITE, - ); - this.corral.newSpriteFlyout.turtle.add( - this.corral.newSpriteFlyout.turtle.label, - ); - this.corral.newSpriteFlyout.turtle.color = this.accentColor; - this.corral.newSpriteFlyout.turtle.highlightColor = new Color(15, 189, 140); - this.corral.newSpriteFlyout.turtle.setExtent(new Point(36, 36)); - this.corral.newSpriteFlyout.turtle._render = - this.corral.newSpriteFlyout.turtle.render; - this.corral.newSpriteFlyout.add(this.corral.newSpriteFlyout.turtle); - - // newSpriteFlyout - camButton - this.corral.newSpriteFlyout.camButton = new TriggerMorph(this, () => { - this.newCamSprite(); - this.corral.newSpriteFlyout.hide(); - }); - this.corral.newSpriteFlyout.camButton.label.destroy(); - this.corral.newSpriteFlyout.camButton.label = new SymbolMorph( - "camera", - 20, - WHITE, - ); - this.corral.newSpriteFlyout.camButton.add( - this.corral.newSpriteFlyout.camButton.label, - ); - this.corral.newSpriteFlyout.camButton.color = this.accentColor; - this.corral.newSpriteFlyout.camButton.highlightColor = new Color( - 15, - 189, - 140, - ); - this.corral.newSpriteFlyout.camButton.setExtent(new Point(36, 36)); - this.corral.newSpriteFlyout.camButton._render = - this.corral.newSpriteFlyout.camButton.render; - this.corral.newSpriteFlyout.add(this.corral.newSpriteFlyout.camButton); - - // newSpriteFlyout - paintbutton - this.corral.newSpriteFlyout.paintbutton = new TriggerMorph(this, () => { - this.paintNewSprite(); - this.corral.newSpriteFlyout.hide(); - }); - this.corral.newSpriteFlyout.paintbutton.label.destroy(); - this.corral.newSpriteFlyout.paintbutton.label = new SymbolMorph( - "brush", - 20, - WHITE, - ); - this.corral.newSpriteFlyout.paintbutton.add( - this.corral.newSpriteFlyout.paintbutton.label, - ); - this.corral.newSpriteFlyout.paintbutton.color = this.accentColor; - this.corral.newSpriteFlyout.paintbutton.highlightColor = new Color( - 15, - 189, - 140, - ); - this.corral.newSpriteFlyout.paintbutton.setExtent(new Point(36, 36)); - this.corral.newSpriteFlyout.paintbutton._render = - this.corral.newSpriteFlyout.paintbutton.render; - this.corral.newSpriteFlyout.paintbutton.render = function (ctx) { - ctx.beginPath(); - ctx.roundRect(0, 0, this.width(), this.height(), [18, 18, 0, 0]); - ctx.closePath(); - ctx.clip(); - - this._render(ctx); - ctx.restore(); - }; - this.corral.newSpriteFlyout.add(this.corral.newSpriteFlyout.paintbutton); - - // newSpriteButton - this.corral.newSpriteButton = new PushButtonMorph( - this, - "addNewSprite", - new SymbolMorph("newSprite", 28), - ); - this.corral.newSpriteButton.color = this.accentColor; - this.corral.newSpriteButton.corner = 26; - this.corral.newSpriteButton.highlightColor = new Color(15, 189, 140); - this.corral.newSpriteButton.outlineColor = this.accentColor.withAlpha(0.25); - this.corral.newSpriteButton.outline = 4; - - this.corral.newSpriteButton._mouseEnter = - this.corral.newSpriteButton.mouseEnter; - this.corral.newSpriteButton.mouseEnter = function () { - this._mouseEnter(); - - myself.corral.newSpriteFlyout.show(); - }; - this.corral.newSpriteButton._mouseLeave = - this.corral.newSpriteButton.mouseLeave; - this.corral.newSpriteButton.mouseLeave = function () { - this._mouseLeave(); - - if (this.world().hand.morphAtPointer() == myself.corral.newSpriteFlyout) - return; - if ( - this.world().hand.morphAtPointer().parent == myself.corral.newSpriteFlyout - ) - return; - myself.corral.newSpriteFlyout.hide(); - }; - - this.corral.add(this.corral.newSpriteButton); }; // IDE_Morph layout @@ -2614,7 +2466,7 @@ IDE_Morph.prototype.fixLayout = function (situation) { ); this.extensionButton.setTop(world.bottom() - 52); this.extensionButton.setHeight(52); - globalThis["showExtensions"] = () => { + this.extensionButton.mouseDownLeft = () => { if (location.protocol === "file:") { this.importLocalFile(); return; @@ -2624,7 +2476,6 @@ IDE_Morph.prototype.fixLayout = function (situation) { new LibraryImportDialogMorph(this, libraries).popUp(); }); }; - this.extensionButton.mouseDownLeft = showExtensions; this.categories.setWidth(this.catWidth); this.extensionButton.setWidth(this.catWidth); this.categories.bounds.corner.y = @@ -3331,19 +3182,21 @@ IDE_Morph.prototype.stopAllScripts = function () { this.projectControlBar.stopButton.refresh(); }; -IDE_Morph.prototype.selectSprite = function (sprite, noEmptyRefresh) { - // prevent switching to another sprite if a block editor or a block - // visibility dialog box is open - // so local blocks of different sprites don't mix - if ( - detect( +IDE_Morph.prototype.cantSwitchSprites = function () { + return detect( this.world().children, (morph) => morph instanceof BlockEditorMorph || morph instanceof BlockDialogMorph || morph instanceof BlockVisibilityDialogMorph, - ) - ) { + ); +} + +IDE_Morph.prototype.selectSprite = function (sprite, noEmptyRefresh) { + // prevent switching to another sprite if a block editor or a block + // visibility dialog box is open + // so local blocks of different sprites don't mix + if (this.cantSwitchSprites()) { return; } if (this.currentSprite && this.currentSprite.scripts.focus) { @@ -3766,6 +3619,11 @@ IDE_Morph.prototype.addNewSprite = function (useTurtle) { }; IDE_Morph.prototype.paintNewSprite = function () { + if (this.cantSwitchSprites()) { + this.showMessage("can't create new sprite if a block editor is open."); + return; + } + var sprite = new SpriteMorph(this.globalVariables), cos = new Costume(); @@ -3775,16 +3633,8 @@ IDE_Morph.prototype.paintNewSprite = function () { this.sprites.add(sprite); this.corral.addSprite(sprite); this.selectSprite(sprite); - cos.edit( - this.world(), - this, - true, - () => this.removeSprite(sprite), - () => { - sprite.addCostume(cos); - sprite.wearCostume(cos); - }, - ); + this.oldSpriteBar.tabBar.tabTo("costumes"); + this.spriteEditor.paintNew(); }; IDE_Morph.prototype.newCamSprite = function () { @@ -4952,7 +4802,7 @@ IDE_Morph.prototype.projectMenu = function () { world = this.world(), pos = this.controlBar.projectButton.bottomLeft(), graphicsName = - this.currentSprite instanceof SpriteMorph ? "Costumes" : "Backgrounds", + this.currentSprite instanceof SpriteMorph ? "Costumes" : "Backdrops", shiftClicked = world.currentKey === 16, backup = this.availableBackup(shiftClicked); @@ -12110,7 +11960,7 @@ WardrobeMorph.prototype.updateList = function () { return; } ide.importMedia( - ide.currentSprite instanceof SpriteMorph ? "Costumes" : "Backgrounds", + ide.currentSprite instanceof SpriteMorph ? "Costumes" : "Backdrops", ); }, new SymbolMorph("cross", 15), @@ -12315,9 +12165,45 @@ WardrobeMorph.prototype.removeCostumeAt = function (idx) { }; WardrobeMorph.prototype.paintNew = function () { + // I had to change the null extentPoint in the Costume newCanvas to instead + // use the stage dimensions for StageMorph. I believe this is of the in-tab + // costume editor d016 made. + // + // Back in the original Snap! source code, this would have somethng like this + // at the bottom: + + // cos.edit( + // this.world(), + // ide, + // true, + // null, + // () => { + // this.sprite.shadowAttribute('costumes'); + // this.sprite.addCostume(cos); + // this.updateList(); + // this.sprite.wearCostume(cos); + // this.sprite.recordUserEdit( + // 'costume', + // 'draw', + // cos.name + // ); + // } + // ); + // + // The null canvas size was okay for this because the costume wouldn't get + // added to the sprite/stage right away, and the paint editor handled a empty + // canvas. However, when d016 modified the costume editor to be inside the tab + // itself (to be more like Scratch, of course), he had to add the costume to + // the object, again to be more like Scratch. Thus, the object then recived + // this undrawable empty canvas and, error. d016 only did a catch for the + // SpriteMorph's render, not the StageMorph's. Thus I made the costume the stage + // size if we are for the stage. + // + // - codingisfun2831t + var ide = this.parentThatIsA(IDE_Morph), cos = new Costume( - newCanvas(null, true), + newCanvas(this.sprite instanceof StageMorph ? this.sprite.dimensions : null, true), this.sprite.newCostumeName(localize("costume")), null, // rotation center null, // don't shrink-to-fit @@ -12328,8 +12214,8 @@ WardrobeMorph.prototype.paintNew = function () { this.sprite.shadowAttribute("costumes"); this.sprite.addCostume(cos); - this.sprite.wearCostume(cos); this.updateList(); + this.sprite.wearCostume(cos); this.sprite.recordUserEdit("costume", "draw", cos.name); }; @@ -13746,6 +13632,7 @@ CorralStageMorph.prototype.init = function (stage, ide) { this.label = null; this.thumbnail = null; this.backdrops = null; + this.newBackdropFlyout = null; this.buildContents(); @@ -13799,10 +13686,30 @@ CorralStageMorph.prototype.buildContents = function () { this.backdrops.color = this.ide.buttonLabelColor; this.add(this.backdrops); + this.newBackdropFlyout = new ScratchFlyoutMorph(this, "addNewBackdrop", "newBackdrop", this.ide.accentColor); + this.newBackdropFlyout.addItem("paintNewBackdrop", "brush"); + this.newBackdropFlyout.build(); + this.add(this.newBackdropFlyout); + this.createThumbnail(); this.updateBackdrops(); }; +CorralStageMorph.prototype.addNewBackdrop = function() { + this.ide.importMedia("Backdrops"); +}; + +CorralStageMorph.prototype.paintNewBackdrop = function () { + if (this.ide.cantSwitchSprites() && this.ide.currentSprite != this.state) { + this.ide.showMessage("can't create new backdrop if a block editor is open and not on the stage."); + return; + } + + this.ide.selectSprite(this.stage); + this.ide.oldSpriteBar.tabBar.tabTo("costumes"); + this.ide.spriteEditor.paintNew(); +}; + CorralStageMorph.prototype.fixLayout = function () { this.header.setPosition(this.topLeft()); this.header.setExtent(new Point(this.width(), 40)); @@ -13814,6 +13721,9 @@ CorralStageMorph.prototype.fixLayout = function () { this.backdrops.setCenter(this.center()); this.backdrops.setTop(this.thumbnail.bottom() + 10); + + this.newBackdropFlyout.setCenter(this.center()); + this.newBackdropFlyout.setBottom(this.bottom() - 5); }; CorralStageMorph.prototype.refresh = function () { @@ -13941,3 +13851,129 @@ CorralStageMorph.prototype.copySound = function (sound) { var dup = sound.copy(); this.stage.addSound(dup.audio, dup.name); }; + + + +// ScratchFlyoutMorph + +// I provide a easy interface for the sprite/stage flyout in the IDE_Morph's corral. + +// ScratchFlyoutMorph inherits from Morph: + +ScratchFlyoutMorph.prototype = new Morph(); +ScratchFlyoutMorph.prototype.constructor = ScratchFlyoutMorph; +ScratchFlyoutMorph.uber = Morph.prototype; + +// ScratchFlyoutMorph instance creation + +function ScratchFlyoutMorph(target, action, icon, accent) { + this.init(target, action, icon, accent); +} + +ScratchFlyoutMorph.prototype.init = function (target, action, icon, accent) { + ScratchFlyoutMorph.uber.init.call(this); + + this.target = target; + this.action = action; + this.icon = icon; + this.accent = accent; + this.items = []; + + this.color = CLEAR; +} + +// ScratchFlyoutMorph item management: + +ScratchFlyoutMorph.prototype.addItem = function (action, icon) { + this.items.push([action, icon]); +} + +// ScratchFlyoutMorph building: + +ScratchFlyoutMorph.prototype.build = function() { + let myself = this; + + this.bounds.setExtent(new Point(52, 52 + 36 * this.items.length)); + let y = this.bottom() - 52; + + if (this.items.length > 0) { + let padding = new Morph(); + padding.color = this.accent; + padding.setExtent(new Point(36, 36)); + padding.setCenter(this.center()); + padding.setBottom(this.bottom()-26); + padding.hide(); + this.add(padding); + } + + for (let item of this.items) { + let button = new TriggerMorph(this.target, item[0]); + button.label.destroy(); + button.label = new SymbolMorph( + item[1], + 20, + WHITE, + ); + button.add( + button.label, + ); + button.color = this.accent; + button.highlightColor = new Color(15, 189, 140); + button.setExtent(new Point(36, 36)); + button.setCenter(this.center()); + button.setBottom(y); + button.mouseClickLeft = () => { + TriggerMorph.prototype.mouseClickLeft.call(button); + + this.mouseLeave(); + } + + if (item == this.items[this.items.length-1]) { + button._render = button.render; + button.render = function (ctx) { + ctx.beginPath(); + ctx.roundRect(0, 0, this.width(), this.height(), [18, 18, 0, 0]); + ctx.closePath(); + ctx.clip(); + + this._render(ctx); + ctx.restore(); + }; + } + + y -= 36; + button.hide(); + this.add(button); + } + + this.button = new PushButtonMorph( + this.target, + this.action, + new SymbolMorph(this.icon, 28), + ); + this.button.color = this.accent; + this.button.corner = 26; + this.button.highlightColor = new Color(15, 189, 140); + this.button.outlineColor = this.accent.withAlpha(0.25); + this.button.outline = 4; + this.button.padding = 6; + this.button.fixLayout(); + this.button.setCenter(this.center()); + this.button.setBottom(this.bottom()); + this.button.mouseEnter = () => { + PushButtonMorph.prototype.mouseEnter.call(this.button); + + this.showFlyout(); + } + this.add(this.button); +} + +// ScratchFlyoutMorph flyout: + +ScratchFlyoutMorph.prototype.mouseLeave = function() { + this.children.filter(c => !(c instanceof PushButtonMorph)).forEach(c => c.hide()); +} + +ScratchFlyoutMorph.prototype.showFlyout = function() { + this.children.filter(c => !(c instanceof PushButtonMorph)).forEach(c => c.show()); +} \ No newline at end of file diff --git a/src/objects.js b/src/objects.js index dc04725b80..a108506839 100644 --- a/src/objects.js +++ b/src/objects.js @@ -12846,7 +12846,7 @@ StageMorph.prototype.positionTalkBubble = function () { return null; } bubble.show(); - bubble.keepWithin(this); + bubble.setPosition(this.position().add(bubble.border)) }; StageMorph.prototype.doThink = StageMorph.prototype.bubble; diff --git a/src/symbols.js b/src/symbols.js index 181c1b45b9..9fa6afc9b8 100644 --- a/src/symbols.js +++ b/src/symbols.js @@ -157,6 +157,7 @@ SymbolMorph.prototype.names = [ "speakers", "extension", "newSprite", + "newBackdrop", "commentClose", "penIcon", "blockSeperator", @@ -547,6 +548,9 @@ SymbolMorph.prototype.renderShape = function (ctx, aColor) { case "newSprite": this.renderSymbolNewSprite(ctx); break; + case "newBackdrop": + this.renderSymbolNewBackdrop(ctx); + break; case "penIcon": this.renderSymbolPenIcon(ctx); break; @@ -621,6 +625,8 @@ SymbolMorph.prototype.symbolWidth = function () { SymbolMorph.prototype.addSpriteSymbol = new Image(); SymbolMorph.prototype.addSpriteSymbol.src = "src/add-sprite.svg"; +SymbolMorph.prototype.addBackdropSymbol = new Image(); +SymbolMorph.prototype.addBackdropSymbol.src = "src/add-backdrop.svg"; SymbolMorph.prototype.flagSymbol = new Image(); SymbolMorph.prototype.flagSymbol.src = "src/flag.svg"; SymbolMorph.prototype.flagSymbolRed = new Image(); @@ -2778,6 +2784,10 @@ SymbolMorph.prototype.renderSymbolNewSprite = function (ctx) { this.drawImage(ctx, this.addSpriteSymbol); }; +SymbolMorph.prototype.renderSymbolNewBackdrop = function (ctx) { + this.drawImage(ctx, this.addBackdropSymbol); +}; + SymbolMorph.prototype.renderSymbolPenIcon = function (ctx) { this.drawImage(ctx, this.penIconSymbol); };