SVG Preview failure with miro.board.ui.initDraggableItemsContainer()

  • 25 November 2021
  • 6 replies
  • 117 views

Userlevel 2
Badge +2

Hi,

I am having some problems with `miro.board.ui.initDraggableItemsContainer()` which I’ve demostrated in an example plugin:

GitHub Repository

Plugin

Steps to reproduce

  1. Install the plugin
  2. Create a new board
  3. Click on the three dots (···) in the library toolbar on the left
  4. Scroll down in the library panel that opens, click on the link “🐞 Library”
  5. Drag any of the items onto the canvas

What I expect

A preview of the selected element should show that includes the text of the element that is being dragged (e.g. “Please drag me (A)”).

What happens instead

Only the color shows. The text does not get rendered. Additionally the positioning is very weird when the width and height of the image are returned as part of the preview URI (see https://github.com/marijn/miro-draggable-plugin-failure/commit/c89c57a06e2d628fb413e49adc4eedc0b56141b4). Providing the encoding results in no preview at all (see https://github.com/marijn/miro-draggable-plugin-failure/commit/2883280a96c85d23ff960d35269537733d1ff59d)
 

What is going on here? Any tips? Or is this a bug?

Cheers, Marijn


6 replies

Userlevel 5

Hey Marijn,

 

Definitely a good one. I’m wondering if maybe some of the SVG properties/elements aren’t supported in the preview 🤔

Do you know if there are any other SVG elements that don’t work, or is it just the text?

Userlevel 2
Badge +2

Not to my knowledge. Feel free to open some pull requests. If you send me over your GitHub username then I’ll add you to the repo in order for you to merge yourself (the repo deploys to GitHub pages, that way you can see the effect in Miro).

Userlevel 2
Badge +2

I have updated the example to v2 of the Web SDK.

Unfortunately now it isn’t possible at all to render a preview.
To me that seems confusing for the miro board designer. Having the visual reassurance that you are dragging what you think you are dragging is how drag and drop works in any app. This seems a step backwards in my opinion.

Userlevel 5

Thanks for the feedback Marijn! Please keep in mind that V2 is still in Beta, so many features are yet to be added :smile:

 

If you’d like to submit any feature requests, feel free to visit our Roadmap (please keep in mind this is still also a WIP), to add anything you would like to see added!

https://beta.developers.miro.com/page/roadmap

Userlevel 2
Badge +2

Thanks I have submitted a few items to the roadmap. Unfortunately I’m unable to see what.. Not sure if this was one of them. Are you able to verify?

Userlevel 5
Badge +1

Hi @Marijn Huizendveld,

 

I can see a feedback about having a preview of the item that is being dragged from a panel. 

Thanks for raising this feedback! 

Reply