@finos/legend-extension-dsl-diagram 2.0.1 → 3.0.0

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,15 +15,16 @@
  */
 
 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 {
-  owner: Diagram;
+  readonly _OWNER: Diagram;
+
   class: PackageableElementReference<Class>;
   id: string;
   hideProperties?: boolean | undefined;
@@ -36,7 +37,7 @@ export class ClassView extends PositionedRectangle implements Hashable {
     _class: PackageableElementReference<Class>,
   ) {
     super(new Point(0, 0), new Rectangle(0, 0));
-    this.owner = owner;
+    this._OWNER = owner;
     this.id = id;
     this.class = _class;
   }

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

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import type { Diagram } from './DSLDiagram_Diagram';
-import type { ClassView } from './DSLDiagram_ClassView';
+import type { Diagram } from './DSLDiagram_Diagram.js';
+import type { ClassView } from './DSLDiagram_ClassView.js';
 import {
   PackageableElementExplicitReference,
   ReferenceWithOwner,
@@ -42,7 +42,7 @@ export class ClassViewExplicitReference extends ClassViewReference {
 
   private constructor(value: ClassView) {
     const ownerReference = PackageableElementExplicitReference.create(
-      value.owner,
+      value._OWNER,
     );
     super(ownerReference, value);
     this.ownerReference = ownerReference;

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

@@ -15,15 +15,15 @@
  */
 
 import { hashArray, type Hashable } from '@finos/legend-shared';
-import type { ClassView } from './DSLDiagram_ClassView';
-import type { PropertyView } from './DSLDiagram_PropertyView';
-import type { GeneralizationView } from './DSLDiagram_GeneralizationView';
-import type { AssociationView } from './DSLDiagram_AssociationView';
+import type { ClassView } from './DSLDiagram_ClassView.js';
+import type { PropertyView } from './DSLDiagram_PropertyView.js';
+import type { GeneralizationView } from './DSLDiagram_GeneralizationView.js';
+import type { AssociationView } from './DSLDiagram_AssociationView.js';
 import {
   type PackageableElementVisitor,
   PackageableElement,
 } from '@finos/legend-graph';
-import { DIAGRAM_HASH_STRUCTURE } from '../../../../DSLDiagram_ModelUtils';
+import { DIAGRAM_HASH_STRUCTURE } from '../../../../DSLDiagram_ModelUtils.js';
 
 export class Diagram extends PackageableElement implements Hashable {
   classViews: ClassView[] = [];

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

@@ -15,8 +15,8 @@
  */
 
 import { hashArray, type Hashable } from '@finos/legend-shared';
-import { RelationshipView } from './DSLDiagram_RelationshipView';
-import { DIAGRAM_HASH_STRUCTURE } from '../../../../DSLDiagram_ModelUtils';
+import { RelationshipView } from './DSLDiagram_RelationshipView.js';
+import { DIAGRAM_HASH_STRUCTURE } from '../../../../DSLDiagram_ModelUtils.js';
 
 export class GeneralizationView extends RelationshipView implements Hashable {
   override get hashCode(): string {

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

@@ -15,11 +15,11 @@
  */
 
 import { hashArray, type Hashable } from '@finos/legend-shared';
-import { RelationshipView } from './DSLDiagram_RelationshipView';
-import type { ClassView } from './DSLDiagram_ClassView';
-import type { Diagram } from './DSLDiagram_Diagram';
+import { RelationshipView } from './DSLDiagram_RelationshipView.js';
+import type { ClassView } from './DSLDiagram_ClassView.js';
+import type { Diagram } from './DSLDiagram_Diagram.js';
 import type { PropertyReference } from '@finos/legend-graph';
-import { DIAGRAM_HASH_STRUCTURE } from '../../../../DSLDiagram_ModelUtils';
+import { DIAGRAM_HASH_STRUCTURE } from '../../../../DSLDiagram_ModelUtils.js';
 
 export class PropertyHolderView extends RelationshipView implements Hashable {
   property: PropertyReference;

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

@@ -15,8 +15,8 @@
  */
 
 import { hashArray, type Hashable } from '@finos/legend-shared';
-import { PropertyHolderView } from './DSLDiagram_PropertyHolderView';
-import { DIAGRAM_HASH_STRUCTURE } from '../../../../DSLDiagram_ModelUtils';
+import { PropertyHolderView } from './DSLDiagram_PropertyHolderView.js';
+import { DIAGRAM_HASH_STRUCTURE } from '../../../../DSLDiagram_ModelUtils.js';
 
 export class PropertyView extends PropertyHolderView implements Hashable {
   override get hashCode(): string {

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

@@ -14,17 +14,18 @@
  * limitations under the License.
  */
 
-import type { ClassViewReference } from './DSLDiagram_ClassViewReference';
+import type { ClassViewReference } from './DSLDiagram_ClassViewReference.js';
 
 export class RelationshipEdgeView {
-  classView: ClassViewReference;
   /**
    * Offsets from the center of the class view.
    *
    * These offsets can be used to compute the end points of relationship views.
    */
-  offsetX?: number | undefined;
-  offsetY?: number | undefined;
+  _offsetX?: number | undefined;
+  _offsetY?: number | undefined;
+
+  classView: ClassViewReference;
 
   constructor(classView: ClassViewReference) {
     this.classView = classView;

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

@@ -15,15 +15,16 @@
  */
 
 import { hashArray, type Hashable } from '@finos/legend-shared';
-import { RelationshipEdgeView } from './DSLDiagram_RelationshipEdgeView';
-import { Point } from './geometry/DSLDiagram_Point';
-import type { ClassView } from './DSLDiagram_ClassView';
-import type { Diagram } from './DSLDiagram_Diagram';
-import { ClassViewExplicitReference } from './DSLDiagram_ClassViewReference';
-import { DIAGRAM_HASH_STRUCTURE } from '../../../../DSLDiagram_ModelUtils';
+import { RelationshipEdgeView } from './DSLDiagram_RelationshipEdgeView.js';
+import { Point } from './geometry/DSLDiagram_Point.js';
+import type { ClassView } from './DSLDiagram_ClassView.js';
+import type { Diagram } from './DSLDiagram_Diagram.js';
+import { ClassViewExplicitReference } from './DSLDiagram_ClassViewReference.js';
+import { DIAGRAM_HASH_STRUCTURE } from '../../../../DSLDiagram_ModelUtils.js';
 
 export class RelationshipView implements Hashable {
-  owner: Diagram;
+  readonly _OWNER: Diagram;
+
   from: RelationshipEdgeView;
   to: RelationshipEdgeView;
   /**
@@ -39,13 +40,15 @@ export class RelationshipView implements Hashable {
   path: Point[] = [];
 
   constructor(owner: Diagram, from: ClassView, to: ClassView) {
-    this.owner = owner;
+    this._OWNER = owner;
     this.from = new RelationshipEdgeView(
       ClassViewExplicitReference.create(from),
     );
     this.to = new RelationshipEdgeView(ClassViewExplicitReference.create(to));
   }
 
+  // TODO: to be simplified out of metamodel
+  // we will move these when we move hashing out of metamodel
   /**
    * Calculate the end points of the edge using offset, otherwise, use the center
    */
@@ -55,18 +58,20 @@ export class RelationshipView implements Hashable {
   ): Point {
     const box = edgeView.classView.value;
     const center = edgeView.classView.value.center();
-    const newX = center.x + (edgeView.offsetX ?? 0);
-    const newY = center.y + (edgeView.offsetY ?? 0);
+    const newX = center.x + (edgeView._offsetX ?? 0);
+    const newY = center.y + (edgeView._offsetY ?? 0);
     if (box.contains(newX, newY)) {
       return new Point(newX, newY);
     }
     if (allowChange) {
-      edgeView.offsetX = 0;
-      edgeView.offsetY = 0;
+      edgeView._offsetX = 0;
+      edgeView._offsetY = 0;
     }
     return new Point(center.x, center.y);
   }
 
+  // TODO: to be simplified out of metamodel
+  // we will move these when we move hashing out of metamodel
   /**
    * Compute the full path for the relationship view (including the ends even if these
    * ends lie inside of the classviews)
@@ -82,6 +87,8 @@ export class RelationshipView implements Hashable {
     ];
   }
 
+  // TODO: to be simplified out of metamodel
+  // we will move these when we move hashing out of metamodel
   /**
    * For a path, only keep **at most** 1 point at each end that lies inside the class view.
    * If there is no inside points, none of kept, so the path only contains outside points.
@@ -121,6 +128,8 @@ export class RelationshipView implements Hashable {
     return path.slice(start - 1, end + 2);
   };
 
+  // TODO: to be simplified out of metamodel
+  // we will move these when we move hashing out of metamodel
   /**
    * This method will compute the full path from the offset within class view for serialization and persistence purpose
    */

package/src/models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Point.ts

@@ -15,7 +15,7 @@
  */
 
 import { hashArray, type Hashable } from '@finos/legend-shared';
-import { DIAGRAM_HASH_STRUCTURE } from '../../../../../DSLDiagram_ModelUtils';
+import { DIAGRAM_HASH_STRUCTURE } from '../../../../../DSLDiagram_ModelUtils.js';
 
 export class Point implements Hashable {
   readonly x: number;
@@ -26,14 +26,6 @@ export class Point implements Hashable {
     this.y = y;
   }
 
-  rotateX(angle: number): number {
-    return this.x * Math.cos(angle) - this.y * Math.sin(angle);
-  }
-
-  rotateY(angle: number): number {
-    return this.x * Math.sin(angle) + this.y * Math.cos(angle);
-  }
-
   get hashCode(): string {
     return hashArray([
       DIAGRAM_HASH_STRUCTURE.POINT,

package/src/models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_PositionedRectangle.ts

@@ -15,63 +15,31 @@
  */
 
 import { hashArray, type Hashable } from '@finos/legend-shared';
-import { Point } from './DSLDiagram_Point';
-import { Rectangle } from './DSLDiagram_Rectangle';
-import { DIAGRAM_HASH_STRUCTURE } from '../../../../../DSLDiagram_ModelUtils';
+import { Point } from './DSLDiagram_Point.js';
+import { Rectangle } from './DSLDiagram_Rectangle.js';
+import { DIAGRAM_HASH_STRUCTURE } from '../../../../../DSLDiagram_ModelUtils.js';
 
 export class PositionedRectangle implements Hashable {
+  _dummyObservable = {};
+
   position: Point;
   rectangle: Rectangle;
-  dummyObservable = {};
 
   constructor(position: Point, rectangle: Rectangle) {
     this.position = position;
     this.rectangle = rectangle;
   }
 
-  edgePoint = (): Point =>
-    new Point(
-      this.position.x + this.rectangle.width,
-      this.position.y + this.rectangle.height,
-    );
+  // TODO: to be simplified out of metamodel
+  // to be moved out when we move hashing out
   center = (): Point =>
     new Point(
       this.position.x + this.rectangle.width / 2,
       this.position.y + this.rectangle.height / 2,
     );
 
-  /**
-   * Build a small box at the bottom right corner of the rectangle so we can use that for selection to resize the box
-   */
-  buildBottomRightCornerBox(): PositionedRectangle {
-    const cornerX = this.position.x + this.rectangle.width;
-    const cornerY = this.position.y + this.rectangle.height;
-    const boxSize = 10;
-    return new PositionedRectangle(
-      new Point(cornerX - boxSize / 2, cornerY - boxSize / 2),
-      new Rectangle(boxSize, boxSize),
-    );
-  }
-
-  boxContains(otherBox: PositionedRectangle): boolean {
-    otherBox = this.normalizeBox(otherBox);
-    return (
-      this.contains(otherBox.position.x, otherBox.position.y) ||
-      this.contains(
-        otherBox.position.x + otherBox.rectangle.width,
-        otherBox.position.y,
-      ) ||
-      this.contains(
-        otherBox.position.x,
-        otherBox.position.y + otherBox.rectangle.height,
-      ) ||
-      this.contains(
-        otherBox.position.x + otherBox.rectangle.width,
-        otherBox.position.y + otherBox.rectangle.height,
-      )
-    );
-  }
-
+  // TODO: to be simplified out of metamodel
+  // to be moved out when we move hashing out
   contains(x: number, y: number): boolean {
     const box = this.normalizeBox(this);
     return (
@@ -82,6 +50,8 @@ export class PositionedRectangle implements Hashable {
     );
   }
 
+  // TODO: to be simplified out of metamodel
+  // to be moved out when we move hashing out
   normalizeBox(box: PositionedRectangle): PositionedRectangle {
     let newBox = box;
     if (box.rectangle.width < 0) {
@@ -100,7 +70,7 @@ export class PositionedRectangle implements Hashable {
   }
 
   get hashCode(): string {
-    this.dummyObservable; // manually trigger classview hash code recomputation
+    this._dummyObservable; // manually trigger class-view hash code recomputation
     return hashArray([
       DIAGRAM_HASH_STRUCTURE.POSITIONED_RECTANGLE,
       this.position,

package/src/models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Rectangle.ts

@@ -15,7 +15,7 @@
  */
 
 import { hashArray, type Hashable } from '@finos/legend-shared';
-import { DIAGRAM_HASH_STRUCTURE } from '../../../../../DSLDiagram_ModelUtils';
+import { DIAGRAM_HASH_STRUCTURE } from '../../../../../DSLDiagram_ModelUtils.js';
 
 export class Rectangle implements Hashable {
   readonly width: number;

package/src/models/protocols/pure/DSLDiagram_PureProtocolProcessorPlugin.ts

@@ -15,13 +15,13 @@
  */
 
 import packageJson from '../../../../package.json';
-import { V1_Diagram } from './v1/model/packageableElements/diagram/V1_DSLDiagram_Diagram';
+import { V1_Diagram } from './v1/model/packageableElements/diagram/V1_DSLDiagram_Diagram.js';
 import { type PlainObject, assertType } from '@finos/legend-shared';
 import { deserialize, serialize } from 'serializr';
 import {
   V1_diagramModelSchema,
   V1_DIAGRAM_ELEMENT_PROTOCOL_TYPE,
-} from './v1/transformation/pureProtocol/V1_DSLDiagram_ProtocolHelper';
+} from './v1/transformation/pureProtocol/V1_DSLDiagram_ProtocolHelper.js';
 import {
   type PackageableElement,
   type V1_ElementProtocolClassifierPathGetter,
@@ -35,14 +35,14 @@ import {
   V1_ElementBuilder,
   V1_buildFullPath,
 } from '@finos/legend-graph';
-import { V1_transformDiagram } from './v1/transformation/pureGraph/V1_DSLDiagram_TransformerHelper';
-import { Diagram } from '../../metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram';
-import { getOwnDiagram } from '../../../graphManager/DSLDiagram_GraphManagerHelper';
+import { V1_transformDiagram } from './v1/transformation/pureGraph/V1_DSLDiagram_TransformerHelper.js';
+import { Diagram } from '../../metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram.js';
+import { getOwnDiagram } from '../../../graphManager/DSLDiagram_GraphManagerHelper.js';
 import {
   V1_buildClassView,
   V1_buildGeneralizationView,
   V1_buildPropertyView,
-} from './v1/transformation/pureGraph/V1_DSLDiagram_GraphBuilderHelper';
+} from './v1/transformation/pureGraph/V1_DSLDiagram_GraphBuilderHelper.js';
 
 const DIAGRAM_ELEMENT_CLASSIFIER_PATH =
   'meta::pure::metamodel::diagram::Diagram';

package/src/models/protocols/pure/v1/model/packageableElements/diagram/V1_DSLDiagram_ClassView.ts

@@ -15,8 +15,8 @@
  */
 
 import { hashArray, type Hashable } from '@finos/legend-shared';
-import { V1_PositionedRectangle } from './geometry/V1_DSLDiagram_PositionedRectangle';
-import { DIAGRAM_HASH_STRUCTURE } from '../../../../../../DSLDiagram_ModelUtils';
+import { V1_PositionedRectangle } from './geometry/V1_DSLDiagram_PositionedRectangle.js';
+import { DIAGRAM_HASH_STRUCTURE } from '../../../../../../DSLDiagram_ModelUtils.js';
 
 export class V1_ClassView extends V1_PositionedRectangle implements Hashable {
   id!: string;

package/src/models/protocols/pure/v1/model/packageableElements/diagram/V1_DSLDiagram_Diagram.ts

@@ -15,14 +15,14 @@
  */
 
 import { hashArray, type Hashable } from '@finos/legend-shared';
-import type { V1_ClassView } from './V1_DSLDiagram_ClassView';
-import type { V1_PropertyView } from './V1_DSLDiagram_PropertyView';
-import type { V1_GeneralizationView } from './V1_DSLDiagram_GeneralizationView';
+import type { V1_ClassView } from './V1_DSLDiagram_ClassView.js';
+import type { V1_PropertyView } from './V1_DSLDiagram_PropertyView.js';
+import type { V1_GeneralizationView } from './V1_DSLDiagram_GeneralizationView.js';
 import {
   type V1_PackageableElementVisitor,
   V1_PackageableElement,
 } from '@finos/legend-graph';
-import { DIAGRAM_HASH_STRUCTURE } from '../../../../../../DSLDiagram_ModelUtils';
+import { DIAGRAM_HASH_STRUCTURE } from '../../../../../../DSLDiagram_ModelUtils.js';
 
 export class V1_Diagram extends V1_PackageableElement implements Hashable {
   classViews: V1_ClassView[] = [];

package/src/models/protocols/pure/v1/model/packageableElements/diagram/V1_DSLDiagram_GeneralizationView.ts

@@ -15,9 +15,9 @@
  */
 
 import { hashArray, type Hashable } from '@finos/legend-shared';
-import { V1_RelationshipView } from './V1_DSLDiagram_RelationshipView';
-import type { V1_Line } from './geometry/V1_DSLDiagram_Line';
-import { DIAGRAM_HASH_STRUCTURE } from '../../../../../../DSLDiagram_ModelUtils';
+import { V1_RelationshipView } from './V1_DSLDiagram_RelationshipView.js';
+import type { V1_Line } from './geometry/V1_DSLDiagram_Line.js';
+import { DIAGRAM_HASH_STRUCTURE } from '../../../../../../DSLDiagram_ModelUtils.js';
 
 export class V1_GeneralizationView
   extends V1_RelationshipView

package/src/models/protocols/pure/v1/model/packageableElements/diagram/V1_DSLDiagram_PropertyHolderView.ts

@@ -15,8 +15,8 @@
  */
 
 import { hashArray, type Hashable } from '@finos/legend-shared';
-import { V1_RelationshipView } from './V1_DSLDiagram_RelationshipView';
-import { DIAGRAM_HASH_STRUCTURE } from '../../../../../../DSLDiagram_ModelUtils';
+import { V1_RelationshipView } from './V1_DSLDiagram_RelationshipView.js';
+import { DIAGRAM_HASH_STRUCTURE } from '../../../../../../DSLDiagram_ModelUtils.js';
 import type { V1_PropertyPointer } from '@finos/legend-graph';
 
 export class V1_PropertyHolderView