chrisjpatty / flume

Extract logic from your apps with a user-friendly node editor powered by React.
https://flume.dev
MIT License
1.46k stars 147 forks source link

Color connecting lines relative to boolean state #30

Open andraz-at opened 4 years ago

andraz-at commented 4 years ago

All lines are gray at the moment.

Boolean flow would be easier to visualize if green line would represent true and red line false state.

Is this available or would an upgrade with dynamic css classes applied to the line dom elements be needed first?

chrisjpatty commented 4 years ago

This isn't currently possible, but to make it possible I think two features would be required:

  1. Theming: Styles will need to be able to be dynamically applied based on input data.
  2. Live logic resolution in the Node Editor. Right now the node editor has not built-in concept of what data is coming from input nodes, so a boolean port may not know in the editor if the data flowing through it is a true or a false. Unless of course you're intending to have a true and a false output port. Is that the case?
andraz-at commented 4 years ago

If I'm understanding you correctly the nodes are a graphical representation of the logic network, but individual nodes never receive live data while it is getting calculated because the execution is optimized into a separate process?

Could this process get a "debug" mode or a "live" mode, where engine on purpose reduces it's own optimization to push data to the dom node's data properties while the engine is calculating data?

Calculating one output node value would imply all of the inputs and paths values which all should be equal, so this is an easy optimization enabling us to hook css styling to the data property, just copy the output data value on to the linked dom nodes.

Storing the results first into a set as they're getting calculated, and only updating dom nodes at the end, could additionally optimize the execution - if the same dom output object would get multiple changes before stabilizing this could cause redraws.

p.s.: be careful to avoid CSS spec bug for custom data attribute styling, data needs to start with a character: https://stackoverflow.com/a/21971962