@principal-ai/file-city-react 0.5.43 → 0.5.44
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/dist/components/FileCity3D/FileCity3D.d.ts +35 -1
- package/dist/components/FileCity3D/FileCity3D.d.ts.map +1 -1
- package/dist/components/FileCity3D/FileCity3D.js +21 -8
- package/dist/components/FileCity3D/index.d.ts +1 -1
- package/dist/components/FileCity3D/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/FileCity3D/FileCity3D.tsx +61 -2
- package/src/components/FileCity3D/index.ts +1 -0
- package/src/stories/HighlightLayersFlatDebug.stories.tsx +319 -0
- package/src/stories/LeaderLineSnippetOverlay3D.stories.tsx +1060 -0
|
@@ -0,0 +1,319 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
|
|
3
|
+
import { FileCity3D } from '../components/FileCity3D';
|
|
4
|
+
import type { CityData, HighlightLayer } from '../components/FileCity3D';
|
|
5
|
+
import { createFileColorHighlightLayers } from '../utils/fileColorHighlightLayers';
|
|
6
|
+
import authServerCityData from '../../../../assets/auth-server-city-data.json';
|
|
7
|
+
|
|
8
|
+
const meta = {
|
|
9
|
+
title: 'Debug/Highlight Layers (Flat)',
|
|
10
|
+
parameters: { layout: 'fullscreen' },
|
|
11
|
+
} satisfies Meta;
|
|
12
|
+
|
|
13
|
+
export default meta;
|
|
14
|
+
|
|
15
|
+
const cityData = authServerCityData as CityData;
|
|
16
|
+
|
|
17
|
+
// Three known-existing paths in the auth-server fixture, picked so they
|
|
18
|
+
// represent different file types.
|
|
19
|
+
const TARGETS = {
|
|
20
|
+
ts: 'auth-server/src/lib/auth-provider.ts', // .ts → fileColor primary 'fill'
|
|
21
|
+
tsx: 'auth-server/src/app/page.tsx', // .tsx → fileColor primary 'fill', secondary 'border'
|
|
22
|
+
route: 'auth-server/src/app/api/auth/workos/callback/route.ts', // .ts
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
const RED = '#ef4444';
|
|
26
|
+
const AMBER = '#f59e0b';
|
|
27
|
+
const GREEN = '#22c55e';
|
|
28
|
+
const NEUTRAL_BUILDING = '#475569'; // slate-600 — used in stories that want to isolate highlight rendering
|
|
29
|
+
|
|
30
|
+
const FLAT_ANIMATION = {
|
|
31
|
+
startFlat: true as const,
|
|
32
|
+
autoStartDelay: null,
|
|
33
|
+
staggerDelay: 0,
|
|
34
|
+
tension: 200,
|
|
35
|
+
friction: 24,
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
const Stage = ({ children }: { children: React.ReactNode }) => (
|
|
39
|
+
<div
|
|
40
|
+
style={{
|
|
41
|
+
width: '100vw',
|
|
42
|
+
height: '100vh',
|
|
43
|
+
backgroundColor: '#0f1419',
|
|
44
|
+
}}
|
|
45
|
+
>
|
|
46
|
+
{children}
|
|
47
|
+
</div>
|
|
48
|
+
);
|
|
49
|
+
|
|
50
|
+
// ---------------------------------------------------------------------------
|
|
51
|
+
// 1. Borders only, no fileColorLayers — the cleanest possible test.
|
|
52
|
+
// ---------------------------------------------------------------------------
|
|
53
|
+
export const BorderOnly_NoFileColors: StoryObj = {
|
|
54
|
+
name: '1. border only, no file colors',
|
|
55
|
+
render: () => {
|
|
56
|
+
const layers: HighlightLayer[] = [
|
|
57
|
+
{
|
|
58
|
+
id: 'red',
|
|
59
|
+
name: 'red',
|
|
60
|
+
enabled: true,
|
|
61
|
+
color: RED,
|
|
62
|
+
priority: 10,
|
|
63
|
+
borderWidth: 30,
|
|
64
|
+
items: [{ path: TARGETS.ts, type: 'file', renderStrategy: 'border' }],
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
id: 'amber',
|
|
68
|
+
name: 'amber',
|
|
69
|
+
enabled: true,
|
|
70
|
+
color: AMBER,
|
|
71
|
+
priority: 11,
|
|
72
|
+
borderWidth: 30,
|
|
73
|
+
items: [{ path: TARGETS.tsx, type: 'file', renderStrategy: 'border' }],
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
id: 'green',
|
|
77
|
+
name: 'green',
|
|
78
|
+
enabled: true,
|
|
79
|
+
color: GREEN,
|
|
80
|
+
priority: 12,
|
|
81
|
+
borderWidth: 30,
|
|
82
|
+
items: [{ path: TARGETS.route, type: 'file', renderStrategy: 'border' }],
|
|
83
|
+
},
|
|
84
|
+
];
|
|
85
|
+
return (
|
|
86
|
+
<Stage>
|
|
87
|
+
<FileCity3D
|
|
88
|
+
cityData={cityData}
|
|
89
|
+
width="100%"
|
|
90
|
+
height="100%"
|
|
91
|
+
isGrown={false}
|
|
92
|
+
animation={FLAT_ANIMATION}
|
|
93
|
+
highlightLayers={layers}
|
|
94
|
+
defaultBuildingColor={NEUTRAL_BUILDING}
|
|
95
|
+
isolationMode="none"
|
|
96
|
+
backgroundColor="#0f1419"
|
|
97
|
+
showControls={true}
|
|
98
|
+
/>
|
|
99
|
+
</Stage>
|
|
100
|
+
);
|
|
101
|
+
},
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
// ---------------------------------------------------------------------------
|
|
105
|
+
// 2. Same as #1 but with fileColorLayers also set — does anything change?
|
|
106
|
+
// ---------------------------------------------------------------------------
|
|
107
|
+
export const BorderOnly_WithFileColors: StoryObj = {
|
|
108
|
+
name: '2. border + file colors',
|
|
109
|
+
render: () => {
|
|
110
|
+
const fileColorLayers = createFileColorHighlightLayers(cityData.buildings);
|
|
111
|
+
const layers: HighlightLayer[] = [
|
|
112
|
+
{
|
|
113
|
+
id: 'red',
|
|
114
|
+
name: 'red',
|
|
115
|
+
enabled: true,
|
|
116
|
+
color: RED,
|
|
117
|
+
priority: 1000,
|
|
118
|
+
borderWidth: 30,
|
|
119
|
+
items: [{ path: TARGETS.ts, type: 'file', renderStrategy: 'border' }],
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
id: 'amber',
|
|
123
|
+
name: 'amber',
|
|
124
|
+
enabled: true,
|
|
125
|
+
color: AMBER,
|
|
126
|
+
priority: 1000,
|
|
127
|
+
borderWidth: 30,
|
|
128
|
+
items: [{ path: TARGETS.tsx, type: 'file', renderStrategy: 'border' }],
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
id: 'green',
|
|
132
|
+
name: 'green',
|
|
133
|
+
enabled: true,
|
|
134
|
+
color: GREEN,
|
|
135
|
+
priority: 1000,
|
|
136
|
+
borderWidth: 30,
|
|
137
|
+
items: [{ path: TARGETS.route, type: 'file', renderStrategy: 'border' }],
|
|
138
|
+
},
|
|
139
|
+
];
|
|
140
|
+
return (
|
|
141
|
+
<Stage>
|
|
142
|
+
<FileCity3D
|
|
143
|
+
cityData={cityData}
|
|
144
|
+
width="100%"
|
|
145
|
+
height="100%"
|
|
146
|
+
isGrown={false}
|
|
147
|
+
animation={FLAT_ANIMATION}
|
|
148
|
+
fileColorLayers={fileColorLayers}
|
|
149
|
+
highlightLayers={layers}
|
|
150
|
+
isolationMode="none"
|
|
151
|
+
backgroundColor="#0f1419"
|
|
152
|
+
showControls={true}
|
|
153
|
+
/>
|
|
154
|
+
</Stage>
|
|
155
|
+
);
|
|
156
|
+
},
|
|
157
|
+
};
|
|
158
|
+
|
|
159
|
+
// ---------------------------------------------------------------------------
|
|
160
|
+
// 3. Fill strategy — sanity check that the layer system applies at all.
|
|
161
|
+
// If these buildings turn red/amber/green, the layer plumbing is fine
|
|
162
|
+
// and the issue is specific to BorderHighlights rendering.
|
|
163
|
+
// ---------------------------------------------------------------------------
|
|
164
|
+
export const Fill_NoFileColors: StoryObj = {
|
|
165
|
+
name: '3. fill only, no file colors',
|
|
166
|
+
render: () => {
|
|
167
|
+
const layers: HighlightLayer[] = [
|
|
168
|
+
{
|
|
169
|
+
id: 'red',
|
|
170
|
+
name: 'red',
|
|
171
|
+
enabled: true,
|
|
172
|
+
color: RED,
|
|
173
|
+
priority: 10,
|
|
174
|
+
items: [{ path: TARGETS.ts, type: 'file', renderStrategy: 'fill' }],
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
id: 'amber',
|
|
178
|
+
name: 'amber',
|
|
179
|
+
enabled: true,
|
|
180
|
+
color: AMBER,
|
|
181
|
+
priority: 11,
|
|
182
|
+
items: [{ path: TARGETS.tsx, type: 'file', renderStrategy: 'fill' }],
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
id: 'green',
|
|
186
|
+
name: 'green',
|
|
187
|
+
enabled: true,
|
|
188
|
+
color: GREEN,
|
|
189
|
+
priority: 12,
|
|
190
|
+
items: [{ path: TARGETS.route, type: 'file', renderStrategy: 'fill' }],
|
|
191
|
+
},
|
|
192
|
+
];
|
|
193
|
+
return (
|
|
194
|
+
<Stage>
|
|
195
|
+
<FileCity3D
|
|
196
|
+
cityData={cityData}
|
|
197
|
+
width="100%"
|
|
198
|
+
height="100%"
|
|
199
|
+
isGrown={false}
|
|
200
|
+
animation={FLAT_ANIMATION}
|
|
201
|
+
highlightLayers={layers}
|
|
202
|
+
defaultBuildingColor={NEUTRAL_BUILDING}
|
|
203
|
+
isolationMode="none"
|
|
204
|
+
backgroundColor="#0f1419"
|
|
205
|
+
showControls={true}
|
|
206
|
+
/>
|
|
207
|
+
</Stage>
|
|
208
|
+
);
|
|
209
|
+
},
|
|
210
|
+
};
|
|
211
|
+
|
|
212
|
+
// ---------------------------------------------------------------------------
|
|
213
|
+
// 4. Same buildings as #1 but in 3D (grown). If borders show colored here
|
|
214
|
+
// but black in #1, the issue is specific to flat mode.
|
|
215
|
+
// ---------------------------------------------------------------------------
|
|
216
|
+
export const BorderOnly_Grown: StoryObj = {
|
|
217
|
+
name: '4. border only, 3D grown',
|
|
218
|
+
render: () => {
|
|
219
|
+
const layers: HighlightLayer[] = [
|
|
220
|
+
{
|
|
221
|
+
id: 'red',
|
|
222
|
+
name: 'red',
|
|
223
|
+
enabled: true,
|
|
224
|
+
color: RED,
|
|
225
|
+
priority: 10,
|
|
226
|
+
borderWidth: 30,
|
|
227
|
+
items: [{ path: TARGETS.ts, type: 'file', renderStrategy: 'border' }],
|
|
228
|
+
},
|
|
229
|
+
{
|
|
230
|
+
id: 'amber',
|
|
231
|
+
name: 'amber',
|
|
232
|
+
enabled: true,
|
|
233
|
+
color: AMBER,
|
|
234
|
+
priority: 11,
|
|
235
|
+
borderWidth: 30,
|
|
236
|
+
items: [{ path: TARGETS.tsx, type: 'file', renderStrategy: 'border' }],
|
|
237
|
+
},
|
|
238
|
+
{
|
|
239
|
+
id: 'green',
|
|
240
|
+
name: 'green',
|
|
241
|
+
enabled: true,
|
|
242
|
+
color: GREEN,
|
|
243
|
+
priority: 12,
|
|
244
|
+
borderWidth: 30,
|
|
245
|
+
items: [{ path: TARGETS.route, type: 'file', renderStrategy: 'border' }],
|
|
246
|
+
},
|
|
247
|
+
];
|
|
248
|
+
return (
|
|
249
|
+
<Stage>
|
|
250
|
+
<FileCity3D
|
|
251
|
+
cityData={cityData}
|
|
252
|
+
width="100%"
|
|
253
|
+
height="100%"
|
|
254
|
+
isGrown={true}
|
|
255
|
+
animation={{ ...FLAT_ANIMATION, autoStartDelay: 0 }}
|
|
256
|
+
highlightLayers={layers}
|
|
257
|
+
defaultBuildingColor={NEUTRAL_BUILDING}
|
|
258
|
+
isolationMode="none"
|
|
259
|
+
backgroundColor="#0f1419"
|
|
260
|
+
showControls={true}
|
|
261
|
+
/>
|
|
262
|
+
</Stage>
|
|
263
|
+
);
|
|
264
|
+
},
|
|
265
|
+
};
|
|
266
|
+
|
|
267
|
+
// ---------------------------------------------------------------------------
|
|
268
|
+
// 5. Sweep of borderWidths. Are any of them visible in flat mode?
|
|
269
|
+
// ---------------------------------------------------------------------------
|
|
270
|
+
export const BorderWidthSweep: StoryObj = {
|
|
271
|
+
name: '5. borderWidth sweep (4, 30, 100)',
|
|
272
|
+
render: () => {
|
|
273
|
+
const layers: HighlightLayer[] = [
|
|
274
|
+
{
|
|
275
|
+
id: 'bw-4',
|
|
276
|
+
name: 'bw 4',
|
|
277
|
+
enabled: true,
|
|
278
|
+
color: RED,
|
|
279
|
+
priority: 10,
|
|
280
|
+
borderWidth: 4,
|
|
281
|
+
items: [{ path: TARGETS.ts, type: 'file', renderStrategy: 'border' }],
|
|
282
|
+
},
|
|
283
|
+
{
|
|
284
|
+
id: 'bw-30',
|
|
285
|
+
name: 'bw 30',
|
|
286
|
+
enabled: true,
|
|
287
|
+
color: AMBER,
|
|
288
|
+
priority: 11,
|
|
289
|
+
borderWidth: 30,
|
|
290
|
+
items: [{ path: TARGETS.tsx, type: 'file', renderStrategy: 'border' }],
|
|
291
|
+
},
|
|
292
|
+
{
|
|
293
|
+
id: 'bw-100',
|
|
294
|
+
name: 'bw 100',
|
|
295
|
+
enabled: true,
|
|
296
|
+
color: GREEN,
|
|
297
|
+
priority: 12,
|
|
298
|
+
borderWidth: 100,
|
|
299
|
+
items: [{ path: TARGETS.route, type: 'file', renderStrategy: 'border' }],
|
|
300
|
+
},
|
|
301
|
+
];
|
|
302
|
+
return (
|
|
303
|
+
<Stage>
|
|
304
|
+
<FileCity3D
|
|
305
|
+
cityData={cityData}
|
|
306
|
+
width="100%"
|
|
307
|
+
height="100%"
|
|
308
|
+
isGrown={false}
|
|
309
|
+
animation={FLAT_ANIMATION}
|
|
310
|
+
highlightLayers={layers}
|
|
311
|
+
defaultBuildingColor={NEUTRAL_BUILDING}
|
|
312
|
+
isolationMode="none"
|
|
313
|
+
backgroundColor="#0f1419"
|
|
314
|
+
showControls={true}
|
|
315
|
+
/>
|
|
316
|
+
</Stage>
|
|
317
|
+
);
|
|
318
|
+
},
|
|
319
|
+
};
|