feat(devtools-client): add zoom to devtools

Author: henri-hulski

packages/overmind-devtools-client/src/components/ActionSelector/styles.ts

@@ -79,8 +79,6 @@ export const resultWrapper = css({
   overflowY: 'auto',
   left: 0,
   backgroundColor: colors.border,
-  borderBottomLeftRadius: 3,
-  borderBottomRightRadius: 3,
   zIndex: 2,
 })
 

packages/overmind-devtools-client/src/components/App/index.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { ZoomProvider, useZoom } from '../common/ZoomContext'
+import * as styles from './styles'
+import Workspace from '../Workspace'
+
+// Wrapper component that applies the zoom level
+const ZoomableContainer: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const { zoomLevel } = useZoom()
+
+  return <div className={styles.container(zoomLevel)}>{children}</div>
+}
+
+const App: React.FC = () => {
+  return (
+    <ZoomProvider>
+      <ZoomableContainer>
+        <Workspace />
+      </ZoomableContainer>
+    </ZoomProvider>
+  )
+}
+
+export default App

packages/overmind-devtools-client/src/components/App/styles.ts

@@ -0,0 +1,17 @@
+import { css } from 'emotion'
+import { colors } from '../../theme'
+
+export const container = (zoomLevel: number) =>
+  css({
+    height: `calc(100vh / ${zoomLevel})`,
+    width: `calc(100vw / ${zoomLevel})`,
+    overflow: 'auto',
+    transform: `scale(${zoomLevel})`,
+    transformOrigin: 'top left',
+    transition: 'transform 0.1s ease',
+    scrollbarColor: `rgba(121, 121, 121, 0.4) ${colors.foreground}`,
+    scrollbarWidth: 'thin',
+    ':hover': {
+      scrollbarColor: `rgba(100, 100, 100, 0.7) ${colors.foreground}`,
+    },
+  })

packages/overmind-devtools-client/src/components/Devtools/index.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react'
-import { useAppState } from '../../overmind'
+import { useAppState, useEffects } from '../../overmind'
 import * as styles from './styles'
 import * as text from '../../styles/text'
-import Workspace from '../Workspace'
+import App from '../App'
 import { css } from 'emotion'
+import Workspace from '../Workspace'
 
 const Devtools: React.FunctionComponent = () => {
   const state = useAppState()
+  const effects = useEffects()
 
   if (state.error) {
     return (
@@ -21,7 +23,11 @@ const Devtools: React.FunctionComponent = () => {
     )
   }
 
-  return <Workspace />
+  if (effects.platform.isVSCodeExtension()) {
+    return <Workspace />
+  }
+
+  return <App />
 }
 
 export default Devtools

packages/overmind-devtools-client/src/components/StateMachineSelector/styles.ts

@@ -85,8 +85,6 @@ export const resultWrapper = css({
   overflowY: 'auto',
   left: 0,
   backgroundColor: colors.border,
-  borderBottomLeftRadius: 3,
-  borderBottomRightRadius: 3,
   zIndex: 2,
 })
 

packages/overmind-devtools-client/src/components/Workspace/styles.ts

@@ -5,7 +5,13 @@ export const wrapper = css({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'stretch',
-  height: '100vh',
+  height: '100%',
+  '*': {
+    scrollbarColor: `rgba(121, 121, 121, 0.4) ${colors.foreground}`,
+    ':hover': {
+      scrollbarColor: `rgba(100, 100, 100, 0.7) ${colors.foreground}`,
+    },
+  },
 })
 
 export const content = css({

packages/overmind-devtools-client/src/components/common/ZoomContext/index.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react'
+
+type ZoomContextType = {
+  zoomLevel: number
+  zoomIn: () => void
+  zoomOut: () => void
+  resetZoom: () => void
+}
+
+const DEFAULT_ZOOM = 1
+const MIN_ZOOM = 0.5
+const MAX_ZOOM = 2
+const ZOOM_STEP = 0.1
+
+export const ZoomContext = React.createContext<ZoomContextType>({
+  zoomLevel: DEFAULT_ZOOM,
+  zoomIn: () => {},
+  zoomOut: () => {},
+  resetZoom: () => {},
+})
+
+export const ZoomProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [zoomLevel, setZoomLevel] = React.useState(DEFAULT_ZOOM)
+
+  const zoomIn = React.useCallback(() => {
+    setZoomLevel((current) => Math.min(MAX_ZOOM, current + ZOOM_STEP))
+  }, [])
+
+  const zoomOut = React.useCallback(() => {
+    setZoomLevel((current) => Math.max(MIN_ZOOM, current - ZOOM_STEP))
+  }, [])
+
+  const resetZoom = React.useCallback(() => {
+    setZoomLevel(DEFAULT_ZOOM)
+  }, [])
+
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.ctrlKey) {
+        if (e.key === '=' || e.key === '+') {
+          e.preventDefault()
+          zoomIn()
+        } else if (e.key === '-') {
+          e.preventDefault()
+          zoomOut()
+        } else if (e.key === '0') {
+          e.preventDefault()
+          resetZoom()
+        }
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [zoomIn, zoomOut, resetZoom])
+
+  const value = React.useMemo(
+    () => ({ zoomLevel, zoomIn, zoomOut, resetZoom }),
+    [zoomLevel, zoomIn, zoomOut, resetZoom]
+  )
+
+  return <ZoomContext.Provider value={value}>{children}</ZoomContext.Provider>
+}
+
+export const useZoom = () => React.useContext(ZoomContext)