...

draedful · draedful · commit 1cc4d992fc41 · 2025-11-12T13:34:55.000+03:00
diff --git a/packages/graph/src/store/block/BlocksList.ts b/packages/graph/src/store/block/BlocksList.ts
@@ -7,7 +7,6 @@ import { Graph } from "../../graph";
 import { MultipleSelectionBucket } from "../../services/selection/MultipleSelectionBucket";
 import { SingleSelectionBucket } from "../../services/selection/SingleSelectionBucket";
 import { ESelectionStrategy } from "../../services/selection/types";
-import { isNonEmpty } from "../../utils/functions";
 import { AnchorState } from "../anchor/Anchor";
 import { RootStore } from "../index";
 
diff --git a/packages/graph/src/store/settings.ts b/packages/graph/src/store/settings.ts
@@ -5,7 +5,7 @@ import merge from "lodash/merge";
 import { Block } from "../components/canvas/blocks/Block";
 import { BaseConnection } from "../components/canvas/connections";
 import { Component } from "../lib";
-import { Constructor } from "../utils";
+import { ComponentConstructor } from "../lib/CoreComponent";
 
 import { RootStore } from "./index";
 
@@ -41,8 +41,8 @@ export type TGraphSettingsConfig = {
    * Please use connection component instead
    */
   showConnectionLabels: boolean;
-  blockComponents: Record<string, Constructor<Block>>;
-  connection?: Constructor<BaseConnection>;
+  blockComponents: Record<string, ComponentConstructor<Block>>;
+  connection?: ComponentConstructor<BaseConnection>;
   background?: typeof Component;
   /**
    * Constrain camera movement and zoom to keep the graph content visible.
diff --git a/packages/react/src/BlocksList.tsx b/packages/react/src/BlocksList.tsx
@@ -10,6 +10,7 @@ import {
   TBlock,
   debounce,
 } from "@gravity-ui/graph";
+
 import { useSignal } from "./hooks";
 import { useGraphEvent } from "./hooks/useGraphEvents";
 import { useCompareState } from "./utils/hooks/useCompareState";
diff --git a/packages/stories/src/Playground/GraphPlayground.tsx b/packages/stories/src/Playground/GraphPlayground.tsx
@@ -97,8 +97,8 @@ const config: HookGraphParams = {
     useBlocksAnchors: true,
     showConnectionLabels: false,
     blockComponents: {
-      [GravityActionBlockIS]: ActionBlock,
-      [GravityTextBlockIS]: TextBlock,
+      [GravityActionBlockIS]: ActionBlock as any,
+      [GravityTextBlockIS]: TextBlock as any,
     },
   },
 };
diff --git a/packages/stories/src/api/startStopGraph/startStop.stories.tsx b/packages/stories/src/api/startStopGraph/startStop.stories.tsx
@@ -16,7 +16,6 @@ let initialized = false;
 const GraphApp = () => {
   const exampleGraph = useMemo(() => {
     return new Graph({
-      configurationName: "start-stop",
       blocks: config.blocks,
       connections: config.connections,
       settings: config.settings,
diff --git a/packages/stories/src/api/updateConnection/config.ts b/packages/stories/src/api/updateConnection/config.ts
@@ -3,7 +3,6 @@ import { TGraphConfig } from "@gravity-ui/graph";
 import { storiesSettings } from "../../configurations/definitions";
 
 export const graphConfig: TGraphConfig = {
-  configurationName: "simple",
   blocks: [
     {
       x: 265,
@@ -64,11 +63,4 @@ export const graphConfig: TGraphConfig = {
     ...storiesSettings,
     useBezierConnections: true,
   },
-  cameraScale: 0.5,
-  rect: {
-    x: -156,
-    y: 0,
-    width: 631,
-    height: 494,
-  },
 };
diff --git a/packages/stories/src/api/zoomToElements/zoomToElements.stories.tsx b/packages/stories/src/api/zoomToElements/zoomToElements.stories.tsx
@@ -1,10 +1,9 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 
+import { Graph, GraphComponent } from "@gravity-ui/graph";
 import { Button, ButtonButtonProps, Flex, Text, TextInput, ThemeProvider } from "@gravity-ui/uikit";
 import type { Meta, StoryFn } from "@storybook/react-webpack5";
 
-import { GraphComponent } from "../../../components/canvas/GraphComponent";
-import { Graph } from "../../../graph";
 import { generatePrettyBlocks } from "../../configurations/generatePretty";
 import { GraphComponentStory } from "../../main/GraphEditor";
 
diff --git a/packages/stories/src/configurations/CustomLayerConfig.ts b/packages/stories/src/configurations/CustomLayerConfig.ts
@@ -5,7 +5,6 @@ import { ToolboxLayer } from "../main/ToolboxLayer";
 import { storiesSettings } from "./definitions";
 
 export const CustomLayerConfig: TGraphConfig = {
-  configurationName: "simple",
   blocks: [
     {
       x: 265,
@@ -20,13 +19,6 @@ export const CustomLayerConfig: TGraphConfig = {
     },
   ],
   connections: [],
-  cameraScale: 0.9,
-  rect: {
-    x: -156,
-    y: 0,
-    width: 631,
-    height: 494,
-  },
   settings: storiesSettings,
   layers: [[ToolboxLayer, {}]],
 };
diff --git a/packages/stories/src/configurations/bezierConnection.ts b/packages/stories/src/configurations/bezierConnection.ts
@@ -3,7 +3,6 @@ import { TGraphConfig } from "@gravity-ui/graph";
 import { storiesSettings } from "./definitions";
 
 export const oneBezierConnectionConfig: TGraphConfig = {
-  configurationName: "simple",
   blocks: [
     {
       x: 265,
@@ -38,11 +37,4 @@ export const oneBezierConnectionConfig: TGraphConfig = {
     ...storiesSettings,
     useBezierConnections: true,
   },
-  cameraScale: 0.5,
-  rect: {
-    x: -156,
-    y: 0,
-    width: 631,
-    height: 494,
-  },
 };
diff --git a/packages/stories/src/configurations/coloredConnections.ts b/packages/stories/src/configurations/coloredConnections.ts
@@ -3,7 +3,6 @@ import { TGraphConfig } from "@gravity-ui/graph";
 import { storiesSettings } from "./definitions";
 
 export const coloredConnections: TGraphConfig = {
-  configurationName: "simple",
   blocks: [
     {
       x: 265,
@@ -95,11 +94,4 @@ export const coloredConnections: TGraphConfig = {
     ...storiesSettings,
     useBezierConnections: true,
   },
-  cameraScale: 0.5,
-  rect: {
-    x: -156,
-    y: 0,
-    width: 631,
-    height: 494,
-  },
 };
diff --git a/packages/stories/src/configurations/customBlocksView.ts b/packages/stories/src/configurations/customBlocksView.ts
@@ -59,7 +59,7 @@ export const customSchematicViewConfig: TGraphConfig = {
   settings: {
     ...storiesSettings,
     blockComponents: {
-      [SpecificBlockIs]: SpecificBlockView,
+      [SpecificBlockIs]: SpecificBlockView as any,
     },
   },
 };
diff --git a/packages/stories/src/configurations/emptyGraph.ts b/packages/stories/src/configurations/emptyGraph.ts
@@ -3,15 +3,7 @@ import { TGraphConfig } from "@gravity-ui/graph";
 import { storiesSettings } from "./definitions";
 
 export const emptyGraphConfig: TGraphConfig = {
-  configurationName: "emptyGraph",
   blocks: [],
   connections: [],
-  cameraScale: 1,
-  rect: {
-    x: -400,
-    y: -300,
-    width: 800,
-    height: 600,
-  },
   settings: storiesSettings,
 };
diff --git a/packages/stories/src/configurations/generatePretty.ts b/packages/stories/src/configurations/generatePretty.ts
@@ -38,16 +38,8 @@ export function generatePrettyBlocks({
   startIndex = 0,
 }: Props) {
   const config: TGraphConfig = {
-    configurationName: "power of 2",
     blocks: [],
     connections: [],
-    rect: {
-      x: -500,
-      y: -2000,
-      width: 2000,
-      height: 2000,
-    },
-    cameraScale: 0.05,
     settings: {
       ...storiesSettings,
       showConnectionLabels: true,
diff --git a/packages/stories/src/configurations/oneBlock.ts b/packages/stories/src/configurations/oneBlock.ts
@@ -3,7 +3,6 @@ import { TGraphConfig } from "@gravity-ui/graph";
 import { storiesSettings } from "./definitions";
 
 export const oneBlockConfig: TGraphConfig = {
-  configurationName: "simple",
   blocks: [
     {
       x: 265,
@@ -18,12 +17,5 @@ export const oneBlockConfig: TGraphConfig = {
     },
   ],
   connections: [],
-  cameraScale: 0.9,
-  rect: {
-    x: -156,
-    y: 0,
-    width: 631,
-    height: 494,
-  },
   settings: storiesSettings,
 };
diff --git a/packages/stories/src/configurations/oneConnection.ts b/packages/stories/src/configurations/oneConnection.ts
@@ -3,7 +3,6 @@ import { TGraphConfig } from "@gravity-ui/graph";
 import { storiesSettings } from "./definitions";
 
 export const oneStraightConfig: TGraphConfig = {
-  configurationName: "simple",
   blocks: [
     {
       x: 265,
@@ -38,11 +37,4 @@ export const oneStraightConfig: TGraphConfig = {
     ...storiesSettings,
     useBezierConnections: false,
   },
-  cameraScale: 0.5,
-  rect: {
-    x: -156,
-    y: 0,
-    width: 631,
-    height: 494,
-  },
 };
diff --git a/packages/stories/src/configurations/verticalGraph.ts b/packages/stories/src/configurations/verticalGraph.ts
@@ -12,7 +12,6 @@ class VerticalBlock extends CanvasBlock {
 }
 
 export const verticalGraphConfig = {
-  configurationName: "simple vertical graph",
   blocks: [
     {
       x: 250,
@@ -73,17 +72,10 @@ export const verticalGraphConfig = {
       targetBlockId: "block-1708813283240-4",
     },
   ],
-  rect: {
-    x: -500,
-    y: -2000,
-    width: 2000,
-    height: 2000,
-  },
   cameraXY: {
     x: 375,
     y: 98,
   },
-  cameraScale: 0.19,
   settings: {
     ...storiesSettings,
     showConnectionLabels: true,
diff --git a/packages/stories/src/configurations/withAnchorAndConnection.ts b/packages/stories/src/configurations/withAnchorAndConnection.ts
@@ -3,8 +3,6 @@ import { TAnchor, TGraphConfig } from "@gravity-ui/graph";
 import { EAnchorType, storiesSettings } from "./definitions";
 
 export const withAnchorsAndConnectionConfig: TGraphConfig = {
-  configurationName: "simple",
-  cameraScale: 0.5,
   blocks: [
     {
       x: 265,
@@ -82,12 +80,6 @@ export const withAnchorsAndConnectionConfig: TGraphConfig = {
       label: "label",
     },
   ],
-  rect: {
-    x: -156,
-    y: 0,
-    width: 631,
-    height: 494,
-  },
   settings: {
     ...storiesSettings,
     useBezierConnections: true,
diff --git a/packages/stories/src/configurations/withAnchors.ts b/packages/stories/src/configurations/withAnchors.ts
@@ -3,8 +3,6 @@ import { TAnchor, TGraphConfig } from "@gravity-ui/graph";
 import { EAnchorType, storiesSettings } from "./definitions";
 
 export const withAnchorsConfig: TGraphConfig = {
-  configurationName: "simple",
-  cameraScale: 0.5,
   blocks: [
     {
       x: 265,
@@ -74,12 +72,6 @@ export const withAnchorsConfig: TGraphConfig = {
     },
   ],
   connections: [],
-  rect: {
-    x: -156,
-    y: 0,
-    width: 631,
-    height: 494,
-  },
   settings: {
     ...storiesSettings,
     useBezierConnections: true,
diff --git a/packages/stories/src/examples/cameraConstraints/cameraConstraints.stories.tsx b/packages/stories/src/examples/cameraConstraints/cameraConstraints.stories.tsx
@@ -47,19 +47,19 @@ const Toolbar = ({ graph }: { graph: Graph }) => {
     const randomY = usableRect.y + Math.random() * usableRect.height;
 
     graph.api.addBlock({
-      name: `Block ${graph.blocks.$blocks.value.length + 1}`,
+      is: "block",
+      name: `Block ${graph.rootStore.blocksList.$blocks.value.length + 1}`,
       x: randomX,
       y: randomY,
       width: 200,
       height: 160,
+      anchors: [],
     });
   }, [graph]);
 
   const deleteAllBlocks = useCallback(() => {
-    const allBlocks = graph.blocks.$blocks.value.map((b) => b.id);
-    allBlocks.forEach((id) => {
-      graph.blocks.removeBlock(id);
-    });
+    const allBlocks = graph.rootStore.blocksList.$blocks.value.map((b) => b.id);
+    graph.rootStore.blocksList.deleteBlocks(allBlocks);
   }, [graph]);
 
   return (
diff --git a/packages/stories/src/examples/imageByBlocks/imageByBlocks.stories.tsx b/packages/stories/src/examples/imageByBlocks/imageByBlocks.stories.tsx
@@ -28,22 +28,14 @@ const SpecificBlockIs = "some-specific-view";
 async function generateByImage() {
   return new Promise<TGraphConfig>((resolve) => {
     const config: TGraphConfig<TBlock<TBlockMeta>> = {
-      configurationName: "power of 2",
       blocks: [],
       connections: [],
-      rect: {
-        x: -500,
-        y: -2000,
-        width: 2000,
-        height: 2000,
-      },
-      cameraScale: 0.05,
       settings: {
         ...storiesSettings,
         showConnectionLabels: true,
         useBezierConnections: true,
         blockComponents: {
-          [SpecificBlockIs]: SpecificBlockView,
+          [SpecificBlockIs]: SpecificBlockView as any,
         },
       },
     };
diff --git a/packages/stories/src/examples/imageInsteadBlock/imageInsteadBlock.stories.tsx b/packages/stories/src/examples/imageInsteadBlock/imageInsteadBlock.stories.tsx
@@ -109,7 +109,7 @@ const GraphApp = () => {
   useEffect(() => {
     const newConfig = generatePrettyBlocks({ layersCount: 10, connectionsPerLayer: 100, dashedLine: true });
     newConfig.settings.blockComponents = {};
-    newConfig.settings.blockComponents[SpecificBlockIs] = SpecificBlockView;
+    newConfig.settings.blockComponents[SpecificBlockIs] = SpecificBlockView as any;
 
     newConfig.blocks.forEach((block: TBlock<TBlockMeta>) => {
       block.is = SpecificBlockIs;
diff --git a/packages/stories/src/plugins/elk/elk.stories.tsx b/packages/stories/src/plugins/elk/elk.stories.tsx
@@ -44,7 +44,7 @@ const GraphApp = ({ elkConfig, graphConfig }: GraphAppProps) => {
 
   const { graph, setEntities, start } = useGraph({
     settings: {
-      connection: MultipointConnection,
+      connection: MultipointConnection as any,
     },
   });
 
diff --git a/packages/stories/src/types/images.d.ts b/packages/stories/src/types/images.d.ts
@@ -2,5 +2,3 @@ declare module "*.png" {
   const value: string;
   export default value;
 }
-
-
