Make update dialogs zoom aware

ls1intum · Dec 23, 2023 · 0edaf28 · 0edaf28
1 parent 0f00b6b
commit 0edaf28
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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()