feat(pdf-zoom): implemented initial pdf zoom

MarkUsProject · Nov 21, 2024 · dd0e492 · dd0e492
1 parent 77250af
commit dd0e492
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 39 deletions.
diff --git a/app/assets/javascripts/Components/Result/image_viewer.jsx b/app/assets/javascripts/Components/Result/image_viewer.jsx
@@ -188,10 +188,10 @@ export class ImageViewer extends React.PureComponent {
             level: Math.floor(this.state.zoom * 100),
           })}
           <button onClick={this.zoomIn} className={"inline-button"}>
-            {I18n.t("results.zoom_in_image")}+
+            {I18n.t("results.zoom_in")}+
           </button>
           <button onClick={this.zoomOut} className={"inline-button"}>
-            {I18n.t("results.zoom_out_image")}-
+            {I18n.t("results.zoom_out")}-
           </button>
         </p>
         <div id="image_container" key={"image_container"}>

diff --git a/app/assets/javascripts/Components/Result/pdf_viewer.jsx b/app/assets/javascripts/Components/Result/pdf_viewer.jsx
@@ -1,9 +1,14 @@
 import React from "react";
+import {SingleSelectDropDown} from "../../DropDownMenu/SingleSelectDropDown";
 
 export class PDFViewer extends React.PureComponent {
   constructor(props) {
     super(props);
     this.pdfContainer = React.createRef();
+    this.state = {
+      zoom: "page-width",
+      rotationInDegrees: 0,
+    };
   }
 
   componentDidMount() {
@@ -18,6 +23,8 @@ export class PDFViewer extends React.PureComponent {
     if (this.props.resultView) {
       this.eventBus.on("pagesinit", this.ready_annotations);
       this.eventBus.on("pagesloaded", this.refresh_annotations);
+    } else {
+      this.eventBus.on("pagesloaded", this.update_pdf_view);
     }
 
     if (this.props.url) {
@@ -31,6 +38,8 @@ export class PDFViewer extends React.PureComponent {
     } else {
       if (this.props.resultView) {
         this.refresh_annotations();
+      } else {
+        this.update_pdf_view();
       }
     }
   }
@@ -44,7 +53,6 @@ export class PDFViewer extends React.PureComponent {
   ready_annotations = () => {
     annotation_type = ANNOTATION_TYPES.PDF;
 
-    this.pdfViewer.currentScaleValue = "page-width";
     window.annotation_manager = new PdfAnnotationManager(!this.props.released_to_students);
     window.annotation_manager.resetAngle();
     this.annotation_manager = window.annotation_manager;
@@ -61,15 +69,27 @@ export class PDFViewer extends React.PureComponent {
     window.pdfViewer = undefined;
   }
 
+  update_pdf_view = () => {
+    this.pdfViewer.currentScaleValue = this.state.zoom;
+    this.pdfViewer.pagesRotation = this.state.rotationInDegrees;
+  };
+
   refresh_annotations = () => {
     $(".annotation_holder").remove();
-    this.pdfViewer.currentScaleValue = "page-width";
+    this.update_pdf_view();
     this.props.annotations.forEach(this.display_annotation);
     if (!!this.props.annotationFocus) {
       document.getElementById("annotation_holder_" + this.props.annotationFocus).scrollIntoView();
     }
   };
 
+  rotate = () => {
+    annotation_manager.rotateClockwise90();
+    this.setState(({rotationInDegrees}) => ({
+      rotationInDegrees: (rotationInDegrees + 90) % 360,
+    }));
+  };
+
   display_annotation = annotation => {
     if (annotation.x_range === undefined || annotation.y_range === undefined) {
       return;
@@ -101,31 +121,64 @@ export class PDFViewer extends React.PureComponent {
     );
   };
 
-  rotate = () => {
-    annotation_manager.rotateClockwise90();
-    this.pdfViewer.rotatePages(90);
+  getZoomValuesToDisplayName = () => {
+    const zoomLevels = Array.from({length: 20}, (_, i) => ((i + 1) * 0.1).toFixed(1));
+
+    const valueToDisplayName = zoomLevels.reduce(
+      (acc, value) => {
+        acc[value] = `${(value * 100).toFixed(0)} %`;
+        return acc;
+      },
+      {"page-width": "Fit to page width"}
+    );
+
+    return valueToDisplayName;
   };
 
   render() {
     const cursor = this.props.released_to_students ? "default" : "crosshair";
     const userSelect = this.props.released_to_students ? "default" : "none";
+    const zoomValuesToDisplayName = this.getZoomValuesToDisplayName();
+
     return (
-      <div className="pdfContainerParent">
-        <div
-          id="pdfContainer"
-          className="pdfContainer"
-          style={{cursor, userSelect}}
-          ref={this.pdfContainer}
-        >
-          <div id="viewer" className="pdfViewer" />
+      <React.Fragment>
+        <div className="toolbar">
+          <div className="toolbar-actions">
+            {I18n.t("results.current_rotation", {rotation: this.state.rotationInDegrees})}
+            <button onClick={this.rotate} className={"inline-button"}>
+              {I18n.t("results.rotate_image")}
+            </button>
+            <span style={{marginLeft: "7px"}}>{I18n.t("results.zoom")}</span>
+            <SingleSelectDropDown
+              valueToDisplayName={zoomValuesToDisplayName}
+              options={Object.keys(zoomValuesToDisplayName)}
+              selected={this.state.zoom}
+              dropdownStyle={{minWidth: "auto", marginLeft: "5px", width: "150px"}}
+              selectionStyle={{minWidth: "auto", width: "100px", marginRight: "0px"}}
+              hideXMark={true}
+              onSelect={selection => {
+                this.setState({zoom: selection});
+              }}
+            />
+          </div>
+        </div>
+        <div className="pdfContainerParent">
           <div
-            key="sel_box"
-            id="sel_box"
-            className="annotation-holder-active"
-            style={{display: "none"}}
-          />
+            id="pdfContainer"
+            className="pdfContainer"
+            style={{cursor, userSelect, overflow: "auto"}}
+            ref={this.pdfContainer}
+          >
+            <div id="viewer" className="pdfViewer" />
+            <div
+              key="sel_box"
+              id="sel_box"
+              className="annotation-holder-active"
+              style={{display: "none"}}
+            />
+          </div>
         </div>
-      </div>
+      </React.Fragment>
     );
   }
 }
diff --git a/app/assets/javascripts/DropDownMenu/SingleSelectDropDown.jsx b/app/assets/javascripts/DropDownMenu/SingleSelectDropDown.jsx
@@ -72,28 +72,30 @@ export class SingleSelectDropDown extends React.Component {
     return (
       <div
         className="dropdown single-select-dropdown"
+        style={this.props.dropdownStyle}
         onClick={() => this.setState({expanded: !this.state.expanded})}
         onBlur={() => this.setState({expanded: false})}
         tabIndex={-1}
         data-testid={"dropdown"}
       >
-        <a data-testid={"selection"}>
+        <a data-testid={"selection"} style={this.props.selectionStyle}>
           {this.props.valueToDisplayName != null
             ? this.props.valueToDisplayName[this.props.selected]
             : this.props.selected}
         </a>
         {this.renderArrow()}
-        <div
-          className="float-right"
-          onClick={e => {
-            e.preventDefault();
-            this.onSelect(e, this.props.defaultValue);
-          }}
-          data-testid={"reset-dropdown-selection"}
-        >
-          <FontAwesomeIcon icon="fa-solid fa-xmark" className={"x-mark"} />
-        </div>
-
+        {!this.props.hideXMark && (
+          <div
+            className="float-right"
+            onClick={e => {
+              e.preventDefault();
+              this.onSelect(e, this.props.defaultValue);
+            }}
+            data-testid={"reset-dropdown-selection"}
+          >
+            <FontAwesomeIcon icon="fa-solid fa-xmark" className={"x-mark"} />
+          </div>
+        )}
         {expanded && this.renderDropdown(options, selected, expanded, disabled)}
       </div>
     );

diff --git a/app/assets/stylesheets/common/codeviewer.scss b/app/assets/stylesheets/common/codeviewer.scss
@@ -11,7 +11,7 @@
   .toolbar-actions {
     background-color: $background-main;
     font: 0.825em $fonts;
-    padding: 5px 0;
+    padding: 5px;
     text-align: right;
 
     a {

diff --git a/app/assets/stylesheets/grader.scss b/app/assets/stylesheets/grader.scss
@@ -26,7 +26,15 @@
 
 /* Panes content (for controlling the heights) */
 
-#codeviewer,
+#codeviewer {
+  display: flex;
+  flex-basis: 600px;
+  flex-direction: column;
+  flex-grow: 1;
+  width: 100%;
+  overflow: hidden;
+}
+
 #testviewer,
 #mark_viewer,
 #summary_viewer,

diff --git a/app/views/exam_templates/_student_info.html.erb b/app/views/exam_templates/_student_info.html.erb
@@ -37,9 +37,9 @@
         </div>
         <div class="exam-crop-button-container">
           <button id="increase-crop-scale" class="crop-scale-button"
-                  type="button" title="<%= I18n.t("results.zoom_in_image") %>"><i class="fa-solid fa-plus"></i></button>
+                  type="button" title="<%= I18n.t("results.zoom_in") %>"><i class="fa-solid fa-plus"></i></button>
           <button id="decrease-crop-scale" class="crop-scale-button"
-                  type="button" title="<%= I18n.t("results.zoom_out_image") %>"><i class="fa-solid fa-minus"></i></button>
+                  type="button" title="<%= I18n.t("results.zoom_out") %>"><i class="fa-solid fa-minus"></i></button>
         </div>
     </div>
   </div>

diff --git a/config/locales/views/results/en.yml b/config/locales/views/results/en.yml
@@ -91,5 +91,6 @@ en:
     view_group_repo: View group repository
     view_token_submit: Please enter the unique token provided by your instructor to view the results for this assignment.
     your_mark: Your Mark
-    zoom_in_image: Zoom in
-    zoom_out_image: Zoom out
+    zoom: 'Zoom:'
+    zoom_in: Zoom in
+    zoom_out: Zoom out