tweaked block representations in widgets for fading

HISTORY.md

@@ -5,7 +5,8 @@
 ### 2020-07-24
 * gui: cleaned up block-fading pre-sets
 * updated German translation
-* tweaked IDE colors for block-fading
+* gui: tweaked IDE colors for block-fading
+* blocks, threads, byob, widgets: tweaked block representations in widgets for fading
 
 ### 2020-07-23
 * morphic: fixed mouseDown events for touch devices

snap.html

@@ -6,14 +6,14 @@
         <link rel="icon" href="src/favicon.ico">
         <script src="src/morphic.js?version=2020-07-23"></script>
         <script src="src/symbols.js?version=2020-07-21"></script>
-        <script src="src/widgets.js?version=2020-07-21"></script>
-        <script src="src/blocks.js?version=2020-07-23"></script>
-        <script src="src/threads.js?version=2020-07-22"></script>
+        <script src="src/widgets.js?version=2020-07-24"></script>
+        <script src="src/blocks.js?version=2020-07-24"></script>
+        <script src="src/threads.js?version=2020-07-24"></script>
         <script src="src/objects.js?version=2020-07-20"></script>
         <script src="src/gui.js?version=2020-07-24"></script>
         <script src="src/paint.js?version=2020-05-17"></script>
         <script src="src/lists.js?version=2020-07-01"></script>
-        <script src="src/byob.js?version=2020-07-01"></script>
+        <script src="src/byob.js?version=2020-07-24"></script>
         <script src="src/tables.js?version=2020-05-18"></script>
         <script src="src/sketch.js?version=2020-07-13"></script>
         <script src="src/video.js?version=2019-06-27"></script>

src/blocks.js

@@ -158,7 +158,7 @@ CustomCommandBlockMorph, SymbolMorph, ToggleButtonMorph, DialMorph*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.blocks = '2020-July-23';
+modules.blocks = '2020-July-24';
 
 var SyntaxElementMorph;
 var BlockMorph;
@@ -3481,7 +3481,6 @@ BlockMorph.prototype.showHelp = function () {
         if (comment) {
             block = def.blockInstance();
             block.refreshDefaults(def);
-            block.addShadow();
             comment = comment.fullCopy();
             comment.contents.parse();
             help = '';
@@ -3492,7 +3491,13 @@ BlockMorph.prototype.showHelp = function () {
                 'Help',
                 help.substr(1),
                 myself.world(),
-                block.fullImage()
+                block.doWithAlpha(
+                    1,
+                    () => {
+                        block.addShadow();
+                        return block.fullImage();
+                    }
+                )
             );
             return;
         }
@@ -4053,6 +4058,14 @@ BlockMorph.prototype.scriptPic = function () {
     return pic;
 };
 
+BlockMorph.prototype.clearAlpha = function () {
+    this.forAllChildren(m => {
+        if (m instanceof BlockMorph) {
+            delete m.alpha;
+        }
+    });
+};
+
 // BlockMorph drawing
 
 BlockMorph.prototype.render = function (ctx) {

src/byob.js

@@ -108,7 +108,7 @@ BooleanSlotMorph, XML_Serializer, SnapTranslator*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.byob = '2020-July-01';
+modules.byob = '2020-July-24';
 
 // Declarations
 
@@ -1228,7 +1228,6 @@ CustomCommandBlockMorph.prototype.deleteBlockDefinition = function () {
     method = this.isGlobal? this.definition
             : rcvr.getLocalMethod(this.blockSpec);
     block = method.blockInstance();
-    block.addShadow();
     new DialogBoxMorph(
         this,
         () => {
@@ -1264,7 +1263,13 @@ CustomCommandBlockMorph.prototype.deleteBlockDefinition = function () {
         'Delete Custom Block',
         localize('block deletion dialog text'), // long string lookup
         this.world(),
-        block.fullImage()
+        block.doWithAlpha(
+            1,
+            () => {
+                block.addShadow();
+                return block.fullImage();
+            }
+        )
     );
 };
 

src/threads.js

@@ -61,7 +61,7 @@ StageMorph, SpriteMorph, StagePrompterMorph, Note, modules, isString, copy, Map,
 isNil, WatcherMorph, List, ListWatcherMorph, alert, console, TableMorph, BLACK,
 TableFrameMorph, ColorSlotMorph, isSnapObject, newCanvas, Symbol, SVG_Costume*/
 
-modules.threads = '2020-July-22';
+modules.threads = '2020-July-24';
 
 var ThreadManager;
 var Process;
@@ -6114,7 +6114,13 @@ Context.prototype.image = function () {
             }
         }
         ring.embed(block, this.inputs);
-        return ring.doWithAlpha(1, () => ring.fullImage());
+        return ring.doWithAlpha(
+            1,
+            () => {
+                ring.clearAlpha();
+                return ring.fullImage();
+            }
+        );
     }
     if (this.expression instanceof Array) {
         block = this.expression[this.pc].fullCopy();

src/widgets.js

@@ -85,7 +85,7 @@ HTMLCanvasElement, fontHeight, SymbolMorph, localize, SpeechBubbleMorph,
 ArrowMorph, MenuMorph, isString, isNil, SliderMorph, MorphicPreferences,
 ScrollFrameMorph, MenuItemMorph, Note*/
 
-modules.widgets = '2020-July-21';
+modules.widgets = '2020-July-24';
 
 var PushButtonMorph;
 var ToggleButtonMorph;
@@ -1351,7 +1351,15 @@ ToggleElementMorph.prototype.init = function (
 // ToggleElementMorph drawing:
 
 ToggleElementMorph.prototype.render = function (ctx) {
-    var shading = !MorphicPreferences.isFlat || this.is3D;
+    var shading = !MorphicPreferences.isFlat || this.is3D,
+        shadow = () => {
+            if (shading) {
+                this.element.addShadow(
+                    this.shadowOffset,
+                    this.userState === 'normal' ? 0 : this.shadowAlpha
+                );
+            }
+        };
 
     this.color = this.element.color;
     this.element.removeShadow();
@@ -1366,13 +1374,22 @@ ToggleElementMorph.prototype.render = function (ctx) {
             this.element[this.builder](this.contrast);
         }
     }
-    if (shading) {
-        this.element.addShadow(
-            this.shadowOffset,
-            this.userState === 'normal' ? 0 : this.shadowAlpha
+    if (this.element.doWithAlpha) {
+        ctx.drawImage(
+            this.element.doWithAlpha(
+                1,
+                () => {
+                    shadow();
+                    return this.element.fullImage();
+                }
+            ),
+            0,
+            0
         );
+    } else {
+        shadow();
+        ctx.drawImage(this.element.fullImage(), 0, 0);
     }
-    ctx.drawImage(this.element.fullImage(), 0, 0);
 
     // reset element
     this.element.removeShadow();