Associated with #8111

inspector/src/components/actionTabs/tabs/propertyGrids/sprites/spriteManagerPropertyGridComponent.tsx

@@ -14,6 +14,8 @@ import { FloatLineComponent } from '../../../lines/floatLineComponent';
 import { SliderLineComponent } from '../../../lines/sliderLineComponent';
 import { RenderingManager } from 'babylonjs/Rendering/renderingManager';
 import { TextureLinkLineComponent } from '../../../lines/textureLinkLineComponent';
+import { ButtonLineComponent } from '../../../lines/buttonLineComponent';
+import { Sprite } from 'babylonjs/Sprites/sprite';
 
 interface ISpriteManagerPropertyGridComponentProps {
     globalState: GlobalState;
@@ -28,6 +30,30 @@ export class SpriteManagerPropertyGridComponent extends React.Component<ISpriteM
         super(props);
     }
 
+    addNewSprite() {
+        const spriteManager = this.props.spriteManager;
+        var newSprite = new Sprite("new sprite", spriteManager);
+
+        this.props.onSelectionChangedObservable?.notifyObservers(newSprite);
+
+        this.props.globalState.onCodeChangedObservable.notifyObservers({
+            object: spriteManager,
+            code: `new BABYLON.Sprite("new sprite", TARGET);`
+        });
+    }
+
+    disposeManager() {
+        const spriteManager = this.props.spriteManager;
+        spriteManager.dispose();
+
+        this.props.globalState.onCodeChangedObservable.notifyObservers({
+            object: spriteManager,
+            code: `TARGET.dispose();`
+        });
+
+        this.props.onSelectionChangedObservable?.notifyObservers(null);
+    }
+
     render() {
         const spriteManager = this.props.spriteManager;
 
@@ -36,8 +62,13 @@ export class SpriteManagerPropertyGridComponent extends React.Component<ISpriteM
                 <LineContainerComponent globalState={this.props.globalState} title="GENERAL">
                     <TextInputLineComponent lockObject={this.props.lockObject} label="Name" target={spriteManager} propertyName="name" onPropertyChangedObservable={this.props.onPropertyChangedObservable}/>
                     <TextLineComponent label="Unique ID" value={spriteManager.uniqueId.toString()} />
-                    <FloatLineComponent label="Capacity" isInteger={true} target={spriteManager} propertyName="capacity" />
+                    <TextLineComponent label="Capacity" value={spriteManager.capacity.toString()} />
                     <TextureLinkLineComponent label="Texture" texture={spriteManager.texture} onSelectionChangedObservable={this.props.onSelectionChangedObservable}/>
+                    {
+                        spriteManager.sprites.length < spriteManager.capacity &&
+                        <ButtonLineComponent label="Add new sprite" onClick={() => this.addNewSprite()} />
+                    }
+                    <ButtonLineComponent label="Dispose" onClick={() => this.disposeManager()} />
                 </LineContainerComponent>
                 <LineContainerComponent globalState={this.props.globalState} title="PROPERTIES">
                     <CheckBoxLineComponent label="Pickable" target={spriteManager} propertyName="isPickable" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />

inspector/src/components/actionTabs/tabs/propertyGrids/sprites/spritePropertyGridComponent.tsx

@@ -51,6 +51,18 @@ export class SpritePropertyGridComponent extends React.Component<ISpriteProperty
         this.forceUpdate();
     }
 
+    disposeSprite() {
+        const sprite = this.props.sprite;
+        sprite.dispose();
+
+        this.props.globalState.onCodeChangedObservable.notifyObservers({
+            object: sprite,
+            code: `TARGET.dispose();`
+        });
+
+        this.props.onSelectionChangedObservable?.notifyObservers(null);
+    }
+
     render() {
         const sprite = this.props.sprite;
         const manager = sprite.manager;
@@ -70,6 +82,7 @@ export class SpritePropertyGridComponent extends React.Component<ISpriteProperty
                     <TextLineComponent label="Unique ID" value={sprite.uniqueId.toString()} />
                     <TextLineComponent label="Link to manager" value={manager.name} onLink={() => this.onManagerLink()} />
                     <CheckBoxLineComponent label="Visible" target={sprite} propertyName="isVisible" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <ButtonLineComponent label="Dispose" onClick={() => this.disposeSprite()} />
                 </LineContainerComponent>
                 <LineContainerComponent globalState={this.props.globalState} title="PROPERTIES">
                     <Vector3LineComponent label="Position" target={sprite} propertyName="position" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />

inspector/src/components/sceneExplorer/sceneExplorerComponent.tsx

@@ -361,7 +361,7 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
         spriteManagersContextMenus.push({
             label: "Add new sprite manager",
             action: () => {
-                let newSpriteManager = new SpriteManager("Default sprite manager", "//playground.babylonjs.com/textures/player.png", 2, 64, scene);
+                let newSpriteManager = new SpriteManager("Default sprite manager", "//playground.babylonjs.com/textures/player.png", 500, 64, scene);
                 this.props.globalState.onSelectionChangedObservable.notifyObservers(newSpriteManager);
             }
         });            

src/Sprites/spriteManager.ts

@@ -173,16 +173,12 @@ export class SpriteManager implements ISpriteManager {
     }
 
     /**
-     * Gets or sets the capacity of the manager
+     * Gets the capacity of the manager
      */
     public get capacity() {
         return this._capacity;
     }
 
-    public set capacity(value: number) {
-        this._capacity = value;
-    }
-
     /**
      * Gets or sets the spritesheet texture
      */