pxt-core 7.5.8 → 7.5.9

package/built/pxtblocks.js

@@ -454,7 +454,7 @@ var pxt;
                                     const call = e.stdCallTable[b.type];
                                     if (call.attrs.shim === "ENUM_GET" || call.attrs.shim === "KIND_GET")
                                         return;
-                                    visibleParams(call, countOptionals(b)).forEach((p, i) => {
+                                    visibleParams(call, countOptionals(b, call)).forEach((p, i) => {
                                         const isInstance = call.isExtensionMethod && i === 0;
                                         if (p.definitionName && !b.getFieldValue(p.definitionName)) {
                                             let i = b.inputList.find((i) => i.name == p.definitionName);
@@ -922,7 +922,7 @@ var pxt;
                         let call = e.stdCallTable[b.type];
                         if (call) {
                             if (call.imageLiteral)
-                                expr = compileImage(e, b, call.imageLiteral, call.imageLiteralColumns, call.imageLiteralRows, call.namespace, call.f, visibleParams(call, countOptionals(b)).map(ar => compileArgument(e, b, ar, comments)));
+                                expr = compileImage(e, b, call.imageLiteral, call.imageLiteralColumns, call.imageLiteralRows, call.namespace, call.f, visibleParams(call, countOptionals(b, call)).map(ar => compileArgument(e, b, ar, comments)));
                             else
                                 expr = compileStdCall(e, b, call, comments);
                         }
@@ -1135,12 +1135,12 @@ var pxt;
             return blocks_1.mkStmt(blocks_1.mkInfix(ref, "+=", expr));
         }
         function eventArgs(call, b) {
-            return visibleParams(call, countOptionals(b)).filter(ar => !!ar.definitionName);
+            return visibleParams(call, countOptionals(b, call)).filter(ar => !!ar.definitionName);
         }
         function compileCall(e, b, comments) {
             const call = e.stdCallTable[b.type];
             if (call.imageLiteral)
-                return blocks_1.mkStmt(compileImage(e, b, call.imageLiteral, call.imageLiteralColumns, call.imageLiteralRows, call.namespace, call.f, visibleParams(call, countOptionals(b)).map(ar => compileArgument(e, b, ar, comments))));
+                return blocks_1.mkStmt(compileImage(e, b, call.imageLiteral, call.imageLiteralColumns, call.imageLiteralRows, call.namespace, call.f, visibleParams(call, countOptionals(b, call)).map(ar => compileArgument(e, b, ar, comments))));
             else if (call.hasHandler)
                 return compileEvent(e, b, call, eventArgs(call, b), call.namespace, comments);
             else
@@ -1219,7 +1219,7 @@ var pxt;
                 return blocks_1.H.mkPropertyAccess(b.getFieldValue("MEMBER"), blocks_1.mkText(info.name));
             }
             else {
-                args = visibleParams(func, countOptionals(b)).map((p, i) => compileArgument(e, b, p, comments, func.isExtensionMethod && i === 0 && !func.isExpression));
+                args = visibleParams(func, countOptionals(b, func)).map((p, i) => compileArgument(e, b, p, comments, func.isExtensionMethod && i === 0 && !func.isExpression));
             }
             let callNamespace = func.namespace;
             let callName = func.f;
@@ -1873,7 +1873,14 @@ var pxt;
             }
             return blocks_1.mkStmt(blocks_1.mkText("let " + v.escapedName + tp + " = "), defl);
         }
-        function countOptionals(b) {
+        function countOptionals(b, func) {
+            if (func.attrs.compileHiddenArguments) {
+                return func.comp.parameters.reduce((prev, block) => {
+                    if (block.isOptional)
+                        prev++;
+                    return prev;
+                }, 0);
+            }
             if (b.mutationToDom) {
                 const el = b.mutationToDom();
                 if (el.hasAttribute("_expanded")) {
@@ -2392,6 +2399,7 @@ var pxt;
             registerFieldEditor('protractor', pxtblockly.FieldProtractor);
             registerFieldEditor('position', pxtblockly.FieldPosition);
             registerFieldEditor('melody', pxtblockly.FieldCustomMelody);
+            registerFieldEditor('soundeffect', pxtblockly.FieldSoundEffect);
         }
         blocks.initFieldEditors = initFieldEditors;
         function registerFieldEditor(selector, field, validator) {
@@ -7304,18 +7312,21 @@ var pxt;
             // by BlocklyLoader. The number makes it an invalid JS identifier
             const buttonAddName = "0_add_button";
             const buttonRemName = "0_rem_button";
+            const buttonAddRemName = "0_add_rem_button";
             const numVisibleAttr = "_expanded";
             const inputInitAttr = "_input_init";
             const optionNames = def.parameters.map(p => p.name);
             const totalOptions = def.parameters.length;
             const buttonDelta = toggle ? totalOptions : 1;
+            const variableInlineInputs = info.blocksById[b.type].attributes.inlineInputMode === "variable";
+            const compileHiddenArguments = info.blocksById[b.type].attributes.compileHiddenArguments;
             const state = new MutationState(b);
             state.setEventsEnabled(false);
             state.setValue(numVisibleAttr, 0);
             state.setValue(inputInitAttr, false);
             state.setEventsEnabled(true);
             Blockly.Extensions.apply('inline-svgs', b, false);
-            addPlusButton();
+            let updatingInputs = false;
             appendMutation(b, {
                 mutationToDom: (el) => {
                     // The reason we store the inputsInitialized variable separately from visibleOptions
@@ -7330,8 +7341,8 @@ var pxt;
                     state.setEventsEnabled(false);
                     if (saved.hasAttribute(inputInitAttr) && saved.getAttribute(inputInitAttr) == "true" && !state.getBoolean(inputInitAttr)) {
                         state.setValue(inputInitAttr, true);
-                        initOptionalInputs();
                     }
+                    initOptionalInputs();
                     if (saved.hasAttribute(numVisibleAttr)) {
                         const val = parseInt(saved.getAttribute(numVisibleAttr));
                         if (!isNaN(val)) {
@@ -7342,6 +7353,7 @@ var pxt;
                                 }
                                 else {
                                     state.setValue(numVisibleAttr, addDelta(delta));
+                                    updateButtons();
                                 }
                             }
                             else {
@@ -7352,14 +7364,29 @@ var pxt;
                     state.setEventsEnabled(true);
                 }
             });
-            // Blockly only lets you hide an input once it is rendered, so we can't
-            // hide the inputs in init() or domToMutation(). This will get executed after
-            // the block is rendered
-            setTimeout(() => {
-                if (b.rendered && !b.workspace.isDragging()) {
-                    updateShape(0, undefined, true);
+            initOptionalInputs();
+            if (compileHiddenArguments) {
+                // Make sure all inputs have shadow blocks attached
+                let optIndex = 0;
+                for (let i = 0; i < b.inputList.length; i++) {
+                    const input = b.inputList[i];
+                    if (pxt.Util.startsWith(input.name, blocks.optionalInputWithFieldPrefix) || optionNames.indexOf(input.name) !== -1) {
+                        if (input.connection && !input.connection.isConnected() && !b.isInsertionMarker()) {
+                            const param = comp.definitionNameToParam[def.parameters[optIndex].name];
+                            attachShadowBlock(input, param);
+                        }
+                        ++optIndex;
+                    }
                 }
-            }, 1);
+            }
+            b.render = (opt_bubble) => {
+                if (updatingInputs)
+                    return;
+                updatingInputs = true;
+                updateShape(0, undefined, true);
+                updatingInputs = false;
+                Blockly.BlockSvg.prototype.render.call(b, opt_bubble);
+            };
             // Set skipRender to true if the block is still initializing. Otherwise
             // the inputs will render before their shadow blocks are created and
             // leave behind annoying artifacts
@@ -7389,25 +7416,14 @@ var pxt;
                         setInputVisible(input, visible);
                         if (visible && input.connection && !input.connection.isConnected() && !b.isInsertionMarker()) {
                             const param = comp.definitionNameToParam[def.parameters[optIndex].name];
-                            let shadow = blocks.createShadowValue(info, param);
-                            if (shadow.tagName.toLowerCase() === "value") {
-                                // Unwrap the block
-                                shadow = shadow.firstElementChild;
-                            }
-                            Blockly.Events.disable();
-                            try {
-                                const nb = Blockly.Xml.domToBlock(shadow, b.workspace);
-                                if (nb) {
-                                    input.connection.connect(nb.outputConnection);
-                                }
-                            }
-                            catch (e) { }
-                            Blockly.Events.enable();
+                            attachShadowBlock(input, param);
                         }
                         ++optIndex;
                     }
                 }
                 updateButtons();
+                if (variableInlineInputs)
+                    b.setInputsInline(visibleOptions < 4);
                 if (!skipRender)
                     b.render();
             }
@@ -7416,31 +7432,32 @@ var pxt;
                     .appendField(new Blockly.FieldImage(uri, 24, 24, alt, () => updateShape(delta), false));
             }
             function updateButtons() {
+                if (updatingInputs)
+                    return;
                 const visibleOptions = state.getNumber(numVisibleAttr);
                 const showPlus = visibleOptions !== totalOptions;
                 const showMinus = visibleOptions !== 0;
-                const hasMinus = !!b.getInput(buttonRemName);
-                const hasPlus = !!b.getInput(buttonAddName);
-                if (!showPlus) {
+                if (b.inputList.some(i => i.name === buttonAddName))
                     b.removeInput(buttonAddName, true);
-                }
-                if (!showMinus) {
+                if (b.inputList.some(i => i.name === buttonRemName))
                     b.removeInput(buttonRemName, true);
+                if (b.inputList.some(i => i.name === buttonAddRemName))
+                    b.removeInput(buttonAddRemName, true);
+                if (showPlus && showMinus) {
+                    addPlusAndMinusButtons();
                 }
-                if (showMinus && !hasMinus) {
-                    addMinusButton();
+                else if (showPlus) {
+                    addPlusButton();
                 }
-                if (showPlus) {
-                    // make sure plus button is last in line.
-                    if (hasPlus && b.inputList.findIndex(el => el.name === buttonAddName) !== b.inputList.length - 1) {
-                        b.removeInput(buttonAddName, true);
-                        addPlusButton();
-                    }
-                    else if (!hasPlus) {
-                        addPlusButton();
-                    }
+                else if (showMinus) {
+                    addMinusButton();
                 }
             }
+            function addPlusAndMinusButtons() {
+                b.appendDummyInput(buttonAddRemName)
+                    .appendField(new Blockly.FieldImage(b.REMOVE_IMAGE_DATAURI, 24, 24, lf("Hide optional arguments"), () => updateShape(-1 * buttonDelta), false))
+                    .appendField(new Blockly.FieldImage(b.ADD_IMAGE_DATAURI, 24, 24, lf("Reveal optional arguments"), () => updateShape(buttonDelta), false));
+            }
             function addPlusButton() {
                 addButton(buttonAddName, b.ADD_IMAGE_DATAURI, lf("Reveal optional arguments"), buttonDelta);
             }
@@ -7457,12 +7474,23 @@ var pxt;
             }
             function setInputVisible(input, visible) {
                 // If the block isn't rendered, Blockly will crash
-                if (b.rendered) {
-                    let renderList = input.setVisible(visible);
-                    renderList.forEach((block) => {
-                        block.render();
-                    });
+                input.setVisible(visible);
+            }
+            function attachShadowBlock(input, param) {
+                let shadow = blocks.createShadowValue(info, param);
+                if (shadow.tagName.toLowerCase() === "value") {
+                    // Unwrap the block
+                    shadow = shadow.firstElementChild;
+                }
+                Blockly.Events.disable();
+                try {
+                    const nb = Blockly.Xml.domToBlock(shadow, b.workspace);
+                    if (nb) {
+                        input.connection.connect(nb.outputConnection);
+                    }
                 }
+                catch (e) { }
+                Blockly.Events.enable();
             }
         }
         blocks.initExpandableBlock = initExpandableBlock;
@@ -7802,6 +7830,17 @@ var pxtblockly;
             this.loaded = true;
             this.valueText = this.onValueChanged(this.valueText);
         }
+        getAnchorDimensions() {
+            const boundingBox = this.getScaledBBox();
+            if (this.sourceBlock_.RTL) {
+                boundingBox.right += Blockly.FieldDropdown.CHECKMARK_OVERHANG;
+            }
+            else {
+                boundingBox.left -= Blockly.FieldDropdown.CHECKMARK_OVERHANG;
+            }
+            return boundingBox;
+        }
+        ;
         isInitialized() {
             return !!this.fieldGroup_;
         }
@@ -7811,6 +7850,23 @@ var pxtblockly;
         setBlockData(value) {
             pxt.blocks.setBlockDataForField(this.sourceBlock_, this.name, value);
         }
+        getSiblingBlock(inputName, useGrandparent = false) {
+            const block = useGrandparent ? this.sourceBlock_.parentBlock_ : this.sourceBlock_;
+            if (!block || !block.inputList)
+                return undefined;
+            for (const input of block.inputList) {
+                if (input.name === inputName) {
+                    return input.connection.targetBlock();
+                }
+            }
+            return undefined;
+        }
+        getSiblingField(fieldName, useGrandparent = false) {
+            const block = useGrandparent ? this.sourceBlock_.parentBlock_ : this.sourceBlock_;
+            if (!block)
+                return undefined;
+            return block.getField(fieldName);
+        }
     }
     pxtblockly.FieldBase = FieldBase;
 })(pxtblockly || (pxtblockly = {}));
@@ -11513,6 +11569,311 @@ var pxtblockly;
     }
     pxtblockly.FieldProtractor = FieldProtractor;
 })(pxtblockly || (pxtblockly = {}));
