Print - toggle between map and print layout interactions (origo-map#1181

)

* Add map interaction control to top-left tools

* Expose print control map interaction config option

* Change to fa-map icon for interaction button

* Change map interaction icon to Material Icons

* More user friendly tooltip text

src/controls/print/index.js

@@ -45,7 +45,8 @@ const Print = function Print(options = {}) {
     rotation = 0,
     rotationStep = 1,
     leftFooterText = '',
-    filename
+    filename,
+    mapInteractionsActive = false
   } = options;
   let {
     showNorthArrow = true
@@ -101,7 +102,8 @@ const Print = function Print(options = {}) {
         showNorthArrow,
         rotation,
         rotationStep,
-        leftFooterText
+        leftFooterText,
+        mapInteractionsActive
       });
       mapMenu = viewer.getControlByName('mapmenu');
       menuItem = mapMenu.MenuItem({

src/controls/print/print-component.js

@@ -7,6 +7,7 @@ import {
 import pageTemplate from './page.template';
 import PrintMap from './print-map';
 import PrintSettings from './print-settings';
+import PrintInteractionToggle from './print-interaction-toggle';
 import PrintToolbar from './print-toolbar';
 import { downloadPNG, downloadPDF, printToScalePDF } from '../../utils/download';
 import { afterRender, beforeRender } from './download-callback';
@@ -38,7 +39,8 @@ const PrintComponent = function PrintComponent(options = {}) {
     createdPrefix,
     rotation,
     rotationStep,
-    leftFooterText
+    leftFooterText,
+    mapInteractionsActive
   } = options;
 
   let {
@@ -157,6 +159,7 @@ const PrintComponent = function PrintComponent(options = {}) {
     rotation,
     rotationStep
   });
+  const printInteractionToggle = PrintInteractionToggle({ map, target, mapInteractionsActive });
   const printToolbar = PrintToolbar();
   const closeButton = Button({
     cls: 'fixed top-right medium round icon-smaller light box-shadow z-index-ontop-high',
@@ -168,6 +171,7 @@ const PrintComponent = function PrintComponent(options = {}) {
     onInit() {
       this.on('render', this.onRender);
       this.addComponent(printSettings);
+      this.addComponent(printInteractionToggle);
       this.addComponent(printToolbar);
       this.addComponent(closeButton);
       printToolbar.on('PNG', this.downloadPNG.bind(this));
@@ -278,6 +282,9 @@ const PrintComponent = function PrintComponent(options = {}) {
       }
       const printElement = document.getElementById(this.getId());
       map.setTarget(viewerMapTarget);
+      if (printInteractionToggle) {
+        printInteractionToggle.restoreInteractions();
+      }
       this.restoreViewerControls();
       printElement.remove();
     },
@@ -391,7 +398,10 @@ const PrintComponent = function PrintComponent(options = {}) {
             </div>
           </div>
         </div>
-        ${printSettings.render()}
+        <div id="o-print-tools-left" class="top-left fixed no-print flex column spacing-vertical-small z-index-ontop-top height-full">
+          ${printSettings.render()}
+          ${printInteractionToggle.render()}
+        </div>
         ${printToolbar.render()}
         ${closeButton.render()}
       </div>

src/controls/print/print-interaction-toggle.js

@@ -0,0 +1,74 @@
+import {
+  Component, Button
+} from '../../ui';
+import mapInteractions from '../../mapinteractions';
+
+export default function PrintInteractionToggle(options = {}) {
+  const {
+    map,
+    target,
+    toggleIcon = '#ic_map_24px',
+    mapInteractionsActive
+  } = options;
+
+  const interactions = mapInteractions({ target });
+  let mapInteractionToggleButton;
+
+  const toggleState = function toggleState() {
+    if (mapInteractionToggleButton.getState() === 'initial') {
+      mapInteractionToggleButton.dispatch('change', { state: 'active' });
+    } else {
+      mapInteractionToggleButton.dispatch('change', { state: 'initial' });
+    }
+  };
+
+  const restoreInteractions = function restoreInteractions() {
+    if (map.getInteractions() && map.getInteractions().getLength() > 0) {
+      map.getInteractions().clear();
+    }
+    if (interactions) {
+      interactions.forEach(interaction => map.addInteraction(interaction));
+    }
+  };
+
+  const onInitial = function onInitial() {
+    map.getInteractions().clear();
+  };
+
+  const onActive = function onActive() {
+    restoreInteractions();
+  };
+
+  return Component({
+    onInit() {
+      mapInteractionToggleButton = Button({
+        cls: 'padding-small icon-smaller rounded light box-shadow',
+        icon: toggleIcon,
+        tooltipText: 'Ändra kartans läge',
+        tooltipPlacement: 'east',
+        state: 'initial',
+        validStates: ['initial', 'active'],
+        style: 'width: fit-content;',
+        click() {
+          toggleState();
+        },
+        methods: {
+          active: onActive,
+          initial: onInitial
+        }
+      });
+      this.addComponent(mapInteractionToggleButton);
+    },
+    onRender() {
+      this.dispatch('render');
+    },
+    render() {
+      if (!mapInteractionsActive) {
+        onInitial();
+        mapInteractionToggleButton.setState('initial');
+      }
+      return mapInteractionToggleButton.render();
+    },
+    restoreInteractions
+  });
+}

src/controls/print/print-settings.js

@@ -182,7 +182,7 @@ const PrintSettings = function PrintSettings(options = {}) {
       if (rotationControl) { components.push(rotationControl); }
       contentComponent.addComponents(components);
       printSettingsContainer = Collapse({
-        cls: 'no-print fixed flex column top-left rounded box-shadow bg-white overflow-hidden z-index-ontop-top',
+        cls: 'flex column rounded box-shadow bg-white',
         containerCls: 'collapse-container no-margin height-full',
         collapseX: true,
         collapseY: true,

src/controls/print/print-settings.template.js

@@ -14,7 +14,7 @@ export default function printTemplate({
   showScaleControl
 }) {
   return `
-  <div id="${id}" class="flex column no-print padding-large overflow-auto max-height-100 width-20">
+  <div id="${id}" class="flex column no-print padding-large overflow-auto max-height-100">
     ${titleControl.render()}
     <div class="padding-top"></div>
     ${descriptionControl.render()}