Merge branch 'develop'

CHANGELOG.MD

@@ -1,5 +1,37 @@
 # Change Log
 
+## Version 3.4.0 - Aug 4, 2020
+
+## Added
+
+* User Component Editor.
+* Scene Editor: in Prefab Instance section shows a menu next to each prefab, to select all prefab instances.
+* Scene Editor: adds user property of boolean type.
+* Scene Editor: added a Compile Project command. It compiles all compilable files of the project (scenes, components).
+* Volcano project template.
+
+## Removed
+
+* **User Init Method** parameter and **Compiler Prefab Settings** section. Now you can insert code directly in the constructor of the prefab.
+* Show size info of images, atlas frames and spritesheet frames in the Inspector view.
+* Scene Editor: the Texture section shows the image size.
+* Scene Editor: removed the Compile Scenes command. The Compile Project command compiles all files including the scenes.
+* Flying Dragon project template.
+
+### Modified
+
+* Scene Editor: Object Lists are created first as temporal variables, and, if the scope is CLASS or PUBLIC, a field is generated.
+* Scene Editor: in prefab scenes, the Outline view displays the non-prefab objects with transparency.
+* Scene Editor: in prefab scenes, when the prefab object is selected, the Variable section is not shown in the Inspector view.
+* Scene Editor: a new object is added to a container if the container is selected or a child of it.
+* Scene Editor: in prefab scenes, when add an object it is added to the root object if it is a container, else, a new container is created, to wrap the root object and the newly added.
+* Inspector view: use rounded background for title and sub-titles of the sections.
+
+### Fixed
+
+* Scene Editor: fixes command to create a prefab with the selected object. The new prefab is positioned at `0,0`.
+* Scene Editor: fixes scene thumbnail generator when the scene is a prefab with a container that wraps an object.
+
 ## Version 3.3.1 - July 15, 2020
 
 ### Added

source/editor/plugins/colibri/src/ColibriPlugin.ts

