fixes for clipboard events at ADT

dist/preview release/what's new.md

@@ -15,6 +15,7 @@
   - WebXRInput manage controllers for the XR experience ([TrevorDev](https://github.com/TrevorDev))
 - GUI:
   - Added new [ImageBasedSlider](http://doc.babylonjs.com/how_to/gui#imagebasedslider) to let users customize sliders using images ([Deltakosh](https://github.com/deltakosh))
+  - Added new Clipboard events [Saket Saurabh](https://github.com/ssaket)
 
 ## Updates
 
@@ -23,6 +24,7 @@
 - Added `button.image` and `button.textBlock` to simplify access to button internal parts ([Deltakosh](https://github.com/deltakosh))
 - Added `sldier.displayThumb` to show/hide slider's thumb ([Deltakosh](https://github.com/deltakosh))
 - Added `grid.rowCount`, `grid.columnCount` and `grid.getChildrenAt()` ([Deltakosh](https://github.com/deltakosh))
+- Added clipboard event `cut`, `copy`, `paste` to AdvanceDynamicTexture ([Saket Saurabh](https://github.com/ssaket]))
 
 ### Core Engine
 

gui/src/2D/advancedDynamicTexture.ts

@@ -21,6 +21,7 @@ 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 base Event object, can be (PointerEvent, KeyboardEvent and ClipboardEvent)
      */
     processKeyboard(evt: Event): void;
 
@@ -684,17 +685,17 @@ export class AdvancedDynamicTexture extends DynamicTexture {
     }
 
    /**
-     * @hidden
-     */
-    protected registerClipboardEvents(): void {
+    * Register the clipboard Events onto the canvas
+    */
+    public registerClipboardEvents(): void {
         self.addEventListener("copy", this.onClipboardCopy, false);
         self.addEventListener("cut", this.onClipboardCut, false);
         self.addEventListener("paste", this.onClipboardPaste, false);
     }
     /**
-     * @hidden
+     * Unregister the clipboard Events from the canvas
      */
-    protected unRegisterClipboardEvents(): void {
+    public unRegisterClipboardEvents(): void {
         self.removeEventListener("copy", this.onClipboardCopy);
         self.removeEventListener("cut",  this.onClipboardCut);
         self.removeEventListener("paste", this.onClipboardPaste);

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

@@ -1,7 +1,7 @@
 import { Container } from "./container";
 import { AdvancedDynamicTexture } from "../advancedDynamicTexture";
 import { ValueAndUnit } from "../valueAndUnit";
-import { Nullable, Observer, Vector2, AbstractMesh, Observable, Vector3, Scene, Tools, Matrix, PointerEventTypes, ClipboardInfo, ClipboardEventTypes } from "babylonjs";
+import { Nullable, Observer, Vector2, AbstractMesh, Observable, Vector3, Scene, Tools, Matrix, PointerEventTypes } from "babylonjs";
 import { Measure } from "../measure";
 import { Style } from "../style";
 import { Matrix2D, Vector2WithInfo } from "../math2D";
@@ -1369,41 +1369,6 @@ export class Control {
         return false;
     }
 
-    /** @hidden */
-    private onClipboardCopy = (evt: ClipboardEvent) => {
-        let ev = new ClipboardInfo(ClipboardEventTypes.COPY, evt);
-        this._host.onClipboardObservable.notifyObservers(ev);
-        evt.preventDefault();
-    }
-     /** @hidden */
-    private onClipboardCut = (evt: ClipboardEvent) => {
-        let ev = new ClipboardInfo(ClipboardEventTypes.CUT, evt);
-        this._host.onClipboardObservable.notifyObservers(ev);
-        evt.preventDefault();
-    }
-    /** @hidden */
-    private onClipboardPaste = (evt: ClipboardEvent) => {
-        let ev = new ClipboardInfo(ClipboardEventTypes.PASTE, evt);
-        this._host.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);
-    }
-
     private _prepareFont() {
         if (!this._font && !this._fontSet) {
             return;

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

@@ -344,6 +344,17 @@ export class InputText extends Control implements IFocusableControl {
         if (evt && (evt.ctrlKey || evt.metaKey) && clipboardEventType !== -1) {
             return;
         }
+
+        //select all
+        if (evt && (evt.ctrlKey || evt.metaKey) && keyCode === 65) {
+            this._startHighlightIndex = 0;
+            this._endHighlightIndex = this._text.length;
+            this._isTextHighlightOn = true;
+            this._blinkIsEven = true;
+            this._cursorOffset = 0;
+            evt.preventDefault();
+            return;
+        }
         // Specific cases
         switch (keyCode) {
             case 32: //SPACE
@@ -356,12 +367,18 @@ export class InputText extends Control implements IFocusableControl {
                 break;
             case 8: // BACKSPACE
                 if (this._text && this._text.length > 0) {
+                    //delete the highlighted text
                     if (this._isTextHighlightOn) {
                         this.text = this._text.slice(0, this._startHighlightIndex) + this._text.slice(this._endHighlightIndex);
                         this._isTextHighlightOn = false;
+                        this._cursorOffset =  this.text.length - this._startHighlightIndex;
                         this._blinkIsEven = false;
+                        if (evt) {
+                            evt.preventDefault();
+                        }
                         return;
                     }
+                    //delete individual character
                     if (this._cursorOffset === 0) {
                         this.text = this._text.substr(0, this._text.length - 1);
                     } else {
@@ -383,6 +400,10 @@ export class InputText extends Control implements IFocusableControl {
                         this._cursorOffset--;
                     }
                     this._isTextHighlightOn = false;
+                    this._cursorOffset = this.text.length - this._startHighlightIndex;
+                    if (evt) {
+                        evt.preventDefault();
+                    }
                     return;
                 }
                 if (this._text && this._text.length > 0  && this._cursorOffset > 0) {
@@ -390,6 +411,9 @@ export class InputText extends Control implements IFocusableControl {
                     this.text = this._text.slice(0, deletePosition) + this._text.slice(deletePosition + 1);
                     this._cursorOffset--;
                 }
+                if (evt) {
+                    evt.preventDefault();
+                }
                 return;
             case 13: // RETURN
                 this._host.focusedControl = null;
@@ -481,7 +505,10 @@ export class InputText extends Control implements IFocusableControl {
         this._blinkIsEven = false;
     }
 
-    /** @hidden */
+    /**
+     * Called by the onClipboardObservable of AdvanceDynamicTexture
+     * @param evt Event object
+     */
     public processKeyboard(evt: KeyboardEvent | PointerEvent | ClipboardEvent): void {
         // check the event type and call its action
         if (evt instanceof KeyboardEvent) {
@@ -499,23 +526,40 @@ export class InputText extends Control implements IFocusableControl {
 
     /**
      * Callback in case of copy event, can be configured.
+     * @param ev ClipboardEvent
      */
     public onCopyText(ev: ClipboardEvent): void {
         this._isTextHighlightOn = false;
-        ev.clipboardData.setData("text/plain", this._highlightedText);
+        //when write permission to clipbaord data is denied
+        try {
+            ev.clipboardData.setData("text/plain", this._highlightedText);
+        }
+        catch {
+            //pass
+        }
         this._host.clipboardData = this._highlightedText;
     }
     /**
      * Callback in case of cut event, can be configured.
+     * @param ev ClipboardEvent
      */
     public onCutText(ev: ClipboardEvent): void {
-        this.text = this._text.replace(this._highlightedText, "");
+        this.text = this._text.slice(0, this._startHighlightIndex) + this._text.slice(this._endHighlightIndex);
         this._isTextHighlightOn = false;
-        ev.clipboardData.setData("text/plain", this._highlightedText);
+        this._cursorOffset = this.text.length - this._startHighlightIndex;
+        //when write permission to clipbaord data is denied
+        try {
+            ev.clipboardData.setData("text/plain", this._highlightedText);
+        }
+        catch {
+            //pass
+        }
+
         this._host.clipboardData = this._highlightedText;
     }
     /**
      * Callback in case of paste event, can be configured.
+     * @param ev ClipboardEvent
      */
     public onPasteText(ev: ClipboardEvent): void {
         let data: string = "";

src/Events/babylon.clipboardEvents.ts

@@ -5,7 +5,7 @@ module BABYLON {
      */
     export class ClipboardEventTypes {
         /**
-         * T he clipboard event is fired when a copy command is active (pressed).
+         * The clipboard event is fired when a copy command is active (pressed).
          */
         public static readonly COPY = 0x01; //
         /**
@@ -23,10 +23,6 @@ module BABYLON {
      */
     export class ClipboardInfo {
         /**
-         * Instantiates a new ClipboardInfo info.
-         * @param {number} type Defines the type of event (BABYLON.ClipboardEventTypes)
-         * @param {ClipboardEvent} event Defines the related dom event
-        /**
          *Creates an instance of ClipboardInfo.
          * @param {number} type
          * @param {ClipboardEvent} event
@@ -40,25 +36,6 @@ module BABYLON {
              * Defines the related dom event
              */
             public event: ClipboardEvent) {
-                /**
-                 *  initialize the clipboard data
-                */
-                this._clipboardData = new DataTransfer();
-        }
-        /**
-         * Stores the clipboard data
-         * @type {DataTransfer}
-         */
-        private _clipboardData: DataTransfer;
-
-        /**
-         * Getter, setter for clipboardData
-         */
-        public get clipboardData(): DataTransfer {
-            return this._clipboardData;
-        }
-        public set clipboardData(value: DataTransfer) {
-            this._clipboardData = value;
         }
 
        /**