Support images of different aspect ratios

Changes to cropping calculation and the cropping component
for cases in which an `image_kind` has a versions with are
different aspect ratios. Includes calculation of correct
height, width, left and top based on the scale of the selected
cropping area and presenting to the user the different views
of a single image.

Author: patrickpatrickpatrick

app/assets/javascripts/components/image-cropper.js

@@ -8,10 +8,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
     this.$image = this.$imageCropper.querySelector(
       '.app-c-image-cropper__image'
     )
-    this.$targetWidth = parseInt(this.$imageCropper.dataset.width, 10)
-    this.$targetHeight = parseInt(this.$imageCropper.dataset.height, 10)
+    this.$targetWidth = parseInt(this.$imageCropper.dataset.targetWidth, 10)
+    this.$targetHeight = parseInt(this.$imageCropper.dataset.targetHeight, 10)
+    this.$croppingHeight = parseInt(this.$imageCropper.dataset.height, 10)
+    this.$croppingWidth = parseInt(this.$imageCropper.dataset.width, 10)
     this.$croppingX = parseInt(this.$imageCropper.dataset.x, 10)
     this.$croppingY = parseInt(this.$imageCropper.dataset.y, 10)
+    this.$versions = this.$imageCropper.dataset.versions
+      ? JSON.parse(this.$imageCropper.dataset.versions)
+      : []
+    this.$versions = this.$versions.filter((version) => !version.from_version)
   }
 
   ImageCropper.prototype.init = function () {
@@ -34,19 +40,34 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
         this.initKeyboardControls()
         this.updateAriaLabel()
 
-        const cropBoxData = this.cropper.getCropBoxData()
+        this.cropper.setData({
+          x: this.$croppingX,
+          y: this.$croppingY,
+          width: this.$croppingWidth || this.$targetWidth,
+          height: this.$croppingHeight || this.$targetHeight
+        })
 
-        cropBoxData.left = this.$croppingX
-        cropBoxData.top = this.$croppingY
+        this.$cropBox = this.$imageCropper.querySelector('.cropper-crop-box')
+        this.$imageInformation = this.$imageCropper.querySelector(
+          '.app-c-image-cropper__image-information'
+        )
 
-        this.cropper.setCropBoxData(cropBoxData)
+        this.previewReady = true
+
+        if (this.$versions.length > 0) {
+          this.$imageCropper.querySelector('.cropper-view-box').style.outline =
+            `2px dashed #fd0`
+        }
+
+        this.handlePreviews()
       }.bind(this)
     )
 
     this.$image.addEventListener(
       'crop',
       function () {
         this.updateAriaLabel()
+        this.handlePreviews()
 
         const data = this.cropper.getData(true)
 
@@ -70,19 +91,78 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
     )
   }
 
