Merge branch 'develop'

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "workbench.colorTheme": "Solarized Dark"
+    "workbench.colorTheme": "Nord"
 }

CHANGELOG.MD

@@ -1,5 +1,28 @@
 # Change Log
 
+## v3.62.0, Jun 29, 2023
+
+* New Event user property.
+* [#284](https://github.com/PhaserEditor2D/PhaserEditor2D-v3/issues/284) Fixes hit area rendering for containers.
+* A new Add Prefab Property command that shows a dialog.
+* Replaces the Object Depth commands for the Edit move commands.
+* Replaces the Object List sort commands by the Editor move commands.
+* Allows change prefab properties with the Edit move commands. Remove the Move options from the Prefab Properties section's menu.
+* Allows copy/cut/paste of prefab properties.
+* Allows copy/cut/paste keyboard keys.
+* Shows Keyboard.Key and Object List objects in the Object Variable user property's dialog..
+* Adds the new KeyCode User Property.
+* Fixes hit area serialization.
+* Removes the User Components section and shows user components properties as individual sections:
+    * Renames the Scripts context menu to Scripting and include:
+        - Add User Component (`M` key)
+        - Browse User Components (`Shift+M` key)
+* Removes user component nodes from the Outline view.
+* Removes the Prefab Instance section, shows the prefab instance user properties as individual sections.
+* The Replace Texture Frame command responds to the `F` key.
+* Fixes adding a script node to all selected game objects.
+[#223](https://github.com/PhaserEditor2D/PhaserEditor2D-v3/issues/222) Fixed tab-focus on the DOM elements of the user properties.
+
 ## v3.61.0 - May 18, 2023
 
 * Checks if a scene file was generated by a newer and incompatible version of the editor.

scripts/make-events-files.js

@@ -0,0 +1,39 @@
+
+const fs = require("fs");
+const process = require("process")
+
+const phaser_path = process.env.PHASER_PATH;
+const phaser_json_path = phaser_path + "/phaser3-docs/json/phaser.json";
+
+const content = fs.readFileSync(phaser_json_path);
+
+const data = JSON.parse(content.toString());
+
+const docsMap = {};
+
+let i = 1;
+
+for (const item of data.docs) {
+
+    if (item.kind !== "event") {
+
+        continue;
+    }
+
+    let { name, memberof } = item;
+
+    const fullName = `${memberof}.${name}`;
+
+    docsMap[fullName] = item.description || item.classdesc;
+
+    console.log(`${i++} Processing event fullName`);
+}
+
+const output = JSON.stringify(docsMap, null, 2);
+
+console.log("---");
+console.log("Writing to file events.json...");
+
+fs.writeFileSync("../source/editor/plugins/phasereditor2d.scene/data/events-docs.json", output);
+
+console.log("Done.");

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

@@ -212,16 +212,33 @@ namespace colibri.ui.controls {
         }
 
         add(control: Control): void {
+
             control._container = this;
+
             this._children.push(control);
+
             this._element.appendChild(control.getElement());
+
             control.onControlAdded();
         }
 
+        remove(control: Control) {
+
+            control.getElement().remove();
+
+            this._children = this._children.filter(c => c !== control);
+
+            control.onControlRemoved();
+        }
+
         protected onControlAdded() {
             // nothing
         }
 
+        protected onControlRemoved() {
+            // nothing
+        }
+
         getChildren() {
             return this._children;
         }

source/editor/plugins/colibri/src/ui/controls/properties/FormBuilder.ts

@@ -47,7 +47,10 @@ namespace colibri.ui.controls.properties {
 
             btn.addEventListener("click", e => callback(e));
 
-            parent.appendChild(btn);
+            if (parent) {
+
+                parent.appendChild(btn);
+            }
 
             return btn;
         }

source/editor/plugins/colibri/src/ui/controls/properties/PropertyPage.ts

@@ -1,151 +1,5 @@
 namespace colibri.ui.controls.properties {
 
-    class PropertySectionPane extends Control {
-
-        private _section: PropertySection<any>;
-        private _titleArea: HTMLDivElement;
-        private _formArea: HTMLDivElement;
-        private _page: PropertyPage;
-        private _menuIcon: IconControl;
-        private _expandIconControl: IconControl;
-
-        constructor(page: PropertyPage, section: PropertySection<any>) {
-            super();
-
-            this._page = page;
-
-            this._section = section;
-
-            this.addClass("PropertySectionPane");
-        }
-
-        createSection() {
-
-            if (!this._formArea) {
-
-                this._titleArea = document.createElement("div");
-                this._titleArea.classList.add("PropertyTitleArea");
-                this._titleArea.addEventListener("click", () => this.toggleSection());
-
-                this._expandIconControl = new IconControl(colibri.ColibriPlugin.getInstance().getIcon(colibri.ICON_CONTROL_TREE_COLLAPSE));
-
-                this._expandIconControl.getCanvas().classList.add("expanded");
-
-                this._expandIconControl.getCanvas().addEventListener("click", e => {
-
-                    e.stopImmediatePropagation();
-
-                    this.toggleSection()
-                });
-
-                this._titleArea.appendChild(this._expandIconControl.getCanvas());
-
-                const label = document.createElement("label");
-                label.innerText = this._section.getTitle();
-                this._titleArea.appendChild(label);
-
-                this._menuIcon = new IconControl(ColibriPlugin.getInstance().getIcon(ICON_SMALL_MENU));
-                this._menuIcon.getCanvas().classList.add("IconButton");
-                this._menuIcon.getCanvas().style.visibility = this._section.hasMenu() ? "visible" : "hidden";
-                this._menuIcon.getCanvas().addEventListener("click", e => {
-
-                    e.stopPropagation();
-                    e.stopImmediatePropagation();
-
-                    if (this._section.hasMenu()) {
-
-                        const menu = new Menu();
-                        this._section.createMenu(menu);
-                        menu.createWithEvent(e);
-                    }
-                });
-                this._titleArea.appendChild(this._menuIcon.getCanvas());
-
-                this._formArea = document.createElement("div");
-                this._formArea.classList.add("PropertyFormArea");
-                this._section.create(this._formArea);
-
-                this.getElement().appendChild(this._titleArea);
-                this.getElement().appendChild(this._formArea);
-
-                this.updateExpandIcon();
-
-                let collapsed = this.getCollapsedStateInStorage();
-
-                if (collapsed === undefined) {
-
-                    this.setCollapsedStateInStorage(this._section.isCollapsedByDefault());
-
-                    collapsed = this.getCollapsedStateInStorage();
-                }
-
-                if (collapsed === "true") {
-
-                    this.toggleSection();
-                }
-            }
-        }
-
-        private getCollapsedStateInStorage() {
-
-            return window.localStorage[this.getLocalStorageKey() + ".collapsed"];
-        }
-
-        private setCollapsedStateInStorage(collapsed: boolean) {
-
-            return window.localStorage[this.getLocalStorageKey() + ".collapsed"] = collapsed ? "true" : "false";
-        }
-
-        private getLocalStorageKey() {
-
-            return `colibri.ui.controls.properties.PropertySection[${this._section.getId()}]`;
-        }
-
-
-        isExpanded() {
-            return this._expandIconControl.getCanvas().classList.contains("expanded");
-        }
-
-        private toggleSection(): void {
-
-            if (this.isExpanded()) {
-
-                this._formArea.style.display = "none";
-                this._expandIconControl.getCanvas().classList.remove("expanded");
-
-            } else {
-
-                this._formArea.style.display = "grid";
-                this._expandIconControl.getCanvas().classList.add("expanded");
-            }
-
-            this._page.updateExpandStatus();
-
-            this.getContainer().dispatchLayoutEvent();
-
-            this.updateExpandIcon();
-
-            this.setCollapsedStateInStorage(!this.isExpanded());
-        }
-
-        private updateExpandIcon() {
-
-            const icon = this.isExpanded() ? colibri.ICON_CONTROL_SECTION_COLLAPSE : colibri.ICON_CONTROL_SECTION_EXPAND;
-
-            const image = ColibriPlugin.getInstance().getIcon(icon);
-
-            this._expandIconControl.setIcon(image);
-        }
-
-        getSection() {
-            return this._section;
-        }
-
-        getFormArea() {
-            return this._formArea;
-        }
-    }
-
     export class PropertyPage extends Control {
         private _sectionProvider: PropertySectionProvider;
         private _sectionPanes: PropertySectionPane[];
@@ -186,6 +40,12 @@ namespace colibri.ui.controls.properties {
 
                         const pane = new PropertySectionPane(this, section);
 
+                        if (section.getTypeHash()) {
+
+                            this.removePanesWithSameTypeHash(section.getTypeHash());
+                        }
+
+                        console.log("PropertyPage: create pane for", section.getTitle(), section.getId());
                         this.add(pane);
 
                         this._sectionPaneMap.set(section.getId(), pane);
@@ -197,7 +57,9 @@ namespace colibri.ui.controls.properties {
                 const sectionIdList = list.map(section => section.getId());
 
                 for (const pane of this._sectionPanes) {
+
                     const index = sectionIdList.indexOf(pane.getSection().getId());
+
                     pane.getElement().style.order = index.toString();
                 }
 
@@ -206,12 +68,29 @@ namespace colibri.ui.controls.properties {
             } else {
 
                 for (const pane of this._sectionPanes) {
-                    
+
                     pane.getElement().style.display = "none";
                 }
             }
         }
 
+        private removePanesWithSameTypeHash(typeHash: string) {
+
+            for (const pane of this._sectionPanes) {
+
+                const section = pane.getSection();
+
+                if (section.getTypeHash() === typeHash) {
+
+                    console.log("PropertyPage: remove dynamic pane", section.getTitle(), section.getId());
+                    this.remove(pane);
+                }
+            }
+
+            this._sectionPanes = this._sectionPanes
+                .filter(pane => pane.getSection().getTypeHash() !== typeHash);
+        }
+
         public updateWithSelection(): void {
 
             if (!this._sectionProvider) {
@@ -288,6 +167,11 @@ namespace colibri.ui.controls.properties {
                     pane.createSection();
                     section.updateWithSelection();
 
+                    if (section.isDynamicTitle()) {
+
+                        pane.updateTitle();
+                    }
+
                 } else {
 
                     pane.getElement().style.display = "none";
@@ -357,6 +241,7 @@ namespace colibri.ui.controls.properties {
         }
 
         getSectionProvider() {
+
             return this._sectionProvider;
         }
     }