#8686 Snapshot plugin refactoring (#8687) (#8701)

(cherry picked from commit 5d26980)
geosolutions-it · Oct 17, 2022 · dd29877 · dd29877
1 parent 2822945
commit dd29877
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 51 deletions.
diff --git a/web/client/components/mapcontrols/Snapshot/SnapshotPanel.jsx b/web/client/components/mapcontrols/Snapshot/SnapshotPanel.jsx
@@ -9,27 +9,28 @@
 
 import './css/snapshot.css';
 
-import { isEqual } from 'lodash';
+import {isEqual} from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Alert, Col, Glyphicon, Grid, Image, Panel, Row, Table } from 'react-bootstrap';
+import {Alert, Col, Glyphicon, Grid, Image, Panel, Row, Table} from 'react-bootstrap';
 
 import ConfigUtils from '../../../utils/ConfigUtils';
 import Button from '../../misc/Button';
-import { DateFormat } from '../../I18N/I18N';
+import {DateFormat} from '../../I18N/I18N';
 import Message from '../../I18N/Message';
 import Dialog from '../../misc/Dialog';
 import Portal from '../../misc/Portal';
 import BasicSpinner from '../../misc/spinners/BasicSpinner/BasicSpinner';
 import notAvailable from './not-available.png';
 import shotingImg from './shoting.gif';
 import snapshotSupportComp from './SnapshotSupport';
