@billkamm
can you provide a simple project to show this issue.
as we’ve tested both in local side and on our qa site Excel Editor Online for Free.
it works as normal.
We are trying to draw highlights on images and textboxes on the initial load of a sheet (highlights the user has previously entered that we saved to the database and are reloading for them), but we are getting lots of errors because we are trying to highlight images and/or textboxes and other shapes before xspreadsheet has fully loaded them. We tried checking xs.sheet.data.isImageOk, but it seems that is set to true as soon as a single image is loaded and not all of them. Is there a way we can know when all of the images, textboxes, and shapes have finished loading for a sheet, so that we can begin to draw them?
Thanks for sharing your scenario.
We will evaluate your requirements and get back to you soon.
@billkamm It is ok to use xs.sheet.data.isImageOk to check the ready status of shapes/images load.
can you provide your sample code.
We try in our latest development code ,it works as expected.
We will soon release the v23.6 version.
It includes image/shapes loading improvment .
File used in our example:
Xlerator.HK.00001_F.xlsx.zip (49.0 KB)
Your demo project with our code added to show what we are doing the errors we are receiving:
Upload Files Easily | Free File Upload and Sharing Up To 10GB (download link expires on July 13th)
Notes:
- You’ll need to change the paths in TestConfig.js back to your machine
- replaced customHightlightImage and hightlightAll with our own functions
- added tryDrawRedactions on xs.bottombar.swapfunc to draw highlights on each sheet change
- in tryDrawRedactions we wait for isImageOk before running togglehighlights to draw our highlights
- redactionCommands object is a data dump from our database, so we could add the data to your demo project
- drawRedactions actually adds the highlights to each sheet
line 1165 xs.sheet.addHighlightTextBox(sheetShape.id, textRedaction.Start, textRedaction.Start + textRedaction.Length) throws errors such as TypeError: Cannot read properties of undefined (reading ‘color’)
in our code this line has also thrown TypeError: t.setHighlight is not a function
line 1350 xs.sheet.removeHighlightShape(s); throws error when switching to another sheet and switching back
TypeError: Cannot read properties of undefined (reading ‘requestRenderAll’)
line 1230 xs.sheet.table.render(); throws an error on the “Summary”, “Ind Assets”, and other sheets
TypeError: Cannot read properties of undefined (reading ‘color’)
We’ve noticed that setting an arbitrary delay and waiting to call any of these lines of code will get everything to work properly that is why we feel it has something to do with the shapes not being fully loaded yet and were hoping something like waiting for isImageOk before trying to draw any highlights would correct this behavior.
@billkamm
We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.
Issue ID(s): CELLSGRIDJS-844
You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.
@billkamm
1.the root cause for undefined color is:
in your code before add highlight in tryDrawRedactions,the highlightStyle in undefined
//here the highlightStyle is undefined
console.log(’#####highlightStyle is:’+highlightStyle);
2.the root cause for undefined requestRenderAll is:
the shape you recorded is detached to current canvas.
actually when do a re-switch worksheet operation. the shape recorded is nolonger the old .new shape is created based on json save/reload.
so please do not clear and add highlight every time a worksheet is clicked.
only need to add once ,no need to do clear highlight.
3.one more thing .for switch worksheet tab ,now we can use the ‘sheet-selected’ event which is more elegant.
4.so finally below is the workable code:
//define an array to record the worksheet name that already added the highlight settings
const alreadyaddhighlightsheets=[];
//switch worksheet happened
xs.on('sheet-selected', (id,name) => {
// console.log('sheet selected id:', id, ', name: ',name);
tryDrawRedactions(true);
});
.....
function tryDrawRedactions(retryIfNotReady) {
if (!xs.sheet.data.isImageOk) {
if (retryIfNotReady) {
setTimeout(tryDrawRedactions, 50, [this, false]);
}
return;
}
// no need to do remove highlight
// removeAllHighlights();
//here is the bug that highlightStyle is undefined
console.log('#####here cause the undefined color bug ,because highlightStyle is:'+highlightStyle);
//xs.sheet.showHighlights(highlightStyle);
//add highlight once only for a worksheet
if(alreadyaddhighlightsheets.indexOf(xs.sheet.data.name)>=0)
{
return;
}else{
alreadyaddhighlightsheets.push(xs.sheet.data.name);
}
console.log('@@@@@@@@@@@@@@@@@@@@@do draw....'+xs.sheet.data.name+' data.isImageOk:'+xs.sheet.data.isImageOk+ ',data.highlightstyle:'+xs.sheet.data.highlightstyle);
//highlightStyle_shall_defined need to defined
const highlightStyle_shall_defined = { 'color': 'rgba(251, 12, 251, 0.2)' };
xs.sheet.showHighlights(highlightStyle_shall_defined);
drawRedactions();
.....
We have to set the hightlights more than one time per sheet because our users can toggle highlight transparency on and off as well as toggling highlights on and off. Also, we were running into issues with showing and hiding images and showing and hiding highlights not always removing images or highlights as rotate between sheets, so that is why are forcibly removing all of the highlights and redraw them. I will see if I can add those features into the demo project to demonstrate these behaviors.
We will evaluate your issue in details. Moreover, we appreciate if you could provide us a demo project to demonstrate all your issues and other problems.
@billkamm
I suggest you add some buttons just for demo case. When clicking the button, it can mimic what action will do, etc. e.g., showing and hiding images, showing and hiding highlights and so on.
When you reproduce your issues by some specific steps, you can record all such steps one by one. For example, click button 1, switch to sheet 2, click button2, switch to sheet 3, and so on. Then we can help you to analyze your scenario to figure your issue out.
I noticed that we can no longer select images or shapes if the mode is “read” instead of “edit”. Is there a way we would be able to select images/shapes while the mode is “read”? We want the workbook to be read only, but our users want to be able to right-click on images and shapes to open a context menu to allow them to apply highlights
@billkamm
sorry for the inconvenience
we will support to show right click context menu in read mode.
We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.
Issue ID(s): CELLSGRIDJS-852
You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.
Upload Files Easily | Free File Upload and Sharing Up To 10GB Here is the project with the show/hide buttons. You can use the same Excel file as above.
Notice how after the worksheet loads and isImageOk is true and you click the Toggle Images button you get an “Uncaught TypeError: Cannot read properties of undefined (reading ‘requestRenderAll’)”
When we’ve tried to not remove all highlights and redraw them we’ve run into issues with the show/hide highlights and transparency toggles not rendering the highlights correctly as we switch between the sheets of the worksheet. Sometimes highlights that should be hidden remain and sometimes highlights that should be showing do not appear. We’ve had similar issues with the images. A lot of this code we have in here is an attempt to get the features of these buttons to work as we change worksheets.
@billkamm,
Thanks for your details. We will evaluate your issue further and give feedback here later.
Thanks for the sample project.
We need to investigate your issue in details. We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.
Issue ID(s): CELLSGRIDJS-857
You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.
@billkamm
Below is the updated index.html file which may work as per your expectation.
Please have a pre-review.
index.zip (5.5 KB)
You need to update to v23.7 version. We now add new APIs: xs.sheet.clearHighlights and xs.sheet.updateHighlightStyle and a new event sheet-loaded. We just simply use the addhighlight_in_sheet method instead of very complicated method drawRedactions for adding highlight process.
We use shape.setVisible method (which will work after image is loaded) instead of the visiblefilter (which will work before image is loaded from server).
We will soon publish the v23.7 release may be tomorrow.
Stay tuned!
The issues you have found earlier (filed as CELLSGRIDJS-852) have been fixed in this update. This message was posted using Bugs notification tool by johnson.shi
@billkamm
now you can update to our latest version v23.7.0. ,… wait for your feedback.
the latest dll
the latest js