apostrophe 3.65.0 → 3.66.0

package/CHANGELOG.md

@@ -1,17 +1,22 @@
 # Changelog
 
-## 3.65.0 (2024-05-06)
+## 3.66.0 (2024-05-15)
 
-### Adds
+### Fixes
+
+* Autocrop image attachments for referenced documents when replacing an image in the Media Manager.
+* Backports some internal A4 UI logic for metadata to make the new `document-versions` comparison feature compatible with A3.
+
+# Changelog
 
-*  Adds a `publicBundle` option to `@apostrophecms/asset`. When set to `false`, the `ui/src` public asset bundle is not built at all in most cases
+## 3.65.0 (2024-05-06)
+
+* Adds a `publicBundle` option to `@apostrophecms/asset`. When set to `false`, the `ui/src` public asset bundle is not built at all in most cases
 except as part of the admin UI bundle which depends on it. For use with external front ends such as [apostrophe-astro](https://github.com/apostrophecms/apostrophe-astro).
 Thanks to Michelin for contributing this feature.
 
 ## 3.64.0 (2024-04-18)
 
-### Adds
-
 ### Fixes
 
 * Add the missing `metaType` property to newly inserted widgets.
@@ -42,8 +47,6 @@ that these keys would be present.
 * `field.help` and `field.htmlHelp` are now correctly translated when displayed in a tooltip.
 This was also an expectation for the multisite module.
 
-## UNRELEASED
-
 ### Adds
 
 * Add side by side comparison support in AposSchema component.

package/modules/@apostrophecms/i18n/i18n/en.json

@@ -194,6 +194,8 @@
   "hideInNavigation": "Hide in Navigation",
   "home": "Home",
   "image": "Image",
+  "imageOnReplaceAutocropMessage": "The replaced image has been autocropped for \"{{ title }}\".",
+  "imageOnReplaceAutocropError": "An error occurred while autocropping the replaced image for {{ title }}",
   "imageDescription": "Add an inline image",
   "imageFile": "Image File",
   "imagePlaceholder": "Image placeholder",

package/modules/@apostrophecms/image/index.js

@@ -122,6 +122,19 @@ module.exports = {
       }
     }
   },
