From cd4cd7e2d755bcf926ecdac91fa99d0c28cc2509 Mon Sep 17 00:00:00 2001 From: codingisfun2831 <124097137+codingisfun2831t@users.noreply.github.com> Date: Thu, 4 Jun 2026 23:21:28 -0400 Subject: [PATCH 1/5] keep the stage speech bubble slightly off the edge, the scratch-like rounding makes it weird --- src/objects.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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; From 97feea9389d51e793b877f570b67bf5c5dacdfb5 Mon Sep 17 00:00:00 2001 From: codingisfun2831 <124097137+codingisfun2831t@users.noreply.github.com> Date: Mon, 8 Jun 2026 16:07:40 -0400 Subject: [PATCH 2/5] refactor add sprite flyout to seperate class --- src/gui.js | 286 ++++++++++++++++++++++++----------------------------- 1 file changed, 131 insertions(+), 155 deletions(-) diff --git a/src/gui.js b/src/gui.js index 64e22f5265..aa18cbdd15 100644 --- a/src/gui.js +++ b/src/gui.js @@ -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 @@ -13941,3 +13793,127 @@ 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; + + 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 From 45568207f77d87ead7dccb8a39552e1c99e2ef5e Mon Sep 17 00:00:00 2001 From: codingisfun2831 <124097137+codingisfun2831t@users.noreply.github.com> Date: Mon, 8 Jun 2026 16:26:48 -0400 Subject: [PATCH 3/5] rename background to backdrops, and add flyout, with no items for now --- .../BACKDROPS.json | 0 .../atom_playground.jpg | Bin {Backgrounds => Backdrops}/baseball-field.png | Bin .../basketball-court1-a.png | Bin .../basketball-court1-b.png | Bin {Backgrounds => Backdrops}/beach_malibu.jpg | Bin {Backgrounds => Backdrops}/beach_rio.png | Bin {Backgrounds => Backdrops}/bedroom1.gif | Bin {Backgrounds => Backdrops}/bedroom2.gif | Bin .../bench_with_view.jpg | Bin {Backgrounds => Backdrops}/berkeley_mural.jpg | Bin {Backgrounds => Backdrops}/blue_sky.svg | 0 {Backgrounds => Backdrops}/blue_sky2.svg | 0 {Backgrounds => Backdrops}/blue_sky3.svg | 0 {Backgrounds => Backdrops}/boardwalk.jpg | Bin .../brick-wall-and-stairs.jpg | Bin {Backgrounds => Backdrops}/brick-wall1.jpg | Bin {Backgrounds => Backdrops}/brick-wall2.jpg | Bin {Backgrounds => Backdrops}/brick_wall1.jpg | Bin {Backgrounds => Backdrops}/brick_wall2.jpg | Bin .../building_at_mit.jpg | Bin {Backgrounds => Backdrops}/canyon.jpg | Bin {Backgrounds => Backdrops}/castle1.png | Bin {Backgrounds => Backdrops}/castle2.png | Bin {Backgrounds => Backdrops}/castle3.png | Bin {Backgrounds => Backdrops}/castle4.png | Bin {Backgrounds => Backdrops}/castle5.jpg | Bin {Backgrounds => Backdrops}/chalkboard.jpg | Bin {Backgrounds => Backdrops}/circles.svg | 0 .../city_with_water.jpg | Bin .../city_with_water2.jpg | Bin {Backgrounds => Backdrops}/clothing_store.jpg | Bin {Backgrounds => Backdrops}/desert.gif | Bin {Backgrounds => Backdrops}/doily.svg | 0 {Backgrounds => Backdrops}/driveway.jpg | Bin {Backgrounds => Backdrops}/flower_bed.jpg | Bin {Backgrounds => Backdrops}/flowers.gif | Bin {Backgrounds => Backdrops}/forest.jpg | Bin {Backgrounds => Backdrops}/garden_rock.jpg | Bin {Backgrounds => Backdrops}/gingerbread.png | Bin {Backgrounds => Backdrops}/goal1.png | Bin {Backgrounds => Backdrops}/goal2.png | Bin {Backgrounds => Backdrops}/graffiti.jpg | Bin {Backgrounds => Backdrops}/grand_canyon.jpg | Bin {Backgrounds => Backdrops}/gravel_desert.jpg | Bin {Backgrounds => Backdrops}/greek_theater.png | Bin {Backgrounds => Backdrops}/hall.jpg | Bin .../hallway_outdoors.jpg | Bin {Backgrounds => Backdrops}/hay_field.jpg | Bin {Backgrounds => Backdrops}/hearts1.svg | 0 {Backgrounds => Backdrops}/hearts2.svg | 0 {Backgrounds => Backdrops}/hill.jpg | Bin {Backgrounds => Backdrops}/houses.jpg | Bin {Backgrounds => Backdrops}/kitchen.jpg | Bin {Backgrounds => Backdrops}/lake.jpg | Bin {Backgrounds => Backdrops}/light.svg | 0 {Backgrounds => Backdrops}/metro1.png | Bin {Backgrounds => Backdrops}/moon.jpg | Bin {Backgrounds => Backdrops}/neon_tunnel.svg | 0 {Backgrounds => Backdrops}/night_city.gif | Bin .../night_city_with_street.gif | Bin {Backgrounds => Backdrops}/parking-ramp.jpg | Bin {Backgrounds => Backdrops}/party.svg | 0 {Backgrounds => Backdrops}/party_room.jpg | Bin {Backgrounds => Backdrops}/pathway.jpg | Bin {Backgrounds => Backdrops}/playing-field.png | Bin {Backgrounds => Backdrops}/pool.jpg | Bin {Backgrounds => Backdrops}/purple.svg | 0 {Backgrounds => Backdrops}/rays.svg | 190 +++++++++--------- {Backgrounds => Backdrops}/room1.jpg | Bin {Backgrounds => Backdrops}/room2.jpg | Bin {Backgrounds => Backdrops}/room3.jpg | Bin {Backgrounds => Backdrops}/route66.jpg | Bin {Backgrounds => Backdrops}/school1.gif | Bin {Backgrounds => Backdrops}/school2.jpg | Bin {Backgrounds => Backdrops}/slopes.svg | 18 +- {Backgrounds => Backdrops}/space.svg | 0 {Backgrounds => Backdrops}/sparkling.svg | 0 .../spotlight-stage.jpg | Bin .../spotlight-stage2.svg | 0 {Backgrounds => Backdrops}/stage1.png | Bin {Backgrounds => Backdrops}/stage2.png | Bin {Backgrounds => Backdrops}/stars.gif | Bin {Backgrounds => Backdrops}/stripes.svg | 0 .../the_movies_inside.jpg | Bin .../the_movies_outside.jpg | Bin {Backgrounds => Backdrops}/track.svg | 0 {Backgrounds => Backdrops}/train_tracks1.jpg | Bin {Backgrounds => Backdrops}/train_tracks2.gif | Bin {Backgrounds => Backdrops}/tree-gifts.png | Bin {Backgrounds => Backdrops}/tree.jpg | Bin {Backgrounds => Backdrops}/underwater1.png | Bin {Backgrounds => Backdrops}/underwater2.png | Bin {Backgrounds => Backdrops}/underwater3.gif | Bin {Backgrounds => Backdrops}/urban1.png | Bin {Backgrounds => Backdrops}/urban2.png | Bin {Backgrounds => Backdrops}/village.jpg | Bin .../water_and_rocks.jpg | Bin {Backgrounds => Backdrops}/wave.jpg | Bin {Backgrounds => Backdrops}/winter-lights.svg | 0 {Backgrounds => Backdrops}/winter.svg | 0 {Backgrounds => Backdrops}/woods.gif | Bin .../woods_and_bench.jpg | Bin {Backgrounds => Backdrops}/xy-grid.gif | Bin src/add-backdrop.svg | 21 ++ src/gui.js | 37 ++-- src/symbols.js | 10 + 107 files changed, 160 insertions(+), 116 deletions(-) rename Backgrounds/BACKGROUNDS.json => Backdrops/BACKDROPS.json (100%) rename {Backgrounds => Backdrops}/atom_playground.jpg (100%) rename {Backgrounds => Backdrops}/baseball-field.png (100%) rename {Backgrounds => Backdrops}/basketball-court1-a.png (100%) rename {Backgrounds => Backdrops}/basketball-court1-b.png (100%) rename {Backgrounds => Backdrops}/beach_malibu.jpg (100%) rename {Backgrounds => Backdrops}/beach_rio.png (100%) rename {Backgrounds => Backdrops}/bedroom1.gif (100%) rename {Backgrounds => Backdrops}/bedroom2.gif (100%) rename {Backgrounds => Backdrops}/bench_with_view.jpg (100%) rename {Backgrounds => Backdrops}/berkeley_mural.jpg (100%) rename {Backgrounds => Backdrops}/blue_sky.svg (100%) rename {Backgrounds => Backdrops}/blue_sky2.svg (100%) rename {Backgrounds => Backdrops}/blue_sky3.svg (100%) rename {Backgrounds => Backdrops}/boardwalk.jpg (100%) rename {Backgrounds => Backdrops}/brick-wall-and-stairs.jpg (100%) rename {Backgrounds => Backdrops}/brick-wall1.jpg (100%) rename {Backgrounds => Backdrops}/brick-wall2.jpg (100%) rename {Backgrounds => Backdrops}/brick_wall1.jpg (100%) rename {Backgrounds => Backdrops}/brick_wall2.jpg (100%) rename {Backgrounds => Backdrops}/building_at_mit.jpg (100%) rename {Backgrounds => Backdrops}/canyon.jpg (100%) rename {Backgrounds => Backdrops}/castle1.png (100%) rename {Backgrounds => Backdrops}/castle2.png (100%) rename {Backgrounds => Backdrops}/castle3.png (100%) rename {Backgrounds => Backdrops}/castle4.png (100%) rename {Backgrounds => Backdrops}/castle5.jpg (100%) rename {Backgrounds => Backdrops}/chalkboard.jpg (100%) rename {Backgrounds => Backdrops}/circles.svg (100%) rename {Backgrounds => Backdrops}/city_with_water.jpg (100%) rename {Backgrounds => Backdrops}/city_with_water2.jpg (100%) rename {Backgrounds => Backdrops}/clothing_store.jpg (100%) rename {Backgrounds => Backdrops}/desert.gif (100%) rename {Backgrounds => Backdrops}/doily.svg (100%) rename {Backgrounds => Backdrops}/driveway.jpg (100%) rename {Backgrounds => Backdrops}/flower_bed.jpg (100%) rename {Backgrounds => Backdrops}/flowers.gif (100%) rename {Backgrounds => Backdrops}/forest.jpg (100%) rename {Backgrounds => Backdrops}/garden_rock.jpg (100%) rename {Backgrounds => Backdrops}/gingerbread.png (100%) rename {Backgrounds => Backdrops}/goal1.png (100%) rename {Backgrounds => Backdrops}/goal2.png (100%) rename {Backgrounds => Backdrops}/graffiti.jpg (100%) rename {Backgrounds => Backdrops}/grand_canyon.jpg (100%) rename {Backgrounds => Backdrops}/gravel_desert.jpg (100%) rename {Backgrounds => Backdrops}/greek_theater.png (100%) rename {Backgrounds => Backdrops}/hall.jpg (100%) rename {Backgrounds => Backdrops}/hallway_outdoors.jpg (100%) rename {Backgrounds => Backdrops}/hay_field.jpg (100%) rename {Backgrounds => Backdrops}/hearts1.svg (100%) rename {Backgrounds => Backdrops}/hearts2.svg (100%) rename {Backgrounds => Backdrops}/hill.jpg (100%) rename {Backgrounds => Backdrops}/houses.jpg (100%) rename {Backgrounds => Backdrops}/kitchen.jpg (100%) rename {Backgrounds => Backdrops}/lake.jpg (100%) rename {Backgrounds => Backdrops}/light.svg (100%) rename {Backgrounds => Backdrops}/metro1.png (100%) rename {Backgrounds => Backdrops}/moon.jpg (100%) rename {Backgrounds => Backdrops}/neon_tunnel.svg (100%) rename {Backgrounds => Backdrops}/night_city.gif (100%) rename {Backgrounds => Backdrops}/night_city_with_street.gif (100%) rename {Backgrounds => Backdrops}/parking-ramp.jpg (100%) rename {Backgrounds => Backdrops}/party.svg (100%) rename {Backgrounds => Backdrops}/party_room.jpg (100%) rename {Backgrounds => Backdrops}/pathway.jpg (100%) rename {Backgrounds => Backdrops}/playing-field.png (100%) rename {Backgrounds => Backdrops}/pool.jpg (100%) rename {Backgrounds => Backdrops}/purple.svg (100%) rename {Backgrounds => Backdrops}/rays.svg (99%) rename {Backgrounds => Backdrops}/room1.jpg (100%) rename {Backgrounds => Backdrops}/room2.jpg (100%) rename {Backgrounds => Backdrops}/room3.jpg (100%) rename {Backgrounds => Backdrops}/route66.jpg (100%) rename {Backgrounds => Backdrops}/school1.gif (100%) rename {Backgrounds => Backdrops}/school2.jpg (100%) rename {Backgrounds => Backdrops}/slopes.svg (99%) rename {Backgrounds => Backdrops}/space.svg (100%) rename {Backgrounds => Backdrops}/sparkling.svg (100%) rename {Backgrounds => Backdrops}/spotlight-stage.jpg (100%) rename {Backgrounds => Backdrops}/spotlight-stage2.svg (100%) rename {Backgrounds => Backdrops}/stage1.png (100%) rename {Backgrounds => Backdrops}/stage2.png (100%) rename {Backgrounds => Backdrops}/stars.gif (100%) rename {Backgrounds => Backdrops}/stripes.svg (100%) rename {Backgrounds => Backdrops}/the_movies_inside.jpg (100%) rename {Backgrounds => Backdrops}/the_movies_outside.jpg (100%) rename {Backgrounds => Backdrops}/track.svg (100%) rename {Backgrounds => Backdrops}/train_tracks1.jpg (100%) rename {Backgrounds => Backdrops}/train_tracks2.gif (100%) rename {Backgrounds => Backdrops}/tree-gifts.png (100%) rename {Backgrounds => Backdrops}/tree.jpg (100%) rename {Backgrounds => Backdrops}/underwater1.png (100%) rename {Backgrounds => Backdrops}/underwater2.png (100%) rename {Backgrounds => Backdrops}/underwater3.gif (100%) rename {Backgrounds => Backdrops}/urban1.png (100%) rename {Backgrounds => Backdrops}/urban2.png (100%) rename {Backgrounds => Backdrops}/village.jpg (100%) rename {Backgrounds => Backdrops}/water_and_rocks.jpg (100%) rename {Backgrounds => Backdrops}/wave.jpg (100%) rename {Backgrounds => Backdrops}/winter-lights.svg (100%) rename {Backgrounds => Backdrops}/winter.svg (100%) rename {Backgrounds => Backdrops}/woods.gif (100%) rename {Backgrounds => Backdrops}/woods_and_bench.jpg (100%) rename {Backgrounds => Backdrops}/xy-grid.gif (100%) create mode 100644 src/add-backdrop.svg 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 aa18cbdd15..324e29436b 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 @@ -2466,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; @@ -2476,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 = @@ -4804,7 +4803,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); @@ -11962,7 +11961,7 @@ WardrobeMorph.prototype.updateList = function () { return; } ide.importMedia( - ide.currentSprite instanceof SpriteMorph ? "Costumes" : "Backgrounds", + ide.currentSprite instanceof SpriteMorph ? "Costumes" : "Backdrops", ); }, new SymbolMorph("cross", 15), @@ -13598,6 +13597,7 @@ CorralStageMorph.prototype.init = function (stage, ide) { this.label = null; this.thumbnail = null; this.backdrops = null; + this.newBackdropFlyout = null; this.buildContents(); @@ -13651,10 +13651,18 @@ 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.build(); + this.add(this.newBackdropFlyout); + this.createThumbnail(); this.updateBackdrops(); }; +CorralStageMorph.prototype.addNewBackdrop = function() { + this.ide.importMedia("Backdrops"); +}; + CorralStageMorph.prototype.fixLayout = function () { this.header.setPosition(this.topLeft()); this.header.setExtent(new Point(this.width(), 40)); @@ -13666,6 +13674,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 () { @@ -13838,13 +13849,15 @@ ScratchFlyoutMorph.prototype.build = function() { this.bounds.setExtent(new Point(52, 52 + 36 * this.items.length)); let y = this.bottom() - 52; - 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); + 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]); 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); }; From ed02900b29242c6d19f7ca3951960c211a4a2f44 Mon Sep 17 00:00:00 2001 From: codingisfun2831 <124097137+codingisfun2831t@users.noreply.github.com> Date: Mon, 8 Jun 2026 16:37:01 -0400 Subject: [PATCH 4/5] fix paintNewSprite --- src/gui.js | 35 +++++++++++++++++------------------ 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/src/gui.js b/src/gui.js index 324e29436b..d343f11b0a 100644 --- a/src/gui.js +++ b/src/gui.js @@ -3182,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) { @@ -3617,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(); @@ -3626,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 () { From cd8c96cbe24b378ebf3b65250f90de0885b4f0ff Mon Sep 17 00:00:00 2001 From: codingisfun2831 <124097137+codingisfun2831t@users.noreply.github.com> Date: Mon, 8 Jun 2026 17:02:42 -0400 Subject: [PATCH 5/5] add stage paint and fix stage's paintNew (check WardrobeMorph's paintNew for a little writeup about what I had to do) --- src/gui.js | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 50 insertions(+), 2 deletions(-) diff --git a/src/gui.js b/src/gui.js index d343f11b0a..2240e807e6 100644 --- a/src/gui.js +++ b/src/gui.js @@ -12165,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 @@ -12178,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); }; @@ -13651,6 +13687,7 @@ CorralStageMorph.prototype.buildContents = function () { 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); @@ -13662,6 +13699,17 @@ 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));