JSYG.ZoomAndPan

Zoom and Pan features with JSYG framework

Demo

http://yannickbochatay.github.io/JSYG.ZoomAndPan/

Installation

npm install jsyg-zoomandpan

Example with webpack/babel

import ZoomAndPan from "jsyg-zoomandpan"

let zap = new ZoomAndPan("#mySVGContainer")
zap.enable()
zap.mouseWheelZoom.enable()
zap.resizable.enable()
zap.mousePan.enable()

API

Table of Contents

• plugins
• ZoomAndPan
  • Parameters
  • Examples
  • mouseWheelZoom
  • marqueeZoom
  • resizable
  • mousePan
  • cookie
  • innerFrame
  • innerFrame
  • outerFrame
  • outerFrame
  • set
    • Parameters
  • setNode
    • Parameters
  • enabled
  • overflow
  • animate
  • animateOptions
  • scaleMin
  • scaleMax
  • minLeft
  • maxRight
  • minTop
  • maxBottom
  • bounds
  • minWidth
  • minHeight
  • maxWidth
  • maxHeight
  • onscale
  • ontranslate
  • onresize
  • onchange
  • onanimate
  • _getBounds
    • Parameters
  • enable
    • Parameters
  • disable
  • _getAdd
  • size
    • Parameters
  • transform
    • Parameters
  • scale
    • Parameters
  • translate
    • Parameters
    • Examples
  • screenTranslate
    • Parameters
    • Examples
  • scaleTo
    • Parameters
  • fitToCanvas
  • fitToWidth
  • fitToHeight
  • translateTo
    • Parameters
  • center
    • Parameters
• Cookie
  • Parameters
  • expires
  • read
  • write
  • remove
  • enable
  • disable
• MouseWheelZoom
  • Parameters
  • key
  • step
  • onstart
  • onend
  • enabled
  • wheel
    • Parameters
  • enable
    • Parameters
  • disable
• MarqueeZoom
  • Parameters
  • container
  • event
  • eventWhich
  • onstart
  • ondrag
  • onend
  • className
  • enabled
  • start
    • Parameters
  • enable
    • Parameters
  • disable
• MousePan
  • Parameters
  • event
  • eventWhich
  • className
  • classDrag
  • horizontal
  • vertical
  • onstart
  • ondrag
  • onend
  • enabled
  • _canMove
  • start
    • Parameters
  • enable
    • Parameters
  • disable
• ZapResizable
  • Parameters
  • event
  • field
  • cursor
  • horizontal
  • vertical
  • keepRatio
  • keepViewBox
  • onstart
  • onresize
  • onend
  • enabled
  • start
    • Parameters
  • enable
    • Parameters
  • disable

plugins

liste des plugins associés au zoomAndPan

ZoomAndPan

nécessite le module ZoomAndPan Gestion du zoom et panoramique d'un canvas SVG.

Parameters

• arg argument JSYG référence au canvas SVG
• opt optionnel, objet définissant les propriétés. S'il est précisé, le module sera implicitement activé. Si les modules ("mouseWheelZoom", "marqueeZoom","resizable","mousePan") sont définis à true, il seront activés avec les options par défaut.

Examples

<pre>var zap = new ZoomAndPan("svg");
zap.overflow = "auto";
zap.enable();
zap.mouseWheelZoom.key = "ctrl";
zap.mouseWheelZoom.enable();
zap.mousePan.enable();

//Equivalent à
new ZoomAndPan("svg",{
   overflow:"auto",
   mouseWheelZoom:{key:"ctrl"},
   mousePan:true
});
</pre>

Returns ZoomAndPan

mouseWheelZoom

Gestion du zoom par la molette de la souris

marqueeZoom

Gestion du zoom par tracé d'un cadre

resizable

Gestion de la taille du canvas SVG

mousePan

déplacement dans le canvas avec la souris

cookie

gestion du cookie pour mémoriser zoom et position

innerFrame

Element g permettant de gérer le zoom

innerFrame

conteneur (g) qui gère le zoom et la position du contenu

outerFrame

Element div permettant de gérer les ascenceurs (si overflow!="hidden")

outerFrame

conteneur (div) auquel est attaché le canvas SVG (si overflow!='hidden'). Cela permet de gérer des ascenceurs, qui n'existent pas en SVG.

set

définitions des options

Parameters

• options

Returns ZoomAndPan

setNode

définition du canvas SVG

Parameters

• arg argument JSYG

enabled

module actif ou non

overflow

Gestion du contenu dépassant du canvas de visualisation 'hidden' ou 'auto' ou 'scroll' (scroll-x,scroll-y)

animate

effet d'animation ou non pour le zoom et le déplacement Attention, cela nécessite une bonne carte graphique

animateOptions

Options supplémentaires d'animation

scaleMin

