fix: release input when mouse event is canceled (#201)

* docs: add framework badges

* fix: release input when mouse event is canceled

* fix: check buttons within getTouches of mouse input

* fix: check event types of mouse input in getTouches

packages/axes/src/eventInput/EventInput.ts

@@ -35,7 +35,7 @@ export abstract class EventInput {
 
   public abstract onRelease(event: InputEventType): void;
 
-  public abstract getTouches(event: InputEventType): number;
+  public abstract getTouches(event: InputEventType, inputButton?: string[]): number;
 
   protected abstract _getScale(event: InputEventType): number;
 

packages/axes/src/eventInput/MouseEventInput.ts

@@ -3,6 +3,7 @@
  * egjs projects are licensed under the MIT license
  */
 import { InputEventType, ExtendedEvent } from "../types";
+import { MOUSE_LEFT, MOUSE_MIDDLE, MOUSE_RIGHT } from "../const";
 
 import { EventInput } from "./EventInput";
 
@@ -45,7 +46,14 @@ export class MouseEventInput extends EventInput {
     return;
   }
 
-  public getTouches(): number {
+  public getTouches(event: InputEventType, inputButton?: string[]): number {
+    if (inputButton) {
+      const buttonCodeMap = { 1: MOUSE_LEFT, 2: MOUSE_MIDDLE, 3: MOUSE_RIGHT };
+      return this._isValidButton(buttonCodeMap[event.which], inputButton) &&
+        this.end.indexOf(event.type) === -1
+        ? 1
+        : 0;
+    }
     return 0;
   }
 

packages/axes/src/inputType/PanInput.ts

@@ -219,9 +219,10 @@ export class PanInput implements InputType {
   }
 
   protected _onPanstart(event: InputEventType) {
+    const inputButton = this.options.inputButton;
     const activeEvent = this._activeEvent;
-    const panEvent = activeEvent.onEventStart(event, this.options.inputButton);
-    if (!panEvent || !this._enabled || activeEvent.getTouches(event) > 1) {
+    const panEvent = activeEvent.onEventStart(event, inputButton);
+    if (!panEvent || !this._enabled || activeEvent.getTouches(event, inputButton) > 1) {
       return;
     }
     if (panEvent.srcEvent.cancelable !== false) {
@@ -236,23 +237,30 @@ export class PanInput implements InputType {
   }
 
   protected _onPanmove(event: InputEventType) {
+    const {
+      iOSEdgeSwipeThreshold,
+      releaseOnScroll,
+      inputButton,
+      thresholdAngle,
+    } = this.options;
     const activeEvent = this._activeEvent;
-    const panEvent = activeEvent.onEventMove(event, this.options.inputButton);
-    if (!panEvent || !this._enabled || activeEvent.getTouches(event) > 1) {
+    const panEvent = activeEvent.onEventMove(event, inputButton);
+    const touches = activeEvent.getTouches(event, inputButton);
+
+    if (
+      touches === 0 ||
+      (releaseOnScroll && panEvent && !panEvent.srcEvent.cancelable)
+    ) {
+      this._onPanend(event);
       return;
     }
 
-    const { iOSEdgeSwipeThreshold, releaseOnScroll } = this.options;
-    const userDirection = getDirectionByAngle(
-      panEvent.angle,
-      this.options.thresholdAngle
-    );
-
-    if (releaseOnScroll && !panEvent.srcEvent.cancelable) {
-      this._onPanend(event);
+    if (!panEvent || !this._enabled || touches > 1) {
       return;
     }
 
+    const userDirection = getDirectionByAngle(panEvent.angle, thresholdAngle);
+
     if (activeEvent.prevEvent && IS_IOS_SAFARI) {
       const swipeLeftToRight = panEvent.center.x < 0;
 
@@ -297,9 +305,10 @@ export class PanInput implements InputType {
   }
 
   protected _onPanend(event: InputEventType) {
+    const inputButton = this.options.inputButton;
     const activeEvent = this._activeEvent;
     activeEvent.onEventEnd(event);
-    if (!this._enabled || activeEvent.getTouches(event) !== 0) {
+    if (!this._enabled || activeEvent.getTouches(event, inputButton) !== 0) {
       return;
     }
     this._detachWindowEvent(activeEvent);

packages/axes/test/unit/Axes.spec.js

@@ -299,7 +299,7 @@ describe("Axes", () => {
           range: [0, 100],
         },
       });
-      inst.setTo({ x: 150, y: 150 });
+      inst.setTo({ x: 150, y: 200 });
 
       // Then
       expect(inst.get()).to.be.eql({ x: 150, y: 100 });

packages/demo/docs/tutorials/Installiation.mdx

@@ -10,21 +10,102 @@ import TabItem from "@theme/TabItem";
 import CodeBlock from "@theme/CodeBlock";
 
 ## 📦 Package managers (recommended)
-You can easily install Flicking with package managers like [npm](https://www.npmjs.com/) or [yarn](https://classic.yarnpkg.com/en/)
+You can easily install @egjs/axes with package managers like [npm](https://www.npmjs.com/) or [yarn](https://classic.yarnpkg.com/en/)
+
+### npm
 
 <Tabs
-  groupId="pm"
-  defaultValue="npm"
-  lazy={true}
+  groupId="cfc"
+  defaultValue="js"
   values={[
-    { label: "npm", value: "npm" },
-    { label: "yarn", value: "yarn" }
+    { label: "JavaScript", value: "js" },
+    { label: "React", value: "react" },
+    { label: "Vue@3", value: "vue" },
+    { label: "Vue@2", value: "vue2" },
+    { label: "Svelte", value: "svelte" }
   ]}>
-  <TabItem value="npm">
-    <CodeBlock className="language-shell">npm install @egjs/axes</CodeBlock>
+  <TabItem value="js">
+
+```shell
+npm install @egjs/axes
+```
+
+  </TabItem>
+  <TabItem value="react">
+
+```shell
+npm install @egjs/react-axes
+```
+
+  </TabItem>
+  <TabItem value="vue">
+
+```shell
+npm install @egjs/vue-axes
+```
+
   </TabItem>
-  <TabItem value="yarn">
-    <CodeBlock className="language-shell">yarn add @egjs/axes</CodeBlock>
+  <TabItem value="vue2">
+
+```shell
+npm install @egjs/vue2-axes
+```
+
+  </TabItem>
+  <TabItem value="svelte">
+
+```shell
+npm install @egjs/svelte-axes
+```
+
+  </TabItem>
+</Tabs>
+
+### yarn
+<Tabs
+  groupId="cfc"
+  defaultValue="js"
+  values={[
+    { label: "JavaScript", value: "js" },
+    { label: "React", value: "react" },
+    { label: "Vue@3", value: "vue" },
+    { label: "Vue@2", value: "vue2" },
+    { label: "Svelte", value: "svelte" }
+  ]}>
+  <TabItem value="js">
+
+```shell
+yarn add @egjs/axes
+```
+
+  </TabItem>
+  <TabItem value="react">
+
+```shell
+yarn add @egjs/react-axes
+```
+
+  </TabItem>
+  <TabItem value="vue">
+
+```shell
+yarn add @egjs/vue-axes
+```
+
+  </TabItem>
+  <TabItem value="vue2">
+
+```shell
+yarn add @egjs/vue2-axes
+```
+
+  </TabItem>
+  <TabItem value="svelte">
+
+```shell
+yarn add @egjs/svelte-axes
+```
+
   </TabItem>
 </Tabs>
 

packages/demo/docusaurus.config.js

@@ -36,6 +36,8 @@ const config = {
         theme: {
           customCss: [
             require.resolve("./src/css/custom.css"),
+            require.resolve('./node_modules/@egjs/react-flicking/dist/flicking.css'),
+            require.resolve('./node_modules/@egjs/flicking-plugins/dist/flicking-plugins.css'),
             require.resolve("./src/css/bulma-override.sass")
           ]
         }

packages/demo/package.json

@@ -28,7 +28,9 @@
     "@babel/core": "^7.17.5",
     "@babel/plugin-proposal-decorators": "^7.18.6",
     "@docusaurus/module-type-aliases": "2.0.0-beta.17",
+    "@egjs/flicking-plugins": "^4.4.0",
     "@egjs/react-axes": "~3.1.0",
+    "@egjs/react-flicking": "^4.9.3",
     "@tsconfig/docusaurus": "^1.0.4",
     "bulma": "^0.9.3",
     "docusaurus-plugin-sass": "^0.2.2",

packages/demo/src/css/index.css

@@ -0,0 +1,27 @@
+.framework-logo {
+  display: inline-flex;
+  text-align: center;
+  padding: 2.2rem 2.5rem !important;
+}
+
+.framework-logo-wrapper {
+  padding: 1rem;
+  width: 3rem;
+  height: 3rem;
+  position: relative;
+}
+
+.framework-logo img {
+  position: absolute;
+  width: 2rem;
+  height: 2rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.framework-logo a {
+  color: #ffffff;
+}
+.framework-logo.is-light a {
+  color: #333333;
+}

packages/demo/src/pages/Home.tsx

@@ -5,7 +5,9 @@ import Link from "@docusaurus/Link";
 import CodeBlock from "@theme/CodeBlock";
 
 import AxesIcon from "../../static/img/axes.svg";
+import Frameworks from ".//main/Frameworks";
 
+import "@site/src/css/index.css";
 import styles from "./home.module.css";
 
 class Home extends React.Component {
@@ -60,6 +62,11 @@ class Home extends React.Component {
               </Link>
             </div>
           </section>
+          <section className="py-6">
+            <p className="title">Framework Ready</p>
+            <p className="subtitle">Use Axes in your favorite framework!</p>
+            <Frameworks />
+          </section>
           <section className="py-6">
             <div className="title mb-6 has-text-centered">Demos</div>
             <ul className="demo-list">

packages/demo/src/pages/main/Frameworks.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import Flicking from "@egjs/react-flicking";
+import { AutoPlay } from "@egjs/flicking-plugins";
+
+import styles from "./frameworks.module.css";
+
+export default () => {
+  const plugins = [new AutoPlay()];
+
+  return (<Flicking className="mb-2" plugins={plugins} align={"prev"} circular={true}>
+    <div className="framework-logo button mr-2 is-info">
+      <div className="framework-logo-wrapper mr-2"><img src="icon/react.svg" /></div>
+      <a href="https://npmjs.com/@egjs/react-axes" target="_blank">@egjs/react-axes</a>
+    </div>
+    <div className="framework-logo button mr-2 is-success">
+      <div className="framework-logo-wrapper mr-2"><img src="icon/vue.svg" /></div>
+      <a href="https://npmjs.com/@egjs/vue-axes" target="_blank">@egjs/vue-axes</a>
+    </div>
+    <div className="framework-logo button mr-2 is-light">
+      <div className="framework-logo-wrapper mr-2"><img src="icon/svelte.svg" /></div>
+      <a href="https://npmjs.com/@egjs/svelte-axes" target="_blank">@egjs/svelte-axes</a>
+    </div>
+    <div className={`framework-logo button mr-2 ${styles["is-vue3"]}`}>
+      <div className="framework-logo-wrapper mr-2"><img src="icon/vue.svg" /></div>
+      <a href="https://npmjs.com/@egjs/vue2-axes" target="_blank">@egjs/vue2-axes</a>
+    </div>
+    <div className="framework-logo button mr-2 is-info">
+      <div className="framework-logo-wrapper mr-2"><img src="icon/react.svg" /></div>
+      <a href="https://npmjs.com/@egjs/react-axes" target="_blank">@egjs/react-axes</a>
+    </div>
+    <div className="framework-logo button mr-2 is-success">
+      <div className="framework-logo-wrapper mr-2"><img src="icon/vue.svg" /></div>
+      <a href="https://npmjs.com/@egjs/vue-axes" target="_blank">@egjs/vue-axes</a>
+    </div>
+    <div className="framework-logo button mr-2 is-light">
+      <div className="framework-logo-wrapper mr-2"><img src="icon/svelte.svg" /></div>
+      <a href="https://npmjs.com/@egjs/svelte-axes" target="_blank">@egjs/svelte-axes</a>
+    </div>
+    <div className={`framework-logo button mr-2 ${styles["is-vue3"]}`}>
+      <div className="framework-logo-wrapper mr-2"><img src="icon/vue.svg" /></div>
+      <a href="https://npmjs.com/@egjs/vue2-axes" target="_blank">@egjs/vue2-axes</a>
+    </div>
+  </Flicking>);
+};

packages/demo/src/pages/main/frameworks.module.css

@@ -0,0 +1,5 @@
+.is-vue3 {
+  background-color: rgb(166, 123, 194) !important;
+  border-color: transparent !important;
+  color: white !important;
+}