pxt-core 8.4.2 → 8.4.3

package/built/pxtblockly.js

@@ -5963,6 +5963,7 @@ var pxt;
             registerFieldEditor('melody', pxtblockly.FieldCustomMelody);
             registerFieldEditor('soundeffect', pxtblockly.FieldSoundEffect);
             registerFieldEditor('autocomplete', pxtblockly.FieldAutoComplete);
+            registerFieldEditor('musiceditor', pxtblockly.FieldMusicEditor);
         }
         blocks.initFieldEditors = initFieldEditors;
         function registerFieldEditor(selector, field, validator) {
@@ -11584,50 +11585,159 @@ var pxtblockly;
                     const project = pxt.react.getTilemapProject();
                     pxt.sprite.addMissingTilemapTilesAndReferences(project, this.asset);
                     break;
+                case "song" /* pxt.AssetType.Song */:
+                    editorKind = "music-editor";
+                    params.temporaryAssets = pxtblockly.getTemporaryAssets(this.sourceBlock_.workspace, "song" /* pxt.AssetType.Song */);
+                    pxtblockly.setMelodyEditorOpen(this.sourceBlock_, true);
+                    break;
+            }
+            if (this.isFullscreen()) {
+                this.showEditorFullscreen(editorKind, params);
+            }
+            else {
+                this.showEditorInWidgetDiv(editorKind, params);
             }
+        }
+        showEditorFullscreen(editorKind, params) {
             const fv = pxt.react.getFieldEditorView(editorKind, this.asset, params);
             if (this.undoRedoState) {
                 fv.restorePersistentData(this.undoRedoState);
             }
             pxt.react.getTilemapProject().pushUndo();
             fv.onHide(() => {
-                var _a;
-                const result = fv.getResult();
-                const project = pxt.react.getTilemapProject();
-                if (result) {
-                    const old = this.getValue();
-                    if (pxt.assetEquals(this.asset, result))
-                        return;
-                    const oldId = isTemporaryAsset(this.asset) ? null : this.asset.id;
-                    let newId = isTemporaryAsset(result) ? null : result.id;
-                    if (!oldId && newId === this.sourceBlock_.id) {
-                        // The temporary assets we create just use the block id as the id; give it something
-                        // a little nicer
-                        result.id = project.generateNewID(result.type);
-                        newId = result.id;
+                this.onFieldEditorHide(fv);
+            });
+            fv.show();
+        }
+        showEditorInWidgetDiv(editorKind, params) {
+            let bbox;
+            // This is due to the changes in https://github.com/microsoft/pxt-blockly/pull/289
+            // which caused the widgetdiv to jump around if any fields underneath changed size
+            let widgetOwner = {
+                getScaledBBox: () => bbox
+            };
+            Blockly.WidgetDiv.show(widgetOwner, this.sourceBlock_.RTL, () => {
+                if (document.activeElement && document.activeElement.tagName === "INPUT")
+                    document.activeElement.blur();
+                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 = "";
+                widgetDiv.style.alignItems = "";
+                this.onFieldEditorHide(fv);
+            });
+            const widgetDiv = Blockly.WidgetDiv.DIV;
+            const fv = pxt.react.getFieldEditorView(editorKind, this.asset, params, 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 - 400;
+            const top = coord.y + 60 - 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 = "50rem";
+            widgetDiv.style.height = "34.25rem";
+            widgetDiv.style.display = "flex";
+            widgetDiv.style.alignItems = "center";
+            widgetDiv.style.transition = "transform 0.25s ease 0s, opacity 0.25s ease 0s";
+            widgetDiv.style.borderRadius = "";
+            fv.onHide(() => {
+                Blockly.WidgetDiv.hideIfOwner(widgetOwner);
+            });
+            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 = `calc(1rem + ${animationDistance}px)`;
+            }
+            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";
+                }
+            }
+            const toolboxWidth = block.workspace.getToolbox().getWidth();
+            const workspaceLeft = injectDivBounds.left + toolboxWidth;
+            if (divBounds.width > injectDivBounds.width - toolboxWidth) {
+                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));
+                    if (blockLeft.x - divBounds.width - 20 > workspaceLeft) {
+                        widgetDiv.style.left = (blockLeft.x - divBounds.width - 20) + "px";
                     }
