summaryrefslogtreecommitdiff
path: root/apps/web/src/lib/animation/graph-channels.ts
blob: 240b00eddd4c022900f4e37486cf49a0aed28ed8 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import type {
	AnimationPath,
	ElementAnimations,
	ScalarAnimationChannel,
	ScalarGraphChannel,
	ScalarGraphKeyframeContext,
} from "@/lib/animation/types";

function isScalarAnimationChannel(
	channel: ElementAnimations["channels"][string],
): channel is ScalarAnimationChannel {
	return channel?.kind === "scalar";
}

export function getEditableScalarChannels({
	animations,
	propertyPath,
}: {
	animations: ElementAnimations | undefined;
	propertyPath: AnimationPath;
}): ScalarGraphChannel[] {
	const binding = animations?.bindings[propertyPath];
	if (!binding) {
		return [];
	}

	return binding.components.flatMap((component) => {
		const channel = animations?.channels[component.channelId];
		if (!isScalarAnimationChannel(channel)) {
			return [];
		}

		return [
			{
				propertyPath,
				componentKey: component.key,
				channelId: component.channelId,
				channel,
			},
		];
	});
}

export function getEditableScalarChannel({
	animations,
	propertyPath,
	componentKey,
}: {
	animations: ElementAnimations | undefined;
	propertyPath: AnimationPath;
	componentKey: string;
}): ScalarGraphChannel | null {
	return (
		getEditableScalarChannels({
			animations,
			propertyPath,
		}).find((channel) => channel.componentKey === componentKey) ?? null
	);
}

export function getScalarKeyframeContext({
	animations,
	propertyPath,
	componentKey,
	keyframeId,
}: {
	animations: ElementAnimations | undefined;
	propertyPath: AnimationPath;
	componentKey: string;
	keyframeId: string;
}): ScalarGraphKeyframeContext | null {
	const scalarChannel = getEditableScalarChannel({
		animations,
		propertyPath,
		componentKey,
	});
	if (!scalarChannel) {
		return null;
	}

	const keyframeIndex = scalarChannel.channel.keys.findIndex(
		(keyframe) => keyframe.id === keyframeId,
	);
	if (keyframeIndex < 0) {
		return null;
	}

	return {
		...scalarChannel,
		keyframe: scalarChannel.channel.keys[keyframeIndex],
		keyframeIndex,
		previousKey: scalarChannel.channel.keys[keyframeIndex - 1] ?? null,
		nextKey: scalarChannel.channel.keys[keyframeIndex + 1] ?? null,
	};
}