Suggested PR changes for #5395

gui/src/2D/advancedDynamicTexture.ts

@@ -1,4 +1,4 @@
-import { DynamicTexture, Nullable, Observer, Camera, Engine, KeyboardInfoPre, PointerInfoPre, PointerInfo, Layer, Viewport, Scene, Texture, KeyboardEventTypes, Vector3, Matrix, Vector2, Tools, PointerEventTypes, AbstractMesh, StandardMaterial, Color3, Observable, ClipboardInfo } from 'babylonjs';
+import { DynamicTexture, Nullable, Observer, Camera, Engine, KeyboardInfoPre, PointerInfoPre, PointerInfo, ClipboardEventTypes, Layer, Viewport, Scene, Texture, KeyboardEventTypes, Vector3, Matrix, Vector2, Tools, PointerEventTypes, AbstractMesh, StandardMaterial, Color3, Observable, ClipboardInfo } from 'babylonjs';
 import { Container } from "./controls/container";
 import { Control } from "./controls/control";
 import { Style } from "./style";
@@ -21,7 +21,6 @@ export interface IFocusableControl {
      * KeyboardEvent -> handles key events
      * PointerEvent -> handles dbl click event and text highlight.
      * ClipboardInfo -> handles copy, cut, paste events.
-     * @param evt defines the current keyboard event
      */
     processKeyboard(evt: Event): void;
 
@@ -71,12 +70,16 @@ export class AdvancedDynamicTexture extends DynamicTexture {
     private _blockNextFocusCheck = false;
     private _renderScale = 1;
     private _rootCanvas: Nullable<HTMLCanvasElement>;
-    private _clipboardData: DataTransfer = new DataTransfer();
+    /**
+     * Define type to string to ensure compatibility across browsers
+     * Safari doesn't support DataTransfer constructor
+     */
+    private _clipboardData: string = "";
 
     /**
      * Observable event triggered each time an clipboard event is received from the rendering canvas
      */
-    public onClipboardObserver = new Observable<ClipboardInfo>();
+    public onClipboardObservable = new Observable<ClipboardInfo>();
 
     /**
      * Gets or sets a boolean defining if alpha is stored as premultiplied
@@ -248,10 +251,10 @@ export class AdvancedDynamicTexture extends DynamicTexture {
     /**
      * Gets or set information about clipboardData
      */
-    public get clipboardData(): DataTransfer {
+    public get clipboardData(): string {
         return this._clipboardData;
     }
-    public set clipboardData(value: DataTransfer) {
+    public set clipboardData(value: string) {
         this._clipboardData = value;
     }
 
@@ -399,8 +402,7 @@ export class AdvancedDynamicTexture extends DynamicTexture {
         }
 
         this._rootContainer.dispose();
-        this.onClipboardObserver.clear();
-        this._clipboardData.clearData();
+        this.onClipboardObservable.clear();
 
         super.dispose();
     }
@@ -615,7 +617,13 @@ export class AdvancedDynamicTexture extends DynamicTexture {
                 return;
             }
             //check for focused control and call the onClipboardPointerEvents
-            (this._focusedControl) ? ((pi.type === PointerEventTypes.POINTERDOUBLETAP) ? this._focusedControl.processKeyboard(pi.event) : null) : null;
+            if (this._focusedControl) {
+                if (pi.type === PointerEventTypes.POINTERDOUBLETAP) {
+                    this._focusedControl.processKeyboard(pi.event);
+                    return;
+                }
+
+            }
 
             if (pi.type !== PointerEventTypes.POINTERMOVE
                 && pi.type !== PointerEventTypes.POINTERUP
@@ -647,7 +655,7 @@ export class AdvancedDynamicTexture extends DynamicTexture {
             }
         });
 
-        this.onClipboardObserver.add((pi, state) => {
+        this.onClipboardObservable.add((pi, state) => {
             if (this.focusedControl) {
                 // call the event's callback
                 this.focusedControl.processKeyboard(pi.event);
@@ -657,6 +665,41 @@ export class AdvancedDynamicTexture extends DynamicTexture {
         this._attachToOnPointerOut(scene);
     }
 
+    /** @hidden */
+    private onClipboardCopy = (evt: ClipboardEvent) => {
+        let ev = new ClipboardInfo(ClipboardEventTypes.COPY, evt);
+        this.onClipboardObservable.notifyObservers(ev);
+        evt.preventDefault();
+    }
+     /** @hidden */
+    private onClipboardCut = (evt: ClipboardEvent) => {
+        let ev = new ClipboardInfo(ClipboardEventTypes.CUT, evt);
+        this.onClipboardObservable.notifyObservers(ev);
+        evt.preventDefault();
+    }
+    /** @hidden */
+    private onClipboardPaste = (evt: ClipboardEvent) => {
+        let ev = new ClipboardInfo(ClipboardEventTypes.PASTE, evt);
+        this.onClipboardObservable.notifyObservers(ev);
+    }
+
+   /**
+     * @hidden
+     */
+    protected registerClipboardEvents(): void {
+        self.addEventListener("copy", this.onClipboardCopy, false);
+        self.addEventListener("cut", this.onClipboardCut, false);
+        self.addEventListener("paste", this.onClipboardPaste, false);
+    }
+    /**
+     * @hidden
+     */
+    protected unRegisterClipboardEvents(): void {
+        self.removeEventListener("copy", this.onClipboardCopy);
+        self.removeEventListener("cut",  this.onClipboardCut);
+        self.removeEventListener("paste", this.onClipboardPaste);
+    }
+
     /**
      * Connect the texture to a hosting mesh to enable interactions
      * @param mesh defines the mesh to attach to

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

@@ -155,9 +155,6 @@ export class Control {
    */
     public onAfterDrawObservable = new Observable<Control>();
 
-    /** Observable raised when the clipboard event is raised */
-    public onClipboardObservable: Nullable<Observer<ClipboardInfo>>;
-
     /** Gets or set information about font offsets (used to render and align text) */
     public get fontOffset(): { ascent: number, height: number, descent: number } {
         return this._fontOffset;
@@ -1375,19 +1372,19 @@ export class Control {
     /** @hidden */
     private onClipboardCopy = (evt: ClipboardEvent) => {
         let ev = new ClipboardInfo(ClipboardEventTypes.COPY, evt);
-        this._host.onClipboardObserver.notifyObservers(ev);
+        this._host.onClipboardObservable.notifyObservers(ev);
         evt.preventDefault();
     }
      /** @hidden */
     private onClipboardCut = (evt: ClipboardEvent) => {
         let ev = new ClipboardInfo(ClipboardEventTypes.CUT, evt);
-        this._host.onClipboardObserver.notifyObservers(ev);
+        this._host.onClipboardObservable.notifyObservers(ev);
         evt.preventDefault();
     }
     /** @hidden */
     private onClipboardPaste = (evt: ClipboardEvent) => {
         let ev = new ClipboardInfo(ClipboardEventTypes.PASTE, evt);
-        this._host.onClipboardObserver.notifyObservers(ev);
+        this._host.onClipboardObservable.notifyObservers(ev);
     }
 
    /**

gui/src/2D/controls/inputText.ts

@@ -291,7 +291,7 @@ export class InputText extends Control implements IFocusableControl {
 
         this.onBlurObservable.notifyObservers(this);
 
-        this.unRegisterClipboardEvents();
+        this._host.unRegisterClipboardEvents();
     }
 
     /** @hidden */
@@ -317,7 +317,7 @@ export class InputText extends Control implements IFocusableControl {
             return;
         }
 
-        this.registerClipboardEvents();
+        this._host.registerClipboardEvents();
 
     }
 
@@ -484,46 +484,49 @@ export class InputText extends Control implements IFocusableControl {
     /** @hidden */
     public processKeyboard(evt: KeyboardEvent | PointerEvent | ClipboardEvent): void {
         // check the event type and call its action
-        (evt instanceof KeyboardEvent) ? this.processKey(evt.keyCode, evt.key, evt) :
-         ((evt instanceof PointerEvent) ? this._processDblClick(evt) : this._processClipboardEvent(evt));
+        if (evt instanceof KeyboardEvent) {
+            this.processKey(evt.keyCode, evt.key, evt);
+        }
+        else if (evt instanceof PointerEvent) {
+            this._processDblClick(evt);
+            evt.preventDefault();
+        }
+        else if (evt instanceof ClipboardEvent) {
+            this._processClipboardEvent(evt);
+            evt.preventDefault();
+        }
     }
 
     /**
      * Callback in case of copy event, can be configured.
-     * @param {ClipboardEvent} ev Defines the Clipboard event.
      */
     public onCopyText(ev: ClipboardEvent): void {
         this._isTextHighlightOn = false;
         ev.clipboardData.setData("text/plain", this._highlightedText);
-        this._host.clipboardData = ev.clipboardData;
-        console.log("copy succcessful");
+        this._host.clipboardData = this._highlightedText;
     }
     /**
      * Callback in case of cut event, can be configured.
-     * @param {ClipboardEvent} ev Defines the Clipboard event.
      */
     public onCutText(ev: ClipboardEvent): void {
         this.text = this._text.replace(this._highlightedText, "");
         this._isTextHighlightOn = false;
         ev.clipboardData.setData("text/plain", this._highlightedText);
-        this._host.clipboardData = ev.clipboardData;
-        console.log("cut succcessful");
+        this._host.clipboardData = this._highlightedText;
     }
     /**
      * Callback in case of paste event, can be configured.
-     * @param {ClipboardEvent} ev Defines the Clipboard event.
      */
     public onPasteText(ev: ClipboardEvent): void {
         let data: string = "";
-        if (ev.clipboardData) {
+        if (ev.clipboardData && ev.clipboardData.types.indexOf("text/plain") !== -1) {
             data = ev.clipboardData.getData("text/plain");
-            let insertPosition = this._text.length - this._cursorOffset;
-            this.text = this._text.slice(0, insertPosition) + data + this._text.slice(insertPosition);
-            console.log("paste succcessful");
         }
-        if (this._host.clipboardData) {
-            this._host.clipboardData.setData("text/plain", data);
+        else {
+            data = this._host.clipboardData;
         }
+        let insertPosition = this._text.length - this._cursorOffset;
+        this.text = this._text.slice(0, insertPosition) + data + this._text.slice(insertPosition);
     }
 
     /**
@@ -740,6 +743,5 @@ export class InputText extends Control implements IFocusableControl {
         this.onBlurObservable.clear();
         this.onFocusObservable.clear();
         this.onTextChangedObservable.clear();
-        // this.onClipboardObservable.clear();
     }
 }