[DRAFT] lib-classifier: refactor single image viewer pan and zoom with context

packages/lib-classifier/src/components/Classifier/components/ImageToolbar/components/ZoomInButton/ZoomInButtonContainer.js

@@ -3,23 +3,25 @@ import { useState } from 'react'
 import PropTypes from 'prop-types'
 
 import { useStores } from '@hooks'
+import { usePanZoom } from '@plugins/drawingTools/shared/PanZoomContext'
+
 import ZoomInButton from './ZoomInButton'
 
 function storeMapper(classifierStore) {
   const {
-    disableImageToolbar,
-    zoomIn
+    disableImageToolbar
   } = classifierStore.subjectViewer
 
   return {
-    disabled: disableImageToolbar,
-    zoomIn
+    disabled: disableImageToolbar
   }
 }
 
 function ZoomInButtonContainer({ separateFrameZoomIn }) {
-  const { disabled, zoomIn } = useStores(storeMapper)
+  const { disabled } = useStores(storeMapper)
+  const { zoomIn } = usePanZoom()
   const [timer, setTimer] = useState('')
+
   const zoomCallback = separateFrameZoomIn || zoomIn
 
   function onClick() {

packages/lib-classifier/src/components/Classifier/components/ImageToolbar/components/ZoomOutButton/ZoomOutButtonContainer.js

@@ -3,22 +3,23 @@ import { useState } from 'react'
 import PropTypes from 'prop-types'
 
 import { useStores } from '@hooks'
+import { usePanZoom } from '@plugins/drawingTools/shared/PanZoomContext'
+
 import ZoomOutButton from './ZoomOutButton'
 
 function storeMapper(classifierStore) {
   const {
-    disableImageToolbar,
-    zoomOut
+    disableImageToolbar
   } = classifierStore.subjectViewer
 
   return {
-    disabled: disableImageToolbar,
-    zoomOut
+    disabled: disableImageToolbar
   }
 }
 
 function ZoomOutButtonContainer({ separateFrameZoomOut }) {
-  const { disabled, zoomOut } = useStores(storeMapper)
+  const { disabled } = useStores(storeMapper)
+  const { zoomOut } = usePanZoom()
   const [timer, setTimer] = useState('')
   const zoomCallback = separateFrameZoomOut || zoomOut
 

packages/lib-classifier/src/components/Classifier/components/Layout/Layout.js

@@ -1,6 +1,7 @@
 import { observer } from 'mobx-react'
 
 import { useStores } from '@hooks'
+import { PanZoomProvider } from '@plugins/drawingTools/shared/PanZoomContext'
 import getLayout from './helpers/getLayout'
 
 function storeMapper(classifierStore) {
@@ -19,7 +20,13 @@ function Layout() {
   // `getLayout()` will always return the default layout as a fallback
   const { layout, separateFramesView } = useStores(storeMapper)
   const CurrentLayout = getLayout(layout)
-  return <CurrentLayout separateFramesView={separateFramesView} />
+  return (
+    <PanZoomProvider>
+      <CurrentLayout
+        separateFramesView={separateFramesView}
+      />
+    </PanZoomProvider>
+  ) 
 }
 
 export default observer(Layout)

packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/DataImageViewer/DataImageViewer.js

@@ -6,9 +6,12 @@ import {
   Grid
 } from 'grommet'
 import { withParentSize } from '@visx/responsive'
+
+import { usePanZoom } from '@plugins/drawingTools/shared/PanZoomContext'
+import getZoomBackgroundColor from '@viewers/helpers/getZoomBackgroundColor'
+
 import ScatterPlotViewer from '../ScatterPlotViewer'
 import { SingleImageViewerContainer } from '../SingleImageViewer'
-import getZoomBackgroundColor from '@viewers/helpers/getZoomBackgroundColor'
 
 const StyledBox = styled(Box)`
   position: relative;
@@ -48,11 +51,10 @@ const DataImageViewer = forwardRef(function DataImageViewer({
   resetView = DEFAULT_HANDLER,
   rotation = 0,
   setAllowPanZoom = DEFAULT_HANDLER,
-  setOnPan = DEFAULT_HANDLER,
-  setOnZoom = DEFAULT_HANDLER,
   theme = DEFAULT_THEME,
   zoomConfiguration
 }, ref) {
+  const { setOnPan, setOnZoom } = usePanZoom()
   const {
     dark,
     global: {
@@ -133,8 +135,6 @@ const DataImageViewer = forwardRef(function DataImageViewer({
                 imageLocation
               ]
             }}
-            setOnPan={setOnPan}
-            setOnZoom={setOnZoom}
             zoomControlFn={(zoomEnabled.image) ? () => disableImageZoom() : () => setAllowPanZoom('image')}
             zooming={zoomEnabled.image}
           />}
@@ -158,8 +158,6 @@ DataImageViewer.propTypes = {
   resetView: PropTypes.func,
   rotation: PropTypes.number,
   setAllowPanZoom: PropTypes.func,
-  setOnPan: PropTypes.func,
-  setOnZoom: PropTypes.func,
   theme: PropTypes.object
 }
 

packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/DataImageViewer/DataImageViewer.stories.js

@@ -3,6 +3,7 @@ import { Factory } from 'rosie'
 import { Provider } from 'mobx-react'
 import asyncStates from '@zooniverse/async-states'
 
+import { PanZoomProvider } from '@plugins/drawingTools/shared/PanZoomContext'
 import DataImageViewer from './index.js'
 import ImageToolbar from '../../../ImageToolbar'
 import SubjectViewerStore from '@store/SubjectViewerStore'
@@ -33,7 +34,9 @@ function ViewerContext ({
 }) {
   return (
     <Provider classifierStore={store}>
-      {children}
+      <PanZoomProvider>
+        {children}
+      </PanZoomProvider>
     </Provider>
   )
 }

packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/DataImageViewer/DataImageViewerConnector.js

@@ -10,9 +10,7 @@ function storeMapper(classifierStore) {
       enableRotation,
       move,
       resetView,
-      rotation,
-      setOnZoom,
-      setOnPan
+      rotation
     }
   } = classifierStore
 
@@ -21,8 +19,6 @@ function storeMapper(classifierStore) {
     move,
     resetView,
     rotation,
-    setOnZoom,
-    setOnPan,
     subject
   }
 }

packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/FlipbookViewer/FlipbookViewer.js

@@ -23,8 +23,6 @@ const FlipbookViewer = ({
   onReady = DEFAULT_HANDLER,
   playIterations,
   rotation,
-  setOnPan = DEFAULT_HANDLER,
-  setOnZoom = DEFAULT_HANDLER,
   subject
 }) => {
   const [currentFrame, setCurrentFrame] = useState(defaultFrame)
@@ -81,8 +79,6 @@ const FlipbookViewer = ({
         naturalWidth={naturalWidth}
         onKeyDown={handleSpaceBar}
         rotation={rotation}
-        setOnPan={setOnPan}
-        setOnZoom={setOnZoom}
         src={viewerLocation?.url}
         subject={subject}
         subjectId={subject?.id}
@@ -123,10 +119,6 @@ FlipbookViewer.propTypes = {
   playIterations: PropTypes.number,
   /** Passed from the subject viewer store. Needed in SingleImageViewer to handle transforming (rotating) the image */
   rotation: PropTypes.number,
-  /** Passed from the Subject Viewer Store */
-  setOnPan: PropTypes.func,
-  /** Passed from the Subject Viewer Store */
-  setOnZoom: PropTypes.func,
   /** Required. Passed from SubjectViewer component */
   subject: PropTypes.shape({
     locations: PropTypes.arrayOf(locationValidator)

packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/FlipbookViewer/FlipbookViewer.stories.js

@@ -1,8 +1,11 @@
+import asyncStates from '@zooniverse/async-states'
 import { Box } from 'grommet'
 import { Provider } from 'mobx-react'
+
+import { PanZoomProvider } from '@plugins/drawingTools/shared/PanZoomContext'
+
 import mockStore from '@test/mockStore'
 import { SubjectFactory, WorkflowFactory } from '@test/factories'
-import asyncStates from '@zooniverse/async-states'
 
 import FlipbookViewerContainer from './FlipbookViewerContainer'
 
@@ -32,33 +35,43 @@ const mockSubject = SubjectFactory.build({
   ]
 })
 
+const ViewerContext = ({ store, children }) => {
+  return (
+    <Provider classifierStore={store}>
+      <PanZoomProvider>
+        {children}
+      </PanZoomProvider>
+    </Provider>
+  )
+}
+
 const store = mockStore({
   subject: mockSubject
 })
 
 export const Default = () => {
   return (
-    <Provider classifierStore={store}>
+    <ViewerContext store={store}>
       <Box width='large'>
         <FlipbookViewerContainer
           loadingState={asyncStates.success}
           subject={store.subjects.active}
         />
       </Box>
-    </Provider>
+    </ViewerContext>
   )
 }
 
 export const StyledSmallerWidth = () => {
   return (
-    <Provider classifierStore={store}>
+    <ViewerContext store={store}>
       <Box width='499px'>
         <FlipbookViewerContainer
           loadingState={asyncStates.success}
           subject={store.subjects.active}
         />
       </Box>
-    </Provider>
+    </ViewerContext>
   )
 }
 
@@ -92,14 +105,14 @@ const storeWithDefaultFrame = mockStore({
 
 export const WithDefaultFrame = () => {
   return (
-    <Provider classifierStore={storeWithDefaultFrame}>
+    <ViewerContext store={storeWithDefaultFrame}>
       <Box width='large'>
         <FlipbookViewerContainer
           loadingState={asyncStates.success}
           subject={storeWithDefaultFrame.subjects.active}
         />
       </Box>
-    </Provider>
+    </ViewerContext>
   )
 }
 
@@ -116,14 +129,14 @@ const storeWithFiveIterationWorkflow = mockStore({
 
 export const FivePlayIterations = () => {
   return (
-    <Provider classifierStore={storeWithFiveIterationWorkflow}>
+    <ViewerContext store={storeWithFiveIterationWorkflow}>
       <Box width='large'>
         <FlipbookViewerContainer
           loadingState={asyncStates.success}
           subject={storeWithFiveIterationWorkflow.subjects.active}
         />
       </Box>
-    </Provider>
+    </ViewerContext>
   )
 }
 
@@ -140,14 +153,14 @@ const storeWithInfiniteIterationWorkflow = mockStore({
 
 export const InfiniteIterations = () => {
   return (
-    <Provider classifierStore={storeWithInfiniteIterationWorkflow}>
+    <ViewerContext store={storeWithInfiniteIterationWorkflow}>
       <Box width='large'>
         <FlipbookViewerContainer
           loadingState={asyncStates.success}
           subject={storeWithInfiniteIterationWorkflow.subjects.active}
         />
       </Box>
-    </Provider>
+    </ViewerContext>
   )
 }
 
@@ -165,14 +178,14 @@ const storeWithAutoplayWorkflow = mockStore({
 
 export const Autoplay = () => {
   return (
-    <Provider classifierStore={storeWithAutoplayWorkflow}>
+    <ViewerContext store={storeWithAutoplayWorkflow}>
       <Box width='large'>
         <FlipbookViewerContainer
           loadingState={asyncStates.success}
           subject={storeWithAutoplayWorkflow.subjects.active}
         />
       </Box>
-    </Provider>
+    </ViewerContext>
   )
 }
 
@@ -188,23 +201,23 @@ const storeWithSwitchToSeparateFrames = mockStore({
 
 export const WithViewModeButton = () => {
   return (
-    <Provider classifierStore={storeWithSwitchToSeparateFrames}>
+    <ViewerContext store={storeWithSwitchToSeparateFrames}>
       <Box width='large'>
         <FlipbookViewerContainer
           loadingState={asyncStates.success}
           subject={storeWithSwitchToSeparateFrames.subjects.active}
         />
       </Box>
-    </Provider>
+    </ViewerContext>
   )
 }
 
 export const NoSubject = () => {
   return (
-    <Provider classifierStore={store}>
+    <ViewerContext store={store}>
       <Box width='large'>
         <FlipbookViewerContainer loadingState={asyncStates.success} />
       </Box>
-    </Provider>
+    </ViewerContext>
   )
 }

packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/FlipbookViewer/FlipbookViewerContainer.js

@@ -15,9 +15,7 @@ function storeMapper(store) {
     invert,
     move,
     rotation,
-    separateFramesView,
-    setOnPan,
-    setOnZoom
+    separateFramesView
   } = store.subjectViewer
 
   const {
@@ -35,9 +33,7 @@ function storeMapper(store) {
     move,
     playIterations,
     rotation,
-    separateFramesView,
-    setOnPan,
-    setOnZoom
+    separateFramesView
   }
 }
 
@@ -59,9 +55,7 @@ function FlipbookViewerContainer({
     move,
     playIterations,
     rotation,
-    separateFramesView,
-    setOnPan,
-    setOnZoom
+    separateFramesView
   } = useStores(storeMapper)
 
   const { onKeyZoom } = useKeyZoom(rotation)
@@ -106,8 +100,6 @@ function FlipbookViewerContainer({
           onReady={onReady}
           playIterations={playIterations}
           rotation={rotation}
-          setOnPan={setOnPan}
-          setOnZoom={setOnZoom}
           subject={subject}
         />
       )}