@billkamm
It seems like you want to persist highlight objects. We will provide you with a demo to remove all highlight objects and then re-add them.
@billkamm
Please try this demo:
hilightdemo.7z (329.6 KB)
We try to simulate your usage scenario. You can switch worksheet and also click the toggle buttons for images, highlights and transparency. You can look into the detailed code to see what happened when we click thes button. The key code for switch worksheet is here:
//first remove all highlights
xs.sheet.clearHighlights();
isalreadyaddhighlight_in_this_sheet = false;
//simulate your process to re-add highlights
doDrawRedactions();
setAllImageShapeVisibleStatus();
xs.reRender();
It all works as expected.
when I click the drawhighlight nothing happens. No highlights are drawn. Is there also a way to remove a highlight in this demo?
Are this new methods such as “clearHighlights” available in the current version of GridJS that is already released?
HK_F.zip (49.0 KB)
I tried adding this clearHighlights to my project and it seems to be working correctly as long as i call reRender later with the exception of textboxes that are highlighted (not the text inside, but the texbox itself as an object being highlighted)
I have attached the Excel spreadsheet I am using where I am experiencing this. On sheet “Chart3” there two objects Textbox2 and Textbox3 on the right side of the sheet that when I highlight them as an object (like you would an image or a shape) and then do clearHighlights and reRender they still show their highlights.
Thanks for the sample Excel file and details.
We will look into your issue and get back to you.
@billkamm
Using your provide file, we can reproduce such an issue. 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-1082
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
I have find an issue that the image load status is not correct
in the demo project we provided above
the root cause is sheet-selected event may occure before sheet-loaded event.
now we have fixed it .and the status for image shows fine.
in the demo project we provided above we just highlight the text inside the textbox, use the below code
//my simple test action to simulate the business for highlight operation on textbox
if (xs.sheet.data.shapes) {
for (d of xs.sheet.data.shapes) {
xs.sheet.addHighlightShape(d.id);
if (d.type === 'TextBox') {
d.addHighlight(0, d.text.length / 2);
}
}
}
can you show me your code on such operation for the below description
On sheet “Chart3” there two objects Textbox2 and Textbox3 on the right side of the sheet that when I highlight them as an object (like you would an image or a shape)
var shape = xs.sheet.data.shapes.find(x => x.strid === command.target.strId.toString());
highlightObject(shape);
function highlightObject(obj) {
if (obj.type === 'TextBox') {
//don't overwrite if already set because toggling transparent can cause orig to be lost
obj.origBackgroundColor = obj.hasOwnProperty('origBackgroundColor') ? obj.origBackgroundColor : obj.bgColor;
obj.setBackgroundColor(highlightHex);
obj.hideText(currentRedactionColors.alpha === 1);
//this allows us to easily get the highlighted textboxes using xs.sheet.highlight.getHiglightShaps()
xs.sheet.addHighlightShape(obj.id);
} else if (obj.type === "Picture") {
xs.sheet.addHighlightImage(obj.id);
} else {
xs.sheet.addHighlightShape(obj.id);
}
}
@billkamm
We don’t think setBackgroundColor and hideText is a highlight behavior for TextBox, so we haven’t included the restore in clearHighlights(). This operation you applied to Textbox object is relatively independent and has no relation to highlight.
You will need to maintain it yourself. For your code, you can just simply write a method to do such restore operation after clearHighlights.
here is my suggested way:
//a id list to record the id of textbox you did setBackgroundColor and hideText for
let textIdList = [];
function customOprForTextBox(obj) {
//don't overwrite if already set because toggling transparent can cause orig to be lost
obj.origBackgroundColor = obj.hasOwnProperty('origBackgroundColor') ? obj.origBackgroundColor : obj.bgColor;
obj.setBackgroundColor(highlightHex);
obj.hideText(currentRedactionColors.alpha === 1);
//#####do not addto highlight shape,because you donot do highlight operation for textbox
//xs.sheet.addHighlightShape(obj.id);
//make a idlist record youself to keep track the id list you did for setBackgroundColor and hideText
textIdList.push(xs.sheet.data.name + "_" + obj.id);
}
function restoreCustomOprTextbox(obj) {
obj.setBackgroundColor(obj.origBackgroundColor);
obj.hideText(false);
}
function restoreTextboxInCurrentSheet() {
const prefix = xs.sheet.data.name + "_";
for (let i = textIdList.length - 1; i >= 0; i--) {
const textIdWithSheetName = textIdList[i];
if (textIdWithSheetName.startsWith(prefix)) {
const textIdWithSheetName = textIdList[i];
const obj = xs.sheet.data.shapes.find(x => x.id === textIdWithSheetName.substring(prefix.length));
if (obj) {
restoreCustomOprTextbox(obj);
}
textIdList.splice(i, 1);
}
}
}
here is the updated index.html
index.7z (5.8 KB)
The issues you have found earlier (filed as CELLSGRIDJS-1082) have been fixed in this update. This message was posted using Bugs notification tool by johnson.shi
Using clearHighlights() on the sheet object does not remove inverse highlights.
I added this code to your demo project to test this
{ 'key': 'key10', 'text': 'clear all highlights ', 'callback': clearAllHighlightsFromForm },
const clearAllHighlightsFromForm = (sheet) => {
sheet.clearHighlights();
};
when clicking the new context menu itme “clear all highlights” all of the highlights except for the inverse one are removed, but the inverse one remains.
I tried adding removeHighlightInverseRange to a clearHighlights function as a work around, but the inverse highlights still persist.
const clearHighlights = () => {
xs.sheet.clearHighlights();
xs.sheet.removeHighlightInverseRange();
};
I was able to make this work, but I do not feel I should have to do this. I feel both clearHighlights() and removeHighlightInverseRange() should remove the inverse range without having to do these extra steps
const clearHighlights = () => {
xs.sheet.clearHighlights();
xs.sheet.removeHighlightInverseRange();
xs.sheet.data.inverseObjects = {};
xs.sheet.data.hasInverse = false;
xs.sheet.data.inverseData = undefined;
}
Thanks for providing details and findings about clearing highlights and removing highlight for inverse range. We will evaluate and look into it. We will get back to you soon.
@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-1105
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
Actually in clearHighlights we already remove the inverse highlights. Please add xs.reRender() to trigger the UI update (xs.reRender will trigger the ui update for cells content and the images/shapes, compare the use of sheet.table.render() which only trigger the ui update for cells content but not for the images/shapes).
As per your scenario, I have added the custom context menu items to show the highlightInverseRange. I have updated the index.html in the demo project. please have a check.
index2024.0516.zip (27.5 KB)
I am getting “TypeError: e.setFilter is not a function” in this code in xpsreadsheet.js
}, {
key: "highlightImg",
value: function(t, e, n) {
var i = this.sheet;
i.data,
i.canvas;
if (e)
if (e.setHighlight)
e.setHighlight(t, n);
else if (this.highlightImgFunc)
e.setCustomHighlight(t, this.highlightImgFunc);
else {
var r = !!t && new fabric.Image.filters.Invert;
e.setFilter(r)
}
}
when I call xs.sheet.addHighlightShape(obj.id); This is on the initial load of the workbook, but I do have this code in place to wait before I call addHighlightShape (or any other higlighting)
if (!xs.sheet.data.isImageOk && !xs.sheet.data.forceIsImageOk) {
if (retryIfNotReady) {
xs.sheet.data.forceIsImageOk = true;
setTimeout(tryDrawRedactions, 50, [this, false]);
}
return;
}
Is there something else I need to do to verify that the shapes and images are loaded before I called xs.sheet.addHighlightShape(obj.id)? This is all getting kicked off from the ‘sheet-loaded’ event.
Thanks for the code segment.
We will evaluate your issue and get back to you with details soon.
@billkamm
Please provide a sample project. It is difficult to reproduce such an issue without a sample.