blsmedia/bot
2
0
Fork 0
Code Activity

♻️ (editor) Migrate from react-draggable to @use-gesture

Browse Source 
Closes #168
This commit is contained in:
Baptiste Arnaud
2022-11-18 07:58:43 +01:00
parent c4a4aa3e83
commit 7632c5426c
11 changed files with 255 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/builder/src/features/graph/components/Endpoints/SourceEndpoint.tsx
View File

@ -39,11 +39,13 @@ export const SourceEndpoint = ({
data-testid="endpoint"
boxSize="32px"
rounded="full"
onMouseDownCapture={handleMouseDown}
onPointerDownCapture={handleMouseDown}
onMouseDownCapture={(e) => e.stopPropagation()}
cursor="copy"
justify="center"
align="center"
pointerEvents="all"
className="prevent-group-drag"
{...props}
>
<Flex
@ -52,6 +54,7 @@ export const SourceEndpoint = ({
align="center"
bgColor="gray.100"
rounded="full"
pointerEvents="none"
>
<Flex
boxSize="13px"

153
apps/builder/src/features/graph/components/Graph.tsx
View File

@ -11,17 +11,17 @@ import {
import { useTypebot } from '@/features/editor'
import { DraggableBlockType, PublicTypebot, Typebot } from 'models'
import { useDebounce } from 'use-debounce'
import { DraggableCore, DraggableData, DraggableEvent } from 'react-draggable'
import GraphElements from './GraphElements'
import cuid from 'cuid'
import { useUser } from '@/features/account'
import { GraphNavigation } from 'db'
import { ZoomButtons } from './ZoomButtons'
import { AnswersCount } from '@/features/analytics'
import { headerHeight } from '@/features/editor'
import { useGesture } from '@use-gesture/react'
import { GraphNavigation } from 'db'
const maxScale = 1.5
const minScale = 0.1
const maxScale = 2
const minScale = 0.3
const zoomButtonsScaleBlock = 0.2
export const Graph = ({
@ -85,20 +85,6 @@ export const Graph = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [debouncedGraphPosition])
const handleMouseWheel = (e: WheelEvent) => {
e.preventDefault()
const isPinchingTrackpad = e.ctrlKey
user?.graphNavigation === GraphNavigation.MOUSE
? zoom(-e.deltaY * 0.001, { x: e.clientX, y: e.clientY })
: isPinchingTrackpad
? zoom(-e.deltaY * 0.01, { x: e.clientX, y: e.clientY })
: setGraphPosition({
...graphPosition,
x: graphPosition.x - e.deltaX,
y: graphPosition.y - e.deltaY,
})
}
const handleMouseUp = (e: MouseEvent) => {
if (!typebot) return
if (draggedItem) setDraggedItem(undefined)
@ -131,33 +117,79 @@ export const Graph = ({
setPreviewingEdge(undefined)
}
const onDrag = (_: DraggableEvent, draggableData: DraggableData) => {
const { deltaX, deltaY } = draggableData
setGraphPosition({
...graphPosition,
x: graphPosition.x + deltaX,
y: graphPosition.y + deltaY,
})
useGesture(
{
onDrag: ({ delta: [dx, dy] }) => {
setGraphPosition({
...graphPosition,
x: graphPosition.x + dx,
y: graphPosition.y + dy,
})
},
onWheel: ({ delta: [dx, dy], pinching }) => {
if (pinching) return
setGraphPosition({
...graphPosition,
x: graphPosition.x - dx,
y: graphPosition.y - dy,
})
},
onPinch: ({ origin: [x, y], offset: [scale] }) => {
zoom({ scale, mousePosition: { x, y } })
},
},
{
target: graphContainerRef,
pinch: {
scaleBounds: { min: minScale, max: maxScale },
modifierKey:
user?.graphNavigation === GraphNavigation.MOUSE ? null : 'ctrlKey',
},
drag: { pointer: { keys: false } },
}
)
const getCenterOfGraph = (): Coordinates => {
const graphWidth = graphContainerRef.current?.clientWidth ?? 0
const graphHeight = graphContainerRef.current?.clientHeight ?? 0
return {
x: graphWidth / 2,
y: graphHeight / 2,
}
}
const zoom = (delta = zoomButtonsScaleBlock, mousePosition?: Coordinates) => {
const { x: mouseX, y } = mousePosition ?? { x: 0, y: 0 }
const zoom = ({
scale,
mousePosition,
delta,
}: {
scale?: number
delta?: number
mousePosition?: Coordinates
}) => {
const { x: mouseX, y } = mousePosition ?? getCenterOfGraph()
const mouseY = y - headerHeight
let scale = graphPosition.scale + delta
let newScale = scale ?? graphPosition.scale + (delta ?? 0)
if (
(scale >= maxScale && graphPosition.scale === maxScale) ||
(scale <= minScale && graphPosition.scale === minScale)
(newScale >= maxScale && graphPosition.scale === maxScale) ||
(newScale <= minScale && graphPosition.scale === minScale)
)
return
scale = scale >= maxScale ? maxScale : scale <= minScale ? minScale : scale
newScale =
newScale >= maxScale
? maxScale
: newScale <= minScale
? minScale
: newScale
const xs = (mouseX - graphPosition.x) / graphPosition.scale
const ys = (mouseY - graphPosition.y) / graphPosition.scale
setGraphPosition({
...graphPosition,
x: mouseX - xs * scale,
y: mouseY - ys * scale,
scale,
x: mouseX - xs * newScale,
y: mouseY - ys * newScale,
scale: newScale,
})
}
@ -173,7 +205,6 @@ export const Graph = ({
setAutoMoveDirection(undefined)
}
useEventListener('wheel', handleMouseWheel, graphContainerRef.current)
useEventListener('mousedown', handleCaptureMouseDown, undefined, {
capture: true,
})
@ -181,35 +212,37 @@ export const Graph = ({
useEventListener('click', handleClick, editorContainerRef.current)
useEventListener('mousemove', handleMouseMove)
const zoomIn = () => zoom(zoomButtonsScaleBlock)
// Make sure pinch doesn't interfere with native Safari zoom
// More info: https://use-gesture.netlify.app/docs/gestures/
useEventListener('gesturestart', (e) => e.preventDefault())
useEventListener('gesturechange', (e) => e.preventDefault())
const zoomOut = () => zoom(-zoomButtonsScaleBlock)
const zoomIn = () => zoom({ delta: zoomButtonsScaleBlock })
const zoomOut = () => zoom({ delta: -zoomButtonsScaleBlock })
return (
<DraggableCore onDrag={onDrag} enableUserSelectHack={false}>
<Flex ref={graphContainerRef} position="relative" {...props}>
<ZoomButtons onZoomInClick={zoomIn} onZoomOutClick={zoomOut} />
<Flex
flex="1"
w="full"
h="full"
position="absolute"
data-testid="graph"
style={{
transform,
}}
willChange="transform"
transformOrigin="0px 0px 0px"
>
<GraphElements
edges={typebot.edges}
groups={typebot.groups}
answersCounts={answersCounts}
onUnlockProPlanClick={onUnlockProPlanClick}
/>
</Flex>
<Flex ref={graphContainerRef} position="relative" {...props}>
<ZoomButtons onZoomInClick={zoomIn} onZoomOutClick={zoomOut} />
<Flex
flex="1"
w="full"
h="full"
position="absolute"
data-testid="graph"
style={{
transform,
}}
willChange="transform"
transformOrigin="0px 0px 0px"
>
<GraphElements
edges={typebot.edges}
groups={typebot.groups}
answersCounts={answersCounts}
onUnlockProPlanClick={onUnlockProPlanClick}
/>
</Flex>
</DraggableCore>
</Flex>
)
}

187
apps/builder/src/features/graph/components/Nodes/GroupNode/GroupNode.tsx
View File

@ -17,11 +17,11 @@ import { BlockNodesList } from '../BlockNode/BlockNodesList'
import { isDefined, isNotDefined } from 'utils'
import { useTypebot, RightPanel, useEditor } from '@/features/editor'
import { GroupNodeContextMenu } from './GroupNodeContextMenu'
import { DraggableCore, DraggableData, DraggableEvent } from 'react-draggable'
import { PlayIcon } from '@/components/icons'
import { useDebounce } from 'use-debounce'
import { ContextMenu } from '@/components/ContextMenu'
import { setMultipleRefs } from '@/utils/helpers'
import { useDrag } from '@use-gesture/react'
type Props = {
group: Group
@ -31,10 +31,12 @@ type Props = {
export const GroupNode = ({ group, groupIndex }: Props) => {
const { updateGroupCoordinates } = useGroupsCoordinates()
const handleGroupDrag = useCallback((newCoord: Coordinates) => {
updateGroupCoordinates(group.id, newCoord)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
const handleGroupDrag = useCallback(
(newCoord: Coordinates) => {
updateGroupCoordinates(group.id, newCoord)
},
[group.id, updateGroupCoordinates]
)
return (
<DraggableGroupNode
@ -133,108 +135,107 @@ const DraggableGroupNode = memo(
setConnectingIds({ ...connectingIds, target: undefined })
}
const onDrag = (_: DraggableEvent, draggableData: DraggableData) => {
const { deltaX, deltaY } = draggableData
const newCoord = {
x: currentCoordinates.x + deltaX / graphPosition.scale,
y: currentCoordinates.y + deltaY / graphPosition.scale,
}
setCurrentCoordinates(newCoord)
onGroupDrag(newCoord)
}
const onDragStart = () => {
setFocusedGroupId(group.id)
setIsMouseDown(true)
}
const startPreviewAtThisGroup = () => {
setStartPreviewAtGroup(group.id)
setRightPanel(RightPanel.PREVIEW)
}
const onDragStop = () => setIsMouseDown(false)
useDrag(
({ first, last, offset: [offsetX, offsetY], event, target }) => {
event.stopPropagation()
if ((target as HTMLElement).classList.contains('prevent-group-drag'))
return
if (first) {
setFocusedGroupId(group.id)
setIsMouseDown(true)
}
if (last) {
setIsMouseDown(false)
}
const newCoord = {
x: offsetX / graphPosition.scale,
y: offsetY / graphPosition.scale,
}
setCurrentCoordinates(newCoord)
onGroupDrag(newCoord)
},
{
target: groupRef,
pointer: { keys: false },
from: () => [
currentCoordinates.x * graphPosition.scale,
currentCoordinates.y * graphPosition.scale,
],
}
)
return (
<ContextMenu<HTMLDivElement>
renderMenu={() => <GroupNodeContextMenu groupIndex={groupIndex} />}
isDisabled={isReadOnly || isStartGroup}
>
{(ref, isOpened) => (
<DraggableCore
enableUserSelectHack={false}
onDrag={onDrag}
onStart={onDragStart}
onStop={onDragStop}
onMouseDown={(e) => e.stopPropagation()}
<Stack
ref={setMultipleRefs([ref, groupRef])}
data-testid="group"
p="4"
rounded="xl"
bgColor="#ffffff"
borderWidth="2px"
borderColor={
isConnecting || isOpened || isPreviewing ? 'blue.400' : '#ffffff'
}
w="300px"
transition="border 300ms, box-shadow 200ms"
pos="absolute"
style={{
transform: `translate(${currentCoordinates?.x ?? 0}px, ${
currentCoordinates?.y ?? 0
}px)`,
}}
onMouseDown={handleMouseDown}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
cursor={isMouseDown ? 'grabbing' : 'pointer'}
shadow="md"
_hover={{ shadow: 'lg' }}
zIndex={focusedGroupId === group.id ? 10 : 1}
>
<Stack
ref={setMultipleRefs([ref, groupRef])}
data-testid="group"
p="4"
rounded="xl"
bgColor="#ffffff"
borderWidth="2px"
borderColor={
isConnecting || isOpened || isPreviewing
? 'blue.400'
: '#ffffff'
}
w="300px"
transition="border 300ms, box-shadow 200ms"
pos="absolute"
style={{
transform: `translate(${currentCoordinates?.x ?? 0}px, ${
currentCoordinates?.y ?? 0
}px)`,
}}
onMouseDown={handleMouseDown}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
cursor={isMouseDown ? 'grabbing' : 'pointer'}
shadow="md"
_hover={{ shadow: 'lg' }}
zIndex={focusedGroupId === group.id ? 10 : 1}
<Editable
value={groupTitle}
onChange={setGroupTitle}
onSubmit={handleTitleSubmit}
fontWeight="semibold"
pointerEvents={isReadOnly || isStartGroup ? 'none' : 'auto'}
pr="8"
>
<Editable
value={groupTitle}
onChange={setGroupTitle}
onSubmit={handleTitleSubmit}
fontWeight="semibold"
pointerEvents={isReadOnly || isStartGroup ? 'none' : 'auto'}
pr="8"
>
<EditablePreview
_hover={{ bgColor: 'gray.200' }}
px="1"
userSelect={'none'}
/>
<EditableInput
minW="0"
px="1"
onMouseDown={(e) => e.stopPropagation()}
/>
</Editable>
{typebot && (
<BlockNodesList
groupId={group.id}
blocks={group.blocks}
groupIndex={groupIndex}
groupRef={ref}
isStartGroup={isStartGroup}
/>
)}
<IconButton
icon={<PlayIcon />}
aria-label={'Preview bot from this group'}
pos="absolute"
right={2}
top={0}
size="sm"
variant="outline"
onClick={startPreviewAtThisGroup}
<EditablePreview
_hover={{ bgColor: 'gray.200' }}
px="1"
userSelect={'none'}
/>
</Stack>
</DraggableCore>
<EditableInput minW="0" px="1" className="prevent-group-drag" />
</Editable>
{typebot && (
<BlockNodesList
groupId={group.id}
blocks={group.blocks}
groupIndex={groupIndex}
groupRef={ref}
isStartGroup={isStartGroup}
/>
)}
<IconButton
icon={<PlayIcon />}
aria-label={'Preview bot from this group'}
pos="absolute"
right={2}
top={0}
size="sm"
variant="outline"
onClick={startPreviewAtThisGroup}
/>
</Stack>
)}
</ContextMenu>
)

14
apps/builder/src/features/graph/providers/GroupsCoordinateProvider.tsx
View File

@ -5,6 +5,7 @@ import {
useEffect,
useContext,
createContext,
useCallback,
} from 'react'
import { GroupsCoordinates, Coordinates } from './GraphProvider'
@ -40,11 +41,14 @@ export const GroupsCoordinatesProvider = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [groups])
const updateGroupCoordinates = (groupId: string, newCoord: Coordinates) =>
setGroupsCoordinates((groupsCoordinates) => ({
...groupsCoordinates,
[groupId]: newCoord,
}))
const updateGroupCoordinates = useCallback(
(groupId: string, newCoord: Coordinates) =>
setGroupsCoordinates((groupsCoordinates) => ({
...groupsCoordinates,
[groupId]: newCoord,
})),
[]
)
return (
<groupsCoordinatesContext.Provider

2
apps/builder/src/features/graph/utils.ts
View File

@ -136,7 +136,7 @@ const computeFourSegments = (
sourcePosition.x + (sourceType === 'right' ? stubLength : -stubLength)
segments.push(`L${firstSegmentX},${sourcePosition.y}`)
const secondSegmentY =
sourcePosition.y + (targetPosition.y - sourcePosition.y) / 2
sourcePosition.y + (targetPosition.y - sourcePosition.y) - stubLength
segments.push(`L${firstSegmentX},${secondSegmentY}`)
segments.push(`L${targetPosition.x},${secondSegmentY}`)