DRY up SVG event-handling functions

zooniverse · Dec 19, 2024 · cbaea41 · cbaea41
1 parent 05aaf2c
commit cbaea41
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 33 deletions.
diff --git a/...nents/Classifier/components/SubjectViewer/components/InteractionLayer/InteractionLayer.js b/...nents/Classifier/components/SubjectViewer/components/InteractionLayer/InteractionLayer.js
@@ -4,6 +4,7 @@ import { useContext, useRef, useState } from 'react';
 import styled, { css } from 'styled-components'
 
 import SVGContext from '@plugins/drawingTools/shared/SVGContext'
+import { convertEvent } from '@plugins/drawingTools/components/draggable/draggable'
 import DrawingToolMarks from './components/DrawingToolMarks'
 import TranscribedLines from './components/TranscribedLines'
 import SubTaskPopup from './components/SubTaskPopup'
@@ -26,38 +27,6 @@ function cancelEvent(event) {
   event.stopPropagation()
 }
 
-function createPoint(event) {
-  const { clientX, clientY } = event
-  // SVG 2 uses DOMPoint
-  if (window.DOMPointReadOnly) {
-    return new DOMPointReadOnly(clientX, clientY)
-  }
-  // jsdom doesn't support SVG
-  return {
-    x: clientX,
-    y: clientY
-  }
-}
-
-function getEventOffset(event, canvas) {
-  const svgPoint = createPoint(event)
-  const svgEventOffset = svgPoint.matrixTransform
-    ? svgPoint.matrixTransform(canvas.getScreenCTM().inverse())
-    : svgPoint
-  return svgEventOffset
-}
-
-function convertEvent(event, canvas) {
-  const svgEventOffset = getEventOffset(event, canvas)
-  const svgCoordinateEvent = {
-    type: event.type,
-    x: svgEventOffset.x,
-    y: svgEventOffset.y
-  }
-
-  return svgCoordinateEvent
-}
-
 function InteractionLayer({
   activeMark,
   activeTool,

diff --git a/packages/lib-classifier/src/plugins/drawingTools/components/draggable/draggable.js b/packages/lib-classifier/src/plugins/drawingTools/components/draggable/draggable.js
@@ -22,7 +22,7 @@ function getEventOffset(event, canvas) {
   return svgEventOffset
 }
 
-function convertEvent(event, canvas) {
+export function convertEvent(event, canvas) {
   const svgEventOffset = getEventOffset(event, canvas)
   const svgCoordinateEvent = {
     type: event.type,