added demo menu suppor for symbols

snap.html

@@ -7,7 +7,7 @@
         <script type="text/javascript" src="src/morphic.js?version=2020-02-10"></script>
 <!--
         <script type="text/javascript" src="src/widgets.js?version=2020-01-03"></script>
-        <script type="text/javascript" src="src/blocks.js?version=2020-01-06"></script>
+        <script type="text/javascript" src="src/blocks.js?version=2020-02-11"></script>
         <script type="text/javascript" src="src/threads.js?version=2019-12-19"></script>
         <script type="text/javascript" src="src/objects.js?version=2020-01-28"></script>
         <script type="text/javascript" src="src/gui.js?version=2020-01-28"></script>
@@ -16,7 +16,7 @@
         <script type="text/javascript" src="src/byob.js?version=2020-01-03"></script>
         <script type="text/javascript" src="src/tables.js?version=2020-01-03"></script>
 //-->
-        <script type="text/javascript" src="src/symbols.js?version=2020-01-03"></script>
+        <script type="text/javascript" src="src/symbols.js?version=2020-02-10"></script>
 <!--
         <script type="text/javascript" src="src/sketch.js?version=2019-10-09"></script>
         <script type="text/javascript" src="src/video.js?version=2019-06-27"></script>

src/morphic.js

@@ -1176,7 +1176,7 @@
 
 /*global window, HTMLCanvasElement, FileReader, Audio, FileList, Map*/
 
-var morphicVersion = '2020-February-10';
+var morphicVersion = '2020-February-12';
 var modules = {}; // keep track of additional loaded modules
 var useBlurredShadows = getBlurredShadowSupport(); // check for Chrome-bug
 
@@ -4333,6 +4333,12 @@ Morph.prototype.userMenu = function () {
     return null;
 };
 
