Classifier: SVGPoint deprecated, replacement needed

[shaunanoordin]

Code Update (Refactor?) Required

Package: lib-classifier Follows #2255

Context: while refactoring how the classifier passes svg references around with the SVGContext, @eatyourgreens noticed that a necessary component of our svg-related calculations is now out of date and in danger of no longer being supported.

Overview:

• SVGPoint has been deprecated by modern browsers and a replacement is needed.
• SVGPoint is used by the Classifier's 'InteractionLayer' component and 'draggable' class to convert event coordinates (i.e. DOM coordinates) to SVG coordinates (i.e. where the user clicked on the Subject image)

Further Reading:

• MDN documentation for SVGPoint, indicating its deprecation

Dev Notes

SVGPoints are used in two locations in lib-classifier:

• InteractionLayer.js - used by drawing tasks, and is the layer "on top" of the Subject image where drawing marks appear.
• draggable.js - base class used to implement the "drag-to-move", "drag-to-resize", "drag-to-rotate" interactions used by various drawing-related components.

In InteractionLayer.js for example, we have this code:

function getEventOffset(event) {
  const svgPoint = svg.createSVGPoint()
  svgPoint.x = event.clientX
  svgPoint.y = event.clientY
  const svgEventOffset = svgPoint.matrixTransform(getScreenCTM().inverse())
  return svgEventOffset
}

// For context, getScreenCTM() belongs to the main transform layer, aka the <g> element that contains the transform ops performed on the subject image + its annotations (the InteractionLayer).

SVGPoint's .matrixTransform() is basically the lynchpin that automagically transmogrifies event coordinates/DOM coordinates to SVG-relative coordinates.

If all else fails, I think it's possible to reverse-engineer the matrix transformation calculations. mainTransformLayer.getScreenCTM() still works and returns a DOMMatrix with all the necessary values that someone smarter than me can mathemagically figure out.

Surely this is solvable. I mean... it's just a matrix, right?

Notes to self:

• A quick scan of the most recent article (Dec 2020) I could find on the topic of DOM-SVG coordinate transformations still uses SVGPoint, so time to dig deeper into Stackoverflow.

Status

Solution requires research.

At the moment, our Classifier continues to work, and there are no indications that modern browsers are going to pull out SVGPoint support any time soon, but that "deprecation alarm" is unsettling enough as is.

[shaunanoordin]

Copy-pasting some new comments I made in 2255:

...right now the Classifier is passing around <svg> and <g id="transformation_layer">.getScreenCTM() via SVGContext. (See: SingleImageViewer.js)

That might be a bit confusing because it's passing the reference to one element, and the function to a DIFFERENT element.

It might make a bit more sense for the SVGContext to instead pass around <svg> and <g id="transformation_layer"> instead (i.e. two references to different elements) for consistency; this would make it super clear to the context-consuming components (i.e. draggable.js, InteractionLayer.js) which element it's pulling getScreenCTM() from.

[eatyourgreens]

const svgPoint = new DOMPoint(x,y)
const eventOffset = svgPoint(getScreenCTM(). Inverse())

might be worth trying.

[shaunanoordin]

(Accidentally posted this in https://github.com/zooniverse/front-end-monorepo/issues/2273#issuecomment-869997664 instead of this Issue, whoops.)

DOMPoint might be IS a valid replacement for SVGPoint! This class also has the matrixTransform() function... I think... it's just really poorly documented.

• DOMPointReadOnly mentions matrixTransform as a method: https://developer.mozilla.org/en-US/docs/Web/API/DOMPointReadOnly
• DOMMatrix has an example: https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix/DOMMatrix

  var point = new DOMPoint(5, 4);  // Note: you can set this later using point.x = 5 ; point.y = 4
  var scaleX = 2;
  var scaleY = 3;
  var translateX = 12;
  var translateY = 8;
  var angle = Math.PI / 2;
  var matrix = new DOMMatrix([
    Math.sin(angle) * scaleX,
    Math.cos(angle) * scaleX,
    -Math.sin(angle) * scaleY,
    Math.cos(angle) * scaleY,
    translateX,
    translateY
  ]);
  var transformedPoint = point.matrixTransform(matrix);

• Compatibility looks good for Chrome, FF, Safari (11+): https://caniuse.com/?search=DOMPoint%20matrixTransform

[shaunanoordin]

Resolved by #2277