@principal-ai/file-city-react 0.5.1 → 0.5.2
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/ArchitectureMapHighlightLayers.d.ts +2 -1
- package/dist/components/ArchitectureMapHighlightLayers.d.ts.map +1 -1
- package/dist/components/ArchitectureMapHighlightLayers.js +41 -6
- package/package.json +1 -1
- package/src/components/ArchitectureMapHighlightLayers.tsx +57 -5
- package/src/stories/ArchitectureMapHighlightLayers.stories.tsx +8 -0
|
@@ -22,6 +22,7 @@ export interface ArchitectureMapHighlightLayersProps {
|
|
|
22
22
|
className?: string;
|
|
23
23
|
selectiveRender?: SelectiveRenderOptions;
|
|
24
24
|
canvasBackgroundColor?: string;
|
|
25
|
+
maxCanvasSize?: number;
|
|
25
26
|
hoverBorderColor?: string;
|
|
26
27
|
disableOpacityDimming?: boolean;
|
|
27
28
|
defaultDirectoryColor?: string;
|
|
@@ -60,7 +61,7 @@ export interface ArchitectureMapHighlightLayersProps {
|
|
|
60
61
|
buildingBorderRadius?: number;
|
|
61
62
|
districtBorderRadius?: number;
|
|
62
63
|
}
|
|
63
|
-
declare function ArchitectureMapHighlightLayersInner({ cityData, highlightLayers, onLayerToggle, focusDirectory, rootDirectoryName, onDirectorySelect, onFileClick, enableZoom, zoomToPath, onZoomComplete, zoomAnimationSpeed, allowZoomToPath, fullSize, showGrid, showFileNames, className, selectiveRender, canvasBackgroundColor, hoverBorderColor, disableOpacityDimming, defaultDirectoryColor, defaultBuildingColor, subdirectoryMode, showLayerControls, showFileTypeIcons, showDirectoryLabels, transform, // Default to no rotation
|
|
64
|
+
declare function ArchitectureMapHighlightLayersInner({ cityData, highlightLayers, onLayerToggle, focusDirectory, rootDirectoryName, onDirectorySelect, onFileClick, enableZoom, zoomToPath, onZoomComplete, zoomAnimationSpeed, allowZoomToPath, fullSize, showGrid, showFileNames, className, selectiveRender, canvasBackgroundColor, maxCanvasSize, hoverBorderColor, disableOpacityDimming, defaultDirectoryColor, defaultBuildingColor, subdirectoryMode, showLayerControls, showFileTypeIcons, showDirectoryLabels, transform, // Default to no rotation
|
|
64
65
|
onHover, buildingBorderRadius, districtBorderRadius, }: ArchitectureMapHighlightLayersProps): React.JSX.Element;
|
|
65
66
|
export declare const ArchitectureMapHighlightLayers: typeof ArchitectureMapHighlightLayersInner;
|
|
66
67
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArchitectureMapHighlightLayers.d.ts","sourceRoot":"","sources":["../../src/components/ArchitectureMapHighlightLayers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAQjF,OAAO,EAIL,cAAc,EAGf,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,sBAAsB,EACvB,MAAM,iCAAiC,CAAC;AAazC,MAAM,WAAW,mCAAmC;IAElD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAGpB,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAG9B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,WAAW,KAAK,IAAI,CAAC;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAG1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,eAAe,CAAC,EAAE,sBAAsB,CAAC;IAGzC,qBAAqB,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"ArchitectureMapHighlightLayers.d.ts","sourceRoot":"","sources":["../../src/components/ArchitectureMapHighlightLayers.tsx"],"names":[],"mappings":"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"}
|
|
@@ -179,7 +179,7 @@ class PathHierarchyLookup {
|
|
|
179
179
|
return this.abstractedPaths.has(path);
|
|
180
180
|
}
|
|
181
181
|
}
|
|
182
|
-
function ArchitectureMapHighlightLayersInner({ cityData, highlightLayers = [], onLayerToggle, focusDirectory = null, rootDirectoryName, onDirectorySelect, onFileClick, enableZoom = false, zoomToPath = null, onZoomComplete, zoomAnimationSpeed = 0.12, allowZoomToPath = true, fullSize = false, showGrid = false, showFileNames = false, className = '', selectiveRender, canvasBackgroundColor, hoverBorderColor, disableOpacityDimming = true, defaultDirectoryColor, defaultBuildingColor, subdirectoryMode, showLayerControls = false, showFileTypeIcons = true, showDirectoryLabels = true, transform = { rotation: 0 }, // Default to no rotation
|
|
182
|
+
function ArchitectureMapHighlightLayersInner({ cityData, highlightLayers = [], onLayerToggle, focusDirectory = null, rootDirectoryName, onDirectorySelect, onFileClick, enableZoom = false, zoomToPath = null, onZoomComplete, zoomAnimationSpeed = 0.12, allowZoomToPath = true, fullSize = false, showGrid = false, showFileNames = false, className = '', selectiveRender, canvasBackgroundColor, maxCanvasSize, hoverBorderColor, disableOpacityDimming = true, defaultDirectoryColor, defaultBuildingColor, subdirectoryMode, showLayerControls = false, showFileTypeIcons = true, showDirectoryLabels = true, transform = { rotation: 0 }, // Default to no rotation
|
|
183
183
|
onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
|
|
184
184
|
const { theme } = (0, industry_theme_1.useTheme)();
|
|
185
185
|
// Use theme colors as defaults, with prop overrides
|
|
@@ -309,7 +309,10 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
|
|
|
309
309
|
const calculateCanvasResolution = (fileCount, _cityBounds) => {
|
|
310
310
|
const minSize = 400;
|
|
311
311
|
const scaleFactor = Math.sqrt(fileCount / 5);
|
|
312
|
-
|
|
312
|
+
let resolution = Math.max(minSize, minSize + scaleFactor * 300);
|
|
313
|
+
if (maxCanvasSize !== undefined) {
|
|
314
|
+
resolution = Math.min(resolution, maxCanvasSize);
|
|
315
|
+
}
|
|
313
316
|
return { width: resolution, height: resolution };
|
|
314
317
|
};
|
|
315
318
|
const [canvasSize, setCanvasSize] = (0, react_1.useState)(() => calculateCanvasResolution(cityData?.buildings?.length || 10, cityData?.bounds));
|
|
@@ -1153,14 +1156,46 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
|
|
|
1153
1156
|
width: '100%',
|
|
1154
1157
|
height: '100%',
|
|
1155
1158
|
minHeight: '250px',
|
|
1156
|
-
backgroundColor:
|
|
1157
|
-
borderRadius: `${theme.radii[2]}px`,
|
|
1158
|
-
padding: `${theme.space[4]}px`,
|
|
1159
|
+
backgroundColor: resolvedCanvasBackgroundColor,
|
|
1160
|
+
borderRadius: fullSize ? 0 : `${theme.radii[2]}px`,
|
|
1159
1161
|
display: 'flex',
|
|
1160
1162
|
alignItems: 'center',
|
|
1161
1163
|
justifyContent: 'center',
|
|
1164
|
+
position: 'relative',
|
|
1165
|
+
overflow: 'hidden',
|
|
1162
1166
|
} },
|
|
1163
|
-
react_1.default.createElement("div", { style: {
|
|
1167
|
+
react_1.default.createElement("div", { style: {
|
|
1168
|
+
position: 'absolute',
|
|
1169
|
+
inset: 0,
|
|
1170
|
+
display: 'grid',
|
|
1171
|
+
gridTemplateColumns: 'repeat(auto-fit, minmax(80px, 1fr))',
|
|
1172
|
+
gridAutoRows: 'minmax(80px, 1fr)',
|
|
1173
|
+
gap: '20px',
|
|
1174
|
+
padding: '20px',
|
|
1175
|
+
} }, Array.from({ length: 200 }).map((_, i) => (react_1.default.createElement("div", { key: i, style: {
|
|
1176
|
+
backgroundColor: resolvedDefaultBuildingColor,
|
|
1177
|
+
borderRadius: buildingBorderRadius,
|
|
1178
|
+
opacity: 0.6 + (i % 3) * 0.2,
|
|
1179
|
+
} })))),
|
|
1180
|
+
react_1.default.createElement("div", { style: {
|
|
1181
|
+
position: 'absolute',
|
|
1182
|
+
top: '35%',
|
|
1183
|
+
left: '50%',
|
|
1184
|
+
transform: 'translate(-50%, -50%)',
|
|
1185
|
+
zIndex: 1,
|
|
1186
|
+
display: 'flex',
|
|
1187
|
+
alignItems: 'center',
|
|
1188
|
+
justifyContent: 'center',
|
|
1189
|
+
color: theme.colors.textMuted,
|
|
1190
|
+
fontFamily: theme.fonts.body,
|
|
1191
|
+
fontSize: `${theme.fontSizes[3]}px`,
|
|
1192
|
+
fontWeight: theme.fontWeights.medium,
|
|
1193
|
+
backgroundColor: resolvedCanvasBackgroundColor,
|
|
1194
|
+
borderRadius: `${theme.radii[2]}px`,
|
|
1195
|
+
padding: `${theme.space[4]}px ${theme.space[5]}px`,
|
|
1196
|
+
textAlign: 'center',
|
|
1197
|
+
minWidth: '300px',
|
|
1198
|
+
} }, "No city data available")));
|
|
1164
1199
|
}
|
|
1165
1200
|
return (react_1.default.createElement("div", { ref: containerRef, className: className, style: {
|
|
1166
1201
|
position: 'relative',
|
package/package.json
CHANGED
|
@@ -66,6 +66,7 @@ export interface ArchitectureMapHighlightLayersProps {
|
|
|
66
66
|
|
|
67
67
|
// Canvas appearance
|
|
68
68
|
canvasBackgroundColor?: string;
|
|
69
|
+
maxCanvasSize?: number; // Maximum canvas dimension in pixels (default: 6000, use ~2048 for mobile)
|
|
69
70
|
|
|
70
71
|
// Additional styling options
|
|
71
72
|
hoverBorderColor?: string;
|
|
@@ -305,6 +306,7 @@ function ArchitectureMapHighlightLayersInner({
|
|
|
305
306
|
className = '',
|
|
306
307
|
selectiveRender,
|
|
307
308
|
canvasBackgroundColor,
|
|
309
|
+
maxCanvasSize,
|
|
308
310
|
hoverBorderColor,
|
|
309
311
|
disableOpacityDimming = true,
|
|
310
312
|
defaultDirectoryColor,
|
|
@@ -476,7 +478,11 @@ function ArchitectureMapHighlightLayersInner({
|
|
|
476
478
|
) => {
|
|
477
479
|
const minSize = 400;
|
|
478
480
|
const scaleFactor = Math.sqrt(fileCount / 5);
|
|
479
|
-
|
|
481
|
+
let resolution = Math.max(minSize, minSize + scaleFactor * 300);
|
|
482
|
+
|
|
483
|
+
if (maxCanvasSize !== undefined) {
|
|
484
|
+
resolution = Math.min(resolution, maxCanvasSize);
|
|
485
|
+
}
|
|
480
486
|
|
|
481
487
|
return { width: resolution, height: resolution };
|
|
482
488
|
};
|
|
@@ -1624,15 +1630,61 @@ function ArchitectureMapHighlightLayersInner({
|
|
|
1624
1630
|
width: '100%',
|
|
1625
1631
|
height: '100%',
|
|
1626
1632
|
minHeight: '250px',
|
|
1627
|
-
backgroundColor:
|
|
1628
|
-
borderRadius: `${theme.radii[2]}px`,
|
|
1629
|
-
padding: `${theme.space[4]}px`,
|
|
1633
|
+
backgroundColor: resolvedCanvasBackgroundColor,
|
|
1634
|
+
borderRadius: fullSize ? 0 : `${theme.radii[2]}px`,
|
|
1630
1635
|
display: 'flex',
|
|
1631
1636
|
alignItems: 'center',
|
|
1632
1637
|
justifyContent: 'center',
|
|
1638
|
+
position: 'relative',
|
|
1639
|
+
overflow: 'hidden',
|
|
1633
1640
|
}}
|
|
1634
1641
|
>
|
|
1635
|
-
|
|
1642
|
+
{/* Decorative grid background with integrated text */}
|
|
1643
|
+
<div
|
|
1644
|
+
style={{
|
|
1645
|
+
position: 'absolute',
|
|
1646
|
+
inset: 0,
|
|
1647
|
+
display: 'grid',
|
|
1648
|
+
gridTemplateColumns: 'repeat(auto-fit, minmax(80px, 1fr))',
|
|
1649
|
+
gridAutoRows: 'minmax(80px, 1fr)',
|
|
1650
|
+
gap: '20px',
|
|
1651
|
+
padding: '20px',
|
|
1652
|
+
}}
|
|
1653
|
+
>
|
|
1654
|
+
{/* Generate grid squares to fill space */}
|
|
1655
|
+
{Array.from({ length: 200 }).map((_, i) => (
|
|
1656
|
+
<div
|
|
1657
|
+
key={i}
|
|
1658
|
+
style={{
|
|
1659
|
+
backgroundColor: resolvedDefaultBuildingColor,
|
|
1660
|
+
borderRadius: buildingBorderRadius,
|
|
1661
|
+
opacity: 0.6 + (i % 3) * 0.2,
|
|
1662
|
+
}}
|
|
1663
|
+
/>
|
|
1664
|
+
))}
|
|
1665
|
+
</div>
|
|
1666
|
+
{/* Text overlay centered */}
|
|
1667
|
+
<div
|
|
1668
|
+
style={{
|
|
1669
|
+
position: 'absolute',
|
|
1670
|
+
top: '35%',
|
|
1671
|
+
left: '50%',
|
|
1672
|
+
transform: 'translate(-50%, -50%)',
|
|
1673
|
+
zIndex: 1,
|
|
1674
|
+
display: 'flex',
|
|
1675
|
+
alignItems: 'center',
|
|
1676
|
+
justifyContent: 'center',
|
|
1677
|
+
color: theme.colors.textMuted,
|
|
1678
|
+
fontFamily: theme.fonts.body,
|
|
1679
|
+
fontSize: `${theme.fontSizes[3]}px`,
|
|
1680
|
+
fontWeight: theme.fontWeights.medium,
|
|
1681
|
+
backgroundColor: resolvedCanvasBackgroundColor,
|
|
1682
|
+
borderRadius: `${theme.radii[2]}px`,
|
|
1683
|
+
padding: `${theme.space[4]}px ${theme.space[5]}px`,
|
|
1684
|
+
textAlign: 'center',
|
|
1685
|
+
minWidth: '300px',
|
|
1686
|
+
}}
|
|
1687
|
+
>
|
|
1636
1688
|
No city data available
|
|
1637
1689
|
</div>
|
|
1638
1690
|
</div>
|
|
@@ -310,6 +310,14 @@ export const WithBorderRadius: Story = {
|
|
|
310
310
|
},
|
|
311
311
|
};
|
|
312
312
|
|
|
313
|
+
// Story showing the loading/empty state when cityData is not available
|
|
314
|
+
export const LoadingState: Story = {
|
|
315
|
+
args: {
|
|
316
|
+
cityData: undefined,
|
|
317
|
+
fullSize: true,
|
|
318
|
+
},
|
|
319
|
+
};
|
|
320
|
+
|
|
313
321
|
// Story with programmatic zoom only (no user interaction)
|
|
314
322
|
// Demonstrates allowZoomToPath={true} with enableZoom={false}
|
|
315
323
|
export const ProgrammaticZoomOnly: Story = {
|