fix missing gallery, don't import gallery tiles into my tiles, fix null listener (#11125)

Author: riknoll

pxtblocks/fields/field_tileset.ts

@@ -289,17 +289,20 @@ export class FieldTileset extends FieldImages implements FieldCustom {
     }
 
     protected updateAssetListener() {
+        if (!this.assetChangeListener) {
+            this.assetChangeListener = () => {
+                this.doValueUpdate_(this.getValue());
+                this.forceRerender();
+            };
+        }
         const project = pxt.react.getTilemapProject();
         project.removeChangeListener(pxt.AssetType.Tile, this.assetChangeListener);
         if (this.selectedOption_) {
             project.addChangeListener(this.selectedOption_[2], this.assetChangeListener);
         }
     }
 
-    protected assetChangeListener = () => {
-       this.doValueUpdate_(this.getValue());
-       this.forceRerender();
-    }
+    protected assetChangeListener: () => void;
 
     saveState(_doFullSerialization?: boolean) {
         let asset = this.localTile || this.selectedOption_?.[2];

webapp/src/components/ImageEditor/ImageEditor.tsx

@@ -19,6 +19,7 @@ import { Unsubscribe, Action } from 'redux';
 import { createNewImageAsset, getNewInternalID } from '../../assets';
 import { AssetEditorCore } from '../ImageFieldEditor';
 import { classList } from '../../../../react-common/components/util';
+import { BUILTIN_CATEGORIES } from './tilemap/TilePalette';
 
 export const LIGHT_MODE_TRANSPARENT = "#dedede";
 
@@ -220,7 +221,7 @@ export class ImageEditor extends React.Component<ImageEditorProps, ImageEditorSt
         const remappedByBitmap: pxt.Map<pxt.Tile> = {};
 
         for (let i = 0; i < tiles.length; i++) {
-            const tile = tiles[i];
+            let tile = tiles[i];
             if (!tile) continue;
 
             const key = (tile as any).jresData || (tile.bitmap ? pxt.sprite.base64EncodeBitmap(tile.bitmap) : "");
@@ -250,7 +251,16 @@ export class ImageEditor extends React.Component<ImageEditorProps, ImageEditorSt
                 continue;
             }
 
+            const galleryTile = project.lookupAsset(pxt.AssetType.Tile, tile.id);
+            if (galleryTile) {
+                tile = galleryTile;
+            }
+
             if (tile.bitmap) {
+                if (tile.meta.tags?.some(t => t.startsWith("category-") || BUILTIN_CATEGORIES.some(c => c.id === t))) {
+                    // tile already exist in the tile palette dropdown, so skip to avoid creating duplicates in the project
+                    continue;
+                }
                 const originalName = getSourceTileName(tile);
                 const newName = originalName ? project.generateNewName(pxt.AssetType.Tile, originalName) : undefined;
 

webapp/src/components/ImageEditor/tilemap/TilePalette.tsx

@@ -58,7 +58,7 @@ interface Category {
     tiles: GalleryTile[];
 }
 
-const options: Category[] = [
+export const BUILTIN_CATEGORIES: Category[] = [
     {
         id: "forest",
         text: lf("Forest"),
@@ -126,7 +126,7 @@ class TilePaletteImpl extends React.Component<TilePaletteProps,{}> {
                 }
             }
 
-            this.categories = options.concat(Object.keys(extraCategories).map(key => extraCategories[key]));
+            this.categories = BUILTIN_CATEGORIES.concat(Object.keys(extraCategories).map(key => extraCategories[key]));
         } else {
             this.categories = [];
         }
@@ -434,7 +434,7 @@ class TilePaletteImpl extends React.Component<TilePaletteProps,{}> {
     protected refreshGallery(props: TilePaletteProps) {
         const { gallery, tileset } = props;
         if (gallery) {
-            options.forEach(opt => {
+            BUILTIN_CATEGORIES.forEach(opt => {
                 opt.tiles = gallery.filter(t => t.tags.indexOf(opt.id) !== -1 && t.tileWidth === tileset.tileWidth);
             });
         }

webapp/src/components/ImageFieldEditor.tsx

@@ -80,7 +80,7 @@ export class ImageFieldEditor<U extends pxt.Asset> extends React.Component<Image
 
         let showHeader = headerVisible;
         // If there is no asset, show the gallery to prevent changing shape when it's added
-        let showGallery = !this.props.isMusicEditor && (!this.asset || editingTile);
+        let showGallery = !this.props.isMusicEditor || !this.asset || editingTile;
         const showMyAssets = !hideMyAssets && !editingTile;
 
         if (this.asset && !this.galleryAssets && showGallery) {