From 8953322e532c27612d12b5bb483180b95e3a44ae Mon Sep 17 00:00:00 2001
From: Axel RICHARD <axel.richard@obeo.fr>
Date: Wed, 30 Aug 2023 16:03:35 +0200
Subject: [PATCH] [2313] Support Palette on Edges on react-flow diagrams

Bug: https://github.com/eclipse-sirius/sirius-web/issues/2313
Signed-off-by: Axel RICHARD <axel.richard@obeo.fr>
---
 CHANGELOG.adoc                                |  1 +
 .../src/renderer/DiagramRenderer.tsx          |  8 +++
 .../src/renderer/edge/MultiLabelEdge.tsx      |  2 +
 .../src/renderer/palette/DiagramPalette.tsx   |  2 +-
 .../src/renderer/palette/EdgePalette.tsx      | 52 +++++++++++++++++
 .../src/renderer/palette/EdgePalette.types.ts | 17 ++++++
 .../renderer/palette/EdgePaletteContext.tsx   | 58 +++++++++++++++++++
 .../palette/EdgePaletteContext.types.ts       | 30 ++++++++++
 .../renderer/palette/EdgePalettePortal.tsx    | 27 +++++++++
 .../src/renderer/palette/NodePalette.tsx      |  6 +-
 .../src/renderer/palette/Palette.tsx          | 33 ++++++++---
 .../src/renderer/palette/Palette.types.ts     |  2 +-
 .../src/renderer/palette/useEdgePalette.tsx   | 48 +++++++++++++++
 .../renderer/palette/useEdgePalette.types.ts  | 21 +++++++
 .../representation/DiagramRepresentation.tsx  | 19 +++---
 15 files changed, 306 insertions(+), 20 deletions(-)
 create mode 100644 packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/EdgePalette.tsx
 create mode 100644 packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/EdgePalette.types.ts
 create mode 100644 packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/EdgePaletteContext.tsx
 create mode 100644 packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/EdgePaletteContext.types.ts
 create mode 100644 packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/EdgePalettePortal.tsx
 create mode 100644 packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/useEdgePalette.tsx
 create mode 100644 packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/useEdgePalette.types.ts

diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index f387961528..042004efe3 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -91,6 +91,7 @@ This will be fixed in the next version.
 - https://github.com/eclipse-sirius/sirius-web/issues/2228[#2228] [domain] Creating a domain from the onboard area action now initialize its name.
 - https://github.com/eclipse-sirius/sirius-web/issues/2329[#2329] [form] Change the default representation in the details view for non containment reference from a select widget to a reference widget.
 - https://github.com/eclipse-sirius/sirius-web/issues/2314[#2314] [diagram] Add feedback on edge selection on react-flow diagrams
+- https://github.com/eclipse-sirius/sirius-web/issues/2313[#2313] [diagram] Support edge palette on react-flow diagrams
 
 == v2023.8.0
 
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.tsx
index cc59c5eb36..e0226776ec 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.tsx
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.tsx
@@ -42,6 +42,7 @@ import { ListNode } from './node/ListNode';
 import { RectangularNode } from './node/RectangularNode';
 import { DiagramPalette } from './palette/DiagramPalette';
 import { useDiagramPalette } from './palette/useDiagramPalette';
+import { useEdgePalette } from './palette/useEdgePalette';
 import { DiagramPanel } from './panel/DiagramPanel';
 import { useReconnectEdge } from './reconnect-edge/useReconnectEdge';
 
@@ -70,6 +71,8 @@ export const DiagramRenderer = ({ diagram, selection, setSelection }: DiagramRen
     snapToGrid: false,
   });
   const { onDiagramBackgroundClick, hideDiagramPalette } = useDiagramPalette();
+  const { onEdgeClick } = useEdgePalette();
+
   const { onConnect } = useConnector();
   const { reconnectEdge } = useReconnectEdge();
   const { onDrop, onDragOver } = useDrop();
@@ -177,6 +180,10 @@ export const DiagramRenderer = ({ diagram, selection, setSelection }: DiagramRen
     onDiagramBackgroundClick(event);
   };
 
