High frequency transformation update event

  • 4 August 2021
  • 3 replies
  • 88 views
K

I am talking about the Miro web plugin SDK and its capabilities.

I am successfully using the WIDGETS_TRANSFORMATION_UPDATED event to react to widget transformations like resizing and draging.

The problem is with the eventually consistent nature of this event. The event only fires when I release my mouse button and stop resizing or moving a widget. I would like to react to these changes quicker on the fly as the widget is still being resized or moved around.

The basic use case is that I want to change the background color of sticky notes depending on their location on the canvas. Currently the user has to already know where these special areas are and then drop the widget in that location. It would be a much smoother user experience if I could update the color of the sticky note immediately as it enters the correct area.

This type of feature is known as a drop hint and it is commonly found in high quality UIs.

The Miro web client already has all this data, because obviously the vanilla widget draging animation is smooth. I understand that plugin performance is of importance, but even a 250ms interval update would be way better than the only-after-drop behavior we have currently.

Are there any plans on introducing a higher frequency transformation update event?

 

3 replies

Max Harper
Userlevel 7
Badge +5

@Kaur Kuut   Love it!   

Relatedly I’ve requested an event on VIEWPORT_UPDATING ( that would offer some similar time-interval bounded event fires) To enable the board to react to viewport position/zoom-level. 
 

Was just thinking of another data point for the Miro devs for UI API’s. 
In the D3.js library (like plenty others) there is a very clear distinction of events: Start, Drag, End  
This would be helpful event granularity here. 

drag = {

  function dragstarted() {
    d3.select(this).attr("stroke", "black");
  }

  function dragged(event, d) {
    d3.select(this).raise().attr("cx", d.x = event.x).attr("cy", d.y = event.y);
  }

  function dragended() {
    d3.select(this).attr("stroke", null);
  }

  return d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended);
}

@Anthony Roux :thinking:

Think visually. Work brilliantly. || visualthinking.tools || Creators of 'PowerPack', 'Clusterizer' and 'Totally Random' Miro Apps: || max@refractivestrategy.com || Support Community Miro Plug-In Creation: https://www.buymeacoffee.com/refractive
K

Yes some events in the style of DRAG_START / DRAG_MOVE / DRAG_END would be very nice. This also mimics the HTML5 drag-and-drop API.

Anthony Roux
Rank
Userlevel 5
Badge +1

Hey there,

 

Very good feedback. Let me raise this to the team and see if it was in our backlog. Being honest here, I don’t think this will come short term but it is a very interesting request, I definitely want to see if we can have this in the future.

 

Thanks,

Anthony

Reply


Terms & Conditions