feat: replace webshot widget export with client-side PNG capture#335
Open
mbarrenechea wants to merge 3 commits into
Open
feat: replace webshot widget export with client-side PNG capture#335mbarrenechea wants to merge 3 commits into
mbarrenechea wants to merge 3 commits into
Conversation
Replace the server-side webshot widget export pipeline with a fully client-side approach using html-to-image (toPng). This eliminates the round-trip to the webshot service for individual indicator card exports. Key changes: - Add CardExportProvider context with clone-based export strategy that never modifies the original DOM (no visual flash during capture) - Add MapExportRegistrar to capture ArcGIS map canvases via takeScreenshot and composite them as image overlays on the export clone - Inline foreignObject computed styles from the original onto the clone to preserve CHROMA-luminance text colors in SVG charts - Remove webshot widgets endpoint, controller, service, and route - Remove webshot constants and usePostWebshotWidgetsMutation - Add html-to-image dependency to client - Open legend by default and hide interactive controls in export mode
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
html-to-image(toPng), eliminating the round-trip to the webshot NestJS service for individual indicator card exportsforeignObjectcomputed styles (preserving CHROMA-luminance text colors), then captures — the original DOM is never modified (no visual flash)Changes
Added
CardExportProvidercontext (export-provider.tsx) — manages map registrations and clone-basedexportAsPngMapExportRegistrarcomponent (export-registrar.tsx) — registers ArcGIS maptakeScreenshotcallbackshtml-to-imagedependency in clientModified
card.tsx— wraps each indicator card withCardExportProvider, uses client-side export instead of webshot mutationmap/index.tsx— integratesMapExportRegistrarfor map canvas capturelegend/index.tsx— opens legend by default in non-interactive (export) modelegend/item.tsx— usesdata-export-excludeattribute consistentlywebshot.ts— removedusePostWebshotWidgetsMutationand related typesapp.module.ts— removedWidgetsModuleimportRemoved
webshot/src/widgets/— controller, service, module (server-side widget capture)client/src/app/(frontend)/[locale]/webshot/widgets/— webshot pageclient/src/app/(frontend)/local-api/webshot/widgets/route.ts— proxy routeclient/src/constants/webshot.ts— webshot widget constantsclient/src/containers/webshot/widgets/— webshot widget containersTest plan
pnpm check-types)pnpm lint)