svgdotjs/svg.js

Migrating SVG window events

cyberwombat opened this issue · 6 comments

Migrating to 3.x and running into error with:

 SVG.on(window, 'mousemove.drag', (e: any) => {
      this.drag(e)
    })

I see now that the events only exist on SVG elements but not clear how the window object would be used in this case. Not seeing much in the docs regarding this? Would I need to define an outer full page container and make that an SVG element?

The code should work and should execute on all mousemove events. I cant tell what your problem is from what you wrote. Do you have a minimal example?

Oh interesting. Well let's see if perhaps you can tell from this. I import like this:

import {
  SVG,
  extend as SVGextend,
  Element as SVGElement,
  Text,
  Point,
  PathArray,
} from '@svgdotjs/svg.js'

And TS gives me this:
Screenshot 2023-07-24 at 11 59 59 AM

Oh I see the issue...

import SVG, {
  extend as SVGextend,
  Element as SVGElement,
  Text,
  Point,
  PathArray,
} from '@svgdotjs/svg.js'

duh...

I was premature. Error went away in intellisense but now throws when using esbuild with:

No matching export in "node_modules/@svgdotjs/svg.js/dist/svg.esm.js" for import "default"

    src/file.ts:2:7:
      2 │ import SVG, {
        ╵        ~~~

Will try to create an example. Reopening for now

SVG.on is the syntax if you import the WHOLE thing.

This is only available if you do import * as SVG from '@svgdotjs/svg.js'.
Instead import on directly: import { on } from '@svgdotjs/svg.js'.

Thank you. Works like a charm. I appreciate your work and your quick response!