custom category prompter

HISTORY.md

@@ -29,7 +29,8 @@
     * Chinese, thanks, Simon!
 
 ### 2021-07-20
-* threads, estensions blocked xhr requests to from Snap! to s.b.e, thanks, Bernat!
+* threads, extensions: blocked xhr requests to from Snap! to s.b.e, thanks, Bernat!
+* widgets, scenes, gui: custom category prompter
 
 ### 2021-07-19
 * fixed #2863, thanks, Brian!

snap.html

@@ -15,12 +15,12 @@
         <meta name="msapplication-TileColor" content="#FFFFFF">
         <script src="src/morphic.js?version=2021-07-09"></script>
         <script src="src/symbols.js?version=2021-03-03"></script>
-        <script src="src/widgets.js?version=2021-07-05"></script>
+        <script src="src/widgets.js?version=2021-07-20"></script>
         <script src="src/blocks.js?version=2021-07-05"></script>
         <script src="src/threads.js?version=2021-07-20"></script>
         <script src="src/objects.js?version=2021-07-16"></script>
-        <script src="src/scenes.js?version=2021-07-06"></script>
-        <script src="src/gui.js?version=2021-07-16"></script>
+        <script src="src/scenes.js?version=2021-07-20"></script>
+        <script src="src/gui.js?version=2021-07-20"></script>
         <script src="src/paint.js?version=2021-07-05"></script>
         <script src="src/lists.js?version=2021-07-19"></script>
         <script src="src/byob.js?version=2021-07-16"></script>

src/gui.js

@@ -85,7 +85,7 @@ Animation, BoxMorph, BlockDialogMorph, RingMorph, Project, ZERO, BLACK*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.gui = '2021-July-16';
+modules.gui = '2021-July-20';
 
 // Declarations
 
@@ -4218,6 +4218,16 @@ IDE_Morph.prototype.projectMenu = function () {
     }
     menu.addPair('New scene', 'createNewScene');
     menu.addPair('Add scene...', 'addScene');
