flowhub / the-graph Goto Github PK
View Code? Open in Web Editor NEWSVG custom elements for FBP graph editing and visualization. Used in noflo/noflo-ui
Home Page: https://flowhub.github.io/the-graph/demo-full.html
License: MIT License
SVG custom elements for FBP graph editing and visualization. Used in noflo/noflo-ui
Home Page: https://flowhub.github.io/the-graph/demo-full.html
License: MIT License
When user zooms in, we should at some threshold start showing the port names.
nodes should snap #8 centered in the css grid
and the grid is getting off on zoom, fixing itself on pan
related to #24 (rounding to whole pixels), the grid is getting off with rounding background size and node positions.
if the listener is attached to window
is will also fire when dragging and releasing outside of the window, like gmaps
tested and working with
var graph = this;
window.addEventListener('track', function(event) {
graph.panning({
x: graph._pan.x + event.dx,
y: graph._pan.y + event.dy
});
});
window.addEventListener('trackend', function(event) {
graph.panned({
x: graph._pan.x + event.dx,
y: graph._pan.y + event.dy
});
});
Think we should iron these out sooner than later:
pos="x y"
pan="x y"
since we need to react to both when one or both change. (Or properties? node.pos = {x:100, y:100}
)The graph component is responsible for displaying a graph. It may allow things like panning and zooming, but it shouldn't make any modifications to the graph (though it can of course react to modifications that happen anyway).
The graph editor component uses the graph component and adds the editing features.
This way we can use the-graph
for static graph visualization, and the-graph-editor
as the actual editing UI.
With #14 zooming is now centered, which is perfect for non-touchscreen devices that use the zoom controls on the map screen.
However, this still isn't exactly how zooming should behave on the pinch gesture. Essentially what you want is tracking the position of the fingers, and changing map zooming and panning so that the fingers constantly stay on the same "absolute" graph coordinates regardless of how you pinch.
For touchscreen devices, it would be nice to have a gesture where by swiping across a wire (or a set of them) they get removed.
pan a bit, then pause, then move again... the pan skips. need to reset something else when panned
is hit.
This means the absolute minimum size should be 22 pixels for the following things:
Another way to make edges:
We should see if this is better than the directional gestures to move vs connect.
Even though we need to have an infinite canvas (#10), we still should not users get lost in the dot grid jungle.
So, limit panning so that at least one node from the graph is always visible on screen.
Currently position calculations seem kind of heavy. On a graph with 45 nodes that contain 105 ports, the calculation can take around 500-700ms.
A big part of this might be the fact that each port queries its siblings to find its relative position. It might be better to put the-graph-inports
and the-graph-outports
into the driver's seat to make this more coordinated.
See gss/gss#6
translate on the-graph
translate on the-process
size of the-process
left of the-process h1 (gss/gss#5)
Currently the port side (E, S, W, N) is determined by the last edge added. Instead, this should happen by looking at all the connected edges and choosing the direction matching most of them.
graph: select, pan, zoom
node: move, connect
We've been avoiding modes as a design constraint, but I think eventually we'll have to break down and use them (+ keyboard shortcuts).
When parts of the graph are outside the current view, we should display a minimap showing the whole graph, with the current viewport highlighted.
It doesn't have to be an exact reproduction of the big graph, it is probably enough to just show the nodes as "blips"
(This could also be useful to preview a subgraph or collapsed group.)
make some zoom breakpoint classes to make the font smaller / closer to node
<the-graph-process>
<h1 class="the-graph-process-label">makeMinuteRotation</h1>
</the-graph-process>
Pretty basic, but impossible with css unless they all have a certain width.
Instead of having a single edge drawing algorithm, we should look at the heading of the edge (from source node to target node), and pick the right algorithm:
Currently node dragging is 100% accurate, following your pointer (though, see #5). This makes graphs fiddly and easily messy-looking. We should instead implement a snap-to-grid feature. The sizing of that grid is another question... even a 10 pixel grid could be helpful, but on the bigger end we could even impose a grid of the same size as the nodes are.
edge and node
Workaround until this is fixed: two-finger/mouse-wheel scroll works while dragging a node.
Currently we zoom at an edge. Instead, zooming should center at:
This should affect pan state accordingly
for real this time ๐
Currently the graph background is a passive dot grid. In the sketches however it had some additional features:
The heatmap should react to selection/highlighting state of nodes and show a brighter background for the grid under selected nodes, fading towards the regular dark background along the connections of that node
A fast swipe should pan all the way across the graph (but not further, #15).
Should feel the same as the browser's momentum scrolling. Is there an accepted equation for that?
when highlighted or dragging
the-graph-export
nodes should be visualized as "pseudo-nodes" that can be moved around, removed, etc.
Basically the same look as regular the-graph-process
instances but without highlighting.
We have a lot of empty space in the boxes, especially after zooming in. At some zoom level we should show all port labels.
Maybe we shouldn't change ids: 9e9546e#commitcomment-4605161
So, dragging directly from one node to another (e||w) will result in the first (compatible) ports being ready to connect.
mouse wheel and 2-finger move on trackpads. i went with pan in dataflow. gmaps zooms.
Side effect of the work on #10 , currently we have nodes disappearing on several situations, like:
They reappear on pan, so this is probably a bumped value problem.
Nodes should snap to grid on release, otherwise feels too jittery
I'm voting to not rotate the ports to match the wires. I think it is more important that they match the direction of the gesture.
The snap-to-grid feature from #8 should be entirely a visual aid for making graphs look cleaner with less fiddling. However, the grid should not affect the actual x, y coordinates of nodes:
This way we can even make the grid configurable, as it might be that the desirable grid size for a graph is anything between 1 pixel and [node-width]
.
Now the wires are so narrow that it is pretty much impossible to touch and manipulate them. We need to make the thicker without affecting how they look.
When the node in either end of an edge is removed, the edge should get removed as well.
Possibly needs MutationObservers.
depending on the nodes that it is connected to
For a better way of explaining the structure of a graph, we need to support something like node grouping/layering with some textual information added.
The groups could be possible to either hide completely ('show only the templating part of this graph'), or maybe showable as a single node, sort of as 'inline subgraphs'.
Originally opened as meemoo/dataflow#56, see that for older discussion. The NoFlo side of this ticket is noflo/noflo#62
Grouped nodes in a graph:
Group navigator card (which would be in noflo/noflo-ui):
I'm noticing that moving nodes is pretty slow, and I think the timeline is saying it is the pointer event polyfill's fault.
Found another polyfill that could be worth trying: https://github.com/Rich-Harris/Points
Since that one intercepts events at the window level, it could maybe allow gmaps-like panning while dragged outside of the window.
Would be nice to drag the node from where the gesture started (or middle) instead of top-left. In forresto/dataflow-prototyping#1 it snapped to the middle while dragging and that seemed ok.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.