How antkudruk/xorlab works
XorLAB is a TypeScript toolkit for building multi-axis grids whose nested segment/card geometry represents domain relationships. The principal workflow is to define typed segment and card factories, compose them into layouts, mount the model in a Widget, and render and interact with its visual trees. Optional packages add region-scoped interactions, tree discovery, and linear-algebra overlays; the preprocessor generates typed identities from application factory calls. The README documents the broad layering and extensions; sampled source confirms key controller and tree behavior, but some subsystem wiring is documented rather than sampled.
Main entry points: Card.ts Cards · TreeCard.ts Tree pattern · Widget.ts Widget lifecycle · Seg.ts Segments
Components 20
Domain model
- Seg and card factories
xorlab/src/facade/index.ts - Segments
xorlab/src/basic/Seg.ts - Cards
xorlab/src/basic/card/Card.ts - Typed collections
xorlab/src/collection/index.ts
Layout patterns
- Table pattern
xorlab/src/basic/table/Table.ts - Tree pattern
xorlab/src/basic/tree/TreeCard.ts - Scrollable regions
xorlab/src/basic/scroll/ScrollableSystem.ts - Coordinate placement
xorlab/src/basic/card/CardChildPos.ts
Widget rendering
- Widget lifecycle
xorlab/src/renderer/Widget.ts - Segment visuals
xorlab/src/renderer/segment/SegVi.ts - Card visuals
xorlab/src/renderer/CardVi.ts - DOM renderer
xorlab/src/renderer/Renderer.ts - Pointer handling
xorlab/src/renderer/MouseInteraction.ts
Optional extensions
- Region controllers
xorlab-interactive/src/index.ts - Tree discovery
xorlab-discover/src/index.ts - Algebra overlays
xorlab-linalg/src/index.ts
Type generation
- Preprocessor
preprocessor-library/src/preprocessor.ts - Generated identities
Other components
- Application developer
- Browser DOM
Connections 25
- Application developer → Seg and card factories: defines layout
- Seg and card factories → Segments: creates
- Seg and card factories → Cards: creates
- Cards → Typed collections: nests cards
- Table pattern → Segments: composes
- Table pattern → Cards: places
- Tree pattern → Segments: composes
- Tree pattern → Cards: composes
- Tree pattern → Table pattern: uses
- Scrollable regions → Tree pattern: wraps regions
- Coordinate placement → Cards: positions
- Widget lifecycle → Segment visuals: owns visual tree
- Widget lifecycle → Card visuals: owns visual tree
- Segment visuals → Segments: mirrors geometry
- Card visuals → Cards: mirrors geometry
- Widget lifecycle → DOM renderer: renders
- DOM renderer → Browser DOM: updates DOM
- Widget lifecycle → Pointer handling: dispatches events
- Pointer handling → Region controllers: invokes handlers
- Region controllers → Cards: updates placement
- Tree discovery → Tree pattern: discovers structure
- Algebra overlays → Cards: builds overlays
- Application developer → Preprocessor: runs on source
- Preprocessor → Generated identities: generates types
- Application developer → Generated identities: uses types