+
+    if (shiftClicked) {
+        menu.addItem(
+            'New blocks palette...',
+            'createNewCategory',
+            backup,
+            new Color(100, 0, 0)
+        );
+    }
+
     menu.addLine();
     menu.addItem(
         'Libraries...',
@@ -4868,6 +4878,25 @@ IDE_Morph.prototype.createNewScene = function () {
     this.isAddingScenes = setting;
 };
 
+IDE_Morph.prototype.createNewCategory = function () {
+    new DialogBoxMorph(
+        this,
+        cat => this.addPaletteCategory(cat.name, cat.color),
+        this
+    ).promptCategory(
+        "New Palette",
+        'Category name',
+        new Color(255, 255, 40),
+        this.world(),
+        null, // pic
+        null // msg
+    );
+};
+
+IDE_Morph.prototype.addPaletteCategory = function (name, color) {
+    this.scene.customCategories.set(name, color);
+};
+
 IDE_Morph.prototype.save = function () {
     // temporary hack - only allow exporting projects to disk
     // when running Snap! locally without a web server

src/scenes.js

@@ -53,7 +53,7 @@ normalizeCanvas, SnapSerializer*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.scenes = '2021-July-06';
+modules.scenes = '2021-July-20';
 
 // Projecct /////////////////////////////////////////////////////////
 
@@ -117,6 +117,7 @@ function Scene(aStageMorph) {
     this.globalVariables = aStageMorph ?
         aStageMorph.globalVariables() : new VariableFrame();
     this.stage = aStageMorph || new StageMorph(this.globalVariables);
+    this.customCategories = new Map(); // key: name, value: color
     this.hasUnsavedEdits = false;
     this.unifiedPalette = true;
 

src/widgets.js

@@ -79,15 +79,15 @@
 
 // Global settings /////////////////////////////////////////////////////
 
-/*global TriggerMorph, modules, Color, Point, BoxMorph, radians, ZERO,
-StringMorph, Morph, TextMorph, nop, detect, StringFieldMorph, BLACK, WHITE,
-HTMLCanvasElement, fontHeight, SymbolMorph, localize, SpeechBubbleMorph,
-ArrowMorph, MenuMorph, isString, isNil, SliderMorph, MorphicPreferences,
-ScrollFrameMorph, MenuItemMorph, Note, useBlurredShadows*/
+/*global TriggerMorph, modules, Color, Point, BoxMorph, radians, ZERO, Note,
+StringMorph, Morph, TextMorph, nop, detect, StringFieldMorph, ColorPaletteMorph,
+HTMLCanvasElement, fontHeight, SymbolMorph, localize, SpeechBubbleMorph, isNil,
+ArrowMorph, MenuMorph, isString, SliderMorph, MorphicPreferences, BLACK, WHITE,
+ScrollFrameMorph, MenuItemMorph, useBlurredShadows, getDocumentPositionOf*/
 
 /*jshint esversion: 6*/
 
-modules.widgets = '2021-July-05';
+modules.widgets = '2021-July-20';
 
 var PushButtonMorph;
 var ToggleButtonMorph;
@@ -1889,6 +1889,125 @@ DialogBoxMorph.prototype.promptVector = function (
     this.popUp(world);
 };
 
+DialogBoxMorph.prototype.promptCategory = function (
+    title,
+    name,
+    color,
+    world,
+    pic,
+    msg
+) {
+    var row = new AlignmentMorph('row', 4),
+        field = new InputFieldMorph(name),
+        picker = new BoxMorph(2, 1),
+        inp = new AlignmentMorph('column', 2),
+        bdy = new AlignmentMorph('column', this.padding),
+        side;
+
+    function labelText(string) {
+        return new TextMorph(
+            localize(string),
+            10,
+            null, // style
+            false, // bold
+            null, // italic
+            null, // alignment
+            null, // width
+            null, // font name
+            MorphicPreferences.isFlat ? null : new Point(1, 1),
+            WHITE // shadowColor
+        );
+    }
+
+    side = field.height() * 0.8;
+    picker.setExtent(new Point(side, side));
+    picker.setColor(color);
+
+    picker.mouseClickLeft = () => {
+        var hand = world.hand,
+            posInDocument = getDocumentPositionOf(world.worldCanvas),
+            mouseMoveBak = hand.processMouseMove,
+            mouseDownBak = hand.processMouseDown,
+            mouseUpBak = hand.processMouseUp,
+            pal = new ColorPaletteMorph(null, new Point(160, 100));
+
+        world.add(pal);
+        pal.setPosition(picker.topRight().add(new Point(this.edge,0)));
+
+        hand.processMouseMove = (event) => {
+            var clr = world.getGlobalPixelColor(hand.position());
+            hand.setPosition(new Point(
+                event.pageX - posInDocument.x,
+                event.pageY - posInDocument.y
+            ));
+            if (!clr.a) {
+                // ignore transparent,
+                // needed for retina-display support
+                return;
+            }
+            picker.setColor(clr);
+        };
+
+        hand.processMouseDown = nop;
+
+        hand.processMouseUp = () => {
+            pal.destroy();
+            hand.processMouseMove = mouseMoveBak;
+            hand.processMouseDown = mouseDownBak;
+            hand.processMouseUp = mouseUpBak;
+        };
+    };
+
+    inp.alignment = 'left';
+    inp.setColor(this.color);
+    bdy.setColor(this.color);
+    row.setColor(this.color);
+
+    row.add(field);
+    row.add(picker);
+    inp.add(row);
+
+    if (msg) {
+        bdy.add(labelText(msg));
+    }
+
+    bdy.add(inp);
+
+    row.fixLayout();
+    field.fixLayout();
+    picker.fixLayout();
+    inp.fixLayout();
+    bdy.fixLayout();
+
+    this.labelString = title;
+    this.createLabel();
+    if (pic) {this.setPicture(pic); }
+
+    this.addBody(bdy);
+
+    this.addButton('ok', 'OK');
+
+    this.addButton('cancel', 'Cancel');
+    this.fixLayout();
+
+    this.edit = function () {
+        field.edit();
+    };
+
+    this.getInput = function () {
+        return {
+            name: field.getValue(),
+            color: picker.color.copy()
+        };
+    };
+
+    if (!this.key) {
+        this.key = 'category' + title;
+    }
+
+    this.popUp(world);
+};
+
 DialogBoxMorph.prototype.promptCredentials = function (
     title,
     purpose,