-  ImageCropper.prototype.initCropper = function () {
-    if (!this.$image || !this.$image.complete || this.cropper) {
+  ImageCropper.prototype.handlePreviews = function () {
+    if (!this.previewReady) {
       return
     }
 
-    const width = this.$image.clientWidth
-    const naturalWidth = this.$image.naturalWidth
-    const scaledRatio = width / naturalWidth
+    const previewColours = ['#f47738', '#0f7a52', '#ca3535', '#0f7a52']
+    const outlineWidth = 3
+
+    this.$versions.forEach((version, index) => {
+      const { height, width, name } = version
+
+      if (
+        (width === this.$image.naturalWidth &&
+          height === this.$image.naturalHeight) ||
+        version.from_version
+      )
+        return
+
+      const scale = this.cropper.getData(true).width / this.$targetWidth
+      const newWidth = width * scale
+      const newHeight = height * scale
+      const previewColour = previewColours[index % previewColours.length]
+
+      if (width !== this.$targetWidth || height !== this.$targetHeight) {
+        let previewCropbox = this.$cropBox.parentNode.querySelector(
+          `#preview-${width}x${height}`
+        )
+
+        if (!previewCropbox) {
+          previewCropbox = this.$cropBox.cloneNode(false)
+          previewCropbox.id = `preview-${width}x${height}`
+          previewCropbox.style.outline = `${outlineWidth}px solid ${previewColour}`
+          previewCropbox.style.pointerEvents = 'none'
+          previewCropbox.style.zIndex = 99 - index
+
+          this.$cropBox.appendChild(previewCropbox)
 
-    // Adjust the crop box limits to the scaled image
-    const minCropBoxWidth = Math.ceil(this.$targetWidth * scaledRatio)
-    const minCropBoxHeight = Math.ceil(this.$targetHeight * scaledRatio)
+          this.$imageInformation.removeAttribute('hidden')
+
+          const legend = document.createElement('LI')
+          legend.classList.add('app-c-image-cropper__crop-key')
+
+          legend.innerHTML = `
+            <span style="background:${previewColour};" class="app-c-image-cropper__crop-key-colour"></span>
+            ${name.split('_')[0]}
+          `
+
+          this.$imageInformation.querySelector('ul').appendChild(legend)
+        }
+
+        const translateY =
+          (this.$cropBox.clientHeight - newHeight * this.scaledRatio) / 2 +
+          outlineWidth
+        const translateX =
+          (this.$cropBox.clientWidth - newWidth * this.scaledRatio) / 2 +
+          outlineWidth
+
+        previewCropbox.style.width =
+          newWidth * this.scaledRatio - outlineWidth * 2 + 'px'
+        previewCropbox.style.height =
+          newHeight * this.scaledRatio - outlineWidth * 2 + 'px'
+        previewCropbox.style.transform = `translateX(${translateX}px) translateY(${translateY}px)`
+      }
+    })
+  }
+
+  ImageCropper.prototype.initCropper = function () {
+    if (!this.$image || !this.$image.complete || this.cropper) {
+      return
+    }
 
+    this.scaledRatio = this.$image.clientWidth / this.$image.naturalWidth
     this.cropper = new window.Cropper(this.$image, {
       // eslint-disable-line
       viewMode: 2,
@@ -92,8 +172,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
       guides: false,
       zoomable: false,
       highlight: false,
-      minCropBoxWidth,
-      minCropBoxHeight,
       rotatable: false,
       scalable: false
     })

app/assets/stylesheets/components/_image-cropper.scss

@@ -22,6 +22,7 @@ $app-cropper-point-size: 20px;
     width: $app-cropper-point-size;
     height: $app-cropper-point-size;
     opacity: 1;
+    z-index: 999999;
   }
 
   .cropper-point.point-n {
@@ -94,12 +95,42 @@ $app-cropper-point-size: 20px;
   margin-top: 0;
 }
 
+.app-c-image-cropper__preview,
+.app-c-image-cropper__preview-js {
+  overflow: hidden;
+}
+
+.app-c-image-cropper__preview img {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  max-width: none;
+  max-height: none;
+}
+
+.app-c-image-cropper__crop-key {
+  text-transform: capitalize;
+}
+
+.app-c-image-cropper__crop-key-colour {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  vertical-align: sub;
+  margin-right: 5px;
+}
+
 .js-enabled {
   .app-c-image-cropper__no-js-description,
   .app-c-image-cropper__no-js-image {
     display: none;
   }
 
+  .app-c-image-cropper__container {
+    padding: 0;
+  }
+
   .app-c-image-cropper__description,
   .app-c-image-cropper__image {
     display: block;

app/models/image_data.rb

@@ -40,18 +40,27 @@ def bitmap?
     content_type !~ /svg/
   end
 
-  def crop_data_to_params
+  def crop_data_to_params(version_width, version_height)
     return if crop_data.blank?
 
-    "#{crop_data_width}x#{crop_data_height}+#{crop_data_x}+#{crop_data_y}"
+    set_dimensions if dimensions.blank?
+
+    return if version_width == width && version_height == height
+
+    scale = crop_data_width.to_f / image_kind_config.valid_width
+
+    new_x = (crop_data_x.to_f + (crop_data_width.to_f / 2)) - ((version_width.to_f * scale) / 2)
+    new_y = (crop_data_y.to_f + (crop_data_height.to_f / 2)) - ((version_height.to_f * scale) / 2)
+
+    "#{version_width * scale}x#{version_height * scale}+#{new_x}+#{new_y}"
   end
 
   def requires_crop?
     too_large? && crop_data.blank?
   end
 
   def can_be_cropped?
-    too_large? && bitmap?
+    bitmap?
   end
 
   def original_uploaded?

app/uploaders/image_uploader.rb

@@ -23,12 +23,12 @@ def extension_allowlist
     end
 
     image_kind_config.versions.each do |v|
-      def crop_to_crop_data(from_version)
+      def crop_to_crop_data(version)
         manipulate! do |img|
           # prevents running crop on variants
           # based on an already cropped variant
-          if model.crop_data_to_params.present? && from_version.blank?
-            img.crop(model.crop_data_to_params)
+          if model.crop_data_to_params(version.width, version.height).present? && version.from_version.blank?
+            img.crop(model.crop_data_to_params(version.width, version.height))
           end
 
           img
@@ -40,7 +40,7 @@ def crop_image?(_image)
           !model.requires_crop?
         end
 
-        process crop_to_crop_data: [v.from_version], if: :crop_image?
+        process crop_to_crop_data: [v], if: :crop_image?
         process resize_to_fill: v.resize_to_fill
       end
     end

app/views/admin/edition_images/_image_information.html.erb

@@ -4,26 +4,31 @@
 <% content_for :title_margin_bottom, 6 %>
 
 <div class="govuk-grid-row">
-
-  <section class="govuk-grid-column-two-thirds">
-    <%= form_tag [:admin, :edition, :image], id: image, multipart: true, method: :patch do %>
-      <p class="govuk-body-lead">You can leave any image detail blank if you do not need it.</p>
-
-      <%= hidden_field_tag("image[image_data][image_kind]", image.image_data.image_kind) %>
-
-      <% if image.can_be_cropped? && image.image_data&.original_uploaded? %>
-        <%= render "components/image_cropper", {
-          name: "image[image_data][crop_data]",
-          src: image_url,
-          filename: image.filename,
-          type: image.content_type,
-          width: image_kind_config.valid_width,
-          height: image_kind_config.valid_height,
-          x: image.image_data.crop_data_x,
-          y: image.image_data.crop_data_y,
-        } %>
-      <% end %>
-
+  <%= form_tag [:admin, :edition, :image], id: image, multipart: true, method: :patch do %>
+    <section class="govuk-grid-column-full">
+        <p class="govuk-body-lead">You can leave any image detail blank if you do not need it.</p>
+
+        <%= hidden_field_tag("image[image_data][image_kind]", image.image_data.image_kind) %>
+
+        <% if image.can_be_cropped? && image.image_data&.original_uploaded? %>
+          <%= render "components/image_cropper", {
+            name: "image[image_data][crop_data]",
+            src: image_url,
+            filename: image.filename,
+            type: image.content_type,
+            target_height: image.image_kind_config.valid_height,
+            target_width: image.image_kind_config.valid_width,
+            width: image.image_data.crop_data_width,
+            height: image.image_data.crop_data_height,
+            x: image.image_data.crop_data_x,
+            y: image.image_data.crop_data_y,
+            versions: image.image_kind_config.versions,
+            image:,
+            image_url:,
+          } %>
+        <% end %>
+    </section>
+    <section class="govuk-grid-column-two-thirds">
       <%= render "govuk_publishing_components/components/textarea", {
         label: {
           text: "Caption and credit",
@@ -46,9 +51,6 @@
 
         <%= link_to("Cancel", admin_edition_images_path(@edition), class: "govuk-link govuk-link--no-visited-state") %>
       </div>
-    <% end %>
-  </section>
-
-  <%= render "image_information" %>
-
+    </section>
+  <% end %>
 </div>

app/views/admin/edition_images/edit.html.erb

@@ -1,15 +1,49 @@
 <%
   x ||= 0
   y ||= 0
+  versions ||= []
+  height ||= 0
+  width ||= 0
+  target_width ||= 0
+  target_height ||= 0
+  image ||= nil
+  image_url ||= nil
 %>
 
-<%= tag.div class: "app-c-image-cropper", tabindex: "0", data: { module: "image-cropper", filename:, type:, width:, height:, x:, y: }, "aria-live" => "polite" do %>
+<%= tag.div class: "app-c-image-cropper govuk-grid-column-row", tabindex: "0", data: { module: "image-cropper", filename:, type:, width:, height:, x:, y:, versions:, target_width:, target_height: }, "aria-live" => "polite" do %>
   <input class="js-cropped-image-input" name="<%= name %>[x]" hidden value="<%= x %>">
   <input class="js-cropped-image-input" name="<%= name %>[y]" hidden value="<%= y %>">
   <input class="js-cropped-image-input" name="<%= name %>[height]" hidden value="<%= height %>">
   <input class="js-cropped-image-input" name="<%= name %>[width]" hidden value="<%= width %>">
-  <%= tag.div class: "app-c-image-cropper__container" do %>
+  <%= tag.div class: "govuk-grid-column-two-thirds app-c-image-cropper__container" do %>
     <%= tag.img class: "app-c-image-cropper__image",
       src: src %>
   <% end %>
+
+  <% if image.present? %>
+    <section class="govuk-grid-column-one-third">
+      <% if image.persisted? %>
+        <% if image_url %>
+          <img src="<%= image_url %>" alt="Image preview" class="app-view-edition-resource__preview govuk-!-margin-bottom-4">
+        <% else %>
+          <div class="govuk-!-margin-bottom-4">
+            <span class="govuk-tag govuk-tag--green">Processing</span>
+          </div>
+        <% end %>
+      <% end %>
+      <h2 class="govuk-heading-m">Image information</h2>
+      <ul class="govuk-list">
+        <% if image.bitmap? && image.image_data.dimensions.present? %>
+          <li><strong>Width: </strong><%= image.width %>px</li>
+          <li><strong>Height: </strong><%= image.height %>px</li>
+        <% end %>
+        <li><strong>Format: </strong><%= image.content_type %></li>
+        <li><strong>File name: </strong><%= image.filename %></li>
+      </ul>
+      <div class="app-c-image-cropper__image-information" hidden>
+        <h2 class="govuk-heading-m">Crop boxes</h2>
+        <ul class="govuk-list"></ul>
+      </div>
+    </section>
+  <% end %>
 <% end %>