wip: controls

Author: sareyu

src/components/Graph/GraphControls.tsx

@@ -0,0 +1,53 @@
+import type {Graph} from '@gravity-ui/graph';
+import MagnifierMinusIcon from '@gravity-ui/icons/svgs/magnifier-minus.svg';
+import MagnifierPlusIcon from '@gravity-ui/icons/svgs/magnifier-plus.svg';
+import {Button, Icon} from '@gravity-ui/uikit';
+
+import {cn} from '../../utils/cn';
+const b = cn('ydb-gravity-graph');
+
+const ZOOM_STEP = 1.25;
+
+interface Props {
+    graph: Graph;
+}
+
+export const GraphControls = ({graph}: Props) => {
+    const onZoomInClick = () => {
+        const cameraScale = graph.cameraService.getCameraScale();
+        graph.zoom({scale: cameraScale * ZOOM_STEP});
+    };
+
+    const onZoomOutClick = () => {
+        const cameraScale = graph.cameraService.getCameraScale();
+        graph.zoom({scale: cameraScale / ZOOM_STEP});
+    };
+
+    const onResetZoomClick = () => {
+        graph.zoom({scale: 1});
+    };
+
+    return (
+        <div className={b('zoom-controls')}>
+            <Button
+                view="raised"
+                onClick={onZoomInClick}
+            >
+                <Icon data={MagnifierPlusIcon} size={16} />
+            </Button>
+            <Button
+                view="raised"
+                onClick={onZoomOutClick}
+            >
+                <Icon data={MagnifierMinusIcon} size={16} />
+            </Button>
+            <Button
+                view="raised"
+                onClick={onResetZoomClick}
+            >
+                1:1
+            </Button>
+        </div>
+    );
+};
+

src/components/Graph/GravityGraph.scss

@@ -78,6 +78,9 @@
             overflow: hidden;
             text-overflow: ellipsis;
         }
+        span:nth-child(1) {
+            color: var(--g-color-text-secondary);
+        }
         span:nth-child(2) {
             word-wrap: break-word;
         }
@@ -86,8 +89,22 @@
     &__tooltip-stat-group {
         margin-top: 8px;
     }
+    
+    &__tooltip-stat-group + &__tooltip-stat-group {
+        padding-top: 8px;
+        border-top: 1px dotted var(--g-color-line-generic);
+    }
 
     &__tooltip-stat-group-name {
         font-weight: bold;
     }
+
+    &__zoom-controls {
+        position: absolute;
+        top: 8px;
+        right: 50px;
+        z-index: 999;
+        display: flex;
+        gap: 2px;
+    }
 }

src/components/Graph/GravityGraph.tsx

@@ -29,24 +29,25 @@ import './GravityGraph.scss';
 
 const b = cn('ydb-gravity-graph');
 
-import {QueryBlockView} from './BlockComponents/QueryBlockView';
+// import {QueryBlockView} from './BlockComponents/QueryBlockView';
 import {QueryBlockComponent} from './BlockComponents/QueryBlockComponent';
 import {ResultBlockComponent} from './BlockComponents/ResultBlockComponent';
 import {StageBlockComponent} from './BlockComponents/StageBlockComponent';
 import {ConnectionBlockComponent} from './BlockComponents/ConnectionBlockComponent';
 import {graphColorsConfig} from './colorsConfig';
+import { GraphControls } from './GraphControls';
 
 interface Props<T> {
     data: Data<T>;
     theme?: string;
 }
 
-const config = {
+const config: TGraphConfig = {
     settings: {
         connection: MultipointConnection,
-        blockComponents: {
-            query: QueryBlockView,
-        },
+        // blockComponents: {
+        //     query: QueryBlockView,
+        // },
         // canDragCamera: true,
         // canZoomCamera: false,
         // useBezierConnections: false,
@@ -72,7 +73,7 @@ const baseElkConfig = {
 const elk = new ELK();
 
 const renderBlockFn = (graph, block) => {
-    console.log('===', block);
+    // console.log('===', block);
 
     const map = {
         query: QueryBlockComponent,
@@ -140,15 +141,27 @@ export function GravityGraph<T>({data, theme}: Props<T>) {
 
     useGraphEvent(graph, 'state-change', ({state}) => {
         if (state === GraphState.ATTACHED) {
-            console.log('start');
             graph.cameraService.set({
                 scale: 1,
                 scaleMax: 1.5,
+                scaleMin: 0.5,
+            });
+            graph.setConstants({
+                block: {
+                    SCALES: [0.125, 0.225, 0.5] // Detailed view stays until zoom = 0.5
+                  }
             });
             start();
             // graph.zoomTo("center", { padding: 300 });
         }
     });
 
-    return <GraphCanvas graph={graph} renderBlock={renderBlockFn} />;
+    // useGraphEvent(graph, 'connection-selection-change', (event) => {
+    //     console.log('connection-click', event);
+    // });
+
+    return <>
+        <GraphCanvas graph={graph} renderBlock={renderBlockFn} />
+        <GraphControls graph={graph} />
+    </>;
 }

src/components/Graph/NonSelectableConnection.tsx

@@ -0,0 +1,24 @@
+import {MultipointConnection} from '@gravity-ui/graph/react';
+
+/**
+ * Кастомный класс соединения, который отключает визуальное выделение
+ * Наследуется от MultipointConnection и переопределяет поведение
+ */
+export class NonSelectableConnection extends MultipointConnection {
+    // Переопределяем метод для предотвращения выделения при клике
+    public override onClick() {
+        // Ничего не делаем при клике - блокируем выделение
+        return;
+    }
+
+    // Переопределяем метод для отключения hover эффектов
+    public override onPointerEnter() {
+        // Ничего не делаем при наведении
+        return;
+    }
+
+    public override onPointerLeave() {
+        // Ничего не делаем при уходе курсора
+        return;
+    }
+}