blsmedia/bot
2
0
Fork 0
Code Activity

feat(editor): ✨ Zoom in/out

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-04-08 14:30:46 -05:00
parent 6314ce2f62
commit c5d3b9214d
16 changed files with 336 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,6 +32,7 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
isReadOnly,
focusedBlockId,
setFocusedBlockId,
graphPosition,
} = useGraph()
const { typebot, updateBlock } = useTypebot()
const { setMouseOverBlock, mouseOverBlock } = useStepDnd()
@ -86,11 +87,11 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
if (connectingIds) setConnectingIds({ ...connectingIds, target: undefined })
}
const onDrag = (event: DraggableEvent, draggableData: DraggableData) => {
const onDrag = (_: DraggableEvent, draggableData: DraggableData) => {
const { deltaX, deltaY } = draggableData
updateBlockCoordinates(block.id, {
x: blockCoordinates.x + deltaX,
y: blockCoordinates.y + deltaY,
x: blockCoordinates.x + deltaX / graphPosition.scale,
y: blockCoordinates.y + deltaY / graphPosition.scale,
})
}

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

@ -3,7 +3,7 @@ import {
computeNearestPlaceholderIndex,
useStepDnd,
} from 'contexts/GraphDndContext'
import { Coordinates } from 'contexts/GraphContext'
import { Coordinates, useGraph } from 'contexts/GraphContext'
import { useTypebot } from 'contexts/TypebotContext'
import { ButtonItem, StepIndices, StepWithItems } from 'models'
import React, { useEffect, useRef, useState } from 'react'
@ -25,6 +25,7 @@ export const ItemNodesList = ({
const { typebot, createItem, detachItemFromStep } = useTypebot()
const { draggedItem, setDraggedItem, mouseOverBlock } = useStepDnd()
const placeholderRefs = useRef<HTMLDivElement[]>([])
const { graphPosition } = useGraph()
const blockId = typebot?.blocks[blockIndex].id
const isDraggingOnCurrentBlock =
(draggedItem && mouseOverBlock?.id === blockId) ?? false
@ -182,8 +183,9 @@ export const ItemNodesList = ({
top="0"
left="0"
style={{
transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg)`,
transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg) scale(${graphPosition.scale})`,
}}
transformOrigin="0 0 0"
/>
</Portal>
)}

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

@ -32,7 +32,7 @@ export const StepNodesList = ({
setDraggedStepType,
} = useStepDnd()
const { typebot, createStep, detachStepFromBlock } = useTypebot()
const { isReadOnly } = useGraph()
const { isReadOnly, graphPosition } = useGraph()
const [expandedPlaceholderIndex, setExpandedPlaceholderIndex] = useState<
number | undefined
>()
@ -166,8 +166,9 @@ export const StepNodesList = ({
top="0"
left="0"
style={{
transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg)`,
transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg) scale(${graphPosition.scale})`,
}}
transformOrigin="0 0 0"
/>
</Portal>
)}