Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: elmarti/react-joystick-component
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 3.2.0
Choose a base ref
...
head repository: elmarti/react-joystick-component
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref

Commits on Jan 12, 2022

  1. Copy the full SHA
    8b5c2e8 View commit details
  2. 📝 fix storybook typings

    elmarti committed Jan 12, 2022
    Copy the full SHA
    f89fa5c View commit details

Commits on Jan 14, 2022

  1. ✨ Support multiple touches, fixes #34

    previously we listened for a singleton window event for mouseup/touchend. For touchend we now store the touch.identifier to allow us to identify the touchmove and touchend events, so that we can treat them diffrently per component instance
    elmarti committed Jan 14, 2022
    Copy the full SHA
    045d1af View commit details

Commits on Jan 21, 2022

  1. 🐛 show bundle size

    elmarti committed Jan 21, 2022
    Copy the full SHA
    5dc68c1 View commit details

Commits on Jan 22, 2022

  1. 💥 use pointer events

    Using pointer events standardises a lot of the code and allows dragging to continue outside of the viewport. closes #26 closes #35
    elmarti committed Jan 22, 2022
    Copy the full SHA
    129fd6d View commit details
  2. 🐛 fix tsfailure

    elmarti committed Jan 22, 2022
    Copy the full SHA
    4ba9106 View commit details
  3. 🐛 fix tsfailure

    elmarti committed Jan 22, 2022
    Copy the full SHA
    8b068aa View commit details
  4. 🐛 fix tsfailure

    elmarti committed Jan 22, 2022
    Copy the full SHA
    f1fc49d View commit details
  5. 🐛 fix tsfailure

    elmarti committed Jan 22, 2022
    Copy the full SHA
    1810cd4 View commit details

Commits on Apr 6, 2022

  1. change joystick position x and y to have a range of [-1, 1] instead o…

    …f based on the rendered size of the joystick
    lukedukeus authored Apr 6, 2022
    Copy the full SHA
    95a1a03 View commit details

Commits on Apr 24, 2022

  1. Copy the full SHA
    b0bb582 View commit details

Commits on May 6, 2022

  1. Copy the full SHA
    8f320b2 View commit details
  2. Merge pull request #43 from mkosir/master

    Allow React version >17 to be as peer dependency
    elmarti authored May 6, 2022
    Copy the full SHA
    09c21ca View commit details
  3. 🐛 trigger release of #43

    elmarti committed May 6, 2022
    Copy the full SHA
    c37905b View commit details

Commits on Oct 31, 2022

  1. ✨ add stick size override

    elmarti committed Oct 31, 2022
    Copy the full SHA
    92b4020 View commit details
  2. 📝 add stickSize to README

    elmarti committed Oct 31, 2022
    Copy the full SHA
    b1cf914 View commit details
  3. Copy the full SHA
    a664bf7 View commit details
  4. Merge pull request #47 from elmarti/add-stick-size-override

    ✨ add stick size override, fixes #38
    elmarti authored Oct 31, 2022
    Copy the full SHA
    948906c View commit details
  5. Copy the full SHA
    442d7ff View commit details
  6. Merge pull request #48 from elmarti/publish-src-in-package

    🐛 👷 publish raw files in package
    elmarti authored Oct 31, 2022
    Copy the full SHA
    5e86ec7 View commit details

Commits on Nov 19, 2022

  1. 💥 🐛 trigger breaking release

    PR didn't include gitmoji - This is definitely how the joystick should work, however the previous version didn't work this way for varying sizes
    elmarti committed Nov 19, 2022
    Copy the full SHA
    7012fb4 View commit details
  2. Merge pull request #42 from lukedukeus/patch-1

    change joystick position x and y to have a range of [-1, 1] instead of based on the rendered size of the joystick
    elmarti authored Nov 19, 2022
    Copy the full SHA
    4819d64 View commit details
  3. 👷 fix storybook deploy

    elmarti committed Nov 19, 2022
    Copy the full SHA
    66398ad View commit details
  4. Copy the full SHA
    68f6cbb View commit details
  5. 👷 fix action formatting

    elmarti committed Nov 19, 2022
    Copy the full SHA
    e08dbc2 View commit details
  6. 👷 update yarn.lock

    elmarti committed Nov 19, 2022
    Copy the full SHA
    db8d3df View commit details
  7. 👷 fix storybook deploy

    elmarti committed Nov 19, 2022
    Copy the full SHA
    781b030 View commit details
  8. Copy the full SHA
    8c5fa1d View commit details
  9. 👎 y u do this

    elmarti committed Nov 19, 2022
    Copy the full SHA
    7918717 View commit details
  10. 🚽 GH actions WTF m9

    elmarti committed Nov 19, 2022
    Copy the full SHA
    9d63525 View commit details
  11. 💩 WTF GH actions

    elmarti committed Nov 19, 2022
    Copy the full SHA
    e164cdf View commit details

