microsoft / microsoft/Huabu

Touch-safe read-only canvas mode to prevent accidental node resize/extend

Open
#85 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
TypeScript
Stars
146
Forks
20
Avg merge
2d 6h
Merged PRs (30d)
43

Description

Problem

On phones and touch-screen devices, precise finger interaction is difficult. Selecting a node currently exposes nearby affordances for resizing and extending the node (for example, creating a new node). These controls are easy to trigger accidentally during ordinary touch interaction.

Requested feature: global touch-safe / read-only interaction mode

Add a global setting/mode optimized for touch screens, conceptually a read-only or touch-safe mode. When enabled:

  • Selecting a node should not expose or activate resize handles.
  • Selecting a node should not expose or activate extend/create-node affordances.
  • Accidental drags or taps on those editing controls should not mutate the canvas.
  • Node selection should remain available for switching to the chat panel and moving/repositioning the node.
  • The mode should apply globally and be easy to toggle, so it can be used consistently across touch devices.

The exact interaction policy for moving nodes should be defined carefully: moving/repositioning is explicitly desired, while resize/extend/edit affordances should be disabled.

Nice to have: single-tap panel switch

In this touch-safe mode, a single tap on a selected node could switch/open its chat panel. This is especially valuable on touch screens because double-tapping is less reliable and harder to perform precisely. If single-tap panel switching creates ambiguity with selection or dragging, define a clear gesture rule (for example, tap selects and opens the panel; drag moves without opening it).

Acceptance criteria

  • A user can enable the global touch-safe/read-only mode.
  • On touch devices, selecting nodes does not present resize or extend/create affordances that can be triggered accidentally.
  • Node movement remains possible.
  • Chat-panel access remains possible.
  • The mode can be disabled to restore the normal editing interaction model.
  • Ideally, a single tap opens or switches to the selected node's chat panel without requiring a double-tap.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the canvas node-selection interactions, resize and extend/create affordances, chat-panel access, and the global settings entry point. Define the touch-safe toggle and gesture policy so selection, movement, and chat access remain possible while resize and extend actions cannot mutate the canvas; verify each acceptance criterion on touch input and after disabling the mode.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.