We have observed some unexpected behavior with the React Spreadsheet component lately.
We are attempting to add signatures to the worksheet at the currently selected cell. We understand that this can be done by adding the image (which we gather from another component, and convert to data uri) to the shapes collection in the worksheet using the selected cell for the position.
The problem we are expericing is that adding more than one image to the worksheet inconsistently adds the new image. Some times it will insert as expected, other times it will place an image that is already defined at another location. It does does in a consistent, but odd stack like behavior.
For instance, if I add image A to B1, and try to add image C to D2, D2 may show image A instead of image C, additionally, deleting image A from B1 may then correctly show image C at D2. While other times, inserting a image elsewhere may work as expected. It is very odd.
I've included some sample code that we are using.
const insertSignature = () => { if (!spreadsheet?.current) { return; } // get our image as data, since worksheet image require a datastring const d = signature.current?.toDataURL();
const wi = new WorksheetImage(d); const s = spreadsheet.current; const c1 = s.activeWorksheet.getCell( `R${s.activeCell.row + 1}C${s.activeCell.column + 1}`, CellReferenceMode.R1C1 ); const c2 = s.activeWorksheet.getCell( `R${s.activeCell.row + 2}C${s.activeCell.column + 2}`, CellReferenceMode.R1C1 ); wi.topLeftCornerCell = c1; wi.bottomRightCornerCell = c2;
// need to find the shape at the current location, if it exists, to clear it out const shapes = s.activeWorksheet.shapes(); for (let i = 0; i < shapes.count; i++) { const shape = shapes.item(i); if ( shape.topLeftCornerCell.equals(c1) && shape.bottomRightCornerCell.equals(c2) ) { shapes.remove(shape); break; } }
shapes.add(wi); };
Hello Corey,
I have been investigating into the behavior you are seeing in this case, and I believe that in order to diagnose this behavior further, we will require a runnable, isolated sample project from your end that demonstrates this behavior. I have not been able to reproduce this behavior on my end as of yet.
Looking at the code you have provided, I have to wonder if you are running into a timing issue of when the value of signature.current changes, as that is the best thing I can think of from the code that you have provided. Perhaps something you could do to further test this is to print out the value of your “const d” in each call to the method you are calling to ensure that it is not pointing at the same URL to the browser’s console? This would help you to be able to verify whether you are pointed at the same image when adding multiple images?
Please let me know if you have any other questions or concerns on this matter.
I've reproduce the issue with this project: https://github.com/confusingbits/spreadsheet-image-bugI've included instructions in the readme, including a video link that hopefully demonstrates the issue more clearly.
I have downloaded the sample project that you have provided on GitHub along with the YouTube video that you have provided with it, and in doing so, I have reproduced the behavior you are seeing. As an extra check, I have implemented the following function within the sample:
function download(url, filename) { fetch(url) .then(response => response.blob()) .then(blob => { const link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.download = filename; link.click(); }) .catch(console.error); }
The above will download the image, and in doing so, I am able to verify that the image coming from the signature is correct and it is not duplicating images. This seems to point at the issue being within the rendering mechanisms of the IgrSpreadsheet.
This behavior is unexpected, and as such, I have asked our engineering teams to examine the behavior further. To ensure it receives attention, I have logged it in our internal tracking systems with a development ID of 274139. The next step will be for a developer to investigate further and offer a fix or other resolution. I will be linking this issue to a private support case so that you can be notified when a resolution is made. This support case has an ID of C-00223866 and you can access it after signing into your account, here: https://account.infragistics.com/support-cases. You can continue to send updates to the case or this forum thread at any time.
Thanks, its been a couple of weeks, is there an update on this issue?
Hi Andrew, I am taking this case over on behalf Corey. Has their been any progress on resolving this? It is holding our release date up. Let me know if you need the license number. Thank you.