[3981] Display the diagram palette tools and tool sections in a list

Bug: #3981 Signed-off-by: Florian Barbin <[email protected]> Signed-off-by: Michaël Charfadi <[email protected]>
eclipse-sirius · Nov 27, 2024 · 9b41058 · 9b41058
1 parent 78521ac
commit 9b41058
Show file tree

Hide file tree

Showing 56 changed files with 1,805 additions and 1,032 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -31,6 +31,8 @@
 
 - https://github.com/eclipse-sirius/sirius-web/issues/4110[#4110] [form] Add layout capabilities for form widgets
 - https://github.com/eclipse-sirius/sirius-web/issues/4177[#4177] [table] Add table representation support
+- https://github.com/eclipse-sirius/sirius-web/issues/3990[#3990] [diagram] The palette can now be dragged
+- https://github.com/eclipse-sirius/sirius-web/issues/3981[#3981] [diagram] The palette palette sections are showed as list
 
 === Improvements
 
@@ -363,7 +365,6 @@ A migration participant has been added to automatically keep compatible all diag
 - https://github.com/eclipse-sirius/sirius-web/issues/3932[#3932] [forms] Do not display the 'Delete' button (even disabled) for non-deletable lists
 - https://github.com/eclipse-sirius/sirius-web/issues/3951[#3951] [sirius-web] Provide an error page to redirect users in case of error
 - https://github.com/eclipse-sirius/sirius-web/issues/3974[#3974] [diagram] Add support for `<` and `>` to trigger direct edit
-- https://github.com/eclipse-sirius/sirius-web/issues/3990[#3990] [diagram] Make the diagram contextual palette draggable
 
 
 == v2024.7.0

diff --git a/...lipse/sirius/components/compatibility/services/diagrams/CompatibilityPaletteProvider.java b/...lipse/sirius/components/compatibility/services/diagrams/CompatibilityPaletteProvider.java
@@ -23,6 +23,7 @@
 import org.eclipse.emf.ecore.EObject;
 import org.eclipse.sirius.components.collaborative.diagrams.api.DiagramImageConstants;
 import org.eclipse.sirius.components.collaborative.diagrams.api.IPaletteProvider;
+import org.eclipse.sirius.components.collaborative.diagrams.dto.IPaletteEntry;
 import org.eclipse.sirius.components.collaborative.diagrams.dto.ITool;
 import org.eclipse.sirius.components.collaborative.diagrams.dto.Palette;
 import org.eclipse.sirius.components.collaborative.diagrams.dto.SingleClickOnDiagramElementTool;
