fix(imageviewer): position independent from parent

By using a Portal the position of the ImageViewer no longer depends on its parent component.
snek-at · Aug 22, 2021 · 8262e11 · 8262e11
1 parent 43bcd62
commit 8262e11
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 88 deletions.
diff --git a/packages/snek-finder/src/components/organisms/ImageViewer/ImageViewer.stories.tsx b/packages/snek-finder/src/components/organisms/ImageViewer/ImageViewer.stories.tsx
@@ -1,5 +1,4 @@
 import {Meta, Story} from '@storybook/react'
-import React from 'react'
 
 import ImageViewer, {ImageViewerProps} from '.'
 

diff --git a/packages/snek-finder/src/components/organisms/ImageViewer/index.tsx b/packages/snek-finder/src/components/organisms/ImageViewer/index.tsx
@@ -7,6 +7,7 @@ import {
   Flex,
   HStack,
   IconButton,
+  Portal,
   Spacer,
   Text,
   useColorModeValue
@@ -29,94 +30,93 @@ const ImageViewer: React.FC<ImageViewerProps> = props => {
   const [scale, setScale] = useState(1)
 
   return (
-    <Box pos="absolute" top={0}>
-      <TransformWrapper
-        initialScale={scale}
-        doubleClick={{disabled: true}}
-        onZoom={ref => {
-          setScale(ref.state.scale)
-        }}
-        minScale={0.5}
-        maxScale={8}>
-        {({zoomIn, zoomOut, resetTransform, ...rest}) => (
-          <>
-            <Flex
-              direction="column"
-              overflow="hidden"
-              h="100vh"
-              w="100%"
-              pos="fixed">
-              <HStack
-                borderBottom="solid 1px"
-                bg={bg}
-                borderColor={borderColor}
-                pb={3}
-                pt={3}
-                pr={2}
-                h={'7.5vh'}
-                zIndex={999}>
-                <Flex width="100%">
-                  <Spacer />
-                  <HStack>
-                    <Button onClick={props.onOpenStudio}>Snek Studio</Button>
-                    <Divider orientation="vertical" />
-                    <Text
-                      fontSize="xs"
-                      minW={35}
-                      textAlign="center"
-                      userSelect="none">
-                      {Math.round(scale * 100)}%
-                    </Text>
-                    <IconButton
-                      aria-label="a"
-                      icon={<FaSearchPlus />}
-                      opacity={scale === 8 ? 0.5 : 1}
-                      // onClick={() => onSetScale(1)}
-                      onClick={() => {
-                        zoomIn()
-                        if (scale + 0.2 > 8) {
-                          setScale(8)
-                        } else {
-                          setScale(scale + 0.2)
-                        }
-                      }}
-                    />
-                    <IconButton
-                      aria-label="a"
-                      icon={<FaSearchMinus />}
-                      opacity={scale === 0.5 ? 0.5 : 1}
-                      // onClick={() => onSetScale(0)}
-                      onClick={() => {
-                        zoomOut()
+    <Portal>
+      <Box pos="absolute" top={0} zIndex="popover" w="full" h="full">
+        <TransformWrapper
+          initialScale={scale}
+          doubleClick={{disabled: true}}
+          onZoom={ref => {
+            setScale(ref.state.scale)
+          }}
+          minScale={0.5}
+          maxScale={8}>
+          {({zoomIn, zoomOut, resetTransform, ...rest}) => (
+            <>
+              <Flex
+                direction="column"
+                overflow="hidden"
+                left={0}
+                top={0}
+                h="100%"
+                w="100%"
+                pos="absolute">
+                <HStack
+                  borderBottom="solid 1px"
+                  bg={bg}
+                  borderColor={borderColor}
+                  pb={3}
+                  pt={3}
+                  pr={2}
+                  h={'7.5vh'}
+                  zIndex={999}>
+                  <Flex width="100%">
+                    <Spacer />
+                    <HStack>
+                      <Button onClick={props.onOpenStudio}>Snek Studio</Button>
+                      <Divider orientation="vertical" />
+                      <Text
+                        fontSize="xs"
+                        minW={35}
+                        textAlign="center"
+                        userSelect="none">
+                        {Math.round(scale * 100)}%
+                      </Text>
+                      <IconButton
+                        aria-label="a"
+                        icon={<FaSearchPlus />}
+                        opacity={scale === 8 ? 0.5 : 1}
+                        // onClick={() => onSetScale(1)}
+                        onClick={() => {
+                          zoomIn()
+                          if (scale + 0.2 > 8) {
+                            setScale(8)
+                          } else {
+                            setScale(scale + 0.2)
+                          }
+                        }}
+                      />
+                      <IconButton
+                        aria-label="a"
+                        icon={<FaSearchMinus />}
+                        opacity={scale === 0.5 ? 0.5 : 1}
+                        // onClick={() => onSetScale(0)}
+                        onClick={() => {
+                          zoomOut()
 
-                        if (scale - 0.2 < 0.5) {
-                          setScale(0.5)
-                        } else {
-                          setScale(scale - 0.2)
-                        }
-                      }}
-                    />
-                    <CloseButton onClick={props.onClose} />
-                  </HStack>
-                </Flex>
-              </HStack>
-              <Box bg="rgba(0,0,0,0.6)" flex="1">
-                {/* <div className="tools">
-                  <button onClick={() => zoomIn()}>+</button>
-                  <button onClick={() => zoomOut()}>-</button>
-                  <button onClick={() => resetTransform()}>x</button>
-                </div> */}
-                <Center>
-                  <TransformComponent>
-                    <img src={props.src} alt="test" />
-                  </TransformComponent>
-                </Center>
-              </Box>
-            </Flex>
-          </>
-        )}
-      </TransformWrapper>
-    </Box>
+                          if (scale - 0.2 < 0.5) {
+                            setScale(0.5)
+                          } else {
+                            setScale(scale - 0.2)
+                          }
+                        }}
+                      />
+                      <CloseButton onClick={props.onClose} />
+                    </HStack>
+                  </Flex>
+                </HStack>
+                <Box bg="rgba(0,0,0,0.6)" flex="1">
+                  <Center>
+                    <TransformComponent>
+                      <img src={props.src} alt="test" />
+                    </TransformComponent>
+                  </Center>
+                </Box>
+              </Flex>
+            </>
+          )}
+        </TransformWrapper>
+      </Box>
+    </Portal>
   )
 }