+  handlers(self) {
+    return {
+      beforeUpdate: {
+        // Ensure the crop fields are updated on publishing an image
+        async autoCropRelations(req, piece, options) {
+          if (piece.aposMode !== 'published') {
+            return;
+          }
+          await self.updateImageCropRelationships(req, piece);
+        }
+      }
+    };
+  },
   commands(self) {
     return {
       remove: [
@@ -254,26 +267,7 @@ module.exports = {
           return withinOnePercent(testRatio, configuredRatio);
         }
         async function autocrop(image, widgetOptions) {
-          const nativeRatio = image.attachment.width / image.attachment.height;
-          const configuredRatio = widgetOptions.aspectRatio[0] / widgetOptions.aspectRatio[1];
-          let crop;
-          if (configuredRatio >= nativeRatio) {
-            const height = image.attachment.width / configuredRatio;
-            crop = {
-              top: Math.floor((image.attachment.height - height) / 2),
-              left: 0,
-              width: image.attachment.width,
-              height: Math.floor(height)
-            };
-          } else {
-            const width = image.attachment.height * configuredRatio;
-            crop = {
-              top: 0,
-              left: Math.floor((image.attachment.width - width) / 2),
-              width: Math.floor(width),
-              height: image.attachment.height
-            };
-          }
+          const crop = self.calculateAutocrop(image, widgetOptions.aspectRatio);
           await self.apos.attachment.crop(req, image.attachment._id, crop);
           image._fields = crop;
           // For ease of testing send back the cropped image URLs now
@@ -457,7 +451,169 @@ module.exports = {
           name: 'dummy',
           width: 0
         }).name;
+      },
+      // Given an image piece and a aspect ratio array, calculate the crop
+      // that would be applied to the image when autocropping it to the
+      // given aspect ratio.
+      calculateAutocrop(image, aspecRatio) {
+        let crop;
+        const configuredRatio = aspecRatio[0] / aspecRatio[1];
+        const nativeRatio = image.attachment.width / image.attachment.height;
+
+        if (configuredRatio >= nativeRatio) {
+          const height = image.attachment.width / configuredRatio;
+          crop = {
+            top: Math.floor((image.attachment.height - height) / 2),
+            left: 0,
+            width: image.attachment.width,
+            height: Math.floor(height)
+          };
+        } else {
+          const width = image.attachment.height * configuredRatio;
+          crop = {
+            top: 0,
+            left: Math.floor((image.attachment.width - width) / 2),
+            width: Math.floor(width),
+            height: image.attachment.height
+          };
+        }
+
+        return crop;
+      },
+      async updateImageCropRelationships(req, piece) {
+        if (!piece.relatedReverseIds?.length) {
+          return;
+        }
+        if (
+          !piece._prevAttachmentId ||
+          !piece.attachment ||
+          piece._prevAttachmentId === piece.attachment._id
+        ) {
+          return;
+        }
+        const croppedIndex = {};
+        for (const docId of piece.relatedReverseIds) {
+          await self.updateImageCropsForRelationship(req, docId, piece, croppedIndex);
+        }
+      },
+      // This handler operates on all documents of a given aposDocId. The `piece`
+      // argument is the image piece that has been updated.
+      // - Auto re-crop the image, using the same width/height ratio if the
+      // image has been cropped.
+      // - Remove any existing focal point data.
+      //
+      // `croppedIndex` is used to avoid re-cropping the same image when updating multiple
+      // documents. It's internally mutated by the handler.
+      async updateImageCropsForRelationship(req, aposDocId, piece, croppedIndex = {}) {
+        const dbDocs = await self.apos.doc.db.find({
+          aposDocId
+        }).toArray();
+        const changeSets = dbDocs.flatMap(doc => getDocRelations(doc, piece));
+        for (const changeSet of changeSets) {
+          try {
+            const cropFields = await autocrop(changeSet.image, changeSet.cropFields, croppedIndex);
+            const $set = {
+              [changeSet.docDotPath]: cropFields
+            };
+            self.logDebug(req, 'replace-autocrop', {
+              docId: changeSet.docId,
+              docTitle: changeSet.doc.title,
+              imageId: piece._id,
+              imageTitle: piece.title,
+              $set
+            });
+            await self.apos.doc.db.updateOne({
+              _id: changeSet.docId
+            }, {
+              $set
+            });
+          } catch (e) {
+            self.apos.util.error(e);
+            await self.apos.notify(
+              req,
+              req.t(
+                'apostrophe:imageOnReplaceAutocropError',
+                {
+                  title: changeSet.doc.title
+                }
+              ),
+              {
+                type: 'danger',
+                dismiss: true
+              }
+            );
+          }
+        }
+
+        if (changeSets.length) {
+          return self.apos.notify(
+            req,
+            req.t(
+              'apostrophe:imageOnReplaceAutocropMessage',
+              {
+                title: changeSets[0].doc.title
+              }
+            ),
+            {
+              type: 'success',
+              dismiss: true
+            }
+          );
+        }
+
+        function getDocRelations(doc, imagePiece) {
+          const results = [];
+          self.apos.doc.walk(doc, function (o, key, value, dotPath, ancestors) {
+            if (!value || typeof value !== 'object' || !Array.isArray(value.imageIds)) {
+              return;
+            }
+            if (!value.imageIds.includes(imagePiece.aposDocId)) {
+              return;
+            }
+            if (!value.imageFields?.[imagePiece.aposDocId]) {
+              return;
+            }
+            const cropFields = value.imageFields[imagePiece.aposDocId];
+            // We check for crop OR focal point data (because
+            // focal point has to be reset when the image is replaced).
+            if (!cropFields.width && typeof cropFields.x !== 'number') {
+              return;
+            }
+            results.push({
+              docId: doc._id,
+              docDotPath: `${dotPath}.imageFields.${imagePiece.aposDocId}`,
+              doc,
+              cropFields,
+              image: imagePiece,
+              value
+            });
+          });
+          return results;
+        }
+
+        async function autocrop(image, oldFields, croppedIndex) {
+          let crop = { ...oldFields };
+          if (crop.width) {
+            crop = self.calculateAutocrop(image, [ crop.width, crop.height ]);
+          }
+
+          const hash = cropHash(image, crop);
+          if (crop.width && !croppedIndex[hash]) {
+            await self.apos.attachment.crop(req, image.attachment._id, crop);
+            croppedIndex[hash] = true;
+          }
+          return {
+            ...crop,
+            x: null,
+            y: null
+          };
+        }
+
+        function cropHash(image, crop) {
+          return `${image.attachment._id}-${crop.top}-${crop.left}-${crop.width}-${crop.height}`;
+        }
       }
+
     };
   },
   extendMethods(self) {
@@ -515,6 +671,15 @@ module.exports = {
             }
             return [ self.apos.launder.integer(a[0]), self.apos.launder.integer(a[1]) ];
           }
+        },
+        prevAttachment: {
+          after(results) {
+            for (const result of results) {
+              if (result.attachment) {
+                result._prevAttachmentId = result.attachment._id;
+              }
+            }
+          }
         }
       }
     };

package/modules/@apostrophecms/page/index.js

