From 475263807db83c6bbd44f2b1c61a2364a3508156 Mon Sep 17 00:00:00 2001 From: AaronW Date: Thu, 22 Aug 2024 17:20:19 -0500 Subject: [PATCH] revision --- package.json | 2 +- src/components/drivers/pdf-viewer.jsx | 11 ++ src/components/drivers/photo-viewer.jsx | 178 ++++++++++++++++++++---- 3 files changed, 166 insertions(+), 25 deletions(-) diff --git a/package.json b/package.json index 45727181..b301ab8b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@transcom/react-file-viewer", - "version": "1.2.2", + "version": "1.2.3", "description": "Extendable file viewer for web", "main": "dist/index.js", "module": "dist/index.js", diff --git a/src/components/drivers/pdf-viewer.jsx b/src/components/drivers/pdf-viewer.jsx index 3821591f..e9c46170 100644 --- a/src/components/drivers/pdf-viewer.jsx +++ b/src/components/drivers/pdf-viewer.jsx @@ -123,6 +123,17 @@ export default class PDFDriver extends React.Component { } } + componentWillUnmount() { + // Only utilize PDFJS.getDocument() if isEvalSupported == false. + if (PDFJS.isEvalSupported === false) { + const { pdf } = this.state + if (pdf) { + pdf.destroy() + this.setState({ pdf: null }) + } + } + } + setZoom(zoom) { this.setState({ zoom, diff --git a/src/components/drivers/photo-viewer.jsx b/src/components/drivers/photo-viewer.jsx index e82456a0..0a81e189 100644 --- a/src/components/drivers/photo-viewer.jsx +++ b/src/components/drivers/photo-viewer.jsx @@ -1,52 +1,182 @@ // Copyright (c) 2017 PlanGrid, Inc. -import React, { Component } from 'react'; +import React, { Component } from 'react' -import 'styles/photo-viewer.scss'; +import 'styles/photo-viewer.scss' export default class PhotoViewer extends Component { + constructor(props) { + super(props) + + this.state = { + zoom: 10, + } + + this.increaseZoom = this.increaseZoom.bind(this) + this.reduceZoom = this.reduceZoom.bind(this) + this.rotateLeft = this.rotateLeft.bind(this) + this.rotateRight = this.rotateRight.bind(this) + } + + setZoom(zoom) { + this.setState({ + zoom, + }) + } + + increaseZoom() { + const { zoom } = this.state + this.setZoom(zoom + 1) + } + + reduceZoom() { + const { zoom } = this.state + if (zoom > 1) { + this.setZoom(zoom - 1) + } + } + + updateRotation(rot) { + if (rot >= 0 && rot <= 3) { + this.props.setRotationValue(rot) + } + } + + rotateLeft() { + const newRotation = (this.props.rotationValue + 3) % 4 + this.updateRotation(newRotation) + } + + rotateRight() { + const newRotation = (this.props.rotationValue + 1) % 4 + this.updateRotation(newRotation) + } + componentDidMount() { - const { originalWidth, originalHeight } = this.props; - const imageDimensions = this.getImageDimensions.call(this, originalWidth, originalHeight); + const { originalWidth, originalHeight } = this.props + const imageDimensions = this.getImageDimensions.call( + this, + originalWidth, + originalHeight + ) - this.props.texture.image.style.width = `${imageDimensions.width}px`; - this.props.texture.image.style.height = `${imageDimensions.height}px`; - this.props.texture.image.setAttribute('class', 'photo'); - document.getElementById('pg-photo-container').appendChild(this.props.texture.image); + this.props.texture.image.style.width = `${imageDimensions.width}px` + this.props.texture.image.style.height = `${imageDimensions.height}px` + this.props.texture.image.style.transformOrigin = 'center center' + this.props.texture.image.setAttribute('class', 'photo') + this.props.texture.image.setAttribute('z-index', '0') + document + .getElementById('photo-viewer-image-container') + .appendChild(this.props.texture.image) + } + + componentWillUnmount() { + const { texture } = this.props + const image = texture.image + if (image.parentNode) { + image.parentNode.removeChild(image) + } } getImageDimensions(originalWidth, originalHeight) { // Scale image to fit into viewer - let imgHeight; - let imgWidth; - const { height: viewerHeight, width: viewerWidth } = this.props; + let imgHeight + let imgWidth + const { height: viewerHeight, width: viewerWidth } = this.props if (originalHeight <= viewerHeight && originalWidth <= viewerWidth) { - imgWidth = originalWidth; - imgHeight = originalHeight; + imgWidth = originalWidth + imgHeight = originalHeight } else { - const heightRatio = viewerHeight / originalHeight; - const widthRatio = viewerWidth / originalWidth; + const heightRatio = viewerHeight / originalHeight + const widthRatio = viewerWidth / originalWidth if (heightRatio < widthRatio) { - imgHeight = originalHeight * heightRatio; - imgWidth = originalWidth * heightRatio; + imgHeight = originalHeight * heightRatio + imgWidth = originalWidth * heightRatio } else { - imgHeight = originalHeight * widthRatio; - imgWidth = originalWidth * widthRatio; + imgHeight = originalHeight * widthRatio + imgWidth = originalWidth * widthRatio } } - return { height: imgHeight, width: imgWidth }; + return { height: imgHeight, width: imgWidth } } render() { + const { renderControls, texture, rotationValue } = this.props + const { zoom } = this.state + const scaleContainerStyle = { + transformOrigin: 'top left', + } const containerStyles = { width: `${this.props.width}px`, - height: `${this.props.height}px`, - }; + height: `${this.props.height - 50}px`, + zIndex: 1, + } + + if (rotationValue !== undefined) { + texture.image.style.transform = `rotate(${rotationValue * 90}deg)` + } + scaleContainerStyle.transform = `scale(${zoom * 0.1})` return ( -
- ); +
+
+
+   +
+
+ {renderControls ? ( + renderControls({ + handleZoomIn: this.increaseZoom, + handleZoomOut: this.reduceZoom, + handleRotateLeft: this.rotateLeft, + handleRotateRight: this.rotateRight, + }) + ) : ( +
+ + + + +
+ )} +
+ ) } }