From a1b5c5f7251d3fb50382579b4e1e9e65e83a36ce Mon Sep 17 00:00:00 2001
From: Matthias Lehner <ga59bip@tum.de>
Date: Wed, 4 Oct 2023 23:14:44 +0200
Subject: [PATCH 1/2] Update unit tests

---
 .../__snapshots__/update-pane-test.tsx.snap   | 116 +++++++++++++-----
 1 file changed, 86 insertions(+), 30 deletions(-)

diff --git a/src/tests/unit/components/update-pane/__snapshots__/update-pane-test.tsx.snap b/src/tests/unit/components/update-pane/__snapshots__/update-pane-test.tsx.snap
index 2760fd5c..8a5430d9 100644
--- a/src/tests/unit/components/update-pane/__snapshots__/update-pane-test.tsx.snap
+++ b/src/tests/unit/components/update-pane/__snapshots__/update-pane-test.tsx.snap
@@ -23,12 +23,12 @@ exports[`test update pane render with element 1`] = `
 
 .c1 {
   display: block;
-  width: 100%;
+  overflow: auto;
   position: relative;
   min-height: inherit;
   max-height: inherit;
-  max-width: inherit;
-  overflow: auto;
+  width: 100%;
+  height: 100%;
   -ms-overflow-style: -ms-autohiding-scrollbar;
   border: 1px solid var(--apollon-gray,#e9ecef);
   background-position: calc(50% + 24.5px) calc(50% + 24.5px);
@@ -36,6 +36,15 @@ exports[`test update pane render with element 1`] = `
   background-image: linear-gradient(to right,var(--apollon-grid,rgba(36,39,36,0.1)) 1px,transparent 1px), linear-gradient(to bottom,var(--apollon-grid,rgba(36,39,36,0.1)) 1px,transparent 1px), linear-gradient(to right,var(--apollon-gray,#e9ecef) 1px,transparent 1px), linear-gradient(to bottom,var(--apollon-gray,#e9ecef) 1px,transparent 1px);
   background-repeat: repeat;
   background-attachment: local;
+  -webkit-transition: -webkit-transform 500ms,width 500ms,height 500ms;
+  -webkit-transition: transform 500ms,width 500ms,height 500ms;
+  transition: transform 500ms,width 500ms,height 500ms;
+  -webkit-transform-origin: top left;
+  -ms-transform-origin: top left;
+  transform-origin: top left;
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
 }
 
 .c9 {
@@ -404,20 +413,39 @@ exports[`test update pane render with element 1`] = `
       class="c0 apollon-editor"
     >
       <div
-        class="c1"
+        style="height: 100%; width: 100%; overflow: hidden;"
       >
-        <svg
-          class="c2"
-          data-cy="modeling-editor-canvas"
-          height="640"
-          id="modeling-editor-canvas"
-          tabindex="-1"
-          width="840"
+        <div
+          class="c1"
         >
-          <g
-            style="transform: translate(0px,0px);"
-          />
-        </svg>
+          <svg
+            class="c2"
+            data-cy="modeling-editor-canvas"
+            height="640"
+            id="modeling-editor-canvas"
+            tabindex="-1"
+            width="840"
+          >
+            <g
+              style="transform-origin: top left; transform: translate(0px,0px);"
+            />
+          </svg>
+        </div>
+        <div
+          style="position: absolute; left: 0.75em; bottom: 0.75em;"
+        >
+          <button
+            class="button-rounded"
+            style="margin-right: 0.5em;"
+          >
+            +
+          </button>
+          <button
+            class="button-rounded"
+          >
+            -
+          </button>
+        </div>
       </div>
       <div
         class="c3"
@@ -597,12 +625,12 @@ exports[`test update pane render with relationship 1`] = `
 
 .c1 {
   display: block;
-  width: 100%;
+  overflow: auto;
   position: relative;
   min-height: inherit;
   max-height: inherit;
-  max-width: inherit;
-  overflow: auto;
+  width: 100%;
+  height: 100%;
   -ms-overflow-style: -ms-autohiding-scrollbar;
   border: 1px solid var(--apollon-gray,#e9ecef);
   background-position: calc(50% + 24.5px) calc(50% + 24.5px);
@@ -610,6 +638,15 @@ exports[`test update pane render with relationship 1`] = `
   background-image: linear-gradient(to right,var(--apollon-grid,rgba(36,39,36,0.1)) 1px,transparent 1px), linear-gradient(to bottom,var(--apollon-grid,rgba(36,39,36,0.1)) 1px,transparent 1px), linear-gradient(to right,var(--apollon-gray,#e9ecef) 1px,transparent 1px), linear-gradient(to bottom,var(--apollon-gray,#e9ecef) 1px,transparent 1px);
   background-repeat: repeat;
   background-attachment: local;
+  -webkit-transition: -webkit-transform 500ms,width 500ms,height 500ms;
+  -webkit-transition: transform 500ms,width 500ms,height 500ms;
+  transition: transform 500ms,width 500ms,height 500ms;
+  -webkit-transform-origin: top left;
+  -ms-transform-origin: top left;
+  transform-origin: top left;
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
 }
 
 .c8 {
@@ -941,20 +978,39 @@ exports[`test update pane render with relationship 1`] = `
       class="c0 apollon-editor"
     >
       <div
-        class="c1"
+        style="height: 100%; width: 100%; overflow: hidden;"
       >
-        <svg
-          class="c2"
-          data-cy="modeling-editor-canvas"
-          height="640"
-          id="modeling-editor-canvas"
-          tabindex="-1"
-          width="840"
+        <div
+          class="c1"
         >
-          <g
-            style="transform: translate(0px,0px);"
-          />
-        </svg>
+          <svg
+            class="c2"
+            data-cy="modeling-editor-canvas"
+            height="640"
+            id="modeling-editor-canvas"
+            tabindex="-1"
+            width="840"
+          >
+            <g
+              style="transform-origin: top left; transform: translate(0px,0px);"
+            />
+          </svg>
+        </div>
+        <div
+          style="position: absolute; left: 0.75em; bottom: 0.75em;"
+        >
+          <button
+            class="button-rounded"
+            style="margin-right: 0.5em;"
+          >
+            +
+          </button>
+          <button
+            class="button-rounded"
+          >
+            -
+          </button>
+        </div>
       </div>
       <div
         class="c3"

From 936f4ee8bc6955dec71ffe4859870ee604df4573 Mon Sep 17 00:00:00 2001
From: Matthias Lehner <ga59bip@tum.de>
Date: Wed, 4 Oct 2023 23:18:19 +0200
Subject: [PATCH 2/2] Remove not needed elements state element from editor
 component

---
 src/main/components/canvas/editor.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/main/components/canvas/editor.tsx b/src/main/components/canvas/editor.tsx
index 04124029..d55fdd7c 100644
--- a/src/main/components/canvas/editor.tsx
+++ b/src/main/components/canvas/editor.tsx
@@ -8,7 +8,6 @@ import { AsyncDispatch } from '../../utils/actions/actions';
 import { EditorRepository } from '../../services/editor/editor-repository';
 import { clamp } from '../../utils/clamp';
 import { ZoomPane } from './zoom-pane';
-import {UMLElementState} from '../../services/uml-element/uml-element-types';
 
 const minScale: number = 0.5;
 const maxScale: number = 5.0;
@@ -50,7 +49,7 @@ const StyledEditor = styled.div<{ zoomFactor: number }>`
 
 type OwnProps = { children: ReactNode };
 
-type StateProps = { moving: string[]; connecting: boolean; reconnecting: boolean; zoomFactor: number; elements: UMLElementState; };
+type StateProps = { moving: string[]; connecting: boolean; reconnecting: boolean; zoomFactor: number; };
 
 type DispatchProps = {
   move: AsyncDispatch<typeof UMLElementRepository.move>;
@@ -63,7 +62,6 @@ const enhance = connect<StateProps, DispatchProps, OwnProps, ModelState>(
     connecting: state.connecting.length > 0,
     reconnecting: Object.keys(state.reconnecting).length > 0,
     zoomFactor: state.editor.zoomFactor,
-    elements: state.elements
   }),
   {
     move: UMLElementRepository.move,
@@ -156,7 +154,7 @@ class EditorComponent extends Component<Props, State> {
   }
 
   render() {
-    const { moving, connecting, reconnecting, zoomFactor = 1.0, elements, ...props } = this.props;
+    const { moving, connecting, reconnecting, zoomFactor = 1.0, ...props } = this.props;
 
     if (this.state.isMobile) {
       return (