@@ -8,6 +8,7 @@ namespace colibri {
     export const ICON_FOLDER = "folder";
     export const ICON_PLUS = "plus";
     export const ICON_MINUS = "minus";
+    export const ICON_DELETE = "delete";
     export const ICON_ZOOM_RESET = "zoom-reset";
     export const ICON_MENU = "menu";
     export const ICON_SMALL_MENU = "small-menu";
@@ -43,6 +44,7 @@ namespace colibri {
                     ICON_FOLDER,
                     ICON_PLUS,
                     ICON_MINUS,
+                    ICON_DELETE,
                     ICON_ZOOM_RESET,
                     ICON_MENU,
                     ICON_SMALL_MENU,

source/editor/plugins/phasereditor2d.webContentTypes/src/core/ExtensionContentTypeResolver.ts → source/editor/plugins/colibri/src/core/ContentTypeResolverByExtension.ts

@@ -1,8 +1,8 @@
-namespace phasereditor2d.webContentTypes.core {
+namespace colibri.core {
 
     import io = colibri.core.io;
 
-    export class ExtensionContentTypeResolver extends colibri.core.ContentTypeResolver {
+    export class ContentTypeResolverByExtension extends colibri.core.ContentTypeResolver {
 
         private _map: Map<string, string>;
 
@@ -28,5 +28,4 @@ namespace phasereditor2d.webContentTypes.core {
         }
 
     }
-
 }

source/editor/plugins/colibri/src/core/io/FilePath.ts

@@ -174,6 +174,7 @@ namespace colibri.core.io {
             const parent = this.getParent();
 
             if (parent) {
+
                 return parent.getFile(name);
             }
 

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

@@ -19,26 +19,31 @@ namespace colibri.ui.controls {
         }
 
         protected async paint() {
+
             if (this._image) {
 
                 this.paint2();
 
                 const result = await this._image.preload();
 
                 if (result === PreloadResult.RESOURCES_LOADED) {
+
                     this.paint2();
                 }
 
             } else {
+
                 this.clear();
             }
         }
 
         private paint2() {
+
             this.ensureCanvasSize();
+
             this.clear();
+
             this._image.paint(this._context, 0, 0, this._canvas.width, this._canvas.height, true);
         }
-
     }
 }

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

@@ -21,7 +21,7 @@ namespace colibri.ui.controls.properties {
             this._updaters = [];
         }
 
-        protected abstract createForm(parent: HTMLDivElement);
+        abstract createForm(parent: HTMLDivElement);
 
         abstract canEdit(obj: any, n: number): boolean;
 
@@ -114,7 +114,7 @@ namespace colibri.ui.controls.properties {
             return set.size === 1 ? values[0] : `(${values.length} selected)`;
         }
 
-        protected createGridElement(parent: HTMLElement, cols = 0, simpleProps = true) {
+        createGridElement(parent: HTMLElement, cols = 0, simpleProps = true) {
 
             const div = document.createElement("div");
 
@@ -133,7 +133,7 @@ namespace colibri.ui.controls.properties {
             return div;
         }
 
-        protected createLabel(parent: HTMLElement, text = "", tooltip = "") {
+        createLabel(parent: HTMLElement, text = "", tooltip = "") {
 
             const label = document.createElement("label");
 
@@ -149,7 +149,7 @@ namespace colibri.ui.controls.properties {
             return label;
         }
 
-        protected createButton(parent: HTMLElement, text: string, callback: (e?: MouseEvent) => void) {
+        createButton(parent: HTMLElement, text: string, callback: (e?: MouseEvent) => void) {
 
             const btn = document.createElement("button");
 
@@ -162,9 +162,9 @@ namespace colibri.ui.controls.properties {
             return btn;
         }
 
-        protected createMenuButton(
+        createMenuButton(
             parent: HTMLElement, text: string,
-            items: Array<{ name: string, value: any }>,
+            items: Array<{ name: string, value: any, icon?: controls.IImage }>,
             callback: (value: any) => void) {
 
             const btn = this.createButton(parent, text, e => {
@@ -175,6 +175,7 @@ namespace colibri.ui.controls.properties {
 
                     menu.add(new Action({
                         text: item.name,
+                        icon: item.icon,
                         callback: () => {
                             callback(item.value);
                         }
@@ -187,7 +188,7 @@ namespace colibri.ui.controls.properties {
             return btn;
         }
 
-        protected createText(parent: HTMLElement, readOnly = false) {
+        createText(parent: HTMLElement, readOnly = false) {
 
             const text = document.createElement("input");
 
@@ -200,7 +201,7 @@ namespace colibri.ui.controls.properties {
             return text;
         }
 
-        protected createColor(parent: HTMLElement, readOnly = false, allowAlpha = true) {
+        createColor(parent: HTMLElement, readOnly = false, allowAlpha = true) {
 
             const text = document.createElement("input");
 
@@ -307,7 +308,7 @@ namespace colibri.ui.controls.properties {
             };
         }
 
-        protected createTextArea(parent: HTMLElement, readOnly = false) {
+        createTextArea(parent: HTMLElement, readOnly = false) {
 
             const text = document.createElement("textarea");
 
@@ -321,7 +322,7 @@ namespace colibri.ui.controls.properties {
 
         private static NEXT_ID = 0;
 
-        protected createCheckbox(parent: HTMLElement, label?: HTMLLabelElement) {
+        createCheckbox(parent: HTMLElement, label?: HTMLLabelElement) {
 
             const check = document.createElement("input");
 
@@ -341,5 +342,28 @@ namespace colibri.ui.controls.properties {
 
             return check;
         }
+
+        createMenuIcon(parent: HTMLElement, menuProvider: () => Menu, alignRight = true) {
+
+            const icon = new controls.IconControl(colibri.ColibriPlugin.getInstance().getIcon(colibri.ICON_SMALL_MENU));
+
+            icon.getCanvas().classList.add("IconButton");
+
+            parent.appendChild(icon.getCanvas());
+
+            icon.getCanvas().addEventListener("click", e => {
+
+                const menu = menuProvider();
+
+                menu.createWithEvent(e);
+            });
+
+            if (alignRight) {
+
+                icon.getCanvas().style.float = "right";
+            }
+
+            return icon;
+        }
     }
 }

source/editor/plugins/colibri/src/ui/controls/viewers/IStyledLabelProvider.ts

@@ -0,0 +1,12 @@
+namespace colibri.ui.controls.viewers {
+
+    export interface IStyledText {
+        text: string;
+        color: string;
+    }
+
+    export interface IStyledLabelProvider {
+
+        getStyledTexts(obj: any, dark: boolean): IStyledText[];
+    }
+}

source/editor/plugins/colibri/src/ui/controls/viewers/TreeViewerRenderer.ts

@@ -120,8 +120,6 @@ namespace colibri.ui.controls.viewers {
 
         private renderTreeCell(args: RenderCellArgs, renderer: ICellRenderer): void {
 
-            const label = args.viewer.getLabelProvider().getLabel(args.obj);
-
             let x = args.x;
             let y = args.y;
 
@@ -157,7 +155,58 @@ namespace colibri.ui.controls.viewers {
 
             this.prepareContextForText(args);
 
-            ctx.fillText(label, x, y);
+            this.renderLabel(args, x, y);
+
+            ctx.restore();
+        }
+
+        protected renderLabel(args: RenderCellArgs, x: number, y: number) {
+
+            const styledProvider = this._viewer.getStyledLabelProvider();
+
+            const selected = this._viewer.isSelected(args.obj);
+
+            if (!selected && styledProvider) {
+
+                this.renderStyledLabel(args, x, y, styledProvider);
+
+            } else {
+
+                this.renderPlainLabel(args, x, y);
+            }
+        }
+
+        protected renderPlainLabel(args: RenderCellArgs, x: number, y: number) {
+
+            const label = args.viewer.getLabelProvider().getLabel(args.obj);
+
+            args.canvasContext.fillText(label, x, y);
+        }
+
+        protected renderStyledLabel(args: RenderCellArgs, x: number, y: number, styledProvider: IStyledLabelProvider) {
+
+            const selected = this._viewer.isSelected(args.obj);
+
+            const dark = controls.Controls.getTheme().dark;
+
+            const parts = styledProvider.getStyledTexts(args.obj, dark);
+
+            let cursor = x;
+
+            const ctx = args.canvasContext;
+
+            ctx.save();
+
+            for (const part of parts) {
+
+                ctx.fillStyle = part.color;
+
+                ctx.fillText(part.text, cursor, y);
+
+                const metrics = ctx.measureText(part.text);
+
+                cursor += metrics.width;
+            }
 
             ctx.restore();
         }