Echelle minimale. Si = "canvas", l'échelle minimale correspond à la taille du canvas (en tenant compte des bornes définies par la propriétés bounds ou les propriétés minLeft,maxRight,minTop,maxBottom).

scaleMax

Echelle maximale. Si = "canvas", l'échelle minimale correspond à la taille du canvas (en tenant compte des bornes définies par la propriétés bounds ou les propriétés minLeft,maxRight,minTop,maxBottom).

minLeft

Abcisse minimale au delà de laquelle on ne peut plus naviguer

maxRight

Abcisse maximale au delà de laquelle on ne peut plus naviguer

minTop

Ordonnée minimale au delà de laquelle on ne peut plus naviguer

maxBottom

Ordonnée maximale au delà de laquelle on ne peut plus naviguer

bounds

permet de définir les abcisses et ordonnées extrêmes de navigation à x pixels du bord du contenu (si la valeur est positive, on peut aller au delà du contenu).

minWidth

largeur minimale du canvas

minHeight

hauteur minimale du canvas

maxWidth

largeur maximale du canvas

maxHeight

hauteur maximale du canvas

onscale

Fonction(s) à exécuter à tout changment de zoom

ontranslate

Fonction(s) à exécuter à tout changment de position

onresize

Fonction(s) à exécuter à tout changment de taille du canvas

onchange

Fonction(s) à exécuter à tout changement

onanimate

Fonction(s) à exécuter pendant les animations

_getBounds

Renvoie la taille du contenu de la navigation (contenu + bornes définies)

Parameters

• ctm optionnel, si true renvoie la taille en tenant compte de la matrice de transformation

enable

Active la gestion du zoom et panoramique. Cette méthode insère un conteneur (propriété innerFrame) à la racine du canvas et tout le contenu y est déplacé. Les éléments créés ensuite doivent donc etre attachés à "innerFrame" et non à l'élément svg lui-meme (sauf si cela est voulu), sinon ils ne suivront pas le zoom et panoramique avec le reste. Si la propriété "overflow" est différente de "hidden", un conteneur (propriété outerFrame) div est inséré et le canvas y est attaché afin de gérer le scroll (les ascenseurs n'existent pas en SVG).

Parameters

• opt optionnel, objet définissant les options

Returns ZoomAndPan

disable

Désactivation de la gestion du zoom et panoramique

Returns ZoomAndPan

_getAdd

Ajustement nécessaire du aux ascenceurs

Returns Number

size

Renvoie (appel sans argument) ou définit la taille du canvas

Parameters

• width optionnel, largeur du canvas. Si non défini, largeur proportionnelle à la hauteur définie
• height optionnel, hauteur du canvas. Si non défini, hauteur proportionnelle à la largeur définie
• keepViewBox booléen optionnel, si true garde le cadrage après redimensionnement.

Returns ZoomAndPan si appelé avec arguments, objet avec les propriétés width et height sinon.

transform

Applique une transformation au contenu du canvas

Parameters

