blsmedia/bot
2
0
Fork 0
Code Activity

feat(editor): ♿️ Improve previewing blocks

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-04-02 12:03:21 +02:00
parent 05009814d4
commit 327da3104d
3 changed files with 46 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx
View File

@ -38,8 +38,9 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
const [isMouseDown, setIsMouseDown] = useState(false)
const [isConnecting, setIsConnecting] = useState(false)
const isPreviewing =
previewingEdge?.to.blockId === block.id ||
previewingEdge?.from.blockId === block.id
previewingEdge?.from.blockId === block.id ||
(previewingEdge?.to.blockId === block.id &&
isNotDefined(previewingEdge.to.stepId))
const isStartBlock =
isDefined(block.steps[0]) && block.steps[0].type === 'start'

18
apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNode.tsx
View File

@ -1,6 +1,6 @@
import { Flex } from '@chakra-ui/react'
import { ContextMenu } from 'components/shared/ContextMenu'
import { Coordinates } from 'contexts/GraphContext'
import { Coordinates, useGraph } from 'contexts/GraphContext'
import { NodePosition, useDragDistance } from 'contexts/GraphDndContext'
import { useTypebot } from 'contexts/TypebotContext'
import {
@ -35,8 +35,10 @@ export const ItemNode = ({
onMouseDown,
}: Props) => {
const { typebot } = useTypebot()
const { previewingEdge } = useGraph()
const [isMouseOver, setIsMouseOver] = useState(false)
const itemRef = useRef<HTMLDivElement | null>(null)
const isPreviewing = previewingEdge?.from.itemId === item.id
const isConnectable = !(
typebot?.blocks[indices.blockIndex].steps[
indices.stepIndex
@ -62,17 +64,20 @@ export const ItemNode = ({
{(ref, isOpened) => (
<Flex
data-testid="item"
ref={setMultipleRefs([ref, itemRef])}
align="center"
pos="relative"
ref={setMultipleRefs([ref, itemRef])}
>
<Flex
align="center"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
shadow="sm"
_hover={isReadOnly ? {} : { shadow: 'md' }}
transition="box-shadow 200ms"
borderWidth="1px"
transition="box-shadow 200ms, border-color 200ms"
rounded="md"
borderColor={isOpened ? 'blue.400' : 'gray.100'}
borderWidth={isOpened || isPreviewing ? '2px' : '1px'}
borderColor={isOpened || isPreviewing ? 'blue.400' : 'gray.100'}
margin={isOpened || isPreviewing ? '-1px' : 0}
pointerEvents={isReadOnly ? 'none' : 'all'}
bgColor="white"
w="full"
@ -96,6 +101,7 @@ export const ItemNode = ({
/>
)}
</Flex>
</Flex>
)}
</ContextMenu>
)

8
apps/builder/components/shared/Graph/Nodes/StepNode/StepNode.tsx
View File

@ -51,6 +51,7 @@ export const StepNode = ({
openedStepId,
setOpenedStepId,
setFocusedBlockId,
previewingEdge,
} = useGraph()
const { updateStep } = useTypebot()
const [isConnecting, setIsConnecting] = useState(false)
@ -62,6 +63,8 @@ export const StepNode = ({
)
const stepRef = useRef<HTMLDivElement | null>(null)
const isPreviewing = isConnecting || previewingEdge?.to.stepId === step.id
const onDrag = (position: NodePosition) => {
if (step.type === 'start' || !onMouseDown) return
onMouseDown(position, step)
@ -170,8 +173,9 @@ export const StepNode = ({
flex="1"
userSelect="none"
p="3"
borderWidth="1px"
borderColor={isConnecting || isOpened ? 'blue.400' : 'gray.200'}
borderWidth={isOpened || isPreviewing ? '2px' : '1px'}
borderColor={isOpened || isPreviewing ? 'blue.400' : 'gray.200'}
margin={isOpened || isPreviewing ? '-1px' : 0}
rounded="lg"
cursor={'pointer'}
bgColor="gray.50"