@finos/legend-extension-dsl-diagram 1.0.28 → 1.0.31

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

@@ -14,63 +14,31 @@
  * limitations under the License.
  */
 
-import { observable, action, computed, makeObservable } from 'mobx';
-import { hashArray, changeEntry, type Hashable } from '@finos/legend-shared';
-import { RelationShipEdgeView as RelationshipEdgeView } from './DSLDiagram_RelationshipEdgeView';
+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 { Vector } from './geometry/DSLDiagram_Vector';
 import type { Diagram } from './DSLDiagram_Diagram';
 import { ClassViewExplicitReference } from './DSLDiagram_ClassViewReference';
 import { DIAGRAM_HASH_STRUCTURE } from '../../../../DSLDiagram_ModelUtils';
 
-/**
- * For a path, only counts the points which lie outside of the 2 class views
- */
-export const manageInsidePointsDynamically = (
-  path: Point[],
-  from: ClassView,
-  to: ClassView,
-): Point[] => {
-  if (!path.length) {
-    return [];
-  }
-
-  let start = 0;
-  let startPoint = path[start] as Point;
-
-  while (start < path.length - 1 && from.contains(startPoint.x, startPoint.y)) {
-    start++;
-    startPoint = path[start] as Point;
-  }
-
-  let end = path.length - 1;
-  let endPoint = path[end] as Point;
-
-  while (end > 0 && to.contains(endPoint.x, endPoint.y)) {
-    end--;
-    endPoint = path[end] as Point;
-  }
-
-  return path.slice(start - 1, end + 2);
-};
-
 export class RelationshipView implements Hashable {
   owner: Diagram;
   from: RelationshipEdgeView;
   to: RelationshipEdgeView;
-  // NOTE: to optimize performance for diagram, we have made classview's position and rectangle non-observable
-  // if we want to further optimize, perhaps we can also remove observability from path
+  /**
+   * NOTE: Unlike in the protocol model, we don't store the end points in the path but only store the
+   * offsets of that point from the center of the end/start classviews. The main purpose here is to
+   * make less error. We don't need to bother maintaining these points in the path. They are
+   * auto-managed. Even if an erroneous path is set (e.g. an empty list of points), this logic
+   * that we have will rectify that and create a sensible path.
+   *
+   * In exchange, this logic is a little complicated, we have tried to document as much about it as we could
+   * but the logic is not straight forward. Perhaps, we could simplify this in the future.
+   */
   path: Point[] = [];
 
   constructor(owner: Diagram, from: ClassView, to: ClassView) {
-    makeObservable(this, {
-      path: observable,
-      setPath: action,
-      changePoint: action,
-      fullPath: computed,
-    });
-
     this.owner = owner;
     this.from = new RelationshipEdgeView(
       ClassViewExplicitReference.create(from),
@@ -78,15 +46,32 @@ export class RelationshipView implements Hashable {
     this.to = new RelationshipEdgeView(ClassViewExplicitReference.create(to));
   }
 
-  setPath(val: Point[]): void {
-    this.path = val;
-  }
-  changePoint(val: Point, newVal: Point): void {
-    changeEntry(this.path, val, newVal);
+  /**
+   * Calculate the end points of the edge using offset, otherwise, use the center
+   */
+  private computeEdgeEndpoint(
+    edgeView: RelationshipEdgeView,
+    allowChange = true,
+  ): 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);
+    if (box.contains(newX, newY)) {
+      return new Point(newX, newY);
+    }
+    if (allowChange) {
+      edgeView.offsetX = 0;
+      edgeView.offsetY = 0;
+    }
+    return new Point(center.x, center.y);
   }
 
   /**
-   * Compute the full path for an edge, but notice here that the end points are recomputed every time, as such
+   * Compute the full path for the relationship view (including the ends even if these
+   * ends lie inside of the classviews)
+   *
+   * Notice here that the end points are recomputed every time, as such
    * `path` only stores point that matters to the edge but are not end points
    */
   buildFullPath(allowChange = true): Point[] {
@@ -98,136 +83,53 @@ export class RelationshipView implements Hashable {
   }
 
   /**
-   * This method will compute the full path from the offset within class view for persistence purpose
+   * 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.
    */
-  get fullPath(): Point[] {
-    return manageInsidePointsDynamically(
-      this.buildFullPath(),
-      this.from.classView.value,
-      this.to.classView.value,
-    );
-  }
-
-  /**
-   * Flatten the path if the angle is wide enough
-   * Also `swallow` points in path which lie inside of the rectangle of a view
-   */
-  possiblyFlattenPath(): void {
-    const fullPath = this.buildFullPath();
-    // NOTE: this method here will `swallow` up points inside of the boxes
-    const newPath = manageInsidePointsDynamically(
-      fullPath,
-      this.from.classView.value,
-      this.to.classView.value,
-    );
-
-    // recompute the offset point from center inside of `from` and `to` classviews.
-    // for each, we first check if `manageInsidePointsDynamically` removes any points from the full path
-    // if it does we will update the offset
-    if (newPath[0] !== fullPath[0]) {
-      const center = this.from.classView.value.center();
-      this.from.setOffsetX((newPath[0] as Point).x - center.x);
-      this.from.setOffsetY((newPath[0] as Point).y - center.y);
+  static pruneUnnecessaryInsidePoints = (
+    path: Point[],
+    from: ClassView,
+    to: ClassView,
+  ): Point[] => {
+    if (!path.length) {
+      return [];
     }
 
-    if (newPath[newPath.length - 1] !== fullPath[fullPath.length - 1]) {
-      const center = this.to.classView.value.center();
-      this.to.setOffsetX((newPath[newPath.length - 1] as Point).x - center.x);
-      this.to.setOffsetY((newPath[newPath.length - 1] as Point).y - center.y);
-    }
+    let start = 0;
+    let startPoint = path[start] as Point;
 
-    // find the point which can be flattened due to its wide angle
-    const result = [];
-    for (let i = 0; i < newPath.length - 2; i++) {
-      const v1 = Vector.fromPoints(
-        newPath[i + 1] as Point,
-        newPath[i] as Point,
-      ).norm();
-      const v2 = Vector.fromPoints(
-        newPath[i + 1] as Point,
-        newPath[i + 2] as Point,
-      ).norm();
-      const dot = v1.dotProduct(v2);
-      const angle = (Math.acos(dot) * 180) / Math.PI;
-      if (Math.abs(angle - 180) > 5) {
-        result.push(newPath[i + 1] as Point);
-      }
+    while (
+      start < path.length - 1 &&
+      from.contains(startPoint.x, startPoint.y)
+    ) {
+      start++;
+      startPoint = path[start] as Point;
     }
-    // here's where we will modify the path, i.e. swallow inside points if we have to
-    this.setPath(result);
-  }
 
-  /**
-   * Based on the location, find the point on the path that matches or create new point
-   * (within a threshold of proximity) from the coordinate and put this in the path array
-   * so it doesn't look too weird
-   */
-  findOrBuildPoint(
-    x: number,
-    y: number,
-    zoom: number,
-    allowChange = true,
-  ): Point | undefined {
-    for (const pt of this.path) {
-      if (
-        Math.sqrt((x - pt.x) * (x - pt.x) + (y - pt.y) * (y - pt.y)) <
-        10 / zoom
-      ) {
-        return pt;
-      }
-    }
-
-    const fullPath = this.buildFullPath(allowChange);
-    const newPath = [];
-    let point;
-
-    for (let i = 0; i < fullPath.length - 1; i++) {
-      const a = fullPath[i] as Point;
-      const b = fullPath[i + 1] as Point;
-      const n = new Vector(a.x, a.y).normal(new Vector(b.x, b.y)).norm();
-      const v = Vector.fromPoints(a, new Point(x, y));
-
-      if (Math.abs(n.dotProduct(v)) < 5 / zoom) {
-        const lx = (a.x < b.x ? a.x : b.x) - 5 / zoom;
-        const hx = (a.x < b.x ? b.x : a.x) + 5 / zoom;
-        const ly = (a.y < b.y ? a.y : b.y) - 5 / zoom;
-        const hy = (a.y < b.y ? b.y : a.y) + 5 / zoom;
+    // NOTE: due to the usage path, we could make sure `end > start`, but maybe this
+    // is an improvement to be done
 
-        if (lx <= x && x <= hx && ly <= y && y <= hy) {
-          point = new Point(x, y);
-          newPath.push(point);
-        }
-      }
+    let end = path.length - 1;
+    let endPoint = path[end] as Point;
 
-      if (i < fullPath.length - 2) {
-        newPath.push(fullPath[i + 1] as Point);
-      }
+    while (end > 0 && to.contains(endPoint.x, endPoint.y)) {
+      end--;
+      endPoint = path[end] as Point;
     }
-    if (point && allowChange) {
-      this.setPath(newPath);
-    }
-    return point;
-  }
+
+    // NOTE: slice upper bound is exclusive, hence the +2 instead of +1
+    return path.slice(start - 1, end + 2);
+  };
 
   /**
-   * Calculate the end points of the edge using offset, otherwise, use the center
+   * This method will compute the full path from the offset within class view for serialization and persistence purpose
    */
-  private computeEdgeEndpoint(
-    edgeView: RelationshipEdgeView,
-    allowChange = true,
-  ): 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);
-    if (box.contains(newX, newY)) {
-      return new Point(newX, newY);
-    }
-    if (allowChange) {
-      edgeView.setOffsetX(0);
-      edgeView.setOffsetY(0);
-    }
-    return new Point(center.x, center.y);
+  get pathForSerialization(): Point[] {
+    return RelationshipView.pruneUnnecessaryInsidePoints(
+      this.buildFullPath(),
+      this.from.classView.value,
+      this.to.classView.value,
+    );
   }
 
   get hashCode(): string {
@@ -235,7 +137,7 @@ export class RelationshipView implements Hashable {
       DIAGRAM_HASH_STRUCTURE.RELATIONSHIP_VIEW,
       this.from.classView.value.id,
       this.to.classView.value.id,
-      hashArray(this.fullPath),
+      hashArray(this.pathForSerialization),
     ]);
   }
 }

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

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { observable, action, makeObservable } from 'mobx';
 import { hashArray, type Hashable } from '@finos/legend-shared';
 import { Point } from './DSLDiagram_Point';
 import { Rectangle } from './DSLDiagram_Rectangle';
@@ -26,30 +25,10 @@ export class PositionedRectangle implements Hashable {
   dummyObservable = {};
 
   constructor(position: Point, rectangle: Rectangle) {
-    makeObservable(this, {
-      dummyObservable: observable,
-      forceRefreshHash: action,
-    });
-
     this.position = position;
     this.rectangle = rectangle;
   }
 
-  setRectangle(value: Rectangle): void {
-    this.rectangle = value;
-  }
-  setPosition(value: Point): void {
-    this.position = value;
-  }
-  /**
-   * NOTE: Having `position` and `rectangle` as observables compromises the performance of diagram
-   * so we want to have a way to refresh the hash for change detection to pick up new hash when we resize
-   * the class view box or move it.
-   */
-  forceRefreshHash(): void {
-    this.dummyObservable = {};
-  }
-
   edgePoint = (): Point =>
     new Point(
       this.position.x + this.rectangle.width,

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

@@ -17,8 +17,8 @@
 import type { Point } from './DSLDiagram_Point';
 
 export class Vector {
-  x: number;
-  y: number;
+  readonly x: number;
+  readonly y: number;
 
   constructor(x: number, y: number) {
     this.x = x;
@@ -29,7 +29,7 @@ export class Vector {
     return new Vector(b.x - a.x, b.y - a.y);
   }
 
-  norm(): Vector {
+  unit(): Vector {
     const norm = Math.sqrt(this.x * this.x + this.y * this.y);
     return new Vector(this.x / norm, this.y / norm);
   }

package/src/models/protocols/pure/v1/transformation/pureGraph/V1_DSLDiagram_GraphBuilderHelper.ts

@@ -35,7 +35,10 @@ import type { V1_Point } from '../../model/packageableElements/diagram/geometry/
 import type { V1_Rectangle } from '../../model/packageableElements/diagram/geometry/V1_DSLDiagram_Rectangle';
 import type { V1_PropertyView } from '../../model/packageableElements/diagram/V1_DSLDiagram_PropertyView';
 import type { V1_GeneralizationView } from '../../model/packageableElements/diagram/V1_DSLDiagram_GeneralizationView';
-import { getClassView } from '../../../../../../helpers/DiagramHelper';
+import {
+  getClassView,
+  _relationshipView_simplifyPath,
+} from '../../../../../../helpers/DiagramHelper';
 
 const buildPoint = (point: V1_Point): Point => {
   const x = guaranteeNonNullable(point.x, `Point 'x' coordinate is missing`);
@@ -115,7 +118,7 @@ export const V1_buildPropertyView = (
     targetClassView,
   );
   view.path = propertyView.line.points.map((point) => buildPoint(point));
-  view.possiblyFlattenPath(); // transform the line because we store only 2 end points that are inside points and we will calculate the offset
+  _relationshipView_simplifyPath(view); // transform the line because we store only 2 end points that are inside points and we will calculate the offset
   return view;
 };
 
@@ -141,7 +144,7 @@ export const V1_buildGeneralizationView = (
     targetClassView,
   );
   view.path = generalizationView.line.points.map((point) => buildPoint(point));
-  view.possiblyFlattenPath(); // transform the line because we store only 2 end points that are inside points and we will calculate the offset
+  _relationshipView_simplifyPath(view); // transform the line because we store only 2 end points that are inside points and we will calculate the offset
   return view;
 };
 

package/src/models/protocols/pure/v1/transformation/pureGraph/V1_DSLDiagram_TransformerHelper.ts

@@ -18,7 +18,7 @@ import type { ClassView } from '../../../../../metamodels/pure/packageableElemen
 import type { Diagram } from '../../../../../metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram';
 import type { GeneralizationView } from '../../../../../metamodels/pure/packageableElements/diagram/DSLDiagram_GeneralizationView';
 import type { PropertyView } from '../../../../../metamodels/pure/packageableElements/diagram/DSLDiagram_PropertyView';
-import type { RelationShipEdgeView } from '../../../../../metamodels/pure/packageableElements/diagram/DSLDiagram_RelationshipEdgeView';
+import type { RelationshipEdgeView } from '../../../../../metamodels/pure/packageableElements/diagram/DSLDiagram_RelationshipEdgeView';
 import { V1_Point } from '../../model/packageableElements/diagram/geometry/V1_DSLDiagram_Point';
 import { V1_ClassView } from '../../model/packageableElements/diagram/V1_DSLDiagram_ClassView';
 import { V1_Diagram } from '../../model/packageableElements/diagram/V1_DSLDiagram_Diagram';
@@ -32,7 +32,7 @@ import {
   V1_transformPropertyReference,
 } from '@finos/legend-graph';
 
-const relationshipEdgeViewTransformer = (value: RelationShipEdgeView): string =>
+const relationshipEdgeViewTransformer = (value: RelationshipEdgeView): string =>
   value.classView.value.id;
 
 const createRectangle = (height: number, width: number): V1_Rectangle => {
@@ -52,7 +52,7 @@ const createPoint = (x: number, y: number): V1_Point => {
 const transformPropertyView = (element: PropertyView): V1_PropertyView => {
   const view = new V1_PropertyView();
   const line = new V1_Line();
-  line.points = element.fullPath;
+  line.points = element.pathForSerialization;
   view.line = line;
   view.property = V1_transformPropertyReference(element.property);
   view.sourceView = relationshipEdgeViewTransformer(element.from);
@@ -65,7 +65,7 @@ const transformGenerationView = (
 ): V1_GeneralizationView => {
   const view = new V1_GeneralizationView();
   const line = new V1_Line();
-  line.points = element.fullPath;
+  line.points = element.pathForSerialization;
   view.line = line;
   view.sourceView = relationshipEdgeViewTransformer(element.from);
   view.targetView = relationshipEdgeViewTransformer(element.to);

package/src/stores/studio/DSLDiagram_GraphModifierHelper.ts

@@ -0,0 +1,164 @@
+/**
+ * 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 { addUniqueEntry, changeEntry, deleteEntry } from '@finos/legend-shared';
+import { action } 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 { Diagram } from '../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram';
+import type { GeneralizationView } from '../../models/metamodels/pure/packageableElements/diagram/DSLDiagram_GeneralizationView';
+import {
+  _findOrBuildPoint,
+  _relationshipView_simplifyPath,
+  _relationshipView_setPath,
+} from '../../helpers/DiagramHelper';
+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 { Point } from '../../models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Point';
+import type { PositionedRectangle } from '../../models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_PositionedRectangle';
+import type { Rectangle } from '../../models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Rectangle';
+import {
+  observe_AssociationView,
+  observe_ClassView,
+  observe_GeneralizationView,
+  observe_PropertyView,
+} from '../../graphManager/action/changeDetection/DSLDiagram_ObserverHelper';
+
+export const diagram_setClassViews = action(
+  (diagram: Diagram, val: ClassView[]): void => {
+    diagram.classViews = val.map(observe_ClassView);
+  },
+);
+export const diagram_addClassView = action(
+  (diagram: Diagram, val: ClassView): void => {
+    addUniqueEntry(diagram.classViews, observe_ClassView(val));
+  },
+);
+export const diagram_deleteClassView = action(
+  (diagram: Diagram, val: ClassView): void => {
+    deleteEntry(diagram.classViews, val);
+  },
+);
+export const diagram_setAssociationViews = action(
+  (diagram: Diagram, val: AssociationView[]): void => {
+    diagram.associationViews = val.map(observe_AssociationView);
+  },
+);
+export const diagram_deleteAssociationView = action(
+  (diagram: Diagram, val: AssociationView): void => {
+    deleteEntry(diagram.associationViews, val);
+  },
+);
+export const diagram_setGeneralizationViews = action(
+  (diagram: Diagram, val: GeneralizationView[]): void => {
+    diagram.generalizationViews = val.map(observe_GeneralizationView);
+  },
+);
+export const diagram_addGeneralizationView = action(
+  (diagram: Diagram, val: GeneralizationView): void => {
+    addUniqueEntry(
+      diagram.generalizationViews,
+      observe_GeneralizationView(val),
+    );
+  },
+);
+export const diagram_deleteGeneralizationView = action(
+  (diagram: Diagram, val: GeneralizationView): void => {
+    deleteEntry(diagram.generalizationViews, val);
+  },
+);
+export const diagram_setPropertyViews = action(
+  (diagram: Diagram, val: PropertyView[]): void => {
+    diagram.propertyViews = val.map(observe_PropertyView);
+  },
+);
+export const diagram_addPropertyView = action(
+  (diagram: Diagram, val: PropertyView): void => {
+    addUniqueEntry(diagram.propertyViews, observe_PropertyView(val));
+  },
+);
+export const diagram_deletePropertyView = action(
+  (diagram: Diagram, val: PropertyView): void => {
+    deleteEntry(diagram.propertyViews, val);
+  },
+);
+
+export const classView_setHideProperties = action(
+  (cv: ClassView, val: boolean): void => {
+    cv.hideProperties = val;
+  },
+);
+export const classView_setHideStereotypes = action(
+  (cv: ClassView, val: boolean): void => {
+    cv.hideStereotypes = val;
+  },
+);
+export const classView_setHideTaggedValues = action(
+  (cv: ClassView, val: boolean): void => {
+    cv.hideTaggedValues = val;
+  },
+);
+export const relationshipEdgeView_setOffsetX = action(
+  (r: RelationshipEdgeView, val: number): void => {
+    r.offsetX = val;
+  },
+);
+export const relationshipEdgeView_setOffsetY = action(
+  (r: RelationshipEdgeView, val: number): void => {
+    r.offsetY = val;
+  },
+);
+
+// To optimize performance we will not observe point (path)
+export const relationshipView_changePoint = action(
+  (v: RelationshipView, val: Point, newVal: Point): void => {
+    changeEntry(v.path, val, newVal);
+  },
+);
+export const relationshipView_simplifyPath = action(
+  _relationshipView_simplifyPath,
+);
+
+export const findOrBuildPoint = action(_findOrBuildPoint);
+export const relationshipView_setPath = action(_relationshipView_setPath);
+
+// To optimize performance we will not observe rectangle
+export const positionedRectangle_setRectangle = action(
+  (pR: PositionedRectangle, value: Rectangle): void => {
+    pR.rectangle = value;
+  },
+);
+
+// To optimize performance we will not observe point (path)
+export const positionedRectangle_setPosition = action(
+  (pR: PositionedRectangle, value: Point): void => {
+    pR.position = value;
+  },
+);
+/**
+ * NOTE: Having `position` and `rectangle` as observables compromises the performance of diagram
+ * so we want to have a way to refresh the hash for change detection to pick up new hash when we resize
+ * the class view box or move it.
+ *
+ * We should re-consider the usefulness of this method, maybe it's more worthwhile to recompute hash
+ * for the whole diagram instead?
+ */
+export const positionedRectangle_forceRefreshHash = action(
+  (pR: PositionedRectangle): void => {
+    pR.dummyObservable = {};
+  },
+);

package/src/stores/studio/DiagramEditorState.ts

@@ -275,18 +275,24 @@ export class DiagramEditorState extends ElementEditorState {
           return 'diagram-editor__cursor--resize';
         } else if (this.renderer.mouseOverClassProperty) {
           return this.isReadOnly ||
-            this.renderer.mouseOverClassProperty.owner.isReadOnly
+            this.editorStore.graphManagerState.isElementReadOnly(
+              this.renderer.mouseOverClassProperty.owner,
+            )
             ? 'diagram-editor__cursor--not-allowed'
             : 'diagram-editor__cursor--text';
         } else if (this.renderer.mouseOverPropertyHolderViewLabel) {
           return this.isReadOnly ||
-            this.renderer.mouseOverPropertyHolderViewLabel.property.value.owner
-              .isReadOnly
+            this.editorStore.graphManagerState.isElementReadOnly(
+              this.renderer.mouseOverPropertyHolderViewLabel.property.value
+                .owner,
+            )
             ? 'diagram-editor__cursor--not-allowed'
             : 'diagram-editor__cursor--text';
         } else if (this.renderer.mouseOverClassName) {
           return this.isReadOnly ||
-            this.renderer.mouseOverClassName.class.value.isReadOnly
+            this.editorStore.graphManagerState.isElementReadOnly(
+              this.renderer.mouseOverClassName.class.value,
+            )
             ? 'diagram-editor__cursor--not-allowed'
             : 'diagram-editor__cursor--text';
         } else if (this.renderer.mouseOverClassView) {
@@ -375,7 +381,12 @@ export class DiagramEditorState extends ElementEditorState {
       classView: ClassView,
       point: Point,
     ): void => {
-      if (!this.isReadOnly && !classView.class.value.isReadOnly) {
+      if (
+        !this.isReadOnly &&
+        !this.editorStore.graphManagerState.isElementReadOnly(
+          classView.class.value,
+        )
+      ) {
         this.setInlineClassRenamerState(
           new DiagramEditorInlineClassRenamerState(this, classView, point),
         );
@@ -386,7 +397,10 @@ export class DiagramEditorState extends ElementEditorState {
       point: Point,
       propertyHolderView: PropertyHolderView | undefined,
     ): void => {
-      if (!this.isReadOnly && !property.owner.isReadOnly) {
+      if (
+        !this.isReadOnly &&
+        !this.editorStore.graphManagerState.isElementReadOnly(property.owner)
+      ) {
         this.setInlinePropertyEditorState(
           new DiagramEditorInlinePropertyEditorState(
             this,
@@ -400,7 +414,12 @@ export class DiagramEditorState extends ElementEditorState {
     this.renderer.onClassPropertyDoubleClick = editProperty;
     this.renderer.handleEditProperty = editProperty;
     this.renderer.handleAddSimpleProperty = (classView: ClassView): void => {
-      if (!this.isReadOnly && !classView.class.value.isReadOnly) {
+      if (
+        !this.isReadOnly &&
+        !this.editorStore.graphManagerState.isElementReadOnly(
+          classView.class.value,
+        )
+      ) {
         const _class = classView.class.value;
         class_addProperty(
           _class,

package/tsconfig.json

@@ -44,6 +44,7 @@
     "./src/graph/DSLDiagram_PureGraphPlugin.ts",
     "./src/graphManager/DSLDiagram_GraphManagerHelper.ts",
     "./src/graphManager/DSLDiagram_PureGraphManagerPlugin.ts",
+    "./src/graphManager/action/changeDetection/DSLDiagram_ObserverHelper.ts",
     "./src/helpers/DiagramHelper.ts",
     "./src/models/DSLDiagram_ModelUtils.ts",
     "./src/models/metamodels/pure/packageableElements/diagram/DSLDiagram_AssociationView.ts",
@@ -73,6 +74,7 @@
     "./src/models/protocols/pure/v1/transformation/pureGraph/V1_DSLDiagram_GraphBuilderHelper.ts",
     "./src/models/protocols/pure/v1/transformation/pureGraph/V1_DSLDiagram_TransformerHelper.ts",
     "./src/models/protocols/pure/v1/transformation/pureProtocol/V1_DSLDiagram_ProtocolHelper.ts",
+    "./src/stores/studio/DSLDiagram_GraphModifierHelper.ts",
     "./src/stores/studio/DiagramEditorState.ts",
     "./src/components/studio/ClassDiagramPreview.tsx",
     "./src/components/studio/DSLDiagram_LegendStudioPlugin.tsx",