Repository navigation
LayoutSans now has real text interaction: selection, copy, search & links on canvas (pure TS, no DOM layout)
Latestv0.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+Ffull-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