From 2c364eef1367e17c8d15d4161ecc25bd847c53ae Mon Sep 17 00:00:00 2001 From: draedful Date: Tue, 15 Oct 2024 18:35:26 +0300 Subject: [PATCH] playground some fixes --- src/components/canvas/blocks/Block.ts | 30 +++++++++-------- src/react-component/Block.tsx | 5 +++ src/stories/Playground/GraphPlayground.tsx | 32 +++++++++---------- .../Playground/GravityBlock/GravityBlock.css | 3 +- src/stories/Playground/GravityBlock/index.tsx | 14 +------- src/stories/configurations/generatePretty.ts | 4 +-- 6 files changed, 43 insertions(+), 45 deletions(-) diff --git a/src/components/canvas/blocks/Block.ts b/src/components/canvas/blocks/Block.ts index acf63e7..f1b8e1f 100644 --- a/src/components/canvas/blocks/Block.ts +++ b/src/components/canvas/blocks/Block.ts @@ -103,6 +103,8 @@ export class Block 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() { diff --git a/src/react-component/Block.tsx b/src/react-component/Block.tsx index 39171d5..e085d9c 100644 --- a/src/react-component/Block.tsx +++ b/src/react-component/Block.tsx @@ -22,6 +22,11 @@ export const GraphBlock = ({ 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`, diff --git a/src/stories/Playground/GraphPlayground.tsx b/src/stories/Playground/GraphPlayground.tsx index 4aae928..e409ad0 100644 --- a/src/stories/Playground/GraphPlayground.tsx +++ b/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,6 +71,7 @@ const config = { export function GraphPLayground() { const { graph, setEntities, updateEntities, start } = useGraph(config); + const editorRef = useRef(null); const updateVisibleConfig = useFn(() => { const config = graph.rootStore.getAsConfig(); @@ -73,11 +79,7 @@ export function GraphPLayground() { 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 Unknown block <>{block.id} }); - const editorRef = useRef(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 ( @@ -249,7 +249,7 @@ export function GraphPLayground() { - + diff --git a/src/stories/Playground/GravityBlock/GravityBlock.css b/src/stories/Playground/GravityBlock/GravityBlock.css index 913f7a5..1eb1cd7 100644 --- a/src/stories/Playground/GravityBlock/GravityBlock.css +++ b/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); } diff --git a/src/stories/Playground/GravityBlock/index.tsx b/src/stories/Playground/GravityBlock/index.tsx index 411899e..1e1de59 100644 --- a/src/stories/Playground/GravityBlock/index.tsx +++ b/src/stories/Playground/GravityBlock/index.tsx @@ -51,13 +51,6 @@ export class GravityBlock extends CanvasBlock { return } - 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 { 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 { }, 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); diff --git a/src/stories/configurations/generatePretty.ts b/src/stories/configurations/generatePretty.ts index 1fb206e..601f05c 100644 --- a/src/stories/configurations/generatePretty.ts +++ b/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: [],