WIP: Color properties

[alexharri]

Changes

New properties

Added a few properties to rect layers. This is what a fully expanded rect layer looks like:

Fill & Stroke

The "Stroke Width" and "Border Radius" properties are just regular numbers so there's nothing of note to talk about there. However, the new "Fill" and "Stroke Color" properties are of a new "color type".

When clicked, the new Color Picker is opened. It is considered to be a "custom context menu" (see #23).

Currently it only allows for RGB colors. Transparency is currently not supported but will be pretty easy to add in the future.

When changes have been made, the enter key can be pressed to submit the changes.

These new properties are reflected in the Composition Workspace. They are reflected in realtime when inside of the Color Picker.

Anchor X and Y properties

These properties currently don't do anything. The behavior will be tackled later.

Color Nodes

Three new nodes were added.

• color_input
• color_to_rgba_factors
• color_from_rgba_factors

You can see these in action here:

There are some obvious low-hanging-fruit omissions here.

• To and from HSL
• Color interpolation
• Hue shift
• Lighten/Darken

And then some less obvious omissions.

• Gradients

These will be saved for future updates.

Type changes

Added Color to ValueType enum.

CompositionProperty has been updated to allow for multiple types of properties (e.g. number, Vec2 and RGBAColor).

The new PropertyToValueMap type sets the raw and computed values to the unknown types, forcing assertions where used.

RGB vs RGBA

To clarify, all color properties are stored as RGBAColor. The current RGB-only aspect of the Color Picker is just to get this out quickly. The alpha channel will be added to the color picker.

Property Performance Optimizations

Currently in CompTimeLayer, the propertyToValue object is always a new object on every action state change. This results in a LOT of unnecessary renders.

The creation of the propertyToValue map is now done by CompTimeLayerPropertyToValue. It is a wrapper component around property related components.

<CompTimeLayerPropertyToValue>
	{layer.properties.map((id) => <CompTimeLayerProperty id={id} key={id} />)}
</CompTimeLayerPropertyToValue>

It takes care of creating propertyToValue, and it exposes it to its children via context. The CompTimePropertyValueContext was created for this purpose.

And the CompTimeProperty component no longer accesses the propertyToValue map. Instead, it renders CompTimePropertyValue which looks like so:

const CompTimePropertyValueComponent: React.FC<Props> = (props) => {
	const propertyToValue = useContext(CompTimePropertyValueContext);

	const value = propertyToValue[props.propertyId];

	if (props.valueType === ValueType.Color) {
		return (
			<CompTimePropertyColorValue
				propertyId={props.propertyId}
				value={value.computedValue as RGBAColor}
			/>
		);
	}

	if (props.valueType === ValueType.Number) {
		return (
			<CompTimePropertyNumberValue
				propertyId={props.propertyId}
				computedValue={value.computedValue as number}
				rawValue={value.rawValue as number}
			/>
		);
	}

	return null;
};

In this new structure, every CompTimePropertyValue component will render on every action state update (that affects propertyToValue). It fetches propertyToValue from the context and gets the value of the property from it. We check the value type and pass it to the appropriate value component.