From f398f5e136319c0be6fcdfdb551e7ce39a94123a Mon Sep 17 00:00:00 2001 From: draedful Date: Fri, 11 Oct 2024 02:43:16 +0300 Subject: [PATCH] playground: lot of fixes --- src/components/canvas/anchors/index.ts | 35 +++++----- src/components/canvas/blocks/Block.ts | 9 ++- .../canvas/layers/graphLayer/GraphLayer.ts | 9 +-- src/react-component/Anchor.tsx | 26 +++---- src/react-component/Block.tsx | 4 ++ .../hooks/useBlockAnchorState.ts | 19 ++++- .../newConnection/ConnectionService.ts | 9 +-- src/services/newConnection/NewConnection.ts | 31 ++++++--- src/store/anchor/Anchor.ts | 4 ++ src/store/block/Block.ts | 18 +++-- src/store/block/BlocksList.ts | 1 - src/stories/Playground/Editor/schema.ts | 2 +- src/stories/Playground/GraphPlayground.tsx | 69 ++++++++++++++++--- .../Playground/GravityBlock/GravityBlock.css | 2 +- src/stories/Playground/GravityBlock/index.tsx | 34 ++++++++- src/stories/Playground/Playground.css | 18 ++++- src/stories/Playground/Settings.tsx | 4 +- src/stories/Playground/generateLayout.tsx | 2 - 18 files changed, 210 insertions(+), 86 deletions(-) diff --git a/src/components/canvas/anchors/index.ts b/src/components/canvas/anchors/index.ts index 53485bc..e50ecd2 100644 --- a/src/components/canvas/anchors/index.ts +++ b/src/components/canvas/anchors/index.ts @@ -1,5 +1,5 @@ import { EventedComponent } from "../../../mixins/withEvents"; -import { withHitTest } from "../../../mixins/withHitTest"; +import { debugHitBox, withHitTest } from "../../../mixins/withHitTest"; import { ECameraScaleLevel } from "../../../services/camera/CameraService"; import { frameDebouncer } from "../../../services/optimizations/frameDebouncer"; import { AnchorState, EAnchorType } from "../../../store/anchor/Anchor"; @@ -13,7 +13,7 @@ export type TAnchor = { id: string; blockId: TBlockId; type: EAnchorType | string; - index: number; + index?: number; }; export type TAnchorProps = TAnchor & { @@ -48,7 +48,7 @@ export class Anchor extends withHitTest(EventedComponent) { private shift: number; - private hitBoxHash: number; + private hitBoxHash: string; private debouncedSetHitBox: (...args: any[]) => void; @@ -102,9 +102,18 @@ export class Anchor extends withHitTest(EventedComponent) { public willIterate() { super.willIterate(); + const { x: poxX, y: posY } = this.props.getPosition(this.props); + const hash = `${poxX}/${posY}/${this.shift}`; + + if (this.hitBoxHash !== hash) { + this.hitBoxHash = hash; + this.debouncedSetHitBox(); + } + const { x, y, width, height } = this.hitBox.getRect(); this.shouldRender = width && height ? this.context.camera.isRectVisible(x, y, width, height) : true; + } public handleEvent(event: MouseEvent | KeyboardEvent) { @@ -115,14 +124,16 @@ export class Anchor extends withHitTest(EventedComponent) { case "click": this.toggleSelected(); break; - case "mouseenter": + case "mouseenter":{ this.setState({ raised: true }); this.computeRenderSize(this.props.size, true); break; - case "mouseleave": + } + case "mouseleave": { this.setState({ raised: false }); this.computeRenderSize(this.props.size, false); break; + } } } @@ -131,18 +142,6 @@ export class Anchor extends withHitTest(EventedComponent) { this.setHitBox(x - this.shift, y - this.shift, x + this.shift, y + this.shift); } - public didRender() { - super.didRender(); - const { x, y } = this.props.getPosition(this.props); - - const hash = x / y + this.shift; - - if (this.hitBoxHash !== hash) { - this.hitBoxHash = hash; - this.debouncedSetHitBox(); - } - } - private computeRenderSize(size: number, raised: boolean) { if (raised) { this.setState({ size: size * 1.8 }); @@ -152,8 +151,6 @@ export class Anchor extends withHitTest(EventedComponent) { } protected render() { - // debugHitBox(this.context.ctx, this); - if (this.context.camera.getCameraBlockScaleLevel() === ECameraScaleLevel.Detailed) { return; } diff --git a/src/components/canvas/blocks/Block.ts b/src/components/canvas/blocks/Block.ts index deb8777..acf63e7 100644 --- a/src/components/canvas/blocks/Block.ts +++ b/src/components/canvas/blocks/Block.ts @@ -187,6 +187,10 @@ export class Block { + this.shouldUpdateChildren = true; + this.performRender(); + }) ]; } @@ -334,10 +338,11 @@ export class Block { this.eventByTargetComponent = event; - const point = this.getTargetPoint(event); + const point = this.context.graph.getPointInCameraSpace(event); this.targetComponent = this.context.graph.getElementOverPoint(point) || this.$.camera; } @@ -269,13 +269,6 @@ export class GraphLayer extends Layer { return this.onRootPointerStart(event); }; - private getTargetPoint(event: MouseEvent) { - const xy = getXY(this.context.canvas, event); - - const applied = this.camera.applyToPoint(xy[0], xy[1]); - return new Point(applied[0], applied[1], { x: xy[0], y: xy[1] }); - } - private onRootPointerStart(event: MouseEvent) { if (event.button === 2 /* Mouse right button */) { /* diff --git a/src/react-component/Anchor.tsx b/src/react-component/Anchor.tsx index 7338979..242991e 100644 --- a/src/react-component/Anchor.tsx +++ b/src/react-component/Anchor.tsx @@ -3,7 +3,7 @@ import { computed } from "@preact/signals-core"; import { TAnchor } from "../components/canvas/anchors"; import { Graph } from "../graph"; import { useSignal } from "./hooks"; -import { useBlockAnchorState } from "./hooks/useBlockAnchorState"; +import { useBlockAnchorPosition, useBlockAnchorState } from "./hooks/useBlockAnchorState"; import { AnchorState } from "../store/anchor/Anchor"; import "./Anchor.css"; @@ -26,22 +26,16 @@ export function GraphBlockAnchor({ const anchorState = useBlockAnchorState(graph, anchor); - useEffect(() => { - if (!container.current) { - return; + useBlockAnchorPosition(anchorState, (position) => { + if (position) { + setCssProps(container.current, { + "--graph-block-anchor-x": `${position.x}px`, + "--graph-block-anchor-y": `${position.y}px`, + }); + } else { + removeCssProps(container.current, ["--graph-block-anchor-x", "--graph-block-anchor-y"]); } - if (position === "absolute") { - const position = anchorState.block.getViewComponent().getAnchorPosition(anchor); - if (position) { - setCssProps(container.current, { - "--graph-block-anchor-x": `${position.x}px`, - "--graph-block-anchor-y": `${position.y}px`, - }); - } else { - removeCssProps(container.current, ["--graph-block-anchor-x", "--graph-block-anchor-y"]); - } - } - }, [container, position, anchorState, anchor]); + }) const selectedSignal = useMemo(() => { return computed(() => { diff --git a/src/react-component/Block.tsx b/src/react-component/Block.tsx index 75df954..39171d5 100644 --- a/src/react-component/Block.tsx +++ b/src/react-component/Block.tsx @@ -42,6 +42,10 @@ export const GraphBlock = ({ } }, [viewState, containerRef]); + if(!viewState || !state) { + return; + } + return (
diff --git a/src/react-component/hooks/useBlockAnchorState.ts b/src/react-component/hooks/useBlockAnchorState.ts index 2a994dc..5831e1e 100644 --- a/src/react-component/hooks/useBlockAnchorState.ts +++ b/src/react-component/hooks/useBlockAnchorState.ts @@ -4,7 +4,8 @@ import { useSignal } from "./useSignal"; import { useBlockState } from "./useBlockState"; import { AnchorState } from "../../store/anchor/Anchor"; import { computed } from "@preact/signals-core"; -import { useMemo } from "react"; +import { useEffect, useMemo, useRef } from "react"; +import debounce from "lodash/debounce"; export function useBlockAnchorState(graph: Graph, anchor: TAnchor): AnchorState | undefined { const blockState = useBlockState(graph, anchor.blockId); @@ -13,3 +14,19 @@ export function useBlockAnchorState(graph: Graph, anchor: TAnchor): AnchorState }, [blockState, anchor]); return useSignal(signal); } + +export function useBlockAnchorPosition(state: AnchorState | undefined, onUpdate: (position: {x: number, y: number}) => void) { + const fnRef = useRef(onUpdate); + fnRef.current = onUpdate; + + useEffect(() => { + if(!state) { + return; + } + return state.block.$geometry.subscribe(debounce(() => { + const position = state.block.getViewComponent().getAnchorPosition(state.state); + fnRef.current(position); + }, 16)) + }, [state.block]) +} + diff --git a/src/services/newConnection/ConnectionService.ts b/src/services/newConnection/ConnectionService.ts index e04c438..9a5c71d 100644 --- a/src/services/newConnection/ConnectionService.ts +++ b/src/services/newConnection/ConnectionService.ts @@ -137,15 +137,10 @@ export class ConnectionService extends Emitter { } public onMoveNewConnection(event: MouseEvent, point: Point) { - this.emit(EVENTS.NEW_CONNECTION_UPDATE, event); - const newTargetComponent = this.graph.getElementOverPoint(point, [Block, Anchor]); + + this.emit(EVENTS.NEW_CONNECTION_UPDATE, { target: newTargetComponent, event }); - if (!(newTargetComponent instanceof Block) || !(newTargetComponent instanceof Anchor)) { - return; - } - - /* Unset selection on move new selection target-point out of components */ if (!newTargetComponent || !newTargetComponent.connectedState) { this.targetComponent?.setSelection(false); this.targetComponent = undefined; diff --git a/src/services/newConnection/NewConnection.ts b/src/services/newConnection/NewConnection.ts index f8d668e..5c87a4c 100644 --- a/src/services/newConnection/NewConnection.ts +++ b/src/services/newConnection/NewConnection.ts @@ -1,3 +1,5 @@ +import { Anchor } from "../../components/canvas/anchors"; +import { Block } from "../../components/canvas/blocks/Block"; import { OverLayer, TOverLayerContext } from "../../components/canvas/layers/overLayer/OverLayer"; import { Component } from "../../lib/Component"; import { getXY } from "../../utils/functions"; @@ -47,13 +49,23 @@ export class NewConnection extends Component { ctx.roundRect(this.state.tx, this.state.ty - 12, 24, 24, 8); ctx.fill(); ctx.fillStyle = this.context.colors.canvas.belowLayerBackground; - renderSVG({ - path: `M7 0.75C7.41421 0.75 7.75 1.08579 7.75 1.5V6.25H12.5C12.9142 6.25 13.25 6.58579 13.25 7C13.25 7.41421 12.9142 7.75 12.5 7.75H7.75V12.5C7.75 12.9142 7.41421 13.25 7 13.25C6.58579 13.25 6.25 12.9142 6.25 12.5V7.75H1.5C1.08579 7.75 0.75 7.41421 0.75 7C0.75 6.58579 1.08579 6.25 1.5 6.25H6.25V1.5C6.25 1.08579 6.58579 0.75 7 0.75Z`, - width: 14, - height: 14, - iniatialWidth: 14, - initialHeight: 14 - }, ctx, { x: this.state.tx, y: this.state.ty - 12, width: 24, height: 24 }) + if(!this.target) { + renderSVG({ + path: `M7 0.75C7.41421 0.75 7.75 1.08579 7.75 1.5V6.25H12.5C12.9142 6.25 13.25 6.58579 13.25 7C13.25 7.41421 12.9142 7.75 12.5 7.75H7.75V12.5C7.75 12.9142 7.41421 13.25 7 13.25C6.58579 13.25 6.25 12.9142 6.25 12.5V7.75H1.5C1.08579 7.75 0.75 7.41421 0.75 7C0.75 6.58579 1.08579 6.25 1.5 6.25H6.25V1.5C6.25 1.08579 6.58579 0.75 7 0.75Z`, + width: 14, + height: 14, + iniatialWidth: 14, + initialHeight: 14 + }, ctx, { x: this.state.tx, y: this.state.ty - 12, width: 24, height: 24 }); + } else { + renderSVG({ + path: `M15.53 1.53A.75.75 0 0 0 14.47.47l-1.29 1.29a4.24 4.24 0 0 0-5.423.483l-.58.58a.96.96 0 0 0 0 1.354l4.646 4.646a.96.96 0 0 0 1.354 0l.58-.58a4.24 4.24 0 0 0 .484-5.423zm-8.5 4.94a.75.75 0 0 1 0 1.06L5.78 8.78l1.44 1.44 1.25-1.25a.75.75 0 0 1 1.06 1.06l-1.25 1.25.543.543a.96.96 0 0 1 0 1.354l-.58.58a4.24 4.24 0 0 1-5.423.484l-1.29 1.29A.75.75 0 0 1 .47 14.47l1.29-1.29a4.24 4.24 0 0 1 .483-5.423l.58-.58a.96.96 0 0 1 1.354 0l.543.543 1.25-1.25a.75.75 0 0 1 1.06 0M3.5 8.62l-.197.197a2.743 2.743 0 0 0 3.879 3.879l.197-.197zm9.197-1.439-.197.197L8.621 3.5l.197-.197a2.743 2.743 0 0 1 3.879 3.879`, + width: 14, + height: 14, + iniatialWidth: 16, + initialHeight: 16 + }, ctx, { x: this.state.tx, y: this.state.ty - 12, width: 24, height: 24 }); + } }) } @@ -66,7 +78,10 @@ export class NewConnection extends Component { }); }; - private updateNewConnectionRender = (event: MouseEvent) => { + protected target?: Block | Anchor; + + private updateNewConnectionRender = ({target, event}: { target?: Block | Anchor, event: MouseEvent }) => { + this.target = target; const xy = getXY(this.context.graphCanvas, event); this.setState({ tx: xy[0], diff --git a/src/store/anchor/Anchor.ts b/src/store/anchor/Anchor.ts index a2cafae..2ba69c5 100644 --- a/src/store/anchor/Anchor.ts +++ b/src/store/anchor/Anchor.ts @@ -19,6 +19,10 @@ export class AnchorState { return this.$state.value.blockId; } + public get state() { + return this.$state.value + } + public constructor( public readonly block: BlockState, anchor: TAnchor diff --git a/src/store/block/Block.ts b/src/store/block/Block.ts index 5f1a4bb..b4282ab 100644 --- a/src/store/block/Block.ts +++ b/src/store/block/Block.ts @@ -40,6 +40,16 @@ export class BlockState { public readonly $anchorStates: Signal = signal([]); + public $anchorIndexs = computed(() => { + const typeIndex = {}; + return new Map(this.$anchorStates.value?.sort((a, b) => ((a.state.index || 0) - (b.state.index || 0)) ).map((anchorState) => { + if (!typeIndex[anchorState.state.type]) { + typeIndex[anchorState.state.type] = 0; + } + return [anchorState.id, typeIndex[anchorState.state.type]++]; + }) || []); + }); + public $anchors = computed(() => { return this.$anchorStates.value?.map((anchorState) => anchorState.asTAnchor()) || []; }); @@ -50,8 +60,6 @@ export class BlockState { private blockView: Block; - public readonly dispose; - public constructor( public readonly store: BlockListStore, block: T @@ -113,7 +121,7 @@ export class BlockState { public updateAnchors(anchors: TAnchor[]) { const anchorsMap = new Map(this.$anchorStates.value.map((a) => [a.id, a])); - this.$anchorStates.value = anchors.filter((a) => a.blockId === this.id).map((anchor) => { + this.$anchorStates.value = anchors.map((anchor) => { if (anchorsMap.has(anchor.id)) { const anchorState = anchorsMap.get(anchor.id); anchorState.update(anchor); @@ -125,7 +133,9 @@ export class BlockState { public updateBlock(block: Partial): void { this.$state.value = Object.assign({}, this.$state.value, block); - this.updateAnchors(block.anchors); + if (block.anchors) { + this.updateAnchors(block.anchors); + } this.getViewComponent()?.updateHitBox(this.$geometry.value, true); } diff --git a/src/store/block/BlocksList.ts b/src/store/block/BlocksList.ts index 3a85b13..e8ccce8 100644 --- a/src/store/block/BlocksList.ts +++ b/src/store/block/BlocksList.ts @@ -327,7 +327,6 @@ export class BlockListStore { const selectedBlocks = this.$selectedBlocks.value; selectedBlocks.forEach((block) => { this.deleteAllBlockConnections(block.id); - block.dispose(); }); const newBlocks = this.$blocks.value.filter((block) => !selectedBlocks.includes(block)); this.applyBlocksState(newBlocks); diff --git a/src/stories/Playground/Editor/schema.ts b/src/stories/Playground/Editor/schema.ts index 37f451f..2df7b84 100644 --- a/src/stories/Playground/Editor/schema.ts +++ b/src/stories/Playground/Editor/schema.ts @@ -146,7 +146,7 @@ export function defineConigSchema(monaco: Monaco) { "description": "Anchor index" } }, - "required": ["id", "blockId", "type", "index"] + "required": ["id", "blockId", "type"] } } }, diff --git a/src/stories/Playground/GraphPlayground.tsx b/src/stories/Playground/GraphPlayground.tsx index 8df0018..71fd573 100644 --- a/src/stories/Playground/GraphPlayground.tsx +++ b/src/stories/Playground/GraphPlayground.tsx @@ -1,6 +1,6 @@ import "@gravity-ui/uikit/styles/styles.css"; import { Flex, Text, ThemeProvider } from "@gravity-ui/uikit"; -import React, { useCallback, useLayoutEffect, useRef } from "react"; +import React, { useCallback, useEffect, useLayoutEffect, useRef } from "react"; import { StoryFn } from "storybook/internal/types"; import { Graph, GraphState } from "../../graph"; import { GraphBlock, GraphCanvas, GraphProps, useGraph, useGraphEvent } from "../../react-component"; @@ -9,6 +9,7 @@ import { useFn } from "../../utils/hooks/useFn"; import { TBlock } from "../../components/canvas/blocks/Block"; import { random } from "../../components/canvas/blocks/generate"; +import { EAnchorType } from "../configurations/definitions"; import { ConfigEditor, ConfigEditorController } from "./Editor"; import { createPlaygroundBlock, generatePlaygroundLayout, GravityBlockIS } from "./generateLayout"; import { GravityBlock } from "./GravityBlock"; @@ -95,20 +96,55 @@ export function GraphPLayground() { ]); }); - useGraphEvent(graph, 'connection-create-drop', ({sourceBlockId, sourceAnchorId, targetBlockId, point}) => { - if(!targetBlockId) { - const block = createPlaygroundBlock(point.x, point.y, graph.rootStore.blocksList.$blocksMap.value.size + 1); - graph.api.addBlock(block); + useGraphEvent(graph, 'connection-created', ({sourceBlockId, sourceAnchorId, targetBlockId, targetAnchorId}, event) => { + event.preventDefault(); + const pullSourceAnchor = graph.rootStore.blocksList.getBlockState(sourceBlockId).getAnchorById(sourceAnchorId); + if (pullSourceAnchor.state.type === EAnchorType.IN) { + graph.api.addConnection({ + sourceBlockId: targetBlockId, + sourceAnchorId: targetAnchorId, + targetBlockId: sourceBlockId, + targetAnchorId: sourceAnchorId, + }) + } else { graph.api.addConnection({ - sourceBlockId, - sourceAnchorId, - targetBlockId: block.id, - targetAnchorId: block.anchors[0].id, + sourceBlockId: sourceBlockId, + sourceAnchorId: sourceAnchorId, + targetBlockId: targetBlockId, + targetAnchorId: targetAnchorId, }) + } + updateVisibleConfig(); + }); + + useGraphEvent(graph, 'connection-create-drop', ({sourceBlockId, sourceAnchorId, targetBlockId, point}) => { + if (targetBlockId) { + return; + } + let block: TBlock; + const pullSourceAnchor = graph.rootStore.blocksList.getBlockState(sourceBlockId).getAnchorById(sourceAnchorId); + if (pullSourceAnchor.state.type === EAnchorType.IN) { + block = createPlaygroundBlock(point.x - 126, point.y - 63, graph.rootStore.blocksList.$blocksMap.value.size + 1); + graph.api.addBlock(block); + graph.api.addConnection({ + sourceBlockId: block.id, + sourceAnchorId: block.anchors[1].id, + targetBlockId: sourceBlockId, + targetAnchorId: sourceAnchorId, + }) + } else { + block = createPlaygroundBlock(point.x, point.y - 63, graph.rootStore.blocksList.$blocksMap.value.size + 1); + graph.api.addBlock(block); + graph.api.addConnection({ + sourceBlockId: sourceBlockId, + sourceAnchorId: sourceAnchorId, + targetBlockId: block.id, + targetAnchorId: block.anchors[0].id, + }) + } graph.zoomTo([block.id], {transition: 250 }); updateVisibleConfig(); editorRef?.current.scrollTo(block.id); - } }); useLayoutEffect(() => { @@ -150,6 +186,17 @@ export function GraphPLayground() { } }, [graph]); + useEffect(() => { + const fn = (e) => { + if (e.code === 'Backspace') { + graph.api.deleteSelected(); + updateVisibleConfig(); + } + }; + document.body.addEventListener('keydown', fn); + return () => document.body.removeEventListener('keydown', fn); + }); + return ( @@ -158,7 +205,7 @@ export function GraphPLayground() { - + diff --git a/src/stories/Playground/GravityBlock/GravityBlock.css b/src/stories/Playground/GravityBlock/GravityBlock.css index 2f55a03..913f7a5 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: 3px; + border-width: 2px; padding: var(--g-spacing-3); display: flex; diff --git a/src/stories/Playground/GravityBlock/index.tsx b/src/stories/Playground/GravityBlock/index.tsx index 0fbc49b..92afc60 100644 --- a/src/stories/Playground/GravityBlock/index.tsx +++ b/src/stories/Playground/GravityBlock/index.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { CanvasBlock, EAnchorType, layoutText, TAnchor, TBlockId, TPoint } from "../../.."; +import { Anchor, CanvasBlock, EAnchorType, layoutText, TAnchor, TBlockId, TPoint } from "../../.."; import { PlaygroundBlock } from "./GravityBlock"; import { render } from "../../../utils/renderers/render"; @@ -7,6 +7,13 @@ import { renderSVG } from "../../../utils/renderers/svgPath"; import { TGravityBlock } from "../generateLayout"; import './GravityBlock.css'; +function getAnchorY(index) { + let y = 18 * index; + if (index >= 1) { + y += 8 * index; + } + return y + 18; +} export class GravityBlock extends CanvasBlock { @@ -51,10 +58,31 @@ export class GravityBlock extends CanvasBlock { 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, + zIndex: this.zIndex, + size: 18, + lineWidth: 2, + getPosition, + }, { + key: anchor.id + }); + } + + protected getAnchorsYOffter(type: EAnchorType) { + const anchors = this.connectedState.$state.value.anchors.filter((a) => a.type === type); + const { height } = this.getContentRect(); + return (height - getAnchorY(anchors.length - 1)) / 2; + } + public getAnchorPosition(anchor: TAnchor): TPoint { + const a = this.getAnchorsYOffter(anchor.type as EAnchorType); + const index = this.connectedState.$anchorIndexs.value?.get(anchor.id) || 0; + const y = getAnchorY(index); return { x: anchor.type === EAnchorType.OUT ? this.state.width : 0, - y: this.state.height / 2, + y: a + y, }; } @@ -64,7 +92,7 @@ export class GravityBlock extends CanvasBlock { ctx.fillStyle = this.context.colors.block.text; ctx.textAlign = "center"; ctx.textBaseline = "top"; - const { lines, measures, lineHeight } = layoutText(name, ctx, rect, { font: `500 ${9 / scale}px YS Text`, lineHeight: 9 / scale }) + const { lines, measures } = layoutText(name, ctx, rect, { font: `500 ${9 / scale}px YS Text`, lineHeight: 9 / scale }) const shiftY = rect.height / 2 - measures.height / 2; for (let index = 0; index < lines.length; index++) { const [line, x, y] = lines[index]; diff --git a/src/stories/Playground/Playground.css b/src/stories/Playground/Playground.css index 78a75eb..cc83553 100644 --- a/src/stories/Playground/Playground.css +++ b/src/stories/Playground/Playground.css @@ -30,7 +30,14 @@ .graph-tools { height: 100%; - padding: 20px; + pointer-events: none; + position: absolute; + left: 20px; + z-index: 10; +} + +.graph-tools-zoom { + pointer-events: all; box-sizing: border-box; position: absolute; top: 50%; @@ -39,6 +46,15 @@ transform: translate(0, -50%); } +.graph-tools-settings { + pointer-events: all; + box-sizing: border-box; + position: absolute; + bottom: 20px; + left: 0; + z-index: 10; +} + .button-group .yc-button { border-radius: 0 !important; } diff --git a/src/stories/Playground/Settings.tsx b/src/stories/Playground/Settings.tsx index b84f938..08f119b 100644 --- a/src/stories/Playground/Settings.tsx +++ b/src/stories/Playground/Settings.tsx @@ -14,13 +14,13 @@ const ConnectionArrowsVariants: RadioButtonOption[] = [ { value: 'line', content: 'Hide' }, ]; -export function GraphSettings({graph}: {graph: Graph}) { +export function GraphSettings({ className, graph }: {className: string, graph: Graph}) { const rerender = useRerender(); const settingBtnRef = useRef(); const [settingsOpened, setSettingsOpened] = useState(false); return <> - setSettingsOpened(false)} placement={["right-end"]}> diff --git a/src/stories/Playground/generateLayout.tsx b/src/stories/Playground/generateLayout.tsx index 84b8677..280dc93 100644 --- a/src/stories/Playground/generateLayout.tsx +++ b/src/stories/Playground/generateLayout.tsx @@ -26,13 +26,11 @@ export function createPlaygroundBlock(x: number, y: number, index): TGravityBloc id: `${blockId}_anchor_in`, blockId: blockId, type: EAnchorType.IN, - index: 0 }, { id: `${blockId}_anchor_out`, blockId: blockId, type: EAnchorType.OUT, - index: 0 } ], };