Fix #15064

packages/dev/gui/src/2D/advancedDynamicTexture.ts

@@ -1263,9 +1263,10 @@ export class AdvancedDynamicTexture extends DynamicTexture {
      * Recreate the content of the ADT from a JSON object
      * @param serializedObject define the JSON serialized object to restore from
      * @param scaleToSize defines whether to scale to texture to the saved size
+     * @param urlRewriter defines an url rewriter to update urls before sending them to the controls
      */
-    public parseSerializedObject(serializedObject: any, scaleToSize?: boolean) {
-        this._rootContainer = Control.Parse(serializedObject.root, this) as Container;
+    public parseSerializedObject(serializedObject: any, scaleToSize?: boolean, urlRewriter?: (url: string) => string) {
+        this._rootContainer = Control.Parse(serializedObject.root, this, urlRewriter) as Container;
         if (scaleToSize) {
             const width = serializedObject.width;
             const height = serializedObject.height;
@@ -1311,6 +1312,7 @@ export class AdvancedDynamicTexture extends DynamicTexture {
      * Recreate the content of the ADT from a JSON object
      * @param serializedObject define the JSON serialized object to restore from
      * @param scaleToSize defines whether to scale to texture to the saved size
+     * @param urlRewriter defines an url rewriter to update urls before sending them to the controls
      * @deprecated Please use parseSerializedObject instead
      */
     public parseContent = this.parseSerializedObject;
@@ -1320,51 +1322,65 @@ export class AdvancedDynamicTexture extends DynamicTexture {
      * @param snippetId defines the snippet to load
      * @param scaleToSize defines whether to scale to texture to the saved size
      * @param appendToAdt if provided the snippet will be appended to the adt. Otherwise a fullscreen ADT will be created.
+     * @param urlRewriter defines an url rewriter to update urls before sending them to the controls
      * @returns a promise that will resolve on success
      */
-    public static async ParseFromSnippetAsync(snippetId: string, scaleToSize?: boolean, appendToAdt?: AdvancedDynamicTexture): Promise<AdvancedDynamicTexture> {
+    public static async ParseFromSnippetAsync(
+        snippetId: string,
+        scaleToSize?: boolean,
+        appendToAdt?: AdvancedDynamicTexture,
+        urlRewriter?: (url: string) => string
+    ): Promise<AdvancedDynamicTexture> {
         const adt = appendToAdt ?? AdvancedDynamicTexture.CreateFullscreenUI("ADT from snippet");
         if (snippetId === "_BLANK") {
             return adt;
         }
 
         const serialized = await AdvancedDynamicTexture._LoadURLContentAsync(AdvancedDynamicTexture.SnippetUrl + "/" + snippetId.replace(/#/g, "/"), true);
-        adt.parseSerializedObject(serialized, scaleToSize);
+        adt.parseSerializedObject(serialized, scaleToSize, urlRewriter);
         return adt;
     }
 
     /**
      * Recreate the content of the ADT from a snippet saved by the GUI editor
      * @param snippetId defines the snippet to load
      * @param scaleToSize defines whether to scale to texture to the saved size
+     * @param urlRewriter defines an url rewriter to update urls before sending them to the controls
      * @returns a promise that will resolve on success
      */
-    public parseFromSnippetAsync(snippetId: string, scaleToSize?: boolean): Promise<AdvancedDynamicTexture> {
-        return AdvancedDynamicTexture.ParseFromSnippetAsync(snippetId, scaleToSize, this);
+    public parseFromSnippetAsync(snippetId: string, scaleToSize?: boolean, urlRewriter?: (url: string) => string): Promise<AdvancedDynamicTexture> {
+        return AdvancedDynamicTexture.ParseFromSnippetAsync(snippetId, scaleToSize, this, urlRewriter);
     }
 
     /**
      * Recreate the content of the ADT from a url json
      * @param url defines the url to load
      * @param scaleToSize defines whether to scale to texture to the saved size
      * @param appendToAdt if provided the snippet will be appended to the adt. Otherwise a fullscreen ADT will be created.
+     * @param urlRewriter defines an url rewriter to update urls before sending them to the controls
      * @returns a promise that will resolve on success
      */
-    public static async ParseFromFileAsync(url: string, scaleToSize?: boolean, appendToAdt?: AdvancedDynamicTexture): Promise<AdvancedDynamicTexture> {
+    public static async ParseFromFileAsync(
+        url: string,
+        scaleToSize?: boolean,
+        appendToAdt?: AdvancedDynamicTexture,
+        urlRewriter?: (url: string) => string
+    ): Promise<AdvancedDynamicTexture> {
         const adt = appendToAdt ?? AdvancedDynamicTexture.CreateFullscreenUI("ADT from URL");
         const serialized = await AdvancedDynamicTexture._LoadURLContentAsync(url);
-        adt.parseSerializedObject(serialized, scaleToSize);
+        adt.parseSerializedObject(serialized, scaleToSize, urlRewriter);
         return adt;
     }
 
     /**
      * Recreate the content of the ADT from a url json
      * @param url defines the url to load
      * @param scaleToSize defines whether to scale to texture to the saved size
+     * @param urlRewriter defines an url rewriter to update urls before sending them to the controls
      * @returns a promise that will resolve on success
      */
-    public parseFromURLAsync(url: string, scaleToSize?: boolean): Promise<AdvancedDynamicTexture> {
-        return AdvancedDynamicTexture.ParseFromFileAsync(url, scaleToSize, this);
+    public parseFromURLAsync(url: string, scaleToSize?: boolean, urlRewriter?: (url: string) => string): Promise<AdvancedDynamicTexture> {
+        return AdvancedDynamicTexture.ParseFromFileAsync(url, scaleToSize, this, urlRewriter);
     }
 
     private static _LoadURLContentAsync(url: string, snippet: boolean = false): Promise<any> {

packages/dev/gui/src/2D/controls/container.ts

@@ -714,8 +714,8 @@ export class Container extends Control {
     /**
      * @internal
      */
-    public override _parseFromContent(serializedObject: any, host: AdvancedDynamicTexture) {
-        super._parseFromContent(serializedObject, host);
+    public override _parseFromContent(serializedObject: any, host: AdvancedDynamicTexture, urlRewriter?: (url: string) => string) {
+        super._parseFromContent(serializedObject, host, urlRewriter);
         this._link(host);
 
         // Gradient
@@ -730,7 +730,7 @@ export class Container extends Control {
         }
 
         for (const childData of serializedObject.children) {
-            this.addControl(Control.Parse(childData, host));
+            this.addControl(Control.Parse(childData, host, urlRewriter));
         }
     }
 

packages/dev/gui/src/2D/controls/control.ts

@@ -123,6 +123,9 @@ export class Control implements IAnimatable {
     /** @internal */
     protected _rebuildLayout = false;
 
+    /** @internal */
+    protected _urlRewriter?: (url: string) => string;
+
     /**
      * Observable that fires when the control's enabled state changes
      */
@@ -2478,9 +2481,11 @@ export class Control implements IAnimatable {
      * Parses a serialized object into this control
      * @param serializedObject the object with the serialized properties
      * @param host the texture where the control will be instantiated. Can be empty, in which case the control will be created on the same texture
+     * @param urlRewriter defines an url rewriter to update urls before sending them to the controls
      * @returns this control
      */
-    public parse(serializedObject: any, host?: AdvancedDynamicTexture): Control {
+    public parse(serializedObject: any, host?: AdvancedDynamicTexture, urlRewriter?: (url: string) => string): Control {
+        this._urlRewriter = urlRewriter;
         SerializationHelper.Parse(() => this, serializedObject, null);
 
         this.name = serializedObject.name;
@@ -2533,7 +2538,7 @@ export class Control implements IAnimatable {
     /**
      * @internal
      */
-    public _parseFromContent(serializedObject: any, host: AdvancedDynamicTexture) {
+    public _parseFromContent(serializedObject: any, host: AdvancedDynamicTexture, urlRewriter?: (url: string) => string) {
         if (serializedObject.fontFamily) {
             this.fontFamily = serializedObject.fontFamily;
         }
@@ -2683,15 +2688,24 @@ export class Control implements IAnimatable {
      * Creates a Control from parsed data
      * @param serializedObject defines parsed data
      * @param host defines the hosting AdvancedDynamicTexture
+     * @param urlRewriter defines an url rewriter to update urls before sending them to the controls
      * @returns a new Control
      */
-    public static Parse(serializedObject: any, host: AdvancedDynamicTexture): Control {
+    public static Parse(serializedObject: any, host: AdvancedDynamicTexture, urlRewriter?: (url: string) => string): Control {
         const controlType = Tools.Instantiate("BABYLON.GUI." + serializedObject.className);
-        const control = SerializationHelper.Parse(() => new controlType(), serializedObject, null);
+        const control = SerializationHelper.Parse(
+            () => {
+                const newControl = new controlType() as Control;
+                newControl._urlRewriter = urlRewriter;
+                return newControl;
+            },
+            serializedObject,
+            null
+        );
 
         control.name = serializedObject.name;
 
-        control._parseFromContent(serializedObject, host);
+        control._parseFromContent(serializedObject, host, urlRewriter);
 
         return control;
     }

packages/dev/gui/src/2D/controls/image.ts

@@ -539,6 +539,10 @@ export class Image extends Control {
      * Gets or sets image source url
      */
     public set source(value: Nullable<string>) {
+        if (this._urlRewriter && value) {
+            value = this._urlRewriter(value);
+        }
+
         if (this._source === value) {
             return;
         }