• mtx objet JSYG.Matrix, matrice de transformation à appliquer
• callback fonction à exécuter à la fin (équivalent à l'évènement onchange)

scale

Renvoie ou applique l'échelle (si la méthode est appelée avec des arguments).

Parameters

• scale optionnel, si défini facteur de l'échelle (multiplie l'échelle courante, ne la remplace pas).
• originX optionnel, abcisse du point fixe (centre du canvas par défaut)
• originY optionnel, ordonnee du point fixe (centre du canvas par défaut)
• callback optionnel, fonction à exécuter une fois le zoom effectué (équivalent à l'évènement onscale)

translate

Renvoie ou applique le déplacement dans le canvas (unités initiales).

Parameters

• x déplacement horizontal
• y déplacement vertical
• callback , optionnel, fonction à exécuter une fois la translation effectuée (équivalent à l'évènement ontranslate)

Examples

Si l'échelle est de 2, un déplacement horizontal de 1 déplacera visuellement le contenu de 2 pixels.

screenTranslate

déplacement dans le canvas (en pixels écran).

Parameters

• x déplacement horizontal
• y déplacement vertical
• callback optionnel, fonction à exécuter une fois la translation effectuée (équivalent à l'évènement ontranslate)

Examples

Si l'échelle est de 2, un déplacement horizontal de 1 déplacera visuellement le contenu de 1 pixel.

Returns ZoomAndPan

scaleTo

Fixe la valeur de l'échelle

Parameters

• scale valeur de l'échelle
• originX optionnel, abcisse du point fixe (centre par défaut)
• originY optionnel, ordonnée du point fixe (centre par défaut)
• callback optionnel, fonction à exécuter une fois le zoom effectué (équivalent à l'évènement onscale)

Returns ZoomAndPan

fitToCanvas

Adapte le contenu à la taille du canvas

Returns ZoomAndPan

fitToWidth

Adapte le contenu à la largeur du canvas

Returns ZoomAndPan

fitToHeight

Adapte le contenu à la hauteur du canvas

Returns ZoomAndPan

translateTo

Fixe les valeurs de la translation (point supérieur gauche)

Parameters

• x abcisse
• y ordoonée
• callback optionnel, fonction à exécuter une fois la translation effectuée (équivalent à l'évènement ontranslate)

Returns ZoomAndPan

center

définit ou fixe la position du centre du canvas (si appelé avec arguments)

Parameters

• x abcisse
• y ordoonée
• callback optionnel, fonction à exécuter une fois la translation effectuée (équivalent à l'évènement ontranslate)

Returns ZoomAndPan

Cookie

Gestion du cookie pour conservation de l'état

Parameters

• zoomAndPanObject

expires

expiration du cookie: nombre de jours à partir de la date courante, ou null pour session courante.

read

Lit le cookie et positionne le canvas en conséquence

Returns Cookie

write

Ecrit un cookie pour mémoriser l'état du canvas SVG

Returns Cookie

remove

Supprime le cookie

Returns Cookie

enable

Active le cookie

Returns Cookie

disable

Désactive le cookie

Returns Cookie

MouseWheelZoom

Gestion du zoom par molette de la souris (+ une touche spéciale éventuellement). Attention, google chrome ne permet pas d'annuler l'action par défaut pour ctrl+molette

Parameters

• zoomAndPanObject

key

Touche spéciale à maintenir enfoncée pour rendre le zoom actif ("ctrl","shift","alt")

step

Pas du zoom à chaque coup de molette

onstart

Fonction(s) à exécuter avant de zoomer

onend

Fonction(s) à exécuter après avoir zoomé

enabled

Module actif ou non

wheel

Fonction exécutée sur évènement mouseWheel

Parameters

• e

enable

Activation du module

Parameters

• opt optionnel, objet définissant les options.

Returns MouseWheelZoom

disable

Désactivation du module

Returns MouseWheelZoom

MarqueeZoom

définition du zoom par tracé d'un rectangle

Parameters

• zoomAndPanObject

container

Element SVG rect dessinant le tracé

event

Evenement déclenchant le tracé

eventWhich

Restriction à un bouton de la souris (1 bouton gauche, 2 bouton du milieu, 3 bouton droit)

onstart

Fonction(s) à exécuter au début du tracé

ondrag

Fonction(s) à exécuter pendant le tracé

onend

Fonction(s) à exécuter à la fin du tracé

className

Classe à appliquer au conteneur

enabled

Module actif ou non

start

Fonction exécutée sur l'évènement event

Parameters

• e

enable

Activation du module

Parameters

• opt optionnel, objet définissant les options

Returns MarqueeZoom

disable

Désactivation du module

Returns MarqueeZoom

MousePan

Gestion du panoramique (navigation façon googlemaps)

Parameters

• zoomAndPanObject

event

Evènement déclenchant le panoramique

eventWhich

Restriction à un bouton de la souris (1 bouton gauche, 2 bouton du milieu, 3 bouton droit)

className

Classe à appliquer quand le module est actif.

classDrag

Classe à appliquer pendant le cliquer/glisser.

horizontal

déplacement horizontal

vertical

déplacement vertical

onstart

Fonction(s) à exécuter au début du cliquer/glisser

ondrag

Fonction(s) à exécuter pendant le cliquer/glisser

onend

Fonction(s) à exécuter à la fin du cliquer/glisser

enabled

Module actif ou non

_canMove

Teste si un déplacement est possible ou non (selon l'échelle)

start

Fonction exécutée sur l'évènement défini

Parameters

• e Event

enable

Activation du module

Parameters

• opt optionnel, objet définissant les options

Returns MousePan

disable

Désactivation du module

Returns MousePan

ZapResizable

Redimensionnement du canvas à la souris

Parameters

• zoomAndPanObject

event

Evènement déclenchant le redimensionnement

field

Elément déclenchant le redimensionnement. La valeur "defaut" insère une image dans le coin inférieur droit.

cursor

Curseur à appliquer à l'élément pendant le cliquer/glisser

horizontal

Redimensionnement horizontal

vertical

Redimensionnement vertical

keepRatio

Maintien des proportions

keepViewBox

Maintien de la partie visible

onstart

Fonction(s) à exécuter au début du cliquer/glisser

onresize

Fonction(s) à exécuter pendant cliquer/glisser

onend

Fonction(s) à exécuter à la fin du cliquer/glisser

enabled

Module actif ou non

start

Fonction exécutée sur l'évènement défini

Parameters

• e

enable

Activation du module

Parameters

• opt optionnel, objet définissant les options

Returns ZapResizable

disable

Désactivation du module