From cc74cb9d2ea7d9ecf9523c8f3cf4d1323c8cec2c Mon Sep 17 00:00:00 2001 From: Eugene Ghanizadeh Khoub Date: Sun, 11 Feb 2024 18:34:14 +0100 Subject: [PATCH 1/2] remove element centering --- src/main/components/store/model-state.ts | 54 ++++++++--------- src/main/components/store/model-store.tsx | 4 +- src/tests/unit/apollon-editor-test.tsx | 1 + .../unit/components/store/model-state-test.ts | 58 ++++++++----------- .../unit/test-resources/class-diagram-v2.json | 2 +- .../unit/test-resources/class-diagram.json | 2 +- .../communication-diagram-v2.json | 4 +- .../test-resources/communication-diagram.json | 4 +- 8 files changed, 62 insertions(+), 67 deletions(-) diff --git a/src/main/components/store/model-state.ts b/src/main/components/store/model-state.ts index 8a7e2aaf6..c0c7f77dd 100644 --- a/src/main/components/store/model-state.ts +++ b/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,16 +89,17 @@ 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; - } - } + // TODO: remove this + // 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(); @@ -131,7 +132,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((element) => UMLElementRepository.get(element)) .reduce<{ [id: string]: UMLElement }>((acc, val) => ({ ...acc, ...(val && { [val.id]: val }) }), {}); @@ -172,20 +173,21 @@ 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; - } - } + // TODO: remove this + // 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]))), diff --git a/src/main/components/store/model-store.tsx b/src/main/components/store/model-store.tsx index 0155fc6a2..08145397c 100644 --- a/src/main/components/store/model-store.tsx +++ b/src/main/components/store/model-store.tsx @@ -49,7 +49,7 @@ export const createReduxStore = ( const patchReducer = patcher && createPatcherReducer(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(patcher, { selectDiscrete: (action) => isDiscreteAction(action) || isSelectionAction(action), selectContinuous: (action) => isContinuousAction(action), - transform: (state) => ModelState.toModel(state, false), + transform: (state) => ModelState.toModel(state), }), ] : []), diff --git a/src/tests/unit/apollon-editor-test.tsx b/src/tests/unit/apollon-editor-test.tsx index c359f216a..257471f22 100644 --- a/src/tests/unit/apollon-editor-test.tsx +++ b/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 => { diff --git a/src/tests/unit/components/store/model-state-test.ts b/src/tests/unit/components/store/model-state-test.ts index f3feabeca..335989188 100644 --- a/src/tests/unit/components/store/model-state-test.ts +++ b/src/tests/unit/components/store/model-state-test.ts @@ -4,22 +4,37 @@ 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('puts model on 0,0 when exporting.', () => { + // 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); + // 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.', () => { const state = ModelState.fromModel(diagram as any); expect(state.elements).toBeDefined(); state.elements && @@ -38,29 +53,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); }); diff --git a/src/tests/unit/test-resources/class-diagram-v2.json b/src/tests/unit/test-resources/class-diagram-v2.json index 31219a36f..7cf4db3d3 100644 --- a/src/tests/unit/test-resources/class-diagram-v2.json +++ b/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": [ { diff --git a/src/tests/unit/test-resources/class-diagram.json b/src/tests/unit/test-resources/class-diagram.json index a417921e0..d6a2f281e 100644 --- a/src/tests/unit/test-resources/class-diagram.json +++ b/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": { diff --git a/src/tests/unit/test-resources/communication-diagram-v2.json b/src/tests/unit/test-resources/communication-diagram-v2.json index a6e533fac..33dc3fe45 100644 --- a/src/tests/unit/test-resources/communication-diagram-v2.json +++ b/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": [], diff --git a/src/tests/unit/test-resources/communication-diagram.json b/src/tests/unit/test-resources/communication-diagram.json index 22761a833..e3a0f2376 100644 --- a/src/tests/unit/test-resources/communication-diagram.json +++ b/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": {}, From 1fb5ba71db615677e9147b009ce5e3857f6fd09e Mon Sep 17 00:00:00 2001 From: Eugene Ghanizadeh Khoub Date: Sun, 11 Feb 2024 18:45:47 +0100 Subject: [PATCH 2/2] remove some comments --- src/main/components/store/model-state.ts | 28 ------------------- .../unit/components/store/model-state-test.ts | 23 --------------- 2 files changed, 51 deletions(-) diff --git a/src/main/components/store/model-state.ts b/src/main/components/store/model-state.ts index c0c7f77dd..94f48bc76 100644 --- a/src/main/components/store/model-state.ts +++ b/src/main/components/store/model-state.ts @@ -89,18 +89,6 @@ export class ModelState { return relationship; }); - // TODO: remove this - // 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; @@ -173,22 +161,6 @@ export class ModelState { relationship.serialize(), ); - // TODO: remove this - // 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( diff --git a/src/tests/unit/components/store/model-state-test.ts b/src/tests/unit/components/store/model-state-test.ts index 335989188..89b2cf1d3 100644 --- a/src/tests/unit/components/store/model-state-test.ts +++ b/src/tests/unit/components/store/model-state-test.ts @@ -11,29 +11,6 @@ describe('model state.', () => { expect(bounds.x).toBe(0); }); - // it('puts model on 0,0 when exporting.', () => { - // 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); - // 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.', () => { const state = ModelState.fromModel(diagram as any); expect(state.elements).toBeDefined();