From 05450d543bba3ef5de253b1db78ea6d322f0fc04 Mon Sep 17 00:00:00 2001 From: Edward Irby Date: Mon, 25 Sep 2023 13:13:13 -0700 Subject: [PATCH 1/4] feat(client): basic css styling before js interactions --- .../src/features/modules/ModulesPage.tsx | 1 + .../client/src/features/modules/constants.ts | 2 +- .../src/features/modules/generate-dot.ts | 1 + console/client/src/features/modules/graph.css | 149 ++++++++++++++++++ 4 files changed, 152 insertions(+), 1 deletion(-) create mode 100644 console/client/src/features/modules/graph.css diff --git a/console/client/src/features/modules/ModulesPage.tsx b/console/client/src/features/modules/ModulesPage.tsx index 0abc01fa20..37e7084ffe 100644 --- a/console/client/src/features/modules/ModulesPage.tsx +++ b/console/client/src/features/modules/ModulesPage.tsx @@ -5,6 +5,7 @@ import { modulesContext } from '../../providers/modules-provider' import { generateDot } from './generate-dot' import { dotToSVG } from './dot-to-svg' import { formatSVG } from './format-svg' +import './graph.css' export const ModulesPage = () => { const modules = React.useContext(modulesContext) const dot = generateDot(modules) diff --git a/console/client/src/features/modules/constants.ts b/console/client/src/features/modules/constants.ts index b213f2f775..f1a4905fb2 100644 --- a/console/client/src/features/modules/constants.ts +++ b/console/client/src/features/modules/constants.ts @@ -2,7 +2,7 @@ export const callIconID = 'call-icon' export const callIcon = ` - + ` diff --git a/console/client/src/features/modules/generate-dot.ts b/console/client/src/features/modules/generate-dot.ts index e72c147170..776d3a3272 100644 --- a/console/client/src/features/modules/generate-dot.ts +++ b/console/client/src/features/modules/generate-dot.ts @@ -50,6 +50,7 @@ const generateModuleContent = (module: Module): { node: string; edges: string } if (call.module) { edges += `\n"${moduleName}":"${verb.name}" -> "${call.module}":"${call.name}"[ id = "${moduleName}.${verb.name}=>${call.module}.${call.name}" + label = "${moduleName}.${verb.name}=>${call.module}.${call.name}" ]` } }) diff --git a/console/client/src/features/modules/graph.css b/console/client/src/features/modules/graph.css new file mode 100644 index 0000000000..50ce545a2a --- /dev/null +++ b/console/client/src/features/modules/graph.css @@ -0,0 +1,149 @@ +:root { + --opacity: 1; + --selected-opacity: 10%; + --purple: rgba(67, 56, 202, var(--opacity)); + --white: rgba(255, 255, 255, var(--opacity)); + --black: rgba(31, 41, 55, var(--opacity)); + --module-stroke: var(--purple); + --module-fill: transparent; + --module-title-text: var(--white); + --module-title-fill: var(--purple); + --module-text: var(--black); + --highlight-color: rgba(251, 113, 133, var(--opacity)); + --edge-color: var(--black); +} + +html.dark:root { + --module-text: var(--white); + --edge-color: var(--white); +} + +g.graph > polygon { + fill: transparent; +} + +#svg-pan-zoom-controls { + & path { + fill-opacity: 0.75; + fill: var(--field-name-color); + } +} + +/* Nodes Styling */ +.node { + pointer-events: bounding-box; + cursor: pointer; + + & polygon { + stroke: var(--module-stroke); + fill: var(--module-fill); + } + + & .module-title { + & polygon { + fill: var(--module-title-fill); + } + + & text { + fill: var(--module-title-text); + } + } + + &.selected polygon { + stroke: var(--highlight); + stroke-width: 3; + } + + &.selected .module-title polygon { + fill: var(--highlight-color); + } +} + +/* verb */ +.module-verb { + & text { + fill: var(--module-text); + } +} + +.module-verb.selected { + & > polygon { + stroke: var(--highlight-color); + stroke-width: 3; + } +} + +/* Edges Styling */ + +.edge { + cursor: pointer; + + & path { + stroke: var(--edge-color); + stroke-width: 2; + + &.hover-path { + stroke: transparent; + stroke-width: 15; + } + } + + &.highlighted, + &.hovered, + &:hover { + & path:not(.hover-path) { + stroke: var(--highlight-color); + stroke-width: 3; + } + + & polygon { + stroke: var(--highlight-color); + fill: var(--highlight-color); + opacity: 1; + } + } + + & polygon { + fill: var(--edge-color); + stroke: var(--edge-color); + } + + & text { + fill: var(--module-text); + + display: none; + } + + &:hover, + &.highlighted, + &.hovered { + & text { + display: block; + } + } + + &.selected { + & path:not(.hover-path) { + stroke: var(--highlight-color); + } + + & polygon { + stroke: var(--highlight-color); + fill: var(--highlight-color); + } + } +} + +/* selection fade */ +.selection-active { + & .edge, + & .node { + opacity: 0.2; + } + + & .node.selected-reachable, + & .node.selected, + & .edge.highlighted { + opacity: 1; + } +} From 216e047a02c12d7c69043fcc054393fc52085787 Mon Sep 17 00:00:00 2001 From: Edward Irby Date: Tue, 26 Sep 2023 10:58:25 -0700 Subject: [PATCH 2/4] feat(client): adding some icons --- .../client/src/features/modules/ModulesPage.tsx | 2 +- console/client/src/features/modules/constants.ts | 14 ++++++++++++-- console/client/src/features/modules/format-svg.ts | 4 +++- console/client/src/features/modules/graph.css | 8 +++++--- 4 files changed, 21 insertions(+), 7 deletions(-) diff --git a/console/client/src/features/modules/ModulesPage.tsx b/console/client/src/features/modules/ModulesPage.tsx index 37e7084ffe..61ef36ccae 100644 --- a/console/client/src/features/modules/ModulesPage.tsx +++ b/console/client/src/features/modules/ModulesPage.tsx @@ -26,7 +26,7 @@ export const ModulesPage = () => { return (
} title='Modules' /> -
+
) } diff --git a/console/client/src/features/modules/constants.ts b/console/client/src/features/modules/constants.ts index f1a4905fb2..da8c90d474 100644 --- a/console/client/src/features/modules/constants.ts +++ b/console/client/src/features/modules/constants.ts @@ -1,11 +1,21 @@ export const callIconID = 'call-icon' export const callIcon = ` - - + + ` +export const plusIcon = ` + + +` + +export const minusIcon = ` + + +` + export const moduleVerbCls = 'module-verb' export const moduleTitleCls = 'module-title' diff --git a/console/client/src/features/modules/format-svg.ts b/console/client/src/features/modules/format-svg.ts index d1d5f06ba9..7e01b55b17 100644 --- a/console/client/src/features/modules/format-svg.ts +++ b/console/client/src/features/modules/format-svg.ts @@ -1,7 +1,9 @@ import { callIcon, moduleVerbCls, callIconID } from './constants' export const formatSVG = (svg: SVGSVGElement): SVGSVGElement => { svg.insertAdjacentHTML('afterbegin', callIcon) - + svg.removeAttribute('width') + svg.removeAttribute('height') + svg.classList.add('module-flow-chart') for (const $a of svg.querySelectorAll('a')) { const $g = $a.parentNode! as SVGSVGElement diff --git a/console/client/src/features/modules/graph.css b/console/client/src/features/modules/graph.css index 50ce545a2a..f1dec772e9 100644 --- a/console/client/src/features/modules/graph.css +++ b/console/client/src/features/modules/graph.css @@ -18,10 +18,12 @@ html.dark:root { --edge-color: var(--white); } -g.graph > polygon { - fill: transparent; +.module-flow-chart { + width: fit-content; + & > .graph > polygon { + fill: transparent; + } } - #svg-pan-zoom-controls { & path { fill-opacity: 0.75; From c5742ebd16b6ffe59fb3f1a17fe1bf0c026153dd Mon Sep 17 00:00:00 2001 From: Edward Irby Date: Thu, 28 Sep 2023 14:00:29 -0700 Subject: [PATCH 3/4] feat(client): adds pan and zoom functionality to modules page --- console/client/.eslintrc.cjs | 3 ++ console/client/package-lock.json | 19 ++++++++ console/client/package.json | 4 +- .../modules/{graph.css => Modules.css} | 4 +- .../src/features/modules/ModulesPage.tsx | 46 +++++++++++++++---- .../client/src/features/modules/constants.ts | 25 ++++++---- .../src/features/modules/create-controls.ts | 29 ++++++++++++ .../client/src/features/modules/format-svg.ts | 4 +- .../client/src/features/modules/svg-zoom.ts | 34 ++++++++++++++ 9 files changed, 144 insertions(+), 24 deletions(-) rename console/client/src/features/modules/{graph.css => Modules.css} (98%) create mode 100644 console/client/src/features/modules/create-controls.ts create mode 100644 console/client/src/features/modules/svg-zoom.ts diff --git a/console/client/.eslintrc.cjs b/console/client/.eslintrc.cjs index a00754cda9..027c5ade0a 100644 --- a/console/client/.eslintrc.cjs +++ b/console/client/.eslintrc.cjs @@ -27,6 +27,9 @@ 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', + } ], }, settings: { react: { diff --git a/console/client/package-lock.json b/console/client/package-lock.json index 8d7e50daad..7a43421515 100644 --- a/console/client/package-lock.json +++ b/console/client/package-lock.json @@ -14,6 +14,8 @@ "@headlessui/react": "1.7.16", "@heroicons/react": "2.0.18", "@monaco-editor/react": "4.5.2", + "@svgdotjs/svg.js": "3.2.0", + "@svgdotjs/svg.panzoom.js": "2.1.2", "@tailwindcss/forms": "^0.5.6", "@vitejs/plugin-react": "^4.0.4", "@viz-js/viz": "3.2.0", @@ -2060,6 +2062,23 @@ "@sinonjs/commons": "^3.0.0" } }, + "node_modules/@svgdotjs/svg.js": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@svgdotjs/svg.js/-/svg.js-3.2.0.tgz", + "integrity": "sha512-Tr8p+QVP7y+QT1GBlq1Tt57IvedVH8zCPoYxdHLX0Oof3a/PqnC/tXAkVufv1JQJfsDHlH/UrjcDfgxSofqSNA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/Fuzzyma" + } + }, + "node_modules/@svgdotjs/svg.panzoom.js": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@svgdotjs/svg.panzoom.js/-/svg.panzoom.js-2.1.2.tgz", + "integrity": "sha512-0Nzo2TRlTebW3pzfAPtHx8Ye7Y3kuMEkK7hwVJi0SgQUB/vstjg7fvCJxB++EqsuDEetP0/SC+4CpLMVm6Lh2g==", + "dependencies": { + "@svgdotjs/svg.js": "^3.0.16" + } + }, "node_modules/@swc/core": { "version": "1.3.77", "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.77.tgz", diff --git a/console/client/package.json b/console/client/package.json index 35d3e534bd..ba5568ff99 100644 --- a/console/client/package.json +++ b/console/client/package.json @@ -32,6 +32,8 @@ "@headlessui/react": "1.7.16", "@heroicons/react": "2.0.18", "@monaco-editor/react": "4.5.2", + "@svgdotjs/svg.js": "3.2.0", + "@svgdotjs/svg.panzoom.js": "2.1.2", "@tailwindcss/forms": "^0.5.6", "@vitejs/plugin-react": "^4.0.4", "@viz-js/viz": "3.2.0", @@ -80,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/graph.css b/console/client/src/features/modules/Modules.css similarity index 98% rename from console/client/src/features/modules/graph.css rename to console/client/src/features/modules/Modules.css index f1dec772e9..fc30ea3352 100644 --- a/console/client/src/features/modules/graph.css +++ b/console/client/src/features/modules/Modules.css @@ -18,13 +18,13 @@ html.dark:root { --edge-color: var(--white); } -.module-flow-chart { +#modules-flow-chart { width: fit-content; & > .graph > polygon { fill: transparent; } } -#svg-pan-zoom-controls { +#pan-zoom-controls { & path { fill-opacity: 0.75; fill: var(--field-name-color); diff --git a/console/client/src/features/modules/ModulesPage.tsx b/console/client/src/features/modules/ModulesPage.tsx index 61ef36ccae..29e56d7791 100644 --- a/console/client/src/features/modules/ModulesPage.tsx +++ b/console/client/src/features/modules/ModulesPage.tsx @@ -5,28 +5,54 @@ import { modulesContext } from '../../providers/modules-provider' import { generateDot } from './generate-dot' import { dotToSVG } from './dot-to-svg' import { formatSVG } from './format-svg' -import './graph.css' +import { svgZoom } from './svg-zoom' +import { createControls } from './create-controls' +import './Modules.css' + export const ModulesPage = () => { const modules = React.useContext(modulesContext) - const dot = generateDot(modules) - const ref = React.useRef(null) + const viewportRef = React.useRef(null) + const controlRef = React.useRef(null) const [viewport, setViewPort] = React.useState() + const [controls, setControls] = React.useState() + const [svg, setSVG] = React.useState() + React.useEffect(() => { - const cur = ref.current - cur && setViewPort(cur) + const viewCur = viewportRef.current + viewCur && setViewPort(viewCur) + + const ctlCur = controlRef.current + ctlCur && setControls(ctlCur) }, []) + React.useEffect(() => { const renderSvg = async () => { - const svg = await dotToSVG(dot) - svg && viewport?.replaceChildren(formatSVG(svg)) + const dot = generateDot(modules) + const unformattedSVG = await dotToSVG(dot) + if(unformattedSVG) { + const formattedSVG = formatSVG(unformattedSVG) + viewport?.replaceChildren(formattedSVG) + setSVG(formattedSVG) + } } viewport && void renderSvg() - }, [dot, viewport]) - // console.log(generateDotFile(modules)) + }, [modules, viewport]) + + React.useEffect(() => { + if(controls && svg) { + const zoom = svgZoom(); + const [buttons, removeListeners] = createControls(zoom) + controls.replaceChildren(...buttons.values()) + return () => { + removeListeners() + } + } + }, [controls, svg]) return (
} title='Modules' /> -
+
+
) } diff --git a/console/client/src/features/modules/constants.ts b/console/client/src/features/modules/constants.ts index da8c90d474..8c1c74b4f3 100644 --- a/console/client/src/features/modules/constants.ts +++ b/console/client/src/features/modules/constants.ts @@ -1,21 +1,28 @@ export const callIconID = 'call-icon' export const callIcon = ` - + ` -export const plusIcon = ` - - -` +export const controlIcons = { + in:` + + + `, + out: ` + + `, + reset: ` + + + ` +} -export const minusIcon = ` - - -` 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 diff --git a/console/client/src/features/modules/create-controls.ts b/console/client/src/features/modules/create-controls.ts new file mode 100644 index 0000000000..c03c0cdbd6 --- /dev/null +++ b/console/client/src/features/modules/create-controls.ts @@ -0,0 +1,29 @@ +import { svgZoom } from "./svg-zoom" +import {controlIcons} from './constants' + + + +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 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(' ')) + const scr = document.createElement('span') + scr.classList.add('sr-only') + scr.innerText = action + const parser = new DOMParser() + const doc = parser.parseFromString(controlIcons[action], 'image/svg+xml') + const svg = doc.documentElement + btn.replaceChildren(scr, svg) + btn.addEventListener('click', zoom[action]) + buttons.set(action, btn) + } + + const removeEventListeners = () => { + 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/format-svg.ts b/console/client/src/features/modules/format-svg.ts index 7e01b55b17..aea91418df 100644 --- a/console/client/src/features/modules/format-svg.ts +++ b/console/client/src/features/modules/format-svg.ts @@ -1,9 +1,9 @@ -import { callIcon, moduleVerbCls, callIconID } from './constants' +import { callIcon, moduleVerbCls, callIconID, vizID } from './constants' export const formatSVG = (svg: SVGSVGElement): SVGSVGElement => { svg.insertAdjacentHTML('afterbegin', callIcon) svg.removeAttribute('width') svg.removeAttribute('height') - svg.classList.add('module-flow-chart') + svg.setAttribute('id', vizID) for (const $a of svg.querySelectorAll('a')) { const $g = $a.parentNode! as SVGSVGElement diff --git a/console/client/src/features/modules/svg-zoom.ts b/console/client/src/features/modules/svg-zoom.ts new file mode 100644 index 0000000000..de0e43405a --- /dev/null +++ b/console/client/src/features/modules/svg-zoom.ts @@ -0,0 +1,34 @@ +import { SVG } from '@svgdotjs/svg.js' +import '@svgdotjs/svg.panzoom.js/dist/svg.panzoom.esm.js' +import { vizID } from './constants' + +export const svgZoom = () => { + // enables panZoom + const canvas = SVG(`#${vizID}`) + //@ts-ignore: lib types bad + ?.panZoom() + const box = canvas.bbox() + return { + to(id: string) { + 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}) + } + }, + 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 + }, + reset() { + canvas + .viewbox(box) + .zoom(1, {x: 0, y:0}); // Reset zoom level to 1 and pan to origin + } + } +} \ No newline at end of file From efdc6dacc130c97b22b4c5a3c68f95d73bea167d Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 28 Sep 2023 21:07:01 +0000 Subject: [PATCH 4/4] chore(autofmt): Automated formatting --- console/client/.eslintrc.cjs | 9 ++++--- console/client/package.json | 2 +- .../src/features/modules/ModulesPage.tsx | 18 ++++++------- .../client/src/features/modules/constants.ts | 7 +++-- .../src/features/modules/create-controls.ts | 24 ++++++++++------- .../client/src/features/modules/svg-zoom.ts | 26 +++++++++---------- 6 files changed, 45 insertions(+), 41 deletions(-) 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 +}