From ee86da6cecb99ef2dbd5534a6b1fd1e4215c370a Mon Sep 17 00:00:00 2001 From: "Serhii.Tsybulskyi" Date: Wed, 16 Oct 2024 09:49:05 +0300 Subject: [PATCH 1/6] add cluster label font size to theme --- src/symbols/Cluster.tsx | 2 +- src/themes/theme.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/symbols/Cluster.tsx b/src/symbols/Cluster.tsx index 6f4c4cda..967488fa 100644 --- a/src/symbols/Cluster.tsx +++ b/src/symbols/Cluster.tsx @@ -200,7 +200,7 @@ export const Cluster: FC = ({ stroke={theme.cluster.label.stroke} active={false} color={theme.cluster?.label.color} - fontSize={12} + fontSize={theme.cluster?.label.fontSize} /> )} diff --git a/src/themes/theme.ts b/src/themes/theme.ts index ee7da65e..be750704 100644 --- a/src/themes/theme.ts +++ b/src/themes/theme.ts @@ -56,6 +56,7 @@ export interface Theme { label?: { stroke?: ColorRepresentation; color: ColorRepresentation; + fontSize?: number; }; }; } From 87e59f1a6073bf3fa3476ecf2f08fbf35a43b62f Mon Sep 17 00:00:00 2001 From: "Serhii.Tsybulskyi" Date: Wed, 16 Oct 2024 14:57:45 +0300 Subject: [PATCH 2/6] add ability to theming label --- src/symbols/Cluster.tsx | 6 +++--- src/themes/theme.ts | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/symbols/Cluster.tsx b/src/symbols/Cluster.tsx index 967488fa..58a681c9 100644 --- a/src/symbols/Cluster.tsx +++ b/src/symbols/Cluster.tsx @@ -96,10 +96,10 @@ export const Cluster: FC = ({ from: { circlePosition: [center.x, center.y, -1], circleOpacity: 0, - labelPosition: [0, -offset, 2] + labelPosition: [0, -offset - (theme.cluster?.label?.yOffset ?? 0), 2] }, to: { - labelPosition: [0, -offset, 2], + labelPosition: [0, -offset - (theme.cluster?.label?.yOffset ?? 0), 2], circlePosition: position ? [position.x, position.y, -1] : [0, 0, -1], circleOpacity: opacity }, @@ -200,7 +200,7 @@ export const Cluster: FC = ({ stroke={theme.cluster.label.stroke} active={false} color={theme.cluster?.label.color} - fontSize={theme.cluster?.label.fontSize} + fontSize={theme.cluster?.label.fontSize ?? 12} /> )} diff --git a/src/themes/theme.ts b/src/themes/theme.ts index be750704..6afcfb04 100644 --- a/src/themes/theme.ts +++ b/src/themes/theme.ts @@ -57,6 +57,7 @@ export interface Theme { stroke?: ColorRepresentation; color: ColorRepresentation; fontSize?: number; + yOffset?: number; }; }; } From e7ef9b46d4cb36b0bf31b03ecdc934e5948eb46a Mon Sep 17 00:00:00 2001 From: "Serhii.Tsybulskyi" Date: Wed, 16 Oct 2024 14:59:51 +0300 Subject: [PATCH 3/6] update doc --- docs/Theme.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/Theme.mdx b/docs/Theme.mdx index eadb4f7d..61f86cb4 100644 --- a/docs/Theme.mdx +++ b/docs/Theme.mdx @@ -66,6 +66,8 @@ export interface Theme { label?: { stroke?: ColorRepresentation; color: ColorRepresentation; + fontSize?: number; + yOffset?: number; }; }; } From e785008696f25de1d18b180d80853f99e6e6d638 Mon Sep 17 00:00:00 2001 From: "Serhii.Tsybulskyi" Date: Wed, 16 Oct 2024 16:05:37 +0300 Subject: [PATCH 4/6] code review changes --- src/symbols/Cluster.tsx | 18 ++++++++++++++++-- src/themes/theme.ts | 4 +++- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/src/symbols/Cluster.tsx b/src/symbols/Cluster.tsx index 58a681c9..c3753c9f 100644 --- a/src/symbols/Cluster.tsx +++ b/src/symbols/Cluster.tsx @@ -92,14 +92,28 @@ export const Cluster: FC = ({ : theme.cluster?.inactiveOpacity : theme.cluster?.opacity; + const labelPositionOffset = useMemo(() => { + const defaultPosition = [0, -offset, 2]; + const themeOffset = theme.cluster?.label?.offset; + if (themeOffset) { + return [ + defaultPosition[0] - themeOffset[0], + defaultPosition[1] - themeOffset[1], + defaultPosition[2] - themeOffset[2] + ]; + } + + return defaultPosition; + }, [offset, theme.cluster?.label?.offset]); + const { circleOpacity, circlePosition, labelPosition } = useSpring({ from: { circlePosition: [center.x, center.y, -1], circleOpacity: 0, - labelPosition: [0, -offset - (theme.cluster?.label?.yOffset ?? 0), 2] + labelPosition: labelPositionOffset }, to: { - labelPosition: [0, -offset - (theme.cluster?.label?.yOffset ?? 0), 2], + labelPosition: labelPositionOffset, circlePosition: position ? [position.x, position.y, -1] : [0, 0, -1], circleOpacity: opacity }, diff --git a/src/themes/theme.ts b/src/themes/theme.ts index 6afcfb04..4402338f 100644 --- a/src/themes/theme.ts +++ b/src/themes/theme.ts @@ -56,8 +56,10 @@ export interface Theme { label?: { stroke?: ColorRepresentation; color: ColorRepresentation; + // Size of the cluster label fontSize?: number; - yOffset?: number; + // Offset of the cluster label relative to the default position + offset?: [number, number, number]; }; }; } From 8c51309ce0bb952decfca64e11e1f60deb8b20dc Mon Sep 17 00:00:00 2001 From: "Serhii.Tsybulskyi" Date: Wed, 16 Oct 2024 16:06:25 +0300 Subject: [PATCH 5/6] update doc --- docs/Theme.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Theme.mdx b/docs/Theme.mdx index 61f86cb4..cc29e005 100644 --- a/docs/Theme.mdx +++ b/docs/Theme.mdx @@ -67,7 +67,7 @@ export interface Theme { stroke?: ColorRepresentation; color: ColorRepresentation; fontSize?: number; - yOffset?: number; + offset?: [number, number, number]; }; }; } From 5192c0157e13d55b1e92eb4739136a9949009fff Mon Sep 17 00:00:00 2001 From: "Serhii.Tsybulskyi" Date: Wed, 16 Oct 2024 16:42:16 +0300 Subject: [PATCH 6/6] use js docs --- src/themes/theme.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/themes/theme.ts b/src/themes/theme.ts index 4402338f..ae534f1c 100644 --- a/src/themes/theme.ts +++ b/src/themes/theme.ts @@ -56,9 +56,13 @@ export interface Theme { label?: { stroke?: ColorRepresentation; color: ColorRepresentation; - // Size of the cluster label + /** + * Size of the cluster label + */ fontSize?: number; - // Offset of the cluster label relative to the default position + /** + * Offset of the cluster label relative to the default + */ offset?: [number, number, number]; }; };