js: add gesture api

doric-js/index.d.ts

@@ -95,6 +95,7 @@ declare module 'doric/lib/src/widget/index.widget' {
     export * from 'doric/lib/src/widget/nestedSlider';
     export * from 'doric/lib/src/widget/draggable';
     export * from 'doric/lib/src/widget/switch';
+    export * from 'doric/lib/src/widget/gesture';
 }
 
 declare module 'doric/lib/src/native/index.native' {
@@ -965,6 +966,44 @@ declare module 'doric/lib/src/widget/switch' {
     export function switchView(config: Partial<Switch>): Switch;
 }
 
+declare module 'doric/lib/src/widget/gesture' {
+    import { View } from "doric/lib/src/ui/view";
+    import { Stack } from "doric/lib/src/widget/layouts";
+    export enum SwipeOrientation {
+            LEFT = 0,
+            RIGHT = 1,
+            TOP = 2,
+            BOTTOM = 3
+    }
+    export class GestureContainer extends Stack {
+            onSingleTap?: () => void;
+            onDoubleTap?: () => void;
+            onLongPress?: () => void;
+            /**
+                * Called when the fingers in pinching on screen
+                * @param scale: the numeric value of scale on pinch
+                */
+            onPinch?: (scale: number) => void;
+            /**
+                * Called when the fingers are scrolling or paning
+                * @param dx: the value of the change on the x-axis
+                * @param dy: the value of the change on the y-axis
+                */
+            onPan?: (dx: number, dy: number) => void;
+            /**
+                * Called when the fingers are scrolling or paning
+                * @param dAngle: the value of the angle change from last rotate in radian
+                */
+            onRotate?: (dAngle: number) => void;
+            /**
+                * Called when the fingers has swiped on screen
+                * @param orientation: the orientation of this swipe
+                */
+            onSwipe?: (orientation: SwipeOrientation) => void;
+    }
+    export function gestureContainer(views: View | View[], config?: Partial<GestureContainer>): GestureContainer;
+}
+
 declare module 'doric/lib/src/native/modal' {
     import { BridgeContext } from "doric/lib/src/runtime/global";
     import { Gravity } from "doric/lib/src/util/gravity";

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

@@ -0,0 +1,35 @@
+import { View } from "../ui/view";
+import { Stack } from "../widget/layouts";
+export declare enum SwipeOrientation {
+    LEFT = 0,
+    RIGHT = 1,
+    TOP = 2,
+    BOTTOM = 3
+}
+export declare class GestureContainer extends Stack {
+    onSingleTap?: () => void;
+    onDoubleTap?: () => void;
+    onLongPress?: () => void;
+    /**
+     * Called when the fingers in pinching on screen
+     * @param scale: the numeric value of scale on pinch
+     */
+    onPinch?: (scale: number) => void;
+    /**
+     * Called when the fingers are scrolling or paning
+     * @param dx: the value of the change on the x-axis
+     * @param dy: the value of the change on the y-axis
+     */
+    onPan?: (dx: number, dy: number) => void;
+    /**
+     * Called when the fingers are scrolling or paning
+     * @param dAngle: the value of the angle change from last rotate in radian
+     */
+    onRotate?: (dAngle: number) => void;
+    /**
+     * Called when the fingers has swiped on screen
+     * @param orientation: the orientation of this swipe
+     */
+    onSwipe?: (orientation: SwipeOrientation) => void;
+}
+export declare function gestureContainer(views: View | View[], config?: Partial<GestureContainer>): GestureContainer;

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

@@ -0,0 +1,80 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Property, View } from "../ui/view";
+import { Stack } from "../widget/layouts";
+import { layoutConfig } from "../util/layoutconfig";
+export var SwipeOrientation;
+(function (SwipeOrientation) {
+    SwipeOrientation[SwipeOrientation["LEFT"] = 0] = "LEFT";
+    SwipeOrientation[SwipeOrientation["RIGHT"] = 1] = "RIGHT";
+    SwipeOrientation[SwipeOrientation["TOP"] = 2] = "TOP";
+    SwipeOrientation[SwipeOrientation["BOTTOM"] = 3] = "BOTTOM";
+})(SwipeOrientation || (SwipeOrientation = {}));
+export class GestureContainer extends Stack {
+}
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onSingleTap", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onDoubleTap", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onLongPress", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onPinch", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onPan", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onRotate", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], GestureContainer.prototype, "onSwipe", void 0);
+export function gestureContainer(views, config) {
+    const ret = new GestureContainer;
+    ret.layoutConfig = layoutConfig().fit();
+    if (views instanceof View) {
+        ret.addChild(views);
+    }
+    else {
+        views.forEach(e => {
+            ret.addChild(e);
+        });
+    }
+    if (config) {
+        ret.apply(config);
+    }
+    return ret;
+}

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

@@ -10,3 +10,4 @@ export * from './input';
 export * from './nestedSlider';
 export * from './draggable';
 export * from './switch';
+export * from './gesture';

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

@@ -25,3 +25,4 @@ export * from './input';
 export * from './nestedSlider';
 export * from './draggable';
 export * from './switch';
+export * from './gesture';

doric-js/src/widget/gesture.ts

@@ -0,0 +1,78 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Property, View } from "../ui/view"
+import { Stack } from "../widget/layouts"
+import { layoutConfig } from "../util/layoutconfig"
+
+export enum SwipeOrientation {
+    LEFT, RIGHT, TOP, BOTTOM
+}
+
+export class GestureContainer extends Stack {
+    @Property
+    onSingleTap?: () => void
+
+    @Property
+    onDoubleTap?: () => void
+
+    @Property
+    onLongPress?: () => void
+
+    /**
+     * Called when the fingers in pinching on screen
+     * @param scale: the numeric value of scale on pinch
+     */
+    @Property
+    onPinch?: (scale: number) => void
+
+    /**
+     * Called when the fingers are scrolling or paning
+     * @param dx: the value of the change on the x-axis
+     * @param dy: the value of the change on the y-axis
+     */
+    @Property
+    onPan?: (dx: number, dy: number) => void
+
+    /**
+     * Called when the fingers are scrolling or paning
+     * @param dAngle: the value of the angle change from last rotate in radian
+     */
+    @Property
+    onRotate?: (dAngle: number) => void
+
+    /**
+     * Called when the fingers has swiped on screen
+     * @param orientation: the orientation of this swipe
+     */
+    @Property
+    onSwipe?: (orientation: SwipeOrientation) => void
+}
+
+export function gestureContainer(views: View | View[], config?: Partial<GestureContainer>) {
+    const ret = new GestureContainer
+    ret.layoutConfig = layoutConfig().fit()
+    if (views instanceof View) {
+        ret.addChild(views)
+    } else {
+        views.forEach(e => {
+            ret.addChild(e)
+        })
+    }
+    if (config) {
+        ret.apply(config)
+    }
+    return ret
+}

doric-js/src/widget/index.widget.ts

@@ -25,3 +25,4 @@ export * from './input'
 export * from './nestedSlider'
 export * from './draggable'
 export * from './switch'
+export * from './gesture'