Merge pull request #11 from Matiiss/image-tool

Smudge tool for the image editor

Author: HiPeople21

pyproject.toml

@@ -3,24 +3,17 @@
 # Don't forget to change the name, description, and authors to match your project!
 name = "code-jam-template"
 description = "Add your description here"
-authors = [
-    { name = "Your Name" }
-]
+authors = [{ name = "Your Name" }]
 version = "0.1.0"
 readme = "README.md"
 requires-python = ">=3.12"
-dependencies = [
-    "nicegui>=2.22.2",
-]
+dependencies = ["nicegui>=2.22.2"]
 
 [dependency-groups]
 # This `dev` group contains all the development requirements for our linting toolchain.
 # Don't forget to pin your dependencies!
 # This list will have to be migrated if you wish to use another dependency manager.
-dev = [
-    "pre-commit~=4.2.0",
-    "ruff~=0.12.2",
-]
+dev = ["pre-commit~=4.2.0", "ruff~=0.12.2"]
 
 [tool.ruff]
 # Increase the line length. This breaks PEP8 but it is way easier to work with.
@@ -41,25 +34,31 @@ src = ["src"]
 select = ["ALL"]
 # Ignore some of the most obnoxious linting errors.
 ignore = [
-    # Missing docstrings.
-    "D100",
-    "D104",
-    "D105",
-    "D106",
-    "D107",
-    # Docstring whitespace.
-    "D203",
-    "D213",
-    # Docstring punctuation.
-    "D415",
-    # Docstring quotes.
-    "D301",
-    # Builtins.
-    "A",
-    # Print statements.
-    "T20",
-    # TODOs.
-    "TD002",
-    "TD003",
-    "FIX",
+  # Missing docstrings.
+  "D100",
+  "D104",
+  "D105",
+  "D106",
+  "D107",
+  # Docstring whitespace.
+  "D203",
+  "D213",
+  "D413",
+  # Docstring punctuation.
+  "D415",
+  # Docstring quotes.
+  "D301",
+  # lowercase issues.
+  "N802",
+  "N803",
+  # clas scope should not be mixedCase
+  "N815",
+  # Builtins.
+  "A",
+  # Print statements.
+  "T20",
+  # TODOs.
+  "TD002",
+  "TD003",
+  "FIX",
 ]

src/editor/main.py

@@ -4,7 +4,7 @@
 import random
 
 from nicegui import app, ui
-from nicegui.events import UploadEventArguments
+from nicegui.events import UploadEventArguments, ValueChangeEventArguments
 
 app.add_static_files("/scripts", pathlib.Path(__file__).parent / "scripts")
 
@@ -50,6 +50,42 @@ def reset_confirmation(*, mode_value: bool = False) -> None:
     dialog.open()
 
 
+# I really don't want to do this but I don't know how else to achieve it
+global_vars = {
+    "type_programatically_changed": False,
+}
+
+
+def revert_type() -> None:
+    """Revert the type change when cancel is clicked."""
+    global_vars["type_programatically_changed"] = True
+    type_toggle.set_visibility(False)
+    type_toggle.value = "smooth" if type_toggle.value == "pixel" else "pixel"
+    type_toggle.update()
+    type_toggle.set_visibility(True)
+    global_vars["type_programatically_changed"] = False
+
+
+def change_type(*, mode_value: bool = False) -> None:
+    """Prompt user to reset canvas."""
+    if global_vars["type_programatically_changed"]:
+        return
+    with ui.dialog() as dialog, ui.card():
+        ui.label("Are you sure you want to change the drawing mode? This will clear the canvas.")
+        with ui.row().style("display: flex; justify-content: space-between; width: 100%;"):
+            ui.button(
+                "Cancel",
+                on_click=lambda: (
+                    dialog.close(),
+                    revert_type(),
+                ),
+            )
+            ui.button("Change", on_click=lambda: (do_reset(mode_value=mode_value), dialog.close())).props(
+                "color='red'",
+            )
+    dialog.open()
+
+
 def reset() -> None:
     """Reset canvas."""
     ui.run_javascript("""
@@ -91,6 +127,16 @@ def upload_image(e: UploadEventArguments) -> None:
     """)
 
 
+def switch_action(e: ValueChangeEventArguments) -> None:
+    """Fire switch action event."""
+    ui.run_javascript(f"""
+    const event = new Event('change');
+    const actionSelect = document.querySelector("#action-select");
+    actionSelect.setAttribute("value", "{e.value}");
+    actionSelect.dispatchEvent(event);
+    """)
+
+
 ui.element("img").props("id='file-upload'").style("display: none;")
 
 with ui.row().style("display: flex; width: 100%;"):
@@ -102,15 +148,20 @@ def upload_image(e: UploadEventArguments) -> None:
         ui.button("Download").props("id='download-button'")
         ui.upload(
             label="Upload file",
+            # The following event is fired in case the image upload is above the canvas.
+            # This would change the getBoundingClientRect() of the canvas.
+            on_begin_upload=lambda: ui.run_javascript("""
+                const event = new Event('resize');
+                window.dispatchEvent(event);
+            """),
+            auto_upload=True,
             on_upload=upload_image,
             on_rejected=lambda _: ui.notify("There was an issue with the upload."),
-        ).classes(
-            "max-w-full",
         ).props("accept='image/*' id='file-input'")
-        ui.toggle(
+        type_toggle = ui.toggle(
             {"smooth": "✍️", "pixel": "👾"},
             value="smooth",
-            on_change=lambda e: reset_confirmation(mode_value=e.value),
+            on_change=lambda e: change_type(mode_value=e.value),
         ).props("id='type-select'")
 
     ui.element("canvas").props("id='image-canvas'").style(
@@ -119,7 +170,17 @@ def upload_image(e: UploadEventArguments) -> None:
 
     # Canvas controls
     with ui.column().style("flex-grow: 1; flex-basis: 0;"):
-        ui.toggle({"pen": "🖊️", "eraser": "🧽"}, value="pen", on_change=lambda _: reset_confirmation()).props(
+        action_options = {
+            "pen": "🖊️",
+            "eraser": "🧽",
+            "smudge": "💨",
+        }
+
+        action_toggle = ui.toggle(
+            action_options,
+            value="pen",
+            on_change=switch_action,
+        ).props(
             "id='action-select'",
         )
         ui.separator().classes("w-full")
@@ -145,7 +206,12 @@ def upload_image(e: UploadEventArguments) -> None:
         width_input.bind_value(width_slider)
 
 ui.add_body_html("""
-    <script type="py" src="/scripts/editor.py" defer></script>
+    <py-config>
+        [[fetch]]
+        from = "/scripts/"
+        files = ["canvas_ctx.py", "editor.py"]
+    </py-config>
+    <script type="py" src="/scripts/editor.py"></script>
 """)
 
 ui.run()