From 6856cb936cac89caa5cba61a5c2f6a4126c6281b Mon Sep 17 00:00:00 2001
From: MattiasSp <mattias.spangmyr@gmail.com>
Date: Mon, 22 Feb 2021 13:21:42 +0100
Subject: [PATCH 01/11] Expose print control header config options

---
 src/controls/print/index.js           | 18 ++++++++--
 src/controls/print/print-component.js | 18 +++++++---
 src/controls/print/print-settings.js  | 52 ++++++++++++++++++---------
 src/controls/print/title-control.js   | 36 ++++++++++---------
 4 files changed, 83 insertions(+), 41 deletions(-)

diff --git a/src/controls/print/index.js b/src/controls/print/index.js
index d820609e7..23e1af202 100644
--- a/src/controls/print/index.js
+++ b/src/controls/print/index.js
@@ -7,6 +7,10 @@ const Print = function Print(options = {}) {
     logo = {},
     northArrow = {},
     title = 'Skriv ut',
+    headerText = '',
+    headerPlaceholderText = 'Här kan du skriva en rubrik',
+    headerAlignment = 'center',
+    headerSizes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
     leftFooterText = '',
     showCreated = false,
     createdPrefix = '',
@@ -17,6 +21,8 @@ const Print = function Print(options = {}) {
     filename
   } = options;
   let {
+    headerSize = 'h4',
+    headerFormatIsVisible = false,
     showNorthArrow = true
   } = options;
 
@@ -36,9 +42,16 @@ const Print = function Print(options = {}) {
       const printComponent = PrintComponent({
         logo,
         northArrow,
-        target: viewer.getId(),
+        filename,
         map: viewer.getMap(),
+        target: viewer.getId(),
         viewer,
+        title: headerText,
+        titlePlaceholderText: headerPlaceholderText,
+        titleAlignment: headerAlignment,
+        titleSizes: headerSizes,
+        titleSize: headerSize,
+        titleFormatIsVisible: headerFormatIsVisible,
         leftFooterText,
         showCreated,
         createdPrefix,
@@ -46,8 +59,7 @@ const Print = function Print(options = {}) {
         scales,
         showScale,
         classes,
-        defaultClass,
-        filename
+        defaultClass
       });
       mapMenu = viewer.getControlByName('mapmenu');
       menuItem = mapMenu.MenuItem({
diff --git a/src/controls/print/print-component.js b/src/controls/print/print-component.js
index 6fd999ae4..91eabf152 100644
--- a/src/controls/print/print-component.js
+++ b/src/controls/print/print-component.js
@@ -19,6 +19,9 @@ const PrintComponent = function PrintComponent(options = {}) {
     map,
     target,
     viewer,
+    titlePlaceholderText,
+    titleAlignment,
+    titleSizes,
     leftFooterText,
     createdPrefix,
     scales,
@@ -27,6 +30,9 @@ const PrintComponent = function PrintComponent(options = {}) {
   } = options;
 
   let {
+    title,
+    titleSize,
+    titleFormatIsVisible,
     size = 'a4',
     orientation = 'portrait',
     showCreated,
@@ -40,9 +46,7 @@ const PrintComponent = function PrintComponent(options = {}) {
   let targetElement;
   const pageContainerId = cuid();
   const pageId = cuid();
-  let title = '';
-  let titleSize = 'h4';
-  let titleAlign = 'text-align-center';
+  let titleAlign = `text-align-${titleAlignment}`;
   let description = '';
   let descriptionSize = 'h4';
   let descriptionAlign = 'text-align-center';
@@ -117,11 +121,17 @@ const PrintComponent = function PrintComponent(options = {}) {
   };
 
   const printSettings = PrintSettings({
+    map,
+    title,
+    titlePlaceholderText,
+    titleAlignment,
+    titleSizes,
+    titleSize,
+    titleFormatIsVisible,
     orientation,
     customSize: sizes.custom,
     initialSize: size,
     sizes: Object.keys(sizes),
-    map,
     showCreated,
     showNorthArrow,
     scales,
diff --git a/src/controls/print/print-settings.js b/src/controls/print/print-settings.js
index 272f9cabf..b4f4f094a 100644
--- a/src/controls/print/print-settings.js
+++ b/src/controls/print/print-settings.js
@@ -15,22 +15,33 @@ import SetScaleControl from './set-scale-control';
 import ResolutionControl from './resolution-control';
 import ShowScaleControl from './show-scale-control';
 
-const PrintSettings = function PrintSettings({
-  closeIcon = '#ic_close_24px',
-  initialSize,
-  openIcon = '#ic_tune_24px',
-  orientation = 'portrait',
-  customSize,
-  sizes,
-  map,
-  showCreated,
-  showNorthArrow,
-  scales,
-  resolution = 150,
-  showScale,
-  classes,
-  defaultClass
-} = {}) {
+const PrintSettings = function PrintSettings(options = {}) {
+  const {
+    closeIcon = '#ic_close_24px',
+    openIcon = '#ic_tune_24px',
+    map,
+    title,
+    titlePlaceholderText,
+    titleAlignment,
+    titleSizes,
+    initialSize,
+    customSize,
+    sizes,
+    orientation = 'portrait',
+    showCreated,
+    showNorthArrow,
+    scales,
+    resolution = 150,
+    showScale,
+    classes,
+    defaultClass
+  } = options;
+
+  let {
+    titleSize,
+    titleFormatIsVisible
+  } = options;
+
   let headerComponent;
   let contentComponent;
   let openButton;
@@ -96,7 +107,14 @@ const PrintSettings = function PrintSettings({
 
       const orientationControl = OrientationControl({ orientation });
       const sizeControl = SizeControl({ initialSize, sizes });
-      const titleControl = TitleControl({ classes, size: defaultClass });
+      const titleControl = TitleControl({
+        title,
+        titlePlaceholderText,
+        titleAlignment,
+        titleSizes,
+        titleSize,
+        titleFormatIsVisible
+      });
       const descriptionControl = DescriptionControl({ classes, size: defaultClass });
       const marginControl = MarginControl({ checked: true });
       const createdControl = CreatedControl({ checked: showCreated });
diff --git a/src/controls/print/title-control.js b/src/controls/print/title-control.js
index f8aeac132..1fce3f833 100644
--- a/src/controls/print/title-control.js
+++ b/src/controls/print/title-control.js
@@ -2,19 +2,21 @@ import { Input, cuid, Component, Button, Dropdown, ToggleGroup } from '../../ui'
 
 export default function TitleControl(options = {}) {
   const {
-    title = '',
-    alignment = 'center',
-    classes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+    title,
+    titlePlaceholderText,
+    titleAlignment,
+    titleSizes
   } = options;
+
   let {
-    size = 'h4'
+    titleSize,
+    titleFormatIsVisible
   } = options;
+
   const cls = 'placeholder-text-smaller smaller';
-  const placeholderText = 'Här kan du skriva en rubrik';
   const style = { height: '2rem', margin: 0, width: '16rem' };
   const align = ['text-align-left', 'text-align-center', 'text-align-right'];
   const formatId = cuid();
-  let isVisible = false;
   let formatEl;
   let inputTitle;
   let formatButton;
@@ -30,7 +32,7 @@ export default function TitleControl(options = {}) {
       inputTitle = Input({
         cls,
         style,
-        placeholderText,
+        placeholderText: titlePlaceholderText,
         value: title
       });
       formatButton = Button({
@@ -42,19 +44,19 @@ export default function TitleControl(options = {}) {
       alignLeftComponent = Button({
         cls: 'grow light text-smaller',
         text: 'Vänster',
-        state: alignment === 'left' ? 'active' : 'initial',
+        state: titleAlignment === 'left' ? 'active' : 'initial',
         style: { width: '34%' }
       });
       alignCenterComponent = Button({
         cls: 'grow light text-smaller',
         text: 'Mitten',
-        state: alignment === 'center' ? 'active' : 'initial',
+        state: titleAlignment === 'center' ? 'active' : 'initial',
         style: { width: '34%' }
       });
       alignRightComponent = Button({
         cls: 'grow light text-smaller',
         text: 'Höger',
-        state: alignment === 'right' ? 'active' : 'initial',
+        state: titleAlignment === 'right' ? 'active' : 'initial',
         style: { width: '33%' }
       });
       alignButtons = [alignLeftComponent, alignCenterComponent, alignRightComponent];
@@ -87,25 +89,25 @@ export default function TitleControl(options = {}) {
     onChangeSize(evt) {
       this.dispatch('change:titleSize', { class: evt });
       selectSize.setButtonText(evt);
-      size = evt;
+      titleSize = evt;
     },
     onRender() {
       formatEl = document.getElementById(formatId);
       this.dispatch('render');
-      selectSize.setButtonText(size);
-      selectSize.setItems(classes);
-      this.onChangeSize(size);
+      selectSize.setButtonText(titleSize);
+      selectSize.setItems(titleSizes);
+      this.onChangeSize(titleSize);
       document.getElementById(selectSize.getId()).addEventListener('dropdown:select', (evt) => {
         this.onChangeSize(evt.target.textContent);
       });
     },
     onChangeVisible() {
-      if (isVisible) {
+      if (titleFormatIsVisible) {
         formatEl.classList.add('hidden');
       } else {
         formatEl.classList.remove('hidden');
       }
-      isVisible = !isVisible;
+      titleFormatIsVisible = !titleFormatIsVisible;
     },
     onChangeTitle(evt) {
       this.dispatch('change:title', evt);
@@ -122,7 +124,7 @@ export default function TitleControl(options = {}) {
           ${formatButton.render()}
         </div>
       </div>
-      <div class="hidden" id="${formatId}">
+      <div class="${titleFormatIsVisible ? "" : "hidden"}" id="${formatId}">
         <div class="padding-smaller">
           <h6>Justering titel</h6>
           ${alignControl.render()}

From cb1f84be9d6e8f374bf6b5b8a9ada4fc2281261c Mon Sep 17 00:00:00 2001
From: MattiasSp <mattias.spangmyr@gmail.com>
Date: Thu, 25 Feb 2021 21:41:06 +0100
Subject: [PATCH 02/11] Expose print control description config options

---
 src/controls/print/description-control.js | 38 ++++++++++++-----------
 src/controls/print/index.js               | 18 ++++++++---
 src/controls/print/print-component.js     | 24 ++++++++------
 src/controls/print/print-settings.js      | 21 ++++++++++---
 4 files changed, 64 insertions(+), 37 deletions(-)

diff --git a/src/controls/print/description-control.js b/src/controls/print/description-control.js
index 9a0646393..57730b5fa 100644
--- a/src/controls/print/description-control.js
+++ b/src/controls/print/description-control.js
@@ -2,19 +2,21 @@ import { Textarea, cuid, Component, Button, Dropdown, ToggleGroup } from '../../
 
 export default function DescriptionControl(options = {}) {
   const {
-    text = '',
-    alignment = 'center',
-    classes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+    description,
+    descriptionPlaceholderText,
+    descriptionAlignment,
+    descriptionSizes
   } = options;
+
   let {
-    size = 'h4'
+    descriptionSize,
+    descriptionFormatIsVisible
   } = options;
+
   const cls = 'placeholder-text-smaller smaller';
-  const placeholderText = 'Här kan du skriva en beskrivning';
   const style = { margin: 0 };
   const align = ['text-align-left', 'text-align-center', 'text-align-right'];
   const formatId = cuid();
-  let isVisible = false;
   let formatEl;
   let textareaDescription;
   let formatButton;
@@ -29,10 +31,10 @@ export default function DescriptionControl(options = {}) {
     onInit() {
       textareaDescription = Textarea({
         cls,
-        placeholderText,
+        placeholderText: descriptionPlaceholderText,
         style,
         cols: 32,
-        value: text
+        value: description
       });
       formatButton = Button({
         cls: 'grow light text-smaller',
@@ -43,19 +45,19 @@ export default function DescriptionControl(options = {}) {
       alignLeftComponent = Button({
         cls: 'grow light text-smaller',
         text: 'Vänster',
-        state: alignment === 'left' ? 'active' : 'initial',
+        state: descriptionAlignment === 'left' ? 'active' : 'initial',
         style: { width: '34%' }
       });
       alignCenterComponent = Button({
         cls: 'grow light text-smaller',
         text: 'Mitten',
-        state: alignment === 'center' ? 'active' : 'initial',
+        state: descriptionAlignment === 'center' ? 'active' : 'initial',
         style: { width: '34%' }
       });
       alignRightComponent = Button({
         cls: 'grow light text-smaller',
         text: 'Höger',
-        state: alignment === 'right' ? 'active' : 'initial',
+        state: descriptionAlignment === 'right' ? 'active' : 'initial',
         style: { width: '33%' }
       });
       alignButtons = [alignLeftComponent, alignCenterComponent, alignRightComponent];
@@ -88,25 +90,25 @@ export default function DescriptionControl(options = {}) {
     onChangeSize(evt) {
       this.dispatch('change:descriptionSize', { class: evt });
       selectSize.setButtonText(evt);
-      size = evt;
+      descriptionSize = evt;
     },
     onRender() {
       formatEl = document.getElementById(formatId);
       this.dispatch('render');
-      selectSize.setButtonText(size);
-      selectSize.setItems(classes);
-      this.onChangeSize(size);
+      selectSize.setButtonText(descriptionSize);
+      selectSize.setItems(descriptionSizes);
+      this.onChangeSize(descriptionSize);
       document.getElementById(selectSize.getId()).addEventListener('dropdown:select', (evt) => {
         this.onChangeSize(evt.target.textContent);
       });
     },
     onChangeVisible() {
-      if (isVisible) {
+      if (descriptionFormatIsVisible) {
         formatEl.classList.add('hidden');
       } else {
         formatEl.classList.remove('hidden');
       }
-      isVisible = !isVisible;
+      descriptionFormatIsVisible = !descriptionFormatIsVisible;
     },
     onChangeDescription(evt) {
       this.dispatch('change:description', evt);
@@ -123,7 +125,7 @@ export default function DescriptionControl(options = {}) {
           ${formatButton.render()}
         </div>
       </div>
-      <div class="hidden" id="${formatId}">
+      <div class="${descriptionFormatIsVisible ? "" : "hidden"}" id="${formatId}">
       <div class="padding-smaller">
         <h6>Justering beskrivning</h6>
         ${alignControl.render()}
diff --git a/src/controls/print/index.js b/src/controls/print/index.js
index 23e1af202..6b497d252 100644
--- a/src/controls/print/index.js
+++ b/src/controls/print/index.js
@@ -11,18 +11,22 @@ const Print = function Print(options = {}) {
     headerPlaceholderText = 'Här kan du skriva en rubrik',
     headerAlignment = 'center',
     headerSizes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+    descriptionText = '',
+    descriptionPlaceholderText = 'Här kan du skriva en beskrivning',
+    descriptionAlignment = 'center',
+    descriptionSizes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
     leftFooterText = '',
     showCreated = false,
     createdPrefix = '',
     scales = [],
     showScale = true,
-    classes,
-    defaultClass,
     filename
   } = options;
   let {
     headerSize = 'h4',
     headerFormatIsVisible = false,
+    descriptionSize = 'h4',
+    descriptionFormatIsVisible = false,
     showNorthArrow = true
   } = options;
 
@@ -52,14 +56,18 @@ const Print = function Print(options = {}) {
         titleSizes: headerSizes,
         titleSize: headerSize,
         titleFormatIsVisible: headerFormatIsVisible,
+        description: descriptionText,
+        descriptionPlaceholderText,
+        descriptionAlignment,
+        descriptionSizes,
+        descriptionSize,
+        descriptionFormatIsVisible,
         leftFooterText,
         showCreated,
         createdPrefix,
         showNorthArrow,
         scales,
-        showScale,
-        classes,
-        defaultClass
+        showScale
       });
       mapMenu = viewer.getControlByName('mapmenu');
       menuItem = mapMenu.MenuItem({
diff --git a/src/controls/print/print-component.js b/src/controls/print/print-component.js
index 91eabf152..2414c77b5 100644
--- a/src/controls/print/print-component.js
+++ b/src/controls/print/print-component.js
@@ -22,17 +22,21 @@ const PrintComponent = function PrintComponent(options = {}) {
     titlePlaceholderText,
     titleAlignment,
     titleSizes,
+    descriptionPlaceholderText,
+    descriptionAlignment,
+    descriptionSizes,
     leftFooterText,
     createdPrefix,
-    scales,
-    classes,
-    defaultClass
+    scales
   } = options;
 
   let {
     title,
     titleSize,
     titleFormatIsVisible,
+    description,
+    descriptionSize,
+    descriptionFormatIsVisible,
     size = 'a4',
     orientation = 'portrait',
     showCreated,
@@ -47,9 +51,7 @@ const PrintComponent = function PrintComponent(options = {}) {
   const pageContainerId = cuid();
   const pageId = cuid();
   let titleAlign = `text-align-${titleAlignment}`;
-  let description = '';
-  let descriptionSize = 'h4';
-  let descriptionAlign = 'text-align-center';
+  let descriptionAlign = `text-align-${descriptionAlignment}`;
   let viewerMapTarget;
   const printMarginClass = 'print-margin';
   let usePrintMargins = true;
@@ -128,6 +130,12 @@ const PrintComponent = function PrintComponent(options = {}) {
     titleSizes,
     titleSize,
     titleFormatIsVisible,
+    description,
+    descriptionPlaceholderText,
+    descriptionAlignment,
+    descriptionSizes,
+    descriptionSize,
+    descriptionFormatIsVisible,
     orientation,
     customSize: sizes.custom,
     initialSize: size,
@@ -136,9 +144,7 @@ const PrintComponent = function PrintComponent(options = {}) {
     showNorthArrow,
     scales,
     resolution,
-    showScale,
-    classes,
-    defaultClass
+    showScale
   });
   const printToolbar = PrintToolbar();
   const closeButton = Button({
diff --git a/src/controls/print/print-settings.js b/src/controls/print/print-settings.js
index b4f4f094a..321e73bef 100644
--- a/src/controls/print/print-settings.js
+++ b/src/controls/print/print-settings.js
@@ -24,6 +24,10 @@ const PrintSettings = function PrintSettings(options = {}) {
     titlePlaceholderText,
     titleAlignment,
     titleSizes,
+    description,
+    descriptionPlaceholderText,
+    descriptionAlignment,
+    descriptionSizes,
     initialSize,
     customSize,
     sizes,
@@ -32,14 +36,14 @@ const PrintSettings = function PrintSettings(options = {}) {
     showNorthArrow,
     scales,
     resolution = 150,
-    showScale,
-    classes,
-    defaultClass
+    showScale
   } = options;
 
   let {
     titleSize,
-    titleFormatIsVisible
+    titleFormatIsVisible,
+    descriptionSize,
+    descriptionFormatIsVisible
   } = options;
 
   let headerComponent;
@@ -115,7 +119,14 @@ const PrintSettings = function PrintSettings(options = {}) {
         titleSize,
         titleFormatIsVisible
       });
-      const descriptionControl = DescriptionControl({ classes, size: defaultClass });
+      const descriptionControl = DescriptionControl({
+        description,
+        descriptionPlaceholderText,
+        descriptionAlignment,
+        descriptionSizes,
+        descriptionSize,
+        descriptionFormatIsVisible
+      });
       const marginControl = MarginControl({ checked: true });
       const createdControl = CreatedControl({ checked: showCreated });
       const resolutionControl = ResolutionControl({ resolution });

From c16a336ab2ed33cadf06dc78c7520119cb9621dd Mon Sep 17 00:00:00 2001
From: MattiasSp <mattias.spangmyr@gmail.com>
Date: Tue, 23 Feb 2021 11:37:47 +0100
Subject: [PATCH 03/11] Expose print control size config options

---
 src/controls/print/custom-size-control.js | 15 +++++++++++----
 src/controls/print/index.js               | 16 ++++++++++++++++
 src/controls/print/print-component.js     | 22 ++++++++++++----------
 src/controls/print/print-settings.js      | 22 ++++++++++++++++------
 src/controls/print/size-control.js        |  7 ++++---
 5 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/src/controls/print/custom-size-control.js b/src/controls/print/custom-size-control.js
index fc43f4210..a8540476c 100644
--- a/src/controls/print/custom-size-control.js
+++ b/src/controls/print/custom-size-control.js
@@ -1,6 +1,13 @@
 import { Component, cuid, InputRange } from '../../ui';
 
 export default function CustomSizeControl(options = {}) {
+  const {
+    minHeight,
+    maxHeight,
+    minWidth,
+    maxWidth
+  } = options;
+
   let {
     height,
     width,
@@ -21,15 +28,15 @@ export default function CustomSizeControl(options = {}) {
       rangeHeightComponent = InputRange({
         cls: 'grey',
         initialValue: height,
-        maxValue: 420,
-        minValue: 50,
+        maxValue: maxHeight,
+        minValue: minHeight,
         style: { width: '100%' }
       });
       rangeWidthComponent = InputRange({
         cls: 'grey',
         initialValue: width,
-        maxValue: 420,
-        minValue: 50,
+        maxValue: maxWidth,
+        minValue: minWidth,
         style: { width: '100%' }
       });
       this.addComponents([rangeHeightComponent, rangeWidthComponent]);
diff --git a/src/controls/print/index.js b/src/controls/print/index.js
index 6b497d252..1b28f4c8d 100644
--- a/src/controls/print/index.js
+++ b/src/controls/print/index.js
@@ -15,6 +15,15 @@ const Print = function Print(options = {}) {
     descriptionPlaceholderText = 'Här kan du skriva en beskrivning',
     descriptionAlignment = 'center',
     descriptionSizes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+    sizes = {
+      a3: [420, 297],
+      a4: [297, 210],
+      custom: [297, 210]
+    },
+    sizeCustomMinHeight = 50,
+    sizeCustomMaxHeight = 420,
+    sizeCustomMinWidth = 50,
+    sizeCustomMaxWidth = 420,
     leftFooterText = '',
     showCreated = false,
     createdPrefix = '',
@@ -27,6 +36,7 @@ const Print = function Print(options = {}) {
     headerFormatIsVisible = false,
     descriptionSize = 'h4',
     descriptionFormatIsVisible = false,
+    sizeInitial = 'a4',
     showNorthArrow = true
   } = options;
 
@@ -62,6 +72,12 @@ const Print = function Print(options = {}) {
         descriptionSizes,
         descriptionSize,
         descriptionFormatIsVisible,
+        sizes,
+        size: sizeInitial,
+        sizeCustomMinHeight,
+        sizeCustomMaxHeight,
+        sizeCustomMinWidth,
+        sizeCustomMaxWidth,
         leftFooterText,
         showCreated,
         createdPrefix,
diff --git a/src/controls/print/print-component.js b/src/controls/print/print-component.js
index 2414c77b5..f54f0d3eb 100644
--- a/src/controls/print/print-component.js
+++ b/src/controls/print/print-component.js
@@ -25,6 +25,11 @@ const PrintComponent = function PrintComponent(options = {}) {
     descriptionPlaceholderText,
     descriptionAlignment,
     descriptionSizes,
+    sizes,
+    sizeCustomMinHeight,
+    sizeCustomMaxHeight,
+    sizeCustomMinWidth,
+    sizeCustomMaxWidth,
     leftFooterText,
     createdPrefix,
     scales
@@ -37,7 +42,7 @@ const PrintComponent = function PrintComponent(options = {}) {
     description,
     descriptionSize,
     descriptionFormatIsVisible,
-    size = 'a4',
+    size,
     orientation = 'portrait',
     showCreated,
     showNorthArrow,
@@ -60,12 +65,6 @@ const PrintComponent = function PrintComponent(options = {}) {
   let widthImage = 0;
   let heightImage = 0;
 
-  const sizes = {
-    a3: [420, 297],
-    a4: [297, 210],
-    custom: [297, 210]
-  };
-
   const setCustomSize = function setCustomSize(sizeObj) {
     if ('width' in sizeObj) {
       sizes.custom[1] = Number(sizeObj.width);
@@ -136,10 +135,13 @@ const PrintComponent = function PrintComponent(options = {}) {
     descriptionSizes,
     descriptionSize,
     descriptionFormatIsVisible,
+    sizes,
+    size,
+    sizeCustomMinHeight,
+    sizeCustomMaxHeight,
+    sizeCustomMinWidth,
+    sizeCustomMaxWidth,
     orientation,
-    customSize: sizes.custom,
-    initialSize: size,
-    sizes: Object.keys(sizes),
     showCreated,
     showNorthArrow,
     scales,
diff --git a/src/controls/print/print-settings.js b/src/controls/print/print-settings.js
index 321e73bef..6b6291733 100644
--- a/src/controls/print/print-settings.js
+++ b/src/controls/print/print-settings.js
@@ -28,9 +28,12 @@ const PrintSettings = function PrintSettings(options = {}) {
     descriptionPlaceholderText,
     descriptionAlignment,
     descriptionSizes,
-    initialSize,
-    customSize,
     sizes,
+    size,
+    sizeCustomMinHeight,
+    sizeCustomMaxHeight,
+    sizeCustomMinWidth,
+    sizeCustomMaxWidth,
     orientation = 'portrait',
     showCreated,
     showNorthArrow,
@@ -110,7 +113,10 @@ const PrintSettings = function PrintSettings(options = {}) {
       });
 
       const orientationControl = OrientationControl({ orientation });
-      const sizeControl = SizeControl({ initialSize, sizes });
+      const sizeControl = SizeControl({
+        initialSize: size,
+        sizes: Object.keys(sizes)
+      });
       const titleControl = TitleControl({
         title,
         titlePlaceholderText,
@@ -134,9 +140,13 @@ const PrintSettings = function PrintSettings(options = {}) {
       northArrowControl = NorthArrowControl({ showNorthArrow });
       rotationControl = RotationControl({ rotation: 0, map });
       customSizeControl = CustomSizeControl({
-        state: initialSize === 'custom' ? 'active' : 'inital',
-        height: customSize[0],
-        width: customSize[1]
+        minHeight: sizeCustomMinHeight,
+        maxHeight: sizeCustomMaxHeight,
+        minWidth: sizeCustomMinWidth,
+        maxWidth: sizeCustomMaxWidth,
+        height: sizes.custom ? sizes.custom[0] : sizeCustomMinHeight,
+        width: sizes.custom ? sizes.custom[1] : sizeCustomMinWidth,
+        state: size === 'custom' ? 'active' : 'initial'
       });
       setScaleControl = SetScaleControl({ scales }, map);
 
diff --git a/src/controls/print/size-control.js b/src/controls/print/size-control.js
index d5644f35e..9c078aebc 100644
--- a/src/controls/print/size-control.js
+++ b/src/controls/print/size-control.js
@@ -1,4 +1,5 @@
 import { Button, ToggleGroup } from '../../ui';
+import round2 from '../../utils/round';
 
 const titleCase = function titleCase(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
@@ -10,15 +11,15 @@ export default function SizeControl({ initialSize, sizes }) {
       return Button({
         cls: 'grow light text-smaller',
         text: 'Anpassa',
-        state: 'initial',
-        style: { width: '34%' }
+        state: initialSize === size ? 'active' : 'initial',
+        style: { width: String(round2(100 - round2(100 / sizes.length, 1) * (sizes.length - 1), 1)) + '%' }
       });
     }
     return Button({
       cls: 'grow light text-smaller',
       text: titleCase(size),
       state: initialSize === size ? 'active' : 'initial',
-      style: { width: '33%' }
+      style: { width: String(round2(100 / sizes.length, 1)) + '%' }
     });
   });
 

From a8e66a58cee9124e84c00b5653146867826f6b46 Mon Sep 17 00:00:00 2001
From: MattiasSp <mattias.spangmyr@gmail.com>
Date: Tue, 23 Feb 2021 11:47:10 +0100
Subject: [PATCH 04/11] Re-use titleCase from utils

---
 src/controls/print/size-control.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/controls/print/size-control.js b/src/controls/print/size-control.js
index 9c078aebc..d848c3abc 100644
--- a/src/controls/print/size-control.js
+++ b/src/controls/print/size-control.js
@@ -1,9 +1,6 @@
 import { Button, ToggleGroup } from '../../ui';
 import round2 from '../../utils/round';
-
-const titleCase = function titleCase(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-};
+import titleCase from '../../utils/titlecase';
 
 export default function SizeControl({ initialSize, sizes }) {
   const sizeButtons = sizes.map((size) => {

From be2f6cc6bb51ed440bf4dbe6598263d9854113e3 Mon Sep 17 00:00:00 2001
From: MattiasSp <mattias.spangmyr@gmail.com>
Date: Wed, 24 Feb 2021 11:43:06 +0100
Subject: [PATCH 05/11] Expose print control orientation config option

---
 src/controls/print/index.js           | 2 ++
 src/controls/print/print-component.js | 2 +-
 src/controls/print/print-settings.js  | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/controls/print/index.js b/src/controls/print/index.js
index 1b28f4c8d..b003dd2d1 100644
--- a/src/controls/print/index.js
+++ b/src/controls/print/index.js
@@ -37,6 +37,7 @@ const Print = function Print(options = {}) {
     descriptionSize = 'h4',
     descriptionFormatIsVisible = false,
     sizeInitial = 'a4',
+    orientation = 'portrait',
     showNorthArrow = true
   } = options;
 
@@ -78,6 +79,7 @@ const Print = function Print(options = {}) {
         sizeCustomMaxHeight,
         sizeCustomMinWidth,
         sizeCustomMaxWidth,
+        orientation,
         leftFooterText,
         showCreated,
         createdPrefix,
diff --git a/src/controls/print/print-component.js b/src/controls/print/print-component.js
index f54f0d3eb..1273b50b5 100644
--- a/src/controls/print/print-component.js
+++ b/src/controls/print/print-component.js
@@ -43,7 +43,7 @@ const PrintComponent = function PrintComponent(options = {}) {
     descriptionSize,
     descriptionFormatIsVisible,
     size,
-    orientation = 'portrait',
+    orientation,
     showCreated,
     showNorthArrow,
     resolution = 150,
diff --git a/src/controls/print/print-settings.js b/src/controls/print/print-settings.js
index 6b6291733..04ba21ab0 100644
--- a/src/controls/print/print-settings.js
+++ b/src/controls/print/print-settings.js
@@ -34,7 +34,7 @@ const PrintSettings = function PrintSettings(options = {}) {
     sizeCustomMaxHeight,
     sizeCustomMinWidth,
     sizeCustomMaxWidth,
-    orientation = 'portrait',
+    orientation,
     showCreated,
     showNorthArrow,
     scales,

From e99c23f4fe65ecc435374e102f2dfbd393166871 Mon Sep 17 00:00:00 2001
From: MattiasSp <mattias.spangmyr@gmail.com>
Date: Thu, 25 Feb 2021 08:30:42 +0100
Subject: [PATCH 06/11] Expose print control resolution config options

---
 src/controls/print/index.js              |  8 +++++
 src/controls/print/print-component.js    |  6 ++--
 src/controls/print/print-settings.js     |  8 +++--
 src/controls/print/resolution-control.js | 43 +++++++++++++-----------
 4 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/src/controls/print/index.js b/src/controls/print/index.js
index b003dd2d1..b9fb79054 100644
--- a/src/controls/print/index.js
+++ b/src/controls/print/index.js
@@ -24,6 +24,11 @@ const Print = function Print(options = {}) {
     sizeCustomMaxHeight = 420,
     sizeCustomMinWidth = 50,
     sizeCustomMaxWidth = 420,
+    resolutions = [
+      { label: 'Låg', value: '75'},
+      { label: 'Mellan', value: '150'},
+      { label: 'Hög', value: '300'}
+    ],
     leftFooterText = '',
     showCreated = false,
     createdPrefix = '',
@@ -38,6 +43,7 @@ const Print = function Print(options = {}) {
     descriptionFormatIsVisible = false,
     sizeInitial = 'a4',
     orientation = 'portrait',
+    resolution = 150,
     showNorthArrow = true
   } = options;
 
@@ -80,6 +86,8 @@ const Print = function Print(options = {}) {
         sizeCustomMinWidth,
         sizeCustomMaxWidth,
         orientation,
+        resolutions,
+        resolution,
         leftFooterText,
         showCreated,
         createdPrefix,
diff --git a/src/controls/print/print-component.js b/src/controls/print/print-component.js
index 1273b50b5..ddbf48401 100644
--- a/src/controls/print/print-component.js
+++ b/src/controls/print/print-component.js
@@ -30,6 +30,7 @@ const PrintComponent = function PrintComponent(options = {}) {
     sizeCustomMaxHeight,
     sizeCustomMinWidth,
     sizeCustomMaxWidth,
+    resolutions,
     leftFooterText,
     createdPrefix,
     scales
@@ -46,7 +47,7 @@ const PrintComponent = function PrintComponent(options = {}) {
     orientation,
     showCreated,
     showNorthArrow,
-    resolution = 150,
+    resolution,
     showScale
   } = options;
 
@@ -142,10 +143,11 @@ const PrintComponent = function PrintComponent(options = {}) {
     sizeCustomMinWidth,
     sizeCustomMaxWidth,
     orientation,
+    resolutions,
+    resolution,
     showCreated,
     showNorthArrow,
     scales,
-    resolution,
     showScale
   });
   const printToolbar = PrintToolbar();
diff --git a/src/controls/print/print-settings.js b/src/controls/print/print-settings.js
index 04ba21ab0..41492a0cd 100644
--- a/src/controls/print/print-settings.js
+++ b/src/controls/print/print-settings.js
@@ -35,10 +35,11 @@ const PrintSettings = function PrintSettings(options = {}) {
     sizeCustomMinWidth,
     sizeCustomMaxWidth,
     orientation,
+    resolutions,
+    resolution,
     showCreated,
     showNorthArrow,
     scales,
-    resolution = 150,
     showScale
   } = options;
 
@@ -135,7 +136,10 @@ const PrintSettings = function PrintSettings(options = {}) {
       });
       const marginControl = MarginControl({ checked: true });
       const createdControl = CreatedControl({ checked: showCreated });
-      const resolutionControl = ResolutionControl({ resolution });
+      const resolutionControl = ResolutionControl({
+        initialResolution: resolution,
+        resolutions
+      });
       const showScaleControl = ShowScaleControl({ checked: showScale });
       northArrowControl = NorthArrowControl({ showNorthArrow });
       rotationControl = RotationControl({ rotation: 0, map });
diff --git a/src/controls/print/resolution-control.js b/src/controls/print/resolution-control.js
index 6e9763866..27a3edf5c 100644
--- a/src/controls/print/resolution-control.js
+++ b/src/controls/print/resolution-control.js
@@ -1,29 +1,32 @@
 import { Button, ToggleGroup } from '../../ui';
+import round2 from '../../utils/round';
 
-export default function ResolutionControl({ resolution }) {
-  const lowButton = Button({
-    cls: 'grow light text-smaller padding-left-large',
-    text: 'Låg (75)',
-    state: resolution === 75 ? 'active' : 'initial'
-  });
-  const middleButton = Button({
-    cls: 'grow light text-smaller padding-right-large',
-    text: 'Mellan (150)',
-    state: resolution === 150 ? 'active' : 'initial'
-  });
-  const highButton = Button({
-    cls: 'grow light text-smaller padding-right-large',
-    text: 'Hög (300)',
-    state: resolution === 300 ? 'active' : 'initial'
+export default function ResolutionControl({ initialResolution, resolutions }) {
+  const resolutionButtons = resolutions.map((resolution, index) => {
+    if (index + 1 === resolutions.length) {
+      return Button({
+        cls: 'grow light text-smaller',
+        text: `${resolution.label} (${resolution.value})`,
+        state: initialResolution === resolution.value ? 'active' : 'initial',
+        style: { width: String(round2(100 - round2(100 / resolutions.length, 1) * (resolutions.length - 1), 1)) + '%' }
+      });
+    }
+    return Button({
+      cls: 'grow light text-smaller',
+      text: `${resolution.label} (${resolution.value})`,
+      state: initialResolution === resolution.value ? 'active' : 'initial',
+      style: { width: String(round2(100 / resolutions.length, 1)) + '%' }
+    });
   });
+
   const resolutionControl = ToggleGroup({
     cls: 'flex rounded bg-inverted border',
-    components: [lowButton, middleButton, highButton],
-    style: { height: '2rem', display: 'flex' }
+    components: resolutionButtons,
+    style: { height: 'fit-content', display: 'flex' }
+  });
+  resolutionButtons.forEach((resolutionButton, index) => {
+    resolutionButton.on('click', () => resolutionControl.dispatch('change:resolution', { resolution: resolutions[index].value }));
   });
-  lowButton.on('click', () => resolutionControl.dispatch('change:resolution', { resolution: 75 }));
-  middleButton.on('click', () => resolutionControl.dispatch('change:resolution', { resolution: 150 }));
-  highButton.on('click', () => resolutionControl.dispatch('change:resolution', { resolution: 300 }));
 
   return resolutionControl;
 }

From d9003a792d4200de42da0884e56173c37573ebe9 Mon Sep 17 00:00:00 2001
From: MattiasSp <mattias.spangmyr@gmail.com>
Date: Thu, 25 Feb 2021 10:58:52 +0100
Subject: [PATCH 07/11] Expose print control initial scale config option

---
 src/controls/print/index.js             |  6 ++++--
 src/controls/print/print-component.js   |  8 +++++---
 src/controls/print/print-settings.js    |  8 ++++++--
 src/controls/print/set-scale-control.js | 16 ++++++++++------
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/controls/print/index.js b/src/controls/print/index.js
index b9fb79054..f9344ade4 100644
--- a/src/controls/print/index.js
+++ b/src/controls/print/index.js
@@ -29,10 +29,11 @@ const Print = function Print(options = {}) {
       { label: 'Mellan', value: '150'},
       { label: 'Hög', value: '300'}
     ],
+    scales = [],
+    scaleInitial,
     leftFooterText = '',
     showCreated = false,
     createdPrefix = '',
-    scales = [],
     showScale = true,
     filename
   } = options;
@@ -88,11 +89,12 @@ const Print = function Print(options = {}) {
         orientation,
         resolutions,
         resolution,
+        scales,
+        scaleInitial,
         leftFooterText,
         showCreated,
         createdPrefix,
         showNorthArrow,
-        scales,
         showScale
       });
       mapMenu = viewer.getControlByName('mapmenu');
diff --git a/src/controls/print/print-component.js b/src/controls/print/print-component.js
index ddbf48401..04a8651af 100644
--- a/src/controls/print/print-component.js
+++ b/src/controls/print/print-component.js
@@ -31,9 +31,10 @@ const PrintComponent = function PrintComponent(options = {}) {
     sizeCustomMinWidth,
     sizeCustomMaxWidth,
     resolutions,
+    scales,
+    scaleInitial,
     leftFooterText,
-    createdPrefix,
-    scales
+    createdPrefix
   } = options;
 
   let {
@@ -145,9 +146,10 @@ const PrintComponent = function PrintComponent(options = {}) {
     orientation,
     resolutions,
     resolution,
+    scales,
+    scaleInitial,
     showCreated,
     showNorthArrow,
-    scales,
     showScale
   });
   const printToolbar = PrintToolbar();
diff --git a/src/controls/print/print-settings.js b/src/controls/print/print-settings.js
index 41492a0cd..4504987c7 100644
--- a/src/controls/print/print-settings.js
+++ b/src/controls/print/print-settings.js
@@ -37,9 +37,10 @@ const PrintSettings = function PrintSettings(options = {}) {
     orientation,
     resolutions,
     resolution,
+    scales,
+    scaleInitial,
     showCreated,
     showNorthArrow,
-    scales,
     showScale
   } = options;
 
@@ -152,7 +153,10 @@ const PrintSettings = function PrintSettings(options = {}) {
         width: sizes.custom ? sizes.custom[1] : sizeCustomMinWidth,
         state: size === 'custom' ? 'active' : 'initial'
       });
-      setScaleControl = SetScaleControl({ scales }, map);
+      setScaleControl = SetScaleControl({
+        scales,
+        initialScale: scaleInitial
+      }, map);
 
       contentComponent = Component({
         onRender() { this.dispatch('render'); },
diff --git a/src/controls/print/set-scale-control.js b/src/controls/print/set-scale-control.js
index 3b71dc19e..8c2df627f 100644
--- a/src/controls/print/set-scale-control.js
+++ b/src/controls/print/set-scale-control.js
@@ -4,7 +4,8 @@ import numberFormatter from '../../utils/numberformatter';
 
 export default function SetScaleControl(options = {}, map) {
   const {
-    scales = []
+    scales = [],
+    initialScale
   } = options;
 
   let projection;
@@ -14,9 +15,9 @@ export default function SetScaleControl(options = {}, map) {
 
   const roundScale = (scale) => {
     let scaleValue = scale;
-    const differens = scaleValue % 10;
-    if (differens !== 0) {
-      scaleValue += (10 - differens);
+    const difference = scaleValue % 10;
+    if (difference !== 0) {
+      scaleValue += (10 - difference);
     }
     return scaleValue;
   };
@@ -32,7 +33,8 @@ export default function SetScaleControl(options = {}, map) {
         cls: 'o-scalepicker text-black flex',
         contentCls: 'bg-grey-lighter text-smallest rounded',
         buttonCls: 'bg-white border text-black',
-        buttonIconCls: 'black'
+        buttonIconCls: 'black',
+        text: 'Välj skala'
       });
       this.addComponents([selectScale]);
       projection = map.getView().getProjection();
@@ -45,7 +47,6 @@ export default function SetScaleControl(options = {}, map) {
     },
     onRender() {
       this.dispatch('render');
-      selectScale.setButtonText('Välj skala');
       if (Array.isArray(scales) && scales.length) {
         selectScale.setItems(scales);
       } else {
@@ -54,6 +55,9 @@ export default function SetScaleControl(options = {}, map) {
       document.getElementById(selectScale.getId()).addEventListener('dropdown:select', (evt) => {
         this.onChangeScale(evt.target.textContent);
       });
+      if (initialScale) {
+        this.onChangeScale(initialScale);
+      }
     },
     render() {
       return `

From 4bb412f1a147683a44bf80037044cc3d936de0c0 Mon Sep 17 00:00:00 2001
From: MattiasSp <mattias.spangmyr@gmail.com>
Date: Thu, 25 Feb 2021 20:55:12 +0100
Subject: [PATCH 08/11] Expose print control checkbox config options

---
 src/controls/print/index.js                   |  8 ++++---
 src/controls/print/print-component.js         | 21 ++++++++++---------
 src/controls/print/print-settings.js          |  7 ++++---
 src/controls/print/print-settings.template.js |  2 +-
 4 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/controls/print/index.js b/src/controls/print/index.js
index f9344ade4..c38137ae6 100644
--- a/src/controls/print/index.js
+++ b/src/controls/print/index.js
@@ -31,10 +31,11 @@ const Print = function Print(options = {}) {
     ],
     scales = [],
     scaleInitial,
-    leftFooterText = '',
+    showMargins = true,
     showCreated = false,
     createdPrefix = '',
     showScale = true,
+    leftFooterText = '',
     filename
   } = options;
   let {
@@ -91,11 +92,12 @@ const Print = function Print(options = {}) {
         resolution,
         scales,
         scaleInitial,
-        leftFooterText,
+        showMargins,
         showCreated,
         createdPrefix,
+        showScale,
         showNorthArrow,
-        showScale
+        leftFooterText
       });
       mapMenu = viewer.getControlByName('mapmenu');
       menuItem = mapMenu.MenuItem({
diff --git a/src/controls/print/print-component.js b/src/controls/print/print-component.js
index 04a8651af..d39d8aa7d 100644
--- a/src/controls/print/print-component.js
+++ b/src/controls/print/print-component.js
@@ -33,8 +33,8 @@ const PrintComponent = function PrintComponent(options = {}) {
     resolutions,
     scales,
     scaleInitial,
-    leftFooterText,
-    createdPrefix
+    createdPrefix,
+    leftFooterText
   } = options;
 
   let {
@@ -46,10 +46,11 @@ const PrintComponent = function PrintComponent(options = {}) {
     descriptionFormatIsVisible,
     size,
     orientation,
-    showCreated,
-    showNorthArrow,
     resolution,
-    showScale
+    showMargins,
+    showCreated,
+    showScale,
+    showNorthArrow
   } = options;
 
   let pageElement;
@@ -61,7 +62,6 @@ const PrintComponent = function PrintComponent(options = {}) {
   let descriptionAlign = `text-align-${descriptionAlignment}`;
   let viewerMapTarget;
   const printMarginClass = 'print-margin';
-  let usePrintMargins = true;
   let today = new Date(Date.now());
   let printScale = 0;
   let widthImage = 0;
@@ -148,9 +148,10 @@ const PrintComponent = function PrintComponent(options = {}) {
     resolution,
     scales,
     scaleInitial,
+    showMargins,
     showCreated,
-    showNorthArrow,
-    showScale
+    showScale,
+    showNorthArrow
   });
   const printToolbar = PrintToolbar();
   const closeButton = Button({
@@ -246,11 +247,11 @@ const PrintComponent = function PrintComponent(options = {}) {
       setScale(evt.scale);
     },
     printMargin() {
-      return usePrintMargins ? 'print-margin' : '';
+      return showMargins ? 'print-margin' : '';
     },
     toggleMargin() {
       pageElement.classList.toggle(printMarginClass);
-      usePrintMargins = !usePrintMargins;
+      showMargins = !showMargins;
       this.updatePageSize();
     },
     toggleCreated() {
diff --git a/src/controls/print/print-settings.js b/src/controls/print/print-settings.js
index 4504987c7..7a3a5b392 100644
--- a/src/controls/print/print-settings.js
+++ b/src/controls/print/print-settings.js
@@ -39,9 +39,10 @@ const PrintSettings = function PrintSettings(options = {}) {
     resolution,
     scales,
     scaleInitial,
+    showMargins,
     showCreated,
-    showNorthArrow,
-    showScale
+    showScale,
+    showNorthArrow
   } = options;
 
   let {
@@ -135,7 +136,7 @@ const PrintSettings = function PrintSettings(options = {}) {
         descriptionSize,
         descriptionFormatIsVisible
       });
-      const marginControl = MarginControl({ checked: true });
+      const marginControl = MarginControl({ checked: showMargins });
       const createdControl = CreatedControl({ checked: showCreated });
       const resolutionControl = ResolutionControl({
         initialResolution: resolution,
diff --git a/src/controls/print/print-settings.template.js b/src/controls/print/print-settings.template.js
index 2fb99752d..44aa29610 100644
--- a/src/controls/print/print-settings.template.js
+++ b/src/controls/print/print-settings.template.js
@@ -48,7 +48,7 @@ export default function printTemplate({
     </div>
     <div class="padding-top-large"></div>
     <div class="flex padding-right-small">
-      <div class="grow text-normal">Visa Norrpil</div>
+      <div class="grow text-normal">Visa norrpil</div>
       ${northArrowControl.render()}
     </div>
     ${rotationControl.render()}

From b03608df789abad1e26cc0247af0e78caebe2543 Mon Sep 17 00:00:00 2001
From: MattiasSp <mattias.spangmyr@gmail.com>
Date: Thu, 25 Feb 2021 20:55:35 +0100
Subject: [PATCH 09/11] Expose print control rotation config options

---
 src/controls/print/index.js            |  4 ++++
 src/controls/print/print-component.js  |  9 ++++++++-
 src/controls/print/print-settings.js   | 10 ++++++++--
 src/controls/print/rotation-control.js |  8 ++++++--
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/controls/print/index.js b/src/controls/print/index.js
index c38137ae6..fdc0dbafd 100644
--- a/src/controls/print/index.js
+++ b/src/controls/print/index.js
@@ -35,6 +35,8 @@ const Print = function Print(options = {}) {
     showCreated = false,
     createdPrefix = '',
     showScale = true,
+    rotation = 0,
+    rotationStep = 1,
     leftFooterText = '',
     filename
   } = options;
@@ -97,6 +99,8 @@ const Print = function Print(options = {}) {
         createdPrefix,
         showScale,
         showNorthArrow,
+        rotation,
+        rotationStep,
         leftFooterText
       });
       mapMenu = viewer.getControlByName('mapmenu');
diff --git a/src/controls/print/print-component.js b/src/controls/print/print-component.js
index d39d8aa7d..e058dde67 100644
--- a/src/controls/print/print-component.js
+++ b/src/controls/print/print-component.js
@@ -34,6 +34,8 @@ const PrintComponent = function PrintComponent(options = {}) {
     scales,
     scaleInitial,
     createdPrefix,
+    rotation,
+    rotationStep,
     leftFooterText
   } = options;
 
@@ -151,7 +153,9 @@ const PrintComponent = function PrintComponent(options = {}) {
     showMargins,
     showCreated,
     showScale,
-    showNorthArrow
+    showNorthArrow,
+    rotation,
+    rotationStep
   });
   const printToolbar = PrintToolbar();
   const closeButton = Button({
@@ -269,6 +273,9 @@ const PrintComponent = function PrintComponent(options = {}) {
     },
     close() {
       printMapComponent.removePrintControls();
+      if (map.getView().getRotation() !== 0) {
+        map.getView().setRotation(0);
+      }
       const printElement = document.getElementById(this.getId());
       map.setTarget(viewerMapTarget);
       this.restoreViewerControls();
diff --git a/src/controls/print/print-settings.js b/src/controls/print/print-settings.js
index 7a3a5b392..5a2d6a856 100644
--- a/src/controls/print/print-settings.js
+++ b/src/controls/print/print-settings.js
@@ -42,7 +42,9 @@ const PrintSettings = function PrintSettings(options = {}) {
     showMargins,
     showCreated,
     showScale,
-    showNorthArrow
+    showNorthArrow,
+    rotation,
+    rotationStep
   } = options;
 
   let {
@@ -144,7 +146,11 @@ const PrintSettings = function PrintSettings(options = {}) {
       });
       const showScaleControl = ShowScaleControl({ checked: showScale });
       northArrowControl = NorthArrowControl({ showNorthArrow });
-      rotationControl = RotationControl({ rotation: 0, map });
+      rotationControl = RotationControl({
+        rotation,
+        rotationStep,
+        map
+      });
       customSizeControl = CustomSizeControl({
         minHeight: sizeCustomMinHeight,
         maxHeight: sizeCustomMaxHeight,
diff --git a/src/controls/print/rotation-control.js b/src/controls/print/rotation-control.js
index d1ea36b83..dbd200a46 100644
--- a/src/controls/print/rotation-control.js
+++ b/src/controls/print/rotation-control.js
@@ -2,7 +2,8 @@ import { InputRange, Component } from '../../ui';
 
 export default function RotationControl(options = {}) {
   const {
-    rotation = 0,
+    rotation,
+    rotationStep,
     map
   } = options;
 
@@ -11,7 +12,7 @@ export default function RotationControl(options = {}) {
     minValue: 0,
     maxValue: 360,
     initialValue: rotation,
-    step: 1,
+    step: rotationStep,
     style: {
       'align-self': 'center'
     }
@@ -25,6 +26,9 @@ export default function RotationControl(options = {}) {
     },
     onRender() {
       this.dispatch('render');
+      if (rotation) {
+        map.getView().setRotation((rotation * Math.PI) / 180);
+      }
     },
     onChangeRotation(evt) {
       map.getView().setRotation((evt.value * Math.PI) / 180);

From d565c52474b1622523cfba4ea4351579ff6f5b03 Mon Sep 17 00:00:00 2001
From: MattiasSp <mattias.spangmyr@gmail.com>
Date: Thu, 25 Feb 2021 23:02:56 +0100
Subject: [PATCH 10/11] Fixed linter errors

---
 src/controls/print/description-control.js |  2 +-
 src/controls/print/index.js               | 20 ++++++++++----------
 src/controls/print/print-component.js     |  4 ++--
 src/controls/print/print-settings.js      | 11 ++++-------
 src/controls/print/resolution-control.js  |  4 ++--
 src/controls/print/size-control.js        |  4 ++--
 src/controls/print/title-control.js       |  2 +-
 7 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/controls/print/description-control.js b/src/controls/print/description-control.js
index 57730b5fa..b68b1e903 100644
--- a/src/controls/print/description-control.js
+++ b/src/controls/print/description-control.js
@@ -125,7 +125,7 @@ export default function DescriptionControl(options = {}) {
           ${formatButton.render()}
         </div>
       </div>
-      <div class="${descriptionFormatIsVisible ? "" : "hidden"}" id="${formatId}">
+      <div class="${descriptionFormatIsVisible ? '' : 'hidden'}" id="${formatId}">
       <div class="padding-smaller">
         <h6>Justering beskrivning</h6>
         ${alignControl.render()}
diff --git a/src/controls/print/index.js b/src/controls/print/index.js
index fdc0dbafd..56c9322e2 100644
--- a/src/controls/print/index.js
+++ b/src/controls/print/index.js
@@ -11,24 +11,31 @@ const Print = function Print(options = {}) {
     headerPlaceholderText = 'Här kan du skriva en rubrik',
     headerAlignment = 'center',
     headerSizes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+    headerSize = 'h4',
+    headerFormatIsVisible = false,
     descriptionText = '',
     descriptionPlaceholderText = 'Här kan du skriva en beskrivning',
     descriptionAlignment = 'center',
     descriptionSizes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+    descriptionSize = 'h4',
+    descriptionFormatIsVisible = false,
     sizes = {
       a3: [420, 297],
       a4: [297, 210],
       custom: [297, 210]
     },
+    sizeInitial = 'a4',
     sizeCustomMinHeight = 50,
     sizeCustomMaxHeight = 420,
     sizeCustomMinWidth = 50,
     sizeCustomMaxWidth = 420,
+    orientation = 'portrait',
     resolutions = [
-      { label: 'Låg', value: '75'},
-      { label: 'Mellan', value: '150'},
-      { label: 'Hög', value: '300'}
+      { label: 'Låg', value: '75' },
+      { label: 'Mellan', value: '150' },
+      { label: 'Hög', value: '300' }
     ],
+    resolution = 150,
     scales = [],
     scaleInitial,
     showMargins = true,
@@ -41,13 +48,6 @@ const Print = function Print(options = {}) {
     filename
   } = options;
   let {
-    headerSize = 'h4',
-    headerFormatIsVisible = false,
-    descriptionSize = 'h4',
-    descriptionFormatIsVisible = false,
-    sizeInitial = 'a4',
-    orientation = 'portrait',
-    resolution = 150,
     showNorthArrow = true
   } = options;
 
diff --git a/src/controls/print/print-component.js b/src/controls/print/print-component.js
index e058dde67..b8ecc9b2e 100644
--- a/src/controls/print/print-component.js
+++ b/src/controls/print/print-component.js
@@ -22,9 +22,11 @@ const PrintComponent = function PrintComponent(options = {}) {
     titlePlaceholderText,
     titleAlignment,
     titleSizes,
+    titleFormatIsVisible,
     descriptionPlaceholderText,
     descriptionAlignment,
     descriptionSizes,
+    descriptionFormatIsVisible,
     sizes,
     sizeCustomMinHeight,
     sizeCustomMaxHeight,
@@ -42,10 +44,8 @@ const PrintComponent = function PrintComponent(options = {}) {
   let {
     title,
     titleSize,
-    titleFormatIsVisible,
     description,
     descriptionSize,
-    descriptionFormatIsVisible,
     size,
     orientation,
     resolution,
diff --git a/src/controls/print/print-settings.js b/src/controls/print/print-settings.js
index 5a2d6a856..8ed1e86cc 100644
--- a/src/controls/print/print-settings.js
+++ b/src/controls/print/print-settings.js
@@ -24,10 +24,14 @@ const PrintSettings = function PrintSettings(options = {}) {
     titlePlaceholderText,
     titleAlignment,
     titleSizes,
+    titleSize,
+    titleFormatIsVisible,
     description,
     descriptionPlaceholderText,
     descriptionAlignment,
     descriptionSizes,
+    descriptionSize,
+    descriptionFormatIsVisible,
     sizes,
     size,
     sizeCustomMinHeight,
@@ -47,13 +51,6 @@ const PrintSettings = function PrintSettings(options = {}) {
     rotationStep
   } = options;
 
-  let {
-    titleSize,
-    titleFormatIsVisible,
-    descriptionSize,
-    descriptionFormatIsVisible
-  } = options;
-
   let headerComponent;
   let contentComponent;
   let openButton;
diff --git a/src/controls/print/resolution-control.js b/src/controls/print/resolution-control.js
index 27a3edf5c..f53593193 100644
--- a/src/controls/print/resolution-control.js
+++ b/src/controls/print/resolution-control.js
@@ -8,14 +8,14 @@ export default function ResolutionControl({ initialResolution, resolutions }) {
         cls: 'grow light text-smaller',
         text: `${resolution.label} (${resolution.value})`,
         state: initialResolution === resolution.value ? 'active' : 'initial',
-        style: { width: String(round2(100 - round2(100 / resolutions.length, 1) * (resolutions.length - 1), 1)) + '%' }
+        style: { width: `${String(round2(100 - round2(100 / resolutions.length, 1) * (resolutions.length - 1), 1))}%` }
       });
     }
     return Button({
       cls: 'grow light text-smaller',
       text: `${resolution.label} (${resolution.value})`,
       state: initialResolution === resolution.value ? 'active' : 'initial',
-      style: { width: String(round2(100 / resolutions.length, 1)) + '%' }
+      style: { width: `${String(round2(100 / resolutions.length, 1))}%` }
     });
   });
 
diff --git a/src/controls/print/size-control.js b/src/controls/print/size-control.js
index d848c3abc..51d9c338b 100644
--- a/src/controls/print/size-control.js
+++ b/src/controls/print/size-control.js
@@ -9,14 +9,14 @@ export default function SizeControl({ initialSize, sizes }) {
         cls: 'grow light text-smaller',
         text: 'Anpassa',
         state: initialSize === size ? 'active' : 'initial',
-        style: { width: String(round2(100 - round2(100 / sizes.length, 1) * (sizes.length - 1), 1)) + '%' }
+        style: { width: `${String(round2(100 - round2(100 / sizes.length, 1) * (sizes.length - 1), 1))}%` }
       });
     }
     return Button({
       cls: 'grow light text-smaller',
       text: titleCase(size),
       state: initialSize === size ? 'active' : 'initial',
-      style: { width: String(round2(100 / sizes.length, 1)) + '%' }
+      style: { width: `${String(round2(100 / sizes.length, 1))}%` }
     });
   });
 
diff --git a/src/controls/print/title-control.js b/src/controls/print/title-control.js
index 1fce3f833..14f3f4d84 100644
--- a/src/controls/print/title-control.js
+++ b/src/controls/print/title-control.js
@@ -124,7 +124,7 @@ export default function TitleControl(options = {}) {
           ${formatButton.render()}
         </div>
       </div>
-      <div class="${titleFormatIsVisible ? "" : "hidden"}" id="${formatId}">
+      <div class="${titleFormatIsVisible ? '' : 'hidden'}" id="${formatId}">
         <div class="padding-smaller">
           <h6>Justering titel</h6>
           ${alignControl.render()}

From f38ee70cfd1efe31410b6d2d1de2ad0a6882392f Mon Sep 17 00:00:00 2001
From: MattiasSp <mattias.spangmyr@gmail.com>
Date: Fri, 26 Feb 2021 13:03:21 +0100
Subject: [PATCH 11/11] Fixed resolutions' value types

---
 src/controls/print/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/controls/print/index.js b/src/controls/print/index.js
index 56c9322e2..1a86836b6 100644
--- a/src/controls/print/index.js
+++ b/src/controls/print/index.js
@@ -31,9 +31,9 @@ const Print = function Print(options = {}) {
     sizeCustomMaxWidth = 420,
     orientation = 'portrait',
     resolutions = [
-      { label: 'Låg', value: '75' },
-      { label: 'Mellan', value: '150' },
-      { label: 'Hög', value: '300' }
+      { label: 'Låg', value: 75 },
+      { label: 'Mellan', value: 150 },
+      { label: 'Hög', value: 300 }
     ],
     resolution = 150,
     scales = [],