From ac8220bdaf2c6933155daa010fde3733e2ef9992 Mon Sep 17 00:00:00 2001
From: jmoenig <jens@moenig.org>
Date: Tue, 4 Aug 2020 13:03:54 +0200
Subject: [PATCH]  include background color when exporting (semi-) transparent
 script pics

---
 HISTORY.md    |  1 +
 snap.html     |  2 +-
 src/blocks.js | 36 +++++++++++++++++++++++++++++++++++-
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/HISTORY.md b/HISTORY.md
index 3d11df71..698c23b4 100755
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -4,6 +4,7 @@
 
 ### 2020-08-04
 * new dev version
+* blocks: include background color when exporting (semi-) transparent script pics 
 
 ## 6.1.2:
 * fixed variable scope for ASK/TELL
diff --git a/snap.html b/snap.html
index 4701a618..2a7ff3c1 100755
--- a/snap.html
+++ b/snap.html
@@ -7,7 +7,7 @@
         <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-27"></script>
-        <script src="src/blocks.js?version=2020-07-29"></script>
+        <script src="src/blocks.js?version=2020-08-04"></script>
         <script src="src/threads.js?version=2020-08-01"></script>
         <script src="src/objects.js?version=2020-07-26"></script>
         <script src="src/gui.js?version=2020-08-04"></script>
diff --git a/src/blocks.js b/src/blocks.js
index a5091ca4..5f7e8e5e 100644
--- a/src/blocks.js
+++ b/src/blocks.js
@@ -158,7 +158,7 @@ CustomCommandBlockMorph, SymbolMorph, ToggleButtonMorph, DialMorph*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.blocks = '2020-July-29';
+modules.blocks = '2020-August-04';
 
 var SyntaxElementMorph;
 var BlockMorph;
@@ -4043,6 +4043,10 @@ BlockMorph.prototype.thumbnail = function (scale, clipWidth) {
 
 BlockMorph.prototype.scriptPic = function () {
     // answer a canvas image that also includes comments
+    if (this.alpha < 1) {
+        return this.scriptPicOnBackground();
+    }
+
     var scr = this.fullImage(),
         fb = this.stackFullBounds(),
         pic = newCanvas(fb.extent()),
@@ -4058,6 +4062,36 @@ BlockMorph.prototype.scriptPic = function () {
     return pic;
 };
 
+BlockMorph.prototype.scriptPicOnBackground = function () {
+    // answer a canvas image that also includes comments
+    // note: this version is meant for (semi-) transparent blocks
+    // and lets the background shine through
+    var scr = this.fullImage(),
+        solid = this.doWithAlpha(1, () => this.fullImage()),
+        bg = newCanvas(this.fullBounds().extent()),
+        bgCtx = bg.getContext('2d'),
+        fb = this.stackFullBounds(),
+        pic = newCanvas(fb.extent()),
+        ctx = pic.getContext('2d');
+
+    bgCtx.fillColor = this.parent.getRenderColor().toString();
+    bgCtx.fillRect(0, 0, bg.width, bg.height);
+    bgCtx.globalCompositeOperation = 'destination-in';
+    bgCtx.drawImage(solid, 0, 0);
+    bgCtx.globalCompositeOperation = 'source-over';
+    bgCtx.drawImage(scr, 0, 0);
+
+    this.allComments().forEach(comment =>
+        ctx.drawImage(
+            comment.fullImage(),
+            comment.fullBounds().left() - fb.left(),
+            comment.top() - fb.top()
+        )
+    );
+    ctx.drawImage(bg, 0, 0);
+    return pic;
+};
+
 BlockMorph.prototype.clearAlpha = function () {
     this.forAllChildren(m => {
         if (m instanceof BlockMorph) {