✨ (editor) Actions on multiple groups

You can now select groups, move, copy, delete them easily Closes #830, closes #1092
2024-01-23 10:31:31 +01:00
parent 8ec3916471
commit 2c20e96a81
32 changed files with 1043 additions and 282 deletions
--- a/apps/builder/src/features/graph/components/Graph.tsx
+++ b/apps/builder/src/features/graph/components/Graph.tsx
@@ -1,24 +1,34 @@
-import { Flex, FlexProps, useEventListener } from '@chakra-ui/react'
+import { Fade, Flex, FlexProps, useEventListener } from '@chakra-ui/react'
 import React, { useRef, useMemo, useEffect, useState } from 'react'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { BlockV6, PublicTypebotV6, TypebotV6 } from '@typebot.io/schemas'
+import {
+  BlockV6,
+  GroupV6,
+  PublicTypebotV6,
+  TypebotV6,
+} from '@typebot.io/schemas'
 import { useDebounce } from 'use-debounce'
 import GraphElements from './GraphElements'
 import { createId } from '@paralleldrive/cuid2'
-import { useUser } from '@/features/account/hooks/useUser'
 import { ZoomButtons } from './ZoomButtons'
 import { useGesture } from '@use-gesture/react'
-import { GraphNavigation } from '@typebot.io/prisma'
 import { headerHeight } from '@/features/editor/constants'
-import { graphPositionDefaultValue, groupWidth } from '../constants'
+import { graphPositionDefaultValue } from '../constants'
 import { useBlockDnd } from '../providers/GraphDndProvider'
 import { useGraph } from '../providers/GraphProvider'
-import { useGroupsCoordinates } from '../providers/GroupsCoordinateProvider'
 import { Coordinates } from '../types'
 import {
  TotalAnswers,
  TotalVisitedEdges,
 } from '@typebot.io/schemas/features/analytics'
+import { SelectBox } from './SelectBox'
+import { computeSelectBoxDimensions } from '../helpers/computeSelectBoxDimensions'
+import { GroupSelectionMenu } from './GroupSelectionMenu'
+import { isSelectBoxIntersectingWithElement } from '../helpers/isSelectBoxIntersectingWithElement'
+import { useGroupsStore } from '../hooks/useGroupsStore'
+import { useShallow } from 'zustand/react/shallow'
+import { projectMouse } from '../helpers/projectMouse'
+import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts'

 const maxScale = 2
 const minScale = 0.3
