diff --git a/console/client/.eslintrc.cjs b/console/client/.eslintrc.cjs index 027c5ade0a..7b8ae2a15a 100644 --- a/console/client/.eslintrc.cjs +++ b/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: { diff --git a/console/client/package.json b/console/client/package.json index ba5568ff99..ad5e5b9333 100644 --- a/console/client/package.json +++ b/console/client/package.json @@ -82,4 +82,4 @@ "typed-css-modules": "0.7.2", "typescript": "5.1.6" } -} \ No newline at end of file +} diff --git a/console/client/src/features/modules/ModulesPage.tsx b/console/client/src/features/modules/ModulesPage.tsx index 29e56d7791..ac07762a61 100644 --- a/console/client/src/features/modules/ModulesPage.tsx +++ b/console/client/src/features/modules/ModulesPage.tsx @@ -29,7 +29,7 @@ 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) @@ -37,15 +37,15 @@ export const ModulesPage = () => { } 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 ( diff --git a/console/client/src/features/modules/constants.ts b/console/client/src/features/modules/constants.ts index 8c1c74b4f3..f362be5dac 100644 --- a/console/client/src/features/modules/constants.ts +++ b/console/client/src/features/modules/constants.ts @@ -8,7 +8,7 @@ export const callIcon = ` ` export const controlIcons = { - in:` + in: ` `, @@ -18,11 +18,10 @@ export const controlIcons = { reset: ` - ` + `, } - export const moduleVerbCls = 'module-verb' export const moduleTitleCls = 'module-title' export const vizID = 'modules-flow-chart' -export const controlsID = 'pan-zoom-controls' \ No newline at end of file +export const controlsID = 'pan-zoom-controls' diff --git a/console/client/src/features/modules/create-controls.ts b/console/client/src/features/modules/create-controls.ts index c03c0cdbd6..37574ca495 100644 --- a/console/client/src/features/modules/create-controls.ts +++ b/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): [Map<"in" | "out" | "reset", HTMLButtonElement>, () => void] => { +export const createControls = ( + zoom: ReturnType, +): [Map<'in' | 'out' | 'reset', HTMLButtonElement>, () => void] => { const actions = ['in', 'out', 'reset'] as const - const buttons: Map = 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): [Map<"in" | " } const removeEventListeners = () => { - for(const action of actions) { + for (const action of actions) { buttons.get(action)?.removeEventListener('click', zoom[action]) } } return [buttons, removeEventListeners] -} \ No newline at end of file +} diff --git a/console/client/src/features/modules/svg-zoom.ts b/console/client/src/features/modules/svg-zoom.ts index de0e43405a..f87c6a5aa2 100644 --- a/console/client/src/features/modules/svg-zoom.ts +++ b/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 + }, } -} \ No newline at end of file +}