Fix touch dragging by deferring re-renders until drag completion

[Copilot]

Touch-based element dragging was broken because each position update triggered a full canvas re-render, destroying and recreating DOM nodes mid-drag. This severed the touch event chain since touches are bound to specific DOM instances.

Changes

State management

• Added updateElementSilent() to update state without triggering notifications
• Modified selectElement() to skip notification when selection unchanged

Drag handling

• handleMouseMove() and handleTouchMove() now use silent updates during drag
• Manual DOM style updates via new helpers for immediate visual feedback
• Single notify() call in handleMouseUp()/handleTouchEnd() after drag completes

Code structure

• Extracted getElementDomNode(), updateElementPosition(), updateElementStyles() to eliminate duplication across mouse/touch handlers

// During drag: update state silently, update DOM manually
this.state.updateElementSilent(elementId, { x: newX, y: newY });
this.updateElementPosition(elementId, newX, newY);

// After drag: trigger single re-render
this.state.notify();

CSS

• Added touch-action: auto to property panel inputs for proper touch scrolling
• Added touch-action: none to canvas elements for custom drag handling

Screenshots

Before: Elements couldn't be dragged with touch
After: Smooth touch-based dragging on mobile viewport

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.