-                    this.pendingEdit = true;
-                    if ((_a = result.meta) === null || _a === void 0 ? void 0 : _a.displayName)
-                        this.disposeOfTemporaryAsset();
-                    this.asset = result;
-                    const lastRevision = project.revision();
-                    this.onEditorClose(this.asset);
-                    this.updateAssetListener();
-                    this.updateAssetMeta();
-                    this.redrawPreview();
-                    this.undoRedoState = fv.getPersistentData();
-                    if (this.sourceBlock_ && Blockly.Events.isEnabled()) {
-                        const event = new BlocklyTilemapChange(this.sourceBlock_, 'field', this.name, old, this.getValue(), lastRevision, project.revision());
-                        if (oldId !== newId) {
-                            event.oldAssetId = oldId;
-                            event.newAssetId = newId;
-                        }
-                        Blockly.Events.fire(event);
+                    else {
+                        // As a last resort, just center on the inject div
+                        widgetDiv.style.left = (workspaceLeft + ((injectDivBounds.width - toolboxWidth) / 2) - divBounds.width / 2) + "px";
                     }
-                    this.pendingEdit = false;
                 }
+                else if (divBounds.left < injectDivBounds.left) {
+                    widgetDiv.style.left = workspaceLeft + "px";
+                }
+            }
+            const finalDimensions = widgetDiv.getBoundingClientRect();
+            bbox = new Blockly.utils.Rect(finalDimensions.top, finalDimensions.bottom, finalDimensions.left, finalDimensions.right);
+            requestAnimationFrame(() => {
+                widgetDiv.style.opacity = "1";
+                widgetDiv.style.transform = `translateY(${animationDistance}px)`;
             });
-            fv.show();
+        }
+        onFieldEditorHide(fv) {
+            var _a;
+            const result = fv.getResult();
+            const project = pxt.react.getTilemapProject();
+            if (this.asset.type === "song" /* pxt.AssetType.Song */) {
+                pxtblockly.setMelodyEditorOpen(this.sourceBlock_, false);
+            }
+            if (result) {
+                const old = this.getValue();
+                if (pxt.assetEquals(this.asset, result))
+                    return;
+                const oldId = isTemporaryAsset(this.asset) ? null : this.asset.id;
+                let newId = isTemporaryAsset(result) ? null : result.id;
+                if (!oldId && newId === this.sourceBlock_.id) {
+                    // The temporary assets we create just use the block id as the id; give it something
+                    // a little nicer
+                    result.id = project.generateNewID(result.type);
+                    newId = result.id;
+                }
+                this.pendingEdit = true;
+                if ((_a = result.meta) === null || _a === void 0 ? void 0 : _a.displayName)
+                    this.disposeOfTemporaryAsset();
+                this.asset = result;
+                const lastRevision = project.revision();
+                this.onEditorClose(this.asset);
+                this.updateAssetListener();
+                this.updateAssetMeta();
+                this.redrawPreview();
+                this.undoRedoState = fv.getPersistentData();
+                if (this.sourceBlock_ && Blockly.Events.isEnabled()) {
+                    const event = new BlocklyTilemapChange(this.sourceBlock_, 'field', this.name, old, this.getValue(), lastRevision, project.revision());
+                    if (oldId !== newId) {
+                        event.oldAssetId = oldId;
+                        event.newAssetId = newId;
+                    }
+                    Blockly.Events.fire(event);
+                }
+                this.pendingEdit = false;
+            }
         }
         render_() {
             if (this.isGreyBlock && !this.textElement_) {
@@ -11725,12 +11835,17 @@ var pxtblockly;
                     case "tilemap" /* pxt.AssetType.Tilemap */:
                         dataURI = pxtblockly.tilemapToImageURI(this.asset.data, PREVIEW_WIDTH, this.lightMode);
                         break;
+                    case "song" /* pxt.AssetType.Song */:
+                        dataURI = pxtblockly.songToDataURI(this.asset.song, 60, 20, this.lightMode);
+                        break;
+                }
+                if (dataURI) {
+                    const img = new svg.Image()
+                        .src(dataURI)
+                        .at(X_PADDING + BG_PADDING, Y_PADDING + BG_PADDING)
+                        .size(PREVIEW_WIDTH, PREVIEW_WIDTH);
+                    this.fieldGroup_.appendChild(img.el);
                 }
-                const img = new svg.Image()
-                    .src(dataURI)
-                    .at(X_PADDING + BG_PADDING, Y_PADDING + BG_PADDING)
-                    .size(PREVIEW_WIDTH, PREVIEW_WIDTH);
-                this.fieldGroup_.appendChild(img.el);
             }
         }
         parseValueText(newText) {
@@ -11821,6 +11936,9 @@ var pxtblockly;
                 pxt.react.getTilemapProject().addChangeListener(this.asset, this.assetChangeListener);
             }
         }
