Add ability to adjust nodes before/after cloning children

1904labs · Feb 9, 2024 · 601f708 · 601f708
1 parent be3b447
commit 601f708
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "scripts": {
         "format": "eslint src --fix && prettier --write .",
         "lint": "eslint --max-warnings=0 src && prettier --check .",
-        "test": "grunt test",
+        "test": "grunt test --debug",
         "build": "grunt",
         "build:ci": "grunt ci",
         "beta-version-patch": "npm version $(semver $npm_package_version -i prerelease --preid beta)",

diff --git a/spec/dom-to-image-more.spec.js b/spec/dom-to-image-more.spec.js
@@ -15,7 +15,29 @@
             assert.ok(domtoimage);
         });
 
-        describe('regression', function () {
+        describe('features', function () {
+            it('should handle adjustClonedNode', function (done) {
+                function oncloned(_node, clone, after) {
+                    /* jshint unused:false */
+                    if(!after) {                  
+                        if (clone.id === 'element') {
+                            clone.style.transform = 'translateY(100px)';
+                        }
+                    }
+                    return clone;                   
+                }
+
+                loadTestPage(
+                    'eventing/dom-node.html',
+                    'eventing/style.css',
+                    'eventing/control-image'
+                )
+                    .then(() => renderToPng(domNode(), { adjustClonedNode: oncloned }))
+                    .then(check)
+                    .then(done)
+                    .catch(done);
+            });
+
             it('should render to svg', function (done) {
                 loadTestPage(
                     'small/dom-node.html',

diff --git a/spec/resources/background-clip/control-image b/spec/resources/background-clip/control-image
diff --git a/spec/resources/defaultStyles/control-image b/spec/resources/defaultStyles/control-image
diff --git a/spec/resources/eventing/control-image b/spec/resources/eventing/control-image
@@ -0,0 +1 @@
+data:image/png;base64,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gAABQXcDBAgQIEAgICDogRE9gQABAgQICLobIECAAAECAQFBD4zoCQQIECBAQNDdAAECBAgQCAgIemBETyBAgAABAoLuBggQIECAQEBA0AMjegIBAgQIEBB0N0CAAAECBAICgh4Y0RMIECBAgICguwECBAgQIBAQEPTAiJ5AgAABAgQE3Q0QIECAAIGAgKAHRvQEAgQIECAg6G6AAAECBAgEBAQ9MKInECBAgAABQXcDBAgQIEAgICDogRE9gQABAgQICLobIECAAAECAQFBD4zoCQQIECBAQNDdAAECBAgQCAgIemBETyBAgAABAoLuBggQIECAQEBA0AMjegIBAgQIEBB0N0CAAAECBAICgh4Y0RMIECBAgICguwECBAgQIBAQEPTAiJ5AgAABAgQE3Q0QIECAAIGAgKAHRvQEAgQIECAg6G6AAAECBAgEBAQ9MKInECBAgAABQXcDBAgQIEAgICDogRE9gQABAgQICLobIECAAAECAQFBD4zoCQQIECBAQNDdAAECBAgQCAgIemBETyBAgAABAoLuBggQIECAQEBA0AMjegIBAgQIEBB0N0CAAAECBAICgh4Y0RMIECBAgICguwECBAgQIBAQEPTAiJ5AgAABAgQE3Q0QIECAAIGAgKAHRvQEAgQIECAg6G6AAAECBAgEBAQ9MKInECBAgAABQXcDBAgQIEAgICDogRE9gQABAgQICLobIECAAAECAQFBD4zoCQQIECBAQNDdAAECBAgQCAgIemBETyBAgAABAoLuBggQIECAQEBA0AMjegIBAgQIEBB0N0CAAAECBAICgh4Y0RMIECBAgICguwECBAgQIBAQEPTAiJ5AgAABAgQE3Q0QIECAAIGAgKAHRvQEAgQIECAg6G6AAAECBAgEBAQ9MKInECBAgAABQXcDBAgQIEAgICDogRE9gQABAgQICLobIECAAAECAQFBD4zoCQQIECBAQNDdAAECBAgQCAgIemBETyBAgAABAoLuBggQIECAQEBA0AMjegIBAgQIEBB0N0CAAAECBAICgh4Y0RMIECBAgICguwECBAgQIBAQEPTAiJ5AgAABAgQE3Q0QIECAAIGAgKAHRvQEAgQIECAg6G6AAAECBAgEBAQ9MKInECBAgAABQXcDBAgQIEAgICDogRE9gQABAgQICLobIECAAAECAQFBD4zoCQQIECBAQNDdAAECBAgQCAgIemBETyBAgAABAoLuBggQIECAQEBA0AMjegIBAgQIEBB0N0CAAAECBAICgh4Y0RMIECBAgICguwECBAgQIBAQEPTAiJ5AgAABAgQE3Q0QIECAAIGAgKAHRvQEAgQIECAg6G6AAAECBAgEBAQ9MKInECBAgAABQXcDBAgQIEAgICDogRE9gQABAgQICLobIECAAAECAQFBD4zoCQQIECBAQNDdAAECBAgQCAgIemBETyBAgAABAoLuBggQIECAQEBA0AMjegIBAgQIEBB0N0CAAAECBAICgh4Y0RMIECBAgICguwECBAgQIBAQEPTAiJ5AgAABAgQE3Q0QIECAAIGAgKAHRvQEAgQIECAg6G6AAAECBAgEBAQ9MKInECBAgAABQXcDBAgQIEAgICDogRE9gQABAgQICLobIECAAAECAQFBD4zoCQQIECBAQNDdAAECBAgQCAgIemBETyBAgAABAoLuBggQIECAQEBA0AMjegIBAgQIEBB0N0CAAAECBAICgh4Y0RMIECBAgICguwECBAgQIBAQEPTAiJ5AgAABAgQE3Q0QIECAAIGAgKAHRvQEAgQIECAg6G6AAAECBAgEBAQ9MKInECBAgAABQXcDBAgQIEAgICDogRE9gQABAgQICLobIECAAAECAQFBD4zoCQQIECBAQNDdAAECBAgQCAgIemBETyBAgAABAoLuBggQIECAQEBA0AMjegIBAgQIEBB0N0CAAAECBAICgh4Y0RMIECBAgICguwECBAgQIBAQEPTAiJ5AgAABAgQE3Q0QIECAAIGAgKAHRvQEAgQIECAg6G6AAAECBAgEBAQ9MKInECBAgAABQXcDBAgQIEAgICDogRE9gQABAgQICLobIECAAAECAQFBD4zoCQQIECBAQNDdAAECBAgQCAgIemBETyBAgAABAoLuBggQIECAQEBA0AMjegIBAgQIEBB0N0CAAAECBAICgh4Y0RMIECBAgICguwECBAgQIBAQEPTAiJ5AgAABAgQE3Q0QIECAAIGAgKAHRvQEAgQIECAg6G6AAAECBAgEBAQ9MKInECBAgAABQXcDBAgQIEAgICDogRE9gQABAgQICLobIECAAAECAQFBD4zoCQQIECBAQNDdAAECBAgQCAgIemBETyBAgAABAoLuBggQIECAQEBA0AMjegIBAgQIEBB0N0CAAAECBAICgh4Y0RMIECBAgICguwECBAgQIBAQEPTAiJ5AgAABAgQE3Q0QIECAAIGAgKAHRvQEAgQIECAg6G6AAAECBAgEBAQ9MKInECBAgAABQXcDBAgQIEAgICDogRE9gQABAgQICLobIECAAAECAQFBD4zoCQQIECBAQNDdAAECBAgQCAgIemBETyBAgAABAoLuBggQIECAQEBA0AMjegIBAgQIEBB0N0CAAAECBAICgh4Y0RMIECBAgICguwECBAgQIBAQEPTAiJ5AgAABAgQE3Q0QIECAAIGAgKAHRvQEAgQIECAg6G6AAAECBAgEBAQ9MKInECBAgAABQXcDBAgQIEAgICDogRE9gQABAgQICLobIECAAAECAQFBD4zoCQQIECBAQNDdAAECBAgQCAgIemBETyBAgAABAoLuBggQIECAQEBA0AMjegIBAgQIEBB0N0CAAAECBAICgh4Y0RMIECBAgICguwECBAgQIBAQEPTAiJ5AgAABAgQE3Q0QIECAAIGAgKAHRvQEAgQIECAg6G6AAAECBAgEBAQ9MKInECBAgAABQXcDBAgQIEAgICDogRE9gQABAgQICLobIECAAAECAQFBD4zoCQQIECBAQNDdAAECBAgQCAgIemBETyBAgAABAoLuBggQIECAQEBA0AMjegIBAgQIEBB0N0CAAAECBAICgh4Y0RMIECBAgICguwECBAgQIBAQEPTAiJ5AgAABAgQE3Q0QIECAAIGAgKAHRvQEAgQIECAg6G6AAAECBAgEBAQ9MKInECBAgAABQXcDBAgQIEAgICDogRE9gQABAgQICLobIECAAAECAQFBD4zoCQQIECBAQNDdAAECBAgQCAgIemBETyBAgAABAoLuBggQIECAQEBA0AMjegIBAgQIEBB0N0CAAAECBAICgh4Y0RMIECBAgICguwECBAgQIBAQEPTAiJ5AgAABAgQE3Q0QIECAAIGAgKAHRvQEAgQIECAg6G6AAAECBAgEBAQ9MKInECBAgAABQXcDBAgQIEAgICDogRE9gQABAgQICLobIECAAAECAQFBD4zoCQQIECBAQNDdAAECBAgQCAgIemBETyBAgAABAoLuBggQIECAQEBA0AMjegIBAgQIEBB0N0CAAAECBAICgh4Y0RMIECBAgICguwECBAgQIBAQEPTAiJ5AgAABAgQE3Q0QIECAAIGAgKAHRvQEAgQIECAg6G6AAAECBAgEBAQ9MKInECBAgAABQXcDBAgQIEAgICDogRE9gQABAgQICLobIECAAAECAQFBD4zoCQQIECBAQNDdAAECBAgQCAgIemBETyBAgAABAoLuBggQIECAQEBA0AMjegIBAgQIEBB0N0CAAAECBAICgh4Y0RMIECBAgICguwECBAgQIBAQEPTAiJ5AgAABAgQE3Q0QIECAAIGAgKAHRvQEAgQIECAg6G6AAAECBAgEBAQ9MKInECBAgAABQXcDBAgQIEAgICDogRE9gQABAgQICLobIECAAAECAQFBD4zoCQQIECBAQNDdAAECBAgQCAgIemBETyBAgAABAoLuBggQIECAQEBA0AMjegIBAgQIEBB0N0CAAAECBAICgh4Y0RMIECBAgICguwECBAgQIBAQEPTAiJ5AgAABAgQE3Q0QIECAAIGAgKAHRvQEAgQIECAg6G6AAAECBAgEBAQ9MKInECBAgAABQXcDBAgQIEAgICDogRE9gQABAgQICLobIECAAAECAQFBD4zoCQQIECBAQNDdAAECBAgQCAj8ArcjSkn3E5VoAAAAAElFTkSuQmCC
diff --git a/spec/resources/eventing/dom-node.html b/spec/resources/eventing/dom-node.html
@@ -0,0 +1 @@
+<div id="element" style="width: 100px; height: 100px; background-color: green"></div>
diff --git a/src/dom-to-image-more.js b/src/dom-to-image-more.js
@@ -22,6 +22,8 @@
         styleCaching: 'strict',
         // Default cors config is to request the image address directly
         corsImg: undefined,
+        // Callback for adjustClonedNode eventing (to allow adjusting clone's properties)
+        adjustClonedNode: undefined,
     };
 
     const domtoimage = {
@@ -83,6 +85,7 @@
      *         - @param {Enumerator} method - get, post
      *         - @param {Object} headers - eg: { "Content-Type", "application/json;charset=UTF-8" }
      *         - @param {Object} data - post payload
+     * @param {Function} options.adjustClonedNode - callback for adjustClonedNode eventing (to allow adjusting clone's properties)
      * @return {Promise} - A promise that is fulfilled with a SVG image data URL
      * */
     function toSvg(node, options) {
@@ -266,7 +269,7 @@
             domtoimage.impl.options.cacheBust = options.cacheBust;
         }
 
-        if (typeof(options.corsImg) === 'undefined') {
+        if (typeof options.corsImg === 'undefined') {
             domtoimage.impl.options.corsImg = defaultOptions.corsImg;
         } else {
             domtoimage.impl.options.corsImg = options.corsImg;
@@ -352,9 +355,11 @@
 
         return Promise.resolve(node)
             .then(makeNodeCopy)
+            .then(adjustCloneBefore)
             .then(function (clone) {
                 return cloneChildren(clone, getParentOfChildren(node));
             })
+            .then(adjustCloneAfter)
             .then(function (clone) {
                 return processClone(clone, node);
             });
@@ -366,6 +371,20 @@
             return original.cloneNode(false);
         }
 
+        function adjustCloneBefore(clone) {
+            if (options.adjustClonedNode) {
+                options.adjustClonedNode(node, clone, false);
+            }
+            return Promise.resolve(clone);
+        }
+
+        function adjustCloneAfter(clone) {
+            if (options.adjustClonedNode) {
+                options.adjustClonedNode(node, clone, true);
+            }
+            return Promise.resolve(clone);
+        }
+
         function getParentOfChildren(original) {
             if (util.isElementHostForOpenShadowRoot(original)) {
                 return original.shadowRoot; // jump "down" to #shadow-root
@@ -804,15 +823,27 @@
                         request.withCredentials = true;
                     }
 
-                    if (domtoimage.impl.options.corsImg
-                        && url.indexOf('http') === 0 
-                        && url.indexOf(window.location.origin) === -1) {
-                        const method = (domtoimage.impl.options.corsImg.method || 'GET').toUpperCase() === 'POST' 
-                            ? 'POST' 
-                            : 'GET';
+                    if (
+                        domtoimage.impl.options.corsImg &&
+                        url.indexOf('http') === 0 &&
+                        url.indexOf(window.location.origin) === -1
+                    ) {
+                        const method =
+                            (
+                                domtoimage.impl.options.corsImg.method || 'GET'
+                            ).toUpperCase() === 'POST'
+                                ? 'POST'
+                                : 'GET';
+
+                        request.open(
+                            method,
+                            (domtoimage.impl.options.corsImg.url || '').replace(
+                                '#{cors}',
+                                url
+                            ),
+                            true
+                        );
 
-                        request.open(method, (domtoimage.impl.options.corsImg.url || '').replace('#{cors}', url), true);
-
                         let isJson = false;
                         const headers = domtoimage.impl.options.corsImg.headers || {};
                         Object.keys(headers).forEach(function (key) {
@@ -822,10 +853,12 @@
                             request.setRequestHeader(key, headers[key]);
                         });
 
-                        const corsData = handleJson(domtoimage.impl.options.corsImg.data || '');
-
+                        const corsData = handleJson(
+                            domtoimage.impl.options.corsImg.data || ''
+                        );
+
                         Object.keys(corsData).forEach(function (key) {
-                            if (typeof(corsData[key]) === 'string') {
+                            if (typeof corsData[key] === 'string') {
                                 corsData[key] = corsData[key].replace('#{cors}', url);
                             }
                         });
@@ -1371,8 +1404,8 @@
         const docType = document.doctype;
         const docTypeDeclaration = docType
             ? `<!DOCTYPE ${escapeHTML(docType.name)} ${escapeHTML(
-                  docType.publicId
-              )} ${escapeHTML(docType.systemId)}`.trim() + '>'
+                docType.publicId
+            )} ${escapeHTML(docType.systemId)}`.trim() + '>'
             : '';
 
         // Create a hidden sandbox <iframe> element within we can create default HTML elements and query their