From e6a5b49b7ae04d98a33c6967a48b906ba5789a76 Mon Sep 17 00:00:00 2001 From: Ivan <8611739+IRBorisov@users.noreply.github.com> Date: Tue, 29 Apr 2025 14:29:28 +0300 Subject: [PATCH] F: Add space mode to ossFlow --- .../features/help/items/ui/help-oss-graph.tsx | 31 ++++++++++++++--- .../src/features/oss/models/oss-layout-api.ts | 2 -- .../editor-oss-graph/graph/block-node.tsx | 12 +++---- .../oss-page/editor-oss-graph/oss-flow.tsx | 33 +++++++++++++++---- rsconcept/frontend/src/styling/reactflow.css | 31 ++++++++++++++--- rsconcept/frontend/src/styling/utilities.css | 8 +++++ 6 files changed, 93 insertions(+), 24 deletions(-) diff --git a/rsconcept/frontend/src/features/help/items/ui/help-oss-graph.tsx b/rsconcept/frontend/src/features/help/items/ui/help-oss-graph.tsx index f595c62e..2996159e 100644 --- a/rsconcept/frontend/src/features/help/items/ui/help-oss-graph.tsx +++ b/rsconcept/frontend/src/features/help/items/ui/help-oss-graph.tsx @@ -3,12 +3,15 @@ import { IconAnimation, IconAnimationOff, IconChild, + IconConceptBlock, IconConnect, IconConsolidation, + IconCoordinates, IconDestroy, IconEdit2, IconExecute, IconFitImage, + IconFixLayout, IconGrid, IconLineStraight, IconLineWave, @@ -16,7 +19,8 @@ import { IconNewRSForm, IconReset, IconRSForm, - IconSave + IconSave, + IconSettings } from '@/components/icons'; import { LinkTopic } from '../../components/link-topic'; @@ -29,9 +33,19 @@ export function HelpOssGraph() {

Настройка графа

+
  • + Сбросить изменения +
  • Вписать в экран
    • +
  • + Исправить расположения +
    • +
  • + Диалог настроек +
    • +
  • Отображение сетки
    • @@ -43,6 +57,9 @@ export function HelpOssGraph() { Анимация +
  • + Отображение координат +
  • черта сверху - Загрузка
  • черта слева - КС @@ -63,11 +80,14 @@ export function HelpOssGraph() { Двойной клик – переход к связанной
  • - Редактирование операции + Новый блок
  • Новая операция
    • +
  • + Редактирование узла +
  • Delete – удалить выбранные
    • @@ -80,10 +100,13 @@ export function HelpOssGraph() {

    Общие

  • - Сбросить изменения + Сохранить положения
  • - Сохранить положения + Space – перемещение экрана +
    • +
  • + Shift – перемещение выделенных элементов в границах родителя
    • diff --git a/rsconcept/frontend/src/features/oss/models/oss-layout-api.ts b/rsconcept/frontend/src/features/oss/models/oss-layout-api.ts index 83d63db4..45e51d36 100644 --- a/rsconcept/frontend/src/features/oss/models/oss-layout-api.ts +++ b/rsconcept/frontend/src/features/oss/models/oss-layout-api.ts @@ -97,8 +97,6 @@ export class LayoutManager { : Math.max(bottom, block.y + block.height + MIN_DISTANCE); } - console.log('left, top, right, bottom', left, top, right, bottom); - for (const operation of operation_nodes) { left = !left ? operation.x - MIN_DISTANCE : Math.min(left, operation.x - MIN_DISTANCE); top = !top ? operation.y - MIN_DISTANCE : Math.min(top, operation.y - MIN_DISTANCE); diff --git a/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/graph/block-node.tsx b/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/graph/block-node.tsx index 5f474eed..272f7a7e 100644 --- a/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/graph/block-node.tsx +++ b/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/graph/block-node.tsx @@ -28,7 +28,7 @@ export function BlockNode(node: BlockInternalNode) { return ( <> - + {showCoordinates ? (
    -
    -
    -
    -
    +
    +
    +
    +
    ({ x: 0, y: 0 }); + const [spacePressed, setSpacePressed] = useState(false); const showCreateOperation = useDialogsStore(state => state.showCreateOperation); const showCreateBlock = useDialogsStore(state => state.showCreateBlock); @@ -128,6 +129,12 @@ export function OssFlow() { } function handleKeyDown(event: React.KeyboardEvent) { + if (event.code === 'Space') { + event.preventDefault(); + event.stopPropagation(); + setSpacePressed(true); + return; + } if (isProcessing) { return; } @@ -164,6 +171,12 @@ export function OssFlow() { } } + function handleKeyUp(event: React.KeyboardEvent) { + if (event.code === 'Space') { + setSpacePressed(false); + } + } + function handleMouseMove(event: React.MouseEvent) { const targetPosition = screenToFlowPosition({ x: event.clientX, y: event.clientY }); setMouseCoords(targetPosition); @@ -174,6 +187,7 @@ export function OssFlow() { tabIndex={-1} className='relative' onKeyDown={handleKeyDown} + onKeyUp={handleKeyUp} onMouseMove={showCoordinates ? handleMouseMove : undefined} > {showCoordinates ? : null} @@ -188,14 +202,18 @@ export function OssFlow() {
    { event.preventDefault(); hideContextMenu(); }} - onNodeDragStart={handleDragStart} - onNodeDrag={handleDrag} - onNodeDragStop={handleDragStop} + nodesDraggable={!spacePressed} + onNodeDragStart={spacePressed ? undefined : handleDragStart} + onNodeDrag={spacePressed ? undefined : handleDrag} + onNodeDragStop={spacePressed ? undefined : handleDragStop} > {showGrid ? : null} diff --git a/rsconcept/frontend/src/styling/reactflow.css b/rsconcept/frontend/src/styling/reactflow.css index 684857bb..7828c0e5 100644 --- a/rsconcept/frontend/src/styling/reactflow.css +++ b/rsconcept/frontend/src/styling/reactflow.css @@ -6,6 +6,8 @@ /* stylelint-disable selector-class-pattern */ .react-flow__handle { + pointer-events: auto; + z-index: var(--z-index-navigation); cursor: default !important; border-radius: 9999px; @@ -16,6 +18,10 @@ .selected & { border-color: var(--color-muted-foreground); } + + .space-mode & { + pointer-events: none !important; + } } .react-flow__resize-control.handle { @@ -31,14 +37,26 @@ &:hover { color: var(--color-foreground); } + + .space-mode & { + pointer-events: none !important; + } } .react-flow__pane { - cursor: default; + cursor: inherit; + + .space-mode & { + cursor: grab; + + &.dragging { + cursor: grabbing; + } + } } .react-flow__edge { - cursor: default; + cursor: inherit; } .react-flow__attribution { @@ -52,8 +70,13 @@ } [class*='react-flow__node-'] { + .space-mode & { + box-shadow: none; + pointer-events: none !important; + } + &:hover:not(.selected) { - box-shadow: 0 0 0 2px var(--color-selected) !important; + box-shadow: 0 0 0 2px var(--color-selected); } } @@ -138,8 +161,6 @@ .react-flow__node-input, .react-flow__node-synthesis { - cursor: pointer; - border-radius: 5px; border-width: 0; diff --git a/rsconcept/frontend/src/styling/utilities.css b/rsconcept/frontend/src/styling/utilities.css index d5e83cba..f1536822 100644 --- a/rsconcept/frontend/src/styling/utilities.css +++ b/rsconcept/frontend/src/styling/utilities.css @@ -205,3 +205,11 @@ --tw-duration: var(--duration-move); transition-duration: var(--duration-move); } + +@utility cc-graph-interactive { + pointer-events: auto; + + .space-mode & { + pointer-events: none; + } +}