Adding: Export Button #42
Conversation
src/components/renderer/renderer.tsx
Outdated
| var link = document.createElement('a'); | ||
| link.setAttribute('href', url); | ||
| link.setAttribute('target', '_blank'); | ||
| link.setAttribute('download', 'export.'+ ext); |
There was a problem hiding this comment.
instead of downloading, can we just open it in a new tab?
There was a problem hiding this comment.
Actually, View API gives URI for png whose support is removed by many browsers in a new tab, they did it for security reasons. Now we have the only option of downloading it. Still, we can open SVG in a new tab.
There was a problem hiding this comment.
I think for SVG it's more important. My use case is that I want to print the SVG as PDF. It's not important for PNGs.
src/components/renderer/renderer.tsx
Outdated
| if (this.props.export) { | ||
| const ext = this.props.renderer === 'canvas' ? 'png' : 'svg'; | ||
| const url = view.toImageURL(ext); | ||
| url.then(function(url) { |
|
This is a great start. Can you try an interactive example and make sure that the exported visualization is the of the current state, not the initial state? |
|
Currently, the current state (after interaction) is not stored that's why it is exporting the initial state. |
|
To fix this we need to set a new state that preserves the user interactions. But I am not getting which vega module is doing the interaction part. |
|
What happens if you use the existing Vega view instead of creating a new one? Does that contain the interactive state? |
|
I am already using the existing one but it gets reset each time as component updates. Now I am trying by storing view as a state. |
|
@domoritz Using the existing view is perfectly exporting with interactive states so setting view as a state doesn't make a point plus requested changes are done. You can have a look. |
ydlamba
force-pushed
the
ydl/export-button
branch
2 times, most recently
from
46e2b51
to
5a7a2d8
Compare
src/components/renderer/renderer.tsx
Outdated
| }; | ||
|
|
||
| export default class Editor extends React.Component<Props> { | ||
| static view: any; |
src/components/toolbar/renderer.tsx
Outdated
| @@ -55,6 +62,9 @@ export default class Toolbar extends React.Component<Props> { | |||
| <div className='renderer-toggle' onClick={this.props.cycleRenderer}> | |||
| {`Renderer: ${this.props.renderer}`} | |||
| </div> | |||
| <div className='vega-export' onClick={() => this.props.exportVega(true)}> | |||
| {`Export`} | |||
There was a problem hiding this comment.
Let's make this Export SVG and Export PNG depending on whether the Canvas or SVG renderer are active.
ydlamba
force-pushed
the
ydl/export-button
branch
from
5a7a2d8
to
8f3d9de
Compare
|
@domoritz Changes done. |
Adding: Export Button
pngorsvgdepending upon the renderer.Fixes #5.