joystick: receive start and end event

custom_test.py

@@ -8,7 +8,7 @@ ui.button('Add 100', on_click=lambda: example.add(100))
 
 label = ui.label()
 
-ui.joystick(on_move=lambda e: print("move", e.vector), color='blue', size=50)
+ui.joystick(on_move=lambda e: print("move", e.data.vector), color='blue', size=50)
 
-three = ui.three(on_click=lambda e: print("click", e))
+three = ui.three(on_click=lambda e: print("click", e.objects))
 ui.slider(min=0, max=10, on_change=lambda e: three.move_camera(e.value))

nicegui/elements/custom_example.py

@@ -5,22 +5,21 @@ class CustomExampleView(CustomView):
 
     def __init__(self, on_change):
 
-        self.on_change = on_change
-
         super().__init__('custom_example', __file__, value=0)
 
+        self.on_change = on_change
         self.allowed_events = ['onAdd']
-
         self.initialize(temp=False, onAdd=self.handle_add)
 
     def handle_add(self, msg):
 
         self.options.value += msg.number
-        self.on_change(self.options.value)
+        if self.on_change is not None:
+            self.on_change(self.options.value)
 
 class CustomExample(Element):
 
-    def __init__(self, *, on_change):
+    def __init__(self, *, on_change=None):
 
         super().__init__(CustomExampleView(on_change))
 

nicegui/elements/joystick.js

@@ -7,6 +7,16 @@ Vue.component("joystick", {
       zone: document.getElementById(this.$props.jp_props.id),
       ...this.$props.jp_props.options,
     });
+    joystick.on("start", () => {
+      const event = {
+        event_type: "onStart",
+        vue_type: this.$props.jp_props.vue_type,
+        id: this.$props.jp_props.id,
+        page_id: page_id,
+        websocket_id: websocket_id,
+      };
+      send_to_server(event, "event");
+    });
     joystick.on("move", (_, data) => {
       delete data.instance;
       const event = {
@@ -19,6 +29,16 @@ Vue.component("joystick", {
       };
       send_to_server(event, "event");
     });
+    joystick.on("end", () => {
+      const event = {
+        event_type: "onEnd",
+        vue_type: this.$props.jp_props.vue_type,
+        id: this.$props.jp_props.id,
+        page_id: page_id,
+        websocket_id: websocket_id,
+      };
+      send_to_server(event, "event");
+    });
   },
   props: {
     jp_props: Object,

nicegui/elements/joystick.py

@@ -3,24 +3,38 @@ from .element import Element
 
 class JoystickView(CustomView):
 
-    def __init__(self, on_move, **options):
-
-        self.on_move = on_move
+    def __init__(self, on_start, on_move, on_end, **options):
 
         super().__init__('joystick', __file__, [
             'https://cdn.jsdelivr.net/npm/nipplejs@0.9.0/dist/nipplejs.min.js',
         ], **options)
 
-        self.allowed_events = ['onMove']
+        self.on_start = on_start
+        self.on_move = on_move
+        self.on_end = on_end
+        self.allowed_events = ['onStart', 'onMove', 'onEnd']
+        self.initialize(temp=False,
+                        onStart=self.handle_start,
+                        onMove=self.handle_move,
+                        onEnd=self.handle_end)
+
+    def handle_start(self, msg):
 
-        self.initialize(temp=False, onMove=self.handle_move)
+        if self.on_start is not None:
+            self.on_start(msg)
 
     def handle_move(self, msg):
 
-        self.on_move(msg.data)
+        if self.on_move is not None:
+            self.on_move(msg)
+
+    def handle_end(self, msg):
+
+        if self.on_end is not None:
+            self.on_end(msg)
 
 class Joystick(Element):
 
-    def __init__(self, *, on_move, **options):
+    def __init__(self, *, on_start=None, on_move=None, on_end=None, **options):
 
-        super().__init__(JoystickView(on_move, **options))
+        super().__init__(JoystickView(on_start, on_move, on_end, **options))

nicegui/elements/three.py

@@ -5,24 +5,23 @@ class ThreeView(CustomView):
 
     def __init__(self, on_click):
 
-        self.on_click = on_click
-
         super().__init__('three', __file__, [
             'https://cdn.jsdelivr.net/npm/three@0.129.0/build/three.min.js',
             'https://cdn.jsdelivr.net/npm/three@0.129.0/examples/js/controls/OrbitControls.js',
         ], camera_z=4)
 
+        self.on_click = on_click
         self.allowed_events = ['onClick']
-
         self.initialize(temp=False, onClick=self.handle_click)
 
     def handle_click(self, msg):
 
-        self.on_click(msg.objects)
+        if self.on_click is not None:
+            self.on_click(msg)
 
 class Three(Element):
 
-    def __init__(self, *, on_click):
+    def __init__(self, *, on_click=None):
 
         super().__init__(ThreeView(on_click))