Merge branch 'eirby/modules-viz-zoom-pan' of github.com:TBD54566975/f…

…tl into eirby/modules-viz-zoom-pan

console/client/.eslintrc.cjs

@@ -27,9 +27,12 @@ module.exports = {
     'func-style': ['error', 'expression'],
     '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
     '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
-    '@typescript-eslint/ban-ts-comment': [ 2, {
-      'ts-ignore': 'allow-with-description',
-    } ],
+    '@typescript-eslint/ban-ts-comment': [
+      2,
+      {
+        'ts-ignore': 'allow-with-description',
+      },
+    ],
   },
   settings: {
     react: {

console/client/package.json

@@ -82,4 +82,4 @@
     "typed-css-modules": "0.7.2",
     "typescript": "5.1.6"
   }
-}
+}

console/client/src/features/modules/ModulesPage.tsx

@@ -29,23 +29,23 @@ export const ModulesPage = () => {
     const renderSvg = async () => {
       const dot = generateDot(modules)
       const unformattedSVG = await dotToSVG(dot)
-      if(unformattedSVG) {
+      if (unformattedSVG) {
         const formattedSVG = formatSVG(unformattedSVG)
         viewport?.replaceChildren(formattedSVG)
         setSVG(formattedSVG)
       }
     }
     viewport && void renderSvg()
   }, [modules, viewport])
- 
+
   React.useEffect(() => {
-    if(controls && svg) {
-      const zoom = svgZoom();
-     const [buttons, removeListeners] = createControls(zoom)
-     controls.replaceChildren(...buttons.values())
-     return () => {
-      removeListeners()
-     }
+    if (controls && svg) {
+      const zoom = svgZoom()
+      const [buttons, removeListeners] = createControls(zoom)
+      controls.replaceChildren(...buttons.values())
+      return () => {
+        removeListeners()
+      }
     }
   }, [controls, svg])
   return (

console/client/src/features/modules/constants.ts

@@ -8,7 +8,7 @@ export const callIcon = `<defs>
 `
 
 export const controlIcons = {
-  in:`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  in: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
   <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
   </svg>
   `,
@@ -18,11 +18,10 @@ export const controlIcons = {
   reset: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
   <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 3.75H6A2.25 2.25 0 003.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0120.25 6v1.5m0 9V18A2.25 2.25 0 0118 20.25h-1.5m-9 0H6A2.25 2.25 0 013.75 18v-1.5M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
   </svg>
-  `
+  `,
 }
 
-
 export const moduleVerbCls = 'module-verb'
 export const moduleTitleCls = 'module-title'
 export const vizID = 'modules-flow-chart'
-export const controlsID = 'pan-zoom-controls'
+export const controlsID = 'pan-zoom-controls'

console/client/src/features/modules/create-controls.ts

@@ -1,14 +1,18 @@
-import { svgZoom } from "./svg-zoom"
-import {controlIcons} from './constants'
+import { svgZoom } from './svg-zoom'
+import { controlIcons } from './constants'
 
-
-
-export const createControls = (zoom:  ReturnType<typeof svgZoom>): [Map<"in" | "out" | "reset", HTMLButtonElement>, () => void] => {
+export const createControls = (
+  zoom: ReturnType<typeof svgZoom>,
+): [Map<'in' | 'out' | 'reset', HTMLButtonElement>, () => void] => {
   const actions = ['in', 'out', 'reset'] as const
-  const buttons: Map<typeof actions[number], HTMLButtonElement> = new Map()
-  for(const action of actions) {
+  const buttons: Map<(typeof actions)[number], HTMLButtonElement> = new Map()
+  for (const action of actions) {
     const btn = document.createElement('button')
-    btn.classList.add(...'relative inline-flex items-center bg-white dark:hover:bg-indigo-700 dark:bg-gray-700/40 px-2 py-2 text-gray-500 dark:text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10'.split(' '))
+    btn.classList.add(
+      ...'relative inline-flex items-center bg-white dark:hover:bg-indigo-700 dark:bg-gray-700/40 px-2 py-2 text-gray-500 dark:text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10'.split(
+        ' ',
+      ),
+    )
     const scr = document.createElement('span')
     scr.classList.add('sr-only')
     scr.innerText = action
@@ -21,9 +25,9 @@ export const createControls = (zoom:  ReturnType<typeof svgZoom>): [Map<"in" | "
   }
 
   const removeEventListeners = () => {
-    for(const action of actions) {
+    for (const action of actions) {
       buttons.get(action)?.removeEventListener('click', zoom[action])
     }
   }
   return [buttons, removeEventListeners]
-}
+}

console/client/src/features/modules/svg-zoom.ts

@@ -1,4 +1,4 @@
-import {  SVG } from '@svgdotjs/svg.js'
+import { SVG } from '@svgdotjs/svg.js'
 import '@svgdotjs/svg.panzoom.js/dist/svg.panzoom.esm.js'
 import { vizID } from './constants'
 
@@ -13,22 +13,20 @@ export const svgZoom = () => {
       const module = canvas.findOne(`#${id}`)
       //@ts-ignore: lib types bad
       const bbox = module?.bbox()
-      if(bbox) {
-        canvas.zoom(2, { x: bbox.x, y:bbox.y})
+      if (bbox) {
+        canvas.zoom(2, { x: bbox.x, y: bbox.y })
       }
     },
-    in(){
-      const zoomLevel = canvas.zoom();
-      canvas.zoom(zoomLevel + 0.1);  // Increase the zoom level by 0.1
+    in() {
+      const zoomLevel = canvas.zoom()
+      canvas.zoom(zoomLevel + 0.1) // Increase the zoom level by 0.1
     },
-    out(){
-      const zoomLevel = canvas.zoom();
-      canvas.zoom(zoomLevel - 0.1);  // Decrease the zoom level by 0.1
+    out() {
+      const zoomLevel = canvas.zoom()
+      canvas.zoom(zoomLevel - 0.1) // Decrease the zoom level by 0.1
     },
     reset() {
-      canvas
-        .viewbox(box)
-        .zoom(1, {x: 0, y:0});  // Reset zoom level to 1 and pan to origin
-    }
+      canvas.viewbox(box).zoom(1, { x: 0, y: 0 }) // Reset zoom level to 1 and pan to origin
+    },
   }
-}
+}