reset zoom buttons

sites/shared/components/workbench/pan-zoom-pattern.mjs

@@ -1,12 +1,14 @@
 // Dependencies
-import { forwardRef } from 'react'
+import { forwardRef, useState, useContext, useEffect } from 'react'
 // Hooks
 import { useTranslation } from 'next-i18next'
 // Context
+import { PanZoomContext } from 'shared/components/workbench/pattern/pan-zoom-context.mjs'
 // Components
 import { SizeMe } from 'react-sizeme'
 import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'
 import { Pattern } from 'pkgs/react-components/src/index.mjs'
+import { ClearIcon } from 'shared/components/icons.mjs'
 
 export const ns = ['workbench']
 
@@ -34,6 +36,7 @@ export const PanZoomPattern = forwardRef((props, ref) => {
   const { t } = useTranslation(ns)
 
   const { renderProps = false, components = {} } = props
+  const { zoomed, onTransformed, setZoomFunctions } = useContext(PanZoomContext)
 
   if (!renderProps) return null
 
@@ -44,12 +47,25 @@ export const PanZoomPattern = forwardRef((props, ref) => {
           minScale={0.1}
           centerZoomedOut={true}
           wheel={{ activationKeys: ['Control'] }}
+          doubleClick={{ mode: 'reset' }}
+          onTransformed={onTransformed}
         >
-          <TransformComponent>
-            <div style={{ width: size.width + 'px' }} className="max-h-screen">
-              <Pattern {...{ t, components, renderProps }} ref={ref} />
-            </div>
-          </TransformComponent>
+          {({ resetTransform, zoomIn, zoomOut, instance }) => {
+            useEffect(() => {
+              if (typeof setZoomFunctions === 'function') {
+                setZoomFunctions({ resetTransform, zoomIn, zoomOut })
+                console.log('setting')
+              }
+            }, [])
+
+            return (
+              <TransformComponent>
+                <div style={{ width: size.width + 'px' }} className="max-h-screen">
+                  <Pattern {...{ t, components, renderProps }} ref={ref} />
+                </div>
+              </TransformComponent>
+            )
+          }}
         </TransformWrapper>
       )}
     </SizeMe>