horizontal scroll issues for highlighted and selected textbox.zip (1018.2 KB)
I uploaded a video of the issue. I did have to refresh after adding the highlight before noticing the issue.
@billkamm
Can you provide the code detail for the highlight on textbox( the redact operation), we can then mimic it in our demo project.
Please check my project we provided.
Here we use the latest V 24.3 version
@billkamm
Now we have released the latest version v24.4.
We cannot reproduce your issue in this version.
If you still encounter any issues, please let us know.
We will always be here to help you.
24.4 fixed the issue with the horizontal scrolling. Is there a way to remove all highlights from a sheet at once? We were doing it with the code below, but we removed it because it was causing issues with the show and hiding of highlights (changing the visibility of the highlights). At the moment out code in our project is set to add all of the highlights fresh every time you load a sheet, but in order to do that we need to remove all of the existing highlights when we refresh the page of the sheet we are currently on. We need to refresh the page when we save what we have highlighted to our database, so we felt this was the best approach when we started our project, but now we are stuck without a good to way remove all of the highlights at once
function removeAllHighlights() {
//Need to do shallow copy of highlights because remove methods pop them out of array
const texts = xs.sheet.highlight.getHighlightTexts();
if (texts.length > 0) {
const textsCopy = [...texts];
textsCopy.forEach(r => xs.sheet.removeHighlightText(r.row, r.col))
}
const ranges = xs.sheet.highlight.getHighlightRanges();
if (ranges.length > 0) {
const rangesCopy = [...ranges];
rangesCopy.forEach((r) => { xs.sheet.removeHighlightRange(r.sri, r.sci, r.eri, r.eci) });
}
const images = xs.sheet.highlight.getHighlightImages();
if (images.length > 0) {
const imagesCopy = [...images];
imagesCopy.forEach(r => xs.sheet.removeHighlightImage(r))
}
const shapes = xs.sheet.highlight.getHighlightShaps();
if (shapes?.length > 0) {
const shapesCopy = [...shapes];
shapesCopy.forEach((s) => {
const shape = xs.sheet.data.shapes.find(x => x.id === s)
xs.sheet.removeHighlightShape(s);
if (shape.type === "TextBox") {
shape.highlighttxts?.reduceRight((_, h) =>
shape.removeHighlight(h.start, h.end), null);
if (shape.origBackgroundColor) {
shape.setBackgroundColor(shape.origBackgroundColor);
delete shape.origBackgroundColor;
shape.hideText(false);
}
}
});
}
xs.sheet.removeHighlightInverseRange();
xs.sheet.data.inverseObjects = {};
//necessary to clear highlights, but can throw an error on certain objects
//silently catching the error because we remove object highlights above
try {
xs.sheet.setHighlightAll(false);
}
catch { }
xs.sheet.data.hasInverse = false;
xs.sheet.data.inverseData = undefined;
}
Thank you for sharing your findings and code snippet. We will evaluate your requirements and get back to you soon.
I should note that we removed that code because of the bullet 2 in this post
@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();
};