@finos/legend-extension-dsl-diagram 1.0.26 → 1.0.29

package/src/components/studio/DiagramEditor.tsx

@@ -84,10 +84,6 @@ import {
   isValidFullPath,
   isValidPathIdentifier,
   resolvePackagePathAndElementName,
-  setPropertyName,
-  setPropertyGenericType,
-  setPropertyMultiplicity,
-  addPackageElement,
 } from '@finos/legend-graph';
 import {
   guaranteeNonNullable,
@@ -104,10 +100,19 @@ import {
   CORE_DND_TYPE,
   ElementDragSource,
   useEditorStore,
+  property_setName,
+  property_setGenericType,
+  property_setMultiplicity,
+  package_addElement,
 } 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 {
+  classView_setHideProperties,
+  classView_setHideStereotypes,
+  classView_setHideTaggedValues,
+} from '../../stores/studio/DSLDiagram_ModifierHelper';
 
 const DiagramEditorContextMenu = observer(
   forwardRef<
@@ -519,21 +524,21 @@ const DiagramEditorClassViewEditor = observer(
       if (isReadOnly) {
         return;
       }
-      classView.setHideProperties(!classView.hideProperties);
+      classView_setHideProperties(classView, !classView.hideProperties);
       diagramEditorState.renderer.render();
     };
     const toggleHideTaggedValues = (): void => {
       if (isReadOnly) {
         return;
       }
-      classView.setHideTaggedValues(!classView.hideTaggedValues);
+      classView_setHideTaggedValues(classView, !classView.hideTaggedValues);
       diagramEditorState.renderer.render();
     };
     const toggleHideStereotypes = (): void => {
       if (isReadOnly) {
         return;
       }
-      classView.setHideStereotypes(!classView.hideStereotypes);
+      classView_setHideStereotypes(classView, !classView.hideStereotypes);
       diagramEditorState.renderer.render();
     };
 
@@ -857,7 +862,7 @@ const DiagramEditorInlineClassCreatorInner = observer(
         diagramEditorState.setInlineClassCreatorState(undefined);
         const [packagePath, name] = resolvePackagePathAndElementName(path);
         const _class = new Class(name);
-        addPackageElement(
+        package_addElement(
           editorStore.graphManagerState.graph.getOrCreatePackage(packagePath),
           _class,
         );
@@ -1032,14 +1037,14 @@ const DiagramEditorInlinePropertyEditorInner = observer(
       event,
     ) => {
       if (property instanceof DerivedProperty || property instanceof Property) {
-        setPropertyName(property, event.target.value);
+        property_setName(property, event.target.value);
         diagramEditorState.renderer.render();
       }
     };
 
     const changeMultiplicity = (val: Multiplicity): void => {
       if (property instanceof DerivedProperty || property instanceof Property) {
-        setPropertyMultiplicity(property, val);
+        property_setMultiplicity(property, val);
         diagramEditorState.renderer.render();
       }
     };
@@ -1059,7 +1064,7 @@ const DiagramEditorInlinePropertyEditorInner = observer(
     };
     const changePropertyType = (val: PackageableElementOption<Type>): void => {
       if (property instanceof Property || property instanceof DerivedProperty) {
-        setPropertyGenericType(property, new GenericType(val.value));
+        property_setGenericType(property, new GenericType(val.value));
       }
     };
 

package/src/helpers/DiagramHelper.ts

@@ -15,6 +15,7 @@
  */
 
 import type { PureModel } 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 { Point } from '../models/metamodels/pure/packageableElements/diagram/geometry/DSLDiagram_Point';
@@ -51,14 +52,14 @@ export const cleanUpDeadReferencesInDiagram = (
         .includes(propertyView.property.value.name),
   );
   propertyViewsToRemove.forEach((propertyView) =>
-    diagram.deletePropertyView(propertyView),
+    deleteEntry(diagram.propertyViews, propertyView),
   );
 
   // Fix orphan class views
   const classViewsToRemove = diagram.classViews.filter(
     (cv) => !graph.getNullableClass(cv.class.value.path),
   );
-  classViewsToRemove.forEach((cw) => diagram.deleteClassView(cw));
+  classViewsToRemove.forEach((cw) => deleteEntry(diagram.classViews, cw));
 
   // Fix orphan gneralization views
   const generalizationViewsToRemove = diagram.generalizationViews.filter(
@@ -74,6 +75,6 @@ export const cleanUpDeadReferencesInDiagram = (
     },
   );
   generalizationViewsToRemove.forEach((g) =>
-    diagram.deleteGeneralizationView(g),
+    deleteEntry(diagram.generalizationViews, g),
   );
 };

package/src/index.ts

@@ -24,10 +24,8 @@ export { DiagramRenderer, DIAGRAM_INTERACTION_MODE } from './DiagramRenderer';
 
 export { Diagram } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_Diagram';
 export { ClassView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_ClassView';
-export {
-  RelationshipView,
-  manageInsidePointsDynamically,
-} from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_RelationshipView';
+export { RelationshipView } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_RelationshipView';
+export { _relationView_manageInsidePointsDynamically } from './models/metamodels/pure/packageableElements/diagram/DSLDiagram_GraphModifierHelper';
 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';

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { computed, observable, action, makeObservable } from 'mobx';
+import { computed, observable, makeObservable } from 'mobx';
 import { hashArray, type Hashable } from '@finos/legend-shared';
 import { PositionedRectangle } from './geometry/DSLDiagram_PositionedRectangle';
 import { Rectangle } from './geometry/DSLDiagram_Rectangle';
@@ -43,9 +43,6 @@ export class ClassView extends PositionedRectangle implements Hashable {
       hideProperties: observable,
       hideTaggedValues: observable,
       hideStereotypes: observable,
-      setHideProperties: action,
-      setHideStereotypes: action,
-      setHideTaggedValues: action,
       hashCode: computed,
     });
 
@@ -54,16 +51,6 @@ export class ClassView extends PositionedRectangle implements Hashable {
     this.class = _class;
   }
 
-  setHideProperties(val: boolean): void {
-    this.hideProperties = val;
-  }
-  setHideStereotypes(val: boolean): void {
-    this.hideStereotypes = val;
-  }
-  setHideTaggedValues(val: boolean): void {
-    this.hideTaggedValues = val;
-  }
-
   override get hashCode(): string {
     return hashArray([
       DIAGRAM_HASH_STRUCTURE.CLASS_VIEW,

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

@@ -14,13 +14,12 @@
  * limitations under the License.
  */
 
-import { observable, action, makeObservable } from 'mobx';
+import { observable, makeObservable } from 'mobx';
 import type { Diagram } from './DSLDiagram_Diagram';
 import type { ClassView } from './DSLDiagram_ClassView';
 import {
   PackageableElementExplicitReference,
   ReferenceWithOwner,
-  setPackageableElementReferenceValue,
   type PackageableElementImplicitReference,
   type PackageableElementReference,
 } from '@finos/legend-graph';
@@ -37,17 +36,11 @@ export abstract class ClassViewReference extends ReferenceWithOwner {
 
     makeObservable(this, {
       value: observable,
-      setValue: action,
     });
 
     this.ownerReference = ownerReference;
     this.value = value;
   }
-
-  setValue(value: ClassView): void {
-    this.value = value;
-    setPackageableElementReferenceValue(this.ownerReference, value.owner);
-  }
 }
 
 export class ClassViewExplicitReference extends ClassViewReference {

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

@@ -14,13 +14,8 @@
  * limitations under the License.
  */
 
-import { observable, action, makeObservable, override } from 'mobx';
-import {
-  hashArray,
-  addUniqueEntry,
-  deleteEntry,
-  type Hashable,
-} from '@finos/legend-shared';
+import { observable, makeObservable, override } from 'mobx';
+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';
@@ -45,55 +40,10 @@ export class Diagram extends PackageableElement implements Hashable {
       associationViews: observable,
       generalizationViews: observable,
       propertyViews: observable,
-      setClassViews: action,
-      addClassView: action,
-      deleteClassView: action,
-      setAssociationViews: action,
-      deleteAssociationView: action,
-      setGeneralizationViews: action,
-      addGeneralizationView: action,
-      deleteGeneralizationView: action,
-      setPropertyViews: action,
-      addPropertyView: action,
-      deletePropertyView: action,
       _elementHashCode: override,
     });
   }
 
-  setClassViews(val: ClassView[]): void {
-    this.classViews = val;
-  }
-  addClassView(val: ClassView): void {
-    addUniqueEntry(this.classViews, val);
-  }
-  deleteClassView(val: ClassView): void {
-    deleteEntry(this.classViews, val);
-  }
-  setAssociationViews(val: AssociationView[]): void {
-    this.associationViews = val;
-  }
-  deleteAssociationView(val: AssociationView): void {
-    deleteEntry(this.associationViews, val);
-  }
-  setGeneralizationViews(val: GeneralizationView[]): void {
-    this.generalizationViews = val;
-  }
-  addGeneralizationView(val: GeneralizationView): void {
-    addUniqueEntry(this.generalizationViews, val);
-  }
-  deleteGeneralizationView(val: GeneralizationView): void {
-    deleteEntry(this.generalizationViews, val);
-  }
-  setPropertyViews(val: PropertyView[]): void {
-    this.propertyViews = val;
-  }
-  addPropertyView(val: PropertyView): void {
-    addUniqueEntry(this.propertyViews, val);
-  }
-  deletePropertyView(val: PropertyView): void {
-    deleteEntry(this.propertyViews, val);
-  }
-
   protected override get _elementHashCode(): string {
     return hashArray([
       DIAGRAM_HASH_STRUCTURE.DIAGRAM,

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

@@ -0,0 +1,165 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ClassView } from './DSLDiagram_ClassView';
+import type { RelationshipView } from './DSLDiagram_RelationshipView';
+import { Point } from './geometry/DSLDiagram_Point';
+import { Vector } from './geometry/DSLDiagram_Vector';
+
+export const _relationView_setPath = (
+  relationView: RelationshipView,
+  val: Point[],
+): void => {
+  relationView.path = val;
+};
+
+/**
+ * For a path, only counts the points which lie outside of the 2 class views
+ */
+export const _relationView_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);
+};
+
+/**
+ * Flatten the path if the angle is wide enough
+ * Also `swallow` points in path which lie inside of the rectangle of a view
+ */
+export const _relationView_possiblyFlattenPath = (
+  relationView: RelationshipView,
+): void => {
+  const fullPath = relationView.buildFullPath();
+  // NOTE: this method here will `swallow` up points inside of the boxes
+  const newPath = _relationView_manageInsidePointsDynamically(
+    fullPath,
+    relationView.from.classView.value,
+    relationView.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 = relationView.from.classView.value.center();
+
+    relationView.from.offsetX = (newPath[0] as Point).x - center.x;
+    relationView.from.offsetY = (newPath[0] as Point).y - center.y;
+  }
+
+  if (newPath[newPath.length - 1] !== fullPath[fullPath.length - 1]) {
+    const center = relationView.to.classView.value.center();
+    relationView.to.offsetX =
+      (newPath[newPath.length - 1] as Point).x - center.x;
+    relationView.to.offsetY =
+      (newPath[newPath.length - 1] as Point).y - center.y;
+  }
+
+  // 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);
+    }
+  }
+  // here's where we will modify the path, i.e. swallow inside points if we have to
+  _relationView_setPath(relationView, 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
+ */
+export const _findOrBuildPoint = (
+  relationView: RelationshipView,
+  x: number,
+  y: number,
+  zoom: number,
+  allowChange = true,
+): Point | undefined => {
+  for (const pt of relationView.path) {
+    if (
+      Math.sqrt((x - pt.x) * (x - pt.x) + (y - pt.y) * (y - pt.y)) <
+      10 / zoom
+    ) {
+      return pt;
+    }
+  }
+
+  const fullPath = relationView.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;
+
+      if (lx <= x && x <= hx && ly <= y && y <= hy) {
+        point = new Point(x, y);
+        newPath.push(point);
+      }
+    }
+
+    if (i < fullPath.length - 2) {
+      newPath.push(fullPath[i + 1] as Point);
+    }
+  }
+  if (point && allowChange) {
+    _relationView_setPath(relationView, newPath);
+  }
+  return point;
+};

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { observable, action, makeObservable } from 'mobx';
+import { observable, makeObservable } from 'mobx';
 import type { ClassViewReference } from './DSLDiagram_ClassViewReference';
 
 export class RelationShipEdgeView {
@@ -26,17 +26,8 @@ export class RelationShipEdgeView {
     makeObservable(this, {
       offsetX: observable,
       offsetY: observable,
-      setOffsetX: action,
-      setOffsetY: action,
     });
 
     this.classView = classView;
   }
-
-  setOffsetX(val: number): void {
-    this.offsetX = val;
-  }
-  setOffsetY(val: number): void {
-    this.offsetY = val;
-  }
 }

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

@@ -14,46 +14,15 @@
  * limitations under the License.
  */
 
-import { observable, action, computed, makeObservable } from 'mobx';
-import { hashArray, changeEntry, type Hashable } from '@finos/legend-shared';
+import { observable, computed, makeObservable } from 'mobx';
+import { hashArray, type Hashable } from '@finos/legend-shared';
 import { RelationShipEdgeView as 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);
-};
+import { _relationView_manageInsidePointsDynamically } from './DSLDiagram_GraphModifierHelper';
 
 export class RelationshipView implements Hashable {
   owner: Diagram;
@@ -66,8 +35,6 @@ export class RelationshipView implements Hashable {
   constructor(owner: Diagram, from: ClassView, to: ClassView) {
     makeObservable(this, {
       path: observable,
-      setPath: action,
-      changePoint: action,
       fullPath: computed,
     });
 
@@ -78,13 +45,6 @@ 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);
-  }
-
   /**
    * Compute the full path for an edge, but 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
@@ -101,114 +61,13 @@ export class RelationshipView implements Hashable {
    * This method will compute the full path from the offset within class view for persistence purpose
    */
   get fullPath(): Point[] {
-    return manageInsidePointsDynamically(
+    return _relationView_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);
-    }
-
-    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);
-    }
-
-    // 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);
-      }
-    }
-    // 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;
-
-        if (lx <= x && x <= hx && ly <= y && y <= hy) {
-          point = new Point(x, y);
-          newPath.push(point);
-        }
-      }
-
-      if (i < fullPath.length - 2) {
-        newPath.push(fullPath[i + 1] as Point);
-      }
-    }
-    if (point && allowChange) {
-      this.setPath(newPath);
-    }
-    return point;
-  }
-
   /**
    * Calculate the end points of the edge using offset, otherwise, use the center
    */
@@ -224,8 +83,8 @@ export class RelationshipView implements Hashable {
       return new Point(newX, newY);
     }
     if (allowChange) {
-      edgeView.setOffsetX(0);
-      edgeView.setOffsetY(0);
+      edgeView.offsetX = 0;
+      edgeView.offsetY = 0;
     }
     return new Point(center.x, center.y);
   }