Merge branch 'develop'

CHANGELOG.MD

@@ -1,5 +1,17 @@
 # Change Log
 
+## v3.66.0 - Jan 11, 2024
+
+* Allows to set a display name to game objects.
+* The display name formatting expression #{x} expands to "x".
+* The display name formatting shows prepends the `TargetActionComp.target` value, if present.
+* Fixes name collision when copying a game objects tree.
+* Fixes duplicating children objects on a tree copy/paste.
+* Fixes getting user components of nested prefabs.
+* Allows user component object formatting.
+* Allow read-only editors.
+* Set read-only to editors of node_module files.
+
 ## v3.65.0 - Dec 13, 2024
 
 * Allows using prefabs and user components from node modules.

source/editor/plugins/colibri/src/ui/controls/TabPane.ts

@@ -509,6 +509,18 @@ namespace colibri.ui.controls {
             }
         }
 
+        setTabReadOnly(labelElement: HTMLElement, readOnly: boolean) {
+
+            if (readOnly) {
+
+                labelElement.classList.add("ReadOnly");
+
+            } else {
+
+                labelElement.classList.remove("ReadOnly");
+            }
+        }
+
         closeTab(content: controls.Control) {
 
             const label = this.getLabelFromContent(content);

source/editor/plugins/colibri/src/ui/ide/EditorPart.ts

@@ -6,6 +6,7 @@ namespace colibri.ui.ide {
 
         private _input: IEditorInput;
         private _dirty: boolean;
+        private _readOnly: boolean;
         private _embeddedMode: boolean;
         private _editorFactory: EditorFactory;
 
@@ -21,6 +22,24 @@ namespace colibri.ui.ide {
             this._editorFactory = factory;
         }
 
+        setReadOnly(readOnly: boolean) {
+
+            this._readOnly = readOnly;
+
+            if (this.isInEditorArea()) {
+
+                const folder = this.getPartFolder();
+                const label = folder.getLabelFromContent(this);
+
+                folder.setTabReadOnly(label, this._readOnly);
+            }
+        }
+
+        isReadOnly() {
+
+            return this._readOnly;
+        }
+
         getEditorFactory() {
 
             return this._editorFactory;
@@ -66,6 +85,13 @@ namespace colibri.ui.ide {
 
         async save() {
 
+            if (this.isReadOnly()) {
+
+                alert("Cannot save, the editor is in read-only mode.'");
+
+                return;
+            }
+
             await this.doSave();
         }
 

source/editor/plugins/colibri/src/ui/ide/FileEditorInputExtension.ts

@@ -18,10 +18,12 @@ namespace colibri.ui.ide {
         }
 
         createEditorInput(state: any): IEditorInput {
+
             return colibri.ui.ide.FileUtils.getFileFromPath(state.filePath);
         }
 
         getEditorInputId(input: core.io.FilePath): string {
+
             return input.getFullName();
         }
     }

source/editor/plugins/colibri/styles/controls.css

@@ -137,6 +137,9 @@
         padding-bottom: 5px;
     }
 
+    .TabPaneLabel.ReadOnly span {
+        opacity: 0.5;
+    }
 
     .TabPaneLabel span {
         margin: 3px 0px 0px 3px;

source/editor/plugins/phasereditor2d.ide/src/IDEPlugin.ts

@@ -77,6 +77,16 @@ namespace phasereditor2d.ide {
             reg.addExtension(new ui.viewers.LibraryFileStyledLabelProviderExtension());
 
             phasereditor2d.files.FilesPlugin.getInstance().setOpenFileAction(file => this.openFileFromFilesView(file));
+
+            colibri.Platform.getWorkbench().eventEditorActivated.addListener(editor => {
+
+                const file = editor.getInput();
+
+                if (file instanceof colibri.core.io.FilePath) {
+
+                    editor.setReadOnly(ide.core.code.isNodeLibraryFile(file));
+                }
+            });
         }
 
         async compileProject() {

source/editor/plugins/phasereditor2d.scene/src/core/json/IObjectData.ts

@@ -6,6 +6,7 @@ namespace phasereditor2d.scene.core.json {
         prefabId?: string;
         components?: string[],
         label: string;
+        displayName?: string;
         unlock?: string[];
         scope?: ui.sceneobjects.ObjectScope;
         private_np?: boolean;

source/editor/plugins/phasereditor2d.scene/src/core/json/SceneFinder.ts

@@ -480,7 +480,10 @@ namespace phasereditor2d.scene.core.json {
 
             if (file) {
 
-                result.push(file);
+                if (!this.isNestedPrefab(prefabId)) {
+
+                    result.push(file);
+                }
 
                 const objData = this.getPrefabData(prefabId);
 

source/editor/plugins/phasereditor2d.scene/src/ui/SceneMaker.ts

@@ -80,15 +80,15 @@ namespace phasereditor2d.scene.ui {
             const selection = alternativeSelection
                 || this._editorScene.getEditor().getSelectedGameObjects();
 
-            const areDropingScriptNodes = dropObjects.filter(obj => obj instanceof sceneobjects.ScriptNode).length === dropObjects.length;
+            const areDroppingScriptNodes = dropObjects.filter(obj => obj instanceof sceneobjects.ScriptNode).length === dropObjects.length;
 
             for (const sprite of selection) {
 
-                const dropTarget = areDropingScriptNodes ? this.findDropScriptTargetParent(sprite) : this.findDropTargetParent(sprite);
+                const dropTarget = areDroppingScriptNodes ? this.findDropScriptTargetParent(sprite) : this.findDropTargetParent(sprite);
 
                 if (dropTarget) {
 
-                    if (areDropingScriptNodes) {
+                    if (areDroppingScriptNodes) {
 
                         dropInObj = dropTarget;
 

source/editor/plugins/phasereditor2d.scene/src/ui/editor/ClipboardManager.ts

@@ -91,9 +91,38 @@ namespace phasereditor2d.scene.ui.editor {
 
             const p = new Phaser.Math.Vector2();
 
-            const gameObjects = this._editor.getSelectedGameObjects();
+            const selection = new Set(this._editor.getSelectedGameObjects());
 
-            for (const obj of gameObjects) {
+            const copyObjects: sceneobjects.ISceneGameObject[] = [];
+
+            // filter off the children of selected parents
+
+            for(const obj of selection) {
+
+                let include = true;
+
+                const objES = obj.getEditorSupport();
+
+                const parents = objES.getAllParents();
+
+                for(const parent of parents) {
+
+                    if (selection.has(parent)) {
+
+                        include = false;
+                        break;
+                    }
+                }
+
+                if (include) {
+
+                    copyObjects.push(obj);
+                }
+            }
+
+            // record game objects positions
+
+            for (const obj of copyObjects) {
 
                 const sprite = obj as unknown as Phaser.GameObjects.Sprite;
 
@@ -111,7 +140,9 @@ namespace phasereditor2d.scene.ui.editor {
                 minY = Math.min(minY, p.y);
             }
 
-            for (const obj of gameObjects) {
+            // serialize objects
+
+            for (const obj of copyObjects) {
 
                 const objData = {} as any;
 

source/editor/plugins/phasereditor2d.scene/src/ui/editor/OverlayLayer.ts

@@ -71,18 +71,15 @@ namespace phasereditor2d.scene.ui.editor {
 
             const selection = this._editor.getSelection();
 
-            const gameObjectsSet = new Set(selection.filter(obj => sceneobjects.isGameObject(obj)));
-
             for (const obj of selection) {
 
                 ctx.save();
 
                 const isGameObject = sceneobjects.isGameObject(obj);
 
-                const isUserCompNode = obj instanceof sceneobjects.UserComponentNode
-                    && !gameObjectsSet.has(obj.getObject());
+                const isUserCompNode = obj instanceof sceneobjects.UserComponentNode;
 
-                const isScriptNode = obj instanceof sceneobjects.ScriptNode && !gameObjectsSet.has(obj.getParentDisplayObject());
+                const isScriptNode = obj instanceof sceneobjects.ScriptNode;
 
                 const isNonDisplayObject = isUserCompNode || isScriptNode;
 

source/editor/plugins/phasereditor2d.scene/src/ui/editor/properties/DynamicUserSectionExtension.ts

@@ -9,7 +9,7 @@ namespace phasereditor2d.scene.ui.editor.properties {
 
             const result: GetPropertySection[] = [];
 
-            const visitedPrefabs = new Set<io.FilePath>();
+            const visitedPrefabs = new Set<string>();
             const visitedComps = new Set<string>();
 
             const finder = ScenePlugin.getInstance().getSceneFinder();
@@ -35,6 +35,7 @@ namespace phasereditor2d.scene.ui.editor.properties {
                 }
             }
 
+            // add properties from prefab
 
             for (const obj of editor.getSelectedGameObjects()) {
 
@@ -45,14 +46,14 @@ namespace phasereditor2d.scene.ui.editor.properties {
                     continue;
                 }
 
-                const prefabFile = objES.getPrefabFile();
+                const prefabId = objES.getPrefabId();
 
-                if (visitedPrefabs.has(prefabFile)) {
+                if (visitedPrefabs.has(prefabId)) {
 
                     continue;
                 }
 
-                visitedPrefabs.add(prefabFile);
+                visitedPrefabs.add(prefabId);
 
                 const prefabUserProps = objES.getComponent(sceneobjects.PrefabUserPropertyComponent) as sceneobjects.PrefabUserPropertyComponent;
                 const prefabInfoList = prefabUserProps.getPropertiesByPrefab();

source/editor/plugins/phasereditor2d.scene/src/ui/editor/undo/PasteOperation.ts

@@ -35,7 +35,7 @@ namespace phasereditor2d.scene.ui.editor.undo {
 
             await this.pastePlainObjects(items, sel);
 
-            this.pastePrefaProperties(items, sel);
+            this.pastePrefabProperties(items, sel);
 
             this._editor.setSelection(sel);
         }
@@ -56,7 +56,7 @@ namespace phasereditor2d.scene.ui.editor.undo {
 
                 this.setNewObjectId(data);
 
-                const obj =scene.readPlainObject(data);
+                const obj = scene.readPlainObject(data);
 
                 if (obj) {
 
@@ -76,7 +76,7 @@ namespace phasereditor2d.scene.ui.editor.undo {
             }
         }
 
-        private pastePrefaProperties(clipboardItems: IClipboardItem[], sel: any[]) {
+        private pastePrefabProperties(clipboardItems: IClipboardItem[], sel: any[]) {
 
             const scene = this._editor.getScene();
 
@@ -169,16 +169,28 @@ namespace phasereditor2d.scene.ui.editor.undo {
 
             for (const newObj of sprites) {
 
-                const oldLabel = newObj.getEditorSupport().getLabel();
-
-                const newLabel = nameMaker.makeName(oldLabel);
-
-                newObj.getEditorSupport().setLabel(newLabel);
+                this.updateGameObjectName(newObj, nameMaker);
             }
 
             maker.afterDropObjects(prefabObj, sprites);
         }
 
+        private updateGameObjectName(obj: sceneobjects.ISceneGameObject, nameMaker: colibri.ui.ide.utils.NameMaker) {
+
+            const objES = obj.getEditorSupport();
+
+            const oldLabel = objES.getLabel();
+
+            const newLabel = nameMaker.makeName(oldLabel);
+
+            objES.setLabel(newLabel);
+
+            for(const child of objES.getAppendedChildren()) {
+
+                this.updateGameObjectName(child, nameMaker);
+            }
+        }
+
         private setNewObjectId(data: json.IObjectData) {
 
             data.id = Phaser.Utils.String.UUID();

source/editor/plugins/phasereditor2d.scene/src/ui/editor/usercomponent/UserComponent.ts

@@ -6,6 +6,7 @@ namespace phasereditor2d.scene.ui.editor.usercomponent {
 
         private _name: string;
         private _displayName: string;
+        private _objectDisplayFormat: string;
         private _baseClass: string;
         private _gameObjectType: string;
         private _properties: sceneobjects.UserPropertiesManager;
@@ -15,6 +16,7 @@ namespace phasereditor2d.scene.ui.editor.usercomponent {
             this._name = name;
             this._baseClass = "";
             this._displayName = "";
+            this._objectDisplayFormat = "";
             this._gameObjectType = "Phaser.GameObjects.Image";
             this._properties = new UserComponentProperties(this);
         }
@@ -27,6 +29,7 @@ namespace phasereditor2d.scene.ui.editor.usercomponent {
             const data = {
                 name: this._name,
                 displayName: this._displayName,
+                objectDisplayFormat: this._objectDisplayFormat,
                 baseClass: this._baseClass,
                 gameObjectType: this._gameObjectType,
                 properties: propsData
@@ -39,6 +42,7 @@ namespace phasereditor2d.scene.ui.editor.usercomponent {
 
             this._name = data.name;
             this._displayName = read(data, "displayName", "");
+            this._objectDisplayFormat = read(data, "objectDisplayFormat", "");
             this._baseClass = read(data, "baseClass", "");
             this._gameObjectType = read(data, "gameObjectType", "Phaser.GameObjects.Image");
             this._properties.readJSON(data.properties);
@@ -54,6 +58,16 @@ namespace phasereditor2d.scene.ui.editor.usercomponent {
             this._name = name;
         }
 
+        getObjectDisplayFormat() {
+
+            return this._objectDisplayFormat;
+        }
+
+        setObjectDisplayFormat(objectDisplayFormat: string) {
+
+            this._objectDisplayFormat = objectDisplayFormat;
+        }
+
         getDisplayName() {
 
             return this._displayName;

source/editor/plugins/phasereditor2d.scene/src/ui/editor/usercomponent/UserComponentSection.ts

@@ -41,6 +41,8 @@ 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.");
+
+            this.stringProp(comp, "ObjectDisplayFormat", "Object Display Format", "The display name format to show in prefab instances.");
 
             const op = (
                 action: editor.properties.TUserPropertiesAction) => {
@@ -119,7 +121,7 @@ namespace phasereditor2d.scene.ui.editor.usercomponent {
             this.addUpdater(() => {
 
                 text.value = this.flatValues_StringOneOrNothing(
-                    this.getSelection().map(c => c["get" + prop]()));
+                    this.getSelection().map(c => c["get" + prop]() || ""));
             });
 
             if (options) {