event.detail.p should be a SVG.Point

[dotnetCarpenter]

While creating an answer for https://stackoverflow.com/questions/59585107/how-do-i-draw-an-svg-polyline-with-45-degree/59652093#59652093, I found that all events emit a SVGPoint as p and not a SVG.Point.

The SVG.Point has the clone()method which is very useful when you want to store a point from an event for later use. Currently you will get a reference to the SVGPoint which changes with mousemove.

As an example:

let point
rect.on('drawstart', event => {
  point = event.detail.p
})

In the above snippet point will always update as the mouse moves because it is a reference.

The work-around is to get the primitive values and store them instead. As shown here:

const point = {x:0,y:0}
rect.on('drawstart', event => {
  const {x,y} = event.detail.p
  point.x = x
  point.y = y
})

But it would be much nicer if one could just use the clone() method. As in this example:

let point
rect.on('drawstart', event => {
  point = event.detail.p.clone()
})