@nativescript-community/gesturehandler 0.2.0 → 2.0.0

package/packages/gesturehandler/README.md

@@ -0,0 +1,176 @@
+<!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️-->
+<!--  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      DO NOT EDIT THIS READEME DIRECTLY! Edit "bluesprint.md" instead.
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
+<h1 align="center">@nativescript-community/gesturehandler</h1>
+<p align="center">
+		<a href="https://npmcharts.com/compare/@nativescript-community/gesturehandler?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@nativescript-community/gesturehandler.svg" height="20"/></a>
+<a href="https://www.npmjs.com/package/@nativescript-community/gesturehandler"><img alt="NPM Version" src="https://img.shields.io/npm/v/@nativescript-community/gesturehandler.svg" height="20"/></a>
+	</p>
+
+<p align="center">
+  <b>Declarative API exposing platform native touch and gesture system to NativeScript.</b></br>
+  <sub><sub>
+</p>
+
+<br />
+
+
+
+[](#table-of-contents)
+
+## Table of Contents
+
+* [Installation](#installation)
+* [API](#api)
+			* [TypeScript](#typescript)
+* [GestureRootView](#gesturerootview)
+* [Overriding Nativescript gestures](#overriding-nativescript-gestures)
+* [Credits](#credits)
+	* [Examples:](#examples)
+* [Demos and Development](#demos-and-development)
+	* [Setup](#setup)
+	* [Build](#build)
+	* [Demos](#demos)
+* [Questions](#questions)
+
+
+[](#installation)
+
+## Installation
+Run the following command from the root of your project:
+
+`ns plugin add @nativescript-community/gesturehandler`
+
+
+[](#api)
+
+## API
+
+We need to do some wiring when your app starts, so open `app.ts` and add this before creating any View/App/Frame:
+##### TypeScript
+```ts
+import { install } from "@nativescript-community/gesturehandler";
+install();
+```
+
+You create a gesture handler using something like this:
+```typescript 
+import { GestureHandlerTouchEvent, GestureHandlerStateEvent, GestureStateEventData, GestureTouchEventData, HandlerType } from '@nativescript-community/gesturehandler';
+
+
+function onGestureTouch(args: GestureTouchEventData) {
+    const { state, extraData, view } = args.data;
+    view.translateX = extraData.translationX;
+    view.translateY = extraData.translationY;
+}
+function onGestureState(args: GestureStateEventData) {
+    const { state, prevState, extraData, view } = args.data;
+    console.log('onGestureState', state, prevState, view, extraData);
+}
+const manager = Manager.getInstance();
+const gestureHandler = = manager.createGestureHandler(HandlerType.PAN, 10, {
+    shouldCancelWhenOutside: false
+});
+gestureHandler.on(GestureHandlerTouchEvent, onGestureTouch, this);
+gestureHandler.on(GestureHandlerStateEvent, onGestureState, this);
+gestureHandler.attachToView(view);
+```
+
+Right now you must not forget to store the ```gestureHandler``` somewhere or the gesture won't work on iOS (native object being released). This will be fixed in future versions.
+
+Now about the API. All the gestures for the react counterpart exist with the same options and the same event ```extraData```.
+
+
+[](#gesturerootview)
+
+## GestureRootView
+
+For the gestures to work correctly we need a `root` view which knows how to handle the gestures.
+If using `Page` (thus `Frame`) you don't need to do anything.
+In case you don't (drawer root view, modals, ...) then you can wrap your views in a `GestureRootView` which inherits `GridLayout`
+
+
+[](#overriding-nativescript-gestures)
+
+## Overriding Nativescript gestures
+
+This plugin can also override N gestures completely. This would give much more control over gestures and especially would allow to correctly handle simultaneous gestures likes `tap` and `longpress`
+
+To do that 
+
+
+[](#credits)
+
+## Credits
+
+This is a port of [react-native-gesturehandler](https://kmagiera.github.io/react-native-gesture-handler/).
+The source is based on the source code by [Krzysztof Magiera](https://github.com/kmagiera). Dont hesitate to go and thank him for his work!
+
+
+
+### Examples:
+
+- [Basic](demo-snippets/vue/Basic.vue)
+  - A basic example showing that overriding N gestures works, even in modals
+
+
+[](#demos-and-development)
+
+## Demos and Development
+
+
+### Setup
+
+To run the demos, you must clone this repo **recursively**.
+
+```
+git clone https://github.com/@nativescript-community/gesturehandler.git --recursive
+```
+
+**Install Dependencies:**
+```bash
+npm i # or 'yarn install' or 'pnpm install'
+```
+
+**Interactive Menu:**
+
+To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.
+
+### Build
+
+```bash
+npm run build
+
+npm run build.angular # or for Angular
+```
+
+### Demos
+
+```bash
+npm run demo.[ng|react|svelte|vue].[ios|android]
+
+npm run demo.svelte.ios # Example
+```
+
+[](#questions)
+
+## Questions
+
+If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).

package/packages/gesturehandler/blueprint.md

@@ -0,0 +1,74 @@
+{{ load:../../tools/readme/edit-warning.md }}
+{{ template:title }}
+{{ template:badges }}
+{{ template:description }}
+
+{{ template:toc }}
+
+## Installation
+Run the following command from the root of your project:
+
+`ns plugin add {{ pkg.name }}`
+
+## API
+
+We need to do some wiring when your app starts, so open `app.ts` and add this before creating any View/App/Frame:
+##### TypeScript
+```ts
+import { install } from "@nativescript-community/gesturehandler";
+install();
+```
+
+You create a gesture handler using something like this:
+```typescript 
+import { GestureHandlerTouchEvent, GestureHandlerStateEvent, GestureStateEventData, GestureTouchEventData, HandlerType } from '@nativescript-community/gesturehandler';
+
+
+function onGestureTouch(args: GestureTouchEventData) {
+    const { state, extraData, view } = args.data;
+    view.translateX = extraData.translationX;
+    view.translateY = extraData.translationY;
+}
+function onGestureState(args: GestureStateEventData) {
+    const { state, prevState, extraData, view } = args.data;
+    console.log('onGestureState', state, prevState, view, extraData);
+}
+const manager = Manager.getInstance();
+const gestureHandler = = manager.createGestureHandler(HandlerType.PAN, 10, {
+    shouldCancelWhenOutside: false
+});
+gestureHandler.on(GestureHandlerTouchEvent, onGestureTouch, this);
+gestureHandler.on(GestureHandlerStateEvent, onGestureState, this);
+gestureHandler.attachToView(view);
+```
+
+Right now you must not forget to store the ```gestureHandler``` somewhere or the gesture won't work on iOS (native object being released). This will be fixed in future versions.
+
+Now about the API. All the gestures for the react counterpart exist with the same options and the same event ```extraData```.
+
+## GestureRootView
+
+For the gestures to work correctly we need a `root` view which knows how to handle the gestures.
+If using `Page` (thus `Frame`) you don't need to do anything.
+In case you don't (drawer root view, modals, ...) then you can wrap your views in a `GestureRootView` which inherits `GridLayout`
+
+## Overriding Nativescript gestures
+
+This plugin can also override N gestures completely. This would give much more control over gestures and especially would allow to correctly handle simultaneous gestures likes `tap` and `longpress`
+
+To do that 
+
+## Credits
+
+This is a port of [react-native-gesturehandler](https://kmagiera.github.io/react-native-gesture-handler/).
+The source is based on the source code by [Krzysztof Magiera](https://github.com/kmagiera). Dont hesitate to go and thank him for his work!
+
+
+
+### Examples:
+
+- [Basic](demo-snippets/vue/Basic.vue)
+  - A basic example showing that overriding N gestures works, even in modals
+
+{{ load:../../tools/readme/demos-and-development.md }}
+{{ load:../../tools/readme/questions.md }}

package/packages/gesturehandler/package.json

@@ -0,0 +1,52 @@
+{
+    "name": "@nativescript-community/gesturehandler",
+    "version": "0.2.1",
+    "description": "Declarative API exposing platform native touch and gesture system to NativeScript.",
+    "main": "gesturehandler",
+    "sideEffects": false,
+    "typings": "gesturehandler.d.ts",
+    "scripts": {
+        "build": "npm run tsc && npm run readme",
+        "build.win": "npm run tsc.win && npm run readme",
+        "build.all": "npm run build",
+        "build.all.win": "npm run build .win",
+        "build.angular": "../../node_modules/.bin/ng-packagr -p ../../src/gesturehandler/angular/package.json -c ../../src/gesturehandler/angular/tsconfig.json",
+        "build.angular.win": "..\\..\\node_modules\\.bin\\ng-packagr -p ..\\..\\src\\gesturehandler\\angular\\package.json -c ..\\..\\src\\gesturehandler\\angular\\tsconfig.json",
+        "readme": "../../node_modules/.bin/readme generate -c ../../tools/readme/blueprint.json",
+        "tsc": "../../node_modules/.bin/cpy '**/*.d.ts' '../../packages/gesturehandler' --parents --cwd=../../src/gesturehandler && ../../node_modules/.bin/tsc -skipLibCheck -d",
+        "tsc.win": "..\\..\\node_modules\\.bin\\cpy '**\\*.d.ts' '..\\..\\packages\\gesturehandler' --parents --cwd=..\\..\\src\\gesturehandler && ..\\..\\node_modules\\.bin\\tsc -skipLibCheck -d",
+        "clean": "../../node_modules/.bin/rimraf ./*.d.ts ./*.js ./*.js.map",
+        "clean.win": "..\\..\\node_modules\\.bin\\rimraf .\\*.d.ts .\\*.js .\\*.js.map"
+    },
+    "nativescript": {
+        "platforms": {
+            "android": "6.2.1",
+            "ios": "6.2.1"
+        }
+    },
+    "keywords": [
+        "NativeScript",
+        "JavaScript",
+        "iOS",
+        "Android",
+        "Vue",
+        "preview|https://raw.githubusercontent.com/nativescript-community/gesturehandler/master/images/demo.gif"
+    ],
+    "author": {
+        "name": "Martin Guillon",
+        "email": "martin.guillon@akylas.fr"
+    },
+    "bugs": {
+        "url": "https://github.com/nativescript-community/gesturehandler/issues"
+    },
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/nativescript-community/gesturehandler"
+    },
+    "bootstrapper": "nativescript-plugin-seed",
+    "dependencies": {
+        "@nativescript-community/observable": "^2.0.10"
+    },
+    "gitHead": "531e9068c445832a6faf6bb8e227b738baa6ef18"
+}

package/packages/gesturehandler/platforms/android/include.gradle

@@ -0,0 +1,19 @@
+import groovy.json.JsonSlurper
+dependencies {
+    implementation(name:'widgets-release', ext:'aar')
+    implementation "androidx.annotation:annotation:1.1.0"
+}
+repositories {
+    def appDir = "$rootDir/../../.."
+    def widgetsDir = "$appDir/node_modules/@nativescript/core/platforms/android"
+    def appPackageJsonFile = file("$appDir/package.json")
+    if (appPackageJsonFile.exists()) {
+        def appPackageJson = new JsonSlurper().parseText(appPackageJsonFile.text)
+        if (appPackageJson.dependencies['@akylas/nativescript'] != null) {
+            widgetsDir = "$appDir/node_modules/@akylas/nativescript/platforms/android"
+        }
+    }
+    flatDir {
+        dirs "$widgetsDir"
+    }
+}

package/packages/gesturehandler/platforms/android/java/com/nativescript/gesturehandler/PageLayout.java

@@ -0,0 +1,189 @@
+package com.nativescript.gesturehandler;
+
+import android.content.Context;
+import android.view.MotionEvent;
+import android.view.View;
+import android.view.ViewGroup;
+import android.util.Log;
+
+import org.nativescript.widgets.ItemSpec;
+import org.nativescript.widgets.GridUnitType;
+
+import com.swmansion.gesturehandler.GestureHandlerOrchestrator;
+import com.swmansion.gesturehandler.GestureHandlerRegistryImpl;
+import com.swmansion.gesturehandler.PointerEventsConfig;
+import com.swmansion.gesturehandler.GestureHandler;
+import com.swmansion.gesturehandler.ViewConfigurationHelper;
+
+import java.util.ArrayList;
+
+public class PageLayout extends org.nativescript.widgets.GridLayout {
+    public PageLayout(Context context, int rootGestureTag) {
+        super(context);
+        mRootGestureTag = rootGestureTag;
+        addRow(new ItemSpec(1, GridUnitType.auto));
+        addRow(new ItemSpec(1, GridUnitType.star));
+    }
+
+    private int mRootGestureTag;
+    private GestureHandlerOrchestrator mOrchestrator;
+    private GestureHandlerRegistryImpl mRegistry;
+    private ViewConfigurationHelper configurationHelper;
+    RootViewGestureHandler rootGestureHandler;
+
+    private boolean mShouldIntercept = false;
+    private boolean mPassingTouch = false;
+    private boolean mDispatchToOrchestra = true;
+    private boolean mShouldAddRootGesture = true;
+
+    public void setShouldIntercept(boolean value) {
+        if (GestureHandler.debug) {
+            Log.d("JS", "PageLayout setShouldIntercept " + value);
+        }
+        this.mShouldIntercept = value;
+    }
+
+    public void setPassingTouch(boolean value) {
+        this.mPassingTouch = value;
+    }
+    public void setShouldAddRootGesture(boolean value) {
+        this.mShouldAddRootGesture = value;
+    }
+
+    public int getRootGestureTag() {
+        return mRootGestureTag;
+    }
+
+    public void setDispatchToOrchestra(boolean value) {
+        if (GestureHandler.debug) {
+            Log.d("JS", "PageLayout setDispatchToOrchestra " + value);
+        }
+        this.mDispatchToOrchestra = value;
+    }
+
+    public GestureHandlerRegistryImpl registry() {
+        return this.mRegistry;
+    }
+    // requestDisallowInterceptTouchEvent(disallowIntercept) {
+    //     console.log('requestDisallowInterceptTouchEvent');
+    //     if (this.mGestureRootHelper != null) {
+    //         this.mGestureRootHelper.requestDisallowInterceptTouchEvent(disallowIntercept);
+    //     }
+    //     super.requestDisallowInterceptTouchEvent(disallowIntercept);
+    // }
+
+    // dispatchTouchEvent(ev) {
+    //     if (this.mGestureRootHelper != null && this.mGestureRootHelper.dispatchTouchEvent(ev)) {
+    //         return true;
+    //     }
+    //     return super.dispatchTouchEvent(ev);
+    // }
+    public void tryCancelAllHandlers() {
+        if (GestureHandler.debug) {
+            Log.d("JS", "PageLayout tryCancelAllHandlers ");
+        }
+        ArrayList<GestureHandler> handlers = this.mRegistry.getAllHandlers();
+        if (handlers != null) {
+            for(int i = 0; i < handlers.size(); i++) {
+                GestureHandler handler = handlers.get(i);
+                if (handler != this.rootGestureHandler) {
+                    handler.cancel();
+                }
+            }
+        }
+        // In order to cancel handlers we activate handler that is hooked to the root view
+        // if (this.rootGestureHandler != null && this.rootGestureHandler.getState() == com.swmansion.gesturehandler.GestureHandler.STATE_BEGAN) {
+        //     // Try activate main JS handler
+        //     this.rootGestureHandler.activate();
+        //     this.rootGestureHandler.end();
+        // }
+    }
+
+    public void requestDisallowInterceptTouchEvent(boolean disallowIntercept) {
+        if (GestureHandler.debug) {
+            Log.d("JS", "PageLayout requestDisallowInterceptTouchEvent " + disallowIntercept + " " + this.mPassingTouch);
+        }
+        // If this method gets called it means that some native view is attempting to grab lock for
+        // touch event delivery. In that case we cancel all gesture recognizers
+        if (this.mOrchestrator != null && !this.mPassingTouch) {
+            // if we are in the process of delivering touch events via GH orchestrator, we don't want to
+            // treat it as a native gesture capturing the lock
+            this.tryCancelAllHandlers();
+        }
+        super.requestDisallowInterceptTouchEvent(disallowIntercept);
+    }
+
+    public boolean dispatchTouchEventToOrchestrator(MotionEvent ev) {
+        if (this.mOrchestrator != null) {
+            this.mPassingTouch = true;
+            this.mOrchestrator.onTouchEvent(ev);
+            this.mPassingTouch = false;
+        }
+        if (GestureHandler.debug) {
+            Log.d("JS", "PageLayout dispatchTouchEventToOrchestrator " + this.mShouldIntercept);
+        }
+        return this.mShouldIntercept;
+    }
+
+    public boolean dispatchTouchEvent(MotionEvent ev) {
+        if (GestureHandler.debug) {
+            Log.d("JS", "PageLayout dispatchTouchEvent " + this.mDispatchToOrchestra);
+        }
+        if (this.mDispatchToOrchestra && this.dispatchTouchEventToOrchestrator(ev)) {
+            return true;
+        }
+        final boolean handled = super.dispatchTouchEvent(ev);
+        if (GestureHandler.debug) {
+            Log.d("JS", "PageLayout dispatchTouchEvent to children " + handled);
+        }
+        // we need to always return true or gestures wont work on layouts because they don't handle touch so dispatchTouchEvent returns false
+        return true;
+    }
+
+    // onInterceptTouchEvent(ev: android.view.MotionEvent) {
+    //     return this.mShouldIntercept;
+    // }
+
+    // onTouchEvent(ev: android.view.MotionEvent) {
+    //     console.log('onTouchEvent', ev);
+    //     this.mOrchestrator.onTouchEvent(ev);
+    //     return super.onTouchEvent(ev);
+    // }
+
+    /**
+     * This method is used to enable root view to start processing touch events through the gesture
+     * handler library logic. Unless this method is called (which happens as a result of instantiating
+     * new gesture handler from JS) the root view component will just proxy all touch related methods
+     * to its superclass. Thus in the "disabled" state all touch related events will fallback to
+     * default behavior.
+     */
+    public void initialize() {
+        this.mRegistry = new com.swmansion.gesturehandler.GestureHandlerRegistryImpl();
+        this.configurationHelper = new com.swmansion.gesturehandler.ViewConfigurationHelper() {
+            public PointerEventsConfig getPointerEventsConfigForView(View view) {
+                return view.isEnabled() ? com.swmansion.gesturehandler.PointerEventsConfig.AUTO : com.swmansion.gesturehandler.PointerEventsConfig.NONE;
+            }
+
+            public boolean isViewClippingChildren(ViewGroup parent) {
+                return false;
+            }
+
+            public View getChildInDrawingOrderAtIndex(ViewGroup parent, int index) {
+                return parent.getChildAt(index);
+            }
+        };
+        this.mOrchestrator = new com.swmansion.gesturehandler.GestureHandlerOrchestrator(this, this.mRegistry, this.configurationHelper);
+        this.mOrchestrator.setMinimumAlphaForTraversal(0.01f);
+
+        this.rootGestureHandler = new RootViewGestureHandler();
+        this.rootGestureHandler.setTag(mRootGestureTag);
+        this.mRegistry.registerHandler(this.rootGestureHandler);
+        this.mRegistry.attachHandlerToView(mRootGestureTag, this);
+    }
+
+    public void tearDown() {
+        this.configurationHelper = null;
+        this.mOrchestrator = null;
+        this.mRegistry = null;
+    }
+}