Resolve PR comments

ls1intum · Oct 8, 2023 · d7bb826 · d7bb826
1 parent 936f4ee
commit d7bb826
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 67 deletions.
diff --git a/public/styles.css b/public/styles.css
@@ -167,6 +167,11 @@ button:active {
 
 .button-rounded {
   border-radius: 0.25rem;
+  width: 2.25em;
+  height: 2.25em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .switch button {

diff --git a/src/main/components/canvas/editor.tsx b/src/main/components/canvas/editor.tsx
@@ -16,21 +16,21 @@ const grid: number = 10;
 const subdivisions: number = 5;
 const borderWidth: number = 1;
 
-const StyledEditor = styled.div<{ zoomFactor: number }>`
+const StyledEditor = styled.div<{ scale: number }>`
   display: block;
   overflow: auto;
-  
+
   position: relative;
   min-height: inherit;
   max-height: inherit;
 
-  width: ${(props) => clamp(100 / props.zoomFactor, 100, 100 / minScale)}%;
-  height: ${(props) => clamp(100 / props.zoomFactor, 100, 100 / minScale)}%;
+  width: ${(props) => clamp(100 / props.scale, 100, 100 / minScale)}%;
+  height: ${(props) => clamp(100 / props.scale, 100, 100 / minScale)}%;
 
   -ms-overflow-style: -ms-autohiding-scrollbar;
   border: ${borderWidth}px solid ${(props) => props.theme.color.gray};
   background-position: calc(50% + ${(grid * subdivisions - borderWidth) / 2}px)
-  calc(50% + ${(grid * subdivisions - borderWidth) / 2}px);
+    calc(50% + ${(grid * subdivisions - borderWidth) / 2}px);
   background-size:
     ${grid * subdivisions}px ${grid * subdivisions}px,
     ${grid * subdivisions}px ${grid * subdivisions}px,
@@ -42,14 +42,17 @@ const StyledEditor = styled.div<{ zoomFactor: number }>`
     linear-gradient(to bottom, ${(props) => props.theme.color.gray} 1px, transparent 1px);
   background-repeat: repeat;
   background-attachment: local;
-  transition: transform 500ms, width 500ms, height 500ms;
+  transition:
+    transform 500ms,
+    width 500ms,
+    height 500ms;
   transform-origin: top left;
-  transform: scale(${(props) => props.zoomFactor ?? 1});
+  transform: scale(${(props) => props.scale ?? 1});
 `;
 
 type OwnProps = { children: ReactNode };
 
-type StateProps = { moving: string[]; connecting: boolean; reconnecting: boolean; zoomFactor: number; };
+type StateProps = { moving: string[]; connecting: boolean; reconnecting: boolean; scale: number };
 
 type DispatchProps = {
   move: AsyncDispatch<typeof UMLElementRepository.move>;
@@ -61,7 +64,7 @@ const enhance = connect<StateProps, DispatchProps, OwnProps, ModelState>(
     moving: [...state.moving],
     connecting: state.connecting.length > 0,
     reconnecting: Object.keys(state.reconnecting).length > 0,
-    zoomFactor: state.editor.zoomFactor,
+    scale: state.editor.zoomFactor,
   }),
   {
     move: UMLElementRepository.move,
@@ -90,52 +93,15 @@ class EditorComponent extends Component<Props, State> {
   zoomContainer = createRef<HTMLDivElement>();
 
   componentDidMount() {
-    // const { zoomFactor = 1 } = this.props;
-
     window.addEventListener(
       'wheel',
       (event) => {
         if (event.ctrlKey) {
           event.preventDefault();
-          // this.props.changeZoomFactor(clamp(zoomFactor - event.deltaY * 0.1, minScale, maxScale));
         }
       },
       { passive: false },
     );
-
-    /*
-    window.addEventListener('gesturestart', (event) => {
-      event.preventDefault();
-
-      this.setState({
-        ...this.state,
-        gestureStartZoomFactor: zoomFactor,
-      });
-    });
-
-    window.addEventListener('gesturechange', (event) => {
-      event.preventDefault();
-
-      const { zoomFactor = 1, } = this.props;
-
-      const relativeCursorOffsetX = (event as any).clientX - this.editor.current!.getBoundingClientRect().x;
-      const relativeCursorOffsetY = (event as any).clientY - this.editor.current!.getBoundingClientRect().y;
-
-      const newZoomFactor = clamp(this.state.gestureStartZoomFactor * (event as any).scale, minScale, maxScale);
-
-      this.zoomContainer.current?.scrollBy({
-        left: newZoomFactor * relativeCursorOffsetX - zoomFactor * relativeCursorOffsetX ,
-        top: newZoomFactor * relativeCursorOffsetY - zoomFactor * relativeCursorOffsetY,
-        behavior: 'smooth'
-      });
-
-      this.props.changeZoomFactor(newZoomFactor);
-    });
-
-    window.addEventListener('gestureend', function (event) {
-      event.preventDefault();
-    });
-    */
   }
 
   componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) {
@@ -154,14 +120,17 @@ class EditorComponent extends Component<Props, State> {
   }
 
   render() {
-    const { moving, connecting, reconnecting, zoomFactor = 1.0, ...props } = this.props;
+    const { moving, connecting, reconnecting, scale = 1.0, ...props } = this.props;
 
     if (this.state.isMobile) {
       return (
-        <div ref={this.zoomContainer} style={{ height: '100%', width: '100%', overflow: zoomFactor > 1.0 ? 'auto' : 'hidden' }}>
-          <StyledEditor ref={this.editor} {...props} onTouchMove={this.customScrolling} zoomFactor={zoomFactor}/>
+        <div
+          ref={this.zoomContainer}
+          style={{ height: '100%', width: '100%', overflow: scale > 1.0 ? 'auto' : 'hidden' }}
+        >
+          <StyledEditor ref={this.editor} {...props} onTouchMove={this.customScrolling} scale={scale} />
           <ZoomPane
-            value={zoomFactor}
+            value={scale}
             onChange={(zoomFactor) => this.props.changeZoomFactor(zoomFactor)}
             min={minScale}
             max={maxScale}
@@ -171,10 +140,13 @@ class EditorComponent extends Component<Props, State> {
       );
     } else {
       return (
-        <div ref={this.zoomContainer} style={{ height: '100%', width: '100%', overflow: zoomFactor > 1.0 ? 'auto' : 'hidden' }}>
-          <StyledEditor ref={this.editor} {...props} zoomFactor={zoomFactor}/>
+        <div
+          ref={this.zoomContainer}
+          style={{ height: '100%', width: '100%', overflow: scale > 1.0 ? 'auto' : 'hidden' }}
+        >
+          <StyledEditor ref={this.editor} {...props} scale={scale} />
           <ZoomPane
-            value={zoomFactor}
+            value={scale}
             onChange={(zoomFactor) => this.props.changeZoomFactor(zoomFactor)}
             min={minScale}
             max={maxScale}
@@ -186,7 +158,7 @@ class EditorComponent extends Component<Props, State> {
   }
 
   customScrolling = (event: React.TouchEvent) => {
-    const { zoomFactor = 1 } = this.props;
+    const { scale = 1 } = this.props;
 
     if (this.editor.current) {
       const clientRect = this.editor.current.getBoundingClientRect();
@@ -195,15 +167,15 @@ class EditorComponent extends Component<Props, State> {
 
       // scroll when on the edge of the element
       const scrollHorizontally =
-        touch.clientX * zoomFactor < clientRect.x + SCROLL_BORDER
+        touch.clientX * scale < clientRect.x + SCROLL_BORDER
           ? -SCROLL_DISTANCE
-          : touch.clientX * zoomFactor > clientRect.x + clientRect.width - SCROLL_BORDER
+          : touch.clientX * scale > clientRect.x + clientRect.width - SCROLL_BORDER
           ? SCROLL_DISTANCE
           : 0;
       const scrollVertically =
-        touch.clientY * zoomFactor < clientRect.y + SCROLL_BORDER
+        touch.clientY * scale < clientRect.y + SCROLL_BORDER
           ? -SCROLL_DISTANCE
-          : touch.clientY * zoomFactor > clientRect.y + clientRect.height - SCROLL_BORDER
+          : touch.clientY * scale > clientRect.y + clientRect.height - SCROLL_BORDER
           ? SCROLL_DISTANCE
           : 0;
       this.editor.current.scrollBy(scrollHorizontally, scrollVertically);

diff --git a/src/main/components/canvas/zoom-pane.tsx b/src/main/components/canvas/zoom-pane.tsx
@@ -13,7 +13,7 @@ export const ZoomPaneComponent: FunctionComponent<Props> = (props) => {
   const { min = 0.5, max = 5, step = 0.5, value, onChange } = props;
 
   return (
-    <div style={{ position: 'absolute', left: '0.75em', bottom: '0.75em' }}>
+    <div style={{ position: 'absolute', left: '0.75em', bottom: '0.75em', display: 'flex' }}>
       <button
         style={{ marginRight: '0.5em' }}
         className="button-rounded"

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
@@ -36,9 +36,9 @@ 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-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;
@@ -417,6 +417,7 @@ exports[`test update pane render with element 1`] = `
       >
         <div
           class="c1"
+          scale="1"
         >
           <svg
             class="c2"
@@ -432,7 +433,7 @@ exports[`test update pane render with element 1`] = `
           </svg>
         </div>
         <div
-          style="position: absolute; left: 0.75em; bottom: 0.75em;"
+          style="position: absolute; left: 0.75em; bottom: 0.75em; display: flex;"
         >
           <button
             class="button-rounded"
@@ -638,9 +639,9 @@ 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-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;
@@ -982,6 +983,7 @@ exports[`test update pane render with relationship 1`] = `
       >
         <div
           class="c1"
+          scale="1"
         >
           <svg
             class="c2"
@@ -997,7 +999,7 @@ exports[`test update pane render with relationship 1`] = `
           </svg>
         </div>
         <div
-          style="position: absolute; left: 0.75em; bottom: 0.75em;"
+          style="position: absolute; left: 0.75em; bottom: 0.75em; display: flex;"
         >
           <button
             class="button-rounded"