Merge branch 'develop'

PhaserEditor2D · Dec 7, 2020 · 785d12b · 785d12b
2 parents 6439fd8 + 59898db
commit 785d12b
Show file tree

Hide file tree

Showing 31 changed files with 3,500 additions and 103 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -1,5 +1,14 @@
 # Change Log
 
+## Version 3.9.2 - Dec 7, 2020
+
+* Viewer: massive improvement of rendering performance.
+* Viewer: fixes layout request in filtered viewers.
+* Viewer-based dialogs: allows open an item with the Enter key.
+* Scene Editor: caches scene file thumbnails in local browser Indexed DB. 
+* Scene Editor: more accuracy on thumbnail generation of container-based prefabs.
+* Restore custom "alert" message dialog.
+
 ## Version 3.9.1 - Nov 30, 2020
 
 * Check if a new version is available at startup.

diff --git a/source/editor/plugins/colibri/src/core/io/FileContentCache.ts b/source/editor/plugins/colibri/src/core/io/FileContentCache.ts
@@ -1,14 +1,25 @@
 namespace colibri.core.io {
 
-    export declare type GetFileContent<T> = (file: FilePath) => Promise<T>;
+    export declare type GetFileContent<T> = (file: FilePath, force?:boolean) => Promise<T>;
 
     export declare type SetFileContent<T> = (file: FilePath, content: T) => Promise<void>;
 
+    export interface IContentCacheMap<T> {
+
+        has(key: string): boolean;
+
+        delete(key: string): void;
+
+        set(key: string, value: ContentEntry<T>): void;
+
+        get(key: string): ContentEntry<T>;
+    }
+
     export class FileContentCache<T> {
 
         private _backendGetContent: GetFileContent<T>;
         private _backendSetContent: SetFileContent<T>;
-        private _map: Map<string, ContentEntry<T>>;
+        private _map: IContentCacheMap<T>;
         private _preloadMap: Map<string, Promise<ui.controls.PreloadResult>>;
 
         constructor(getContent: GetFileContent<T>, setContent?: SetFileContent<T>) {
@@ -30,6 +41,7 @@ namespace colibri.core.io {
             const filename = file.getFullName();
 
             if (this._preloadMap.has(filename)) {
+
                 return this._preloadMap.get(filename);
             }
 
@@ -38,10 +50,11 @@ namespace colibri.core.io {
             if (entry) {
 
                 if (!force && entry.modTime === file.getModTime()) {
+
                     return ui.controls.Controls.resolveNothingLoaded();
                 }
 
-                const promise2 = this._backendGetContent(file)
+                const promise2 = this._backendGetContent(file, force)
 
                     .then((content) => {
 
@@ -58,7 +71,7 @@ namespace colibri.core.io {
                 return promise2;
             }
 
-            const promise = this._backendGetContent(file)
+            const promise = this._backendGetContent(file, force)
 
                 .then((content) => {
 
@@ -116,5 +129,4 @@ namespace colibri.core.io {
         ) {
         }
     }
-
 }
diff --git a/source/editor/plugins/colibri/src/ui/controls/Controls.ts b/source/editor/plugins/colibri/src/ui/controls/Controls.ts
@@ -54,11 +54,46 @@ namespace colibri.ui.controls {
             return ctx;
         }
 
+        private static _charWidthMap: Map<string, number> = new Map();
+        private static _textWidthMap: Map<string, number> = new Map();
+
         static measureTextWidth(context: CanvasRenderingContext2D, label: string) {
 
-            const measure = context.measureText(label);
+            const font = FONT_FAMILY + FONT_HEIGHT;
+
+            const textKey = font + "@" + label;
+
+            let width = 0;
+
+            if (this._textWidthMap.has(textKey)) {
+
+                width = this._textWidthMap.get(textKey);
+
+            } else {
+
+                for (const c of label) {
+
+                    const key = font + "@" + c;
+
+                    let charWidth = 0;
+
+                    if (this._charWidthMap.has(key)) {
+
+                        charWidth = this._charWidthMap.get(key);
+
+                    } else {
+
+                        charWidth = context.measureText(c).width;
+                        this._charWidthMap.set(key, charWidth);
+                    }
+
+                    width += charWidth;
+                }
+
+                this._textWidthMap.set(textKey, width);
+            }
 
-            return measure.width * DEVICE_PIXEL_RATIO;
+            return width * DEVICE_PIXEL_RATIO;
         }
 
         static setDragEventImage(e: DragEvent, render: (ctx: CanvasRenderingContext2D, w: number, h: number) => void) {

diff --git a/source/editor/plugins/colibri/src/ui/controls/ImageFrame.ts b/source/editor/plugins/colibri/src/ui/controls/ImageFrame.ts
@@ -72,16 +72,17 @@ namespace colibri.ui.controls {
 
         paintFrame(context: CanvasRenderingContext2D,
 
-                   srcX: number, srcY: number, scrW: number, srcH: number,
+            srcX: number, srcY: number, scrW: number, srcH: number,
 
-                   dstX: number, dstY: number, dstW: number, dstH: number): void {
+            dstX: number, dstY: number, dstW: number, dstH: number): void {
 
             // not implemented fow now
         }
 
         preload(): Promise<PreloadResult> {
 
             if (this._image === null) {
+
                 return controls.Controls.resolveNothingLoaded();
             }
 

diff --git a/source/editor/plugins/colibri/src/ui/controls/ImageWrapper.ts b/source/editor/plugins/colibri/src/ui/controls/ImageWrapper.ts
@@ -57,6 +57,11 @@ namespace colibri.ui.controls {
 
             return 0;
         }
+
+        getImageElement() {
+
+            return this._imageElement;
+        }
     }
 
 }
diff --git a/source/editor/plugins/colibri/src/ui/controls/ScrollPane.ts b/source/editor/plugins/colibri/src/ui/controls/ScrollPane.ts
@@ -43,32 +43,44 @@ namespace colibri.ui.controls {
         }
 
         getViewer() {
+
             if (this._clientControl instanceof viewers.ViewerContainer) {
+
                 return this._clientControl.getViewer();
             }
+
             return this._clientControl;
         }
 
         updateScroll(clientContentHeight: number) {
+
             const scrollY = this.getViewer().getScrollY();
+
             const b = this.getBounds();
+
             let newScrollY = scrollY;
             newScrollY = Math.max(-this._clientContentHeight + b.height, newScrollY);
             newScrollY = Math.min(0, newScrollY);
 
             if (newScrollY !== scrollY) {
+
                 this._clientContentHeight = clientContentHeight;
                 this.setClientScrollY(scrollY);
+
             } else if (clientContentHeight !== this._clientContentHeight) {
+
                 this._clientContentHeight = clientContentHeight;
                 this.layout();
             }
         }
 
         private onBarMouseDown(e: MouseEvent) {
+
             if (e.target !== this._scrollBar) {
+
                 return;
             }
+
             e.stopImmediatePropagation();
             const b = this.getBounds();
             this.setClientScrollY(- e.offsetY / b.height * (this._clientContentHeight - b.height));
@@ -77,6 +89,7 @@ namespace colibri.ui.controls {
         private onClientWheel(e: WheelEvent) {
 
             if (e.shiftKey || e.ctrlKey || e.metaKey || e.altKey) {
+
                 return;
             }
 
@@ -103,15 +116,20 @@ namespace colibri.ui.controls {
         private _startScrollY = 0;
 
         private onMouseDown(e: MouseEvent) {
+
             if (e.target === this._scrollHandler) {
+
                 e.stopImmediatePropagation();
+
                 this._startDragY = e.y;
                 this._startScrollY = this.getViewer().getScrollY();
             }
         }
 
         private onMouseMove(e: MouseEvent) {
+
             if (this._startDragY !== -1) {
+
                 let delta = e.y - this._startDragY;
                 const b = this.getBounds();
                 delta = delta / b.height * this._clientContentHeight;
@@ -120,21 +138,27 @@ namespace colibri.ui.controls {
         }
 
         private onMouseUp(e: MouseEvent) {
+
             if (this._startDragY !== -1) {
+
                 e.stopImmediatePropagation();
                 this._startDragY = -1;
             }
         }
 
         getBounds() {
+
             const b = this.getElement().getBoundingClientRect();
+
             return { x: 0, y: 0, width: b.width, height: b.height };
         }
 
         layout(): void {
+
             const b = this.getBounds();
 
             if (b.height < this._clientContentHeight) {
+
                 this._scrollHandler.style.display = "block";
                 const h = Math.max(10, b.height / this._clientContentHeight * b.height);
                 const y = -(b.height - h) * this.getViewer().getScrollY() / (this._clientContentHeight - b.height);
@@ -143,8 +167,11 @@ namespace colibri.ui.controls {
                     y: y,
                     height: h
                 });
+
                 this.removeClass("hideScrollBar");
+
             } else {
+
                 this.addClass("hideScrollBar");
             }
 

diff --git a/source/editor/plugins/colibri/src/ui/controls/dialogs/AbstractViewerDialog.ts b/source/editor/plugins/colibri/src/ui/controls/dialogs/AbstractViewerDialog.ts
@@ -26,6 +26,7 @@ namespace colibri.ui.controls.dialogs {
         }
 
         getViewer() {
+
             return this._viewer;
         }
 
@@ -39,6 +40,7 @@ namespace colibri.ui.controls.dialogs {
             this.resize();
 
             if (this._viewer) {
+
                 this._viewer.repaint();
             }
         }
@@ -85,9 +87,9 @@ namespace colibri.ui.controls.dialogs {
 
             const inputElement = this.getFilteredViewer().getFilterControl().getElement();
 
-            inputElement.addEventListener("keyup", e => {
+            const listener = e => {
 
-                if (e.keyCode === 13) {
+                if (e.key === "Enter") {
 
                     e.preventDefault();
 
@@ -111,7 +113,10 @@ namespace colibri.ui.controls.dialogs {
                         btn.click();
                     }
                 }
-            });
+            };
+
+            inputElement.addEventListener("keyup", listener);
+            this.getViewer().getElement().addEventListener("keyup", listener);
 
             return btn;
         }

diff --git a/source/editor/plugins/colibri/src/ui/controls/dialogs/Dialog.ts b/source/editor/plugins/colibri/src/ui/controls/dialogs/Dialog.ts
@@ -168,7 +168,7 @@ namespace colibri.ui.controls.dialogs {
 
             inputElement.addEventListener("keyup", e => {
 
-                if (e.keyCode === 13) {
+                if (e.key === "Enter") {
 
                     e.preventDefault();
 

diff --git a/source/editor/plugins/colibri/src/ui/controls/globals.ts b/source/editor/plugins/colibri/src/ui/controls/globals.ts
@@ -3,6 +3,7 @@ namespace colibri.ui.controls {
     export const CONTROL_PADDING = 3;
     export const ROW_HEIGHT = 20;
     export const FONT_HEIGHT = 14;
+    export const FONT_WITH = 12;
     export const FONT_OFFSET = 2;
     export const FONT_FAMILY = "Arial, Helvetica, sans-serif";
     export const ACTION_WIDTH = 20;

diff --git a/source/editor/plugins/colibri/src/ui/controls/viewers/FilteredViewer.ts b/source/editor/plugins/colibri/src/ui/controls/viewers/FilteredViewer.ts
@@ -36,7 +36,8 @@ namespace colibri.ui.controls.viewers {
                 this.addZoomControl();
             }
 
-            setTimeout(() => this.layout(), 1);
+            //setTimeout(() => this.layout(), 1);
+            requestAnimationFrame(() => this.layout());
         }
 
         private addZoomControl() {
@@ -204,6 +205,7 @@ namespace colibri.ui.controls.viewers {
         }
 
         layout() {
+
             this._viewerContainer.layout();
             this._scrollPane.layout();
         }