improve the monaco field editor experience for creating new assets and add animations (microsoft#10960)

Author: riknoll

pxteditor/index.ts

@@ -12,6 +12,7 @@ export * from "./monaco-fields/field_tilemap";
 export * from "./monaco-fields/field_musiceditor";
 export * from "./monaco-fields/field_soundEffect";
 export * from "./monaco-fields/field_sprite";
+export * from "./monaco-fields/field_animation";
 export * from "./monaco-fields/field_react";
 
 export {

pxteditor/monaco-fields/field_animation.ts

@@ -0,0 +1,87 @@
+import { MonacoReactFieldEditor } from "./field_react";
+import { registerMonacoFieldEditor } from "./monacoFieldEditor";
+
+const fieldEditorId = "animation-editor";
+
+export class MonacoAnimationEditor extends MonacoReactFieldEditor<pxt.Animation> {
+    protected isPython: boolean;
+    protected editing: pxt.Asset;
+
+    protected textToValue(text: string): pxt.Animation {
+        this.isPython = text.indexOf("`") === -1
+
+        const match = pxt.parseAssetTSReference(text);
+        if (match) {
+            const { name: matchedName } = match;
+            const name = matchedName.trim();
+            const project = pxt.react.getTilemapProject();
+            const asset = project.lookupAssetByName(pxt.AssetType.Animation, name);
+            if (asset) {
+                this.editing = asset;
+                return asset;
+            }
+            else {
+                const newAsset = project.createNewAnimation();
+
+                if (name && !project.isNameTaken(pxt.AssetType.Animation, name) && pxt.validateAssetName(name)) {
+                    newAsset.meta.displayName = name;
+                }
+                else {
+                    newAsset.meta.displayName = project.generateNewName(pxt.AssetType.Animation);
+                }
+
+                this.editing = newAsset;
+
+                return newAsset;
+            }
+        }
+
+        return undefined;
+    }
+
+    protected resultToText(result: pxt.Animation): string {
+        const project = pxt.react.getTilemapProject();
+        project.pushUndo();
+        result = pxt.patchTemporaryAsset(this.editing, result, project) as pxt.Animation;
+        result = project.updateAsset(result)
+        return pxt.getTSReferenceForAsset(result, this.isPython);
+    }
+
+    protected getFieldEditorId() {
+        return fieldEditorId;
+    }
+    protected getOptions(): any {
+        return {
+            initWidth: 16,
+            initHeight: 16,
+            blocksInfo: this.host.blocksInfo()
+        };
+    }
+}
+
+
+const regexes = [
+    // typescript
+    "assets\\s*\\.\\s*animation\\s*`[a-zA-Z_\\s\\n]*`",
+
+    // python
+    'assets\\s*\\.\\s*animation\\s*\\(\\s*"""[a-zA-Z_\\s\\n]*"""\\s*\\)'
+];
+
+const searchString = regexes.map(r => `(?:${r})`).join("|");
+
+export const animationEditorDefinition: pxt.editor.MonacoFieldEditorDefinition = {
+    id: fieldEditorId,
+    foldMatches: true,
+    glyphCssClass: "sprite-editor-glyph sprite-focus-hover",
+    heightInPixels: 510,
+    matcher: {
+        searchString: searchString,
+        isRegex: true,
+        matchCase: true,
+        matchWholeWord: false
+    },
+    proto: MonacoAnimationEditor
+};
+
+registerMonacoFieldEditor(fieldEditorId, animationEditorDefinition);

pxteditor/monaco-fields/field_musiceditor.ts

@@ -30,6 +30,9 @@ export class MonacoSongEditor extends MonacoReactFieldEditor<pxt.Song> {
                 if (name && !project.isNameTaken(pxt.AssetType.Song, name) && pxt.validateAssetName(name)) {
                     newAsset.meta.displayName = name;
                 }
+                else {
+                    newAsset.meta.displayName = project.generateNewName(pxt.AssetType.Song);
+                }
 
                 this.editing = newAsset;
 

pxteditor/monaco-fields/field_sprite.ts

@@ -30,6 +30,9 @@ export class MonacoSpriteEditor extends MonacoReactFieldEditor<pxt.ProjectImage>
                 if (name && !project.isNameTaken(pxt.AssetType.Image, name) && pxt.validateAssetName(name)) {
                     newAsset.meta.displayName = name;
                 }
+                else {
+                    newAsset.meta.displayName = project.generateNewName(pxt.AssetType.Image);
+                }
 
                 this.editing = newAsset;
 

pxtlib/tilemap.ts

@@ -1401,6 +1401,18 @@ namespace pxt {
             }
         }
 
+        generateNewName(type: AssetType, name?: string) {
+            const defaultName = name || pxt.getDefaultAssetDisplayName(type);
+            let newName = defaultName;
+            let index = 0;
+
+            while (this.isNameTaken(type, newName)) {
+                newName = defaultName + (index++);
+            }
+
+            return newName;
+        }
+
         protected generateNewIDInternal(type: AssetType, varPrefix: string, namespaceString?: string) {
             varPrefix = varPrefix.replace(/\d+$/, "");
             const prefix = namespaceString ? namespaceString + "." + varPrefix : varPrefix;
@@ -2010,7 +2022,7 @@ namespace pxt {
     }
 
     export function parseAssetTSReference(ts: string) {
-        const match = /^\s*(?:(?:assets\s*\.\s*(image|tile|animation|tilemap|song))|(tilemap))\s*(?:`|\(""")([^`"]+)(?:`|"""\))\s*$/m.exec(ts);
+        const match = /^\s*(?:(?:assets\s*\.\s*(image|tile|animation|tilemap|song))|(tilemap))\s*(?:`|\(""")([^`"]*)(?:`|"""\))\s*$/m.exec(ts);
 
         if (match) {
             const type = match[1] || match[2];

webapp/src/assetEditor.tsx

@@ -377,13 +377,7 @@ export class AssetEditor extends React.Component<{}, AssetEditorState> {
     protected getEmptyAsset(type: pxt.AssetType, displayName?: string): pxt.Asset {
         const project = pxt.react.getTilemapProject();
 
-        const defaultName = displayName || pxt.getDefaultAssetDisplayName(type);
-        let newName = defaultName;
-        let index = 0;
-
-        while (project.isNameTaken(type, newName)) {
-            newName = defaultName + (index++);
-        }
+        const newName = project.generateNewName(type, displayName);
 
         const asset = { type, id: "", internalID: 0, meta: { displayName: newName } } as pxt.Asset;
         switch (type) {