+import PanelHeader from "../../misc/panels/PanelHeader";
 
 let SnapshotSupport;
 /**
  * SnapshotPanel allow to export a snapshot of the current map, showing a
  * preview of the snapshot, with some info about the map.
- * It prevent the user to Export snapshot with Google or Bing backgrounds.
+ * It prevents the user to Export snapshot with Google or Bing backgrounds.
  * It shows also the status of the current snapshot generation queue.
  */
 class SnapshotPanel extends React.Component {
@@ -53,8 +54,7 @@ class SnapshotPanel extends React.Component {
         downloadingMsg: PropTypes.node,
         timeout: PropTypes.number,
         mapType: PropTypes.string,
-        wrap: PropTypes.bool,
-        wrapWithPanel: PropTypes.bool,
+        floatingPanel: PropTypes.bool,
         panelStyle: PropTypes.object,
         panelClassName: PropTypes.string,
         toggleControl: PropTypes.func,
@@ -80,17 +80,17 @@ class SnapshotPanel extends React.Component {
         downloadingMsg: "snapshot.downloadingSnapshots",
         timeout: 1000,
         mapType: 'leaflet',
-        wrap: false,
-        wrapWithPanel: false,
+        floatingPanel: true,
         panelStyle: {
-            minWidth: "720px",
+            minWidth: "600px",
+            maxWidth: "100%",
             zIndex: 100,
             position: "absolute",
             overflow: "auto",
             top: "60px",
             right: "100px"
         },
-        panelClassName: "snapshot-panel",
+        panelClassName: "snapshot-panel ms-side-panel",
         closeGlyph: "1-close",
         buttonStyle: "primary",
         bounds: '#container'
@@ -111,13 +111,12 @@ class SnapshotPanel extends React.Component {
     }
 
     renderLayers = () => {
-        let items = this.props.layers.map((layer, i) => {
+        return this.props.layers.map((layer, i) => {
             if (layer.visibility) {
                 return <li key={i}>{layer.title}</li>;
             }
             return null;
         });
-        return items;
     };
 
     renderButton = (enabled) => {
@@ -194,12 +193,7 @@ class SnapshotPanel extends React.Component {
     };
 
     wrap = (panel) => {
-        if (this.props.wrap) {
-            if (this.props.wrapWithPanel) {
-                return (<Panel id={this.props.id} header={<span><span className="snapshot-panel-title"><Message msgId="snapshot.title"/></span><span className="settings-panel-close panel-close" onClick={this.props.toggleControl}></span></span>} style={this.props.panelStyle} className={this.props.panelClassName}>
-                    {panel}
-                </Panel>);
-            }
+        if (this.props.floatingPanel) {
             return (
                 <Portal>
                     <Dialog id="mapstore-snapshot-panel" style={this.props.panelStyle} bounds={this.props.bounds}>
@@ -209,7 +203,14 @@ class SnapshotPanel extends React.Component {
                 </Portal>
             );
         }
-        return panel;
+        return (
+            <Panel
+                id={this.props.id}
+                header={<PanelHeader position="right" bsStyle="primary" title={<Message msgId="snapshot.title"/>} glyph="camera" onClose={this.props.toggleControl} />}
+                style={this.props.panelStyle}
+                className={this.props.panelClassName}>
+                {panel}
+            </Panel>);
     };
 
     renderTaintedMessage = () => {
@@ -223,7 +224,7 @@ class SnapshotPanel extends React.Component {
         let bingOrGoogle = this.isBingOrGoogle();
         let snapshotReady = this.isSnapshotReady();
         return this.props.active ? this.wrap(
-            <Grid role="body" className="snapshot-panel" fluid>
+            <Grid role="body" className="snapshot-inner-panel" fluid>
                 <Row key="main">
                     <Col key="previewCol" xs={7} sm={7} md={7}>{this.renderPreview()}</Col>
                     <Col key="dataCol" xs={5} sm={5} md={5}>

diff --git a/web/client/components/mapcontrols/Snapshot/css/snapshot.css b/web/client/components/mapcontrols/Snapshot/css/snapshot.css
@@ -1,7 +1,7 @@
- .snapshot-panel {
-    width: 700px;
+.snapshot-inner-panel{
+    width: 100%;
 }
-.snapshot-panel ul {
+.snapshot-inner-panel ul {
     list-style:none;
     padding-left:0;
 }
@@ -11,3 +11,7 @@
     right: 200px;
     min-width: 725px;
 }
+
+.snapshot-panel .panel-heading {
+    padding: 0;
+}
diff --git a/web/client/plugins/Snapshot.jsx b/web/client/plugins/Snapshot.jsx
@@ -6,26 +6,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import assign from 'object-assign';
 import React from 'react';
-import { Glyphicon } from 'react-bootstrap';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
+import {Glyphicon} from 'react-bootstrap';
+import {connect} from 'react-redux';
+import {createSelector} from 'reselect';
 
-import { toggleControl } from '../actions/controls';
-import {
-    changeSnapshotState,
-    onCreateSnapshot,
-    onRemoveSnapshot,
-    onSnapshotError,
-    saveImage
-} from '../actions/snapshot';
+import {createPlugin} from "../utils/PluginsUtils";
+import {toggleControl} from '../actions/controls';
+import {changeSnapshotState, onCreateSnapshot, onRemoveSnapshot, onSnapshotError, saveImage} from '../actions/snapshot';
 import SnapshotPanelComp from "../components/mapcontrols/Snapshot/SnapshotPanel";
 import SnapshotQueueComp from "../components/mapcontrols/Snapshot/SnapshotQueue";
 import snapshotReducers from '../reducers/snapshot';
-import { layersSelector } from '../selectors/layers';
-import { mapSelector } from '../selectors/map';
-import { mapTypeSelector } from '../selectors/maptype';
+import {layersSelector} from '../selectors/layers';
+import {mapSelector} from '../selectors/map';
+import {mapTypeSelector} from '../selectors/maptype';
 import Message from './locale/Message';
 
 const snapshotSelector = createSelector([
@@ -51,52 +45,70 @@ const SnapshotPanel = connect(snapshotSelector, {
     toggleControl: toggleControl.bind(null, 'snapshot', null)
 })(SnapshotPanelComp);
 
-const SnapshotPlugin = connect((state) => ({
+const SnapshotQueue = connect((state) => ({
     queue: state.snapshot && state.snapshot.queue || []
 }), {
     downloadImg: saveImage,
     onSnapshotError,
     onRemoveSnapshot
 })(SnapshotQueueComp);
 
+const SnapshotContainer = props => (
+    <>
+        <SnapshotPanel {...props} />
+        <SnapshotQueue {...props} />
+    </>
+);
 
-export default {
-    SnapshotPlugin: assign(SnapshotPlugin, {
+/**
+ * Tool to create snapshots from the active map viewport.
+ * @example
+ * {
+ *     "name": "Snapshot",
+ *     "cfg": {
+ *         "floatingPanel": true
+ *     }
+ * }
+ * @prop {boolean} [cfg.floatingPanel=true] show plugin UI in a floating dialog rather than inside the static panel
+ * @name Snapshot
+ * @class
+ * @memberof plugins
+ */
+export default createPlugin('SnapshotPlugin', {
+    component: SnapshotContainer,
+    containers: {
         Toolbar: {
             name: 'snapshot',
             position: 8,
-            panel: SnapshotPanel,
             help: <Message msgId="helptexts.snapshot"/>,
             tooltip: "snapshot.tooltip",
             icon: <Glyphicon glyph="camera"/>,
-            wrap: true,
+            toggle: true,
+            doNotHide: true,
             title: "snapshot.title",
-            exclusive: true,
             priority: 1
         },
         BurgerMenu: {
             name: 'snapshot',
             position: 3,
-            panel: SnapshotPanel,
             text: <Message msgId="snapshot.title"/>,
             icon: <Glyphicon glyph="camera"/>,
             action: toggleControl.bind(null, 'snapshot', null),
-            tools: [SnapshotPlugin],
-            priority: 2
+            priority: 3
         },
         SidebarMenu: {
             name: 'snapshot',
             position: 3,
-            panel: SnapshotPanel,
             text: <Message msgId="snapshot.title"/>,
             icon: <Glyphicon glyph="camera"/>,
             tooltip: "snapshot.tooltip",
             action: toggleControl.bind(null, 'snapshot', null),
+            doNotHide: true,
             toggle: true,
-            priority: 1
+            priority: 2
         }
-    }),
+    },
     reducers: {
         snapshot: snapshotReducers
     }
-};
+});