@finos/legend-extension-dsl-diagram 2.0.3 → 4.0.1

package/src/DiagramRenderer.ts

@@ -42,17 +42,24 @@ import {
   getRawGenericType,
 } from '@finos/legend-graph';
 import { action, makeObservable, observable } from 'mobx';
-import type { Diagram } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram';
-import { Rectangle } from './models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Rectangle';
-import { Point } from './models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Point';
-import { PositionedRectangle } from './models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_PositionedRectangle';
-import { ClassView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView';
-import type { PropertyHolderView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_PropertyHolderView';
-import { GeneralizationView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_GeneralizationView';
-import { RelationshipView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_RelationshipView';
-import { PropertyView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_PropertyView';
-import { getElementPosition } from './helpers/DiagramHelper';
-import { AssociationView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_AssociationView';
+import type { Diagram } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram.js';
+import { Rectangle } from './models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Rectangle.js';
+import { Point } from './models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Point.js';
+import { PositionedRectangle } from './models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_PositionedRectangle.js';
+import { ClassView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView.js';
+import type { PropertyHolderView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_PropertyHolderView.js';
+import { GeneralizationView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_GeneralizationView.js';
+import { RelationshipView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_RelationshipView.js';
+import { PropertyView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_PropertyView.js';
+import {
+  boxContains,
+  buildBottomRightCornerBox,
+  getBottomRightCornerPoint,
+  getElementPosition,
+  rotatePointX,
+  rotatePointY,
+} from './helpers/DSLDiagram_Helper.js';
+import { AssociationView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_AssociationView.js';
 import { class_addProperty, class_addSuperType } from '@finos/legend-studio';
 import {
   classView_setHideProperties,
@@ -78,7 +85,7 @@ import {
   relationshipView_changePoint,
   relationshipView_simplifyPath,
   relationshipView_setPath,
-} from './stores/studio/DSLDiagram_GraphModifierHelper';
+} from './stores/studio/DSLDiagram_GraphModifierHelper.js';
 
 export enum DIAGRAM_INTERACTION_MODE {
   LAYOUT,
@@ -766,8 +773,8 @@ export class DiagramRenderer {
           );
           minX = Math.min(minX, box.position.x);
           minY = Math.min(minY, box.position.y);
-          maxX = Math.max(maxX, box.edgePoint().x);
-          maxY = Math.max(maxY, box.edgePoint().y);
+          maxX = Math.max(maxX, getBottomRightCornerPoint(box).x);
+          maxY = Math.max(maxY, getBottomRightCornerPoint(box).y);
         }
         // if (relationshipView.from.name) {
         //   var box = this.displayText(fullPath[1], fullPath[0], relationshipView.from.classView, relationshipView.property, this.ctx);
@@ -2014,34 +2021,34 @@ export class DiagramRenderer {
     this.ctx.beginPath();
     this.ctx.moveTo(
       resultX +
-        (this.screenOffset.x + (this.triangle[0] as Point).rotateX(angle)) *
+        (this.screenOffset.x + rotatePointX(this.triangle[0] as Point, angle)) *
           this.zoom,
       resultY +
-        (this.screenOffset.y + (this.triangle[0] as Point).rotateY(angle)) *
+        (this.screenOffset.y + rotatePointY(this.triangle[0] as Point, angle)) *
           this.zoom,
     );
     this.ctx.lineTo(
       resultX +
-        (this.screenOffset.x + (this.triangle[1] as Point).rotateX(angle)) *
+        (this.screenOffset.x + rotatePointX(this.triangle[1] as Point, angle)) *
           this.zoom,
       resultY +
-        (this.screenOffset.y + (this.triangle[1] as Point).rotateY(angle)) *
+        (this.screenOffset.y + rotatePointY(this.triangle[1] as Point, angle)) *
           this.zoom,
     );
     this.ctx.lineTo(
       resultX +
-        (this.screenOffset.x + (this.triangle[2] as Point).rotateX(angle)) *
+        (this.screenOffset.x + rotatePointX(this.triangle[2] as Point, angle)) *
           this.zoom,
       resultY +
-        (this.screenOffset.y + (this.triangle[2] as Point).rotateY(angle)) *
+        (this.screenOffset.y + rotatePointY(this.triangle[2] as Point, angle)) *
           this.zoom,
     );
     this.ctx.lineTo(
       resultX +
-        (this.screenOffset.x + (this.triangle[0] as Point).rotateX(angle)) *
+        (this.screenOffset.x + rotatePointX(this.triangle[0] as Point, angle)) *
           this.zoom,
       resultY +
-        (this.screenOffset.y + (this.triangle[0] as Point).rotateY(angle)) *
+        (this.screenOffset.y + rotatePointY(this.triangle[0] as Point, angle)) *
           this.zoom,
     );
     this.ctx.fillStyle = this.generalizationViewInheritanceTriangeFillColor;
@@ -2637,12 +2644,10 @@ export class DiagramRenderer {
           for (let i = this.diagram.classViews.length - 1; i >= 0; i--) {
             const targetClassView = this.diagram.classViews[i] as ClassView;
             if (
-              targetClassView
-                .buildBottomRightCornerBox()
-                .contains(
-                  eventPointInModelCoordinate.x,
-                  eventPointInModelCoordinate.y,
-                )
+              buildBottomRightCornerBox(targetClassView).contains(
+                eventPointInModelCoordinate.x,
+                eventPointInModelCoordinate.y,
+              )
             ) {
               this.setSelectedClasses([]);
               this.setSelectedClassCorner(this.diagram.classViews[i]);
@@ -3004,8 +3009,8 @@ export class DiagramRenderer {
             this.setSelectedClasses([]);
             for (const classView of this.diagram.classViews) {
               if (
-                this.selection.boxContains(classView) ||
-                classView.boxContains(this.selection)
+                boxContains(this.selection, classView) ||
+                boxContains(classView, this.selection)
               ) {
                 this.setSelectedClasses([...this.selectedClasses, classView]);
               }
@@ -3065,12 +3070,10 @@ export class DiagramRenderer {
 
           // Check hover class corner
           if (
-            classView
-              .buildBottomRightCornerBox()
-              .contains(
-                eventPointInModelCoordinate.x,
-                eventPointInModelCoordinate.y,
-              )
+            buildBottomRightCornerBox(classView).contains(
+              eventPointInModelCoordinate.x,
+              eventPointInModelCoordinate.y,
+            )
           ) {
             this.setMouseOverClassCorner(classView);
           }

package/src/components/studio/ClassDiagramPreview.tsx

@@ -19,8 +19,8 @@ import { useResizeDetector } from 'react-resize-detector';
 import { observer } from 'mobx-react-lite';
 import { useApplicationStore } from '@finos/legend-application';
 import type { Class } from '@finos/legend-graph';
-import { InheritanceDiagramRenderer } from './InheritanceDiagramRenderer';
-import { DSL_DIAGRAM_TEST_ID } from './DSLDiagram_TestID';
+import { InheritanceDiagramRenderer } from './InheritanceDiagramRenderer.js';
+import { DSL_DIAGRAM_TEST_ID } from './DSLDiagram_TestID.js';
 import { useEditorStore } from '@finos/legend-studio';
 
 export const ClassDiagramPreview = observer((props: { _class: Class }) => {

package/src/components/studio/DSLDiagram_LegendStudioDocumentation.ts

@@ -14,20 +14,27 @@
  * limitations under the License.
  */
 
+import type { LegendApplicationDocumentationEntryConfig } from '@finos/legend-application';
+
 export enum DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY {
-  GRAMMAR_PARSER = 'dsl-diagram__grammar-parser',
-  GRAMMAR_DIAGRAM_ELEMENT = 'dsl-diagram__grammar-diagram-element',
+  GRAMMAR_PARSER = 'dsl-diagram.grammar.parser',
+  GRAMMAR_ELEMENT_DIAGRAM = 'dsl-diagram.grammar.element.diagram',
 }
 
-export const DSL_DIAGRAM_DOCUMENTATION_ENTRIES = {
+export const DSL_DIAGRAM_DOCUMENTATION_ENTRIES: Record<
+  string,
+  LegendApplicationDocumentationEntryConfig
+> = {
   [DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_PARSER]: {
+    title: `What is Diagram DSL about?`,
     markdownText: {
-      value: `DSL Diagram (\`###Diagram\`) concerns with visualizing data models and their relationship`,
+      value: `\`Diagram DSL\`  (coressponding to \`###Diagram\` section in \`Pure\`) concerns with visualizing data models and their relationship`,
     },
   },
-  [DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_DIAGRAM_ELEMENT]: {
+  [DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_ELEMENT_DIAGRAM]: {
+    title: `What is a diagram element?`,
     markdownText: {
-      value: `A diagram element specifies the visualization/rendering of data models and their relationship`,
+      value: `A \`Diagram\` element specifies the visualization/rendering of data models and their relationship`,
     },
   },
 };

package/src/components/studio/DSLDiagram_LegendStudioPlugin.tsx

@@ -38,10 +38,10 @@ import {
 } from '@finos/legend-studio';
 import { ShapesIcon } from '@finos/legend-art';
 import type { Class, PackageableElement } from '@finos/legend-graph';
-import { Diagram } from '../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram';
-import { DiagramEditorState } from '../../stores/studio/DiagramEditorState';
-import { DiagramEditor } from './DiagramEditor';
-import { ClassDiagramPreview } from './ClassDiagramPreview';
+import { Diagram } from '../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram.js';
+import { DiagramEditorState } from '../../stores/studio/DiagramEditorState.js';
+import { DiagramEditor } from './DiagramEditor.js';
+import { ClassDiagramPreview } from './ClassDiagramPreview.js';
 import {
   type LegendApplicationDocumentationEntry,
   type LegendApplicationKeyedDocumentationEntry,
@@ -50,17 +50,17 @@ import {
 import {
   PURE_GRAMMAR_DIAGRAM_ELEMENT_TYPE_LABEL,
   PURE_GRAMMAR_DIAGRAM_PARSER_NAME,
-} from '../../graphManager/DSLDiagram_PureGraphManagerPlugin';
+} from '../../graphManager/DSLDiagram_PureGraphManagerPlugin.js';
 import {
   DSL_DIAGRAM_DOCUMENTATION_ENTRIES,
   DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY,
-} from './DSLDiagram_LegendStudioDocumentation';
+} from './DSLDiagram_LegendStudioDocumentation.js';
 import {
   EMPTY_DIAGRAM_SNIPPET,
   getDiagramSnippetWithGeneralizationView,
   getDiagramSnippetWithOneClassView,
   getDiagramSnippetWithPropertyView,
-} from './DSLDiagram_CodeSnippets';
+} from './DSLDiagram_CodeSnippets.js';
 
 const DIAGRAM_ELEMENT_TYPE = 'DIAGRAM';
 const DIAGRAM_ELEMENT_PROJECT_EXPLORER_DND_TYPE = 'PROJECT_EXPLORER_DIAGRAM';
@@ -203,8 +203,8 @@ export class DSLDiagram_LegendStudioPlugin
       ): LegendApplicationDocumentationEntry | undefined => {
         if (parserKeyword === PURE_GRAMMAR_DIAGRAM_PARSER_NAME) {
           if (elementKeyword === PURE_GRAMMAR_DIAGRAM_ELEMENT_TYPE_LABEL) {
-            return editorStore.applicationStore.docRegistry.getEntry(
-              DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_DIAGRAM_ELEMENT,
+            return editorStore.applicationStore.documentationService.getDocEntry(
+              DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_ELEMENT_DIAGRAM,
             );
           }
         }
@@ -220,7 +220,7 @@ export class DSLDiagram_LegendStudioPlugin
         parserKeyword: string,
       ): LegendApplicationDocumentationEntry | undefined => {
         if (parserKeyword === PURE_GRAMMAR_DIAGRAM_PARSER_NAME) {
-          return editorStore.applicationStore.docRegistry.getEntry(
+          return editorStore.applicationStore.documentationService.getDocEntry(
             DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_PARSER,
           );
         }
@@ -235,9 +235,10 @@ export class DSLDiagram_LegendStudioPlugin
         {
           text: PURE_GRAMMAR_DIAGRAM_PARSER_NAME,
           description: `(dsl)`,
-          documentation: editorStore.applicationStore.docRegistry.getEntry(
-            DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_PARSER,
-          ),
+          documentation:
+            editorStore.applicationStore.documentationService.getDocEntry(
+              DSL_DIAGRAM_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_PARSER,
+            ),
           insertText: PURE_GRAMMAR_DIAGRAM_PARSER_NAME,
         },
       ],

package/src/components/studio/DSLDiagram_LegendStudioPlugin_Extension.tsx

@@ -15,8 +15,8 @@
  */
 
 import type { DSL_LegendStudioPlugin_Extension } from '@finos/legend-studio';
-import type { ClassView } from '../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView';
-import type { DiagramEditorState } from '../../stores/studio/DiagramEditorState';
+import type { ClassView } from '../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView.js';
+import type { DiagramEditorState } from '../../stores/studio/DiagramEditorState.js';
 
 export type ClassViewContextMenuItemRendererConfiguration = {
   key: string;

package/src/components/studio/DiagramEditor.tsx

@@ -30,7 +30,7 @@ import {
   DIAGRAM_INTERACTION_MODE,
   DIAGRAM_RELATIONSHIP_EDIT_MODE,
   DIAGRAM_ZOOM_LEVELS,
-} from '../../DiagramRenderer';
+} from '../../DiagramRenderer.js';
 import {
   type DiagramEditorInlineClassCreatorState,
   type DiagramEditorInlineClassRenamerState,
@@ -38,7 +38,7 @@ import {
   DIAGRAM_EDITOR_SIDE_PANEL_TAB,
   DiagramEditorClassViewEditorSidePanelState,
   DiagramEditorState,
-} from '../../stores/studio/DiagramEditorState';
+} from '../../stores/studio/DiagramEditorState.js';
 import {
   type ResizablePanelHandlerProps,
   ContextMenu,
@@ -104,14 +104,14 @@ import {
   property_setGenericType,
   property_setMultiplicity,
 } from '@finos/legend-studio';
-import { cleanUpDeadReferencesInDiagram } from '../../helpers/DiagramHelper';
-import { Point } from '../../models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Point';
-import type { DSLDiagram_LegendStudioPlugin_Extension } from './DSLDiagram_LegendStudioPlugin_Extension';
+import { cleanUpDeadReferencesInDiagram } from '../../helpers/DSLDiagram_Helper.js';
+import { Point } from '../../models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Point.js';
+import type { DSLDiagram_LegendStudioPlugin_Extension } from './DSLDiagram_LegendStudioPlugin_Extension.js';
 import {
   classView_setHideProperties,
   classView_setHideStereotypes,
   classView_setHideTaggedValues,
-} from '../../stores/studio/DSLDiagram_GraphModifierHelper';
+} from '../../stores/studio/DSLDiagram_GraphModifierHelper.js';
 
 const DiagramEditorContextMenu = observer(
   forwardRef<

package/src/components/studio/InheritanceDiagramRenderer.ts

@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { DiagramRenderer } from '../../DiagramRenderer';
+import { DiagramRenderer } from '../../DiagramRenderer.js';
 import { uuid } from '@finos/legend-shared';
 import {
   type Class,
   PackageableElementExplicitReference,
 } from '@finos/legend-graph';
-import { Diagram } from '../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram';
-import { ClassView } from '../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView';
+import { Diagram } from '../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram.js';
+import { ClassView } from '../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView.js';
 
 export class InheritanceDiagramRenderer extends DiagramRenderer {
   constructor(div: HTMLDivElement, _class: Class) {

package/src/graph/DSLDiagram_PureGraphPlugin.ts

@@ -22,8 +22,8 @@ import {
   type PackageableElement,
   type PureModel,
 } from '@finos/legend-graph';
-import { Diagram } from '../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram';
-import { cleanUpDeadReferencesInDiagram } from '../helpers/DiagramHelper';
+import { Diagram } from '../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram.js';
+import { cleanUpDeadReferencesInDiagram } from '../helpers/DSLDiagram_Helper.js';
 
 export class DSLDiagram_PureGraphPlugin extends PureGraphPlugin {
   constructor() {

package/src/graphManager/DSLDiagram_GraphManagerHelper.ts

@@ -16,7 +16,7 @@
 
 import type { BasicModel, PureModel } from '@finos/legend-graph';
 import { guaranteeNonNullable } from '@finos/legend-shared';
-import { Diagram } from '../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram';
+import { Diagram } from '../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram.js';
 
 export const getDiagram = (path: string, graph: PureModel): Diagram =>
   graph.getExtensionElement(path, Diagram, `Can't find diagram '${path}'`);

package/src/graphManager/DSLDiagram_PureGraphManagerPlugin.ts

@@ -22,8 +22,8 @@ import {
   type PackageableElement,
   type PureGrammarElementLabeler,
 } from '@finos/legend-graph';
-import { Diagram } from '../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram';
-import { observe_Diagram } from './action/changeDetection/DSLDiagram_ObserverHelper';
+import { Diagram } from '../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram.js';
+import { observe_Diagram } from './action/changeDetection/DSLDiagram_ObserverHelper.js';
 
 export const PURE_GRAMMAR_DIAGRAM_PARSER_NAME = 'Diagram';
 export const PURE_GRAMMAR_DIAGRAM_ELEMENT_TYPE_LABEL = 'Diagram';

package/src/graphManager/action/changeDetection/DSLDiagram_ObserverHelper.ts

@@ -21,20 +21,20 @@ import {
   skipObserved,
 } from '@finos/legend-graph';
 import { computed, makeObservable, observable, override } from 'mobx';
-import type { AssociationView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_AssociationView';
-import type { ClassView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView';
-import type { ClassViewReference } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassViewReference';
-import type { Diagram } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram';
-import type { GeneralizationView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_GeneralizationView';
-import type { PropertyView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_PropertyView';
-import type { RelationshipEdgeView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_RelationshipEdgeView';
-import type { RelationshipView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_RelationshipView';
-import type { PositionedRectangle } from '../../../models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_PositionedRectangle';
+import type { AssociationView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_AssociationView.js';
+import type { ClassView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView.js';
+import type { ClassViewReference } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassViewReference.js';
+import type { Diagram } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram.js';
+import type { GeneralizationView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_GeneralizationView.js';
+import type { PropertyView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_PropertyView.js';
+import type { RelationshipViewEnd } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_RelationshipViewEnd.js';
+import type { RelationshipView } from '../../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_RelationshipView.js';
+import type { PositionedRectangle } from '../../../models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_PositionedRectangle.js';
 
 export const observe_PositionedRectangle = skipObserved(
   (metamodel: PositionedRectangle): PositionedRectangle =>
     makeObservable(metamodel, {
-      dummyObservable: observable,
+      _dummyObservable: observable,
     }),
 );
 
@@ -69,7 +69,7 @@ export const observe_ClassView = skipObserved(
 );
 
 export const observe_RelationShipEdgeView = skipObserved(
-  (metamodel: RelationshipEdgeView): RelationshipEdgeView => {
+  (metamodel: RelationshipViewEnd): RelationshipViewEnd => {
     observe_ClassViewReference(metamodel.classView);
 
     return metamodel;

package/src/helpers/{DiagramHelper.ts → DSLDiagram_Helper.ts}

@@ -14,13 +14,45 @@
  * limitations under the License.
  */
 
-import { RelationshipView } from '../models/metamodels/pure/packageableElements/diagram/DSLDiagram_RelationshipView';
-import { Point } from '../models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Point';
-import { Vector } from '../models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Vector';
-import type { PureModel } from '@finos/legend-graph';
+import { RelationshipView } from '../models/metamodels/pure/packageableElements/diagram/DSLDiagram_RelationshipView.js';
+import { Point } from '../models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Point.js';
+import {
+  type PureModel,
+  Class,
+  getAllOwnClassProperties,
+} from '@finos/legend-graph';
 import { deleteEntry } from '@finos/legend-shared';
-import type { ClassView } from '../models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView';
-import type { Diagram } from '../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram';
+import type { ClassView } from '../models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView.js';
+import type { Diagram } from '../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram.js';
+import { PositionedRectangle } from '../models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_PositionedRectangle.js';
+import { Rectangle } from '../models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Rectangle.js';
+
+export class Vector {
+  readonly x: number;
+  readonly y: number;
+
+  constructor(x: number, y: number) {
+    this.x = x;
+    this.y = y;
+  }
+
+  static fromPoints(a: Point, b: Point): Vector {
+    return new Vector(b.x - a.x, b.y - a.y);
+  }
+
+  unit(): Vector {
+    const norm = Math.sqrt(this.x * this.x + this.y * this.y);
+    return new Vector(this.x / norm, this.y / norm);
+  }
+
+  normal(other: Vector): Vector {
+    return new Vector(other.y - this.y, -(other.x - this.x));
+  }
+
+  dotProduct(other: Vector): number {
+    return this.x * other.x + this.y * other.y;
+  }
+}
 
 /**
  * Get absolute position of element on the screen by recursively walking up element tree
@@ -49,7 +81,11 @@ export const cleanUpDeadReferencesInDiagram = (
   // Delete orphan property views
   const propertyViewsToRemove = diagram.propertyViews.filter(
     (propertyView) =>
-      !propertyView.property.ownerReference.value.properties
+      !(
+        propertyView.property.ownerReference.value instanceof Class
+          ? getAllOwnClassProperties(propertyView.property.ownerReference.value)
+          : propertyView.property.ownerReference.value.properties
+      )
         .map((property) => property.name)
         .includes(propertyView.property.value.name),
   );
@@ -110,15 +146,15 @@ 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 = (newPath[0] as Point).x - center.x;
+    relationshipView.from._offsetY = (newPath[0] as Point).y - center.y;
   }
 
   if (newPath[newPath.length - 1] !== fullPath[fullPath.length - 1]) {
     const center = relationshipView.to.classView.value.center();
-    relationshipView.to.offsetX =
+    relationshipView.to._offsetX =
       (newPath[newPath.length - 1] as Point).x - center.x;
-    relationshipView.to.offsetY =
+    relationshipView.to._offsetY =
       (newPath[newPath.length - 1] as Point).y - center.y;
   }
 
@@ -199,3 +235,58 @@ export const _findOrBuildPoint = (
   }
   return point;
 };
+
+export const rotatePointX = (point: Point, angle: number): number =>
+  point.x * Math.cos(angle) - point.y * Math.sin(angle);
+
+export const rotatePointY = (point: Point, angle: number): number =>
+  point.x * Math.sin(angle) + point.y * Math.cos(angle);
+
+export const getBottomRightCornerPoint = (pR: PositionedRectangle): Point =>
+  new Point(
+    pR.position.x + pR.rectangle.width,
+    pR.position.y + pR.rectangle.height,
+  );
+
+/**
+ * Build a small box at the bottom right corner of the rectangle so we
+ * can use that for selection to resize the box
+ */
+export const buildBottomRightCornerBox = (
+  pR: PositionedRectangle,
+): PositionedRectangle => {
+  const bottomRightCornerPoint = getBottomRightCornerPoint(pR);
+  const boxSize = 10;
+  return new PositionedRectangle(
+    new Point(
+      bottomRightCornerPoint.x - boxSize / 2,
+      bottomRightCornerPoint.y - boxSize / 2,
+    ),
+    new Rectangle(boxSize, boxSize),
+  );
+};
+
+/**
+ * Check if a box contains another box
+ */
+export const boxContains = (
+  box: PositionedRectangle,
+  otherBox: PositionedRectangle,
+): boolean => {
+  otherBox = box.normalizeBox(otherBox);
+  return (
+    box.contains(otherBox.position.x, otherBox.position.y) ||
+    box.contains(
+      otherBox.position.x + otherBox.rectangle.width,
+      otherBox.position.y,
+    ) ||
+    box.contains(
+      otherBox.position.x,
+      otherBox.position.y + otherBox.rectangle.height,
+    ) ||
+    box.contains(
+      otherBox.position.x + otherBox.rectangle.width,
+      otherBox.position.y + otherBox.rectangle.height,
+    )
+  );
+};

package/src/index.ts

@@ -14,25 +14,28 @@
  * limitations under the License.
  */
 
-export * from './DSLDiagram_Extension';
-export { DSLDiagram_LegendStudioPlugin } from './components/studio/DSLDiagram_LegendStudioPlugin';
-export * from './components/studio/DSLDiagram_LegendStudioPlugin_Extension';
+export * from './DSLDiagram_Extension.js';
+export { DSLDiagram_LegendStudioPlugin } from './components/studio/DSLDiagram_LegendStudioPlugin.js';
+export * from './components/studio/DSLDiagram_LegendStudioPlugin_Extension.js';
 
-export { DiagramEditorState } from './stores/studio/DiagramEditorState';
+export { DiagramEditorState } from './stores/studio/DiagramEditorState.js';
 
-export { DiagramRenderer, DIAGRAM_INTERACTION_MODE } from './DiagramRenderer';
+export {
+  DiagramRenderer,
+  DIAGRAM_INTERACTION_MODE,
+} from './DiagramRenderer.js';
 
-export { Diagram } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram';
-export { ClassView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView';
-export { RelationshipView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_RelationshipView';
-export { PropertyHolderView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_PropertyHolderView';
-export { PropertyView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_PropertyView';
-export { AssociationView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_AssociationView';
-export { GeneralizationView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_GeneralizationView';
-export { Point } from './models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Point';
-export { Rectangle } from './models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Rectangle';
-export { PositionedRectangle } from './models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_PositionedRectangle';
+export { Diagram } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram.js';
+export { ClassView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView.js';
+export { RelationshipView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_RelationshipView.js';
+export { PropertyHolderView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_PropertyHolderView.js';
+export { PropertyView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_PropertyView.js';
+export { AssociationView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_AssociationView.js';
+export { GeneralizationView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_GeneralizationView.js';
+export { Point } from './models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Point.js';
+export { Rectangle } from './models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Rectangle.js';
+export { PositionedRectangle } from './models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_PositionedRectangle.js';
 
-export * from './helpers/DiagramHelper';
-export * from './graphManager/DSLDiagram_GraphManagerHelper';
-export { V1_DSLDiagram_PackageableElementPointerType } from './models/protocols/pure/DSLDiagram_PureProtocolProcessorPlugin';
+export * from './helpers/DSLDiagram_Helper.js';
+export * from './graphManager/DSLDiagram_GraphManagerHelper.js';
+export { V1_DSLDiagram_PackageableElementPointerType } from './models/protocols/pure/DSLDiagram_PureProtocolProcessorPlugin.js';

package/src/models/metamodels/pure/packageableElements/diagram/DSLDiagram_AssociationView.ts

@@ -15,10 +15,10 @@
  */
 
 import { hashArray, type Hashable } from '@finos/legend-shared';
-import { PropertyHolderView } from './DSLDiagram_PropertyHolderView';
-import type { ClassView } from './DSLDiagram_ClassView';
-import type { Diagram } from './DSLDiagram_Diagram';
-import { DIAGRAM_HASH_STRUCTURE } from '../../../../DSLDiagram_ModelUtils';
+import { PropertyHolderView } from './DSLDiagram_PropertyHolderView.js';
+import type { ClassView } from './DSLDiagram_ClassView.js';
+import type { Diagram } from './DSLDiagram_Diagram.js';
+import { DIAGRAM_HASH_STRUCTURE } from '../../../../DSLDiagram_ModelUtils.js';
 import type {
   Association,
   PackageableElementReference,

package/src/models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView.ts

@@ -15,11 +15,11 @@
  */
 
 import { hashArray, type Hashable } from '@finos/legend-shared';
-import { PositionedRectangle } from './geometry/DSLDiagram_PositionedRectangle';
-import { Rectangle } from './geometry/DSLDiagram_Rectangle';
-import { Point } from './geometry/DSLDiagram_Point';
-import type { Diagram } from './DSLDiagram_Diagram';
-import { DIAGRAM_HASH_STRUCTURE } from '../../../../DSLDiagram_ModelUtils';
+import { PositionedRectangle } from './geometry/DSLDiagram_PositionedRectangle.js';
+import { Rectangle } from './geometry/DSLDiagram_Rectangle.js';
+import { Point } from './geometry/DSLDiagram_Point.js';
+import type { Diagram } from './DSLDiagram_Diagram.js';
+import { DIAGRAM_HASH_STRUCTURE } from '../../../../DSLDiagram_ModelUtils.js';
 import type { Class, PackageableElementReference } from '@finos/legend-graph';
 
 export class ClassView extends PositionedRectangle implements Hashable {