Code reference detail
graph-physics.ts
packages/extension/webviews/shared/graph/graph-physics.ts
| Idea | Status | Tags | Summary |
|---|---|---|---|
| html_export | The extension should support building documentation as html from the requirement graph. Html export should render ideas, attributes, references, and navigable structure suitable for sharing. Core export pipeline lives in `@reqlan/analytical` ( `exportHtml` / `AnalysisApi.exportHtml` ); the extension command palette and CLI ( `reqlan export` ) are thin hosts. A command palette action ( and the Ideas Summary link ) should open ["./features-export.rq".export_webview] with HTML selected and export requirements to html as a multi-file static site ( single-file mode remains optional via [html_export_runtime_modes] ). HTML-specific form fields live under [html_export_form] within that general export webview. [html_export_form] [html_export_multi_file] [html_export_internal_links] [html_export_search] [html_export_list_views] [html_export_idea_pages] [html_export_file_pages] [html_export_code_reference_pages] [html_export_cluster_pages] [html_export_graph_page] [html_export_attributes_index] [html_export_attribute_pages] [html_export_printable_pages] [html_export_runtime_modes] [html_export_scrollable_lists] [html_export_header_link] [html_export_url_base] | ||
| html_export_graph_animation | Live physics in the HTML export should match Ideas Summary animatePhysics: continuous damped semi-implicit Euler using the defaults from ["../../packages/analytical/src/graph/physics-core.js"] ( same module as ["../../packages/extension/webviews/shared/graph/graph-physics.ts"] ). A Live physics toggle pauses and resumes the same simulation state ( default off ); when off, the graph batch-settles then sleeps. Simulation should converge and sleep when calm, waking on filter changes or when Live physics is turned back on, aligned with [layout_physics]. Large graphs use a spatial grid + repulsion cutoff in the shared core; all nodes and full labels remain visible. | ||
| html_export_graph_layout | The interactive export graph should lay out nodes so labels and circles do not heavily overlap. Initial placement should settle with the same Obsidian-style force model as [layout_physics] ( central gravity, edge springs, inverse-square repulsion ). Rendering uses canvas 2 d ( not SVG DOM ) with shared physics from ["../../packages/analytical/src/graph/physics-core.js"]. | ||
| graph_cy_controller | the cytoscape object should use event driven patterns; lifecycle is documented here. GraphCyController in ["../../../packages/extension/webviews/shared/graph/graph-cy-controller.ts"] owns the cytoscape instance with inline lifecycle state ( idle, syncing, layouting, physics ). syncGeneration cancels stale layout callbacks when the slice changes mid-layout. Selection and drag-pinned positions are tracked in userPositionedNodes on the controller. syncSlice diffs elements ( add / remove / update the delta ) via ["../../../packages/extension/webviews/shared/graph/graph-cy-elements.ts"] so surviving nodes keep positions; requestLayout restarts the active algorithm and clears user pins. Pointer / selection wiring lives in ["../../../packages/extension/webviews/shared/graph/graph-cy-interactions.ts"]; compound hover / selection in ["../../../packages/extension/webviews/shared/graph/graph-cy-highlight.ts"]. Live physics is the custom simulation in ["../../../packages/extension/webviews/shared/graph/graph-physics.ts"]; one instance persists with the cytoscape instance and is paused / resumed, never rebuilt. Grabbing a node pins it in the running sim ( its live position keeps exerting forces ); release unpins with no restart and no snap. ResizeObserver debounces cy. resize ( ) and re-triggers a pending sync when the container gains size. Mount only while the graph container is visible and non-zero — do not keep cytoscape alive under display: none; WebGL init on a zero-size hidden container can break the host webview before messaging is attached. Viewport fitting per [reframe_view]; tracks lastSyncedNodeSetKey vs fittedNodeSetKey to drive [auto_reframe]. Label visibility per [graph_label_modes] / [graph_label_auto]: setLabelMode updates text-opacity from zoom ( and hover / drag force-opaque in auto ). | ||
| graph_library | Reusable cytoscape-based graph visualization library for force-directed and compound graphs. Provides a mount → sync slice → layout → optional live physics → destroy lifecycle with a simplified API. Implementation lives in ["../../../packages/extension/webviews/shared/graph/graph-cytoscape.ts"], ["../../../packages/extension/webviews/shared/graph/graph-cy-controller.ts"], ["../../../packages/extension/webviews/shared/graph/graph-cy-elements.ts"], ["../../../packages/extension/webviews/shared/graph/graph-cy-interactions.ts"], ["../../../packages/extension/webviews/shared/graph/graph-cy-highlight.ts"], ["../../../packages/extension/webviews/shared/graph/graph-physics.ts"], ["../../../packages/extension/webviews/shared/graph/graph-groups.ts"], and ["../../../packages/extension/webviews/shared/graph/graph-theme.ts"]. Ideas Summary re-exports the shared modules from ["../../../packages/extension/webviews/ideas-summary/lib/"] for backward-compatible import paths. Consumers pass a node / edge slice and sync options; the library owns the cytoscape instance, diffing, layout runs, and optional continuous physics. | ||
| layout_physics | defaults to force-directed layout ( fcose ) with animation on, but callers can select other options offered by cytoscape. js. a toggle leaves layout animation and live physics on for force-directed layouts instead of settling immediately. live physics is the custom obsidian-style simulation in ["../../../packages/extension/webviews/shared/graph/graph-physics.ts"] ( force core: ["../../../packages/analytical/src/graph/physics-core.js"] ), regardless of which force-directed batch layout produced the initial settle. forces are central gravity toward the centroid, linear edge springs, and inverse-square node repulsion; every childless node participates, including disconnected orphans. group container constraints live in ["../../../packages/extension/webviews/shared/graph/graph-groups.ts"]: each leaf carries data ( ' groupIds' ); disjoint groups are pushed apart after batch cola / fcose and during Animate; groups that share a member ( multi-membership, e. g. tags ) may overlap around the shared node. the simulation is deterministic ( no randomness ) and converges slowly over tens of seconds, then sleeps; interactions wake it instead of restarting it. dragging pins the held node while the sim keeps running around it; release rejoins the node at rest with no snap; clicks never disturb the sim. cycling the Animate toggle pauses and resumes the same simulation state, so it converges to the same attractor as leaving it on. | ||
| technology | uses cytoscape. js for the graph layout and canvas. cytoscape-fcose provides the batch force-directed settle; cytoscape-cola is available as a batch layout option. continuous ( " live " ) physics is a custom simulation in ["../../../packages/extension/webviews/shared/graph/graph-physics.ts"]. the controller initialises cytoscape with Canvas 2 D only ( pixelRatio 1, no WebGL ) so webviews do not break on unresolved CSS variables. Body prose with inline parentheses must parse per ["../../../reqlan rq/language/syntax.rq".lists] and ["../../../reqlan rq/language/syntax.rq".round_brackets]. |
Reference labels
../../../packages/extension/webviews/shared/graph/graph-physics.ts, ../../packages/extension/webviews/shared/graph/graph-physics.ts