From 04afed47b87413f022ed7a97985c50b8de24660b Mon Sep 17 00:00:00 2001
From: GodofKim <kjh.original@gmail.com>
Date: Tue, 8 Aug 2023 09:00:51 +0900
Subject: [PATCH] Add base click

---
 src/Joystick.stories.tsx | 5 ++++-
 src/Joystick.tsx         | 9 +++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/Joystick.stories.tsx b/src/Joystick.stories.tsx
index 962a89a..bdd7cdc 100644
--- a/src/Joystick.stories.tsx
+++ b/src/Joystick.stories.tsx
@@ -13,11 +13,14 @@ const joystickStories = storiesOf('Joystick Examples', module);
 
 
 joystickStories.add("Default joystick", () => <Joystick start={action("Started")} move={action("Moved")}
-                                                        stop={action("Stopped")}/>);
+                                                        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("Default joystick with base click", () => <Joystick start={action("Started")} move={action("Moved")}
+                                                        stop={action("Stopped")} baseClick={true} />);
 joystickStories.add("Control plane override", () => <Joystick start={action("Started")} controlPlaneShape={JoystickShape.Square} move={action("Moved")}
                                                         stop={action("Stopped")}/>);
 joystickStories.add("Square joystick", () => <div style={{display:'flex', justifyContent:'space-around', padding:'25px'}}><Joystick throttle={100} start={action("Started")} baseShape={JoystickShape.Square} stickShape={JoystickShape.Square} move={action("Moved")}
diff --git a/src/Joystick.tsx b/src/Joystick.tsx
index 9edcc7c..d5feba8 100644
--- a/src/Joystick.tsx
+++ b/src/Joystick.tsx
@@ -17,6 +17,7 @@ export interface IJoystickProps {
     stickImage?: string;
     baseImage?: string;
     followCursor?: boolean;
+    baseClick?: boolean;
     baseShape?: JoystickShape;
     stickShape?: JoystickShape;
     controlPlaneShape?: JoystickShape;
@@ -117,6 +118,10 @@ class Joystick extends React.Component<IJoystickProps, IJoystickState> {
 
     componentDidMount() {
         this._mounted = true;
+        if (this.props.baseClick) {
+            this._baseRef.current?.addEventListener(InteractionEvents.PointerDown, event => this._pointerDown(event));
+        }
+
         if (this.props.followCursor) {
             //@ts-ignore
             this._parentRect = this._baseRef.current.getBoundingClientRect();
@@ -200,8 +205,12 @@ class Joystick extends React.Component<IJoystickProps, IJoystickState> {
                 distance: null,
                 direction: null
             });
+            
         }
 
+        if (this.props.baseClick) {
+            this._pointerMove(e);
+        }
     }
 
     /**