From 585a24a7116c2b11eabb4380b40062bb1d8ab590 Mon Sep 17 00:00:00 2001
From: draedful <schetinin1993@gmail.com>
Date: Thu, 10 Oct 2024 03:08:53 +0300
Subject: [PATCH] playground: add toolbox

---
 src/stories/Playground/GraphPlayground.tsx | 99 ++++++++++++----------
 src/stories/Playground/Playground.css      | 55 +++++++++++-
 src/stories/Playground/Settings.tsx        | 60 +++++++++++++
 src/stories/Playground/Toolbox.tsx         | 39 +++++++++
 src/stories/Playground/hooks.ts            |  9 ++
 5 files changed, 215 insertions(+), 47 deletions(-)
 create mode 100644 src/stories/Playground/Settings.tsx
 create mode 100644 src/stories/Playground/Toolbox.tsx
 create mode 100644 src/stories/Playground/hooks.ts

diff --git a/src/stories/Playground/GraphPlayground.tsx b/src/stories/Playground/GraphPlayground.tsx
index 2c89de7..90fe97d 100644
--- a/src/stories/Playground/GraphPlayground.tsx
+++ b/src/stories/Playground/GraphPlayground.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text, ThemeProvider } from "@gravity-ui/uikit";
+import { Button, Flex, Icon, Popup, RadioButton, RadioButtonOption, Text, ThemeProvider, Tooltip } from "@gravity-ui/uikit";
 import "@gravity-ui/uikit/styles/styles.css";
 import React, { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { StoryFn } from "storybook/internal/types";
@@ -14,54 +14,59 @@ import { GravityBlock } from "./GravityBlock";
 import './Playground.css';
 import { TBlock } from "../../components/canvas/blocks/Block";
 import { random } from "../../components/canvas/blocks/generate";
+import { MagnifierPlus, MagnifierMinus, SquareDashed, Gear } from '@gravity-ui/icons';
+import { GraphSettings } from "./Settings";
+import { Toolbox } from "./Toolbox";
 
 const generated = generatePlaygroundLayout(0, 5);
 
-export function GraphPLayground() {
-  const { graph, setEntities, updateEntities, start } = useGraph({
-    viewConfiguration: {
-      colors: {
-        selection: {
-          background: "rgba(255, 190, 92, 0.1)",
-          border: "rgba(255, 190, 92, 1)",
-        },
-        connection: {
-          background: "rgba(255, 255, 255, 0.5)",
-          selectedBackground: "rgba(234, 201, 74, 1)",
-        },
-        block: {
-          background: "rgba(37, 27, 37, 1)",
-          border: "rgba(229, 229, 229, 0.2)",
-          selectedBorder: "rgba(255, 190, 92, 1)",
-          text: "rgba(255, 255, 255, 1)",
-        },
-        anchor: {
-          background: "rgba(255, 190, 92, 1)"
-        },
-        canvas: {
-          layerBackground: "rgba(22, 13, 27, 1)",
-          belowLayerBackground: "rgba(22, 13, 27, 1)",
-          dots: "rgba(255, 255, 255, 0.2)",
-          border: "rgba(255, 255, 255, 0.3)",
-        }
-      }
-    },
-    settings: {
-      canDragCamera: true,
-      canZoomCamera: true,
-      canDuplicateBlocks: false,
-      canChangeBlockGeometry: ECanChangeBlockGeometry.ALL,
-      canCreateNewConnections: false,
-      showConnectionArrows: false,
-      scaleFontSize: 1,
-      useBezierConnections: true,
-      useBlocksAnchors: true,
-      showConnectionLabels: false,
-      blockComponents: {
-        [GravityBlockIS]: GravityBlock
+const config = {
+  viewConfiguration: {
+    colors: {
+      selection: {
+        background: "rgba(255, 190, 92, 0.1)",
+        border: "rgba(255, 190, 92, 1)",
+      },
+      connection: {
+        background: "rgba(255, 255, 255, 0.5)",
+        selectedBackground: "rgba(234, 201, 74, 1)",
+      },
+      block: {
+        background: "rgba(37, 27, 37, 1)",
+        border: "rgba(229, 229, 229, 0.2)",
+        selectedBorder: "rgba(255, 190, 92, 1)",
+        text: "rgba(255, 255, 255, 1)",
+      },
+      anchor: {
+        background: "rgba(255, 190, 92, 1)"
+      },
+      canvas: {
+        layerBackground: "rgba(22, 13, 27, 1)",
+        belowLayerBackground: "rgba(22, 13, 27, 1)",
+        dots: "rgba(255, 255, 255, 0.2)",
+        border: "rgba(255, 255, 255, 0.3)",
       }
     }
-  });
+  },
+  settings: {
+    canDragCamera: true,
+    canZoomCamera: true,
+    canDuplicateBlocks: false,
+    canChangeBlockGeometry: ECanChangeBlockGeometry.ALL,
+    canCreateNewConnections: false,
+    showConnectionArrows: false,
+    scaleFontSize: 1,
+    useBezierConnections: true,
+    useBlocksAnchors: true,
+    showConnectionLabels: false,
+    blockComponents: {
+      [GravityBlockIS]: GravityBlock
+    }
+  }
+};
+
+export function GraphPLayground() {
+  const { graph, setEntities, updateEntities, start } = useGraph(config);
 
   const updateVisibleConfig = useFn(() => {
     const config = graph.rootStore.getAsConfig();
@@ -147,14 +152,16 @@ export function GraphPLayground() {
     }
   }, [graph]);
 
-
-
   return (
     <ThemeProvider theme="dark">
       <Flex className="wrapper" gap={8}>
         <Flex direction="column" grow={1} className="content graph" gap={6}>
           <Text variant="header-1">Graph viewer</Text>
           <Flex grow={1} className="view graph-editor">
+            <Flex className="graph-tools" direction="column">
+              <Toolbox graph={graph} className="graph-tools-zoom button-group"/>
+              <GraphSettings graph={graph} />
+            </Flex>
             <GraphCanvas onBlockSelectionChange={onSelectBlock} graph={graph} renderBlock={renderBlockFn} />
           </Flex>
         </Flex>
diff --git a/src/stories/Playground/Playground.css b/src/stories/Playground/Playground.css
index 56d7a6a..78a75eb 100644
--- a/src/stories/Playground/Playground.css
+++ b/src/stories/Playground/Playground.css
@@ -21,5 +21,58 @@
 
 .view.config-editor {
   border-radius: 10px;
-  border-color: var(--g-color-base-float-accent-hover);
+  border-color: var(--yc-color-base-float-accent-hover);
 }
+
+.settings-popup {
+  padding: 16px;
+}
+
+.graph-tools {
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  z-index: 10;
+  transform: translate(0, -50%);
+}
+
+.button-group .yc-button {
+  border-radius: 0 !important;
+}
+.button-group .yc-button::before {
+  border-radius: 0 !important;
+}
+.button-group .yc-button::after {
+  border-radius: 0 !important;
+}
+.button-group .yc-button:not(:last-child) {
+  border-bottom: 1px solid var(--yc-color-base-misc-light);
+}
+.button-group .yc-button:first-child {
+  border-top-right-radius: var(--yc-button-border-radius, var(--_--border-radius)) !important;
+  border-top-left-radius: var(--yc-button-border-radius, var(--_--border-radius)) !important;
+}
+.button-group .yc-button:first-child::before {
+  border-top-right-radius: var(--yc-button-border-radius, var(--_--border-radius)) !important;
+  border-top-left-radius: var(--yc-button-border-radius, var(--_--border-radius)) !important;
+}
+.button-group .yc-button:first-child::after {
+  border-top-right-radius: var(--yc-button-border-radius, var(--_--border-radius)) !important;
+  border-top-left-radius: var(--yc-button-border-radius, var(--_--border-radius)) !important;
+}
+.button-group .yc-button:last-child {
+  border-bottom-right-radius: var(--yc-button-border-radius, var(--_--border-radius)) !important;
+  border-bottom-left-radius: var(--yc-button-border-radius, var(--_--border-radius)) !important;
+}
+.button-group .yc-button:last-child::before {
+  border-bottom-right-radius: var(--yc-button-border-radius, var(--_--border-radius)) !important;
+  border-bottom-left-radius: var(--yc-button-border-radius, var(--_--border-radius)) !important;
+}
+.button-group .yc-button:last-child::after {
+  border-bottom-right-radius: var(--yc-button-border-radius, var(--_--border-radius)) !important;
+  border-bottom-left-radius: var(--yc-button-border-radius, var(--_--border-radius)) !important;
+}
+
diff --git a/src/stories/Playground/Settings.tsx b/src/stories/Playground/Settings.tsx
new file mode 100644
index 0000000..a3ac7cc
--- /dev/null
+++ b/src/stories/Playground/Settings.tsx
@@ -0,0 +1,60 @@
+import { Gear } from '@gravity-ui/icons';
+import { Button, Flex, Icon, Popup, RadioButton, RadioButtonOption, Text } from "@gravity-ui/uikit";
+import React, { useRef, useState } from "react";
+import { Graph } from '../../graph';
+import { useRerender } from './hooks';
+
+const ConnectionVariants: RadioButtonOption[] = [
+  { value: 'bezier', content: 'Bezier' },
+  { value: 'line', content: 'Line' },
+];
+
+const ConnectionArrowsVariants: RadioButtonOption[] = [
+  { value: 'bezier', content: 'Show' },
+  { value: 'line', content: 'Hide' },
+];
+
+export function GraphSettings({graph}: {graph: Graph}) {
+
+  const rerender = useRerender();
+  const settingBtnRef = useRef();
+  const [settingsOpened, setSettingsOpened] = useState(false);
+  return <>
+    <Button ref={settingBtnRef} onClick={() => setSettingsOpened((prevOpen) => !prevOpen)}>
+      <Icon data={Gear} />
+    </Button>
+    <Popup anchorRef={settingBtnRef} open={settingsOpened} onClose={() => setSettingsOpened(false)} placement={["right-end"]}>
+      <Flex direction="column" className="settings-popup" gap={3}>
+        <Text variant="subheader-2">Graph settings</Text>
+        <Flex direction="column" gap={2}>
+          <Text variant="subheader-1">Connection type</Text>
+          <RadioButton
+            size="l"
+            onUpdate={(value) => {
+              graph.updateSettings({
+                useBezierConnections: value === ConnectionVariants[0].value
+              });
+              rerender();
+            }}
+            value={ConnectionVariants[graph.rootStore.settings.getConfigFlag('useBezierConnections') ? 0 : 1].value}
+            options={ConnectionVariants}
+          />
+        </Flex>
+        <Flex direction="column" gap={2}>
+          <Text variant="subheader-2">Show arrows</Text>
+          <RadioButton
+            size="l"
+            onUpdate={(value) => {
+              graph.updateSettings({
+                showConnectionArrows: value === ConnectionArrowsVariants[0].value
+              });
+              rerender();
+            }}
+            value={ConnectionArrowsVariants[graph.rootStore.settings.getConfigFlag('showConnectionArrows') ? 0 : 1].value}
+            options={ConnectionArrowsVariants}
+          />
+        </Flex>
+      </Flex>
+    </Popup>
+  </>
+}
\ No newline at end of file
diff --git a/src/stories/Playground/Toolbox.tsx b/src/stories/Playground/Toolbox.tsx
new file mode 100644
index 0000000..1a4e154
--- /dev/null
+++ b/src/stories/Playground/Toolbox.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { Flex, Tooltip, Button, Icon } from "@gravity-ui/uikit";
+import { MagnifierPlus, MagnifierMinus, SquareDashed, Gear } from '@gravity-ui/icons';
+import { Graph } from "../../graph";
+import { useRerender } from './hooks';
+
+export function Toolbox({className, graph}: {className: string, graph: Graph}) {
+  const rerender = useRerender();
+  return <Flex grow={1} justifyContent="center" className={className} direction="column">
+    <Tooltip content="Zoom +" placement="right">
+      <Button
+        onClick={() => {
+          graph.zoom({ scale: graph.cameraService.getCameraScale() + 0.08 });
+          rerender();
+        }}
+        disabled={graph.cameraService.getCameraScale() >= 1}
+      >
+        <Icon data={MagnifierPlus} />
+      </Button>
+    </Tooltip>
+    <Tooltip content="Fit to viewport" placement="right">
+      <Button onClick={() => {
+        graph.zoomTo('center');
+        rerender();
+      }}>
+        <Icon data={SquareDashed} />
+      </Button>
+    </Tooltip>
+    <Tooltip content="Zoom -" placement="right">
+      <Button onClick={() => {
+        graph.zoom({ scale: graph.cameraService.getCameraScale() - 0.08 });
+        rerender();
+      }}
+        disabled={graph.cameraService.getCameraScale() <= 0.01}>
+        <Icon data={MagnifierMinus} />
+      </Button>
+    </Tooltip>
+  </Flex>
+}
\ No newline at end of file
diff --git a/src/stories/Playground/hooks.ts b/src/stories/Playground/hooks.ts
new file mode 100644
index 0000000..14f1d24
--- /dev/null
+++ b/src/stories/Playground/hooks.ts
@@ -0,0 +1,9 @@
+import { useState } from "react";
+import { useFn } from "../../utils/hooks/useFn";
+
+export function useRerender() {
+  const [tick, setTick] = useState(Date.now());
+  return useFn(() => {
+    setTick(Date.now());
+  })
+}
\ No newline at end of file