+  const handleEdgeClick = (event: React.MouseEvent<Element, MouseEvent>) => {
+    onEdgeClick(event);
+  };
+
   const handleSnapToGrid = (snapToGrid: boolean) => setState((prevState) => ({ ...prevState, snapToGrid }));
 
   const onKeyDown = (event: React.KeyboardEvent<Element>) => {
@@ -196,6 +203,7 @@ export const DiagramRenderer = ({ diagram, selection, setSelection }: DiagramRen
       onEdgesChange={handleEdgesChange}
       onEdgeUpdate={reconnectEdge}
       onPaneClick={handlePaneClick}
+      onEdgeClick={handleEdgeClick}
       onMove={() => hideDiagramPalette()}
       onDrop={onDrop}
       onDragOver={onDragOver}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/edge/MultiLabelEdge.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/edge/MultiLabelEdge.tsx
index 568f31cc91..96bd06a2e0 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/edge/MultiLabelEdge.tsx
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/edge/MultiLabelEdge.tsx
@@ -14,6 +14,7 @@ import { Theme, useTheme } from '@material-ui/core/styles';
 import { memo } from 'react';
 import { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath } from 'reactflow';
 import { Label } from '../Label';
+import { EdgePalette } from '../palette/EdgePalette';
 import { MultiLabelEdgeData } from './MultiLabelEdge.types';
 
 const multiLabelEdgeStyle = (
@@ -70,6 +71,7 @@ export const MultiLabelEdge = memo(
           markerEnd={selected ? `${markerEnd?.slice(0, markerEnd.length - 1)}--selected)` : markerEnd}
           markerStart={selected ? `${markerStart?.slice(0, markerStart.length - 1)}--selected)` : markerStart}
         />
+        {selected ? <EdgePalette edgeId={id} labelId={label ? label.id : null} /> : null}
         <EdgeLabelRenderer>
           {beginLabel && (
             <Label
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/DiagramPalette.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/DiagramPalette.tsx
index 7f61ed149f..089363faaa 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/DiagramPalette.tsx
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/DiagramPalette.tsx
@@ -37,7 +37,7 @@ export const DiagramPalette = ({ targetObjectId }: DiagramPaletteProps) => {
   return isOpened && x && y ? (
     <DiagramPalettePortal>
       <div className={classes.toolbar} style={{ position: 'absolute', left: x, top: y }}>
-        <Palette diagramElementId={targetObjectId} onDirectEditClick={() => {}} isNodePalette={false} />
+        <Palette diagramElementId={targetObjectId} onDirectEditClick={() => {}} isDiagramElementPalette={false} />
       </div>
     </DiagramPalettePortal>
   ) : null;
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/EdgePalette.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/EdgePalette.tsx
new file mode 100644
index 0000000000..da38c77d49
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/EdgePalette.tsx
@@ -0,0 +1,52 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import { makeStyles } from '@material-ui/core/styles';
+import { useDiagramDirectEdit } from '../direct-edit/useDiagramDirectEdit';
+import { EdgePaletteProps } from './EdgePalette.types';
+import { EdgePalettePortal } from './EdgePalettePortal';
+import { Palette } from './Palette';
+import { useEdgePalette } from './useEdgePalette';
+
+const useEdgePaletteStyle = makeStyles((theme) => ({
+  toolbar: {
+    background: theme.palette.background.paper,
+    border: '1px solid #d1dadb',
+    boxShadow: '0px 2px 5px #002b3c40',
+    borderRadius: '2px',
+    zIndex: 2,
+    position: 'fixed',
+    display: 'flex',
+    alignItems: 'center',
+  },
+}));
+
+export const EdgePalette = ({ edgeId, labelId }: EdgePaletteProps) => {
+  const { setCurrentlyEditedLabelId } = useDiagramDirectEdit();
+  const { x, y, isOpened } = useEdgePalette();
+  const classes = useEdgePaletteStyle();
+
+  const handleDirectEditClick = () => {
+    if (labelId) {
+      setCurrentlyEditedLabelId('palette', labelId, null);
+    }
+  };
+
+  return isOpened && x && y ? (
+    <EdgePalettePortal>
+      <div className={classes.toolbar} style={{ position: 'absolute', left: x, top: y }}>
+        <Palette diagramElementId={edgeId} onDirectEditClick={handleDirectEditClick} isDiagramElementPalette={true} />
+      </div>
+    </EdgePalettePortal>
+  ) : null;
+};
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/EdgePalette.types.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/EdgePalette.types.ts
new file mode 100644
index 0000000000..28b2eb102e
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/EdgePalette.types.ts
@@ -0,0 +1,17 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+export interface EdgePaletteProps {
+  edgeId: string;
+  labelId: string | null;
+}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/EdgePaletteContext.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/EdgePaletteContext.tsx
new file mode 100644
index 0000000000..cdf98083db
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/EdgePaletteContext.tsx
@@ -0,0 +1,58 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import React, { useCallback, useState } from 'react';
+import {
+  EdgePaletteContextProviderProps,
+  EdgePaletteContextProviderState,
+  EdgePaletteContextValue,
+} from './EdgePaletteContext.types';
+
+const defaultValue: EdgePaletteContextValue = {
+  x: null,
+  y: null,
+  isOpened: false,
+  hideEdgePalette: () => {},
+  showEdgePalette: () => {},
+};
+
+export const EdgePaletteContext = React.createContext<EdgePaletteContextValue>(defaultValue);
+
+export const EdgePaletteContextProvider = ({ children }: EdgePaletteContextProviderProps) => {
+  const [state, setState] = useState<EdgePaletteContextProviderState>({
+    x: null,
+    y: null,
+    isOpened: false,
+  });
+
+  const showPalette = useCallback((x: number, y: number) => {
+    setState((prevState) => ({ ...prevState, x, y, isOpened: true }));
+  }, []);
+
+  const hidePalette = useCallback(() => {
+    setState((prevState) => ({ ...prevState, x: null, y: null, isOpened: false }));
+  }, []);
+
+  return (
+    <EdgePaletteContext.Provider
+      value={{
+        x: state.x,
+        y: state.y,
+        isOpened: state.isOpened,
+        showEdgePalette: showPalette,
+        hideEdgePalette: hidePalette,
+      }}>
+      {children}
+    </EdgePaletteContext.Provider>
+  );
+};
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/EdgePaletteContext.types.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/EdgePaletteContext.types.ts
new file mode 100644
index 0000000000..102358cdc1
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/EdgePaletteContext.types.ts
@@ -0,0 +1,30 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+export interface EdgePaletteContextValue {
+  x: number | null;
+  y: number | null;
+  isOpened: boolean;
+  showEdgePalette: (x: number, y: number) => void;
+  hideEdgePalette: () => void;
+}
+
+export interface EdgePaletteContextProviderProps {
+  children: React.ReactNode;
+}
+
+export interface EdgePaletteContextProviderState {
+  x: number | null;
+  y: number | null;
+  isOpened: boolean;
+}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/EdgePalettePortal.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/EdgePalettePortal.tsx
new file mode 100644
index 0000000000..343f87bba8
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/EdgePalettePortal.tsx
@@ -0,0 +1,27 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+import { ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { ReactFlowState, useStore } from 'reactflow';
+
+const selector = (state: ReactFlowState) => state.domNode?.querySelector('.react-flow__renderer');
+
+export const EdgePalettePortal = ({ children }: { children: ReactNode }) => {
+  const wrapperRef = useStore(selector);
+
+  if (!wrapperRef) {
+    return null;
+  }
+
+  return createPortal(children, wrapperRef);
+};
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/NodePalette.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/NodePalette.tsx
index c3bd1f1fd0..86e4c424ad 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/NodePalette.tsx
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/NodePalette.tsx
@@ -42,7 +42,11 @@ export const NodePalette = ({ diagramElementId, labelId }: NodePaletteProps) =>
 
   return (
     <NodeToolbar className={classes.toolbar} position={Position.Top}>
-      <Palette diagramElementId={diagramElementId} onDirectEditClick={handleDirectEditClick} isNodePalette={true} />
+      <Palette
+        diagramElementId={diagramElementId}
+        onDirectEditClick={handleDirectEditClick}
+        isDiagramElementPalette={true}
+      />
     </NodeToolbar>
   );
 };
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/Palette.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/Palette.tsx
index a2e974c8f3..79dbf8a2f2 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/Palette.tsx
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/Palette.tsx
@@ -17,11 +17,12 @@ import { makeStyles } from '@material-ui/core/styles';
 import TonalityIcon from '@material-ui/icons/Tonality';
 import VisibilityOffIcon from '@material-ui/icons/VisibilityOff';
 import { useCallback, useContext, useEffect, useState } from 'react';
+import { useEdges, useNodes } from 'reactflow';
 import { DiagramContext } from '../../contexts/DiagramContext';
 import { DiagramContextValue } from '../../contexts/DiagramContext.types';
+import { Tool } from '../Tool';
 import { useFadeDiagramElements } from '../fade/useFadeDiagramElements';
 import { useHideDiagramElements } from '../hide/useHideDiagramElements';
-import { Tool } from '../Tool';
 import {
   ContextualPaletteStyleProps,
   GQLCollapsingState,
@@ -157,10 +158,12 @@ const isDiagramDescription = (
   representationDescription: GQLRepresentationDescription
 ): representationDescription is GQLDiagramDescription => representationDescription.__typename === 'DiagramDescription';
 
-export const Palette = ({ diagramElementId, onDirectEditClick, isNodePalette }: PaletteProps) => {
+export const Palette = ({ diagramElementId, onDirectEditClick, isDiagramElementPalette }: PaletteProps) => {
   const [palette, setPalette] = useState<GQLPalette | undefined>(undefined);
   const { fadeDiagramElements } = useFadeDiagramElements();
   const { hideDiagramElements } = useHideDiagramElements();
+  const nodes = useNodes();
+  const edges = useEdges();
   const { diagramId, editingContextId } = useContext<DiagramContextValue>(DiagramContext);
 
   const toolCount =
@@ -169,7 +172,7 @@ export const Palette = ({ diagramElementId, onDirectEditClick, isNodePalette }:
         palette.toolSections.filter(
           (toolSection) => toolSection.tools.filter(isSingleClickOnDiagramElementTool).length > 0
         ).length
-      : 0) + (isNodePalette ? 2 : 0);
+      : 0) + (isDiagramElementPalette ? 2 : 0);
   const classes = usePaletteStyle({ toolCount });
 
   const [getPalette, { loading: paletteLoading, data: paletteData, error: paletteError }] = useLazyQuery<
@@ -235,14 +238,26 @@ export const Palette = ({ diagramElementId, onDirectEditClick, isNodePalette }:
     ]
   );
 
-  const invokeDelete = useCallback(
-    (nodeIds: string[], deletionPolicy: GQLDeletionPolicy) => {
+  const invokeDelete = (diagramElementId: string, deletionPolicy: GQLDeletionPolicy) => {
+    const nodeId = nodes.find((node) => node.id === diagramElementId);
+    if (nodeId) {
+      invokeDeleteMutation([diagramElementId], [], deletionPolicy);
+    } else {
+      const edgeId = edges.find((edge) => edge.id === diagramElementId);
+      if (edgeId) {
+        invokeDeleteMutation([], [diagramElementId], deletionPolicy);
+      }
+    }
+  };
+
+  const invokeDeleteMutation = useCallback(
+    (nodeIds: string[], edgeIds: string[], deletionPolicy: GQLDeletionPolicy) => {
       const input: GQLDeleteFromDiagramInput = {
         id: crypto.randomUUID(),
         editingContextId,
         representationId: diagramId,
         nodeIds,
-        edgeIds: [],
+        edgeIds,
         deletionPolicy,
       };
       deleteElementsMutation({ variables: { input } });
@@ -274,10 +289,10 @@ export const Palette = ({ diagramElementId, onDirectEditClick, isNodePalette }:
         onDirectEditClick();
         break;
       case 'semantic-delete':
-        invokeDelete([diagramElementId], GQLDeletionPolicy.SEMANTIC);
+        invokeDelete(diagramElementId, GQLDeletionPolicy.SEMANTIC);
         break;
       case 'graphical-delete':
-        invokeDelete([diagramElementId], GQLDeletionPolicy.GRAPHICAL);
+        invokeDelete(diagramElementId, GQLDeletionPolicy.GRAPHICAL);
         break;
       case 'expand':
         collapseExpandElement(diagramElementId, GQLCollapsingState.EXPANDED);
@@ -307,7 +322,7 @@ export const Palette = ({ diagramElementId, onDirectEditClick, isNodePalette }:
       {palette?.toolSections.map((toolSection) => (
         <ToolSection toolSection={toolSection} onToolClick={handleToolClick} key={toolSection.id} />
       ))}
-      {isNodePalette ? (
+      {isDiagramElementPalette ? (
         <>
           <IconButton
             className={classes.toolIcon}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/Palette.types.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/Palette.types.ts
index 0f07fecb6d..8405315a13 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/Palette.types.ts
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/Palette.types.ts
@@ -18,7 +18,7 @@ export interface ContextualPaletteStyleProps {
 export interface PaletteProps {
   diagramElementId: string;
   onDirectEditClick: () => void;
-  isNodePalette: boolean;
+  isDiagramElementPalette: boolean;
 }
 
 export interface GQLErrorPayload
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/useEdgePalette.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/useEdgePalette.tsx
new file mode 100644
index 0000000000..0017805c02
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/useEdgePalette.tsx
@@ -0,0 +1,48 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import { useCallback, useContext } from 'react';
+import { useStoreApi } from 'reactflow';
+import { EdgePaletteContext } from './EdgePaletteContext';
+import { EdgePaletteContextValue } from './EdgePaletteContext.types';
+import { UseEdgePaletteValue } from './useEdgePalette.types';
+
+const computePalettePosition = (event: MouseEvent | React.MouseEvent, bounds: DOMRect | undefined) => {
+  return {
+    x: event.clientX - (bounds?.left ?? 0),
+    y: event.clientY - (bounds?.top ?? 0),
+  };
+};
+
+export const useEdgePalette = (): UseEdgePaletteValue => {
+  const { x, y, isOpened, hideEdgePalette, showEdgePalette } = useContext<EdgePaletteContextValue>(EdgePaletteContext);
+  const { domNode } = useStoreApi().getState();
+  const element = domNode?.getBoundingClientRect();
+
+  const onEdgeClick = useCallback(
+    (event: React.MouseEvent<Element, MouseEvent>) => {
+      const palettePosition = computePalettePosition(event, element);
+      showEdgePalette(palettePosition.x, palettePosition.y);
+    },
+    [element]
+  );
+
+  return {
+    x,
+    y,
+    isOpened,
+    hideEdgePalette,
+    showEdgePalette,
+    onEdgeClick,
+  };
+};
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/useEdgePalette.types.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/useEdgePalette.types.ts
new file mode 100644
index 0000000000..ee5c0a2c54
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/palette/useEdgePalette.types.ts
@@ -0,0 +1,21 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+export interface UseEdgePaletteValue {
+  x: number | null;
+  y: number | null;
+  isOpened: boolean;
+  hideEdgePalette: () => void;
+  showEdgePalette: (x: number, y: number) => void;
+  onEdgeClick: (event: React.MouseEvent<Element, MouseEvent>) => void;
+}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/representation/DiagramRepresentation.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/representation/DiagramRepresentation.tsx
index 4b6a6c287a..72f4cb4b51 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/representation/DiagramRepresentation.tsx
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/representation/DiagramRepresentation.tsx
@@ -30,6 +30,7 @@ import { MarkerDefinitions } from '../renderer/edge/MarkerDefinitions';
 import { FullscreenContextProvider } from '../renderer/fullscreen/FullscreenContext';
 import { useLayout } from '../renderer/layout/useLayout';
 import { DiagramPaletteContextProvider } from '../renderer/palette/DiagramPaletteContext';
+import { EdgePaletteContextProvider } from '../renderer/palette/EdgePaletteContext';
 import {
   DiagramRepresentationState,
   GQLDiagramEventData,
@@ -108,14 +109,16 @@ export const DiagramRepresentation = ({
       <DiagramContext.Provider value={{ editingContextId, diagramId: representationId }}>
         <DiagramDirectEditContextProvider>
           <DiagramPaletteContextProvider>
-            <ConnectorContextProvider>
-              <div style={{ display: 'inline-block', position: 'relative' }}>
-                <MarkerDefinitions />
-                <FullscreenContextProvider>
-                  <DiagramRenderer diagram={state.diagram} selection={selection} setSelection={setSelection} />
-                </FullscreenContextProvider>
-              </div>
-            </ConnectorContextProvider>
+            <EdgePaletteContextProvider>
+              <ConnectorContextProvider>
+                <div style={{ display: 'inline-block', position: 'relative' }}>
+                  <MarkerDefinitions />
+                  <FullscreenContextProvider>
+                    <DiagramRenderer diagram={state.diagram} selection={selection} setSelection={setSelection} />
+                  </FullscreenContextProvider>
+                </div>
+              </ConnectorContextProvider>
+            </EdgePaletteContextProvider>
           </DiagramPaletteContextProvider>
         </DiagramDirectEditContextProvider>
       </DiagramContext.Provider>