Merge multiple CSS transforms / sync styles across behaviors

[Prinzhorn]

We need a way to set style across all behaviors in sync. E.g. the layout and (transition + ) translate behavior both need to update transforms. We shouldn't touch style directly inside a behavior ever, but have something merge them. E.g. the layout behavior uses translate() to position the element and the translate behavior translates it vertically as you scroll (appear.vertical in legacy code). They both don't need to know about each other. This top-level style-applier could also notify you in console if two behaviors update the same style, e.g. color and have a conflict because they overwrite each other. So, could this maybe be handled by, say, a css behavior? It could be implicitly added to every single component. Can then be accessed using this.el.css. It works transparently using setters, so no need to pass objects around with functions. this.el.css.color = 'red' will just work. Basically it can be used like regular this.el.style, but it has magic powers like adding prefixes and merging transforms. It would reset it's internal state after each render, so that it can keep track if e.g. this.css.color has been set multiple times. Setting this.el.css.transform multiple times will just merge them. this.el.css.opacity could just multiply all of them. This would result in some GSAP-level flexibility.

In order for the css behavior to do this in sync, it needs to coordinate a few things.

1. It needs to be the first one to be notified of guidelayout::layout and scroll events
2. It then iterates over all behaviors giving them a chance to set styles (iterating over all of them could simply mean trigger an even that they can listen for)
3. After all styles have been collected, they can be applied to the element and the internal buffer is reset

[Prinzhorn]

What if one behavior just sets the background to red, but another behavior animates the color? The first behavior would only need to apply the style in attach and remove it in detach. The other needs to do it for every scroll.

Let me fall back. What is it that I'm actually trying to solve?

• Merging multiple transforms from different behaviors (layout + transform)
• I'm also trying to sync render and scroll calls bc right now render doesn't have access to the layout engine
• Possibly add prefixes transparently

[Prinzhorn]

I'm also trying to sync render and scroll calls bc right now render doesn't have access to the layout engine

that's fixed by now

[Prinzhorn]

Instead of making it a behavior itself I've put it in the core of Behaviors themselves. Using this.css.translate = 'foo' inside a behavior gives you all the things mentioned above. It will transparently store styles from multiple behaviors and merges them. You also don't need to clean up just like this.listen. The behavior will remove your styles for you. Why can't everything be so simple?

There is just one little thing we need to take care of: ordering. Especially in the case of CSS transforms we need to have a consistent order, because the order of transform operations matters. This is tricky because two behaviors that don't have a common dependency do not have a guaranteed order in which they are attached.

[Prinzhorn]

There is just one little thing we need to take care of: ordering. Especially in the case of CSS transforms we need to have a consistent order, because the order of transform operations matters. This is tricky because two behaviors that don't have a common dependency do not have a guaranteed order in which they are attached.

The actual order in this case is not important (there simply is no intrinsic order) but we need to make the order consistent. For the most important case (layout -> transform behavior) the order is given by the dependencies. However, we currently don't have a linearized list of behaviors. We will create and update this list every time defineBehavior is called (divide-and-conquery the problem down to a single behavior and its position within the list). This list can then be used by both the attachBehaviors call and the applyBehaviorStyle method.

[Prinzhorn]

The order is now consistent with the order the behaviors are defined.