contextual zoom initial font size reduction

[chimmyten]

When a pod is initially collapsed, the font size for the contextual zoom summary will be smaller. When the canvas is zoomed out past a certain point, the font size of the summary will increase to the previous set size. Fixes #316.

Contextual.Zoom.Font.Size.Change.small.mov

[lihebi]

How about let's make the contextualZoomParams configurable? That is, add a setting in the sidebar allowing users to override these numbers (which are the expected font sizes for each level).

codepod/ui/src/lib/store/settingSlice.tsx

Lines 78 to 87 in 0f1b143

	// TODO Make it configurable.
	contextualZoomParams: {
	prev: 56,
	0: 48,
	1: 32,
	2: 24,
	3: 16,
	next: 8,
	threshold: 16,
	},

[lihebi]

Also, note that the same code (for computing and setting fonts) is used in three places: Code.tsx, Rich.tsx, Scope.tsx. We might want to make them with reasonable font size.

codepod/ui/src/components/nodes/Code.tsx

Lines 581 to 590 in 0f1b143

	const fontSize = level2fontsize(node?.data.level);
	const parentFontSize = level2fontsize(node?.data.level - 1);
	if (
	contextualZoom &&
	node?.data.level > 0 &&
	parentFontSize * zoomLevel < threshold
	) {
	// The parent scope is not shown, this node is not gonna be rendered at all.
	return <Box></Box>;

codepod/ui/src/components/nodes/Rich.tsx

Lines 769 to 776 in 0f1b143

	const fontSize = level2fontsize(node?.data.level);
	const parentFontSize = level2fontsize(node?.data.level - 1);
	if (
	contextualZoom &&
	node?.data.level > 0 &&
	parentFontSize * zoomLevel < threshold
	) {

codepod/ui/src/components/nodes/Scope.tsx

Lines 225 to 235 in 0f1b143

	const zoomLevel = useReactFlowStore((s) => s.transform[2]);
	const node = nodesMap.get(id);
	const level2fontsize = useStore(store, (state) => state.level2fontsize);
	const fontSize = level2fontsize(node?.data.level);
	const parentFontSize = level2fontsize(node?.data.level - 1);
	if (
	contextualZoom &&
	node?.data.level > 0 &&
	parentFontSize * zoomLevel < threshold
	) {

[lihebi]

This setting-in-sidebar thing sounds like another PR. Feel free to work on it and submit another PR if you find fit.

[chimmyten]

Sounds good, I'll work on implementing that.