playground some fixes

src/components/canvas/blocks/Block.ts

@@ -103,6 +103,8 @@ export class Block<T extends TBlock = TBlock, Props extends TBlockProps = TBlock
 
   protected raised: boolean;
 
+  protected hidden: boolean;
+
   protected currentState(): T {
     return this.connectedState.$state.value;
   }
@@ -392,7 +394,7 @@ export class Block<T extends TBlock = TBlock, Props extends TBlockProps = TBlock
   public willIterate() {
     super.willIterate();
 
-    this.shouldRender = this.context.camera.isRectVisible(
+    this.shouldRender = !this.hidden && this.context.camera.isRectVisible(
       this.state.x,
       this.state.y,
       this.state.width,
@@ -438,32 +440,34 @@ export class Block<T extends TBlock = TBlock, Props extends TBlockProps = TBlock
     this.renderSchematicView(ctx);
   }
 
-  public renderSchematicView(ctx: CanvasRenderingContext2D) {
-    ctx.lineWidth = 10;
+  protected renderBody(ctx: CanvasRenderingContext2D) {
     ctx.fillStyle = this.context.colors.block.background;
     ctx.strokeStyle = this.context.colors.block.border;
 
     ctx.fillRect(this.state.x, this.state.y, this.state.width, this.state.height);
-    this.renderStroke(this.context.colors.block.border);
+    this.renderStroke(this.state.selected ? this.context.colors.block.selectedBorder : this.context.colors.block.border);
+  }
 
-    const scale = this.context.camera.getCameraScale();
-    const shouldRenderText = scale > this.context.constants.block.SCALES[0];
+  public renderSchematicView(ctx: CanvasRenderingContext2D) {
+    this.renderBody(ctx);
 
-    if (shouldRenderText) {
+    if (this.shouldRenderText) {
       ctx.fillStyle = this.context.colors.block.text;
       ctx.textAlign = "center";
       this.renderText(this.state.name, ctx);
     }
-    if (this.state.selected) {
-      this.renderStroke(this.context.colors.block.selectedBorder);
-    }
+  }
 
-    ctx.globalAlpha = 1;
+  public setHiddenBlock(hidden: boolean) {
+    if (this.hidden !== hidden) {
+      this.hidden = hidden;
+      this.performRender();
+    }
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  public renderDetailedView(_ctx: CanvasRenderingContext2D) {
-    return;
+  public renderDetailedView(ctx: CanvasRenderingContext2D) {
+    return this.renderBody(ctx);
   }
 
   protected render() {

src/react-component/Block.tsx

@@ -22,6 +22,11 @@ export const GraphBlock = <T extends TBlock>({
   const viewState = useBlockViewState(graph, block);
   const state = useBlockState(graph, block);
 
+  useEffect(() => {
+    viewState?.setHiddenBlock(true);
+    return () => viewState?.setHiddenBlock(false);
+  }, [viewState]);
+
   useLayoutEffect(() => {
     setCssProps(containerRef.current, {
       "--graph-block-geometry-x": `${block.x}px`,

src/stories/Playground/GraphPlayground.tsx

@@ -3,7 +3,7 @@ import { Flex, Select, Text, ThemeProvider } from "@gravity-ui/uikit";
 import React, { useCallback, useEffect, useLayoutEffect, useRef } from "react";
 import { StoryFn } from "storybook/internal/types";
 import { Graph, GraphState, TGraphConfig } from "../../graph";
-import { GraphBlock, GraphCanvas, GraphProps, useGraph, useGraphEvent } from "../../react-component";
+import { GraphBlock, GraphCanvas, GraphProps, HookGraphParams, useGraph, useGraphEvent } from "../../react-component";
 import { ECanChangeBlockGeometry } from "../../store/settings";
 import { useFn } from "../../utils/hooks/useFn";
 
@@ -19,7 +19,7 @@ import { Toolbox } from "./Toolbox";
 
 const generated = generatePlaygroundLayout(0, 5);
 
-const config = {
+const config: HookGraphParams = {
   viewConfiguration: {
     colors: {
       selection: {
@@ -45,6 +45,11 @@ const config = {
         dots: "rgba(255, 255, 255, 0.2)",
         border: "rgba(255, 255, 255, 0.3)",
       }
+    },
+    constants: {
+      block: {
+        SCALES: [0.1, 0.2, 0.5]
+      }
     }
   },
   settings: {
@@ -66,18 +71,15 @@ const config = {
 
 export function GraphPLayground() {
   const { graph, setEntities, updateEntities, start } = useGraph(config);
+  const editorRef = useRef<ConfigEditorController>(null);
 
   const updateVisibleConfig = useFn(() => {
     const config = graph.rootStore.getAsConfig();
     editorRef?.current.setContent({
       blocks: config.blocks || [],
       connections: config.connections || []
     });
-  })
-
-  useGraphEvent(graph, 'block-drag', ({block}) => {
-    editorRef?.current.scrollTo(block.id);
-  })
+  });
 
   useGraphEvent(graph, 'block-change', ({block}) => {
     editorRef?.current.updateBlocks([block]);
@@ -179,13 +181,11 @@ export function GraphPLayground() {
     return <GraphBlock graph={graph} block={block}>Unknown block <>{block.id}</></GraphBlock>
   });
 
-  const editorRef = useRef<ConfigEditorController>(null);
-
-  const onSelectBlock: GraphProps['onBlockSelectionChange'] = useCallback((selection) => {
-    if (selection.list.length === 1) {
-      editorRef?.current.scrollTo(selection.list[0]);
+  useGraphEvent(graph, 'blocks-selection-change', ({list}) => {
+    if (list.length === 1) {
+      editorRef?.current.scrollTo(list[0]);
     }
-  }, [graph]);
+  });
 
   useEffect(() => {
     const fn = (e) => {
@@ -224,11 +224,11 @@ export function GraphPLayground() {
         break;
       }
     }
-    console.log(config.blocks.length, config.connections.length)
     setEntities(config);
     graph.zoomTo('center', {transition: 500});
     updateVisibleConfig();
-  })
+
+  });
 
   return (
     <ThemeProvider theme="dark">
@@ -249,7 +249,7 @@ export function GraphPLayground() {
               <Toolbox graph={graph} className="graph-tools-zoom button-group"/>
               <GraphSettings className="graph-tools-settings" graph={graph} />
             </Flex>
-            <GraphCanvas onBlockSelectionChange={onSelectBlock} graph={graph} renderBlock={renderBlockFn} />
+            <GraphCanvas graph={graph} renderBlock={renderBlockFn} />
           </Flex>
         </Flex>
         <Flex direction="column" grow={1} className="content" gap={6}>

src/stories/Playground/GravityBlock/GravityBlock.css

@@ -1,6 +1,6 @@
 .gravity-block-wrapper {
   border-radius: 8px;
-  border-width: 2px;
+  border-width: 4px;
   padding: var(--g-spacing-3);
 
   display: flex;
@@ -14,6 +14,7 @@
 
 .gravity-block-wrapper:hover {
   cursor: pointer;
+  border-color: rgba(229, 229, 229, 0.4);
   background-color: rgba(57, 47, 57, 1);
 }
 

src/stories/Playground/GravityBlock/index.tsx

@@ -51,13 +51,6 @@ export class GravityBlock extends CanvasBlock<TGravityBlock> {
     return <PlaygroundBlock graph={this.context.graph} block={this.connectedState.$state.value} />
   }
 
-  protected renderStroke(color: string) {
-    const scale = this.context.camera.getCameraScale();
-    this.context.ctx.lineWidth = Math.min(Math.round(3 / scale), 12);
-    this.context.ctx.strokeStyle = color;
-    this.context.ctx.strokeRect(this.state.x, this.state.y, this.state.width, this.state.height);
-  }
-
   protected renderAnchor(anchor: TAnchor, getPosition: (anchor: TAnchor) => TPoint) {
     return Anchor.create({
       ...anchor,
@@ -104,7 +97,7 @@ export class GravityBlock extends CanvasBlock<TGravityBlock> {
   public renderBody(ctx: CanvasRenderingContext2D) {
     const scale = this.context.camera.getCameraScale();
 
-    ctx.lineWidth = Math.min(Math.round(3 / scale), 12);
+    ctx.lineWidth = Math.min(Math.round(2 / scale), 12);
     ctx.fillStyle = this.hovered ? "rgba(57, 47, 57, 1)" : this.context.colors.block.background;
 
     ctx.beginPath();
@@ -136,11 +129,6 @@ export class GravityBlock extends CanvasBlock<TGravityBlock> {
       }, ctx, this.getContentRect());
   }
 
-  public renderDetailedView(ctx: CanvasRenderingContext2D) {
-    // This needs to prevent flickering of block on switch levels
-    this.renderBody(ctx);
-  }
-
   public renderSchematicView(ctx: CanvasRenderingContext2D) {
     this.renderBody(ctx);
 

src/stories/configurations/generatePretty.ts

@@ -11,8 +11,8 @@ function createBlock(x: number, y: number, index): TBlock {
     is: IS_BLOCK_TYPE,
     x,
     y,
-    width: 63 * window.devicePixelRatio,
-    height: 63 * window.devicePixelRatio,
+    width: 200,
+    height: 150,
     selected: false,
     name: blockId,
     anchors: [],