@finos/legend-extension-dsl-diagram 7.1.47 → 7.1.49

package/src/DiagramRenderer.ts

@@ -929,6 +929,20 @@ export class DiagramRenderer {
     );
   }
 
+  /**
+   * Mouse events' coordinate x,y are relative to the viewport, not the canvas element
+   * so we need to calculate them relative to the canvas element
+   */
+  resolveMouseEventCoordinate(e: MouseEvent): Point {
+    if (e.target instanceof HTMLElement) {
+      const targetEl = getElementPosition(e.target);
+      return new Point(targetEl.x + e.offsetX, targetEl.y + e.offsetY);
+    }
+    // NOTE: this is a fallback, should not happen
+    // since all mouse events shoud target the canvas element
+    return new Point(e.x, e.y);
+  }
+
   eventCoordinateToCanvasCoordinate(point: Point): Point {
     return new Point(
       point.x - this.divPosition.x + this.div.scrollLeft,
@@ -987,8 +1001,14 @@ export class DiagramRenderer {
           const box = this.drawLinePropertyText(
             // NOTE: by the way we compute the full path, it would guarantee
             // to always have at least 2 points
-            fullPath[fullPath.length - 2] as Point,
-            fullPath[fullPath.length - 1] as Point,
+            guaranteeNonNullable(
+              fullPath[fullPath.length - 2],
+              'Diagram path expected to have at least 2 points',
+            ),
+            guaranteeNonNullable(
+              fullPath[fullPath.length - 1],
+              'Diagram path expected to have at least 2 points',
+            ),
             relationshipView.to.classView.value,
             relationshipView.property.value,
             false,
@@ -1039,19 +1059,14 @@ export class DiagramRenderer {
     // NOTE: we cap the minimum zoom level to avoid negative zoom
     newZoomLevel = Math.max(newZoomLevel, MIN_ZOOM_LEVEL);
 
-    const canvasZoomCenterPosition = this.canvasCoordinateToModelCoordinate(
-      this.eventCoordinateToCanvasCoordinate(point),
-    );
     const currentZoomLevel = this.zoom;
     this.setZoomLevel(newZoomLevel);
 
     this.screenOffset = new Point(
-      ((canvasZoomCenterPosition.x - this.canvasCenter.x) *
-        (currentZoomLevel - newZoomLevel) +
+      ((point.x - this.canvasCenter.x) * (currentZoomLevel - newZoomLevel) +
         this.screenOffset.x * currentZoomLevel) /
         newZoomLevel,
-      ((canvasZoomCenterPosition.y - this.canvasCenter.y) *
-        (currentZoomLevel - newZoomLevel) +
+      ((point.y - this.canvasCenter.y) * (currentZoomLevel - newZoomLevel) +
         this.screenOffset.y * currentZoomLevel) /
         newZoomLevel,
     );
@@ -1060,7 +1075,7 @@ export class DiagramRenderer {
     this.drawAll();
   }
 
-  zoomPoint(zoomLevel: number, zoomPoint: Point): void {
+  private zoomPoint(zoomLevel: number, zoomPoint: Point): void {
     this.executeZoom(zoomLevel, zoomPoint);
   }
 
@@ -2068,8 +2083,14 @@ export class DiagramRenderer {
     this.drawLinePropertyText(
       // NOTE: by the way we compute the full path, it would guarantee
       // to always have at least 2 points
-      fullPath[fullPath.length - 2] as Point,
-      fullPath[fullPath.length - 1] as Point,
+      guaranteeNonNullable(
+        fullPath[fullPath.length - 2],
+        'Diagram path expected to have at least 2 points',
+      ),
+      guaranteeNonNullable(
+        fullPath[fullPath.length - 1],
+        'Diagram path expected to have at least 2 points',
+      ),
       propertyView.to.classView.value,
       toProperty,
       false,
@@ -2240,10 +2261,22 @@ export class DiagramRenderer {
     );
     // NOTE: by the way we compute the full path, it would guarantee
     // to always have at least 2 points
-    const startX = (fullPath[fullPath.length - 2] as Point).x;
-    const startY = (fullPath[fullPath.length - 2] as Point).y;
-    const endX = (fullPath[fullPath.length - 1] as Point).x;
-    const endY = (fullPath[fullPath.length - 1] as Point).y;
+    const startX = guaranteeNonNullable(
+      fullPath[fullPath.length - 2],
+      'Diagram path expected to have at least 2 points',
+    ).x;
+    const startY = guaranteeNonNullable(
+      fullPath[fullPath.length - 2],
+      'Diagram path expected to have at least 2 points',
+    ).y;
+    const endX = guaranteeNonNullable(
+      fullPath[fullPath.length - 1],
+      'Diagram path expected to have at least 2 points',
+    ).x;
+    const endY = guaranteeNonNullable(
+      fullPath[fullPath.length - 1],
+      'Diagram path expected to have at least 2 points',
+    ).y;
     let resultX = 0;
     let resultY = 0;
     if (endY > startY) {
@@ -2841,6 +2874,8 @@ export class DiagramRenderer {
   }
 
   mouseup(e: MouseEvent): void {
+    const mouseEventCoordinate = this.resolveMouseEventCoordinate(e);
+
     if (!this.isReadOnly) {
       switch (this.interactionMode) {
         case DIAGRAM_INTERACTION_MODE.LAYOUT: {
@@ -2858,7 +2893,7 @@ export class DiagramRenderer {
         case DIAGRAM_INTERACTION_MODE.ADD_CLASS: {
           const eventPointInModelCoordinate =
             this.canvasCoordinateToModelCoordinate(
-              this.eventCoordinateToCanvasCoordinate(new Point(e.x, e.y)),
+              this.eventCoordinateToCanvasCoordinate(mouseEventCoordinate),
             );
           this.onAddClassViewClick(eventPointInModelCoordinate);
           this.changeMode(
@@ -2889,7 +2924,12 @@ export class DiagramRenderer {
               ),
             );
           }
-          this.zoomPoint(nextZoomLevel / 100, new Point(e.x, e.y));
+          this.zoomPoint(
+            nextZoomLevel / 100,
+            this.canvasCoordinateToModelCoordinate(
+              this.eventCoordinateToCanvasCoordinate(mouseEventCoordinate),
+            ),
+          );
           break;
         }
         case DIAGRAM_INTERACTION_MODE.ZOOM_OUT: {
@@ -2911,7 +2951,12 @@ export class DiagramRenderer {
               ),
             );
           }
-          this.zoomPoint(nextZoomLevel / 100, new Point(e.x, e.y));
+          this.zoomPoint(
+            nextZoomLevel / 100,
+            this.canvasCoordinateToModelCoordinate(
+              this.eventCoordinateToCanvasCoordinate(mouseEventCoordinate),
+            ),
+          );
           break;
         }
         case DIAGRAM_INTERACTION_MODE.ADD_RELATIONSHIP: {
@@ -2922,7 +2967,7 @@ export class DiagramRenderer {
           ) {
             const eventPointInModelCoordinate =
               this.canvasCoordinateToModelCoordinate(
-                this.eventCoordinateToCanvasCoordinate(new Point(e.x, e.y)),
+                this.eventCoordinateToCanvasCoordinate(mouseEventCoordinate),
               );
             for (let i = this.diagram.classViews.length - 1; i >= 0; i--) {
               const targetClassView = this.diagram.classViews[i] as ClassView;
@@ -2995,6 +3040,8 @@ export class DiagramRenderer {
   }
 
   mousedblclick(e: MouseEvent): void {
+    const mouseEventCoordinate = this.resolveMouseEventCoordinate(e);
+
     if (
       [
         DIAGRAM_INTERACTION_MODE.ADD_RELATIONSHIP,
@@ -3007,7 +3054,7 @@ export class DiagramRenderer {
     }
 
     const eventPointInModelCoordinate = this.canvasCoordinateToModelCoordinate(
-      this.eventCoordinateToCanvasCoordinate(new Point(e.x, e.y)),
+      this.eventCoordinateToCanvasCoordinate(mouseEventCoordinate),
     );
 
     // Check double click on class property
@@ -3066,6 +3113,8 @@ export class DiagramRenderer {
   }
 
   mousedown(e: MouseEvent): void {
+    const mouseEventCoordinate = this.resolveMouseEventCoordinate(e);
+
     this.setSelectionStart(undefined);
     this.setSelectedClassCorner(undefined);
     this.setSelectedPropertyOrAssociation(undefined);
@@ -3075,9 +3124,8 @@ export class DiagramRenderer {
     this.selectedPoint = undefined;
     this.startClassView = undefined;
 
-    const eventPointInCanvasCoordinate = this.eventCoordinateToCanvasCoordinate(
-      new Point(e.x, e.y),
-    );
+    const eventPointInCanvasCoordinate =
+      this.eventCoordinateToCanvasCoordinate(mouseEventCoordinate);
     const eventPointInModelCoordinate = this.canvasCoordinateToModelCoordinate(
       eventPointInCanvasCoordinate,
     );
@@ -3088,7 +3136,7 @@ export class DiagramRenderer {
 
       switch (this.interactionMode) {
         case DIAGRAM_INTERACTION_MODE.PAN: {
-          this.positionBeforeLastMove = new Point(e.x, e.y);
+          this.positionBeforeLastMove = mouseEventCoordinate;
           return;
         }
         case DIAGRAM_INTERACTION_MODE.LAYOUT: {
@@ -3275,13 +3323,13 @@ export class DiagramRenderer {
     // middle click
     else if (e.button === 1) {
       this.setMiddleClick(true);
-      this.positionBeforeLastMove = new Point(e.x, e.y);
+      this.positionBeforeLastMove = mouseEventCoordinate;
       return;
     }
     // right click
     else if (e.button === 2) {
       this.setRightClick(true);
-      this.positionBeforeLastMove = new Point(e.x, e.y);
+      this.positionBeforeLastMove = mouseEventCoordinate;
       if (this.mouseOverClassView) {
         this.onClassViewRightClick(
           this.mouseOverClassView,
@@ -3296,6 +3344,8 @@ export class DiagramRenderer {
   }
 
   mousewheel(e: WheelEvent): void {
+    const mouseEventCoordinate = this.resolveMouseEventCoordinate(e);
+
     // no scrolling to be done since we want to convert scroll into zoom
     e.preventDefault();
     e.stopImmediatePropagation();
@@ -3306,11 +3356,17 @@ export class DiagramRenderer {
     }
     // scroll down to zoom in and up to zoom out
     const newZoomLevel = this.zoom - (e.deltaY / 120) * 0.05;
-    this.executeZoom(newZoomLevel, new Point(e.x, e.y));
+    this.executeZoom(
+      newZoomLevel,
+      this.canvasCoordinateToModelCoordinate(
+        this.eventCoordinateToCanvasCoordinate(mouseEventCoordinate),
+      ),
+    );
   }
 
   mousemove(e: MouseEvent): void {
-    this.cursorPosition = new Point(e.x, e.y);
+    const mouseEventCoordinate = this.resolveMouseEventCoordinate(e);
+    this.cursorPosition = mouseEventCoordinate;
 
     // Pan/Move
     if (
@@ -3319,15 +3375,17 @@ export class DiagramRenderer {
       (this.leftClick && this.interactionMode === DIAGRAM_INTERACTION_MODE.PAN)
     ) {
       this.screenOffset = new Point(
-        this.screenOffset.x + (e.x - this.positionBeforeLastMove.x) / this.zoom,
-        this.screenOffset.y + (e.y - this.positionBeforeLastMove.y) / this.zoom,
+        this.screenOffset.x +
+          (mouseEventCoordinate.x - this.positionBeforeLastMove.x) / this.zoom,
+        this.screenOffset.y +
+          (mouseEventCoordinate.y - this.positionBeforeLastMove.y) / this.zoom,
       );
-      this.positionBeforeLastMove = new Point(e.x, e.y);
+      this.positionBeforeLastMove = mouseEventCoordinate;
       this.clearScreen();
       this.drawAll();
     } else if (this.leftClick) {
       const eventPointInCanvasCoordinate =
-        this.eventCoordinateToCanvasCoordinate(new Point(e.x, e.y));
+        this.eventCoordinateToCanvasCoordinate(mouseEventCoordinate);
       const eventPointInModelCoordinate =
         this.canvasCoordinateToModelCoordinate(eventPointInCanvasCoordinate);
 
@@ -3509,7 +3567,7 @@ export class DiagramRenderer {
       this.drawScreen();
 
       const eventPointInCanvasCoordinate =
-        this.eventCoordinateToCanvasCoordinate(new Point(e.x, e.y));
+        this.eventCoordinateToCanvasCoordinate(mouseEventCoordinate);
       const eventPointInModelCoordinate =
         this.canvasCoordinateToModelCoordinate(eventPointInCanvasCoordinate);
 
@@ -3639,8 +3697,14 @@ export class DiagramRenderer {
         const propertyInfoBox = this.drawLinePropertyText(
           // NOTE: by the way we compute the full path, it would guarantee
           // to always have at least 2 points
-          fullPath[fullPath.length - 2] as Point,
-          fullPath[fullPath.length - 1] as Point,
+          guaranteeNonNullable(
+            fullPath[fullPath.length - 2],
+            'Diagram path expected to have at least 2 points',
+          ),
+          guaranteeNonNullable(
+            fullPath[fullPath.length - 1],
+            'Diagram path expected to have at least 2 points',
+          ),
           propertyHolderView.to.classView.value,
           propertyHolderView.property.value,
           false,

package/src/application/studio/DSL_Diagram_LegendStudioTesting.ts

@@ -16,4 +16,5 @@
 
 export enum DSL_DIAGRAM_TEST_ID {
   CLASS_DIAGRAM_PREVIEW = 'class-diagram-preview',
+  DIAGRAM_EDITOR = 'diagram-editor',
 }

package/src/components/studio/DiagramEditor.tsx

@@ -117,6 +117,7 @@ import {
   classView_setHideTaggedValues,
 } from '../../stores/studio/DSL_Diagram_GraphModifierHelper.js';
 import { DSL_DIAGRAM_LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../application/studio/DSL_Diagram_LegendStudioApplicationNavigationContext.js';
+import { DSL_DIAGRAM_TEST_ID } from '../../application/studio/DSL_Diagram_LegendStudioTesting.js';
 
 const DiagramEditorContextMenu = observer(
   forwardRef<
@@ -1251,6 +1252,7 @@ const DiagramEditorDiagramCanvas = observer(
           'diagram-canvas diagram-editor__canvas',
           diagramEditorState.diagramCursorClass,
         )}
+        data-testid={DSL_DIAGRAM_TEST_ID.DIAGRAM_EDITOR}
         tabIndex={0}
       />
     );

package/src/graph/helpers/DSL_Diagram_Helper.ts

@@ -21,7 +21,7 @@ import {
   Class,
   getAllOwnClassProperties,
 } from '@finos/legend-graph';
-import { deleteEntry } from '@finos/legend-shared';
+import { deleteEntry, guaranteeNonNullable } from '@finos/legend-shared';
 import type { ClassView } from '../metamodel/pure/packageableElements/diagram/DSL_Diagram_ClassView.js';
 import type { Diagram } from '../metamodel/pure/packageableElements/diagram/DSL_Diagram_Diagram.js';
 import { PositionedRectangle } from '../metamodel/pure/packageableElements/diagram/geometry/DSL_Diagram_PositionedRectangle.js';
@@ -146,8 +146,16 @@ export const _relationshipView_simplifyPath = (
   // if it does we will update the offset
   if (newPath[0] !== fullPath[0]) {
     const center = relationshipView.from.classView.value.center();
-    relationshipView.from._offsetX = (newPath[0] as Point).x - center.x;
-    relationshipView.from._offsetY = (newPath[0] as Point).y - center.y;
+    relationshipView.from._offsetX =
+      guaranteeNonNullable(
+        newPath[0],
+        'Diagram path expected to have at least 2 points',
+      ).x - center.x;
+    relationshipView.from._offsetY =
+      guaranteeNonNullable(
+        newPath[0],
+        'Diagram path expected to have at least 2 points',
+      ).y - center.y;
   }
 
   if (newPath[newPath.length - 1] !== fullPath[fullPath.length - 1]) {

package/src/graph/metamodel/pure/packageableElements/diagram/DSL_Diagram_RelationshipView.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { hashArray, type Hashable } from '@finos/legend-shared';
+import { hashArray, type Hashable, assertTrue } from '@finos/legend-shared';
 import { RelationshipViewEnd } from './DSL_Diagram_RelationshipViewEnd.js';
 import { Point } from './geometry/DSL_Diagram_Point.js';
 import type { ClassView } from './DSL_Diagram_ClassView.js';
@@ -98,9 +98,7 @@ export class RelationshipView implements Hashable {
     from: ClassView,
     to: ClassView,
   ): Point[] => {
-    if (!path.length) {
-      return [];
-    }
+    assertTrue(Boolean(path.length), 'Path requires at least 1 point');
 
     let start = 0;
     let startPoint = path[start] as Point;
@@ -125,7 +123,9 @@ export class RelationshipView implements Hashable {
     }
 
     // NOTE: slice upper bound is exclusive, hence the +2 instead of +1
-    return path.slice(start - 1, end + 2);
+    const newPath = path.slice(start - 1, end + 2);
+    // In the event we have trimmed all paths, we will return start and end point to ensure the path still contains 2 points
+    return newPath.length < 2 ? [startPoint, endPoint] : newPath;
   };
 
   // TODO: to be simplified out of metamodel

package/src/graphManager/protocol/pure/DSL_Diagram_PureProtocolProcessorPlugin.ts

@@ -98,7 +98,7 @@ export class DSL_Diagram_PureProtocolProcessorPlugin extends PureProtocolProcess
           );
           element.generalizationViews = elementProtocol.generalizationViews.map(
             (generalizationView) =>
-              V1_buildGeneralizationView(generalizationView, element),
+              V1_buildGeneralizationView(generalizationView, element, context),
           );
         },
       }),

package/src/graphManager/protocol/pure/v1/transformation/pureGraph/V1_DSL_Diagram_GraphBuilderHelper.ts

@@ -20,6 +20,8 @@ import type {
   V1_GraphBuilderContext,
 } from '@finos/legend-graph';
 import {
+  LogEvent,
+  assertErrorThrown,
   assertNonEmptyString,
   assertNonNullable,
   guaranteeNonNullable,
@@ -118,13 +120,21 @@ export const V1_buildPropertyView = (
     targetClassView,
   );
   view.path = propertyView.line.points.map((point) => buildPoint(point));
-  _relationshipView_simplifyPath(view); // transform the line because we store only 2 end points that are inside points and we will calculate the offset
+  // transform the line because we store only 2 end points that are inside points and we will calculate the offset
+  try {
+    _relationshipView_simplifyPath(view);
+  } catch (error) {
+    // NOTE: this is an optimization to simplify the path, so we should not break graph building if this fails
+    assertErrorThrown(error);
+    context.logService.warn(LogEvent.create(error.message));
+  }
   return view;
 };
 
 export const V1_buildGeneralizationView = (
   generalizationView: V1_GeneralizationView,
   diagram: Diagram,
+  context: V1_GraphBuilderContext,
 ): GeneralizationView => {
   assertNonNullable(
     generalizationView.line,
@@ -144,7 +154,14 @@ export const V1_buildGeneralizationView = (
     targetClassView,
   );
   view.path = generalizationView.line.points.map((point) => buildPoint(point));
-  _relationshipView_simplifyPath(view); // transform the line because we store only 2 end points that are inside points and we will calculate the offset
+  // transform the line because we store only 2 end points that are inside points and we will calculate the offset
+  try {
+    _relationshipView_simplifyPath(view);
+  } catch (error) {
+    // NOTE: this is an optimization to simplify the path, so we should not break graph building if this fails
+    assertErrorThrown(error);
+    context.logService.warn(LogEvent.create(error.message));
+  }
   return view;
 };