+/// <reference path="../../built/pxtlib.d.ts" />
+/// <reference path="./field_base.ts" />
+var pxtblockly;
+(function (pxtblockly) {
+    var svg = pxt.svgUtil;
+    const MUSIC_ICON_WIDTH = 20;
+    const TOTAL_WIDTH = 160;
+    const TOTAL_HEIGHT = 40;
+    const X_PADDING = 5;
+    const Y_PADDING = 4;
+    const PREVIEW_WIDTH = TOTAL_WIDTH - X_PADDING * 5 - MUSIC_ICON_WIDTH;
+    class FieldSoundEffect extends pxtblockly.FieldBase {
+        onInit() {
+            if (!this.options)
+                this.options = {};
+            if (!this.options.durationInputName)
+                this.options.durationInputName = "duration";
+            if (!this.options.startFrequencyInputName)
+                this.options.startFrequencyInputName = "startFrequency";
+            if (!this.options.endFrequencyInputName)
+                this.options.endFrequencyInputName = "endFrequency";
+            if (!this.options.startVolumeInputName)
+                this.options.startVolumeInputName = "startVolume";
+            if (!this.options.endVolumeInputName)
+                this.options.endVolumeInputName = "endVolume";
+            if (!this.options.waveFieldName)
+                this.options.waveFieldName = "waveShape";
+            if (!this.options.interpolationFieldName)
+                this.options.interpolationFieldName = "interpolation";
+            if (!this.options.effectFieldName)
+                this.options.effectFieldName = "effect";
+            this.redrawPreview();
+        }
+        onDispose() {
+        }
+        onValueChanged(newValue) {
+            return newValue;
+        }
+        redrawPreview() {
+            if (!this.fieldGroup_)
+                return;
+            pxsim.U.clear(this.fieldGroup_);
+            const bg = new svg.Rect()
+                .at(X_PADDING, Y_PADDING)
+                .size(TOTAL_WIDTH, TOTAL_HEIGHT)
+                .setClass("blocklySpriteField")
+                .stroke("#fff", 1)
+                .corner(TOTAL_HEIGHT / 2);
+            const clipPathId = "preview-clip-" + pxt.U.guidGen();
+            const clip = new svg.ClipPath()
+                .id(clipPathId)
+                .clipPathUnits(false);
+            const clipRect = new svg.Rect()
+                .size(PREVIEW_WIDTH, TOTAL_HEIGHT)
+                .fill("#FFF")
+                .at(0, 0);
+            clip.appendChild(clipRect);
+            const path = new svg.Path()
+                .stroke("grey", 2)
+                .fill("none")
+                .setD(pxt.assets.renderSoundPath(this.readCurrentSound(), TOTAL_WIDTH - X_PADDING * 4 - MUSIC_ICON_WIDTH, TOTAL_HEIGHT - Y_PADDING * 2))
+                .clipPath("url('#" + clipPathId + "')");
+            const g = new svg.Group()
+                .translate(MUSIC_ICON_WIDTH + X_PADDING * 3, Y_PADDING + 3);
+            g.appendChild(clip);
+            g.appendChild(path);
+            const musicIcon = new svg.Text("\uf001")
+                .appendClass("melody-editor-field-icon")
+                .setAttribute("alignment-baseline", "middle")
+                .anchor("middle")
+                .at(X_PADDING * 2 + MUSIC_ICON_WIDTH / 2, TOTAL_HEIGHT / 2 + 4);
+            this.fieldGroup_.appendChild(bg.el);
+            this.fieldGroup_.appendChild(musicIcon.el);
+            this.fieldGroup_.appendChild(g.el);
+        }
+        showEditor_() {
+            const initialSound = this.readCurrentSound();
+            Blockly.Events.disable();
+            Blockly.WidgetDiv.show(this, this.sourceBlock_.RTL, () => {
+                fv.hide();
+                widgetDiv.classList.remove("sound-effect-editor-widget");
+                widgetDiv.style.transform = "";
+                widgetDiv.style.position = "";
+                widgetDiv.style.left = "";
+                widgetDiv.style.top = "";
+                widgetDiv.style.width = "";
+                widgetDiv.style.height = "";
+                widgetDiv.style.opacity = "";
+                widgetDiv.style.transition = "";
+                Blockly.Events.enable();
+                Blockly.Events.setGroup(true);
+                this.fireNumberInputUpdate(this.options.durationInputName, initialSound.duration);
+                this.fireNumberInputUpdate(this.options.startFrequencyInputName, initialSound.startFrequency);
+                this.fireNumberInputUpdate(this.options.endFrequencyInputName, initialSound.endFrequency);
+                this.fireNumberInputUpdate(this.options.startVolumeInputName, initialSound.startVolume);
+                this.fireNumberInputUpdate(this.options.endVolumeInputName, initialSound.endVolume);
+                this.fireFieldDropdownUpdate(this.options.waveFieldName, waveformMapping[initialSound.wave]);
+                this.fireFieldDropdownUpdate(this.options.interpolationFieldName, interpolationMapping[initialSound.interpolation]);
+                this.fireFieldDropdownUpdate(this.options.effectFieldName, effectMapping[initialSound.effect]);
+                Blockly.Events.setGroup(false);
+                if (this.mostRecentValue)
+                    this.setBlockData(JSON.stringify(this.mostRecentValue));
+            });
+            const widgetDiv = Blockly.WidgetDiv.DIV;
+            const opts = {
+                onClose: () => {
+                    fv.hide();
+                    Blockly.WidgetDiv.hideIfOwner(this);
+                },
+                onSoundChange: (newSound) => {
+                    this.mostRecentValue = newSound;
+                    this.updateSiblingBlocks(newSound);
+                    this.redrawPreview();
+                },
+                initialSound: initialSound
+            };
+            const fv = pxt.react.getFieldEditorView("soundeffect-editor", initialSound, opts, widgetDiv);
+            const block = this.sourceBlock_;
+            const bounds = block.getBoundingRectangle();
+            const coord = pxtblockly.workspaceToScreenCoordinates(block.workspace, new Blockly.utils.Coordinate(bounds.right, bounds.top));
+            const animationDistance = 20;
+            const left = coord.x + 20;
+            const top = coord.y - animationDistance;
+            widgetDiv.style.opacity = "0";
+            widgetDiv.classList.add("sound-effect-editor-widget");
+            widgetDiv.style.position = "absolute";
+            widgetDiv.style.left = left + "px";
+            widgetDiv.style.top = top + "px";
+            widgetDiv.style.width = "30rem";
+            widgetDiv.style.height = "40rem";
+            widgetDiv.style.display = "block";
+            widgetDiv.style.transition = "transform 0.25s ease 0s, opacity 0.25s ease 0s";
+            fv.onHide(() => {
+                // do nothing
+            });
+            fv.show();
+            const divBounds = widgetDiv.getBoundingClientRect();
+            const injectDivBounds = block.workspace.getInjectionDiv().getBoundingClientRect();
+            if (divBounds.height > injectDivBounds.height) {
+                widgetDiv.style.height = "";
+                widgetDiv.style.top = `calc(1rem - ${animationDistance}px)`;
+                widgetDiv.style.bottom = "1rem";
+            }
+            else {
+                if (divBounds.bottom > injectDivBounds.bottom || divBounds.top < injectDivBounds.top) {
+                    // This editor is pretty tall, so just center vertically on the inject div
+                    widgetDiv.style.top = (injectDivBounds.top + (injectDivBounds.height / 2) - (divBounds.height / 2)) - animationDistance + "px";
+                }
+            }
+            if (divBounds.width > injectDivBounds.width) {
+                widgetDiv.style.width = "";
+                widgetDiv.style.left = "1rem";
+                widgetDiv.style.right = "1rem";
+            }
+            else {
+                // Check to see if we are bleeding off the right side of the canvas
+                if (divBounds.left + divBounds.width >= injectDivBounds.right) {
+                    // If so, try and place to the left of the block instead of the right
+                    const blockLeft = pxtblockly.workspaceToScreenCoordinates(block.workspace, new Blockly.utils.Coordinate(bounds.left, bounds.top));
+                    const toolboxWidth = block.workspace.getToolbox().getWidth();
+                    const workspaceLeft = injectDivBounds.left + toolboxWidth;
+                    if (blockLeft.x - divBounds.width - 20 > workspaceLeft) {
+                        widgetDiv.style.left = (blockLeft.x - divBounds.width - 20) + "px";
+                    }
+                    else {
+                        // As a last resort, just center on the inject div
+                        widgetDiv.style.left = (workspaceLeft + ((injectDivBounds.width - toolboxWidth) / 2) - divBounds.width / 2) + "px";
+                    }
+                }
+            }
+            requestAnimationFrame(() => {
+                widgetDiv.style.opacity = "1";
+                widgetDiv.style.transform = `translateY(${animationDistance}px)`;
+            });
+        }
+        render_() {
+            super.render_();
+            this.size_.height = TOTAL_HEIGHT + Y_PADDING * 2;
+            this.size_.width = TOTAL_WIDTH;
+        }
+        updateSiblingBlocks(sound) {
+            this.setNumberInputValue(this.options.durationInputName, sound.duration);
+            this.setNumberInputValue(this.options.startFrequencyInputName, sound.startFrequency);
+            this.setNumberInputValue(this.options.endFrequencyInputName, sound.endFrequency);
+            this.setNumberInputValue(this.options.startVolumeInputName, sound.startVolume);
+            this.setNumberInputValue(this.options.endVolumeInputName, sound.endVolume);
+            this.setFieldDropdownValue(this.options.waveFieldName, waveformMapping[sound.wave]);
+            this.setFieldDropdownValue(this.options.interpolationFieldName, interpolationMapping[sound.interpolation]);
+            this.setFieldDropdownValue(this.options.effectFieldName, effectMapping[sound.effect]);
+        }
+        setNumberInputValue(name, value) {
+            const block = this.getSiblingBlock(name) || this.getSiblingBlock(name, true);
+            if (!block)
+                return;
+            if (block.type === "math_number" || block.type === "math_integer" || block.type === "math_whole_number") {
+                block.setFieldValue(Math.round(value), "NUM");
+            }
+            else if (block.type === "math_number_minmax") {
+                block.setFieldValue(Math.round(value), "SLIDER");
+            }
+        }
+        getNumberInputValue(name, defaultValue) {
+            const block = this.getSiblingBlock(name) || this.getSiblingBlock(name, true);
+            if (!block)
+                return defaultValue;
+            if (block.type === "math_number" || block.type === "math_integer" || block.type === "math_whole_number") {
+                return parseInt(block.getFieldValue("NUM") + "");
+            }
+            else if (block.type === "math_number_minmax") {
+                return parseInt(block.getFieldValue("SLIDER") + "");
+            }
+            return defaultValue;
+        }
+        fireNumberInputUpdate(name, oldValue) {
+            const block = this.getSiblingBlock(name) || this.getSiblingBlock(name, true);
+            if (!block)
+                return;
+            let fieldName;
+            if (block.type === "math_number" || block.type === "math_integer" || block.type === "math_whole_number") {
+                fieldName = "NUM";
+            }
+            else if (block.type === "math_number_minmax") {
+                fieldName = "SLIDER";
+            }
+            if (!fieldName)
+                return;
+            Blockly.Events.fire(new Blockly.Events.Change(block, "field", fieldName, oldValue, this.getNumberInputValue(name, oldValue)));
+        }
+        setFieldDropdownValue(name, value) {
+            const field = this.getSiblingField(name) || this.getSiblingField(name, true);
+            if (!field)
+                return;
+            field.setValue(value);
+        }
+        getFieldDropdownValue(name) {
+            const field = this.getSiblingField(name) || this.getSiblingField(name, true);
+            if (!field)
+                return undefined;
+            return field.getValue();
+        }
+        fireFieldDropdownUpdate(name, oldValue) {
+            const field = this.getSiblingField(name) || this.getSiblingField(name, true);
+            if (!field)
+                return;
+            Blockly.Events.fire(new Blockly.Events.Change(field.sourceBlock_, "field", field.name, oldValue, this.getFieldDropdownValue(name)));
+        }
+        readCurrentSound() {
+            const savedSound = this.readBlockDataSound();
+            return {
+                duration: this.getNumberInputValue(this.options.durationInputName, savedSound.duration),
+                startFrequency: this.getNumberInputValue(this.options.startFrequencyInputName, savedSound.startFrequency),
+                endFrequency: this.getNumberInputValue(this.options.endFrequencyInputName, savedSound.endFrequency),
+                startVolume: this.getNumberInputValue(this.options.startVolumeInputName, savedSound.startVolume),
+                endVolume: this.getNumberInputValue(this.options.endVolumeInputName, savedSound.endVolume),
+                wave: reverseLookup(waveformMapping, this.getFieldDropdownValue(this.options.waveFieldName)) || savedSound.wave,
+                interpolation: reverseLookup(interpolationMapping, this.getFieldDropdownValue(this.options.interpolationFieldName)) || savedSound.interpolation,
+                effect: reverseLookup(effectMapping, this.getFieldDropdownValue(this.options.effectFieldName)) || savedSound.effect,
+            };
+        }
+        // This stores the values of the fields in case a block (e.g. a variable) is placed in one
+        // of the inputs.
+        readBlockDataSound() {
+            const data = this.getBlockData();
+            let sound;
+            try {
+                sound = JSON.parse(data);
+            }
+            catch (e) {
+                sound = {
+                    duration: 1000,
+                    startFrequency: 100,
+                    endFrequency: 1800,
+                    startVolume: 1023,
+                    endVolume: 0,
+                    wave: "sine",
+                    interpolation: "linear",
+                    effect: "none"
+                };
+            }
+            return sound;
+        }
+    }
+    pxtblockly.FieldSoundEffect = FieldSoundEffect;
+    const waveformMapping = {
+        "sine": "WaveShape.Sine",
+        "square": "WaveShape.Square",
+        "sawtooth": "WaveShape.Sawtooth",
+        "triangle": "WaveShape.Triangle",
+        "noise": "WaveShape.Noise",
+    };
+    const effectMapping = {
+        "none": "SoundExpressionEffect.None",
+        "vibrato": "SoundExpressionEffect.Vibrato",
+        "tremolo": "SoundExpressionEffect.Tremolo",
+        "warble": "SoundExpressionEffect.Warble",
+    };
+    const interpolationMapping = {
+        "linear": "InterpolationCurve.Linear",
+        "curve": "InterpolationCurve.Curve",
+        "logarithmic": "InterpolationCurve.Logarithmic",
+    };
+    function reverseLookup(map, value) {
+        return Object.keys(map).find(k => map[k] === value);
+    }
+})(pxtblockly || (pxtblockly = {}));
 /// <reference path="../../localtypings/blockly.d.ts"/>
 /// <reference path="../../built/pxtsim.d.ts"/>
 var pxtblockly;
