js: draggable deprecated & add touch api

doric-js/bundle/doric-lib.es5.js

@@ -3256,6 +3256,9 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
 var __metadata$2 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
 };
+/**
+ * @deprecated The class should not be used, please use GestureContainer class instead
+ */
 var Draggable = /** @class */ (function (_super) {
     __extends$4(Draggable, _super);
     function Draggable() {
@@ -3267,6 +3270,9 @@ var Draggable = /** @class */ (function (_super) {
     ], Draggable.prototype, "onDrag", void 0);
     return Draggable;
 }(Stack));
+/**
+ * @deprecated The function should not be used, please use gestureContainer function instead
+ */
 function draggable(views, config) {
     var ret = new Draggable;
     ret.layoutConfig = layoutConfig().fit();
@@ -3408,6 +3414,22 @@ var GestureContainer = /** @class */ (function (_super) {
         Property,
         __metadata("design:type", Function)
     ], GestureContainer.prototype, "onSwipe", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Function)
+    ], GestureContainer.prototype, "onTouchDown", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Function)
+    ], GestureContainer.prototype, "onTouchMove", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Function)
+    ], GestureContainer.prototype, "onTouchUp", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Function)
+    ], GestureContainer.prototype, "onTouchCancel", void 0);
     return GestureContainer;
 }(Stack));
 function gestureContainer(views, config) {

doric-js/bundle/doric-lib.js

@@ -2473,12 +2473,18 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
 var __metadata$2 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+/**
+ * @deprecated The class should not be used, please use GestureContainer class instead
+ */
 class Draggable extends Stack {
 }
 __decorate$2([
     Property,
     __metadata$2("design:type", Function)
 ], Draggable.prototype, "onDrag", void 0);
+/**
+ * @deprecated The function should not be used, please use gestureContainer function instead
+ */
 function draggable(views, config) {
     const ret = new Draggable;
     ret.layoutConfig = layoutConfig().fit();
@@ -2582,6 +2588,22 @@ __decorate([
     Property,
     __metadata("design:type", Function)
 ], GestureContainer.prototype, "onSwipe", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onTouchDown", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onTouchMove", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onTouchUp", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onTouchCancel", void 0);
 function gestureContainer(views, config) {
     const ret = new GestureContainer;
     ret.layoutConfig = layoutConfig().fit();

doric-js/bundle/doric-vm.js

@@ -3994,12 +3994,18 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
 var __metadata$2 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+/**
+ * @deprecated The class should not be used, please use GestureContainer class instead
+ */
 class Draggable extends Stack {
 }
 __decorate$2([
     Property,
     __metadata$2("design:type", Function)
 ], Draggable.prototype, "onDrag", void 0);
+/**
+ * @deprecated The function should not be used, please use gestureContainer function instead
+ */
 function draggable(views, config) {
     const ret = new Draggable;
     ret.layoutConfig = layoutConfig().fit();
@@ -4103,6 +4109,22 @@ __decorate([
     Property,
     __metadata("design:type", Function)
 ], GestureContainer.prototype, "onSwipe", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onTouchDown", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onTouchMove", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onTouchUp", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onTouchCancel", void 0);
 function gestureContainer(views, config) {
     const ret = new GestureContainer;
     ret.layoutConfig = layoutConfig().fit();

doric-js/index.d.ts

@@ -941,9 +941,15 @@ declare module 'doric/lib/src/widget/nestedSlider' {
 declare module 'doric/lib/src/widget/draggable' {
     import { View } from "doric/lib/src/ui/view";
     import { Stack } from "doric/lib/src/widget/layouts";
+    /**
+        * @deprecated The class should not be used, please use GestureContainer class instead
+        */
     export class Draggable extends Stack {
-        onDrag?: (x: number, y: number) => void;
+            onDrag?: (x: number, y: number) => void;
     }
+    /**
+        * @deprecated The function should not be used, please use gestureContainer function instead
+        */
     export function draggable(views: View | View[], config?: Partial<Draggable>): Draggable;
 }
 
@@ -1000,6 +1006,30 @@ declare module 'doric/lib/src/widget/gesture' {
                 * @param orientation: the orientation of this swipe
                 */
             onSwipe?: (orientation: SwipeOrientation) => void;
+            /**
+                * Called when the finger touch down on the screen
+                * @param x: the value of event occurs on the x-axis
+                * @param y: the value of event occurs on the y-axis
+                */
+            onTouchDown?: (x: number, y: number) => void;
+            /**
+                * Called when the finger moving on the screen
+                * @param x: the value of event occurs on the x-axis
+                * @param y: the value of event occurs on the y-axis
+                */
+            onTouchMove?: (x: number, y: number) => void;
+            /**
+                * Called when the finger touch up off from the screen
+                * @param x: the value of event occurs on the x-axis
+                * @param y: the value of event occurs on the y-axis
+                */
+            onTouchUp?: (x: number, y: number) => void;
+            /**
+                * Called when the finger leave from screen
+                * @param x: the value of event occurs on the x-axis
+                * @param y: the value of event occurs on the y-axis
+                */
+            onTouchCancel?: (x: number, y: number) => void;
     }
     export function gestureContainer(views: View | View[], config?: Partial<GestureContainer>): GestureContainer;
 }

doric-js/lib/src/widget/draggable.d.ts

@@ -1,6 +1,12 @@
 import { View } from "../ui/view";
 import { Stack } from "../widget/layouts";
+/**
+ * @deprecated The class should not be used, please use GestureContainer class instead
+ */
 export declare class Draggable extends Stack {
     onDrag?: (x: number, y: number) => void;
 }
+/**
+ * @deprecated The function should not be used, please use gestureContainer function instead
+ */
 export declare function draggable(views: View | View[], config?: Partial<Draggable>): Draggable;

doric-js/lib/src/widget/draggable.js

@@ -25,12 +25,18 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { Property, View } from "../ui/view";
 import { Stack } from "../widget/layouts";
 import { layoutConfig } from "../util/layoutconfig";
+/**
+ * @deprecated The class should not be used, please use GestureContainer class instead
+ */
 export class Draggable extends Stack {
 }
 __decorate([
     Property,
     __metadata("design:type", Function)
 ], Draggable.prototype, "onDrag", void 0);
+/**
+ * @deprecated The function should not be used, please use gestureContainer function instead
+ */
 export function draggable(views, config) {
     const ret = new Draggable;
     ret.layoutConfig = layoutConfig().fit();

doric-js/lib/src/widget/gesture.d.ts

@@ -31,5 +31,29 @@ export declare class GestureContainer extends Stack {
      * @param orientation: the orientation of this swipe
      */
     onSwipe?: (orientation: SwipeOrientation) => void;
+    /**
+     * Called when the finger touch down on the screen
+     * @param x: the value of event occurs on the x-axis
+     * @param y: the value of event occurs on the y-axis
+     */
+    onTouchDown?: (x: number, y: number) => void;
+    /**
+     * Called when the finger moving on the screen
+     * @param x: the value of event occurs on the x-axis
+     * @param y: the value of event occurs on the y-axis
+     */
+    onTouchMove?: (x: number, y: number) => void;
+    /**
+     * Called when the finger touch up off from the screen
+     * @param x: the value of event occurs on the x-axis
+     * @param y: the value of event occurs on the y-axis
+     */
+    onTouchUp?: (x: number, y: number) => void;
+    /**
+     * Called when the finger leave from screen
+     * @param x: the value of event occurs on the x-axis
+     * @param y: the value of event occurs on the y-axis
+     */
+    onTouchCancel?: (x: number, y: number) => void;
 }
 export declare function gestureContainer(views: View | View[], config?: Partial<GestureContainer>): GestureContainer;

doric-js/lib/src/widget/gesture.js

@@ -62,6 +62,22 @@ __decorate([
     Property,
     __metadata("design:type", Function)
 ], GestureContainer.prototype, "onSwipe", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onTouchDown", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onTouchMove", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onTouchUp", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onTouchCancel", void 0);
 export function gestureContainer(views, config) {
     const ret = new GestureContainer;
     ret.layoutConfig = layoutConfig().fit();

doric-js/src/widget/draggable.ts

@@ -17,11 +17,17 @@ import { Property, View } from "../ui/view"
 import { Stack } from "../widget/layouts"
 import { layoutConfig } from "../util/layoutconfig"
 
+/**
+ * @deprecated The class should not be used, please use GestureContainer class instead
+ */
 export class Draggable extends Stack {
     @Property
     onDrag?: (x: number, y: number) => void
 }
 
+/**
+ * @deprecated The function should not be used, please use gestureContainer function instead
+ */
 export function draggable(views: View | View[], config?: Partial<Draggable>) {
     const ret = new Draggable
     ret.layoutConfig = layoutConfig().fit()

doric-js/src/widget/gesture.ts

@@ -59,6 +59,38 @@ export class GestureContainer extends Stack {
      */
     @Property
     onSwipe?: (orientation: SwipeOrientation) => void
+
+    /**
+     * Called when the finger touch down on the screen
+     * @param x: the value of event occurs on the x-axis
+     * @param y: the value of event occurs on the y-axis
+     */
+    @Property
+    onTouchDown?: (x: number, y: number) => void
+
+    /**
+     * Called when the finger moving on the screen
+     * @param x: the value of event occurs on the x-axis
+     * @param y: the value of event occurs on the y-axis
+     */
+    @Property
+    onTouchMove?: (x: number, y: number) => void
+
+    /**
+     * Called when the finger touch up off from the screen
+     * @param x: the value of event occurs on the x-axis
+     * @param y: the value of event occurs on the y-axis
+     */
+    @Property
+    onTouchUp?: (x: number, y: number) => void
+
+    /**
+     * Called when the finger leave from screen
+     * @param x: the value of event occurs on the x-axis
+     * @param y: the value of event occurs on the y-axis
+     */
+    @Property
+    onTouchCancel?: (x: number, y: number) => void
 }
 
 export function gestureContainer(views: View | View[], config?: Partial<GestureContainer>) {

doric-web/dist/index.js

@@ -4048,12 +4048,18 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
 var __metadata$2 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+/**
+ * @deprecated The class should not be used
+ */
 class Draggable extends Stack {
 }
 __decorate$2([
     Property,
     __metadata$2("design:type", Function)
 ], Draggable.prototype, "onDrag", void 0);
+/**
+ * @deprecated The function should not be used
+ */
 function draggable(views, config) {
     const ret = new Draggable;
     ret.layoutConfig = layoutConfig().fit();
@@ -4157,6 +4163,22 @@ __decorate([
     Property,
     __metadata("design:type", Function)
 ], GestureContainer.prototype, "onSwipe", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onTouchDown", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onTouchMove", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onTouchUp", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onTouchCancel", void 0);
 function gestureContainer(views, config) {
     const ret = new GestureContainer;
     ret.layoutConfig = layoutConfig().fit();