lightweight/right-tree
1
0
Fork 0
Code Issues 17 Pull requests Projects Releases Packages Wiki Activity Actions

Fix habitat image dimensions not showing entire image

Browse source
This commit is contained in:
Dana Lambert 2021-11-10 10:21:46 +13:00
parent 4ee50863d8
commit 4745ed578a
2 changed files with 27 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
frontend/src/components/steps/zone/ZoneSelector.js
View file

@ -1,5 +1,5 @@
import { useEffect, useState } from 'react'; import { useEffect, useState, useRef } from 'react';
import SampleBackground from '../../../assets/img/sample-bg.jpg'; import SampleBackground from '../../../assets/img/stepBackgrounds/step1.jpg';
import SiteRepository from '../../../repository/SiteRepository'; import SiteRepository from '../../../repository/SiteRepository';
@ -7,14 +7,18 @@ export default function ZoneSelector(props) {
const [habitatImageObject, setHabitatImageObject] = useState({}); const [habitatImageObject, setHabitatImageObject] = useState({});
const [habitatImageFile, setHabitatImageFile] = useState(SampleBackground); const [habitatImageFile, setHabitatImageFile] = useState(SampleBackground);
const [imageHeight, setImageHeight] = useState(0)
const [selectedZoneSegment, setZoneSegment] = useState(null); const [selectedZoneSegment, setZoneSegment] = useState(null);
const imageContainer = useRef(null)
const getHabitatImage = () => { const getHabitatImage = (findAndSetImageHeightFunc) => {
SiteRepository.getHabitatImage(props.filters.habitatImage).then(response => { SiteRepository.getHabitatImage(props.filters.habitatImage).then(response => {
if (response.status === 200) { if (response.status === 200) {
const imageData = response.data const imageData = response.data
setHabitatImageObject(imageData) setHabitatImageObject(imageData)
setHabitatImageFile(require(`../../../assets/img/habitats/${imageData.image_filename}`).default) const imageSrc = require(`../../../assets/img/habitats/${imageData.image_filename}`).default
setHabitatImageFile(imageSrc)
findAndSetImageHeightFunc(imageSrc)
} }
}) })
} }
@ -25,8 +29,19 @@ export default function ZoneSelector(props) {
} }
useEffect(() => { useEffect(() => {
// Calculates the image ratio and uses this to calculate the height in pixels based on outer container width
const findAndSetImageHeight = (imageSource) => {
let img = new Image();
img.src = imageSource;
const newHeight = imageContainer.current ? imageContainer.current.clientWidth * (img.height / img.width) : 0;
setImageHeight(newHeight);
}
// Retrieves the habitat image from the api if they are not loaded already // Retrieves the habitat image from the api if they are not loaded already
Object.keys(habitatImageObject).length === 0 && getHabitatImage() Object.keys(habitatImageObject).length === 0 && getHabitatImage(findAndSetImageHeight)
// Sets the image height such that the full image always displays on page resize
window.addEventListener("resize", () => findAndSetImageHeight(habitatImageFile), false);
// Temporarily bypass if there is no image available // Temporarily bypass if there is no image available
if (props.filters.zone || !props.filters.habitatImage) { if (props.filters.zone || !props.filters.habitatImage) {
@ -38,7 +53,8 @@ export default function ZoneSelector(props) {
const stepBackground = { const stepBackground = {
backgroundImage: `url(${habitatImageFile})`, backgroundImage: `url(${habitatImageFile})`,
backgroundSize: '100% auto', backgroundSize: '100% auto',
height: '100%', backgroundRepeat: 'none',
height: imageHeight,
width: '100%', width: '100%',
display: 'flex' display: 'flex'
} }
@ -50,7 +66,7 @@ export default function ZoneSelector(props) {
}; };
return ( return (
<div style={{ height: '80%', width: '100%' }}> <div ref={imageContainer} style={{ width: '100%' }}>
<p>{habitatImageObject && habitatImageObject.name}</p> <p>{habitatImageObject && habitatImageObject.name}</p>
{Object.keys(habitatImageObject).length === 0 ? ( {Object.keys(habitatImageObject).length === 0 ? (
// Sample segment selector (temporary if no image is available) // Sample segment selector (temporary if no image is available)
@ -62,7 +78,7 @@ export default function ZoneSelector(props) {
// Actual zone selector // Actual zone selector
(<div style={stepBackground}> (<div style={stepBackground}>
{habitatImageObject && habitatImageObject.image_segments && Array.isArray(habitatImageObject.image_segments) && habitatImageObject.image_segments.map(segment => {habitatImageObject && habitatImageObject.image_segments && Array.isArray(habitatImageObject.image_segments) && habitatImageObject.image_segments.map(segment =>
<div onClick={() => { selectZone(segment) }} className={`selectable-section ${selectedZoneSegment === segment.zone ? 'selected-segment' : ''}`} style={{ width: `${segment.segment_percentage_width}%`, height: '100%' }}></div> <div key={segment.id} onClick={() => { selectZone(segment) }} className={`selectable-section ${selectedZoneSegment === segment.zone ? 'selected-segment' : ''}`} style={{ width: `${segment.segment_percentage_width}%`, height: '100%' }}></div>
)} )}
</div> </div>
)} )}

4
frontend/src/components/steps/zone/ZoneStep.js
View file

@ -13,7 +13,9 @@ export default function ZoneStep(props) {
) )
const zoneSelectionPanel = ( const zoneSelectionPanel = (
<ZoneSelector {...props} /> <div style={{padding: '30px', height: "100%", width: "90%", display: "flex", justifyContent: 'center', alignItems: "center"}}>
<ZoneSelector {...props} />
</div>
) )
return ( return (