@@ -2300,7 +2300,7 @@ database.`);
       // Apostrophe queries used to fetch Apostrophe pages
       // consult this method.
       getBaseUrl(req) {
-        const hostname = self.apos.i18n.locales[req.locale].hostname;
+        const hostname = self.apos.i18n.locales[req.locale]?.hostname;
 
         return hostname
           ? `${req.protocol}://${hostname}`

package/modules/@apostrophecms/schema/index.js

@@ -441,6 +441,13 @@ module.exports = {
         });
       },
 
+      // Wrapper around isEqual method to get modified fields between two documents
+      // instead of just getting a boolean, it will return an array of the modified fields
+
+      getChanges(req, schema, one, two) {
+        return self.isEqual(req, schema, one, two, { getChanges: true });
+      },
+
       // Compare two objects and return true only if their schema fields are equal.
       //
       // Note that for relationship fields this comparison is based on the idsStorage
@@ -451,22 +458,40 @@ module.exports = {
       // This method is invoked by the doc module to compare draft and published
       // documents and set the modified property of the draft, just before updating the
       // published version.
+      //
+      // When passing the option `getChange: true` it'll return an array of changed fields
+      // in this case the method won't short circuit by directly returning false
+      // when finding a changed field
 
-      isEqual(req, schema, one, two) {
+      isEqual(req, schema, one, two, options = {}) {
+        const changedFields = [];
         for (const field of schema) {
           const fieldType = self.fieldTypes[field.type];
-          if (!fieldType.isEqual) {
-            if ((!_.isEqual(one[field.name], two[field.name])) &&
-              !((one[field.name] == null) && (two[field.name] == null))) {
-              return false;
-            }
-          } else {
+
+          if (fieldType.isEqual) {
             if (!fieldType.isEqual(req, field, one, two)) {
+              if (options.getChanges) {
+                changedFields.push(field.name);
+              } else {
+                return false;
+              }
+            }
+            continue;
+          }
+
+          if (
+            !_.isEqual(one[field.name], two[field.name]) &&
+            !((one[field.name] == null) && (two[field.name] == null))
+          ) {
+            if (options.getChanges) {
+              changedFields.push(field.name);
+            } else {
               return false;
             }
           }
         }
-        return true;
+
+        return options.getChanges ? changedFields : true;
       },
 
       // Index the object's fields for participation in Apostrophe search unless

package/modules/@apostrophecms/schema/ui/apos/components/AposSchema.vue

@@ -40,6 +40,7 @@
       <component
         v-show="displayComponent(field)"
         v-model="fieldState[field.name]"
+        :class="{ 'apos-field__wrapper--highlight': highlight(field.name) }"
         :is="fieldComponentMap[field.type]"
         :following-values="followingValues[field.name]"
         :condition-met="conditionalFields?.if[field.name]"
@@ -59,6 +60,7 @@
         v-if="hasCompareMeta"
         v-show="displayComponent(field)"
         v-model="compareMetaState[field.name]"
+        :class="{ 'apos-field__wrapper--highlight': highlight(field.name) }"
         :is="fieldComponentMap[field.type]"
         :following-values="followingValues[field.name]"
         :condition-met="conditionalFields?.if[field.name]"
@@ -139,4 +141,9 @@ export default {
       }
     }
   }
+
+  :deep(.apos-field__wrapper--highlight > .apos-field) {
+    padding: 10px;
+    background: var(--a-highlight);
+  }
 </style>

package/modules/@apostrophecms/schema/ui/apos/logic/AposSchema.js

@@ -328,6 +328,9 @@ export default {
     },
     onUpdateDocData(data) {
       this.$emit('update-doc-data', data);
+    },
+    highlight(fieldName) {
+      return this.meta[fieldName]?.['@apostrophecms/schema:highlight'];
     }
   }
 };

package/modules/@apostrophecms/ui/ui/apos/scss/global/_theme.scss

@@ -8,6 +8,7 @@
   --a-warning-dark: #a75c07;
   --a-warning-fade: #ffce0030;
   --a-progress-bg: #2c354d;
+  --a-highlight: #fff6e8;
 
   --a-danger-button-hover: #c00717;
   --a-danger-button-active: #a10000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apostrophe",