+        isFullscreen() {
+            return true;
+        }
     }
     pxtblockly.FieldAssetEditor = FieldAssetEditor;
     function isTemporaryAsset(asset) {
@@ -13887,13 +14005,13 @@ var pxtblockly;
             this.prevString = this.getValue();
             // The webapp listens to this event and stops the simulator so that you don't get the melody
             // playing twice (once in the editor and once when the code runs in the sim)
-            Blockly.Events.fire(new Blockly.Events.Ui(this.sourceBlock_, "melody-editor", false, true));
+            pxtblockly.setMelodyEditorOpen(this.sourceBlock_, true);
             Blockly.DropDownDiv.showPositionedByBlock(this, this.sourceBlock_, () => {
                 this.onEditorClose();
                 // revert all style attributes for dropdown div
                 pxt.BrowserUtils.removeClass(contentDiv, "melody-content-div");
                 pxt.BrowserUtils.removeClass(contentDiv.parentElement, "melody-editor-dropdown");
-                Blockly.Events.fire(new Blockly.Events.Ui(this.sourceBlock_, "melody-editor", true, false));
+                pxtblockly.setMelodyEditorOpen(this.sourceBlock_, false);
             });
         }
         getValue() {
@@ -14561,6 +14679,116 @@ var pxtblockly;
         return "#DCDCDC";
     }
 })(pxtblockly || (pxtblockly = {}));
