Overview# I needed to change the zoom, scale, and rotation behavior of Mirador 4, so this is a memo on how to make those changes.
Setup# Start Mirador 4 locally with the following commands.
g c p p i d n n t p p m m m c i l r i s o a t n d a e o r r t h t t p s : / / g i t h u b . c o m / p r o j e c t m i r a d o r / m i r a d o r
It starts on port 4444.
Customizing the zoomIn Processing# As an example, let’s modify the processing when the zoomIn button is clicked as follows.
h a n } d l c u / } e o p / ) Z n d z r x y ; o s a z o o : : o t t o o t m e o m a v v I { V m : t i i n i : i e e C w e v o w w l i w v i n e e i n p i e : r r c d o e w . . k o r w e v x y ( w t e r i ) I ( r . e d w . z w { , i z o e 1 1 n o o r . . u d o m . 1 1 p o m r , , d w o a I t t d 1 a e , 2 . t V , 1 i a a i { , o d d e n d d w e e p + d d o r a 5 t d , , d e v d i e a w d e d r e d } = t h i s . p r o p s ; As a result, when pressing the zoomIn button, you can see that zoom and rotation occur while the center shifts slightly.
https://youtu.be/wn1WxpTVpS4
By applying this approach, you can customize the zoom, scale, rotation, and other behaviors of Mirador 3.
In the above example, it took a bit of time for zoom and rotation to complete. To perform these operations instantly, customize the componentDidUpdate in OpenSeadragonViewer.js as follows.
This allows configuring whether zoom and rotation should be performed immediately based on the immediately property of the viewerConfig object.
c o m } p o c } c t i } i ) } } } n o o h f f e n v c = n i i } t r { v c t e t e c c i } i } i } i } n s i a s s ( f h e i o h l h l o o f f f f t t e n t t . p v v v v i t ! e n i s i s n n v v v D w v h a r i i i i s u t ! w s s e s e s s i i i i i { e a i { p e v e e e e . r h t e t . . t t v e v e v e v e d r s s i v i w w w w a n i h r a i r i i v w i w i w i w U C W . v R S e e e e e d ; s i . c d f e f { i e i p e p e p e p p o o p i e t w r r r r d . s c a d f m w e o w o w o w o d n r r e f a e . . C C A i . l n A ( r v m e w r e r e r e r a f l o w . t r v v o o l n n o v l ! e v i e r e t r t r t r t t i d p e c e C i i n n l f o s a l i s i e d C r . C . C . C . e g , s r u . o e e f f I o n e s I s h e w i o C p o z o s o s ( , ; r v n w w i i m R T ( e m E T w p a n o a n o n e n e p } r i f p p g g a e i ) s a q i e o t f n n f o f t f t r e e i o o . . g s l ; C g u l r r e i f T i m i R i F e = n w g r r d f e p e h e a e C t l g i o g T g o g l v t e ) t t e l S o d a S l P o y . g ( . o . t . i P t r . . g i o n I n o ( r n } x . v z ( r a f p r h = { p z r p u s m g u c o f = y i o v o t l ( o i = a o e r e a e r a p i = ! e o i t i i v p s v = n o e ! c s g d c n e g v = ! w m e a o p i s . i = T m s = e M e e v r v i = = e w t n e , s e o T = s a d = s a t & i e = r ! e i ( ! w t w u ( o ! ( t M ( s i & e w v C = r o v = e p a e n v ( = u ! c a ! ( W e w e i v o = C n i = r r t r d i v = n ( h t ( c o s ! e r e i n o e C e e ; e e i d v ( c i a r ( t r C w e f v n ! w v o v ; f w e u e i p h s n l ) h ; o p w i i f = e i n S i e w n f e r ( E v d ; i n o p g e i = r e f t n r e d i w e p q a . s f r o , w g C w i a e C r e n e v r u s l . i t r p . v o p g t d o C f e r P e a e a o g . t i o z i n o . e ) n o i d C r v l s y s . c . m r o e f r f ) f n n o o P ( C e d i e c m t o w i t l { i f e & n p r c h r U m n e e . m p g . i { g i d & f s o a a s p m t n d z , o . g p , g i . p n n , d e e t i o r r e ) . & v g i s v g a d r e a o v t o t ; t z & i ) n . a e p t i S r t m i . t F r o e ) f n s d r i a p S e S e g a l u o v w ; o o W e n t r p l p w e t i e m i e R n g e i r y r e t i p ) , e r e T r P ) l n i ) i r R o ( ; w . s i l r y g n ; n C o n ) v e v p l d ! o { X g g o t , ) i r i o e . v p . Y . n a e . e n d c i s t . t f t i { w v w s I a e . a t a i i m e i p e m n w c f r a r g o m r e o s a v e a a g r g , n e C w r ) g a r n l e g e ( d o p t e s C v s t e t i ) i n o . s I o a e . t . m ) a f r s ) d n s ; v . v m t i t e s f W a v a e { e g . t , i o l a l d l , s F g r u l u i y e l p ) l e u e a ) t t i r ) d e ) t ; r R p e ; . ) e u o ( v l { l e t v P a { y ) a i r y ) ; t e o e ; i w p r o e s s n r . ) ( C c ) v o a i n n { e f v w i a e g s r . W C f o o l r n i l f p d i ) . g ; c . a d n e v g a r s e I e d s s ) ) ; ) ; Then, add immediately: true to the earlier ZoomControls.js.
h a n } d l c u / } e o p / ) Z n d z r x y i ; o s a z o o : : m o t t o o t m m e o m a v v e I { V m : t i i d n i : i e e i C w e v o w w a l i w v i n e e t i n p i e : r r e c d o e w . . l k o r w e v x y y ( w t e r i : ) I ( r . e d w . z w t { , i z o e 1 1 r n o o r . . u u d o m . 1 1 e p o m r , , , d w o a I t t d 1 a e , 2 . t V , 1 i a i { , o d e n d w e p + d o r 5 t , , v i e w e r } = t h i s . p r o p s ; The result is the following behavior.
https://youtu.be/qfGo-WCQZoQ
Compared to the previous behavior, zoom and rotation are now performed immediately.
Why Instant Zoom and Rotation is Needed# I am currently developing a plugin that synchronizes zoom, scale, and rotation operations across multiple windows.
During this development, there were cases where synchronization did not work properly unless zoom, scale, and rotation operations were performed immediately.
There may be aspects that were not fully considered in this modification, but I hope to submit a pull request eventually.
Summary# We hope this serves as a useful reference for Mirador 4 plugin development.