@@ -44,22 +54,67 @@ export const Graph = ({
    draggedItem,
    setDraggedItem,
  } = useBlockDnd()
-  const graphContainerRef = useRef<HTMLDivElement | null>(null)
-  const editorContainerRef = useRef<HTMLDivElement | null>(null)
-  const { createGroup } = useTypebot()
+  const { pasteGroups, createGroup } = useTypebot()
  const {
+    isReadOnly,
    setGraphPosition: setGlobalGraphPosition,
    setOpenedBlockId,
    setOpenedItemId,
    setPreviewingEdge,
    connectingIds,
  } = useGraph()
-  const { updateGroupCoordinates } = useGroupsCoordinates()
+  const focusedGroups = useGroupsStore(
+    useShallow((state) => state.focusedGroups)
+  )
+  const {
+    setGroupsCoordinates,
+    blurGroups,
+    setFocusedGroups,
+    updateGroupCoordinates,
+  } = useGroupsStore(
+    useShallow((state) => ({
+      updateGroupCoordinates: state.updateGroupCoordinates,
+      setGroupsCoordinates: state.setGroupsCoordinates,
+      blurGroups: state.blurGroups,
+      setFocusedGroups: state.setFocusedGroups,
+    }))
+  )
+  const groupsInClipboard = useGroupsStore(
+    useShallow((state) => state.groupsInClipboard)
+  )
+
  const [graphPosition, setGraphPosition] = useState(
    graphPositionDefaultValue(
      typebot.events[0].graphCoordinates ?? { x: 0, y: 0 }
    )
  )
+  const [autoMoveDirection, setAutoMoveDirection] = useState<
+    'top' | 'right' | 'bottom' | 'left' | undefined
+  >()
+  const [selectBoxCoordinates, setSelectBoxCoordinates] = useState<
+    | {
+        origin: Coordinates
+        dimension: {
+          width: number
+          height: number
+        }
+      }
+    | undefined
+  >()
+  const [groupRects, setGroupRects] = useState<
+    { groupId: string; rect: DOMRect }[] | undefined
+  >()
+  const [lastMouseClickPosition, setLastMouseClickPosition] = useState<
+    Coordinates | undefined
+  >()
+  const [isSpacePressed, setIsSpacePressed] = useState(false)
+  const [isDragging, setIsDragging] = useState(false)
+
+  const graphContainerRef = useRef<HTMLDivElement | null>(null)
+  const editorContainerRef = useRef<HTMLDivElement | null>(null)
+
+  useAutoMoveBoard(autoMoveDirection, setGraphPosition)
+
  const [debouncedGraphPosition] = useDebounce(graphPosition, 200)
  const transform = useMemo(
    () =>
@@ -68,12 +123,6 @@ export const Graph = ({
      )}px) scale(${graphPosition.scale})`,
    [graphPosition]
  )
-  const { user } = useUser()
-
-  const [autoMoveDirection, setAutoMoveDirection] = useState<
-    'top' | 'right' | 'bottom' | 'left' | undefined
-  >()
-  useAutoMoveBoard(autoMoveDirection, setGraphPosition)

  useEffect(() => {
    editorContainerRef.current = document.getElementById(
@@ -91,6 +140,11 @@ export const Graph = ({
    })
  }, [debouncedGraphPosition, setGlobalGraphPosition])

+  useEffect(() => {
+    setGroupsCoordinates(typebot.groups)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
  const handleMouseUp = (e: MouseEvent) => {
    if (!typebot) return
    if (draggedItem) setDraggedItem(undefined)
@@ -117,7 +171,19 @@ export const Graph = ({
    if (isRightClick) e.stopPropagation()
  }

-  const handleClick = () => {
+  const handlePointerUp = (e: PointerEvent) => {
+    if (
+      !selectBoxCoordinates ||
+      Math.abs(selectBoxCoordinates?.dimension.width) +
+        Math.abs(selectBoxCoordinates?.dimension.height) <
+        5
+    ) {
+      blurGroups()
+      setLastMouseClickPosition(
+        projectMouse({ x: e.clientX, y: e.clientY }, graphPosition)
+      )
+    }
+    setSelectBoxCoordinates(undefined)
    setOpenedBlockId(undefined)
    setOpenedItemId(undefined)
    setPreviewingEdge(undefined)
@@ -125,20 +191,47 @@ export const Graph = ({

  useGesture(
    {
-      onDrag: ({ delta: [dx, dy] }) => {
-        setGraphPosition({
-          ...graphPosition,
-          x: graphPosition.x + dx,
-          y: graphPosition.y + dy,
-        })
+      onDrag: (props) => {
+        if (isSpacePressed) {
+          if (props.first) setIsDragging(true)
+          if (props.last) setIsDragging(false)
+          setGraphPosition({
+            ...graphPosition,
+            x: graphPosition.x + props.delta[0],
+            y: graphPosition.y + props.delta[1],
+          })
+          return
+        }
+        if (isReadOnly) return
+        const currentGroupRects = props.first
+          ? Array.from(document.querySelectorAll('.group')).map((element) => {
+              return {
+                groupId: element.id.split('-')[1],
+                rect: element.getBoundingClientRect(),
+              }
+            })
+          : groupRects
+        if (props.first) setGroupRects(currentGroupRects)
+        const dimensions = computeSelectBoxDimensions(props)
+        setSelectBoxCoordinates(dimensions)
+        const selectedGroups = currentGroupRects!.reduce<string[]>(
+          (groups, element) => {
+            if (isSelectBoxIntersectingWithElement(dimensions, element.rect)) {
+              return [...groups, element.groupId]
+            }
+            return groups
+          },
+          []
+        )
+        if (selectedGroups.length > 0) setFocusedGroups(selectedGroups)
      },
-      onWheel: ({ delta: [dx, dy], pinching }) => {
+      onWheel: ({ shiftKey, delta: [dx, dy], pinching }) => {
        if (pinching) return

        setGraphPosition({
          ...graphPosition,
          x: graphPosition.x - dx,
-          y: graphPosition.y - dy,
+          y: shiftKey ? graphPosition.y : graphPosition.y - dy,
        })
      },
      onPinch: ({ origin: [x, y], offset: [scale] }) => {
@@ -149,8 +242,7 @@ export const Graph = ({
      target: graphContainerRef,
      pinch: {
        scaleBounds: { min: minScale, max: maxScale },
-        modifierKey:
-          user?.graphNavigation === GraphNavigation.MOUSE ? null : 'ctrlKey',
+        modifierKey: 'ctrlKey',
      },
      drag: { pointer: { keys: false } },
    }
@@ -218,11 +310,43 @@ export const Graph = ({
    setAutoMoveDirection(undefined)
  }

+  useKeyboardShortcuts({
+    paste: () => {
+      if (!groupsInClipboard || isReadOnly) return
+      const { groups, oldToNewIdsMapping } = parseGroupsToPaste(
+        groupsInClipboard.groups,
+        lastMouseClickPosition ??
+          projectMouse(
+            {
+              x: window.innerWidth / 2,
+              y: window.innerHeight / 2,
+            },
+            graphPosition
+          )
+      )
+      groups.forEach((group) => {
+        updateGroupCoordinates(group.id, group.graphCoordinates)
+      })
+      pasteGroups(groups, groupsInClipboard.edges, oldToNewIdsMapping)
+      setFocusedGroups(groups.map((g) => g.id))
+    },
+  })
+
+  useEventListener('keydown', (e) => {
+    if (e.key === ' ') setIsSpacePressed(true)
+  })
+  useEventListener('keyup', (e) => {
+    if (e.key === ' ') {
+      setIsSpacePressed(false)
+      setIsDragging(false)
+    }
+  })
+
  useEventListener('mousedown', handleCaptureMouseDown, undefined, {
    capture: true,
  })
  useEventListener('mouseup', handleMouseUp, graphContainerRef.current)
-  useEventListener('click', handleClick, editorContainerRef.current)
+  useEventListener('pointerup', handlePointerUp, editorContainerRef.current)
  useEventListener('mousemove', handleMouseMove)

  // Make sure pinch doesn't interfere with native Safari zoom
@@ -233,13 +357,30 @@ export const Graph = ({
  const zoomIn = () => zoom({ delta: zoomButtonsScaleBlock })
  const zoomOut = () => zoom({ delta: -zoomButtonsScaleBlock })

+  const cursor = isSpacePressed ? (isDragging ? 'grabbing' : 'grab') : 'auto'
+
  return (
    <Flex
      ref={graphContainerRef}
      position="relative"
-      style={{ touchAction: 'none' }}
+      style={{
+        touchAction: 'none',
+        cursor,
+      }}
      {...props}
    >
+      {!isReadOnly && (
+        <>
+          {selectBoxCoordinates && <SelectBox {...selectBoxCoordinates} />}
+          <Fade in={!isReadOnly && focusedGroups.length > 1}>
+            <GroupSelectionMenu
+              focusedGroups={focusedGroups}
+              blurGroups={blurGroups}
+            />
+          </Fade>
+        </>
+      )}
+
      <ZoomButtons onZoomInClick={zoomIn} onZoomOutClick={zoomOut} />
      <Flex
        flex="1"
@@ -269,24 +410,6 @@ export const Graph = ({
  )
 }

-const projectMouse = (
-  mouseCoordinates: Coordinates,
-  graphPosition: Coordinates & { scale: number }
-) => {
-  return {
-    x:
-      (mouseCoordinates.x -
-        graphPosition.x -
-        groupWidth / (3 / graphPosition.scale)) /
-      graphPosition.scale,
-    y:
-      (mouseCoordinates.y -
-        graphPosition.y -
-        (headerHeight + 20 * graphPosition.scale)) /
-      graphPosition.scale,
-  }
-}
-
 const useAutoMoveBoard = (
  autoMoveDirection: 'top' | 'right' | 'bottom' | 'left' | undefined,
  setGraphPosition: React.Dispatch<
@@ -321,3 +444,42 @@ const useAutoMoveBoard = (
      clearInterval(interval)
    }
  }, [autoMoveDirection, setGraphPosition])
+
+const parseGroupsToPaste = (
+  groups: GroupV6[],
+  mousePosition: Coordinates
+): { groups: GroupV6[]; oldToNewIdsMapping: Map<string, string> } => {
+  const farLeftGroup = groups.sort(
+    (a, b) => a.graphCoordinates.x - b.graphCoordinates.x
+  )[0]
+  const farLeftGroupCoord = farLeftGroup.graphCoordinates
+
+  const oldToNewIdsMapping = new Map<string, string>()
+  const newGroups = groups.map((group) => {
+    const newId = createId()
+    oldToNewIdsMapping.set(group.id, newId)
+
+    return {
+      ...group,
+      id: newId,
+      graphCoordinates:
+        group.id === farLeftGroup.id
+          ? mousePosition
+          : {
+              x:
+                mousePosition.x +
+                group.graphCoordinates.x -
+                farLeftGroupCoord.x,
+              y:
+                mousePosition.y +
+                group.graphCoordinates.y -
+                farLeftGroupCoord.y,
+            },
+    }
+  })
+
+  return {
+    groups: newGroups,
+    oldToNewIdsMapping,
+  }
+}