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,80 @@
+import * as React from 'react'
+import { useAppState, useActions, useEffects } from '../../../overmind'
+
+type ZoomContextType = {
+  zoomLevel: number
+  zoomIn: () => void
+  zoomOut: () => void
+  resetZoom: () => void
+}
+
+export const ZoomContext = React.createContext<ZoomContextType>({
+  zoomLevel: 1,
+  zoomIn: () => {},
+  zoomOut: () => {},
+  resetZoom: () => {},
+})
+
+export const ZoomProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const state = useAppState()
+  const actions = useActions()
+  const effects = useEffects()
+
+  const zoomIn = React.useCallback(() => {
+    actions.zoomIn()
+  }, [actions])
+
+  const zoomOut = React.useCallback(() => {
+    actions.zoomOut()
+  }, [actions])
+
+  const resetZoom = React.useCallback(() => {
+    actions.resetZoom()
+  }, [actions])
+
+  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)
+
+    // Set up Electron IPC listeners
+    if (effects.platform.isElectron()) {
+      window.electronAPI.onZoomIn(zoomIn)
+      window.electronAPI.onZoomOut(zoomOut)
+      window.electronAPI.onZoomReset(resetZoom)
+    }
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [zoomIn, zoomOut, resetZoom])
+
+  const value = React.useMemo(
+    () => ({
+      zoomLevel: state.zoom.level,
+      zoomIn,
+      zoomOut,
+      resetZoom,
+    }),
+    [state.zoom.level, zoomIn, zoomOut, resetZoom]
+  )
+
+  return <ZoomContext.Provider value={value}>{children}</ZoomContext.Provider>
+}
+
+export const useZoom = () => React.useContext(ZoomContext)

packages/overmind-devtools-client/src/overmind/actions.ts

@@ -434,3 +434,21 @@ export const handleSplitPaneMove = (
 export const stopSplitPaneDrag = ({ state }: Context) => {
   state.splitPane.isDragging = false
 }
+
+export const zoomIn = ({ state }: Context) => {
+  state.zoom.level = Math.min(
+    state.zoom.max,
+    state.zoom.level + state.zoom.step
+  )
+}
+
+export const zoomOut = ({ state }: Context) => {
+  state.zoom.level = Math.max(
+    state.zoom.min,
+    state.zoom.level - state.zoom.step
+  )
+}
+
+export const resetZoom = ({ state }: Context) => {
+  state.zoom.level = 1
+}

packages/overmind-devtools-client/src/overmind/state.ts

@@ -59,6 +59,12 @@ type State = {
     splitType: string
     containerSize: number
   }
+  zoom: {
+    level: number
+    min: number
+    max: number
+    step: number
+  }
 }
 
 const state: State = {
@@ -270,6 +276,12 @@ const state: State = {
     splitType: 'vertical',
     containerSize: 0,
   },
+  zoom: {
+    level: 1,
+    min: 0.5,
+    max: 2,
+    step: 0.1,
+  },
 }
 
 export default state

packages/overmind-devtools-client/src/types.d.ts

@@ -10,6 +10,9 @@ declare global {
     electronAPI?: {
       setNewPort: (port: number) => void
       restart: () => void
+      onZoomIn: (callback: () => void) => void
+      onZoomOut: (callback: () => void) => void
+      onZoomReset: (callback: () => void) => void
     }
 
     // VSCode environment