-  "version": "3.65.0",
+  "version": "3.66.0",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {

package/test/images.js

@@ -1,9 +1,12 @@
 const t = require('../test-lib/test.js');
-const assert = require('assert');
+const assert = require('assert/strict');
 const fs = require('fs');
+const fsp = require('fs/promises');
 const path = require('path');
 const FormData = require('form-data');
 
+const publicFolderPath = path.join(process.cwd(), 'test/public');
+
 describe('Images', function() {
 
   let apos;
@@ -73,7 +76,8 @@ describe('Images', function() {
   // Test pieces.list()
   it('should clean up any existing images for testing', async function() {
     try {
-      const response = await apos.doc.db.deleteMany({ type: '@apostrophecms/image' }
+      const response = await apos.doc.db.deleteMany(
+        { type: '@apostrophecms/image' }
       );
       assert(response.result.ok === 1);
     } catch (e) {
@@ -263,6 +267,140 @@ describe('Images', function() {
     assert.strictEqual(fields.height, 225);
   });
 
+  it('should update crop fields when replacing an image attachment', async function () {
+    await t.destroy(apos);
+    await fsp.rm(path.join(publicFolderPath, 'uploads'), {
+      recursive: true,
+      force: true
+    });
+    apos = await t.create({
+      root: module,
+      modules: {
+        'test-piece': {
+          extend: '@apostrophecms/piece-type',
+          fields: {
+            add: {
+              main: {
+                type: 'area',
+                options: {
+                  widgets: {
+                    '@apostrophecms/image': {
+                      aspectRatio: [ 3, 2 ]
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+    await insertUser({
+      title: 'admin',
+      username: 'admin',
+      password: 'admin',
+      email: 'ad@min.com',
+      role: 'admin'
+    });
+
+    // Upload an image (landscape), crop it, insert a piece with the cropped image
+    jar = await login('admin');
+    const formData = new FormData();
+    const stream = fs.createReadStream(
+      path.join(apos.rootDir, '/public/test-image-landscape.jpg')
+    );
+    formData.append('file', stream);
+    const attachment = await apos.http.post('/api/v1/@apostrophecms/attachment/upload', {
+      body: formData,
+      jar
+    });
+    stream.close();
+    image = await apos.http.post('/api/v1/@apostrophecms/image', {
+      body: {
+        title: 'Test Image Landscape',
+        attachment
+      },
+      jar
+    });
+    assert.equal(image._prevAttachmentId, attachment._id);
+    const crop = await apos.http.post('/api/v1/@apostrophecms/image/autocrop', {
+      body: {
+        relationship: [ image ],
+        widgetOptions: {
+          aspectRatio: [ 3, 2 ]
+        }
+      },
+      jar
+    });
+    let piece = await apos.http.post('/api/v1/test-piece', {
+      jar,
+      body: {
+        title: 'Test Piece',
+        slug: 'test-piece',
+        type: 'test-piece',
+        main: {
+          metaType: 'area',
+          items: [
+            {
+              type: '@apostrophecms/image',
+              metaType: 'widget',
+              imageIds: [ image.aposDocId ],
+              imageFields: {
+                [image.aposDocId]: crop.relationship[0]._fields
+              },
+              _image: [ crop.relationship[0] ]
+            }
+          ]
+        }
+      }
+    });
+
+    let imageFields = piece.main.items[0].imageFields[image.aposDocId];
+    assert(imageFields, 'imageFields should be present when creating the piece');
+    assert.equal(imageFields.width / imageFields.height, 3 / 2, 'aspect ratio should be 3:2');
+    await fsp.access(
+      path.join(
+        publicFolderPath,
+        attachment._urls.original.replace(
+          '.jpg',
+        `.${imageFields.left}.${imageFields.top}.${imageFields.width}.${imageFields.height}.jpg`
+        )
+      )
+    );
+
+    // Replace the image with portrait orientation, verify that the aspect ratio is preserved
+    const formDataPortrait = new FormData();
+    const streamPortrait = fs.createReadStream(path.join(apos.rootDir, '/public/test-image.jpg'));
+    formDataPortrait.append('file', streamPortrait);
+    const attachmentPortrait = await apos.http.post('/api/v1/@apostrophecms/attachment/upload', {
+      body: formDataPortrait,
+      jar
+    });
+    image = await apos.http.put(`/api/v1/@apostrophecms/image/${image._id}`, {
+      body: {
+        title: 'Test Image Portrait',
+        attachment: attachmentPortrait
+      },
+      jar
+    });
+    streamPortrait.close();
+    piece = await apos.http.get(`/api/v1/test-piece/${piece._id}`, {
+      jar
+    });
+    imageFields = piece.main.items[0].imageFields[image.aposDocId];
+    assert(imageFields, 'imageFields should be present after replacing the image attachment');
+    assert.equal(imageFields.width / imageFields.height, 3 / 2, 'aspect ratio should be 3:2');
+    await fsp.access(
+      path.join(
+        publicFolderPath,
+        attachmentPortrait._urls.original.replace(
+          '.jpg',
+        `.${imageFields.left}.${imageFields.top}.${imageFields.width}.${imageFields.height}.jpg`
+        )
+      )
+    );
+  });
+
   async function insertUser(info) {
     const user = apos.user.newInstance();
     assert(user);