@@ -12978,4 +13339,21 @@ var pxtblockly;
         }
     }
     pxtblockly.getTemporaryAssets = getTemporaryAssets;
+    function workspaceToScreenCoordinates(ws, wsCoordinates) {
+        // The position in pixels relative to the origin of the
+        // main workspace.
+        const scaledWS = wsCoordinates.scale(ws.scale);
+        // The offset in pixels between the main workspace's origin and the upper
+        // left corner of the injection div.
+        const mainOffsetPixels = ws.getOriginOffsetInPixels();
+        // The client coordinates offset by the injection div's upper left corner.
+        const clientOffsetPixels = Blockly.utils.Coordinate.sum(scaledWS, mainOffsetPixels);
+        const injectionDiv = ws.getInjectionDiv();
+        // Bounding rect coordinates are in client coordinates, meaning that they
+        // are in pixels relative to the upper left corner of the visible browser
+        // window.  These coordinates change when you scroll the browser window.
+        const boundingRect = injectionDiv.getBoundingClientRect();
+        return new Blockly.utils.Coordinate(clientOffsetPixels.x + boundingRect.left, clientOffsetPixels.y + boundingRect.top);
+    }
+    pxtblockly.workspaceToScreenCoordinates = workspaceToScreenCoordinates;
 })(pxtblockly || (pxtblockly = {}));

