fix: 去除版本信息

zhongrj

2025-11-25 b89962006164a462404b79a738bee8cbb6d7fe7e

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import React from 'react';
import PropTypes from 'prop-types';
import AssetDownloads from '../classes/AssetDownloads';
import '../css/ImagePopup.scss';
import { _ } from '../classes/gettext';
 
class ImagePopup extends React.Component {
    static propTypes = {
        feature: PropTypes.object.isRequired,
        task: PropTypes.object.isRequired,
    };
 
    constructor(props){
        super(props);
 
        this.state = {
            error: "",
            loading: true,
            expandThumb: false,
        }
    }
 
    getImageUrl(){
        const { feature, task } = this.props;
        return `/api/projects/${task.project}/tasks/${task.id}/images/thumbnail/${feature.properties.filename}`;
    }
 
    getThumbUrl(size){
        return `${this.getImageUrl()}?size=${size}`;
    }
 
    componentDidMount(){
        if (this.image) this.image.addEventListener("fullscreenchange", this.onFullscreenChange);
    }
 
    componentWillUnmount(){
        if (this.image) this.image.removeEventListener("fullscreenchange", this.onFullscreenChange);
    }
 
    onFullscreenChange = (e) => {
        if (!document.fullscreenElement){
            this.setState({expandThumb: false});
        }
    }
 
    imageOnError = () => {
        this.setState({error: _("Image missing"), loading: false});
    }
 
    imageOnLoad = () => {
        this.setState({loading: false});
    }
 
    onImgClick = () => {
        const { expandThumb } = this.state;
 
        if (!expandThumb){
            this.image.requestFullscreen();
            this.setState({ loading: true, expandThumb: true});
        }else{
            document.exitFullscreen();
            this.setState({ expandThumb: false });
        }
    }
 
    render(){
        const { error, loading, expandThumb } = this.state;
        const { feature, task } = this.props;
 
        const downloadImageLink = `/api/projects/${task.project}/tasks/${task.id}/images/download/${feature.properties.filename}`;
        const downloadShotsLink =  `/api/projects/${task.project}/tasks/${task.id}/download/shots.geojson`;
        const imageUrl = expandThumb ? this.getThumbUrl(999999999) : this.getThumbUrl(320);
        const assetDownload = AssetDownloads.only(["shots.geojson"])[0];
 
        return (<div className="image-popup">
            <div className="title" title={feature.properties.filename}>{feature.properties.filename}</div>
            {loading ? <div><i className="fa fa-circle-notch fa-spin fa-fw"></i></div>
            : ""}
            {error !== "" ? <div style={{marginTop: "8px"}}>{error}</div>
            : [
                <div key="image" className={`image ${expandThumb ? "fullscreen" : ""}`} style={{marginTop: "8px"}}  ref={(domNode) => { this.image = domNode;}}>
                    {loading && expandThumb ? <div><i className="fa fa-circle-notch fa-spin fa-fw"></i></div> : ""}
                    <a onClick={this.onImgClick} href="javascript:void(0);" title={feature.properties.filename}><img style={{borderRadius: "4px"}} src={imageUrl} onLoad={this.imageOnLoad} onError={this.imageOnError} /></a>
                </div>,
                <div key="download-image">
                    <a href={downloadImageLink}><i className="fa fa-image"></i> {_("Download Image")}</a>
                </div>
            ]}
            <div>
                <a href={downloadShotsLink}><i className={assetDownload.icon}></i> {assetDownload.label} </a>
            </div>
        </div>);
    }
}
 
export default ImagePopup;