@finos/legend-extension-dsl-diagram 7.0.3 → 7.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-extension-dsl-diagram",
-  "version": "7.0.3",
+  "version": "7.0.4",
   "description": "Legend extension for Diagram DSL",
   "keywords": [
     "legend",
@@ -43,27 +43,27 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "9.0.1",
-    "@finos/legend-application-studio": "18.1.0",
-    "@finos/legend-art": "4.0.1",
-    "@finos/legend-graph": "18.0.1",
-    "@finos/legend-shared": "6.1.4",
-    "@finos/legend-storage": "3.0.13",
+    "@finos/legend-application": "10.0.0",
+    "@finos/legend-application-studio": "19.0.0",
+    "@finos/legend-art": "4.1.0",
+    "@finos/legend-graph": "19.0.0",
+    "@finos/legend-shared": "6.1.5",
+    "@finos/legend-storage": "3.0.14",
     "@types/react": "18.0.21",
     "mobx": "6.6.2",
     "mobx-react-lite": "3.4.0",
     "react": "18.2.0",
     "react-dnd": "16.0.1",
     "react-dom": "18.2.0",
-    "serializr": "2.0.5"
+    "serializr": "3.0.1"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.0.20",
-    "@jest/globals": "29.1.2",
+    "@finos/legend-dev-utils": "2.0.21",
+    "@jest/globals": "29.2.1",
     "@testing-library/react": "13.4.0",
     "cross-env": "7.0.3",
     "eslint": "8.25.0",
-    "jest": "29.1.2",
+    "jest": "29.2.1",
     "jest-canvas-mock": "2.4.0",
     "npm-run-all": "4.1.5",
     "rimraf": "3.0.2",

package/src/{DSL_Diagram_DiagramRenderer.ts → DiagramRenderer.ts}

@@ -89,6 +89,7 @@ import {
   relationshipView_simplifyPath,
   relationshipView_setPath,
 } from './stores/studio/DSL_Diagram_GraphModifierHelper.js';
+import { forceDispatchKeyboardEvent } from '@finos/legend-application';
 
 export enum DIAGRAM_INTERACTION_MODE {
   LAYOUT,
@@ -559,7 +560,7 @@ export class DiagramRenderer {
   }
 
   autoRecenter(): void {
-    this.recenter(
+    this.center(
       this.virtualScreen.position.x + this.virtualScreen.rectangle.width / 2,
       this.virtualScreen.position.y + this.virtualScreen.rectangle.height / 2,
     );
@@ -568,7 +569,7 @@ export class DiagramRenderer {
   /**
    * Reset the screen offset
    */
-  private recenter(x: number, y: number): void {
+  private center(x: number, y: number): void {
     this.screenOffset = new Point(
       -x + this.canvasCenter.x,
       -y + this.canvasCenter.y,
@@ -2292,7 +2293,109 @@ export class DiagramRenderer {
     });
   }
 
+  // -------------------------------- Actions ------------------------------
+
+  recenter(): void {
+    if (this.selectedClasses.length !== 0) {
+      const firstClass = getNullableFirstElement(this.selectedClasses);
+      if (firstClass) {
+        this.center(
+          firstClass.position.x + firstClass.rectangle.width / 2,
+          firstClass.position.y + firstClass.rectangle.height / 2,
+        );
+      }
+    } else {
+      this.autoRecenter();
+    }
+  }
+
+  switchToZoomMode(): void {
+    this.changeMode(
+      this.interactionMode !== DIAGRAM_INTERACTION_MODE.ZOOM_IN
+        ? DIAGRAM_INTERACTION_MODE.ZOOM_IN
+        : DIAGRAM_INTERACTION_MODE.ZOOM_OUT,
+      DIAGRAM_RELATIONSHIP_EDIT_MODE.NONE,
+    );
+  }
+
+  switchToViewMode(): void {
+    this.changeMode(
+      DIAGRAM_INTERACTION_MODE.LAYOUT,
+      DIAGRAM_RELATIONSHIP_EDIT_MODE.NONE,
+    );
+  }
+
+  switchToPanMode(): void {
+    this.changeMode(
+      DIAGRAM_INTERACTION_MODE.PAN,
+      DIAGRAM_RELATIONSHIP_EDIT_MODE.NONE,
+    );
+  }
+
+  switchToAddPropertyMode(): void {
+    if (!this.isReadOnly) {
+      this.changeMode(
+        DIAGRAM_INTERACTION_MODE.ADD_RELATIONSHIP,
+        DIAGRAM_RELATIONSHIP_EDIT_MODE.PROPERTY,
+      );
+    }
+  }
+
+  switchToAddInheritanceMode(): void {
+    if (!this.isReadOnly) {
+      this.changeMode(
+        DIAGRAM_INTERACTION_MODE.ADD_RELATIONSHIP,
+        DIAGRAM_RELATIONSHIP_EDIT_MODE.INHERITANCE,
+      );
+    }
+  }
+
+  switchToAddClassMode(): void {
+    if (!this.isReadOnly) {
+      this.changeMode(
+        DIAGRAM_INTERACTION_MODE.ADD_CLASS,
+        DIAGRAM_RELATIONSHIP_EDIT_MODE.NONE,
+      );
+    }
+  }
+
+  ejectProperty(): void {
+    if (!this.isReadOnly) {
+      if (this.mouseOverClassProperty) {
+        if (
+          this.mouseOverClassProperty.genericType.value.rawType instanceof Class
+        ) {
+          this.addClassView(
+            this.mouseOverClassProperty.genericType.value.rawType,
+            this.canvasCoordinateToModelCoordinate(
+              this.eventCoordinateToCanvasCoordinate(
+                new Point(this.cursorPosition.x, this.cursorPosition.y),
+              ),
+            ),
+          );
+        }
+      } else if (this.selectedClassProperty) {
+        if (
+          this.selectedClassProperty.property.genericType.value
+            .rawType instanceof Class
+        ) {
+          this.addClassView(
+            this.selectedClassProperty.property.genericType.value.rawType,
+            this.selectedClassProperty.selectionPoint,
+          );
+        }
+        this.selectedClassProperty = undefined;
+      }
+    }
+  }
+
+  // --------------------------------- Event handler --------------------------
+
   keydown(e: KeyboardEvent): void {
+    // NOTE: Since <canvas> element does not bubble `keydown` event naturally, we will
+    // manually do this in order to take advantage of application keyboard shortcuts service
+    forceDispatchKeyboardEvent(e);
+
     // Remove selected view(s)
     if ('Delete' === e.key) {
       if (!this.isReadOnly) {
@@ -2357,7 +2460,7 @@ export class DiagramRenderer {
             );
           }
         }
-        this.selectedClasses = [];
+        this.setSelectedClasses([]);
         this.drawScreen();
       }
     }
@@ -2390,72 +2493,6 @@ export class DiagramRenderer {
       }
     }
 
-    // Recenter
-    else if ('r' === e.key) {
-      if (this.selectedClasses.length !== 0) {
-        const firstClass = getNullableFirstElement(this.selectedClasses);
-        if (firstClass) {
-          this.recenter(
-            firstClass.position.x + firstClass.rectangle.width / 2,
-            firstClass.position.y + firstClass.rectangle.height / 2,
-          );
-        }
-      } else {
-        this.autoRecenter();
-      }
-    }
-    // Zoom
-    else if ('z' === e.key) {
-      this.changeMode(
-        this.interactionMode !== DIAGRAM_INTERACTION_MODE.ZOOM_IN
-          ? DIAGRAM_INTERACTION_MODE.ZOOM_IN
-          : DIAGRAM_INTERACTION_MODE.ZOOM_OUT,
-        DIAGRAM_RELATIONSHIP_EDIT_MODE.NONE,
-      );
-    }
-
-    // Use View Tool
-    else if ('v' === e.key) {
-      this.changeMode(
-        DIAGRAM_INTERACTION_MODE.LAYOUT,
-        DIAGRAM_RELATIONSHIP_EDIT_MODE.NONE,
-      );
-    }
-    // Use Pan Tool
-    else if ('m' === e.key) {
-      this.changeMode(
-        DIAGRAM_INTERACTION_MODE.PAN,
-        DIAGRAM_RELATIONSHIP_EDIT_MODE.NONE,
-      );
-    }
-    // Use Property Tool
-    else if ('p' === e.key) {
-      if (!this.isReadOnly) {
-        this.changeMode(
-          DIAGRAM_INTERACTION_MODE.ADD_RELATIONSHIP,
-          DIAGRAM_RELATIONSHIP_EDIT_MODE.PROPERTY,
-        );
-      }
-    }
-    // Use Inheritance Tool
-    else if ('i' === e.key) {
-      if (!this.isReadOnly) {
-        this.changeMode(
-          DIAGRAM_INTERACTION_MODE.ADD_RELATIONSHIP,
-          DIAGRAM_RELATIONSHIP_EDIT_MODE.INHERITANCE,
-        );
-      }
-    }
-    // Add Class
-    else if ('c' === e.key) {
-      if (!this.isReadOnly) {
-        this.changeMode(
-          DIAGRAM_INTERACTION_MODE.ADD_CLASS,
-          DIAGRAM_RELATIONSHIP_EDIT_MODE.NONE,
-        );
-      }
-    }
-
     // Hide/show properties for selected element(s)
     else if (e.altKey && 'KeyP' === e.code) {
       if (!this.isReadOnly) {
@@ -2500,38 +2537,6 @@ export class DiagramRenderer {
       }
     }
 
-    // Eject the property
-    else if ('ArrowRight' === e.key) {
-      if (!this.isReadOnly) {
-        if (this.mouseOverClassProperty) {
-          if (
-            this.mouseOverClassProperty.genericType.value.rawType instanceof
-            Class
-          ) {
-            this.addClassView(
-              this.mouseOverClassProperty.genericType.value.rawType,
-              this.canvasCoordinateToModelCoordinate(
-                this.eventCoordinateToCanvasCoordinate(
-                  new Point(this.cursorPosition.x, this.cursorPosition.y),
-                ),
-              ),
-            );
-          }
-        } else if (this.selectedClassProperty) {
-          if (
-            this.selectedClassProperty.property.genericType.value
-              .rawType instanceof Class
-          ) {
-            this.addClassView(
-              this.selectedClassProperty.property.genericType.value.rawType,
-              this.selectedClassProperty.selectionPoint,
-            );
-          }
-          this.selectedClassProperty = undefined;
-        }
-      }
-    }
-
     // Add supertypes of selected classes to the diagram
     else if ('ArrowUp' === e.key) {
       const views = this.getSuperTypeLevels(
@@ -3436,6 +3441,8 @@ export class DiagramRenderer {
     return [];
   }
 
+  // --------------------------------------- Extension -----------------------------------
+
   layoutTaxonomy(
     classViewLevels: ClassView[][],
     diagram: Diagram,

package/src/components/studio/DSL_Diagram_LegendStudioApplicationPlugin.tsx

@@ -53,8 +53,13 @@ import {
   getDiagramSnippetWithOneClassView,
   getDiagramSnippetWithPropertyView,
 } from './DSL_Diagram_CodeSnippets.js';
-import type { DocumentationEntry } from '@finos/legend-application';
+import {
+  collectKeyedCommandConfigEntriesFromConfig,
+  type DocumentationEntry,
+  type KeyedCommandConfigEntry,
+} from '@finos/legend-application';
 import { DSL_DIAGRAM_LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../stores/studio/DSL_Diagram_LegendStudioApplicationNavigationContext.js';
+import { DSL_DIAGRAM_LEGEND_STUDIO_COMMAND_CONFIG } from './DSL_Diagram_LegendStudioCommand.js';
 
 const DIAGRAM_ELEMENT_TYPE = 'DIAGRAM';
 const DIAGRAM_ELEMENT_PROJECT_EXPLORER_DND_TYPE = 'PROJECT_EXPLORER_DIAGRAM';
@@ -67,6 +72,12 @@ export class DSL_Diagram_LegendStudioApplicationPlugin
     super(packageJson.extensions.applicationStudioPlugin, packageJson.version);
   }
 
+  override getExtraKeyedCommandConfigEntries(): KeyedCommandConfigEntry[] {
+    return collectKeyedCommandConfigEntriesFromConfig(
+      DSL_DIAGRAM_LEGEND_STUDIO_COMMAND_CONFIG,
+    );
+  }
+
   override getExtraRequiredDocumentationKeys(): string[] {
     return [
       DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_ELEMENT_DIAGRAM,

package/src/components/studio/DSL_Diagram_LegendStudioCommand.ts

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { CommandConfigData } from '@finos/legend-application';
+
+export enum DSL_DIAGRAM_LEGEND_STUDIO_COMMAND_KEY {
+  RECENTER = 'dsl-diagram.diagram-editor.recenter',
+  USE_ZOOM_TOOL = 'dsl-diagram.diagram-editor.use-zoom-tool',
+  USE_VIEW_TOOL = 'dsl-diagram.diagram-editor.use-view-tool',
+  USE_PAN_TOOL = 'dsl-diagram.diagram-editor.use-pan-tool',
+  USE_PROPERTY_TOOL = 'dsl-diagram.diagram-editor.use-property-tool',
+  USE_INHERITANCE_TOOL = 'dsl-diagram.diagram-editor.use-inheritance-tool',
+  ADD_CLASS = 'dsl-diagram.diagram-editor.add-class',
+  EJECT_PROPERTY = 'dsl-diagram.diagram-editor.eject-property',
+}
+
+export const DSL_DIAGRAM_LEGEND_STUDIO_COMMAND_CONFIG: CommandConfigData = {
+  [DSL_DIAGRAM_LEGEND_STUDIO_COMMAND_KEY.RECENTER]: {
+    title: 'Diagram Editor: Recenter',
+    defaultKeyboardShortcut: 'r',
+  },
+  [DSL_DIAGRAM_LEGEND_STUDIO_COMMAND_KEY.USE_ZOOM_TOOL]: {
+    title: 'Diagram Editor: Use zoom tool',
+    defaultKeyboardShortcut: 'z',
+  },
+  [DSL_DIAGRAM_LEGEND_STUDIO_COMMAND_KEY.USE_VIEW_TOOL]: {
+    title: 'Diagram Editor: Use view tool',
+    defaultKeyboardShortcut: 'v',
+  },
+  [DSL_DIAGRAM_LEGEND_STUDIO_COMMAND_KEY.USE_PAN_TOOL]: {
+    title: 'Diagram Editor: Use pan tool',
+    defaultKeyboardShortcut: 'm',
+  },
+  [DSL_DIAGRAM_LEGEND_STUDIO_COMMAND_KEY.USE_PROPERTY_TOOL]: {
+    title: 'Diagram Editor: Use property tool',
+    defaultKeyboardShortcut: 'p',
+  },
+  [DSL_DIAGRAM_LEGEND_STUDIO_COMMAND_KEY.USE_INHERITANCE_TOOL]: {
+    title: 'Diagram Editor: Use inheritance tool',
+    defaultKeyboardShortcut: 'i',
+  },
+  [DSL_DIAGRAM_LEGEND_STUDIO_COMMAND_KEY.ADD_CLASS]: {
+    title: 'Diagram Editor: Add class',
+    defaultKeyboardShortcut: 'c',
+  },
+  [DSL_DIAGRAM_LEGEND_STUDIO_COMMAND_KEY.EJECT_PROPERTY]: {
+    title: 'Diagram Editor: Eject Property',
+    defaultKeyboardShortcut: 'ArrowRight',
+    when: 'When hovering on a class property',
+  },
+};

package/src/components/studio/DiagramEditor.tsx

@@ -23,7 +23,7 @@ import {
   DIAGRAM_INTERACTION_MODE,
   DIAGRAM_RELATIONSHIP_EDIT_MODE,
   DIAGRAM_ZOOM_LEVELS,
-} from '../../DSL_Diagram_DiagramRenderer.js';
+} from '../../DiagramRenderer.js';
 import {
   type DiagramEditorInlineClassCreatorState,
   type DiagramEditorInlineClassRenamerState,
@@ -35,7 +35,7 @@ import {
 import {
   type ResizablePanelHandlerProps,
   ContextMenu,
-  getControlledResizablePanelProps,
+  getCollapsiblePanelGroupProps,
   BasePopover,
   BlankPanelContent,
   CaretDownIcon,
@@ -94,6 +94,7 @@ import {
   useApplicationStore,
   useApplicationNavigationContext,
   buildElementOption,
+  useCommands,
 } from '@finos/legend-application';
 import {
   ClassFormEditor,
@@ -663,24 +664,30 @@ const DiagramEditorOverlay = observer(
           .width,
       );
 
+    // layout
+    const sidePanelCollapsiblePanelGroupProps = getCollapsiblePanelGroupProps(
+      diagramEditorState.sidePanelDisplayState.size === 0,
+      {
+        classes: ['diagram-editor__overlay__panel'],
+        onStopResize: resizeSidePanel,
+        size: diagramEditorState.sidePanelDisplayState.size,
+      },
+    );
+
     return (
       <ResizablePanelGroup
         className="diagram-editor__overlay"
         orientation="vertical"
       >
-        <ResizablePanel minSize={300}>
+        <ResizablePanel
+          {...sidePanelCollapsiblePanelGroupProps.remainingPanel}
+          minSize={300}
+        >
           <div className="diagram-editor__view-finder" />
         </ResizablePanel>
         <ResizablePanelSplitter className="diagram-editor__overlay__panel-resizer" />
         <ResizablePanel
-          {...getControlledResizablePanelProps(
-            diagramEditorState.sidePanelDisplayState.size === 0,
-            {
-              classes: ['diagram-editor__overlay__panel'],
-              onStopResize: resizeSidePanel,
-              size: diagramEditorState.sidePanelDisplayState.size,
-            },
-          )}
+          {...sidePanelCollapsiblePanelGroupProps.collapsiblePanel}
           direction={-1}
         >
           <div className="panel diagram-editor__side-panel">
@@ -1186,7 +1193,6 @@ const DiagramEditorDiagramCanvas = observer(
         renderer.render();
         renderer.autoRecenter();
       }
-      return diagramEditorState.cleanUp();
     }, [diagramCanvasRef, diagramEditorState]);
 
     useEffect(() => {
@@ -1364,6 +1370,7 @@ const DiagramEditorHeader = observer(
         </div>
         <DropdownMenu
           className="diagram-editor__header__dropdown"
+          title="Zoom..."
           content={
             <MenuContent>
               <MenuContentItem
@@ -1390,13 +1397,9 @@ const DiagramEditorHeader = observer(
             elevation: 7,
           }}
         >
-          <button
-            className="diagram-editor__header__dropdown__label diagram-editor__header__zoomer__dropdown__label"
-            tabIndex={-1}
-            title="Zoom..."
-          >
+          <div className="diagram-editor__header__dropdown__label diagram-editor__header__zoomer__dropdown__label">
             {Math.round(diagramEditorState.renderer.zoom * 100)}%
-          </button>
+          </div>
           <div className="diagram-editor__header__dropdown__trigger diagram-editor__header__zoomer__dropdown__trigger">
             <CaretDownIcon />
           </div>
@@ -1429,6 +1432,8 @@ export const DiagramEditor = observer(() => {
     DSL_DIAGRAM_LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.DIAGRAM_EDITOR,
   );
 
+  useCommands(diagramEditorState);
+
   return (
     <div className="diagram-editor">
       <div className="diagram-editor__header">

package/src/components/studio/InheritanceDiagramRenderer.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { DiagramRenderer } from '../../DSL_Diagram_DiagramRenderer.js';
+import { DiagramRenderer } from '../../DiagramRenderer.js';
 import { uuid } from '@finos/legend-shared';
 import {
   type Class,

package/src/index.ts

@@ -22,7 +22,7 @@ export { DiagramEditorState } from './stores/studio/DiagramEditorState.js';
 export {
   DiagramRenderer,
   DIAGRAM_INTERACTION_MODE,
-} from './DSL_Diagram_DiagramRenderer.js';
+} from './DiagramRenderer.js';
 
 export { Diagram } from './graph/metamodel/pure/packageableElements/diagram/DSL_Diagram_Diagram.js';
 export { ClassView } from './graph/metamodel/pure/packageableElements/diagram/DSL_Diagram_ClassView.js';