feature/9658-drag-new-point-on-section-add

OTAnalytics/plugin_ui/nicegui_gui/pages/canvas_and_files_form/canvas_form.py

@@ -46,28 +46,33 @@
 
 CURSOR = "pointer"
 NEW_SECTION_ID = "new-section-id"
+DRAG_OVERLAY_ID = "drag-overlay"
+DRAG_OVERLAY_SVG = (
+    f'<rect id="{DRAG_OVERLAY_ID}" x="0" y="0" width="9999" height="9999" '
+    f'fill-opacity="0" pointer-events="all"/>'
+)
 
 
 def circle_to_coordinates(circles: Iterable[Circle]) -> list[tuple[int, int]]:
     return [circle.to_tuple() for circle in circles]
 
 
-def create_circle(e: dict, fill: str = NORMAL_COLOR) -> Circle:
+def create_circle(e: dict, element_id: str, fill: str = NORMAL_COLOR) -> Circle:
     return Circle(
         x=round(e[IMAGE_X]),
         y=round(e[IMAGE_Y]),
         pointer_event=POINTER_EVENT_ALL,
-        id=e[ELEMENT_ID],
+        id=element_id,
         fill=fill,
     )
 
 
-def create_moving_circle(e: dict, fill: str = NORMAL_COLOR) -> Circle:
+def create_moving_circle(e: dict, element_id: str, fill: str = NORMAL_COLOR) -> Circle:
     return Circle(
         x=round(e[IMAGE_X]),
         y=round(e[IMAGE_Y]),
         pointer_event=POINTER_EVENT_ALL,
-        id=e[ELEMENT_ID],
+        id=element_id,
         fill=fill,
         stroke=MOVING_COLOR,
         stroke_width=MOVING_STROKE_WIDTH,
@@ -96,6 +101,7 @@ def __init__(
         self._new_section_points: list[Circle] = []
         self._new_section = False
         self._new_area_section = False
+        self._new_section_dragging_index: int | None = None
         self._sections: SectionResource = SectionResource({})
         self._flows: LineResources = LineResources({})
         self._circles: CircleResources = CircleResources({})
@@ -175,6 +181,7 @@ def __reset_editor(self) -> None:
         self._current_section = None
         self._current_point = None
         self._new_section_points = []
+        self._new_section_dragging_index = None
 
     async def __get_metadata(self) -> dict:
         title = self._resource_manager.get(
@@ -197,6 +204,8 @@ def draw_all(self) -> None:
             if self._new_point:
                 self._background_image.content += self._new_point.to_svg()
             self.draw_new_section()
+            if self._new_section_dragging_index is not None or self._current_point:
+                self._background_image.content += DRAG_OVERLAY_SVG
 
     def draw_new_section(self) -> None:
         for point in self._new_section_points:
@@ -234,23 +243,38 @@ def _on_pointer_down(self, e: events.MouseEventArguments) -> None:
 
     def on_svg_pointer_down(self, e: dict) -> None:
         if self._new_section:
-            pass
+            element_id = e.get(ELEMENT_ID, "")
+            if element_id.startswith("new_point-"):
+                self._new_section_dragging_index = int(element_id.split("-")[1])
+                self.draw_all()
         elif self._current_section:
-            self._current_point = create_moving_circle(e, fill=EDIT_COLOR)
+            self._current_point = create_moving_circle(
+                e, element_id=e[ELEMENT_ID], fill=EDIT_COLOR
+            )
             self.draw_all()
 
     def on_svg_pointer_move(self, e: dict) -> None:
-        if self._current_section and self._current_point:
-            self._current_point = create_moving_circle(e, fill=EDIT_COLOR)
+        if self._new_section and self._new_section_dragging_index is not None:
+            index = self._new_section_dragging_index
+            self._new_section_points[index] = create_circle(
+                e, element_id=f"new_point-{index}", fill=EDIT_COLOR
+            )
+            self.draw_all()
+        elif self._current_section and self._current_point:
+            self._current_point = create_moving_circle(
+                e, element_id=self._current_point.id, fill=EDIT_COLOR
+            )
             self._circles.add(self._current_section.id.id, self._current_point)
             self.draw_all()
 
     def on_svg_pointer_up(self, e: dict) -> None:
-        if self._new_section:
-            pass
+        if self._new_section and self._new_section_dragging_index is not None:
+            self._new_section_dragging_index = None
+            self.draw_all()
         elif self._current_section and self._current_point:
             self._circles.add(
-                self._current_section.id.id, create_circle(e, fill=EDIT_COLOR)
+                self._current_section.id.id,
+                create_circle(e, element_id=self._current_point.id, fill=EDIT_COLOR),
             )
             self._current_point = None
             self.draw_all()

tests/unit/OTAnalytics/plugin_ui/nicegui_gui/pages/canvas_and_files_form/test_canvas_form.py

@@ -119,10 +119,10 @@ class TestCanvasFormHelperFunctions:
 
     def test_create_circle(self) -> None:
         # Arrange
-        event_data = {IMAGE_X: 100.7, IMAGE_Y: 200.3, ELEMENT_ID: "test-element"}
+        event_data = {IMAGE_X: 100.7, IMAGE_Y: 200.3}
 
         # Act
-        circle = create_circle(event_data, fill="red")
+        circle = create_circle(event_data, element_id="test-element", fill="red")
 
         # Assert
         assert circle.x == 101  # rounded
@@ -136,7 +136,7 @@ def test_create_circle_with_default_fill(self) -> None:
         event_data = {IMAGE_X: 50, IMAGE_Y: 75, ELEMENT_ID: "default-element"}
 
         # Act
-        circle = create_circle(event_data)
+        circle = create_circle(event_data, element_id="default-element")
 
         # Assert
         assert circle.fill == NORMAL_COLOR
@@ -146,7 +146,9 @@ def test_create_moving_circle(self) -> None:
         event_data = {IMAGE_X: 150.2, IMAGE_Y: 250.8, ELEMENT_ID: "moving-element"}
 
         # Act
-        circle = create_moving_circle(event_data, fill="blue")
+        circle = create_moving_circle(
+            event_data, element_id="moving-element", fill="blue"
+        )
 
         # Assert
         assert circle.x == 150  # rounded