Exposing the clone functions

[wyking1997]

Hello, do you think you could expose also the clone functions?

I am working with some AgGrid that has some custom scrolling implemented and also have a virtualisation functionality which basically removes the elements that are not in view from the dom. In order to have a nice screenshot I need to manually modify some things in the dom element, and to do it properly, without messing up the actual element, I need to work on clones. The issue is that when I do normal react/js cloning via element.clone(true) the output is not ok, guessing that some css doesn't get coppied. To make this work I copied the clone fct. you guys implemented and everything is fine, however I would like to avoid having it in my codebase if possible. What do you think?

On another note, I think that having the clone exposed would be really nice since if you have it you can make adjustments to the element you are going to screenshot. I really think that this would be a plus for this library.

[IDisposable]

Sure, we could do something like onCloneNode(node, start) with the implicit requirement that you get called once before clone starts (start = true) and once after the clone is finished (start = false)?

[wyking1997]

Hello this would be very helpfull for us indeed! We would use it only after the clone is created, and we would need to be able to apply some minor changes on the clone itself. Also, the expected behaviour would be that node would actually be the cloned node when start = false, somethig like onCloneNode(clone, start). If we could simply return from this handler the modified node it would be amazing, or I guess we could also modify the clone itself, however you think it is better!

[wyking1997]

When do you think we could have a new version of the library with this change? We would use it as soon as it get's released.

[IDisposable]

If you could give me a simple JSfiddle with an example "adjustment", that would be great and allow me to build a test

…

On Thu, Feb 8, 2024, 01:59 Marius Comiati ***@***.***> wrote: When do you think we could have a new version of the library with this change? We would use it as soon as it get's released. — Reply to this email directly, view it on GitHub <#163 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAGVMS25MBJT6IP5GVLFWPLYSSAU5AVCNFSM6AAAAABC5KZ4SGVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DIMBUGQZDM> . You are receiving this because you commented.Message ID: ***@***.*** com>

[wyking1997]

Sure, I will do it latter today, as soon as I reach my laptop

[wyking1997]

So sorry, for the delay, I had a full day yesterday. Please have a look at the sandbox bellow. In there I have made a virtualised table using AG-Grid library, that basically removes the rows that are not visible from the dom. Also by clicking on the save button the dom-to-image-more library is triggered and the result is exported as a file. This is the exact scenario we are having in our application.

The main piece of code you will probably be interested in is in the main.js file, where I do the dom-to-image-more stuff. I made 2 versions:

1. one in which I apply no adjustments and you can see the main issue
2. a second version in which I fix the issue by cloning the element and applying some changes on it before sending it to the library

You can change the used version by changing the onClick handler from the save button (in main.js at line 19).

https://codesandbox.io/p/sandbox/ag-grid-packages-forked-7pzw7q?file=%2Findex.html%3A53%2C1

[wyking1997]

Bellow you can find also another, way more simpler example which might be better for testing purposes. Here, I move the inner div on it's y axis and take the screenshot. Ideealy, I would perform this on the clone, since I do not want the actual dom element to change.

https://jsfiddle.net/ysbjdu6e/3/

[IDisposable]

Here's a version of your fiddle with the NEW code on my branch inlined... look in the JS block

https://jsfiddle.net/IDisposable/grLtjwe5/12/

[IDisposable]

Major change to your fiddle is adding a new method (and injecting the transform setting there):

const adjustClone = (node, clone, after) => {
  if (!after && clone.id === 'element') {
    clone.style.transform = 'translateY(100px)';
  }
  return clone;                   
}

const screenshotDefaultOptions = (element) => ({
  //copyDefaultStyles: false, /* this breaks the transform being honored :( */
  width: element.getBoundingClientRect().width,
  height: element.getBoundingClientRect().height,
  adjustClonedNode: adjustClone,
});

Note that I had to comment out the copyDefaultStyles: false to let the transformation apply... not sure why

[IDisposable]

If this works for you, I'll push a release today.

[wyking1997]

I will check this directly on our codebase, I know that we had some issues and we actually solved them with the copyDefaultStyles: false. Will let you know asap

[wyking1997]

Hello, I am verry sorry for taking so much time to come back to you, I really wanted to check this verry well before I let you know. I was able to find a way of making it work by ignoring the copyDefaultStyles: false property. However, before you merge, could you please check that the width, height and bgColor options are still working as expected?

[IDisposable]

Not sure what you're requesting I check. If copyDefaultStyles: false then we do NOT copy the style attributes over if they match what would be automatically applied (based on browser and inherited properties). Mostly this is only an optimization IFF we're emitting SVG. For PNG/JPG it shouldn't change anything... what are you targeting for your export?

[wyking1997]

Yeah, I wanted to make sure that the other options behave as before. I had another look and seems perfect. Feel free to release at your earliest convinience.

[wyking1997]

Also, I really appreaciate your quick feedback and help! Thanks again for everything! Also, please let me know when I can update the version in our application!

[IDisposable]

Released in v3.3.0 https://github.com/1904labs/dom-to-image-more/releases/tag/v3.3.0