Skip to content

Ideogram4 Prompt Builder: make bbox editor usable on mobile. Fixes issue #660 - #661

Open
RoyHammerlin wants to merge 2 commits into
kijai:mainfrom
RoyHammerlin:mobile-touch-ideogram-prompt-builder
Open

Ideogram4 Prompt Builder: make bbox editor usable on mobile. Fixes issue #660#661
RoyHammerlin wants to merge 2 commits into
kijai:mainfrom
RoyHammerlin:mobile-touch-ideogram-prompt-builder

Conversation

@RoyHammerlin

Copy link
Copy Markdown

What
Makes the bounding-box editor in the Ideogram 4 Prompt Builder fully usable on a mobile/touch browser, and gives newly created regions a sensible minimum size.

Why
The canvas interaction (draw / move / resize), the layers-menu row reorder, and the colour-swatch reorder were all wired to mouse events (mousedown → document mousemove/mouseup). Touch browsers synthesise mousedown/mouseup/ dblclick from a tap, so selecting a region and double-tapping to edit worked, but they do not emit a continuous mousemove stream during a finger drag — so dragging, resizing, and drag-to-draw silently did nothing on mobile. There was also no touch-action rule, so touches were consumed as page scroll / pinch-zoom.

Changes (all in web/js/ideogram4_prompt_builder.js)

  • Canvas drag, layer-row reorder, and swatch reorder now use Pointer Events (pointerdown/pointermove/pointerup) with setPointerCapture, covering mouse, touch and pen through one path.
  • touch-action: none on the canvas and on the draggable rows/swatches.
  • Touch/pen double-tap on a region opens the inline editor; double-tap on empty space creates a new default-size region. Mouse keeps using the native dblclick handler.
  • Long-press on the canvas opens the layers menu (the touch equivalent of right-click).
  • New "+ Box" toolbar button — adds a region in the centre to drag/resize. Also covers the case where a full-canvas background region leaves no empty space to draw on.
  • Newly drawn regions are grown to a minimum grabbable size; tap-sized "draws" are discarded rather than left as pixel-thin slivers. Sizes are constants at the top of the file.

Compatibility
Desktop/mouse behaviour is intentionally unchanged: the mouse drives the same pointer code paths, the hover highlight stays mouse-only, and the native double-click and right-click handlers are preserved.

Testing
Tested on desktop with a mouse and in a mobile browser with touch: select, move, resize, draw, double-tap-to-edit, long-press menu, reorder, and the new "+ Box" button all behave as expected.

(Context: this follows up the mobile issue I reported and the earlier attempt in dc2cc18 — that commit didn't convert the canvas interaction to pointer events, which is the part that actually unblocks touch.)

What
Makes the bounding-box editor in the Ideogram 4 Prompt Builder fully usable on a
mobile/touch browser, and gives newly created regions a sensible minimum size.
Why
The canvas interaction (draw / move / resize), the layers-menu row reorder, and the
colour-swatch reorder were all wired to mouse events (mousedown →
document mousemove/mouseup). Touch browsers synthesise mousedown/mouseup/
dblclick from a tap, so selecting a region and double-tapping to edit worked, but
they do not emit a continuous mousemove stream during a finger drag — so dragging,
resizing, and drag-to-draw silently did nothing on mobile. There was also no
touch-action rule, so touches were consumed as page scroll / pinch-zoom.
Changes (all in web/js/ideogram4_prompt_builder.js)

Canvas drag, layer-row reorder, and swatch reorder now use Pointer Events
(pointerdown/pointermove/pointerup) with setPointerCapture, covering mouse,
touch and pen through one path.
touch-action: none on the canvas and on the draggable rows/swatches.
Touch/pen double-tap on a region opens the inline editor; double-tap on empty space
creates a new default-size region. Mouse keeps using the native dblclick handler.
Long-press on the canvas opens the layers menu (the touch equivalent of right-click).
New "+ Box" toolbar button — adds a region in the centre to drag/resize. Also covers
the case where a full-canvas background region leaves no empty space to draw on.
Newly drawn regions are grown to a minimum grabbable size; tap-sized "draws" are
discarded rather than left as pixel-thin slivers. Sizes are constants at the top of
the file.

Compatibility
Desktop/mouse behaviour is intentionally unchanged: the mouse drives the same pointer
code paths, the hover highlight stays mouse-only, and the native double-click and
right-click handlers are preserved.
Testing
Tested on desktop with a mouse and in a mobile browser with touch: select, move,
resize, draw, double-tap-to-edit, long-press menu, reorder, and the new "+ Box" button
all behave as expected.
(Context: this follows up the mobile issue I reported and the earlier attempt in
dc2cc18 — that commit didn't convert the canvas interaction to pointer events, which is
the part that actually unblocks touch.)
@RoyHammerlin RoyHammerlin changed the title Ideogram4 Prompt Builder: make bbox editor usable on mobile. Fixes #660 Ideogram4 Prompt Builder: make bbox editor usable on mobile. Fixes issue #660 Jun 8, 2026
Lowered speed threshold for double-tap
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant