✨ Add touch device detection for ERD selection behavior

[MH4GF]

User description

Background

Currently, selectionOnDrag is enabled in ReactFlow and a normal drag on the canvas will show a selection box.
This is a deliberate adjustment to provide a Figma-like experience.

ref: https://reactflow.dev/api-reference/react-flow#selection-on-drag
ref: https://reactflow.dev/learn/concepts/the-viewport#figma-like-viewport-controls

However, this does not allow for good panning and zooming on mobile (touch devices).
When opening Figma on a mobile device, when dragging, the canvas moves, so we want to match that.

Testing

Before

trim.354D5FBA-C3D7-4A83-B96B-B738618663EA.MOV

After

trim.600366B1-B6A0-4876-AC76-C651492FC1F7.MOV

Other Information

---

PR Type

Enhancement

---

Description

• Added touch device detection utility to improve mobile experience.

• Disabled selectionOnDrag for touch devices in ERDContent.

• Exported isTouchDevice utility for broader usage.

• Updated changeset to document the enhancement.

---

Changes walkthrough 📝

	Relevant files
Enhancement	ERDContent.tsx Adjusted `selectionOnDrag` for touch devices                          frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx Integrated isTouchDevice utility to conditionally disable selectionOnDrag. Improved mobile usability by enabling panning instead of selection. +2/-1      index.ts Added export for `isTouchDevice` utility                                  frontend/packages/erd-core/src/utils/index.ts Exported isTouchDevice utility for external usage. +1/-0      isTouchDevice.ts Added utility to detect touch devices                                        frontend/packages/erd-core/src/utils/isTouchDevice.ts Implemented isTouchDevice utility to detect touch devices. Checks for touch capabilities using ontouchstart or maxTouchPoints. +6/-0
Documentation	real-hairs-reply.md Added changeset for touch device enhancement                          .changeset/real-hairs-reply.md Documented the change to disable selectionOnDrag for touch devices. Marked the change as a patch update. +5/-0

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[changeset-bot]

🦋 Changeset detected

Latest commit: 5f1e83d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@liam-hq/erd-core	Patch
@liam-hq/cli	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[qodo-merge-pro-for-open-source]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Browser Compatibility The touch detection logic may need additional checks for older browsers or specific devices. Consider testing across different mobile browsers and devices to ensure consistent behavior. export const isTouchDevice = (): boolean => { return ( typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0) ) }

[qodo-merge-pro-for-open-source]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Improve touch device detection accuracy Add a check for window.matchMedia('(pointer: coarse)') to better detect touch-based input, as some devices may support both touch and mouse input. frontend/packages/erd-core/src/utils/isTouchDevice.ts [1-6] export const isTouchDevice = (): boolean => { return ( typeof window !== 'undefined' && - ('ontouchstart' in window || navigator.maxTouchPoints > 0) + ('ontouchstart' in window || navigator.maxTouchPoints > 0 || window.matchMedia('(pointer: coarse)').matches) ) } Apply this suggestion Suggestion importance[1-10]: 7 __ Why: Adding matchMedia check provides more reliable touch device detection, especially for hybrid devices that support both touch and mouse input, improving the user experience across different device types.	Medium
	Cache touch detection result Cache the touch detection result to avoid recalculating on every call, as device capabilities don't change during runtime. frontend/packages/erd-core/src/utils/isTouchDevice.ts [1-6] +let isTouchDeviceResult: boolean | null = null; + export const isTouchDevice = (): boolean => { - return ( - typeof window !== 'undefined' && - ('ontouchstart' in window || navigator.maxTouchPoints > 0) - ) + if (isTouchDeviceResult === null) { + isTouchDeviceResult = typeof window !== 'undefined' && + ('ontouchstart' in window || navigator.maxTouchPoints > 0); + } + return isTouchDeviceResult; } Apply this suggestion Suggestion importance[1-10]: 6 __ Why: Caching the detection result improves performance by avoiding unnecessary recalculations, since device capabilities don't change during runtime. This is particularly beneficial when isTouchDevice is called frequently.	Low

[FunamaYukina]

Wow, the experience was so much better!✨ I'm so happy! I checked with MOBILE.

[junkisai]

It seems to me that the usability of mobile devices has improved!