flowfuse / flow-renderer Goto Github PK
View Code? Open in Web Editor NEWLicense: Apache License 2.0
License: Apache License 2.0
When a flow has Nodes collapsed to small size (hide label option) or when the flow renderer has labels:false
option, it would be good to show the label as a tooltip. Node-RED does this.
Look at this demo rendering the the same flow. Top one has default options, 2nd one has the labels
options set false
. The computed size of the node is not correct and since Node-RED uses the centerpoint for positioning a node, it looks quite odd.
the option to not show labels should not affect positioning or size
run the built in demo npm run demo
for example, core nodes tcp & udp are missing icons (non exhaustive)
import flow with all core nodes - some are rendered in default styling
flows rendered on a mobile (touch screen device) cannot pinch to zoom within the flow container.
Ideally, support pinch zoom
MVP: add zoom buttons [+] [o] [-] buttons like Node-RED has at the bottom right of the canvas
open rendered flows on a mobile touch device
Add suitable tests
No response
When my flow starts say 150 pixels down, and 300 pixels to the right, the top left part of the SVG / canvas has an open space which is slightly awkward. It would be great of the view would shift the thing down.
No response
Nodes set to show no label are rendered full size. This typically causes users flows to be badly laid out with overlapping nodes
nodes with label hidden should be drawn without a label (same as node-red does)
import flow with regular core nodes, some of them with the hide label option set
Add standard eslint to the package.
Some of the code (imported directly from Node-RED) will likely need block exceptions e.g.
ESLint supports block comments /* eslint-disable */
to disable all rules for a block of code until /* eslint-enable */
is encountered
No response
CSS built in overrides scroll bar appearance. This affect the whole site.
remove (or condition) scroll bar overrides in the CSS
No response
When zooming scroll bars remain the same.
When zooming in, scroll bars should be reduced (more to scoll). When zooming out, scroll bars should be increased (less to scroll)
Zoom out to max, scrolling reveals whitespace.
If a flow tab is disabled, it is rendered as enabled
tabs marked disabled should be shown as disabled (same as node-red)
import a flow with a tab disabled
Provide copy and download buttons with the diagram.
Ideally, these would be added to dom and shown when specified (individually) in the options.
No response
As an integrator/user of this library:
I want to render flows serverside
So that: we can protect IP, cache flow diagrams, other
consider auto-rendering of matching div.class
consider rendering flow data in a pre
consider how to handle html escaped JSON
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.