"flat" design enhancements for blocks and watchers

5 files changed, 89 insertions, 29 deletions

diff --git a/blocks.js b/blocks.js
index 1a325a8..8f8a136 100644
--- a/blocks.js
+++ b/blocks.js
@@ -153,7 +153,7 @@ DialogBoxMorph, BlockInputFragmentMorph, PrototypeHatBlockMorph*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.blocks = '2013-June-18';
+modules.blocks = '2013-June-20';
 
 var SyntaxElementMorph;
 var BlockMorph;
@@ -1096,7 +1096,8 @@ SyntaxElementMorph.prototype.labelPart = function (spec) {
             part.size = this.fontSize * 1.2;
             part.color = new Color(255, 255, 255);
             part.shadowColor = this.color.darker(this.labelContrast);
-            part.shadowOffset = this.embossing;
+            part.shadowOffset = MorphicPreferences.isFlat ?
+                    new Point() : this.embossing;
             part.drawNew();
             break;
         case '%turtleOutline':
@@ -1105,7 +1106,8 @@ SyntaxElementMorph.prototype.labelPart = function (spec) {
             part.color = new Color(255, 255, 255);
             part.isProtectedLabel = true; // doesn't participate in zebraing
             part.shadowColor = this.color.darker(this.labelContrast);
-            part.shadowOffset = this.embossing;
+            part.shadowOffset = MorphicPreferences.isFlat ?
+                    new Point() : this.embossing;
             part.drawNew();
             break;
         case '%clockwise':
@@ -1114,7 +1116,8 @@ SyntaxElementMorph.prototype.labelPart = function (spec) {
             part.color = new Color(255, 255, 255);
             part.isProtectedLabel = false; // zebra colors
             part.shadowColor = this.color.darker(this.labelContrast);
-            part.shadowOffset = this.embossing;
+            part.shadowOffset = MorphicPreferences.isFlat ?
+                    new Point() : this.embossing;
             part.drawNew();
             break;
         case '%counterclockwise':
@@ -1123,7 +1126,8 @@ SyntaxElementMorph.prototype.labelPart = function (spec) {
             part.color = new Color(255, 255, 255);
             part.isProtectedLabel = false; // zebra colors
             part.shadowColor = this.color.darker(this.labelContrast);
-            part.shadowOffset = this.embossing;
+            part.shadowOffset = MorphicPreferences.isFlat ?
+                    new Point() : this.embossing;
             part.drawNew();
             break;
         case '%greenflag':
@@ -1132,7 +1136,8 @@ SyntaxElementMorph.prototype.labelPart = function (spec) {
             part.color = new Color(0, 200, 0);
             part.isProtectedLabel = true; // doesn't participate in zebraing
             part.shadowColor = this.color.darker(this.labelContrast);
-            part.shadowOffset = this.embossing;
+            part.shadowOffset = MorphicPreferences.isFlat ?
+                    new Point() : this.embossing;
             part.drawNew();
             break;
         case '%stop':
@@ -1141,7 +1146,8 @@ SyntaxElementMorph.prototype.labelPart = function (spec) {
             part.color = new Color(200, 0, 0);
             part.isProtectedLabel = true; // doesn't participate in zebraing
             part.shadowColor = this.color.darker(this.labelContrast);
-            part.shadowOffset = this.embossing;
+            part.shadowOffset = MorphicPreferences.isFlat ?
+                    new Point() : this.embossing;
             part.drawNew();
             break;
         default:
@@ -1155,7 +1161,9 @@ SyntaxElementMorph.prototype.labelPart = function (spec) {
         part.color = new Color(255, 255, 255);
         part.isBold = true;
         part.shadowColor = this.color.darker(this.labelContrast);
-        part.shadowOffset = this.embossing;
+        if (!MorphicPreferences.isFlat) {
+            part.shadowOffset = this.embossing;
+        }
         part.drawNew();
     }
     return part;
@@ -2502,14 +2510,14 @@ BlockMorph.prototype.fixLabelColor = function () {
             this.setLabelColor(
                 new Color(255, 255, 255),
                 clr.darker(this.labelContrast),
-                new Point(-1, -1)
+                MorphicPreferences.isFlat ? null : new Point(-1, -1)
             );
         } else {
             this.setLabelColor(
                 new Color(0, 0, 0),
                 clr.lighter(this.zebraContrast)
                     .lighter(this.labelContrast * 2),
-                new Point(1, 1)
+                MorphicPreferences.isFlat ? null : new Point(1, 1)
             );
         }
     }
@@ -2987,12 +2995,21 @@ CommandBlockMorph.prototype.drawNew = function () {
     this.drawBottom(context);
 
     // add 3D-Effect:
-    this.drawTopDentEdge(context, 0, 0);
-    this.drawBottomDentEdge(context, 0, this.height() - this.corner);
-    this.drawLeftEdge(context);
-    this.drawRightEdge(context);
-    this.drawTopLeftEdge(context);
-    this.drawBottomRightEdge(context);
+    if (!MorphicPreferences.isFlat) {
+        this.drawTopDentEdge(context, 0, 0);
+        this.drawBottomDentEdge(context, 0, this.height() - this.corner);
+        this.drawLeftEdge(context);
+        this.drawRightEdge(context);
+        this.drawTopLeftEdge(context);
+        this.drawBottomRightEdge(context);
+    } else {
+        nop();
+        /*
+        this.drawFlatBottomDentEdge(
+            context, 0, this.height() - this.corner
+        );
+        */
+    }
 
     // erase CommandSlots
     this.eraseHoles(context);
@@ -3225,6 +3242,16 @@ CommandBlockMorph.prototype.drawBottomDentEdge = function (context, x, y) {
     context.stroke();
 };
 
+CommandBlockMorph.prototype.drawFlatBottomDentEdge = function (context) {
+    if (!this.isStop()) {
+        context.fillStyle = this.color.darker(this.contrast / 2).toString();
+        context.beginPath();
+        this.drawDent(context, 0, this.height() - this.corner);
+        context.closePath();
+        context.fill();
+    }
+};
+
 CommandBlockMorph.prototype.drawLeftEdge = function (context) {
     var shift = this.edge * 0.5,
         gradient = context.createLinearGradient(0, 0, this.edge, 0);
@@ -3723,6 +3750,7 @@ ReporterBlockMorph.prototype.drawRounded = function (context) {
     context.closePath();
     context.fill();
 
+    if (MorphicPreferences.isFlat) {return; }
 
     // add 3D-Effect:
     context.lineWidth = this.edge;
@@ -3898,6 +3926,8 @@ ReporterBlockMorph.prototype.drawDiamond = function (context) {
     context.closePath();
     context.fill();
 
+    if (MorphicPreferences.isFlat) {return; }
+
     // add 3D-Effect:
     context.lineWidth = this.edge;
     context.lineJoin = 'round';
@@ -4879,6 +4909,8 @@ CommandSlotMorph.prototype.drawNew = function () {
     context.fillStyle = this.rfColor.toString();
     this.drawFlat(context);
 
+    if (MorphicPreferences.isFlat) {return; }
+
     // add 3D-Effect:
     this.drawEdges(context);
 };
@@ -5204,6 +5236,8 @@ RingCommandSlotMorph.prototype.drawNew = function () {
     // draw the 'flat' shape:
     this.drawFlat(context);
 
+    if (MorphicPreferences.isFlat) {return; }
+
     // add 3D-Effect:
     this.drawEdges(context);
 };
@@ -5385,6 +5419,8 @@ CSlotMorph.prototype.drawNew = function () {
     // draw the 'flat' shape:
     this.drawFlat(context);
 
+    if (MorphicPreferences.isFlat) {return; }
+
     // add 3D-Effect:
     this.drawTopRightEdge(context);
     this.drawTopEdge(context, this.inset, this.corner);
@@ -6382,7 +6418,9 @@ InputSlotMorph.prototype.drawNew = function () {
             this.width() - this.edge * 2,
             this.height() - this.edge * 2
         );
-        this.drawRectBorder(context);
+        if (!MorphicPreferences.isFlat) {
+            this.drawRectBorder(context);
+        }
     } else {
         r = (this.height() - (this.edge * 2)) / 2;
         context.fillStyle = this.color.toString();
@@ -6405,7 +6443,9 @@ InputSlotMorph.prototype.drawNew = function () {
         );
         context.closePath();
         context.fill();
-        this.drawRoundBorder(context);
+        if (!MorphicPreferences.isFlat) {
+            this.drawRoundBorder(context);
+        }
     }
 };
 
@@ -6775,6 +6815,8 @@ BooleanSlotMorph.prototype.drawDiamond = function (context) {
     context.closePath();
     context.fill();
 
+    if (MorphicPreferences.isFlat) {return; }
+
     // add 3D-Effect:
     context.lineWidth = this.edge;
     context.lineJoin = 'round';
@@ -7972,7 +8014,9 @@ ColorSlotMorph.prototype.drawNew = function () {
         this.width() - this.edge * 2,
         this.height() - this.edge * 2
     );
-    this.drawRectBorder(context);
+    if (!MorphicPreferences.isFlat) {
+        this.drawRectBorder(context);
+    }
 };
 
 ColorSlotMorph.prototype.drawRectBorder =
@@ -8672,6 +8716,7 @@ FunctionSlotMorph.prototype.drawRounded = function (context) {
     context.closePath();
     context.fill();
 
+    if (MorphicPreferences.isFlat) {return; }
 
     // add 3D-Effect:
     context.lineWidth = this.edge;
@@ -8835,6 +8880,8 @@ FunctionSlotMorph.prototype.drawDiamond = function (context) {
     context.closePath();
     context.fill();
 
+    if (MorphicPreferences.isFlat) {return; }
+
     // add 3D-Effect:
     context.lineWidth = this.edge;
     context.lineJoin = 'round';
@@ -9138,6 +9185,8 @@ RingReporterSlotMorph.prototype.drawRounded = function (context) {
     context.closePath();
     context.fill();
 
+    if (MorphicPreferences.isFlat) {return; }
+
     // add 3D-Effect:
     context.lineWidth = this.edge;
     context.lineJoin = 'round';
@@ -9309,6 +9358,8 @@ RingReporterSlotMorph.prototype.drawDiamond = function (context) {
     context.closePath();
     context.fill();
 
+    if (MorphicPreferences.isFlat) {return; }
+
     // add 3D-Effect:
     context.lineWidth = this.edge;
     context.lineJoin = 'round';
diff --git a/byob.js b/byob.js
index 72715ad..d8c0813 100644
--- a/byob.js
+++ b/byob.js
@@ -912,7 +912,9 @@ JaggedBlockMorph.prototype.drawNew = function () {
     context.fillStyle = this.cachedClr;
 
     this.drawBackground(context);
-    this.drawEdges(context);
+    if (!MorphicPreferences.isFlat) {
+        this.drawEdges(context);
+    }
 
     // erase holes
     this.eraseHoles(context);
diff --git a/history.txt b/history.txt
index c91366e..53de428 100755
--- a/history.txt
+++ b/history.txt
@@ -1745,3 +1745,4 @@ ______
 130620
 ------
 * GUI: add code mapping preference to persistent settings
+* Blocks, BYOB, Lists, Objects: "flat" design enhancements for blocks and watchers
diff --git a/lists.js b/lists.js
index ac85b25..e70c385 100644
--- a/lists.js
+++ b/lists.js
@@ -59,9 +59,9 @@
 /*global modules, contains, BoxMorph, WorldMorph, HandleMorph,
 PushButtonMorph, SyntaxElementMorph, Color, Point, WatcherMorph,
 StringMorph, SpriteMorph, ScrollFrameMorph, CellMorph, ArrowMorph,
-MenuMorph, snapEquals, Morph, isNil, localize*/
+MenuMorph, snapEquals, Morph, isNil, localize, MorphicPreferences*/
 
-modules.lists = '2013-April-23';
+modules.lists = '2013-June-20';
 
 var List;
 var ListWatcherMorph;
@@ -367,7 +367,7 @@ ListWatcherMorph.prototype.init = function (list, parentCell) {
         false,
         false,
         false,
-        new Point(1, 1),
+        MorphicPreferences.isFlat ? new Point() : new Point(1, 1),
         new Color(255, 255, 255)
     );
     this.label.mouseClickLeft = function () {myself.startIndexMenu(); };
@@ -525,7 +525,7 @@ ListWatcherMorph.prototype.update = function (anyway) {
                 false,
                 false,
                 false,
-                new Point(1, 1),
+                MorphicPreferences.isFlat ? new Point() : new Point(1, 1),
                 new Color(255, 255, 255)
             );
             cell = new CellMorph(
diff --git a/objects.js b/objects.js
index cdddb45..21e8e8f 100644
--- a/objects.js
+++ b/objects.js
@@ -123,7 +123,7 @@ PrototypeHatBlockMorph*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.objects = '2013-June-18';
+modules.objects = '2013-June-20';
 
 var SpriteMorph;
 var StageMorph;
@@ -5285,7 +5285,7 @@ CellMorph.prototype.drawNew = function () {
     );
     context.closePath();
     context.fill();
-    if (this.border > 0) {
+    if (this.border > 0 && !MorphicPreferences.isFlat) {
         context.lineWidth = this.border;
         context.strokeStyle = this.borderColor.toString();
         context.beginPath();
@@ -5297,7 +5297,9 @@ CellMorph.prototype.drawNew = function () {
         context.shadowOffsetY = this.border;
         context.shadowBlur = this.border;
         context.shadowColor = this.color.darker(80).toString();
-        this.drawShadow(context, this.edge, this.border / 2);
+        if (!MorphicPreferences.isFlat) {
+            this.drawShadow(context, this.edge, this.border / 2);
+        }
     }
 
     // position my contents
@@ -5582,7 +5584,7 @@ WatcherMorph.prototype.fixLayout = function () {
             true,
             false,
             false,
-            new Point(1, 1),
+            MorphicPreferences.isFlat ? new Point() : new Point(1, 1),
             new Color(255, 255, 255)
         );
         this.add(this.labelMorph);
@@ -5856,7 +5858,11 @@ WatcherMorph.prototype.drawNew = function () {
     context = this.image.getContext('2d');
     if ((this.edge === 0) && (this.border === 0)) {
         BoxMorph.uber.drawNew.call(this);
-        return null;
+        return;
+    }
+    if (MorphicPreferences.isFlat) {
+        WatcherMorph.uber.drawNew.call(this);
+        return;
     }
     gradient = context.createLinearGradient(0, 0, 0, this.height());
     gradient.addColorStop(0, this.color.lighter().toString());