@oxyhq/bloom 0.34.3 → 0.35.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/avatar-group/AvatarGroup.js +3 -2
- package/lib/commonjs/avatar-group/AvatarGroup.js.map +1 -1
- package/lib/commonjs/avatar-group/AvatarGroup.web.js +5 -5
- package/lib/commonjs/avatar-group/AvatarGroupBase.js +217 -48
- package/lib/commonjs/avatar-group/AvatarGroupBase.js.map +1 -1
- package/lib/commonjs/avatar-group/cluster-layout.js +217 -0
- package/lib/commonjs/avatar-group/cluster-layout.js.map +1 -0
- package/lib/module/avatar-group/AvatarGroup.js +3 -2
- package/lib/module/avatar-group/AvatarGroup.js.map +1 -1
- package/lib/module/avatar-group/AvatarGroup.web.js +5 -5
- package/lib/module/avatar-group/AvatarGroupBase.js +217 -48
- package/lib/module/avatar-group/AvatarGroupBase.js.map +1 -1
- package/lib/module/avatar-group/cluster-layout.js +213 -0
- package/lib/module/avatar-group/cluster-layout.js.map +1 -0
- package/lib/typescript/commonjs/avatar-group/AvatarGroup.d.ts.map +1 -1
- package/lib/typescript/commonjs/avatar-group/AvatarGroupBase.d.ts.map +1 -1
- package/lib/typescript/commonjs/avatar-group/cluster-layout.d.ts +48 -0
- package/lib/typescript/commonjs/avatar-group/cluster-layout.d.ts.map +1 -0
- package/lib/typescript/commonjs/avatar-group/types.d.ts +23 -5
- package/lib/typescript/commonjs/avatar-group/types.d.ts.map +1 -1
- package/lib/typescript/module/avatar-group/AvatarGroup.d.ts.map +1 -1
- package/lib/typescript/module/avatar-group/AvatarGroupBase.d.ts.map +1 -1
- package/lib/typescript/module/avatar-group/cluster-layout.d.ts +48 -0
- package/lib/typescript/module/avatar-group/cluster-layout.d.ts.map +1 -0
- package/lib/typescript/module/avatar-group/types.d.ts +23 -5
- package/lib/typescript/module/avatar-group/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/__tests__/AvatarGroupCluster.test.tsx +123 -0
- package/src/avatar-group/AvatarGroup.stories.tsx +68 -0
- package/src/avatar-group/AvatarGroup.tsx +3 -2
- package/src/avatar-group/AvatarGroup.web.tsx +5 -5
- package/src/avatar-group/AvatarGroupBase.tsx +298 -89
- package/src/avatar-group/cluster-layout.ts +204 -0
- package/src/avatar-group/types.ts +23 -5
|
@@ -9,8 +9,9 @@ var _AvatarGroupBase = require("./AvatarGroupBase.js");
|
|
|
9
9
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
10
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
11
11
|
/**
|
|
12
|
-
* Native `AvatarGroup` —
|
|
13
|
-
*
|
|
12
|
+
* Native `AvatarGroup` — {@link Avatar}s arranged as a horizontal facepile
|
|
13
|
+
* (`stack`), an adjacent `row`, or a 2D magnetic `cluster`, with a trailing
|
|
14
|
+
* `+N` overflow chip. See `layout` in {@link AvatarGroupProps}.
|
|
14
15
|
*
|
|
15
16
|
* Hover behavior is web-only; on native the `hoverCard` / `renderItemAction`
|
|
16
17
|
* props are accepted for API parity but intentionally do nothing (no hover on
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_AvatarGroupBase","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AvatarGroupComponent","props","jsx","AvatarGroupBase","AvatarGroup","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["avatar-group/AvatarGroup.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,gBAAA,GAAAD,OAAA;AAAoD,IAAAE,WAAA,GAAAF,OAAA;AAAA,SAAAD,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAGpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMkB,oBAAgD,GAAIC,KAAK,IAAK;EAClE,oBAAO,IAAArB,WAAA,CAAAsB,GAAA,EAACvB,gBAAA,CAAAwB,eAAe;IAAA,GAAKF;EAAK,CAAG,CAAC;AACvC,CAAC;AAEM,MAAMG,WAAW,GAAAC,OAAA,CAAAD,WAAA,gBAAG,IAAAE,WAAI,EAACN,oBAAoB,CAAC;AACrDI,WAAW,CAACG,WAAW,GAAG,aAAa","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_AvatarGroupBase","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AvatarGroupComponent","props","jsx","AvatarGroupBase","AvatarGroup","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["avatar-group/AvatarGroup.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,gBAAA,GAAAD,OAAA;AAAoD,IAAAE,WAAA,GAAAF,OAAA;AAAA,SAAAD,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAGpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMkB,oBAAgD,GAAIC,KAAK,IAAK;EAClE,oBAAO,IAAArB,WAAA,CAAAsB,GAAA,EAACvB,gBAAA,CAAAwB,eAAe;IAAA,GAAKF;EAAK,CAAG,CAAC;AACvC,CAAC;AAEM,MAAMG,WAAW,GAAAC,OAAA,CAAAD,WAAA,gBAAG,IAAAE,WAAI,EAACN,oBAAoB,CAAC;AACrDI,WAAW,CAACG,WAAW,GAAG,aAAa","ignoreList":[]}
|
|
@@ -22,11 +22,11 @@ function getItemName(item) {
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
/**
|
|
25
|
-
* Web `AvatarGroup`. Identical
|
|
26
|
-
* {@link AvatarGroupBase}, plus an optional hover card: when
|
|
27
|
-
* enabled, hovering an avatar reveals a {@link UserHoverCard}
|
|
28
|
-
* it. The card receives the per-item `renderItemAction` slot
|
|
29
|
-
* its SDK FollowButton inside.
|
|
25
|
+
* Web `AvatarGroup`. Identical layout rendering to native (stack / row /
|
|
26
|
+
* cluster) via {@link AvatarGroupBase}, plus an optional hover card: when
|
|
27
|
+
* `hoverCard` is enabled, hovering an avatar reveals a {@link UserHoverCard}
|
|
28
|
+
* positioned beneath it. The card receives the per-item `renderItemAction` slot
|
|
29
|
+
* so the app can drop its SDK FollowButton inside.
|
|
30
30
|
*/
|
|
31
31
|
const AvatarGroupWebComponent = props => {
|
|
32
32
|
const {
|
|
@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
|
|
|
9
9
|
var _index = require("../avatar/index.js");
|
|
10
10
|
var _useTheme = require("../theme/use-theme.js");
|
|
11
11
|
var _tokens = require("../styles/tokens.js");
|
|
12
|
+
var _clusterLayout = require("./cluster-layout.js");
|
|
12
13
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
14
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
14
15
|
/** Ring (border) thickness around each avatar, in pixels. Matches the
|
|
@@ -17,6 +18,15 @@ const RING_WIDTH = 1;
|
|
|
17
18
|
/** Default horizontal overlap as a fraction of avatar size — the original
|
|
18
19
|
* stack pulled each avatar left by `size / 3`. */
|
|
19
20
|
const DEFAULT_OVERLAP_RATIO = 1 / 3;
|
|
21
|
+
/** Default `max` for the `stack`/`row` facepile layouts. */
|
|
22
|
+
const DEFAULT_MAX = 5;
|
|
23
|
+
/** Default `max` (visible cap) for the `cluster` layout — it packs densely. */
|
|
24
|
+
const CLUSTER_DEFAULT_MAX = 20;
|
|
25
|
+
/** Separator ring thickness for cluster bubbles, as a fraction of the box. */
|
|
26
|
+
const CLUSTER_RING_RATIO = 0.02;
|
|
27
|
+
/** Overflow "+N" text color — white reads on the grey chip in light + dark,
|
|
28
|
+
* matching the original Mention count circle (shared by every layout). */
|
|
29
|
+
const OVERFLOW_TEXT_COLOR = '#FFFFFF';
|
|
20
30
|
function getItemName(item) {
|
|
21
31
|
return item.displayName ?? item.name ?? item.username;
|
|
22
32
|
}
|
|
@@ -26,12 +36,61 @@ function getItemKey(item, index) {
|
|
|
26
36
|
|
|
27
37
|
/** Hover callbacks injected by the web fork; undefined (no-op) on native. */
|
|
28
38
|
|
|
39
|
+
/**
|
|
40
|
+
* A single avatar cell shared by every layout: a circular, clipped container
|
|
41
|
+
* (`cellStyle`) holding one {@link Avatar}, positioned by `wrapperStyle`, and
|
|
42
|
+
* made pressable/hoverable when the relevant handlers are supplied. Layout
|
|
43
|
+
* (margins for the facepile, absolute coords for the cluster) lives entirely in
|
|
44
|
+
* the caller-provided styles so this stays layout-agnostic.
|
|
45
|
+
*/
|
|
46
|
+
function AvatarGroupCell({
|
|
47
|
+
item,
|
|
48
|
+
index,
|
|
49
|
+
innerSize,
|
|
50
|
+
variant,
|
|
51
|
+
showInitials,
|
|
52
|
+
cellStyle,
|
|
53
|
+
wrapperStyle,
|
|
54
|
+
onPressItem,
|
|
55
|
+
hoverHandlers
|
|
56
|
+
}) {
|
|
57
|
+
const name = getItemName(item);
|
|
58
|
+
const accessibilityLabel = item.username ? `${name ?? item.username} (@${item.username})` : name;
|
|
59
|
+
const interactive = typeof onPressItem === 'function';
|
|
60
|
+
const hoverable = typeof hoverHandlers?.onHoverIn === 'function' || typeof hoverHandlers?.onHoverOut === 'function';
|
|
61
|
+
const cell = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
62
|
+
ref: hoverHandlers?.registerCellRef ? node => hoverHandlers.registerCellRef?.(index, node) : undefined,
|
|
63
|
+
collapsable: false,
|
|
64
|
+
style: cellStyle,
|
|
65
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Avatar, {
|
|
66
|
+
source: item.uri ?? undefined,
|
|
67
|
+
name: showInitials ? name : undefined,
|
|
68
|
+
variant: variant,
|
|
69
|
+
size: innerSize
|
|
70
|
+
})
|
|
71
|
+
});
|
|
72
|
+
if (interactive || hoverable) {
|
|
73
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
|
|
74
|
+
onPress: interactive ? () => onPressItem?.(item, index) : undefined,
|
|
75
|
+
onHoverIn: hoverHandlers?.onHoverIn ? () => hoverHandlers.onHoverIn?.(item, index) : undefined,
|
|
76
|
+
onHoverOut: hoverHandlers?.onHoverOut ? () => hoverHandlers.onHoverOut?.(item, index) : undefined,
|
|
77
|
+
accessibilityRole: interactive ? 'button' : undefined,
|
|
78
|
+
accessibilityLabel: accessibilityLabel,
|
|
79
|
+
style: wrapperStyle,
|
|
80
|
+
children: cell
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
84
|
+
style: wrapperStyle,
|
|
85
|
+
children: cell
|
|
86
|
+
});
|
|
87
|
+
}
|
|
29
88
|
const AvatarGroupBaseComponent = ({
|
|
30
89
|
items,
|
|
31
90
|
layout = 'stack',
|
|
32
91
|
size = 32,
|
|
33
92
|
variant = 'thumb',
|
|
34
|
-
max
|
|
93
|
+
max,
|
|
35
94
|
total,
|
|
36
95
|
overlap,
|
|
37
96
|
spacing,
|
|
@@ -43,6 +102,7 @@ const AvatarGroupBaseComponent = ({
|
|
|
43
102
|
hoverHandlers
|
|
44
103
|
}) => {
|
|
45
104
|
const theme = (0, _useTheme.useTheme)();
|
|
105
|
+
const isCluster = layout === 'cluster';
|
|
46
106
|
const isRow = layout === 'row';
|
|
47
107
|
|
|
48
108
|
// The ring is the thin separator drawn between overlapping avatars. It
|
|
@@ -50,6 +110,7 @@ const AvatarGroupBaseComponent = ({
|
|
|
50
110
|
// the surface behind them — matching the original Mention stack, which used
|
|
51
111
|
// `theme.colors.background`, not a large `card`-colored ring cell.
|
|
52
112
|
const ring = ringColor ?? theme.colors.background;
|
|
113
|
+
const effectiveMax = max ?? DEFAULT_MAX;
|
|
53
114
|
const effectiveOverlap = overlap ?? Math.round(size * DEFAULT_OVERLAP_RATIO);
|
|
54
115
|
// Each avatar after the first is pulled left by `overlap`. The cell carries a
|
|
55
116
|
// 1px border on each side, so the negative margin absorbs both borders to
|
|
@@ -59,7 +120,7 @@ const AvatarGroupBaseComponent = ({
|
|
|
59
120
|
const rowGap = spacing ?? Math.round(size * DEFAULT_OVERLAP_RATIO);
|
|
60
121
|
// Horizontal offset applied to every avatar after the first.
|
|
61
122
|
const itemMargin = isRow ? rowGap : negativeMargin;
|
|
62
|
-
const shown = (0, _react.useMemo)(() => items.slice(0, Math.max(0,
|
|
123
|
+
const shown = (0, _react.useMemo)(() => items.slice(0, Math.max(0, effectiveMax)), [items, effectiveMax]);
|
|
63
124
|
const realTotal = total ?? items.length;
|
|
64
125
|
const overflow = Math.max(0, realTotal - shown.length);
|
|
65
126
|
|
|
@@ -89,24 +150,38 @@ const AvatarGroupBaseComponent = ({
|
|
|
89
150
|
};
|
|
90
151
|
}, [isRow, size, ring]);
|
|
91
152
|
const overflowTextStyle = (0, _react.useMemo)(() => ({
|
|
92
|
-
color:
|
|
153
|
+
color: OVERFLOW_TEXT_COLOR,
|
|
93
154
|
fontSize: Math.max(_tokens.fontSize._2xs, Math.round(size * 0.36)),
|
|
94
155
|
fontWeight: '600'
|
|
95
156
|
}), [size]);
|
|
96
157
|
const interactive = typeof onPressItem === 'function';
|
|
97
|
-
const hoverable = typeof hoverHandlers?.onHoverIn === 'function' || typeof hoverHandlers?.onHoverOut === 'function';
|
|
98
158
|
|
|
99
159
|
// Pressing the "+N" circle surfaces the first hidden member (if any), so
|
|
100
160
|
// consumers can route it to a full member list.
|
|
101
161
|
const firstHidden = items[shown.length];
|
|
102
162
|
const overflowOnPress = interactive && firstHidden ? () => onPressItem?.(firstHidden, shown.length) : undefined;
|
|
163
|
+
|
|
164
|
+
// The cluster is a compact 2D bubble pack with its own absolute-positioned
|
|
165
|
+
// renderer; hooks above still run unconditionally so the branch is safe.
|
|
166
|
+
if (isCluster) {
|
|
167
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ClusterAvatarGroup, {
|
|
168
|
+
items: items,
|
|
169
|
+
size: size,
|
|
170
|
+
variant: variant,
|
|
171
|
+
max: max,
|
|
172
|
+
total: total,
|
|
173
|
+
ring: ring,
|
|
174
|
+
showInitials: showInitials,
|
|
175
|
+
onPressItem: onPressItem,
|
|
176
|
+
style: style,
|
|
177
|
+
testID: testID,
|
|
178
|
+
hoverHandlers: hoverHandlers
|
|
179
|
+
});
|
|
180
|
+
}
|
|
103
181
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
104
182
|
style: [styles.row, style],
|
|
105
183
|
testID: testID,
|
|
106
184
|
children: [shown.map((item, index) => {
|
|
107
|
-
const name = getItemName(item);
|
|
108
|
-
const accessibilityLabel = item.username ? `${name ?? item.username} (@${item.username})` : name;
|
|
109
|
-
|
|
110
185
|
// The horizontal margin and stacking order live on the outermost row
|
|
111
186
|
// element so layout and hit-testing stay aligned with the visual
|
|
112
187
|
// overlap. In stack mode earlier siblings render on top of later ones
|
|
@@ -120,65 +195,159 @@ const AvatarGroupBaseComponent = ({
|
|
|
120
195
|
zIndex: shown.length - index
|
|
121
196
|
})
|
|
122
197
|
};
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
});
|
|
134
|
-
if (interactive || hoverable) {
|
|
135
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
|
|
136
|
-
onPress: interactive ? () => onPressItem?.(item, index) : undefined,
|
|
137
|
-
onHoverIn: hoverHandlers?.onHoverIn ? () => hoverHandlers.onHoverIn?.(item, index) : undefined,
|
|
138
|
-
onHoverOut: hoverHandlers?.onHoverOut ? () => hoverHandlers.onHoverOut?.(item, index) : undefined,
|
|
139
|
-
accessibilityRole: interactive ? 'button' : undefined,
|
|
140
|
-
accessibilityLabel: accessibilityLabel,
|
|
141
|
-
style: wrapperStyle,
|
|
142
|
-
children: cell
|
|
143
|
-
}, getItemKey(item, index));
|
|
144
|
-
}
|
|
145
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
146
|
-
style: wrapperStyle,
|
|
147
|
-
children: cell
|
|
198
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarGroupCell, {
|
|
199
|
+
item: item,
|
|
200
|
+
index: index,
|
|
201
|
+
innerSize: innerSize,
|
|
202
|
+
variant: variant,
|
|
203
|
+
showInitials: showInitials,
|
|
204
|
+
cellStyle: cellStyle,
|
|
205
|
+
wrapperStyle: wrapperStyle,
|
|
206
|
+
onPressItem: onPressItem,
|
|
207
|
+
hoverHandlers: hoverHandlers
|
|
148
208
|
}, getItemKey(item, index));
|
|
149
209
|
}), overflow > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(OverflowCircle, {
|
|
150
210
|
count: overflow,
|
|
151
211
|
cellStyle: cellStyle,
|
|
152
|
-
|
|
153
|
-
|
|
212
|
+
wrapperStyle: {
|
|
213
|
+
...(shown.length > 0 && {
|
|
214
|
+
marginLeft: itemMargin
|
|
215
|
+
}),
|
|
216
|
+
...(isRow ? {} : {
|
|
217
|
+
zIndex: 0
|
|
218
|
+
})
|
|
219
|
+
},
|
|
154
220
|
textStyle: overflowTextStyle,
|
|
155
221
|
onPress: overflowOnPress
|
|
156
222
|
})]
|
|
157
223
|
});
|
|
158
224
|
};
|
|
225
|
+
/**
|
|
226
|
+
* The `cluster` layout: an iMessage-style magnetic bubble pack. Members are laid
|
|
227
|
+
* out by {@link computeClusterLayout} (a deterministic force-directed pack) into
|
|
228
|
+
* box-fraction bubbles, then absolutely positioned inside a `size × size` box so
|
|
229
|
+
* the whole cluster drops in where a single round Avatar would. The largest
|
|
230
|
+
* member (index 0) sits centred and in front; the rest pack around it with a
|
|
231
|
+
* uniform gap. Overflow beyond `max` collapses into a trailing "+N" bubble.
|
|
232
|
+
*/
|
|
233
|
+
const ClusterAvatarGroup = ({
|
|
234
|
+
items,
|
|
235
|
+
size,
|
|
236
|
+
variant,
|
|
237
|
+
max,
|
|
238
|
+
total,
|
|
239
|
+
ring,
|
|
240
|
+
showInitials,
|
|
241
|
+
onPressItem,
|
|
242
|
+
style,
|
|
243
|
+
testID,
|
|
244
|
+
hoverHandlers
|
|
245
|
+
}) => {
|
|
246
|
+
const cap = Math.max(1, max ?? CLUSTER_DEFAULT_MAX);
|
|
247
|
+
const realTotal = total ?? items.length;
|
|
248
|
+
const hasOverflow = realTotal > cap;
|
|
249
|
+
// Reserve the last bubble for the "+N" chip when there are more members than
|
|
250
|
+
// the cap; otherwise every capped member gets its own bubble.
|
|
251
|
+
const avatarCap = hasOverflow ? Math.max(0, cap - 1) : cap;
|
|
252
|
+
const shown = (0, _react.useMemo)(() => items.slice(0, avatarCap), [items, avatarCap]);
|
|
253
|
+
const overflow = hasOverflow ? Math.max(0, realTotal - shown.length) : 0;
|
|
254
|
+
const bubbleCount = shown.length + (overflow > 0 ? 1 : 0);
|
|
255
|
+
const bubbles = (0, _react.useMemo)(() => (0, _clusterLayout.computeClusterLayout)(bubbleCount), [bubbleCount]);
|
|
256
|
+
const ringWidth = Math.max(1, Math.round(size * CLUSTER_RING_RATIO));
|
|
257
|
+
const interactive = typeof onPressItem === 'function';
|
|
258
|
+
|
|
259
|
+
// Pressing "+N" surfaces the first hidden member (parity with the stack).
|
|
260
|
+
const firstHidden = items[shown.length];
|
|
261
|
+
const overflowOnPress = interactive && firstHidden ? () => onPressItem?.(firstHidden, shown.length) : undefined;
|
|
262
|
+
const overflowBubble = overflow > 0 ? bubbles[bubbleCount - 1] : undefined;
|
|
263
|
+
let overflowElement = null;
|
|
264
|
+
if (overflow > 0 && overflowBubble) {
|
|
265
|
+
const diameter = overflowBubble.d * size;
|
|
266
|
+
overflowElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(OverflowCircle, {
|
|
267
|
+
count: overflow,
|
|
268
|
+
cellStyle: {
|
|
269
|
+
width: diameter,
|
|
270
|
+
height: diameter,
|
|
271
|
+
borderRadius: diameter / 2,
|
|
272
|
+
borderWidth: ringWidth,
|
|
273
|
+
borderColor: ring,
|
|
274
|
+
alignItems: 'center',
|
|
275
|
+
justifyContent: 'center'
|
|
276
|
+
},
|
|
277
|
+
wrapperStyle: {
|
|
278
|
+
position: 'absolute',
|
|
279
|
+
left: overflowBubble.cx * size - diameter / 2,
|
|
280
|
+
top: overflowBubble.cy * size - diameter / 2,
|
|
281
|
+
width: diameter,
|
|
282
|
+
height: diameter,
|
|
283
|
+
zIndex: 0
|
|
284
|
+
},
|
|
285
|
+
textStyle: {
|
|
286
|
+
color: OVERFLOW_TEXT_COLOR,
|
|
287
|
+
fontSize: Math.max(_tokens.fontSize._2xs, Math.round(diameter * 0.34)),
|
|
288
|
+
fontWeight: '600'
|
|
289
|
+
},
|
|
290
|
+
onPress: overflowOnPress
|
|
291
|
+
});
|
|
292
|
+
}
|
|
293
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
294
|
+
style: [{
|
|
295
|
+
width: size,
|
|
296
|
+
height: size
|
|
297
|
+
}, style],
|
|
298
|
+
testID: testID,
|
|
299
|
+
children: [shown.map((item, index) => {
|
|
300
|
+
const bubble = bubbles[index];
|
|
301
|
+
if (!bubble) return null;
|
|
302
|
+
const diameter = bubble.d * size;
|
|
303
|
+
const inner = Math.max(1, diameter - ringWidth * 2);
|
|
304
|
+
const wrapperStyle = {
|
|
305
|
+
position: 'absolute',
|
|
306
|
+
left: bubble.cx * size - diameter / 2,
|
|
307
|
+
top: bubble.cy * size - diameter / 2,
|
|
308
|
+
width: diameter,
|
|
309
|
+
height: diameter,
|
|
310
|
+
// Primary (index 0) is largest and sits in front; later members tuck
|
|
311
|
+
// behind in descending order (the "+N" chip lands lowest).
|
|
312
|
+
zIndex: bubbleCount - index
|
|
313
|
+
};
|
|
314
|
+
const cellStyle = {
|
|
315
|
+
width: diameter,
|
|
316
|
+
height: diameter,
|
|
317
|
+
borderRadius: diameter / 2,
|
|
318
|
+
borderWidth: ringWidth,
|
|
319
|
+
borderColor: ring,
|
|
320
|
+
overflow: 'hidden',
|
|
321
|
+
alignItems: 'center',
|
|
322
|
+
justifyContent: 'center'
|
|
323
|
+
};
|
|
324
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarGroupCell, {
|
|
325
|
+
item: item,
|
|
326
|
+
index: index,
|
|
327
|
+
innerSize: inner,
|
|
328
|
+
variant: variant,
|
|
329
|
+
showInitials: showInitials,
|
|
330
|
+
cellStyle: cellStyle,
|
|
331
|
+
wrapperStyle: wrapperStyle,
|
|
332
|
+
onPressItem: onPressItem,
|
|
333
|
+
hoverHandlers: hoverHandlers
|
|
334
|
+
}, getItemKey(item, index));
|
|
335
|
+
}), overflowElement]
|
|
336
|
+
});
|
|
337
|
+
};
|
|
159
338
|
function OverflowCircle({
|
|
160
339
|
count,
|
|
161
340
|
cellStyle,
|
|
162
|
-
|
|
163
|
-
isRow,
|
|
341
|
+
wrapperStyle,
|
|
164
342
|
textStyle,
|
|
165
343
|
onPress
|
|
166
344
|
}) {
|
|
167
345
|
const theme = (0, _useTheme.useTheme)();
|
|
168
|
-
// In stack mode the count circle is anchored at the lowest stacking order so
|
|
169
|
-
// it tucks behind the last avatar's ring; row mode has no overlap. The margin
|
|
170
|
-
// lives on the outer element to keep layout aligned with the spacing.
|
|
171
|
-
const wrapperStyle = {
|
|
172
|
-
...(marginLeft !== 0 && {
|
|
173
|
-
marginLeft
|
|
174
|
-
}),
|
|
175
|
-
...(isRow ? {} : {
|
|
176
|
-
zIndex: 0
|
|
177
|
-
})
|
|
178
|
-
};
|
|
179
346
|
|
|
180
347
|
// A solid "+N" count circle: secondary-text-colored fill with white text,
|
|
181
|
-
// matching the original Mention `ResponsiveAvatarStack` count circle.
|
|
348
|
+
// matching the original Mention `ResponsiveAvatarStack` count circle. Layout
|
|
349
|
+
// (margin for the facepile, absolute coords for the cluster) is supplied by
|
|
350
|
+
// the caller via `wrapperStyle`.
|
|
182
351
|
const circle = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
183
352
|
style: [cellStyle, {
|
|
184
353
|
backgroundColor: theme.colors.textSecondary
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_index","_useTheme","_tokens","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","RING_WIDTH","DEFAULT_OVERLAP_RATIO","getItemName","item","displayName","name","username","getItemKey","index","id","uri","AvatarGroupBaseComponent","items","layout","size","variant","max","total","overlap","spacing","ringColor","showInitials","onPressItem","style","testID","hoverHandlers","theme","useTheme","isRow","ring","colors","background","effectiveOverlap","Math","round","negativeMargin","rowGap","itemMargin","shown","useMemo","slice","realTotal","length","overflow","innerSize","cellStyle","width","height","borderRadius","alignItems","justifyContent","borderWidth","borderColor","overflowTextStyle","color","fontSize","_2xs","fontWeight","interactive","hoverable","onHoverIn","onHoverOut","firstHidden","overflowOnPress","undefined","jsxs","View","styles","row","children","map","accessibilityLabel","wrapperStyle","marginLeft","zIndex","cell","jsx","ref","registerCellRef","node","collapsable","Avatar","source","Pressable","onPress","accessibilityRole","OverflowCircle","count","textStyle","circle","backgroundColor","textSecondary","Text","allowFontScaling","StyleSheet","create","flexDirection","AvatarGroupBase","exports","memo"],"sourceRoot":"../../../src","sources":["avatar-group/AvatarGroupBase.tsx"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_index","_useTheme","_tokens","_clusterLayout","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","RING_WIDTH","DEFAULT_OVERLAP_RATIO","DEFAULT_MAX","CLUSTER_DEFAULT_MAX","CLUSTER_RING_RATIO","OVERFLOW_TEXT_COLOR","getItemName","item","displayName","name","username","getItemKey","index","id","uri","AvatarGroupCell","innerSize","variant","showInitials","cellStyle","wrapperStyle","onPressItem","hoverHandlers","accessibilityLabel","interactive","hoverable","onHoverIn","onHoverOut","cell","jsx","View","ref","registerCellRef","node","undefined","collapsable","style","children","Avatar","source","size","Pressable","onPress","accessibilityRole","AvatarGroupBaseComponent","items","layout","max","total","overlap","spacing","ringColor","testID","theme","useTheme","isCluster","isRow","ring","colors","background","effectiveMax","effectiveOverlap","Math","round","negativeMargin","rowGap","itemMargin","shown","useMemo","slice","realTotal","length","overflow","width","height","borderRadius","alignItems","justifyContent","borderWidth","borderColor","overflowTextStyle","color","fontSize","_2xs","fontWeight","firstHidden","overflowOnPress","ClusterAvatarGroup","jsxs","styles","row","map","marginLeft","zIndex","OverflowCircle","count","textStyle","cap","hasOverflow","avatarCap","bubbleCount","bubbles","computeClusterLayout","ringWidth","overflowBubble","overflowElement","diameter","d","position","left","cx","top","cy","bubble","inner","circle","backgroundColor","textSecondary","Text","allowFontScaling","StyleSheet","create","flexDirection","AvatarGroupBase","exports","memo"],"sourceRoot":"../../../src","sources":["avatar-group/AvatarGroupBase.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.computeClusterLayout = computeClusterLayout;
|
|
7
|
+
/**
|
|
8
|
+
* Deterministic organic circle-packing for the {@link AvatarGroup} `cluster`
|
|
9
|
+
* layout — the iMessage-style "magnetic bubble cluster" where several avatars of
|
|
10
|
+
* varying sizes nestle together inside a round bounding box (a large primary in
|
|
11
|
+
* the middle/front, smaller members packed around it with a uniform gap).
|
|
12
|
+
*
|
|
13
|
+
* For 4+ members the layout is produced by a small, FULLY DETERMINISTIC
|
|
14
|
+
* force-directed relaxation (no `Math.random`): the primary is pinned at the
|
|
15
|
+
* centre and the remaining members are seeded on a golden-angle spiral, then a
|
|
16
|
+
* fixed number of relaxation passes (a) pull every non-primary circle toward the
|
|
17
|
+
* centre and (b) push any two circles apart until they clear a uniform gap. A
|
|
18
|
+
* fixed iteration count + deterministic seed means the same `count` always
|
|
19
|
+
* yields byte-identical positions, so native and web render the cluster
|
|
20
|
+
* identically with no `onLayout`/DOM measurement. The very small counts (1, 2,
|
|
21
|
+
* 3) — where a relaxation degenerates into a line or a lone pair — use explicit
|
|
22
|
+
* iMessage-style arrangements instead.
|
|
23
|
+
*
|
|
24
|
+
* Output is resolution-independent: each bubble is expressed as a fraction of
|
|
25
|
+
* the group's bounding box (`cx`/`cy` centre, `d` diameter, all 0..1), so the
|
|
26
|
+
* consumer just multiplies by the pixel `size`. Every bubble is guaranteed to
|
|
27
|
+
* sit fully inside the `[0, 1]` box (the packed result is scaled + translated to
|
|
28
|
+
* fit), so the cluster drops in exactly where a single round Avatar would.
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
/** A single packed bubble, expressed as fractions of the bounding box (0..1). */
|
|
32
|
+
|
|
33
|
+
// Golden angle (~137.5°) — spreads the seed points evenly with no directional
|
|
34
|
+
// bias, which is what gives the relaxed result its organic, non-grid feel.
|
|
35
|
+
const GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5));
|
|
36
|
+
// Fixed relaxation passes + a final separation-only cleanup so the last thing
|
|
37
|
+
// that happens is overlap resolution (gaps end uniform and non-negative).
|
|
38
|
+
const ITERATIONS = 500;
|
|
39
|
+
const CLEANUP_ITERATIONS = 80;
|
|
40
|
+
// How hard each pass pulls every non-primary circle toward the centre. This is
|
|
41
|
+
// the only compacting force; separation only ever pushes apart, so any positive
|
|
42
|
+
// value packs the cluster fully — this just controls convergence speed.
|
|
43
|
+
const CENTERING = 0.05;
|
|
44
|
+
// Fraction of an overlap resolved per pass. 1 fully separates each pass; with
|
|
45
|
+
// the pinned primary and many passes this stays stable and converges.
|
|
46
|
+
const SEPARATION_STRENGTH = 1;
|
|
47
|
+
// Uniform gap kept between every touching pair, in primary-radius units
|
|
48
|
+
// (primary radius = 1). Reads as consistent spacing everywhere in the cluster.
|
|
49
|
+
const LAYOUT_GAP = 0.16;
|
|
50
|
+
// Initial spiral spacing. Only affects convergence (the result is re-fitted to
|
|
51
|
+
// the box afterwards), not the final scale.
|
|
52
|
+
const SEED_SPACING = 1.7;
|
|
53
|
+
// Relative radii: the primary is the largest; the remaining members taper from
|
|
54
|
+
// SECONDARY_MAX (nearest the primary) down to SECONDARY_MIN (outermost) so size
|
|
55
|
+
// decreases outward and later/overflow members are the smallest.
|
|
56
|
+
const PRIMARY_RADIUS = 1;
|
|
57
|
+
const SECONDARY_MAX = 0.72;
|
|
58
|
+
const SECONDARY_MIN = 0.5;
|
|
59
|
+
const EPSILON = 1e-6;
|
|
60
|
+
|
|
61
|
+
/** Relative radius for member `index` of a `count`-member cluster. */
|
|
62
|
+
function relativeRadius(index, count) {
|
|
63
|
+
if (index === 0) return PRIMARY_RADIUS;
|
|
64
|
+
if (count <= 2) return SECONDARY_MAX;
|
|
65
|
+
const t = (index - 1) / (count - 2);
|
|
66
|
+
return SECONDARY_MAX + (SECONDARY_MIN - SECONDARY_MAX) * t;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* One separation pass: push any pair closer than `(r_i + r_j + gap)` apart. The
|
|
71
|
+
* primary (index 0) is pinned — when a pair involves it, only the other circle
|
|
72
|
+
* moves — which keeps the largest avatar dead-centre and in front.
|
|
73
|
+
*/
|
|
74
|
+
function separate(xs, ys, radii, count) {
|
|
75
|
+
for (let i = 0; i < count; i++) {
|
|
76
|
+
for (let j = i + 1; j < count; j++) {
|
|
77
|
+
let dx = (xs[j] ?? 0) - (xs[i] ?? 0);
|
|
78
|
+
let dy = (ys[j] ?? 0) - (ys[i] ?? 0);
|
|
79
|
+
let dist = Math.hypot(dx, dy);
|
|
80
|
+
const minDist = (radii[i] ?? 0) + (radii[j] ?? 0) + LAYOUT_GAP;
|
|
81
|
+
if (dist >= minDist) continue;
|
|
82
|
+
if (dist < EPSILON) {
|
|
83
|
+
// Coincident points: pick a deterministic direction from the indices so
|
|
84
|
+
// the split is stable (never random).
|
|
85
|
+
const a = (i + 1) * GOLDEN_ANGLE + j;
|
|
86
|
+
dx = Math.cos(a);
|
|
87
|
+
dy = Math.sin(a);
|
|
88
|
+
dist = 1;
|
|
89
|
+
}
|
|
90
|
+
const overlap = (minDist - dist) * SEPARATION_STRENGTH;
|
|
91
|
+
const nx = dx / dist;
|
|
92
|
+
const ny = dy / dist;
|
|
93
|
+
if (i === 0) {
|
|
94
|
+
// Primary pinned: move only the other circle by the full overlap.
|
|
95
|
+
xs[j] = (xs[j] ?? 0) + nx * overlap;
|
|
96
|
+
ys[j] = (ys[j] ?? 0) + ny * overlap;
|
|
97
|
+
} else {
|
|
98
|
+
xs[i] = (xs[i] ?? 0) - nx * overlap / 2;
|
|
99
|
+
ys[i] = (ys[i] ?? 0) - ny * overlap / 2;
|
|
100
|
+
xs[j] = (xs[j] ?? 0) + nx * overlap / 2;
|
|
101
|
+
ys[j] = (ys[j] ?? 0) + ny * overlap / 2;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/**
|
|
108
|
+
* Deterministic force-directed pack of `count` circles (primary pinned at the
|
|
109
|
+
* centre), returned as box-fraction bubbles. Used for every cluster with 4+
|
|
110
|
+
* members; 1–3 are handled as explicit arrangements in
|
|
111
|
+
* {@link computeClusterLayout}.
|
|
112
|
+
*/
|
|
113
|
+
function packCluster(count) {
|
|
114
|
+
const radii = new Array(count);
|
|
115
|
+
const xs = new Array(count);
|
|
116
|
+
const ys = new Array(count);
|
|
117
|
+
for (let i = 0; i < count; i++) {
|
|
118
|
+
radii[i] = relativeRadius(i, count);
|
|
119
|
+
if (i === 0) {
|
|
120
|
+
xs[i] = 0;
|
|
121
|
+
ys[i] = 0;
|
|
122
|
+
} else {
|
|
123
|
+
// Golden-angle spiral seed around the pinned primary.
|
|
124
|
+
const seedR = SEED_SPACING * Math.sqrt(i);
|
|
125
|
+
const angle = i * GOLDEN_ANGLE;
|
|
126
|
+
xs[i] = seedR * Math.cos(angle);
|
|
127
|
+
ys[i] = seedR * Math.sin(angle);
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
for (let iter = 0; iter < ITERATIONS; iter++) {
|
|
131
|
+
// (a) Centering: pull every non-primary circle toward the centre.
|
|
132
|
+
for (let i = 1; i < count; i++) {
|
|
133
|
+
xs[i] = (xs[i] ?? 0) * (1 - CENTERING);
|
|
134
|
+
ys[i] = (ys[i] ?? 0) * (1 - CENTERING);
|
|
135
|
+
}
|
|
136
|
+
// (b) Separation resolves any resulting overlaps (primary stays pinned).
|
|
137
|
+
separate(xs, ys, radii, count);
|
|
138
|
+
xs[0] = 0;
|
|
139
|
+
ys[0] = 0;
|
|
140
|
+
}
|
|
141
|
+
// Final separation-only passes so the cluster ends with clean uniform gaps.
|
|
142
|
+
for (let iter = 0; iter < CLEANUP_ITERATIONS; iter++) {
|
|
143
|
+
separate(xs, ys, radii, count);
|
|
144
|
+
xs[0] = 0;
|
|
145
|
+
ys[0] = 0;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
// Fit to the unit box: the primary is at the origin, so scale so the
|
|
149
|
+
// outermost circle edge lands on the box radius (0.5) and place the primary at
|
|
150
|
+
// the box centre.
|
|
151
|
+
let bound = 0;
|
|
152
|
+
for (let i = 0; i < count; i++) {
|
|
153
|
+
const reach = Math.hypot(xs[i] ?? 0, ys[i] ?? 0) + (radii[i] ?? 0);
|
|
154
|
+
if (reach > bound) bound = reach;
|
|
155
|
+
}
|
|
156
|
+
const scale = bound > EPSILON ? 0.5 / bound : 0.5;
|
|
157
|
+
const bubbles = new Array(count);
|
|
158
|
+
for (let i = 0; i < count; i++) {
|
|
159
|
+
bubbles[i] = {
|
|
160
|
+
cx: 0.5 + (xs[i] ?? 0) * scale,
|
|
161
|
+
cy: 0.5 + (ys[i] ?? 0) * scale,
|
|
162
|
+
d: 2 * (radii[i] ?? 0) * scale
|
|
163
|
+
};
|
|
164
|
+
}
|
|
165
|
+
return bubbles;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
/**
|
|
169
|
+
* Deterministic cluster layout for `count` bubbles, as box-fraction bubbles
|
|
170
|
+
* ordered primary-first. `count` includes the `+N` overflow bubble when present
|
|
171
|
+
* (it is simply the last, smallest member of the pack).
|
|
172
|
+
*
|
|
173
|
+
* - `<= 0` → empty.
|
|
174
|
+
* - `1` → a single bubble filling the box.
|
|
175
|
+
* - `2` → the iMessage "one in front, one behind" pair: a larger primary set
|
|
176
|
+
* low-left with a smaller member tucked behind it to the upper-right.
|
|
177
|
+
* - `3` → an iMessage-style triangle: the larger primary along the bottom with
|
|
178
|
+
* two smaller members above it.
|
|
179
|
+
* - `4+` → the deterministic force-directed pack (primary centred, the rest
|
|
180
|
+
* packed magnetically around it, denser as the count grows).
|
|
181
|
+
*/
|
|
182
|
+
function computeClusterLayout(count) {
|
|
183
|
+
if (count <= 0) return [];
|
|
184
|
+
if (count === 1) return [{
|
|
185
|
+
cx: 0.5,
|
|
186
|
+
cy: 0.5,
|
|
187
|
+
d: 1
|
|
188
|
+
}];
|
|
189
|
+
if (count === 2) {
|
|
190
|
+
return [{
|
|
191
|
+
cx: 0.42,
|
|
192
|
+
cy: 0.56,
|
|
193
|
+
d: 0.66
|
|
194
|
+
}, {
|
|
195
|
+
cx: 0.68,
|
|
196
|
+
cy: 0.36,
|
|
197
|
+
d: 0.5
|
|
198
|
+
}];
|
|
199
|
+
}
|
|
200
|
+
if (count === 3) {
|
|
201
|
+
return [{
|
|
202
|
+
cx: 0.5,
|
|
203
|
+
cy: 0.69,
|
|
204
|
+
d: 0.54
|
|
205
|
+
}, {
|
|
206
|
+
cx: 0.285,
|
|
207
|
+
cy: 0.24,
|
|
208
|
+
d: 0.4
|
|
209
|
+
}, {
|
|
210
|
+
cx: 0.715,
|
|
211
|
+
cy: 0.24,
|
|
212
|
+
d: 0.4
|
|
213
|
+
}];
|
|
214
|
+
}
|
|
215
|
+
return packCluster(count);
|
|
216
|
+
}
|
|
217
|
+
//# sourceMappingURL=cluster-layout.js.map
|