package/built/pxtlib.d.ts

@@ -1904,7 +1904,7 @@ declare namespace pxt.react {
         getPersistentData(): any;
         restorePersistentData(value: any): void;
     }
-    let getFieldEditorView: <U>(fieldEditorId: string, value: U, options: any) => FieldEditorView<U>;
+    let getFieldEditorView: <U>(fieldEditorId: string, value: U, options: any, container?: HTMLDivElement) => FieldEditorView<U>;
     let getTilemapProject: () => TilemapProject;
 }
 declare namespace pxt.semver {
@@ -2282,6 +2282,23 @@ declare namespace pxt.skillmap {
         saveUserStateAsync(user: U): Promise<void>;
     }
 }
+declare namespace pxt.assets {
+    type SoundWaveForm = "square" | "sine" | "triangle" | "noise" | "sawtooth";
+    type SoundInterpolation = "linear" | "curve" | "logarithmic";
+    type SoundEffect = "vibrato" | "tremolo" | "warble" | "none";
+    interface Sound {
+        wave: SoundWaveForm;
+        interpolation: SoundInterpolation;
+        effect: SoundEffect;
+        startFrequency: number;
+        endFrequency: number;
+        startVolume: number;
+        endVolume: number;
+        duration: number;
+    }
+    function renderSoundPath(sound: pxt.assets.Sound, width: number, height: number): string;
+    function renderWaveSnapshot(frequency: number, volume: number, wave: SoundWaveForm, width: number, height: number, timeBase: number): string;
+}
 declare namespace pxt.streams {
     interface JsonStreamField {
         name: string;
@@ -2469,6 +2486,7 @@ declare namespace pxt.svgUtil {
         constructor();
         update(): this;
         path(cb: (d: PathContext) => void): this;
+        setD(d: string): this;
     }
     class Image extends Drawable<SVGImageElement> {
         constructor();