[1269] Prevent dropping elements in a read only diagram

Bug: #1269 Signed-off-by: Nicolas Vannier <nicolas.vannier@obeo.fr>
eclipse-sirius · Sep 1, 2022 · 06f53b1 · 06f53b1
1 parent 006df30
commit 06f53b1
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 12 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -49,6 +49,7 @@ This allows representation precondition expressions to be more precise as they k
 - https://github.com/eclipse-sirius/sirius-components/issues/1231[#1231] [releng] Fix every unit tests provided in the various frontend packages
 - https://github.com/eclipse-sirius/sirius-components/issues/1318[#1318] [studio] Java service classes used by studios (via `IJavaServiceProvider`) can now ask to be injected with any Spring bean available in the application context (for example `IObjectService` or other Sirius Components services they need for their implementation).
 - https://github.com/eclipse-sirius/sirius-components/issues/1288[#1288] [core] Improve support for precondition expression from representation description
+- https://github.com/eclipse-sirius/sirius-components/issues/1269[#1269] [diagram] Prevent dropping elements in a read only diagram
 
 === New features
 

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/droparea/DropArea.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/droparea/DropArea.tsx
@@ -65,6 +65,7 @@ export const DropArea = ({
   invokeHover,
   convertInSprottyCoordinate,
   children,
+  readOnly,
 }: DropAreaProps) => {
   const [{ value, context }, dispatch] = useMachine<DropAreaContext, DropEvent>(dropAreaMachine);
   const { toast } = value as SchemaValue;
@@ -150,17 +151,25 @@ export const DropArea = ({
 
   const handleDrop = (event) => {
     event.preventDefault();
-    const dragSourcesStringified = event.dataTransfer.getData(DRAG_SOURCES_TYPE);
-    if (dragSourcesStringified) {
-      const sources = JSON.parse(dragSourcesStringified);
-      if (Array.isArray(sources)) {
-        const sourceIds = sources.filter((source) => source?.id).map((source) => source.id);
-        if (sourceIds.length > 0) {
-          const diagramElementId = searchId(event.target);
-          if (diagramElementId) {
-            dropElement(sourceIds, event.clientX, event.clientY, diagramElementId);
-          } else {
-            dropElement(sourceIds, event.clientX, event.clientY);
+    if (readOnly) {
+      const showToastEvent: ShowToastEvent = {
+        type: 'SHOW_TOAST',
+        message: 'This representation is currently read-only',
+      };
+      dispatch(showToastEvent);
+    } else {
+      const dragSourcesStringified = event.dataTransfer.getData(DRAG_SOURCES_TYPE);
+      if (dragSourcesStringified) {
+        const sources = JSON.parse(dragSourcesStringified);
+        if (Array.isArray(sources)) {
+          const sourceIds = sources.filter((source) => source?.id).map((source) => source.id);
+          if (sourceIds.length > 0) {
+            const diagramElementId = searchId(event.target);
+            if (diagramElementId) {
+              dropElement(sourceIds, event.clientX, event.clientY, diagramElementId);
+            } else {
+              dropElement(sourceIds, event.clientX, event.clientY);
+            }
           }
         }
       }

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/droparea/DropArea.types.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/droparea/DropArea.types.ts
@@ -18,4 +18,5 @@ export interface DropAreaProps {
   invokeHover: (id: string, mouseIsHover: boolean) => void;
   convertInSprottyCoordinate: (x: number, y: number) => Promise<{ x: number; y: number }>;
   children: React.ReactNode;
+  readOnly: boolean;
 }
diff --git a/...diagrams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.tsx b/...diagrams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.tsx
@@ -1053,7 +1053,8 @@ export const DiagramRepresentation = ({
         editingContextId={editingContextId}
         representationId={representationId}
         invokeHover={invokeHover}
-        convertInSprottyCoordinate={convertInSprottyCoordinate}>
+        convertInSprottyCoordinate={convertInSprottyCoordinate}
+        readOnly={readOnly}>
         <div id="diagram-wrapper" className={classes.diagramWrapper}>
           <div ref={diagramDomElement} id="diagram" className={classes.diagram} />
           {contextualPaletteContent}