feat(data-modeling): export diagram to png COMPASS-9449 #7055
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,165 @@ | ||
| import React from 'react'; | ||
| import { | ||
| getNodesBounds, | ||
| getViewportForBounds, | ||
| DiagramProvider, | ||
| Diagram, | ||
| } from '@mongodb-js/diagramming'; | ||
| import type { DiagramInstance } from '@mongodb-js/diagramming'; | ||
| import type { StaticModel } from './data-model-storage'; | ||
| import ReactDOM from 'react-dom'; | ||
| import { toPng } from 'html-to-image'; | ||
| import { rafraf, spacing } from '@mongodb-js/compass-components'; | ||
| import { raceWithAbort } from '@mongodb-js/compass-utils'; | ||
|
|
||
| function moveSvgDefsToViewportElement( | ||
| container: Element, | ||
| targetElement: Element | ||
| ) { | ||
| const markerDef = container.querySelector('svg defs'); | ||
| if (!markerDef) { | ||
| return; | ||
| } | ||
| const diagramSvgElements = targetElement.querySelectorAll('svg'); | ||
| diagramSvgElements.forEach((svg) => { | ||
| const pathsWithMarkers = svg.querySelectorAll( | ||
| 'path[marker-end], path[marker-start]' | ||
| ); | ||
| if (pathsWithMarkers.length !== 0) { | ||
| const clonedDef = markerDef.cloneNode(true); | ||
| svg.insertBefore(clonedDef, svg.firstChild); | ||
| } | ||
| }); | ||
| markerDef.remove(); | ||
| } | ||
|
|
||
| export async function exportToPng( | ||
| fileName: string, | ||
| diagram: DiagramInstance, | ||
| signal?: AbortSignal | ||
| ) { | ||
| const dataUri = await raceWithAbort( | ||
| getExportPngDataUri(diagram), | ||
| signal ?? new AbortController().signal | ||
| ); | ||
| downloadFile(dataUri, fileName); | ||
| } | ||
|
|
||
| export function getExportPngDataUri(diagram: DiagramInstance): Promise<string> { | ||
| return new Promise<string>((resolve, _reject) => { | ||
|
Member
There was a problem hiding this comment. Is there a reason why we're going to the Promise resolve/reject here? I'm thinking it could lead to an uncaught exception. Could we instead have the cleanup in a finally or catch block? We could do await something like the rafraf as well and await the
Collaborator
Author
There was a problem hiding this comment. What would you recommend in this case? I only want to resolve once dom has been converted to a data uri (and as such show loading state to the user). For clean up, its already in place where we export.
Member
There was a problem hiding this comment. I would recommend async/await here with try/catch. I find it makes the code easier to read through and the error handling less prone to be uncaught. |
||
| const bounds = getNodesBounds(diagram.getNodes()); | ||
|
|
||
| const container = document.createElement('div'); | ||
| container.setAttribute('data-testid', 'export-diagram-container'); | ||
| // Push it out of the viewport | ||
| container.style.position = 'fixed'; | ||
| container.style.top = '100vh'; | ||
| container.style.left = '100vw'; | ||
| container.style.width = `${bounds.width}px`; | ||
| container.style.height = `${bounds.height}px`; | ||
| document.body.appendChild(container); | ||
|
|
||
| const edges = diagram.getEdges(); | ||
| const nodes = diagram.getNodes().map((node) => ({ | ||
| ...node, | ||
| selected: false, // Dont show selected state (blue border) | ||
| })); | ||
|
|
||
| const reject = (error: Error) => { | ||
| document.body.removeChild(container); | ||
|
Collaborator
There was a problem hiding this comment. Seems like we're missing clean-up on resolve, this should probably be in a finally block
Collaborator
Author
Collaborator
There was a problem hiding this comment. Sounds good!
Just FYI, I already did in eslint update PR, so no need to worry about this (was in the way of some new issues that update started to show there)
Collaborator
There was a problem hiding this comment. Nit: you don't need it here now that you have it in |
||
| _reject(error); | ||
| }; | ||
|
|
||
| ReactDOM.render( | ||
| <DiagramProvider> | ||
| <Diagram | ||
| edges={edges} | ||
| nodes={nodes} | ||
| onlyRenderVisibleElements={false} | ||
| /> | ||
| </DiagramProvider>, | ||
| container, | ||
| () => { | ||
| rafraf(() => { | ||
| // For export we are selecting react-flow__viewport element, | ||
| // which contains the export canvas. It excludes diagram | ||
| // title, minmap, and other UI elements. However, it also | ||
| // excludes the svg defs that are currently outside of this element. | ||
| // So, when exporting, we need to include those defs as well so that | ||
| // edge markers are exported correctly. | ||
|
Comment on lines
+88
to
+89
Collaborator
There was a problem hiding this comment. Wouldn't it be easier to hide what we don't need instead of doing this?
Collaborator
There was a problem hiding this comment. Can we make this configurable in the diagramming package?
Collaborator
Author
There was a problem hiding this comment.
I'll evaluate this, last time (in poc) i checked this, it did not give me good results.
These custom marker are rendered here in the package. I am not sure if i follow what you mean by making it configurable?
Collaborator
There was a problem hiding this comment. Sorry, comment somehow attached to the wrong place, should've been this part: We're doing all this to avoid including controls in the diagram screenshot. Can we change diagramming package to allow us to render it with hidden controls? Then you don't need to do anything to target an element that doesn't include everything that you need
Collaborator
Author
There was a problem hiding this comment. ah, yeah that should be possible with the package. but again it depends on if we are able to export the root container (
Collaborator
Author
There was a problem hiding this comment. I tried to do this and was not able to get it to export correctly using this approach. |
||
| const viewportElement = container.querySelector( | ||
| '.react-flow__viewport' | ||
| ); | ||
|
Comment on lines
+90
to
+92
Collaborator
There was a problem hiding this comment. Nit: instead of relying on arbitrary frames you can probably wait for this element to be in the view (similar to what we do in tests sometimes) |
||
| if (!viewportElement) { | ||
| return reject(new Error('Diagram element not found')); | ||
| } | ||
|
|
||
| const transform = getViewportForBounds( | ||
| bounds, | ||
| bounds.width, | ||
| bounds.height, | ||
| 0.5, // Minimum zoom | ||
| 2, // Maximum zoom | ||
| `${spacing[400]}px` // 16px padding | ||
| ); | ||
|
|
||
| // Moving svg defs to the viewport element | ||
| moveSvgDefsToViewportElement(container, viewportElement); | ||
| rafraf(() => { | ||
| toPng(viewportElement as HTMLElement, { | ||
| backgroundColor: '#fff', | ||
| pixelRatio: 2, | ||
| width: bounds.width, | ||
| height: bounds.height, | ||
| style: { | ||
| width: `${bounds.width}px`, | ||
| height: `${bounds.height}px`, | ||
| transform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.zoom})`, | ||
| }, | ||
| }) | ||
| .then(resolve) | ||
| .catch(reject); | ||
| }); | ||
| }); | ||
| } | ||
| ); | ||
| }); | ||
| } | ||
|
|
||
| export function exportToJson(fileName: string, model: StaticModel) { | ||
| const json = getExportJsonFromModel(model); | ||
| const blob = new Blob([JSON.stringify(json, null, 2)], { | ||
| type: 'application/json', | ||
| }); | ||
| const url = window.URL.createObjectURL(blob); | ||
| downloadFile(url, fileName, () => { | ||
| window.URL.revokeObjectURL(url); | ||
| }); | ||
| } | ||
|
|
||
| export function getExportJsonFromModel({ | ||
| collections, | ||
| relationships, | ||
| }: StaticModel) { | ||
| return { | ||
| collections: Object.fromEntries( | ||
| collections.map((collection) => { | ||
| // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
| const { ns, jsonSchema, ...ignoredProps } = collection; | ||
| return [ns, { ns, jsonSchema }]; | ||
| }) | ||
| ), | ||
| relationships, | ||
| }; | ||
| } | ||
|
|
||
| function downloadFile(uri: string, fileName: string, cleanup?: () => void) { | ||
| const link = document.createElement('a'); | ||
| link.download = fileName; | ||
| link.href = uri; | ||
| link.click(); | ||
| setTimeout(() => { | ||
| link.remove(); | ||
| cleanup?.(); | ||
| }, 0); | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use our openToast instead, not sure how are we even exporting this one, we really shouldn't