fix: allow fileupload drag and drop in edit mode on full component without triggering file picker

[alpetric]

not sure if there is a better way as MoveResize captures all events

---

Important

Prevents file picker from triggering during drag events in FileInput.svelte by checking pointer movement before allowing click events.

• Behavior:
  • Prevents file picker from triggering on drag events by tracking pointer start positions (pointerStartX, pointerStartY) and checking movement in on:click event.
  • If movement exceeds 5 pixels in any direction, the click event is prevented.
• Functions:
  • Adds handlePointerDown() to record initial pointer positions.
  • Modifies on:click event handler to include movement check logic.

^{This description was created by for a0c4807. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed everything up to afef4ae in 1 minute and 27 seconds. Click for details.

• Reviewed 57 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 3 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. frontend/src/lib/components/common/fileInput/FileInput.svelte:34

• Draft comment:
  Consider using pointer capture (e.g. event.target.setPointerCapture(e.pointerId)) in handlePointerDown for more robust tracking when the pointer leaves the element.
• Reason this comment was not posted:
  Confidence changes required: 50% <= threshold 50% None

2. frontend/src/lib/components/common/fileInput/FileInput.svelte:208

• Draft comment:
  Consider adding a pointerup handler to release pointer capture and reset hasMoved, ensuring the state isn’t left inconsistent if the user releases outside the element.
• Reason this comment was not posted:
  Confidence changes required: 50% <= threshold 50% None

3. frontend/src/lib/components/common/fileInput/FileInput.svelte:210

• Draft comment:
  Consider moving the inline on:click callback into a named function for improved clarity and maintainability.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

Workflow ID: wflow_hJZh11Br2IMWGNnF

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[cloudflare-workers-and-pages]

Deploying windmill with    Cloudflare Pages

Latest commit:	a0c4807
Status:	✅  Deploy successful!
Preview URL:	https://733dd932.windmill.pages.dev
Branch Preview URL:	https://alp-app-file-input-dnd.windmill.pages.dev

View logs

[rubenfiszel]

why not just compute that on click instead of on every move event

[graphite-app]

The current implementation tracks the pointer start position but doesn't continuously monitor movement during drag operations. For proper drag detection, consider adding:

1. A hasMoved boolean flag to track whether movement has occurred
2. A handlePointerMove function to update this flag when movement exceeds the threshold
3. The corresponding on:pointermove event listener on the button element

This would make the drag detection more reliable and match the logic in the click handler that's checking for movement.

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed a0c4807 in 1 minute and 28 seconds. Click for details.

• Reviewed 43 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 3 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. frontend/src/lib/components/common/fileInput/FileInput.svelte:200

• Draft comment:
  Extract the drag threshold (currently 5) into a named constant (e.g., DRAG_THRESHOLD) for improved clarity and easier future adjustments.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

2. frontend/src/lib/components/common/fileInput/FileInput.svelte:199

• Draft comment:
  The click handler uses pointer coordinates (e.clientX/clientY) to decide if the event should be suppressed. This may not be reliable for non-pointer (e.g., keyboard-initiated) clicks. Consider adding a fallback or guard to ensure accessibility.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

3. frontend/src/lib/components/common/fileInput/FileInput.svelte:206

• Draft comment:
  Removal of the pointermove handler and the 'hasMoved' flag simplifies the code. Verify that this change doesn’t inadvertently block valid click events in cases of slight pointer movement.
• Reason this comment was not posted:
  Confidence changes required: 50% <= threshold 50% None

Workflow ID: wflow_8Rl72YfDH6VsRLRf

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}