diff --git a/packages/axes/src/eventInput/EventInput.ts b/packages/axes/src/eventInput/EventInput.ts index 3c1f6a4a..c9aac2f3 100644 --- a/packages/axes/src/eventInput/EventInput.ts +++ b/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; diff --git a/packages/axes/src/eventInput/MouseEventInput.ts b/packages/axes/src/eventInput/MouseEventInput.ts index 99d30c03..38d29eb5 100644 --- a/packages/axes/src/eventInput/MouseEventInput.ts +++ b/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; } diff --git a/packages/axes/src/inputType/PanInput.ts b/packages/axes/src/inputType/PanInput.ts index 277c8da3..439520ba 100644 --- a/packages/axes/src/inputType/PanInput.ts +++ b/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); diff --git a/packages/axes/test/unit/Axes.spec.js b/packages/axes/test/unit/Axes.spec.js index a02cc7d0..74acd015 100644 --- a/packages/axes/test/unit/Axes.spec.js +++ b/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 }); diff --git a/packages/demo/docs/tutorials/Installiation.mdx b/packages/demo/docs/tutorials/Installiation.mdx index 1eddd88e..25028c52 100644 --- a/packages/demo/docs/tutorials/Installiation.mdx +++ b/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 - - npm install @egjs/axes + + +```shell +npm install @egjs/axes +``` + + + + +```shell +npm install @egjs/react-axes +``` + + + + +```shell +npm install @egjs/vue-axes +``` + - - yarn add @egjs/axes + + +```shell +npm install @egjs/vue2-axes +``` + + + + +```shell +npm install @egjs/svelte-axes +``` + + + + +### yarn + + + +```shell +yarn add @egjs/axes +``` + + + + +```shell +yarn add @egjs/react-axes +``` + + + + +```shell +yarn add @egjs/vue-axes +``` + + + + +```shell +yarn add @egjs/vue2-axes +``` + + + + +```shell +yarn add @egjs/svelte-axes +``` + diff --git a/packages/demo/docusaurus.config.js b/packages/demo/docusaurus.config.js index 75175242..f5ba27ca 100644 --- a/packages/demo/docusaurus.config.js +++ b/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") ] } diff --git a/packages/demo/package.json b/packages/demo/package.json index a8c09e93..1036d633 100644 --- a/packages/demo/package.json +++ b/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", diff --git a/packages/demo/src/css/index.css b/packages/demo/src/css/index.css new file mode 100644 index 00000000..c09cb69d --- /dev/null +++ b/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; +} diff --git a/packages/demo/src/pages/Home.tsx b/packages/demo/src/pages/Home.tsx index b0c3e23c..ff4ad66b 100644 --- a/packages/demo/src/pages/Home.tsx +++ b/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 { +
+

Framework Ready

+

Use Axes in your favorite framework!

+ +
Demos