Commits on Nov 24, 2022

  1. 👷 try removing extra step

    elmarti committed Nov 24, 2022
    Copy the full SHA
    90270eb View commit details
  2. 👷 set node version to 16

    elmarti committed Nov 24, 2022
    Copy the full SHA
    a3f69fc View commit details
  3. Copy the full SHA
    9865683 View commit details
  4. 📝 fix parallax tilt demo

    elmarti committed Nov 24, 2022
    Copy the full SHA
    12a0409 View commit details
  5. 🐛 fix sticky end position

    elmarti committed Nov 24, 2022
    Copy the full SHA
    790817a View commit details
  6. 🐛 remove distance ratio

    elmarti committed Nov 24, 2022
    Copy the full SHA
    d6a952b View commit details

Commits on Mar 4, 2023

  1. ⬆️ Bump minimist from 1.2.5 to 1.2.8

    Bumps [minimist](https://github.com/minimistjs/minimist) from 1.2.5 to 1.2.8.
    - [Release notes](https://github.com/minimistjs/minimist/releases)
    - [Changelog](https://github.com/minimistjs/minimist/blob/main/CHANGELOG.md)
    - [Commits](minimistjs/minimist@v1.2.5...v1.2.8)
    
    ---
    updated-dependencies:
    - dependency-name: minimist
      dependency-type: indirect
    ...
    
    Signed-off-by: dependabot[bot] <support@github.com>
    dependabot[bot] authored Mar 4, 2023
    Copy the full SHA
    56dcb6e View commit details
  2. Merge pull request #51 from elmarti/dependabot/npm_and_yarn/minimist-…

    …1.2.8
    
    ⬆️ Bump minimist from 1.2.5 to 1.2.8
    elmarti authored Mar 4, 2023
    Copy the full SHA
    100b4a7 View commit details
  3. ⬆️ Bump loader-utils from 1.4.0 to 1.4.2

    Bumps [loader-utils](https://github.com/webpack/loader-utils) from 1.4.0 to 1.4.2.
    - [Release notes](https://github.com/webpack/loader-utils/releases)
    - [Changelog](https://github.com/webpack/loader-utils/blob/v1.4.2/CHANGELOG.md)
    - [Commits](webpack/loader-utils@v1.4.0...v1.4.2)
    
    ---
    updated-dependencies:
    - dependency-name: loader-utils
      dependency-type: indirect
    ...
    
    Signed-off-by: dependabot[bot] <support@github.com>
    dependabot[bot] authored Mar 4, 2023
    Copy the full SHA
    a1a9935 View commit details
  4. ⬆️ Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps [decode-uri-component](https://github.com/SamVerschueren/decode-uri-component) from 0.2.0 to 0.2.2.
    - [Release notes](https://github.com/SamVerschueren/decode-uri-component/releases)
    - [Commits](SamVerschueren/decode-uri-component@v0.2.0...v0.2.2)
    
    ---
    updated-dependencies:
    - dependency-name: decode-uri-component
      dependency-type: indirect
    ...
    
    Signed-off-by: dependabot[bot] <support@github.com>
    dependabot[bot] authored Mar 4, 2023
    Copy the full SHA
    423478d View commit details
  5. Merge pull request #52 from elmarti/dependabot/npm_and_yarn/loader-ut…

    …ils-1.4.2
    
    ⬆️ Bump loader-utils from 1.4.0 to 1.4.2
    elmarti authored Mar 4, 2023
    Copy the full SHA
    1abc7b4 View commit details
  6. Merge pull request #53 from elmarti/dependabot/npm_and_yarn/decode-ur…

    …i-component-0.2.2
    
    ⬆️ Bump decode-uri-component from 0.2.0 to 0.2.2
    elmarti authored Mar 4, 2023
    Copy the full SHA
    f4fabf1 View commit details
  7. ⬆️ Bump terser from 4.8.0 to 4.8.1

    Bumps [terser](https://github.com/terser/terser) from 4.8.0 to 4.8.1.
    - [Release notes](https://github.com/terser/terser/releases)
    - [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md)
    - [Commits](terser/terser@v4.8.0...v4.8.1)
    
    ---
    updated-dependencies:
    - dependency-name: terser
      dependency-type: indirect
    ...
    
    Signed-off-by: dependabot[bot] <support@github.com>
    dependabot[bot] authored Mar 4, 2023
    Copy the full SHA
    a933b8c View commit details
  8. Merge pull request #54 from elmarti/dependabot/npm_and_yarn/terser-4.8.1

    ⬆️ Bump terser from 4.8.0 to 4.8.1
    elmarti authored Mar 4, 2023
    Copy the full SHA
    03d8e9f View commit details

Commits on Mar 24, 2023

  1. Copy the full SHA
    70905b6 View commit details
  2. Copy the full SHA
    eb0191a View commit details
  3. Copy the full SHA
    2e0a254 View commit details
  4. Merge pull request #56 from elmarti/#55-limit-movement-on-x-y-axis

    closes #55 limit movement on x y axis
    elmarti authored Mar 24, 2023
    Copy the full SHA
    ed3d9f9 View commit details
  5. Copy the full SHA
    750076d View commit details
Showing with 18,825 additions and 12,226 deletions.
  1. +2 −0 .eslintignore
  2. +7 −2 .github/workflows/release.yml
  3. +3 −1 .gitignore
  4. +7 −8 README.md
  5. +12 −5 package.json
  6. +80 −3 src/Joystick.stories.tsx
  7. +199 −0 src/Joystick.test.tsx
  8. +89 −75 src/Joystick.tsx
  9. +3 −1 src/enums/shape.enum.ts
  10. +8 −0 src/shapes/shape.bounds.factory.ts
  11. +6 −4 src/shapes/shape.factory.ts
  12. +27 −0 src/stories.css
  13. +1 −1 tsconfig.json
  14. +18,381 −12,126 yarn.lock
2 changes: 2 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules
build
9 changes: 7 additions & 2 deletions .github/workflows/release.yml
Original file line number Diff line number Diff line change
@@ -28,19 +28,24 @@ jobs:
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: 'lts/*'
node-version: '16'
- name: Install dependencies
run: yarn install --frozen-lockfile
- name: Run tests
run: yarn test
- name: Build project
run: yarn build
- name: Semantic Release
id: semantic
uses: cycjimmy/semantic-release-action@v2
with:
semantic_version: 19
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
- name: Deploy storybook to Github Pages
run: npm run deploy-storybook -- --ci
# 🤷
env:
GH_TOKEN: MyCompany:${{ secrets.GITHUB_TOKEN }}
GH_TOKEN: ${{github.actor}}:${{ secrets.GITHUB_TOKEN }}

4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -2,4 +2,6 @@
node_modules
build
.cache
yarn-error.log
yarn-error.log
.DS_Store
coverage
15 changes: 7 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
## React Joystick Component

[![Build Status](https://travis-ci.org/elmarti/react-joystick-component.svg?branch=master)](https://travis-ci.org/elmarti/react-joystick-component)
[![Bundle Size](https://img.shields.io/bundlephobia/minzip/react-joystick-component?style=plastic)](https://img.shields.io/bundlephobia/minzip/react-joystick-component?style=plastic)

[Click here to see examples](https://elmarti.github.io/react-joystick-component/)

@@ -19,15 +19,12 @@ import { Joystick } from 'react-joystick-component';
<Joystick size={100} sticky={true} baseColor="red" stickColor="blue" move={handleMove} stop={handleStop}></Joystick>
```

### Migrating from V1
The main breaking change is that the control plane is no longer square by default - if you require a square control plane on a circular joystick, you can set `controlPlaneShape='square'` which will give you the original behaviour.


Component Props - as described by IJoystickProps - all are optional

| Prop | Type | Description |
|---|---|---|
| size | number | The size in px of the Joystick base |
| stickSize | number | The size in px of the Joystick stick (if unspecified, joystick size is relative to the `size` value |
| baseColor | string | The color of the Joystick base |
| stickColor | string | The color of the Stick |
| throttle | number | The [throttling](https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf) rate of the move callback |
@@ -41,13 +38,14 @@ Component Props - as described by IJoystickProps - all are optional
| disabled | Boolean | When true, block any usage of the Joystick. This will also apply the `joystick-disabled` and `joystick-base-disabled` classNames |
| stickShape | JoystickShape | The shape of the joystick default = circle|
| baseShape | JoystickShape | The shape of the joystick default = circle|
| controlPlaneShape | JoystickShape | Override the default shape behaviour of the control plane|
| controlPlaneShape | JoystickShape | Override the default shape behaviour of the control plane - circle, square, axisX, axisY|
| minDistance | number | Percentage 0-100 - the minimum distance to start receive IJoystickMove events|

| pos | {x: number, y: number}| Override the joystick position (doesn't work if the user is interacting. You can use `disabled` to force this)|
```TypeScript
import {JoystickShape} from "./shape.enum";
interface IJoystickProps {
size?: number;
stickSize?: number;
baseColor?: string;
stickColor?: string;
disabled?: boolean;
@@ -63,6 +61,7 @@ interface IJoystickProps {
stickShape?: JoystickShape;
controlPlaneShape?: JoystickShape;
minDistance?: number;
pos: {x: number, y: number}
}
```

@@ -74,6 +73,6 @@ export interface IJoystickUpdateEvent {
x: number | null;
y: number | null;
direction: JoystickDirection | null;
distance: number; // Percentile 0-100% of joystick
distance: number; // Percentile 0-100% of joystick
}
```
17 changes: 12 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -12,13 +12,15 @@
"main": "build/lib/index.js",
"types": "build/lib/index.d.ts",
"files": [
"build/lib"
"build/lib",
"src"
],
"scripts": {
"storybook": "start-storybook -p 6006 -c .storybook",
"build": "tsc",
"prepublish": "yarn build",
"deploy-storybook": "storybook-to-ghpages",
"test": "react-scripts test",
"lint": "tslint -c tslint.json 'src/**/*.tsx' --fix && eslint src/**/*.tsx --fix --ext .ts"
},
"repository": "https://github.com/elmarti/react-joystick-component",
@@ -29,9 +31,11 @@
"@storybook/addon-essentials": "^6.4.9",
"@storybook/addon-links": "^6.4.9",
"@storybook/react": "^6.4.9",
"@storybook/storybook-deployer": "^2.8.10",
"@storybook/storybook-deployer": "^2.8.16",
"@testing-library/jest-dom": "^5.16.5",
"@types/jest": "^27.4.0",
"@types/react": "17.0.38",
"@types/react-dom": "^17.0.11",
"@types/storybook__addon-actions": "^5.2.1",
"@typescript-eslint/eslint-plugin": "^5.9.0",
"@typescript-eslint/parser": "^5.9.0",
@@ -44,14 +48,17 @@
"react": "17.0.2",
"react-docgen-typescript-webpack-plugin": "^1.1.0",
"react-dom": "17.0.2",
"react-parallax-tilt": "^1.5.85",
"semantic-release-gitmoji": "^1.4.2",
"storybook-addon-jsx": "^7.3.14",
"ts-jest": "^27.1.2",
"tslint": "^6.1.3",
"typescript": "4.5.4"
"typescript": "4.5.4",
"@testing-library/react": "12.1.2",
"react-scripts": "^5.0.1"
},
"peerDependencies": {
"react": "17.0.2",
"react-dom": "17.0.2"
"react": ">=17.0.2",
"react-dom": ">=17.0.2"
}
}
83 changes: 80 additions & 3 deletions src/Joystick.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
import * as React from "react";

import * as ReactDOM from "react-dom";
import {storiesOf} from "@storybook/react";
import {action} from '@storybook/addon-actions';
import Tilt from 'react-parallax-tilt';

import {Joystick} from "./Joystick";
import {IJoystickUpdateEvent, Joystick} from "./Joystick";
import {JoystickShape} from "./enums/shape.enum";
import {useState} from "react";
import './stories.css';

const joystickStories = storiesOf('Joystick Examples', module);


joystickStories.add("Default joystick", () => <Joystick start={action("Started")} move={action("Moved")}
stop={action("Stopped")}/>);
joystickStories.add("Default joystick with small stick", () => <Joystick stickSize={10} start={action("Started")} move={action("Moved")}
stop={action("Stopped")}/>);
joystickStories.add("Default joystick with 50% minDistance", () => <Joystick minDistance={50} start={action("Started")} move={action("Moved")}
stop={action("Stopped")}/>);
joystickStories.add("Control plane override", () => <Joystick start={action("Started")} controlPlaneShape={JoystickShape.Square} move={action("Moved")}
@@ -26,7 +31,35 @@ joystickStories.add("Yellow (custom colors) joystick",
stickColor={"#FFD300"} move={action("Moved")}
stop={action("Stopped")}/>);

joystickStories.add("Position override",
() => <Joystick
start={action("Started")}
pos={{x: 0.5, y: 0.5}}
baseColor={"#FFFF99"}
stickColor={"#FFD300"} move={action("Moved")}
stop={action("Stopped")}/>);

joystickStories.add("Position override with second joystick",
() => {
const [joystickPos, setJoystickPos] = useState({x:0, y:0});
const handleMove = (event) => {
setJoystickPos({x: event.x, y: event.y})
};
return <>
<Joystick pos={joystickPos} move={handleMove}/>

<Joystick pos={joystickPos} disabled={true}/>

</>;});

joystickStories.add("Y Axis only",
() => <Joystick
controlPlaneShape={JoystickShape.AxisY} start={action("Started")} throttle={50}
move={action("Moved")} stop={action("Stopped")}/>);
joystickStories.add("X Axis only",
() => <Joystick
controlPlaneShape={JoystickShape.AxisX} start={action("Started")} throttle={50}
move={action("Moved")} stop={action("Stopped")}/>);
joystickStories.add("50ms throttled joystick", () => <Joystick start={action("Started")} throttle={50}
move={action("Moved")} stop={action("Stopped")}/>);

@@ -97,6 +130,34 @@ joystickStories.add("Tiny joystick", () => <Joystick start={action("Started")} m
joystickStories.add("Disabled joystick", () => <Joystick start={action("Started")} move={action("Moved")}
stop={action("Stopped")} disabled={true}/>);


joystickStories.add("Controlling a react-parallax-tilt ", () => {
const [[manualTiltAngleX, manualTiltAngleY], setManualTiltAngle] = useState([0, 0] as Array<number|null>);

const onMove = (stick:IJoystickUpdateEvent) => {
//@ts-ignore
setManualTiltAngle([stick.y * 100, stick.x * 100]);
};

const onStop = () => {
setManualTiltAngle([0, 0]);
};
return <>
<div className="tilt-manual-input">
<Tilt tiltAngleXManual={manualTiltAngleX} tiltAngleYManual={manualTiltAngleY} glareEnable={true}>
<div className="react-parallax-tilt">
<div>Axis x: {manualTiltAngleX?.toFixed(0)}°</div>
<div>Axis y: {manualTiltAngleY?.toFixed(0)}°</div>
</div>
</Tilt>
<div className="manual-input">
<Joystick baseColor="darkgreen" stickColor="black" move={onMove} stop={onStop} />
</div>
<h3>Thanks to <a href="https://github.com/mkosir/react-parallax-tilt">react-parallax-tilt</a></h3>
</div>
</>}
)

interface IDirectionComponentState {
direction: string;
}
@@ -130,4 +191,20 @@ class DirectionComponent extends React.Component<any, IDirectionComponentState>
}
}

joystickStories.add("Default with direction text", () => <DirectionComponent/>)
joystickStories.add("Default with direction text", () => <DirectionComponent/>)

const Modal =({ isOpen}: {isOpen:boolean})=> {
if (!isOpen) return null
return ReactDOM.createPortal(
<Joystick />
,
document.body)
}


joystickStories.add("Default with portal", () => {
const [isOpen, setIsOpen] = useState(false) as any;
return <>
<button onClick={()=> setIsOpen(!isOpen)}>Open</button>
<Modal isOpen={isOpen}></Modal></>
})
Loading