Hi,
I would like to create the distance indicator for my prototype on Axure. Similar to how sketch and figma have their distance indicator when dragging one shape closer to another.
The distance indicator changes upon real time when dragging one shape.
I would like to replicate it on Axure for my project and was wondering if the condition builder will be able to achieve it.
Would appreciate if anybody could provide some suggestions.
Thank you!
Hi rulin!
It looks like you can create some similar distance tracking and resizing interactions with some global variables and conditional logic:
distance sample.rp (58.3 KB)
The dragging aspect is handled by a dynamic panel’s OnDrag event, as described in our drag and drop tutorial. The conditions for showing, resizing, and setting the value of a distance indicator can be handled after this event’s move with drag action.
To track the varying location of the widget, you can either use local variables or global variables. More information on these kinds of variables can be found here. I used global variables in the given sample and had the OnPageLoad event set values for both widget’s top, bottom, left, and right locations, using the math functions described here. The second widget’s global variables be changed as it is dragged, using functions like “This.top” or “This.left”. These new values can be used to check whether any other conditional cases’ criteria have been met.
For example, if you dragged the second widget to the right of the first, it will fire the OnDrag event’s first case, moving the widget and setting new values for the global variables. Then, it will check to see if any other cases conditions are met. The “Moving Second to the right of First” case’s conditions would be met by this, so actions can fire to show the distance indication line, set text to show the value between the two widgets, and resize the line to match that distance value as well. With the global variables, the following expression can be used to get this value for the distance:
[[SecondLeft-FirstRight]]
This subtracts the x value of the second widget’s left edge by the x value of the first widget’s right edge, giving you the value of the distance between the two widgets.
Some similar interactions can be fired when the second widget is dragged below the first widget, like with the following conditional logic:
if value of SecondTop is greater than value of FirstBottom
In this instance, you can set the text and size of the distance indicator with this expression:
[[SecondTop-FirstBottom]]
That’s all you’d need to show these two indicators in particular, but you could use the same global values to make different conditional cases fire, like when the two widgets are overlapping.
To make sure that all indicators are hidden after the dragging operation is done, you can use an OnDragDrop event to hide all of indicator lines.
I hope this all helps!
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.