+/// <reference path="../../built/pxtlib.d.ts" />
+/// <reference path="./field_asset.ts" />
+var pxtblockly;
+(function (pxtblockly) {
+    var svg = pxt.svgUtil;
+    const PREVIEW_HEIGHT = 32;
+    const X_PADDING = 5;
+    const Y_PADDING = 1;
+    const BG_PADDING = 4;
+    const BG_HEIGHT = BG_PADDING * 2 + PREVIEW_HEIGHT;
+    const TOTAL_HEIGHT = Y_PADDING * 2 + BG_PADDING * 2 + PREVIEW_HEIGHT;
+    class FieldMusicEditor extends pxtblockly.FieldAssetEditor {
+        getAssetType() {
+            return "song" /* pxt.AssetType.Song */;
+        }
+        createNewAsset(text) {
+            const project = pxt.react.getTilemapProject();
+            if (text) {
+                const asset = pxt.lookupProjectAssetByTSReference(text, project);
+                if (asset)
+                    return asset;
+            }
+            if (this.getBlockData()) {
+                return project.lookupAsset("song" /* pxt.AssetType.Song */, this.getBlockData());
+            }
+            let song;
+            if (text) {
+                const match = /^\s*hex\s*`([a-fA-F0-9]+)`\s*(?:;?)\s*$/.exec(text);
+                if (match) {
+                    song = pxt.assets.music.decodeSongFromHex(match[1]);
+                }
+            }
+            else {
+                song = pxt.assets.music.getEmptySong(2);
+            }
+            if (!song) {
+                this.isGreyBlock = true;
+                this.valueText = text;
+                return undefined;
+            }
+            else {
+                // Restore all of the unused tracks
+                pxt.assets.music.inflateSong(song);
+            }
+            const newAsset = {
+                internalID: -1,
+                id: this.sourceBlock_.id,
+                type: "song" /* pxt.AssetType.Song */,
+                meta: {},
+                song
+            };
+            return newAsset;
+        }
+        render_() {
+            super.render_();
+            if (!this.isGreyBlock) {
+                this.size_.height = TOTAL_HEIGHT;
+                this.size_.width = X_PADDING * 2 + BG_PADDING * 2 + this.previewWidth();
+            }
+        }
+        getValueText() {
+            if (this.asset && !this.isTemporaryAsset()) {
+                return pxt.getTSReferenceForAsset(this.asset);
+            }
+            return this.asset ? `hex\`${pxt.assets.music.encodeSongToHex(this.asset.song)}\`` : "";
+        }
+        parseFieldOptions(opts) {
+            return {};
+        }
+        isFullscreen() {
+            return false;
+        }
+        redrawPreview() {
+            var _a;
+            if (!this.fieldGroup_)
+                return;
+            pxsim.U.clear(this.fieldGroup_);
+            if (this.isGreyBlock) {
+                super.redrawPreview();
+                return;
+            }
+            const totalWidth = X_PADDING * 2 + BG_PADDING * 2 + this.previewWidth();
+            const bg = new svg.Rect()
+                .at(X_PADDING, Y_PADDING)
+                .size(BG_PADDING * 2 + this.previewWidth(), BG_HEIGHT)
+                .setClass("blocklySpriteField")
+                .stroke("#898989", 1)
+                .corner(4);
+            this.fieldGroup_.appendChild(bg.el);
+            if (this.asset) {
+                const dataURI = pxtblockly.songToDataURI(this.asset.song, this.previewWidth(), PREVIEW_HEIGHT, this.lightMode);
+                if (dataURI) {
+                    const img = new svg.Image()
+                        .src(dataURI)
+                        .at(X_PADDING + BG_PADDING, Y_PADDING + BG_PADDING)
+                        .size(this.previewWidth(), PREVIEW_HEIGHT);
+                    this.fieldGroup_.appendChild(img.el);
+                }
+            }
+            if (((_a = this.size_) === null || _a === void 0 ? void 0 : _a.width) != totalWidth) {
+                this.forceRerender();
+            }
+        }
+        previewWidth() {
+            const measures = this.asset ? this.asset.song.measures : 2;
+            return measures * PREVIEW_HEIGHT;
+        }
+    }
+    pxtblockly.FieldMusicEditor = FieldMusicEditor;
+})(pxtblockly || (pxtblockly = {}));
 /// <reference path="../../localtypings/pxtblockly.d.ts" />
 var pxtblockly;
 (function (pxtblockly) {
@@ -17096,6 +17324,54 @@ var pxtblockly;
         return canvas.toDataURL();
     }
     pxtblockly.tilemapToImageURI = tilemapToImageURI;
+    function songToDataURI(song, width, height, lightMode, maxMeasures) {
+        const colors = pxt.appTarget.runtime.palette.slice();
+        const canvas = document.createElement("canvas");
+        canvas.width = width;
+        canvas.height = height;
+        let context;
+        if (lightMode) {
+            context = canvas.getContext("2d", { alpha: false });
+            context.fillStyle = "#dedede";
+            context.fillRect(0, 0, width, height);
+        }
+        else {
+            context = canvas.getContext("2d");
+        }
+        const trackColors = [
+            5,
+            11,
+            5,
+            4,
+            2,
+            6,
+            14,
+            2,
+            5,
+            1, // explosion
+        ];
+        maxMeasures = maxMeasures || song.measures;
+        const cellWidth = Math.max(Math.floor(width / (song.beatsPerMeasure * maxMeasures * 2)), 1);
+        const cellsShown = Math.floor(width / cellWidth);
+        const cellHeight = Math.max(Math.floor(height / 12), 1);
+        const notesShown = Math.floor(height / cellHeight);
+        for (const track of song.tracks) {
+            for (const noteEvent of track.notes) {
+                const col = Math.floor(noteEvent.startTick / (song.ticksPerBeat / 2));
+                if (col > cellsShown)
+                    break;
+                for (const note of noteEvent.notes) {
+                    const row = 12 - (note % 12);
+                    if (row > notesShown)
+                        continue;
+                    context.fillStyle = colors[trackColors[track.id || song.tracks.indexOf(track)]];
+                    context.fillRect(col * cellWidth, row * cellHeight, cellWidth, cellHeight);
+                }
+            }
+        }
+        return canvas.toDataURL();
+    }
+    pxtblockly.songToDataURI = songToDataURI;
     function deleteTilesetTileIfExists(ws, tile) {
         const existing = ws.getVariablesOfType(pxt.sprite.BLOCKLY_TILESET_TYPE);
         for (const model of existing) {
@@ -17231,10 +17507,17 @@ var pxtblockly;
             case "animation" /* pxt.AssetType.Animation */:
                 return getAllFields(workspace, field => field instanceof pxtblockly.FieldAnimationEditor && field.isTemporaryAsset())
                     .map(f => f.ref.getAsset());
+            case "song" /* pxt.AssetType.Song */:
+                return getAllFields(workspace, field => field instanceof pxtblockly.FieldMusicEditor && field.isTemporaryAsset())
+                    .map(f => f.ref.getAsset());
             default: return [];
         }
     }
     pxtblockly.getTemporaryAssets = getTemporaryAssets;
+    function setMelodyEditorOpen(block, isOpen) {
+        Blockly.Events.fire(new Blockly.Events.Ui(block, "melody-editor", !isOpen, isOpen));
+    }
+    pxtblockly.setMelodyEditorOpen = setMelodyEditorOpen;
     function workspaceToScreenCoordinates(ws, wsCoordinates) {
         // The position in pixels relative to the origin of the
         // main workspace.

package/built/pxtblocks.d.ts

@@ -411,15 +411,15 @@ declare namespace pxtblockly {
 }
 declare namespace pxtblockly {
     export interface FieldAssetEditorOptions {
-        initWidth: string;
-        initHeight: string;
-        disableResize: string;
+        initWidth?: string;
+        initHeight?: string;
+        disableResize?: string;
     }
     interface ParsedFieldAssetEditorOptions {
-        initWidth: number;
-        initHeight: number;
-        disableResize: boolean;
-        lightMode: boolean;
+        initWidth?: number;
+        initHeight?: number;
+        disableResize?: boolean;
+        lightMode?: boolean;
     }
     export abstract class FieldAssetEditor<U extends FieldAssetEditorOptions, V extends ParsedFieldAssetEditorOptions> extends FieldBase<U> {
         protected asset: pxt.Asset;
@@ -437,6 +437,9 @@ declare namespace pxtblockly {
         onInit(): void;
         onValueChanged(newValue: string): string;
         showEditor_(): void;
+        protected showEditorFullscreen(editorKind: string, params: any): void;
+        protected showEditorInWidgetDiv(editorKind: string, params: any): void;
+        protected onFieldEditorHide(fv: pxt.react.FieldEditorView<pxt.Asset>): void;
         render_(): void;
         getDisplayText_(): string;
         updateEditable(): void;
@@ -454,6 +457,7 @@ declare namespace pxtblockly {
         protected updateAssetMeta(): void;
         protected updateAssetListener(): void;
         protected assetChangeListener: () => void;
+        protected isFullscreen(): boolean;
     }
     export class BlocklyTilemapChange extends Blockly.Events.BlockChange {
         protected oldRevision: number;
@@ -981,6 +985,23 @@ declare namespace pxtblockly {
         cy: number;
     }
 }
+declare namespace pxtblockly {
+    export interface FieldMusicEditorOptions {
+    }
+    interface ParsedFieldMusicEditorOptions {
+    }
+    export class FieldMusicEditor extends FieldAssetEditor<FieldMusicEditorOptions, ParsedFieldMusicEditorOptions> {
+        protected getAssetType(): pxt.AssetType;
+        protected createNewAsset(text?: string): pxt.Asset;
+        render_(): void;
+        protected getValueText(): string;
+        protected parseFieldOptions(opts: FieldMusicEditorOptions): ParsedFieldMusicEditorOptions;
+        protected isFullscreen(): boolean;
+        protected redrawPreview(): void;
+        protected previewWidth(): number;
+    }
+    export {};
+}
 declare namespace pxtblockly {
     interface FieldNoteOptions extends Blockly.FieldCustomOptions {
         editorColour?: string;
@@ -1498,6 +1519,7 @@ declare namespace pxtblockly {
      */
     function bitmapToImageURI(frame: pxt.sprite.Bitmap, sideLength: number, lightMode: boolean): string;
     function tilemapToImageURI(data: pxt.sprite.TilemapData, sideLength: number, lightMode: boolean): string;
+    function songToDataURI(song: pxt.assets.music.Song, width: number, height: number, lightMode: boolean, maxMeasures?: number): string;
     interface FieldEditorReference<U extends Blockly.Field> {
         block: Blockly.Block;
         field: string;
@@ -1511,5 +1533,6 @@ declare namespace pxtblockly {
     function getAllFields<U extends Blockly.Field>(ws: Blockly.Workspace, predicate: (field: Blockly.Field) => boolean): FieldEditorReference<U>[];
     function getAllReferencedTiles(workspace: Blockly.Workspace, excludeBlockID?: string): pxt.Tile[];
     function getTemporaryAssets(workspace: Blockly.Workspace, type: pxt.AssetType): pxt.Asset[];
+    function setMelodyEditorOpen(block: Blockly.Block, isOpen: boolean): void;
     function workspaceToScreenCoordinates(ws: Blockly.WorkspaceSvg, wsCoordinates: Blockly.utils.Coordinate): Blockly.utils.Coordinate;
 }