Spatial Graph Mode #165
Spatial Graph Mode #165
Conversation
|
Why not inject css in the code? :) |
|
Also I got weird results when Leyendecker theme was enabled. may want to add to instructions to disable custom themes? |
|
Want to be able to dynamically resize cards (and maybe shortcuts for "make larger/smaller") |
|
Also totally breaks intuitions for vim navigation between panels (where is next? where is down?). probably would want some id and a way to "move to panel x" |
|
vim navigation up/down does not scroll panels =\ |
|
UX: I'd preserve scrolling up/down/left/right and would do zooming with some modifier pressed + scrolling |
|
Surfingkeys help with between panel navigation. |
Long term, I'd like to support navigating left/right/up/down (with elementAtPos possibly). Or maybe a "cycle through edges" shortcut |
I'll do that once I finalize it, it was easier to play with the css in Stylus during development |
Yeah, #160 fixes scrolling. I'll resume it at some point |
tntmarket
force-pushed
the
spatial_graph_mode
branch
4 times, most recently
from
feabb39 to
5a9057f
Compare
This might be non-trivial, I didn't find anything in Cytoscape's API to change the default controls :( |
… exactly on top of each other
tntmarket
force-pushed
the
spatial_graph_mode
branch
from
f8bafa0 to
b3d7f79
Compare
Up/down are already taken by other toolkit shortcuts. Left/right should work |
|
In the new version going between insert and normal mode causes the view to blink/re-render :( |
Yeah I get the blinking too. I currently re-render when editing blocks, in order to dynamically resize the panel as blocks are added/removed, or newlines are added. One idea is to re-render only when the difference is large enough, to avoid annoying flickers on microscopic changes. I'll try it out. Entering insert mode with mouse is currently working for me. |
I used |
tntmarket
force-pushed
the
spatial_graph_mode
branch
from
f4d3a11 to
616b764
Compare
|
Ok @Stvad, I'm confident enough to merge it into master now. It actually doesn't work in Firefox due to cytoscape/cytoscape.js-cola#51, but that seems non-trivial to fix, so I put a warning in the options UI. Other than:
everything else is isolated from existing features. So I think there's a low chance this will break functionality for existing users. I did some regression testing for vim + no spatial mode, and didn't find any issues. |
|
Kudos, SonarCloud Quality Gate passed!
|
|
🔥 |
Demo
Save and restore previously created mind maps!
Copy the saved state using
Ctrl+Shift+s, and paste it into a page. Then pressCtrl+Shift+owhile on the page to restore the layout.Keyboard Shortcuts (Works with Vim!):
Ctrl + h/j/k/lto jump between panelsCtrl + Shift + h/j/k/lto drag panelsCtrl + =/-to zoomPan/zoom with keyboard, will automatically select the vim panel in the middle of the screen.
Select multiple nodes with
shift+click:I got it to work with a custom theme, but I had to remove css selectors that ended with
[style*=".."], otherwise it lags with more than 5 pages.Implementation Overview
Cytoscape is rendered in the background. Roam is click-throughable, in order to interact with cytoscape, but Roam Panels themselves are clickable.
Sidebar pages are diffed between opens/closes, to track when nodes should be added/removed.
The last interacted with panel is tracked, to determine which edges to draw.
Organization structure:
graph-visualization=> manages node/edge statespatial-container=> sets up extra dom containers and stylesspatial-viewport=> manages the camera and selectionsspatial-dom-synchronizer=> updates dom panels to match the graph visualizationroam-panel=> "panels" are now shared between vim mode and spatial moderoam-panel-origin=> keeps track of which panel opened another panels, to draw edgesWishlist