From 0edaf2835b6b87468795ddf79665abc847d435b4 Mon Sep 17 00:00:00 2001
From: Matthias Lehner <ga59bip@tum.de>
Date: Sat, 23 Dec 2023 12:55:26 +0100
Subject: [PATCH] Make update dialogs zoom aware

---
 .../components/controls/popover/popover-styles.ts    |  3 ++-
 src/main/components/controls/popover/popover.tsx     |  1 +
 src/main/components/update-pane/update-pane.tsx      | 12 +++++++++++-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/main/components/controls/popover/popover-styles.ts b/src/main/components/controls/popover/popover-styles.ts
index a07acdffd..7ea099e89 100644
--- a/src/main/components/controls/popover/popover-styles.ts
+++ b/src/main/components/controls/popover/popover-styles.ts
@@ -20,7 +20,6 @@ export const PopoverContainer = styled.div<Props>`
   max-width: 276px;
   position: absolute;
   text-align: left;
-  text-align: start;
   text-decoration: none;
   text-transform: none;
   text-shadow: none;
@@ -30,6 +29,7 @@ export const PopoverContainer = styled.div<Props>`
   word-break: normal;
   word-spacing: normal;
   word-wrap: break-word;
+  transform-origin: top left;
 
   *,
   *:before,
@@ -41,6 +41,7 @@ export const PopoverContainer = styled.div<Props>`
     let x = `${props.position.x}px`;
     let y = `${props.position.y}px`;
     const alignment = props.alignment === 'start' ? 0 : props.alignment === 'end' ? 100 : 50;
+
     switch (props.placement) {
       case 'top':
         x += ` - ${alignment}%`;
diff --git a/src/main/components/controls/popover/popover.tsx b/src/main/components/controls/popover/popover.tsx
index 35c2e27e7..c19f9de41 100644
--- a/src/main/components/controls/popover/popover.tsx
+++ b/src/main/components/controls/popover/popover.tsx
@@ -7,6 +7,7 @@ export type Props = {
   alignment?: 'start' | 'center' | 'end';
   position: { x: number; y: number };
   maxHeight?: number;
+  zoomFactor: number;
 } & HTMLAttributes<HTMLDivElement>;
 
 export const Popover = forwardRef<HTMLDivElement, Props>(
diff --git a/src/main/components/update-pane/update-pane.tsx b/src/main/components/update-pane/update-pane.tsx
index 1b367d4a9..fce3df471 100644
--- a/src/main/components/update-pane/update-pane.tsx
+++ b/src/main/components/update-pane/update-pane.tsx
@@ -25,6 +25,7 @@ type StateProps = {
   element: IUMLElement | null;
   disabled: boolean;
   mode: ApollonMode;
+  zoomFactor: number;
 };
 
 type DispatchProps = {
@@ -42,6 +43,7 @@ const enhance = compose<ComponentClass<OwnProps>>(
       element: state.elements[state.updating[0]],
       disabled: !state.editor.enablePopups,
       mode: state.editor.mode,
+      zoomFactor: state.editor.zoomFactor,
     }),
     {
       updateEnd: UMLElementRepository.updateEnd,
@@ -92,7 +94,14 @@ class UnwrappedUpdatePane extends Component<Props, State> {
     }
 
     return createPortal(
-      <Popover ref={this.popover} position={position} placement={placement} alignment={alignment} maxHeight={500}>
+      <Popover
+        ref={this.popover}
+        position={position}
+        placement={placement}
+        alignment={alignment}
+        maxHeight={500}
+        zoomFactor={this.props.zoomFactor}
+      >
         <CustomPopupComponent element={element} />
       </Popover>,
       this.props.root,
@@ -130,6 +139,7 @@ class UnwrappedUpdatePane extends Component<Props, State> {
       const absolute: Point = this.props
         // relative to drawing area (0,0)
         .getAbsolutePosition(element.id)
+        .scale(this.props.zoomFactor)
         .add(
           canvas
             .origin()