Hi,
I’d like to share a trick to implement some sort of simple cluttering effect in Perspective.
As it shown in above the root container of your view should has a zoom property under style.
The value of this property can be adjust by a slider from 1(100%) to 0.6(60%). This cause every things only in this view zoom in/out.(Not whole page like browser zoom)
As we know the current user zoom level now, we can simply use it as condition of visibility of any object in the view.
if({parent.props.style.zoom}>0.9,True,False)
You can put your zoom slider in dock view so the size of your slider size doesn’t change while you change view zoom level.
This is very useful in large overview diagram or SLD diagram that has a lot of details and can not be fit in your view at 100% zoom.
At startup script I set the zoom level to something like 0.6, so all of my objects seen in the view and user can zoom in to see additional details.
I hope in near future IA add a special container to support this like map component.
15 Likes
Any idea on how to get user browser level zoom into perspective? For example an event.
Getting the zoom level is not possible in a desktop browser. It’s an incredibly frustrating thing that web designers regularly beat their heads over.
You can get it in mobile with window.visualViewport.scale, across all major mobile browsers, and VisualViewport.onResize() as the event. No one seems to care about making it work on desktop.
2 Likes
That's because it is intended explicitly to disregard what the web developer thinks the user wants. Accessibility technology absolutely needs it to work this way. Any time you, the web developer, thinks stuff should appear and disappear with zoom, you are [expletive]ing everyone using screen readers or other eyesight assistive technologies. Provide alternate means to perform that kind zoom-based decluttering--don't use the native browser zoom.
Here in the U.S., you can get your employer/client in big trouble with the Americans with Disabilities Act. IANAL, yada yada.
3 Likes
So you should think of creating module something like map component.
Is it technically possible and easy to create a container with zoom capability?
I think map component use the same method for this.