+Morph.prototype.addToDemoMenu = function (aMorphOrMenuArray) {
+    // register a Morph or a Menu with Morphs with the World's demos menu
+    // a menu can be added in the form of a two-item array: [name, [morphs]]
+    WorldMorph.prototype.customMorphs.push(aMorphOrMenuArray);
+};
+
 // Morph menu actions
 
 Morph.prototype.setAlphaScaled = function (alpha) {
@@ -8087,8 +8093,8 @@ MenuMorph.prototype.popup = function (world, pos) {
 
 MenuMorph.prototype.scroll = function () {
     // private - move all items into a scroll frame
-     var scroller = new ScrollFrameMorph(),
+    var scroller = new ScrollFrameMorph(),
-          start = this.label ? 1 : 0,
+        start = this.label ? 1 : 0,
         first = this.children[start];
 
     scroller.setPosition(first.position());
@@ -9905,27 +9911,19 @@ MenuItemMorph.prototype.createLabelPart = function (source) {
     return this.createIcon(source);
 };
 
-MenuItemMorph.prototype.createIcon = function (source) { // +++ under construction
+MenuItemMorph.prototype.createIcon = function (source) {
     // source can be either a Morph or an HTMLCanvasElement
-    var icon = new Morph(),
+    var icon;
-        src;
+
-    // +++ to do: tell Morph to cache the image
+    if (source instanceof Morph) {
-    icon.isCachingImage = true; // +++ review
+        return source.fullCopy();
-    icon.cachedImage = source instanceof Morph ? source.fullImage() : source; // +++ review this
-    // adjust shadow dimensions
-    if (source instanceof Morph && source.getShadow()) {
-        src = icon.cachedImage;
-        icon.cachedImage = newCanvas(
-            source.fullBounds().extent().subtract(
-                this.shadowBlur * (useBlurredShadows ? 1 : 2)
-            )
-        );
-        icon.cachedImage.getContext('2d').drawImage(src, 0, 0); // +++ review
     }
-    icon.setExtent(new Point(
+    // assume a Canvas
-        icon.cachedImage.width,
+    icon = new Morph();
-        icon.cachedImage.height)
+    icon.isCachingImage = true;
-    );
+    icon.cachedImage = source; // should we copy the canvas?
+    icon.bounds.setWidth(source.width);
+    icon.bounds.setHeight(source.height);
     return icon;
 };
 
@@ -10045,13 +10043,27 @@ MenuItemMorph.prototype.delaySubmenu = function () {
 };
 
 MenuItemMorph.prototype.popUpSubmenu = function () {
-    var menu = this.parentThatIsA(MenuMorph);
+    var menu = this.parentThatIsA(MenuMorph),
+        world = this.world(),
+        scroller;
+
     if (!(this.action instanceof MenuMorph)) {return; }
     this.action.createItems();
     this.action.setPosition(this.topRight().subtract(new Point(0, 5)));
     this.action.addShadow(new Point(2, 2), 80);
     this.action.keepWithin(this.world());
     if (this.action.items.length < 1 && !this.action.title) {return; }
+
+    if (this.action.bottom() > world.bottom()) {
+        // scroll menu items if the menu is taller than the world
+        this.action.removeShadow();
+        scroller = this.action.scroll();
+        this.action.bounds.corner.y = world.bottom() - 2;
+        this.action.addShadow(new Point(2, 2), 80);
+        scroller.setHeight(world.bottom() - scroller.top() - 6);
+        scroller.adjustScrollBars(); // ?
+     }
+    
     menu.add(this.action);
     menu.submenu = this.action;
     menu.submenu.world = menu.world; // keyboard control
@@ -11571,6 +11583,10 @@ WorldMorph.prototype = new FrameMorph();
 WorldMorph.prototype.constructor = WorldMorph;
 WorldMorph.uber = FrameMorph.prototype;
 
+// WorldMorph global settings & examples
+
+WorldMorph.prototype.customMorphs = [];
+
 // WorldMorph instance creation:
 
 function WorldMorph(aCanvas, fillPage) {
@@ -11830,7 +11846,7 @@ WorldMorph.prototype.resetKeyboardHandler = function () {
     this.keyboardHandler.value = '';
     this.keyboardHandler.style.top = number2px(pos.y);
     this.keyboardHandler.style.left = number2px(pos.x);
-}
+};
 
 WorldMorph.prototype.initEventListeners = function () {
     var canvas = this.worldCanvas;
@@ -12238,10 +12254,18 @@ WorldMorph.prototype.userCreateMorph = function () {
         create(foo);
     });
     menu.addItem('pen', () => create(new PenMorph()));
-    if (this.customMorphs) {
+    if (this.customMorphs.length) {
         menu.addLine();
-        this.customMorphs().forEach(morph => {
+        this.customMorphs.forEach(item => {
-            menu.addItem(morph.toString(), () => create(morph));
+            var sub;
+            if (item instanceof Array) { // assume [name, [morphs]]
+                sub = new MenuMorph();
+                item[1].forEach(morph => sub.addItem(morph,
+                    () => create(morph)));
+                menu.addMenu(item[0], sub);
+            } else { // assume a Morph
+                menu.addItem(item.toString(), () => create(item));
+            }
         });
     }
     menu.popUpAtHand(this);

src/symbols.js

@@ -41,30 +41,10 @@
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.symbols = '2020-February-10';
+modules.symbols = '2020-February-12';
 
 var SymbolMorph;
 
-/*
-WorldMorph.prototype.customMorphs = function () {
-    // add examples to the world's demo menu
-    return [
-        'camera',
-        'location',
-        'footprints',
-        'keyboard',
-        'keyboardFilled',
-        'globe'
-    ].map(sym => new SymbolMorph(
-        sym,
-        50,
-        new Color(250, 250, 250),
-        new Point(-1, -1),
-        new Color(20, 20, 20)
-    ));
-};
-*/
-
 // SymbolMorph //////////////////////////////////////////////////////////
 
 /*
@@ -165,16 +145,26 @@ SymbolMorph.prototype.init = function (
     this.isProtectedLabel = false; // participate in zebraing
     this.isReadOnly = true;
     this.name = name || 'square';
-    this.size = size || ((size === 0) ? 0 : 50);
+    this.size = size || 50; // +++ ?? ((size === 0) ? 0 : 50);
     this.shadowOffset = shadowOffset || new Point(0, 0);
     this.shadowColor = shadowColor || null;
-
     SymbolMorph.uber.init.call(this);
     this.color = color || new Color(0, 0, 0);
     this.fixLayout();
     this.rerender();
 };
 
+// SymbolMorph string representation: 'a SymbolMorph: "square"'
+
+SymbolMorph.prototype.toString = function () {
+    return 'a ' +
+        (this.constructor.name ||
+            this.constructor.toString().split(' ')[1].split('(')[0]) +
+        ': "' +
+        this.name +
+        '"';
+};
+
 // SymbolMorph zebra coloring:
 
 SymbolMorph.prototype.setLabelColor = function (
@@ -1790,3 +1780,24 @@ SymbolMorph.prototype.renderSymbolGlobe = function (ctx, color) {
     ctx.arcTo(w, w / 2, w / 2, w, w * 0.66);
     ctx.stroke();
 };
+
+// register examples with the World demo menu
+
+(function () {
+    var bright = new Color(250, 250, 250),
+        dark = new Color(20, 20, 20),
+        offset = new Point(-1, -1);
+       
+    SymbolMorph.prototype.addToDemoMenu([
+        'Symbols',
+        SymbolMorph.prototype.names.map(sym =>
+            new SymbolMorph(
+                sym,
+                40,
+                bright,
+                offset,
+                dark
+            )
+        )
+    ]);
+})();