How to use panzoom with svg.js in npm about svg.panzoom.js

[fatihsevuk]

In typescript-angular project I added svgjs in my component as import ,
how can ı add svg.panzoom.js ?

[jfbourne]

I got it to work as follow:

declare var SVG: any;
import 'svgjs';
import 'svg.panzoom.js';

Thanks for your help. @dnldsht didn't work for me the first time because I was declaring after the imports.

[Fuzzyma]

npm install svg.js svg.panzoom.js?

[inanisvitae]

yes, but how to use it with svg.js?
for example:
import svg from 'svg.js';
and then what?

[Fuzzyma]

as far as i know import is no node specific syntax.
In order to have working plugins you need SVG.js as a global. When you use webpack you can shim the modules in thsi case.

The other way is just to keep SVG.js as global by using

SVG = require('svg.js')
require('svg.panzoom.js')

[inanisvitae]

i was referring to the import in es2015. It will need babel, but thanks

[Fuzzyma]

Experience shows that imports like this do not create a global. That's why the require syntax is needed

[dnldsht]

@fthsvk I've added them in my angular-cli file like this

"scripts": [
 "../node_modules/svg.js/dist/svg.min.js",
 "../node_modules/svg.panzoom.js/dist/svg.panzoom.min.js"
],

and referenced them in components

import etc, 
...
declare var SVG: any;
export class MyComponent implements OnInit {
...
 ngOnInit() {
  SVG('myId').panZoom()
 }
...
}

[iongion]

With es6, I do like this and they work just fine:

import SVG from 'svg.js';
import 'svg.draggy.js';
import 'svg.connectable.js';
import 'svg.foreignobject.js';
import 'svg.panzoom.js';

[jfbourne]

Any idea how to use this with Ionic ES6? None of the approach above work. When I do .panZoom() it tells me is not found although I have already imported it.

import 'svg.js';
import 'svg.panzoom.js';

declare var SVG: any;

when I do console.log(SVG), SVG is there but .panZoom

[Fuzzyma]

Please look at the post before yours. It seems like import SVG from 'svg.js' works just fine while yours don't.
If this also does not work for you, add SVG to the global space with global. SVG = SVG. You have to do that before importing any other plug in

[jfbourne]

@Fuzzyma thanks for your quick reply.
I tried your suggestion and it's still not working. I approached it multiple ways:

const globalAny:any = global;
import SVG from 'svg.js'
globalAny.SVG = SVG;
import 'svg.panzoom.js';

or

const globalAny:any = global;
globalAny.SVG = SVG;
import SVG from 'svg.js'
import 'svg.panzoom.js';

and

const windowAny:any = window;
import SVG from 'svg.js'
windowAny.SVG = SVG;
import 'svg.panzoom.js';

or

const windowAny:any = window;
windowAny.SVG = SVG;
import SVG from 'svg.js'
import 'svg.panzoom.js';

all approaches result in: Property 'panZoom' does not exist on type 'Doc'.

I also tried without the Global

[Fuzzyma]

Is only typescript complaining about that or is the code complaining (when transpiled to js). We do not have any extra typings for the plugins so typescript does not know anything about the methods a plugin added

If really the code complains, you can Try SVG = require(...) (note the missing var)

[Rubinhuang9239]

I am also getting Property 'panZoom' does not exist on type 'Doc'.
By following @jfbourne 's post above:
I got error SVG(...).attr(...).size(...).panZoom is not a function
Seems panZoom was not added to the svg.Doc.

My TS code for the svg panzoom:

this.draw = SVG(ParentDom).attr('id','SVG2D').size(
      "100%",
      "100%"
    ).panZoom({zoomMin: 0.5, zoomMax: 20});

[Fuzzyma]

@Rubinhuang9239 please use matching versions. There is a version for svg.js v2.x and one for svg.js v3.x

[Rubinhuang9239]

@Fuzzyma thanks!
Lol, that's my bad! I made it work now.