Allows setting user component display name.

PhaserEditor2D · PhaserEditor2D · commit e4a8a7392cca · 2023-11-30T13:51:27.000-05:00
diff --git a/source/editor/plugins/phasereditor2d.scene/src/ui/editor/commands/SceneEditorCommands.ts b/source/editor/plugins/phasereditor2d.scene/src/ui/editor/commands/SceneEditorCommands.ts
@@ -354,7 +354,7 @@ namespace phasereditor2d.scene.ui.editor.commands {
                                 if (obj instanceof usercomponent.UserComponent) {
 
                                     return [{
-                                        text: obj.getName(),
+                                        text: obj.getDisplayNameOrName(),
                                         color: theme.viewerForeground
                                     }];
                                 }
diff --git a/source/editor/plugins/phasereditor2d.scene/src/ui/editor/outline/SceneEditorOutlineStyledLabelProvider.ts b/source/editor/plugins/phasereditor2d.scene/src/ui/editor/outline/SceneEditorOutlineStyledLabelProvider.ts
@@ -45,7 +45,7 @@ namespace phasereditor2d.scene.ui.editor.outline {
 
             } else if (obj instanceof sceneobjects.UserComponentNode) {
 
-                return obj.getComponentName();
+                return obj.getUserComponent().getDisplayNameOrName();
 
             } else if (obj instanceof sceneobjects.PrefabUserProperties) {
 
diff --git a/source/editor/plugins/phasereditor2d.scene/src/ui/editor/properties/DynamicUserComponentSection.ts b/source/editor/plugins/phasereditor2d.scene/src/ui/editor/properties/DynamicUserComponentSection.ts
@@ -7,15 +7,17 @@ namespace phasereditor2d.scene.ui.editor.properties {
     export class DynamicUserComponentSection extends sceneobjects.SceneGameObjectSection<sceneobjects.ISceneGameObject> {
 
         private _componentName: string;
+        private _componentDisplayName: string;
 
-        constructor(page: controls.properties.PropertyPage, componentName: string, hash: string) {
+        constructor(page: controls.properties.PropertyPage, componentName: string, componentDisplayName: string, hash: string) {
             super(page,
                 DynamicUserComponentSection.computeId(componentName, hash),
                 componentName, false, true,
                 resources.getIcon(resources.ICON_USER_COMPONENT),
                 `DynamicUserComponentSection_${componentName}}`);
 
             this._componentName = componentName;
+            this._componentDisplayName = componentDisplayName;
         }
 
         private static computeId(compName: string, hash: string) {
@@ -35,7 +37,7 @@ namespace phasereditor2d.scene.ui.editor.properties {
                     .getUserComponentsComponent()
                     .getPrefabUserComponents())
                 .filter(i => i.components.find(c => c.getName() === this._componentName))
-                .map(i => i.prefabFile.getNameWithoutExtension());
+                .map(i => sceneobjects.getSceneDisplayName(i.prefabFile));
 
             const distinctPrefabNames: string[] = [];
 
@@ -54,10 +56,10 @@ namespace phasereditor2d.scene.ui.editor.properties {
                     distinctPrefabNames.push(prefabName);
                 }
 
-                return `${this._componentName} <span class="UserComponentTitle_PrefabsPart">← ${distinctPrefabNames.join(" &amp; ")}</span>`;
+                return `${this._componentDisplayName} <span class="UserComponentTitle_PrefabsPart">← ${distinctPrefabNames.join(" &amp; ")}</span>`;
             }
 
-            return this._componentName;
+            return this._componentDisplayName;
         }
 
         createMenu(menu: controls.Menu): void {
@@ -66,7 +68,7 @@ namespace phasereditor2d.scene.ui.editor.properties {
             const objES = obj.getEditorSupport();
 
             menu.addAction({
-                text: `Select Objects With ${this._componentName}`,
+                text: `Select Objects With ${this._componentDisplayName}`,
                 callback: () => {
 
                     const sel = [];
@@ -90,7 +92,7 @@ namespace phasereditor2d.scene.ui.editor.properties {
             });
 
             menu.addAction({
-                text: "Open Definition Of " + this._componentName,
+                text: "Open Definition Of " + this._componentDisplayName,
                 callback: () => this.openComponentEditor()
             });
 
diff --git a/source/editor/plugins/phasereditor2d.scene/src/ui/editor/properties/DynamicUserSectionExtension.ts b/source/editor/plugins/phasereditor2d.scene/src/ui/editor/properties/DynamicUserSectionExtension.ts
@@ -26,11 +26,12 @@ namespace phasereditor2d.scene.ui.editor.properties {
                 for (const compInfo of localComps) {
 
                     const compName = compInfo.component.getName();
+                    const compDisplayName = compInfo.component.getDisplayNameOrName();
 
                     visitedComps.add(compName);
 
                     result.push(page => new DynamicUserComponentSection(
-                        page, compName, `${compInfo.file.getModTime()}`));
+                        page, compName, compDisplayName, `${compInfo.file.getModTime()}`));
                 }
             }
 
@@ -69,14 +70,16 @@ namespace phasereditor2d.scene.ui.editor.properties {
 
                     const userComps = objES.getUserComponentsComponent();
 
-                    const compNames = userComps
+                    const components = userComps
                         .getPrefabUserComponents()
                         .filter(i => i.prefabFile === prefabInfo.prefabFile)
                         .flatMap(i => i.components)
-                        .map(c => c.getName())
-                        .filter(name => !visitedComps.has(name));
+                        .filter(c => !visitedComps.has(c.getName()));
 
-                    for (const compName of compNames) {
+                    for (const comp of components) {
+
+                        const compName = comp.getName();
+                        const compDisplayName = comp.getDisplayNameOrName();
 
                         visitedComps.add(compName);
 
@@ -85,7 +88,7 @@ namespace phasereditor2d.scene.ui.editor.properties {
                         if (findResult) {
 
                             result.push(page => new DynamicUserComponentSection(
-                                page, compName, `${findResult.file.getModTime()}`));
+                                page, compName, compDisplayName, `${findResult.file.getModTime()}`));
                         }
                     }
                 }
diff --git a/source/editor/plugins/phasereditor2d.scene/src/ui/editor/usercomponent/UserComponent.ts b/source/editor/plugins/phasereditor2d.scene/src/ui/editor/usercomponent/UserComponent.ts
@@ -5,6 +5,7 @@ namespace phasereditor2d.scene.ui.editor.usercomponent {
     export class UserComponent {
 
         private _name: string;
+        private _displayName: string;
         private _baseClass: string;
         private _gameObjectType: string;
         private _properties: sceneobjects.UserPropertiesManager;
@@ -13,6 +14,7 @@ namespace phasereditor2d.scene.ui.editor.usercomponent {
 
             this._name = name;
             this._baseClass = "";
+            this._displayName = "";
             this._gameObjectType = "Phaser.GameObjects.Image";
             this._properties = new UserComponentProperties(this);
         }
@@ -24,6 +26,7 @@ namespace phasereditor2d.scene.ui.editor.usercomponent {
 
             const data = {
                 name: this._name,
+                displayName: this._displayName,
                 baseClass: this._baseClass,
                 gameObjectType: this._gameObjectType,
                 properties: propsData
@@ -35,6 +38,7 @@ namespace phasereditor2d.scene.ui.editor.usercomponent {
         readJSON(data: any) {
 
             this._name = data.name;
+            this._displayName = read(data, "displayName", "");
             this._baseClass = read(data, "baseClass", "");
             this._gameObjectType = read(data, "gameObjectType", "Phaser.GameObjects.Image");
             this._properties.readJSON(data.properties);
@@ -50,6 +54,26 @@ namespace phasereditor2d.scene.ui.editor.usercomponent {
             this._name = name;
         }
 
+        getDisplayName() {
+
+            return this._displayName;
+        }
+
+        setDisplayName(displayName: string) {
+
+            this._displayName = displayName;
+        }
+
+        getDisplayNameOrName() {
+
+            if (this._displayName && this._displayName.trim().length > 0) {
+
+                return this._displayName;
+            }
+
+            return this._name;
+        }
+
         getBaseClass() {
 
             return this._baseClass;
diff --git a/source/editor/plugins/phasereditor2d.scene/src/ui/editor/usercomponent/UserComponentSection.ts b/source/editor/plugins/phasereditor2d.scene/src/ui/editor/usercomponent/UserComponentSection.ts
@@ -40,6 +40,7 @@ namespace phasereditor2d.scene.ui.editor.usercomponent {
 
             this.stringProp(comp, "BaseClass", "Super Class", "Name of the super class of the component. It is optional.", () => this.createSuperClassOptions());
 
+            this.stringProp(comp, "DisplayName", "Display Name", "The display name of the component.");
 
             const op = (
                 action: editor.properties.TUserPropertiesAction) => {
diff --git a/source/editor/plugins/phasereditor2d.scene/src/ui/editor/usercomponent/UserComponentsEditorOutlineProvider.ts b/source/editor/plugins/phasereditor2d.scene/src/ui/editor/usercomponent/UserComponentsEditorOutlineProvider.ts
@@ -41,7 +41,7 @@ namespace phasereditor2d.scene.ui.editor.usercomponent {
 
             return new controls.viewers.LabelProvider(obj => {
 
-                return obj instanceof UserComponent ? obj.getName() : obj as string;
+                return obj instanceof UserComponent ? obj.getDisplayNameOrName() : obj as string;
             });
         }
 
diff --git a/source/editor/plugins/phasereditor2d.scene/src/ui/sceneobjects/object/properties/DynamicPrefabInstanceSection.ts b/source/editor/plugins/phasereditor2d.scene/src/ui/sceneobjects/object/properties/DynamicPrefabInstanceSection.ts
@@ -14,7 +14,7 @@ namespace phasereditor2d.scene.ui.sceneobjects {
             properties: UserProperty[]) {
             super(page,
                 DynamicPrefabInstanceSection.computeId(prefabFile),
-                prefabFile.getNameWithoutExtension(),
+                getSceneDisplayName(prefabFile),
                 false, true, resources.getIcon(resources.ICON_GROUP),
                 DynamicPrefabInstanceSection.computeTypeHash(prefabFile));
 

Original file line number	Diff line number	Diff line change
`@@ -354,7 +354,7 @@ namespace phasereditor2d.scene.ui.editor.commands {`
`354`	`354`	`if (obj instanceof usercomponent.UserComponent) {`
`355`	`355`
`356`	`356`	`return [{`
`357`		`- text: obj.getName(),`
	`357`	`+ text: obj.getDisplayNameOrName(),`
`358`	`358`	`color: theme.viewerForeground`
`359`	`359`	`}];`
`360`	`360`	`}`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ namespace phasereditor2d.scene.ui.editor.usercomponent {`
`41`	`41`
`42`	`42`	`return new controls.viewers.LabelProvider(obj => {`
`43`	`43`
`44`		`- return obj instanceof UserComponent ? obj.getName() : obj as string;`
	`44`	`+ return obj instanceof UserComponent ? obj.getDisplayNameOrName() : obj as string;`
`45`	`45`	`});`
`46`	`46`	`}`
`47`	`47`