remove element centering

src/main/components/store/model-state.ts

@@ -54,7 +54,7 @@ export interface ModelState {
 //        the boundary of the diagram is determined by some relationship.
 
 export class ModelState {
-  static fromModel(compatModel: UMLModelCompat, repositionRoots = true): PartialModelState {
+  static fromModel(compatModel: UMLModelCompat): PartialModelState {
     const model = backwardsCompatibleModel(compatModel);
 
     const apollonElements = model.elements;
@@ -89,17 +89,6 @@ export class ModelState {
       return relationship;
     });
 
-    if (repositionRoots) {
-      const roots = [...elements.filter((element) => !element.owner), ...relationships];
-      const bounds = computeBoundingBoxForElements(roots);
-      bounds.width = Math.ceil(bounds.width / 20) * 20;
-      bounds.height = Math.ceil(bounds.height / 20) * 20;
-      for (const element of roots) {
-        element.bounds.x -= bounds.x + bounds.width / 2;
-        element.bounds.y -= bounds.y + bounds.height / 2;
-      }
-    }
-
     // set diagram to keep diagram type
     const diagram: UMLDiagram = new UMLDiagram();
     diagram.type = model.type as UMLDiagramType;
@@ -131,7 +120,7 @@ export class ModelState {
     };
   }
 
-  static toModel(state: ModelState, repositionRoots = true): Apollon.UMLModel {
+  static toModel(state: ModelState): Apollon.UMLModel {
     const elements = Object.values(state.elements)
       .map<UMLElement | null>((element) => UMLElementRepository.get(element))
       .reduce<{ [id: string]: UMLElement }>((acc, val) => ({ ...acc, ...(val && { [val.id]: val }) }), {});
@@ -172,21 +161,6 @@ export class ModelState {
       relationship.serialize(),
     );
 
-    if (repositionRoots) {
-      const roots = [...apollonElementsArray, ...apollonRelationships].filter((element) => !element.owner);
-      const bounds = computeBoundingBoxForElements(roots);
-      bounds.width = Math.ceil(bounds.width / 20) * 20;
-      bounds.height = Math.ceil(bounds.height / 20) * 20;
-      for (const element of apollonElementsArray) {
-        element.bounds.x -= bounds.x;
-        element.bounds.y -= bounds.y;
-      }
-      for (const element of apollonRelationships) {
-        element.bounds.x -= bounds.x;
-        element.bounds.y -= bounds.y;
-      }
-    }
-
     const interactive: Apollon.Selection = {
       elements: arrayToInclusionMap(state.interactive.filter((id) => UMLElement.isUMLElement(state.elements[id]))),
       relationships: arrayToInclusionMap(

src/main/components/store/model-store.tsx

@@ -49,7 +49,7 @@ export const createReduxStore = (
   const patchReducer =
     patcher &&
     createPatcherReducer<UMLModel, ModelState>(patcher, {
-      transform: (model) => ModelState.fromModel(model, false) as ModelState,
+      transform: (model) => ModelState.fromModel(model) as ModelState,
       merge,
     });
 
@@ -73,7 +73,7 @@ export const createReduxStore = (
             createPatcherMiddleware<UMLModel, Actions, ModelState>(patcher, {
               selectDiscrete: (action) => isDiscreteAction(action) || isSelectionAction(action),
               selectContinuous: (action) => isContinuousAction(action),
-              transform: (state) => ModelState.toModel(state, false),
+              transform: (state) => ModelState.toModel(state),
             }),
           ]
         : []),

src/tests/unit/apollon-editor-test.tsx

@@ -26,6 +26,7 @@ afterEach(() => {
   });
 });
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const testClassDiagramAsSVG = require('./test-resources/class-diagram-as-svg.json') as string;
 
 const ignoreSVGClassNames = (svgString: string): string => {

src/tests/unit/components/store/model-state-test.ts

@@ -4,22 +4,14 @@ import { computeBoundingBoxForElements } from '../../../../main/utils/geometry/b
 import diagram from '../../test-resources/class-diagram.json';
 
 describe('model state.', () => {
-  it('centers a model when imported.', () => {
+  it('does not center the model when imported.', () => {
     const state = ModelState.fromModel(diagram as any);
     const bounds = computeBoundingBoxForElements(Object.values(state.elements as any));
 
-    expect(Math.abs(bounds.x + bounds.width / 2)).toBeLessThan(40);
-    expect(Math.abs(bounds.y + bounds.height / 2)).toBeLessThan(40);
-  });
-
-  it('does not center the model when imported, given the option.', () => {
-    const state = ModelState.fromModel(diagram as any, false);
-    const bounds = computeBoundingBoxForElements(Object.values(state.elements as any));
-
     expect(bounds.x).toBe(0);
   });
 
-  it('puts model on 0,0 when exporting.', () => {
+  it('deos not put model on 0,0 when exporting.', () => {
     const state = ModelState.fromModel(diagram as any);
     expect(state.elements).toBeDefined();
     state.elements &&
@@ -38,29 +30,6 @@ describe('model state.', () => {
     const exp = ModelState.toModel(state as any);
     const bounds = computeBoundingBoxForElements([...Object.values(exp.elements), ...Object.values(exp.relationships)]);
 
-    expect(bounds.x).toBe(0);
-    expect(bounds.y).toBe(0);
-  });
-
-  it('deos not put model on 0,0 when exporting, given the option.', () => {
-    const state = ModelState.fromModel(diagram as any);
-    expect(state.elements).toBeDefined();
-    state.elements &&
-      Object.values(state.elements).forEach((element) => {
-        if (UMLRelationship.isUMLRelationship(element)) {
-          element.path.forEach((point) => {
-            point.x += 100;
-            point.y += 100;
-          });
-        }
-
-        element.bounds.x += 100;
-        element.bounds.y += 100;
-      });
-
-    const exp = ModelState.toModel(state as any, false);
-    const bounds = computeBoundingBoxForElements([...Object.values(exp.elements), ...Object.values(exp.relationships)]);
-
     expect(bounds.x).not.toBe(0);
     expect(bounds.y).not.toBe(0);
   });

src/tests/unit/test-resources/class-diagram-v2.json

@@ -1,7 +1,7 @@
 {
   "version": "2.0.0",
   "type": "ClassDiagram",
-  "size": { "width": 860, "height": 260 },
+  "size": { "width": 1680, "height": 480 },
   "interactive": { "elements": [], "relationships": [] },
   "elements": [
     {

src/tests/unit/test-resources/class-diagram.json

@@ -1,7 +1,7 @@
 {
   "version": "3.0.0",
   "type": "ClassDiagram",
-  "size": { "width": 860, "height": 260 },
+  "size": { "width": 1680, "height": 480 },
   "interactive": { "elements": {}, "relationships": {} },
   "elements": {
     "c10b995a-036c-4e9e-aa67-0570ada5cb6a": {

src/tests/unit/test-resources/communication-diagram-v2.json

@@ -2,8 +2,8 @@
   "version": "2.0.0",
   "type": "CommunicationDiagram",
   "size": {
-    "width": 380,
-    "height": 240
+    "width": 700,
+    "height": 405
   },
   "interactive": {
     "elements": [],

src/tests/unit/test-resources/communication-diagram.json

@@ -2,8 +2,8 @@
   "version": "3.0.0",
   "type": "CommunicationDiagram",
   "size": {
-    "width": 380,
-    "height": 240
+    "width": 700,
+    "height": 405
   },
   "interactive": {
     "elements": {},