🐛 (editor) Graph connectors still displayed when switching to dynamic…

… buttons

Closes #348

apps/builder/src/features/blocks/inputs/buttons/components/ButtonsBlockSettings.tsx

@@ -6,15 +6,12 @@ import { FormControl, FormLabel, Stack } from '@chakra-ui/react'
 import { ChoiceInputOptions, Variable } from 'models'
 import React from 'react'
 
-type ButtonsOptionsFormProps = {
+type Props = {
   options?: ChoiceInputOptions
   onOptionsChange: (options: ChoiceInputOptions) => void
 }
 
-export const ButtonsOptionsForm = ({
-  options,
-  onOptionsChange,
-}: ButtonsOptionsFormProps) => {
+export const ButtonsBlockSettings = ({ options, onOptionsChange }: Props) => {
   const handleIsMultipleChange = (isMultipleChoice: boolean) =>
     options && onOptionsChange({ ...options, isMultipleChoice })
   const handleButtonLabelChange = (buttonLabel: string) =>

apps/builder/src/features/graph/components/Endpoints/SourceEndpoint.tsx

@@ -23,11 +23,13 @@ export const SourceEndpoint = ({
 }: BoxProps & {
   source: Source
 }) => {
+  const id = source.itemId ?? source.blockId
   const color = useColorModeValue('blue.200', 'blue.100')
   const connectedColor = useColorModeValue('blue.300', 'blue.200')
   const bg = useColorModeValue('gray.100', 'gray.700')
   const { setConnectingIds, previewingEdge, graphPosition } = useGraph()
-  const { setSourceEndpointYOffset: addSourceEndpoint } = useEndpoints()
+  const { setSourceEndpointYOffset, deleteSourceEndpointYOffset } =
+    useEndpoints()
   const { groupsCoordinates } = useGroupsCoordinates()
   const ref = useRef<HTMLDivElement | null>(null)
   const [groupHeight, setGroupHeight] = useState<number>()
@@ -75,12 +77,18 @@ export const SourceEndpoint = ({
 
   useEffect(() => {
     if (!endpointY) return
-    const id = source.itemId ?? source.blockId
-    addSourceEndpoint?.({
+    setSourceEndpointYOffset?.({
       id,
       y: endpointY,
     })
-  }, [addSourceEndpoint, endpointY, source.blockId, source.itemId])
+  }, [setSourceEndpointYOffset, endpointY, id])
+
+  useEffect(
+    () => () => {
+      deleteSourceEndpointYOffset?.(id)
+    },
+    [deleteSourceEndpointYOffset, id]
+  )
 
   useEventListener(
     'pointerdown',

apps/builder/src/features/graph/components/Nodes/BlockNode/SettingsPopoverContent/SettingsPopoverContent.tsx

@@ -36,7 +36,7 @@ import { ZapierSettings } from '@/features/blocks/integrations/zapier'
 import { RedirectSettings } from '@/features/blocks/logic/redirect'
 import { SetVariableSettings } from '@/features/blocks/logic/setVariable'
 import { TypebotLinkForm } from '@/features/blocks/logic/typebotLink'
-import { ButtonsOptionsForm } from '@/features/blocks/inputs/buttons'
+import { ButtonsBlockSettings } from '@/features/blocks/inputs/buttons'
 import { ChatwootSettingsForm } from '@/features/blocks/integrations/chatwoot'
 import { MakeComSettings } from '@/features/blocks/integrations/makeCom'
 import { HelpDocButton } from './HelpDocButton'
@@ -150,7 +150,7 @@ export const BlockSettings = ({
     }
     case InputBlockType.CHOICE: {
       return (
-        <ButtonsOptionsForm
+        <ButtonsBlockSettings
           options={block.options}
           onOptionsChange={handleOptionsChange}
         />

apps/builder/src/features/graph/providers/EndpointsProvider.tsx

@@ -14,6 +14,7 @@ export type Endpoint = {
 export const endpointsContext = createContext<{
   sourceEndpointYOffsets: Map<string, Endpoint>
   setSourceEndpointYOffset?: (endpoint: Endpoint) => void
+  deleteSourceEndpointYOffset?: (endpointId: string) => void
   targetEndpointYOffsets: Map<string, Endpoint>
   setTargetEnpointYOffset?: (endpoint: Endpoint) => void
 }>({
@@ -35,6 +36,13 @@ export const EndpointsProvider = ({ children }: { children: ReactNode }) => {
     )
   }, [])
 
+  const deleteSourceEndpointYOffset = useCallback((endpointId: string) => {
+    setSourceEndpoints((endpoints) => {
+      endpoints.delete(endpointId)
+      return endpoints
+    })
+  }, [])
+
   const setTargetEnpointYOffset = useCallback((endpoint: Endpoint) => {
     setTargetEndpoints((endpoints) =>
       new Map(endpoints).set(endpoint.id, endpoint)
@@ -47,6 +55,7 @@ export const EndpointsProvider = ({ children }: { children: ReactNode }) => {
         sourceEndpointYOffsets,
         targetEndpointYOffsets,
         setSourceEndpointYOffset,
+        deleteSourceEndpointYOffset,
         setTargetEnpointYOffset,
       }}
     >