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

12
apps/builder/package.json
View File

@ -24,6 +24,7 @@
"@dnd-kit/utilities": "3.2.0",
"@emotion/react": "11.10.5",
"@emotion/styled": "11.10.5",
"@faire/mjml-react": "2.1.4",
"@giphy/js-fetch-api": "4.4.0",
"@giphy/js-types": "4.2.1",
"@giphy/react-components": "6.2.0",
@ -38,6 +39,7 @@
"@udecode/plate-serializer-html": "18.9.0",
"@udecode/plate-ui-link": "18.9.1",
"@udecode/plate-ui-toolbar": "18.9.0",
"@use-gesture/react": "^10.2.22",
"aws-sdk": "2.1254.0",
"bot-engine": "workspace:*",
"browser-image-compression": "2.0.0",
@ -46,6 +48,7 @@
"cuid": "2.1.8",
"deep-object-diff": "1.1.9",
"dequal": "2.0.3",
"emails": "workspace:*",
"emojilib": "3.0.7",
"focus-visible": "5.2.0",
"framer-motion": "7.6.6",
@ -68,7 +71,6 @@
"qs": "6.11.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-draggable": "4.4.5",
"slate": "0.85.0",
"slate-history": "0.85.0",
"slate-hyperscript": "0.77.0",
@ -79,9 +81,7 @@
"swr": "1.3.0",
"tinycolor2": "1.4.2",
"typebot-js": "workspace:*",
"use-debounce": "8.0.4",
"emails": "workspace:*",
"@faire/mjml-react": "2.1.4"
"use-debounce": "8.0.4"
},
"devDependencies": {
"@babel/core": "7.20.2",
@ -102,6 +102,7 @@
"@types/tinycolor2": "1.4.3",
"@typescript-eslint/eslint-plugin": "5.43.0",
"@typescript-eslint/parser": "5.43.0",
"configs": "workspace:*",
"db": "workspace:*",
"dotenv": "16.0.3",
"eslint": "8.27.0",
@ -110,7 +111,6 @@
"models": "workspace:*",
"next-transpile-modules": "10.0.0",
"typescript": "4.8.4",
"utils": "workspace:*",
"configs": "workspace:*"
"utils": "workspace:*"
}
}

13
apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootLogo.tsx
View File

@ -7,20 +7,13 @@ export const ChatwootLogo = (props: IconProps) => (
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g
id="Square-logo"
stroke="none"
stroke-width="1"
fill="none"
fill-rule="evenodd"
>
<g id="chatwoot_logo" fill-rule="nonzero">
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="chatwoot_logo" fillRule="nonzero">
<circle id="Oval" fill="#47A7F6" cx="256" cy="256" r="256"></circle>
<path
d="M362.807947,368.807947 L244.122956,368.807947 C178.699407,368.807947 125.456954,315.561812 125.456954,250.12177 C125.456954,184.703089 178.699407,131.456954 244.124143,131.456954 C309.565494,131.456954 362.807947,184.703089 362.807947,250.12177 L362.807947,368.807947 Z"
id="Fill-1"
stroke="#FFFFFF"
stroke-width="6"
strokeWidth="6"
fill="#FFFFFF"
></path>
</g>

23
apps/builder/src/features/editor/components/EditorSettingsForm.tsx
View File

@ -10,19 +10,20 @@ import {
import { MouseIcon, LaptopIcon } from '@/components/icons'
import { useUser } from '@/features/account'
import { GraphNavigation } from 'db'
import React, { useEffect, useState } from 'react'
import React, { useState } from 'react'
export const EditorSettingsForm = () => {
const { user, saveUser } = useUser()
const [value, setValue] = useState<string>(
user?.graphNavigation ?? GraphNavigation.TRACKPAD
)
type Props = {
defaultGraphNavigation: GraphNavigation
}
useEffect(() => {
if (user?.graphNavigation === value) return
export const EditorSettingsForm = ({ defaultGraphNavigation }: Props) => {
const { saveUser } = useUser()
const [value, setValue] = useState<string>(defaultGraphNavigation)
const changeEditorNavigation = (value: string) => {
setValue(value)
saveUser({ graphNavigation: value as GraphNavigation }).then()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [value])
}
const options = [
{
@ -43,7 +44,7 @@ export const EditorSettingsForm = () => {
return (
<Stack spacing={6}>
<Heading size="md">Editor Navigation</Heading>
<RadioGroup onChange={setValue} value={value}>
<RadioGroup onChange={changeEditorNavigation} value={value}>
<HStack spacing={4} w="full" align="stretch">
{options.map((option) => (
<VStack

7
apps/builder/src/features/editor/components/EditorSettingsModal.tsx
View File

@ -1,3 +1,4 @@
import { useUser } from '@/features/account'
import {
Modal,
ModalBody,
@ -14,13 +15,17 @@ type Props = {
}
export const EditorSettingsModal = ({ isOpen, onClose }: Props) => {
const { user } = useUser()
return (
<Modal isOpen={isOpen} onClose={onClose} size="xl">
<ModalOverlay />
<ModalContent>
<ModalCloseButton />
<ModalBody pt="12" pb="8" px="8">
<EditorSettingsForm />
{user?.graphNavigation && (
<EditorSettingsForm defaultGraphNavigation={user.graphNavigation} />
)}
</ModalBody>
</ModalContent>
</Modal>

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}`)

16
apps/builder/src/features/workspace/components/WorkspaceSettingsModal.tsx
View File

@ -15,7 +15,7 @@ import {
UsersIcon,
} from '@/components/icons'
import { EmojiOrImageIcon } from '@/components/EmojiOrImageIcon'
import { User, Workspace } from 'db'
import { GraphNavigation, User, Workspace } from 'db'
import { useState } from 'react'
import { MembersList } from './MembersList'
import { WorkspaceSettingsForm } from './WorkspaceSettingsForm'
@ -146,9 +146,13 @@ export const WorkspaceSettingsModal = ({
</Flex>
</Stack>
{isOpen && (
{isOpen && user.graphNavigation && (
<Flex flex="1" p="10">
<SettingsContent tab={selectedTab} onClose={onClose} />
<SettingsContent
tab={selectedTab}
onClose={onClose}
defaultGraphNavigation={user.graphNavigation}
/>
</Flex>
)}
</ModalContent>
@ -158,16 +162,20 @@ export const WorkspaceSettingsModal = ({
const SettingsContent = ({
tab,
defaultGraphNavigation,
onClose,
}: {
tab: SettingsTab
defaultGraphNavigation: GraphNavigation
onClose: () => void
}) => {
switch (tab) {
case 'my-account':
return <MyAccountForm />
case 'user-settings':
return <EditorSettingsForm />
return (
<EditorSettingsForm defaultGraphNavigation={defaultGraphNavigation} />
)
case 'workspace-settings':
return <WorkspaceSettingsForm onClose={onClose} />
case 'members':