@@ -95,7 +96,7 @@ public Palette handle(Object targetElement, Object diagramElement, Object diagra
                 .map(org.eclipse.sirius.diagram.description.DiagramDescription.class::cast)
                 .findFirst();
 
-        List<ToolSection> toolSections = new ArrayList<>();
+        List<IPaletteEntry> toolSections = new ArrayList<>();
         if (optionalSiriusDiagramDescription.isPresent()) {
             org.eclipse.sirius.diagram.description.DiagramDescription siriusDiagramDescription = optionalSiriusDiagramDescription.get();
             List<ToolSection> filteredToolSections = this.getToolSectionFromDiagramDescriptionToolSection(diagramDescription).stream()
@@ -107,7 +108,10 @@ public Palette handle(Object targetElement, Object diagramElement, Object diagra
             toolSections.addAll(this.createExtraToolSections(diagramElementDescription));
         }
         String paletteId = "siriusComponents://palette?diagramId=" + optionalVsmElementId.get();
-        return Palette.newPalette(paletteId).tools(List.of()).toolSections(toolSections).build();
+        return Palette.newPalette(paletteId)
+                .quickAccessTools(List.of())
+                .paletteEntries(toolSections)
+                .build();
     }
 
     private List<ToolSection> getToolSectionFromDiagramDescriptionToolSection(DiagramDescription diagramDescription) {

diff --git a/...src/main/java/org/eclipse/sirius/components/collaborative/diagrams/dto/IPaletteEntry.java b/...src/main/java/org/eclipse/sirius/components/collaborative/diagrams/dto/IPaletteEntry.java
@@ -0,0 +1,23 @@
+/*******************************************************************************
+ * Copyright (c) 2024 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
+ *******************************************************************************/
+package org.eclipse.sirius.components.collaborative.diagrams.dto;
+
+/**
+ * The common interface for elements displayed in the palette.
+ *
+ * @author fbarbin
+ */
+public interface IPaletteEntry {
+
+    String id();
+}
diff --git a/...iagrams/src/main/java/org/eclipse/sirius/components/collaborative/diagrams/dto/ITool.java b/...iagrams/src/main/java/org/eclipse/sirius/components/collaborative/diagrams/dto/ITool.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023 Obeo.
+ * Copyright (c) 2023, 2024 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
@@ -19,9 +19,7 @@
  *
  * @author mcharfadi
  */
-public interface ITool {
-
-    String id();
+public interface ITool extends IPaletteEntry {
 
     String label();
 

diff --git a/...grams/src/main/java/org/eclipse/sirius/components/collaborative/diagrams/dto/Palette.java b/...grams/src/main/java/org/eclipse/sirius/components/collaborative/diagrams/dto/Palette.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023 Obeo.
+ * Copyright (c) 2023, 2024 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
@@ -20,12 +20,12 @@
  *
  * @author frouene
  */
-public record Palette(String id, List<ITool> tools, List<ToolSection> toolSections) {
+public record Palette(String id, List<ITool> quickAccessTools, List<IPaletteEntry> paletteEntries) {
 
     public Palette {
         Objects.requireNonNull(id);
-        Objects.requireNonNull(tools);
-        Objects.requireNonNull(toolSections);
+        Objects.requireNonNull(quickAccessTools);
+        Objects.requireNonNull(paletteEntries);
     }
 
     public static Builder newPalette(String id) {
@@ -43,26 +43,26 @@ public static final class Builder {
 
         private final String id;
 
-        private List<ITool> tools;
+        private List<ITool> quickAccessTools;
 
-        private List<ToolSection> toolSections;
+        private List<IPaletteEntry> paletteEntries;
 
         private Builder(String id) {
             this.id = Objects.requireNonNull(id);
         }
 
-        public Builder tools(List<ITool> tools) {
-            this.tools = Objects.requireNonNull(tools);
+        public Builder quickAccessTools(List<ITool> quickAccessTools) {
+            this.quickAccessTools = Objects.requireNonNull(quickAccessTools);
             return this;
         }
 
-        public Builder toolSections(List<ToolSection> toolSections) {
-            this.toolSections = Objects.requireNonNull(toolSections);
+        public Builder paletteEntries(List<IPaletteEntry> paletteEntries) {
+            this.paletteEntries = Objects.requireNonNull(paletteEntries);
             return this;
         }
 
         public Palette build() {
-            return new Palette(this.id, this.tools, this.toolSections);
+            return new Palette(this.id, this.quickAccessTools, this.paletteEntries);
         }
     }
 

diff --git a/...rc/main/java/org/eclipse/sirius/components/collaborative/diagrams/dto/PaletteDivider.java b/...rc/main/java/org/eclipse/sirius/components/collaborative/diagrams/dto/PaletteDivider.java
@@ -0,0 +1,27 @@
+/*******************************************************************************
+ * Copyright (c) 2024 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
+ *******************************************************************************/
+package org.eclipse.sirius.components.collaborative.diagrams.dto;
+
+import java.util.Objects;
+
+/**
+ * Represents a divider between tools or tool sections in the palette.
+ *
+ * @author fbarbin
+ */
+public record PaletteDivider(String id) implements IPaletteEntry {
+
+    public PaletteDivider {
+        Objects.requireNonNull(id);
+    }
+}
diff --git a/...eclipse/sirius/components/collaborative/diagrams/dto/SingleClickOnDiagramElementTool.java b/...eclipse/sirius/components/collaborative/diagrams/dto/SingleClickOnDiagramElementTool.java
@@ -22,8 +22,13 @@
  *
  * @author mcharfadi
  */
-public record SingleClickOnDiagramElementTool(String id, String label, List<String> iconURL, List<IDiagramElementDescription> targetDescriptions, String dialogDescriptionId,
-                                              boolean appliesToDiagramRoot) implements ITool {
+public record SingleClickOnDiagramElementTool(
+        String id,
+        String label,
+        List<String> iconURL,
+        List<IDiagramElementDescription> targetDescriptions,
+        String dialogDescriptionId,
+        boolean appliesToDiagramRoot) implements ITool {
 
     public SingleClickOnDiagramElementTool {
         Objects.requireNonNull(id);

diff --git a/...pse/sirius/components/collaborative/diagrams/dto/SingleClickOnTwoDiagramElementsTool.java b/...pse/sirius/components/collaborative/diagrams/dto/SingleClickOnTwoDiagramElementsTool.java
@@ -20,7 +20,12 @@
  *
  * @author mcharfadi
  */
-public record SingleClickOnTwoDiagramElementsTool(String id, String label, List<String> iconURL, List<SingleClickOnTwoDiagramElementsCandidate> candidates, String dialogDescriptionId) implements ITool {
+public record SingleClickOnTwoDiagramElementsTool(
+        String id,
+        String label,
+        List<String> iconURL,
+        List<SingleClickOnTwoDiagramElementsCandidate> candidates,
+        String dialogDescriptionId) implements ITool {
 
     public SingleClickOnTwoDiagramElementsTool {
         Objects.requireNonNull(id);

diff --git a/...s/src/main/java/org/eclipse/sirius/components/collaborative/diagrams/dto/ToolSection.java b/...s/src/main/java/org/eclipse/sirius/components/collaborative/diagrams/dto/ToolSection.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023 Obeo.
+ * Copyright (c) 2023, 2024 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
@@ -20,7 +20,7 @@
  *
  * @author mcharfadi
  */
-public record ToolSection(String id, String label, List<String> iconURL, List<ITool> tools) {
+public record ToolSection(String id, String label, List<String> iconURL, List<ITool> tools) implements IPaletteEntry {
 
     public ToolSection {
         Objects.requireNonNull(id);

diff --git a/...ckend/sirius-components-collaborative-diagrams/src/main/resources/schema/diagram.graphqls b/...ckend/sirius-components-collaborative-diagrams/src/main/resources/schema/diagram.graphqls
@@ -266,8 +266,18 @@ type Size {
 
 type Palette {
   id: ID!
-  tools: [Tool]!
-  toolSections: [ToolSection]!
+  quickAccessTools: [Tool]!
+  paletteEntries: [PaletteEntry]!
+}
+
+union PaletteEntry =
+    ToolSection
+  | SingleClickOnDiagramElementTool
+  | SingleClickOnTwoDiagramElementsTool
+  | PaletteDivider
+
+type PaletteDivider {
+  id: ID!
 }
 
 type ToolSection {

diff --git a/...rc/main/java/org/eclipse/sirius/components/diagrams/tests/graphql/PaletteQueryRunner.java b/...rc/main/java/org/eclipse/sirius/components/diagrams/tests/graphql/PaletteQueryRunner.java
@@ -36,15 +36,18 @@ query getPalette($editingContextId: ID!, $representationId: ID!, $diagramElement
                       ... on DiagramDescription {
                         palette(diagramElementId: $diagramElementId) {
                           id
-                          tools {
+                          quickAccessTools {
                             ...ToolFields
                           }
-                          toolSections {
-                            id
-                            label
-                            iconURL
-                            tools {
-                              ...ToolFields
+                          paletteEntries {
+                            ...ToolFields
+                            ... on ToolSection {
+                              id
+                              label
+                              iconURL
+                              tools {
+                                ...ToolFields
+                              }
                             }
                           }
                         }

diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/index.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/index.ts
@@ -58,10 +58,13 @@ export type { NodeContextValue } from './renderer/node/NodeContext.types';
 export { NodeTypeContribution } from './renderer/node/NodeTypeContribution';
 export type { DiagramNodeType } from './renderer/node/NodeTypes.types';
 export { DiagramElementPalette } from './renderer/palette/DiagramElementPalette';
-export type { DiagramPaletteToolContributionComponentProps } from './renderer/palette/DiagramPaletteToolContribution.types';
-export type { GQLToolVariable, GQLToolVariableType } from './renderer/palette/Palette.types';
-export type { DiagramPaletteToolComponentProps } from './renderer/palette/tool/DiagramPaletteTool.types';
-export { diagramPaletteToolExtensionPoint } from './renderer/palette/tool/DiagramPaletteToolExtensionPoints';
+export type { DiagramPaletteToolComponentProps } from './renderer/palette/extensions/DiagramPaletteTool.types';
+export type {
+  DiagramPaletteToolContributionComponentProps,
+  DiagramPaletteToolContributionProps,
+} from './renderer/palette/extensions/DiagramPaletteToolContribution.types';
+export { diagramPaletteToolExtensionPoint } from './renderer/palette/extensions/DiagramPaletteToolExtensionPoints';
+export type { GQLToolVariable, GQLToolVariableType } from './renderer/palette/usePalette.types';
 export type { DiagramPanelActionProps } from './renderer/panel/DiagramPanel.types';
 export { diagramPanelActionExtensionPoint } from './renderer/panel/DiagramPanelExtensionPoints';
 export { DiagramRepresentation } from './representation/DiagramRepresentation';

diff --git a/...diagrams/frontend/sirius-components-diagrams/src/renderer/connector/useConnector.types.ts b/...diagrams/frontend/sirius-components-diagrams/src/renderer/connector/useConnector.types.ts
@@ -60,14 +60,24 @@ export interface GQLDiagramDescription extends GQLRepresentationDescription {
 
 export interface GQLPalette {
   id: string;
+  paletteEntries: GQLPaletteEntry[];
+}
+
+export interface GQLPaletteEntry {
+  id: string;
+  __typename: string;
+}
+export interface GQLPaletteDivider extends GQLPaletteEntry {}
+
+export interface GQLToolSection extends GQLPaletteEntry {
+  label: string;
+  iconURL: string[];
   tools: GQLTool[];
-  toolSections: GQLToolSection[];
 }
 
 export interface GQLToolSection {
   id: string;
   label: string;
-  imageURL: string;
   tools: GQLTool[];
   __typename: string;
 }

diff --git a/...ges/diagrams/frontend/sirius-components-diagrams/src/renderer/delete/useDiagramDelete.tsx b/...ges/diagrams/frontend/sirius-components-diagrams/src/renderer/delete/useDiagramDelete.tsx
@@ -25,7 +25,7 @@ import {
   GQLDeleteFromDiagramVariables,
   GQLDeletionPolicy,
   GQLErrorPayload,
-} from '../palette/Palette.types';
+} from '../palette/usePalette.types';
 import { UseDiagramDeleteValue } from './useDiagramDelete.types';
 
 export const deleteFromDiagramMutation = gql`

diff --git a/.../frontend/sirius-components-diagrams/src/renderer/handles/useConnectionCandidatesQuery.ts b/.../frontend/sirius-components-diagrams/src/renderer/handles/useConnectionCandidatesQuery.ts
@@ -19,11 +19,12 @@ import {
   GQLGetToolSectionsData,
   GQLGetToolSectionsVariables,
   GQLNodeDescription,
+  GQLPaletteEntry,
   GQLRepresentationDescription,
   GQLSingleClickOnTwoDiagramElementsTool,
+  GQLToolSection,
 } from '../connector/useConnector.types';
 import { NodeData } from '../DiagramRenderer.types';
-import { GQLTool } from '../palette/Palette.types';
 
 const getToolSectionsQuery = gql`
   query getToolSections($editingContextId: ID!, $diagramId: ID!, $diagramElementId: ID!) {
@@ -33,12 +34,12 @@ const getToolSectionsQuery = gql`
           description {
             ... on DiagramDescription {
               palette(diagramElementId: $diagramElementId) {
-                tools {
+                paletteEntries {
                   ...ToolFields
-                }
-                toolSections {
-                  tools {
-                    ...ToolFields
+                  ... on ToolSection {
+                    tools {
+                      ...ToolFields
+                    }
                   }
                 }
               }
@@ -68,9 +69,10 @@ const getToolSectionsQuery = gql`
 const isDiagramDescription = (
   representationDescription: GQLRepresentationDescription
 ): representationDescription is GQLDiagramDescription => representationDescription.__typename === 'DiagramDescription';
-const isSingleClickOnTwoDiagramElementsTool = (tool: GQLTool): tool is GQLSingleClickOnTwoDiagramElementsTool =>
-  tool.__typename === 'SingleClickOnTwoDiagramElementsTool';
-
+const isSingleClickOnTwoDiagramElementsTool = (
+  entry: GQLPaletteEntry
+): entry is GQLSingleClickOnTwoDiagramElementsTool => entry.__typename === 'SingleClickOnTwoDiagramElementsTool';
+const isToolSection = (entry: GQLPaletteEntry): entry is GQLToolSection => entry.__typename === 'ToolSection';
 export const useConnectionCandidatesQuery = (
   editingContextId: string,
   diagramId: string,
@@ -90,17 +92,24 @@ export const useConnectionCandidatesQuery = (
   const diagramDescription: GQLRepresentationDescription | null =
     data?.viewer.editingContext.representation.description ?? null;
 
-  const nodeCandidates: GQLNodeDescription[] = useMemo(() => {
+  const collectConnectionToolsFromPaletteEntry = (entry: GQLPaletteEntry): GQLNodeDescription[] => {
     const candidates: GQLNodeDescription[] = [];
-    if (diagramDescription && isDiagramDescription(diagramDescription)) {
-      diagramDescription.palette.tools.filter(isSingleClickOnTwoDiagramElementsTool).forEach((tool) => {
+    if (isSingleClickOnTwoDiagramElementsTool(entry)) {
+      entry.candidates.forEach((candidate) => candidates.push(...candidate.targets));
+    } else if (isToolSection(entry)) {
+      entry.tools.filter(isSingleClickOnTwoDiagramElementsTool).forEach((tool) => {
         tool.candidates.forEach((candidate) => candidates.push(...candidate.targets));
       });
-      diagramDescription.palette.toolSections.forEach((toolSection) => {
-        toolSection.tools.filter(isSingleClickOnTwoDiagramElementsTool).forEach((tool) => {
-          tool.candidates.forEach((candidate) => candidates.push(...candidate.targets));
-        });
-      });
+    }
+    return candidates;
+  };
+
+  const nodeCandidates: GQLNodeDescription[] = useMemo(() => {
+    const candidates: GQLNodeDescription[] = [];
+    if (diagramDescription && isDiagramDescription(diagramDescription)) {
+      diagramDescription.palette.paletteEntries.forEach((entry) =>
+        candidates.push(...collectConnectionToolsFromPaletteEntry(entry))
+      );
     }
 
     return candidates;