add an export feature to @vue-flow/controls

[heibaikn]

reason:
When the flow becomes too complex, the canvas cannot display the entire flow, and reducing the image size makes it difficult to read. so I would like to add an export image feature to @vue-flow/controls

implementation steps:

1. Import html2canvas.
2. Add width and height to the div.vue-flow__transformationpane element
   
3. The width and height values should be configurable through parameters
4. Expose an "export" method to enable image downloads.

export const exportImg = ()=>{
  const el = contianer.querySelector(".vue-flow__transformationpane")
  const canvas = await html2canvas(el)
  canvas.toBlob((blob) => {
    const url = URL.createObjectURL(blob!);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'screenshot.png'; // 可以指定下载的文件名
    a.click();
    URL.revokeObjectURL(url);
  })
}

[bcakmakoglu]

I don't see the particular benefit of adding this feature to the controls as you can already add new buttons yourself and this seems to be a rather specific use-case that is easy implemented by a user themselves if they need it 😄
Plus this would just add an unnecessary dependency to the controls.

[heibaikn]

do you have any idea to make the width and height of div.vue-flow__transformationpane adapt to the child elements?

Below is my solution

 <VueFlow ref="flowRef">
//
</VueFlow>

const getEl = () => {
  const el = flowRef.value.$el.querySelector(".vue-flow__transformationpane")
  const flowInfo = self.flowTools.getFlowSize()
  el.style.width = `${flowInfo.w}px`
  el.style.height = `${flowInfo.h}px`
  el.style.padding = '20px'
  return el
}

But this feels like a patch for vue-flow. And If div.vue-flow__transformationpane change , it will cause a bug.

[bcakmakoglu]

Not sure what you're specifically trying to accomplish here? Can you elaborate a bit more on what you're trying to do? :)

[heibaikn]

I use vue-flow in my project, and the requirement is to export vue-flow pictures.

I idea is to import html2canvas into the project. And html2canvas requires a dom parameter.

const canvas = await html2canvas(el)

If params is div.vue-flow__pane the exported image is as follows

If params is div.flow__transformationpane, the exported image is as follows

Because the width and height are wrong

Now I realize the complete export of the picture by dynamically modifying the width and height of div.flow__transformationpane, but I feel that this method is not elegant.

 <VueFlow ref="flowRef">
//
</VueFlow>

const getEl = () => {
  const el = flowRef.value.$el.querySelector(".vue-flow__transformationpane")
  const flowInfo = self.flowTools.getFlowSize()
  el.style.width = `${flowInfo.w}px`
  el.style.height = `${flowInfo.h}px`
  el.style.padding = '20px'
  return el
}

[bcakmakoglu]

Tbf, I think html2canvas isn't the right choice here.

html-to-image works fine for me and provides proper images of the reference element.

Something like this produces a proper img:

toJpg(vueFlowRef.value, options)
      .then((data) => {
        // trigger download
      })
      .catch((error) => {
        // handle error
      })

[bcakmakoglu]

Also a small note, you can already access the element using the vueFlowRef that you are provided by useVueFlow

const { vueFlowRef } = useVueFlow()