Skip to content

LayoutSans now has real text interaction: selection, copy, search & links on canvas (pure TS, no DOM layout)

Latest

Choose a tag to compare

@BaselAshraf81 BaselAshraf81 released this 04 Apr 04:15
· 10 commits to main since this release

v0.2 — Interactive Text Engine

This release introduces a robust, canvas-based interaction layer, transforming the engine from a static layout tool into a fully interactive text environment.

Core Interaction Features

  • Canvas-Based Selection: Support for native-feeling text selection including click-drag, double-click for word selection, sub-glyph precision, and shift-click to extend ranges.
  • Programmatic Control: Full API access to manage selection states and cursors.
  • System Integration: Native OS clipboard integration supporting standard shortcuts (e.g., Ctrl+C).
  • Search & Navigation: Integrated Ctrl+F full-text search featuring highlighted matches and jump-to-navigation.

Accessibility & Navigation

  • Shadow Semantic Tree: A virtualized accessibility layer using $O(\text{viewport})$ DOM nodes to ensure compatibility with screen readers like VoiceOver, NVDA, and JAWS.
  • Focus Management: Full keyboard focus support coupled with custom canvas-drawn focus rings.
  • Interactive Elements: Support for clickable hyperlinks including reactive hover states.

Performance & Architecture

  • Spatial Hit-Testing: Utilizes a packed R-Tree for spatial queries, maintaining high performance even with 100k+ interactive items.
  • Layout Core: Built upon the high-performance pure-math layout engine powered by Pretext for sub-pixel accurate text measurement.

Live Demo

Experience 100k variable-height items with full text interactivity:
https://baselashraf81.github.io/layout-sans/demo/interactive-text.html