Search code examples
javascriptspreadjs

Add custom cell image/overlay watermark

I would like to be able to watermark a cell in spreadJs with a padlock icon. I want this to be always at the right center of the cell like the image below.

Is this possible?

enter image description here

I can see the below link does something similar, but this is stretched across the whole cell which I don't really want as the cell width and height could be any width and height so this would look odd.

I would like the cell to function as normal and keep all existing style other than having a watermark over the cell of the padlock where needed.

https://help.grapecity.com/spread/SpreadJSWeb/backimage.html

UPDATE

I've just come across the following which I think is a potential for this to work using a custom cell. Does anyone have a simple example they can share where all it is doing is having a custom icon added to an existing cell?

https://help.grapecity.com/spread/SpreadJSWeb/cellcustom.html

Solution

  • SpreadJs support came back to me with the following example which suited my needs in case anyone else is strugglign with this for V12.7

    Javascript

    var spread;
var sheet;
$(document).ready(function () {
    spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
    sheet = spread.getActiveSheet();

    sheet.setColumnCount(5);
    sheet.setRowCount(5);
    sheet.suspendPaint();
    sheet.getCell(0, 0).text("This is Circle text.").cellType(new IconCellType(document.getElementById('icon-lock')));

    sheet.getCell(2, 0).text("Orange").cellType(new IconCellType(document.getElementById('icon-lock')));
    sheet.resumePaint();
});

function IconCellType(img) {
    this.typeName = "IconCellType";
    this.img = img;
}
IconCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
// EllipsisTextCellType.prototype
IconCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {            
    if (!ctx) {
        return;
    }
    ctx.save();

    // draw inside the cell's boundary
    ctx.rect(x, y, w, h);
    ctx.clip();

    // draw text
    GC.Spread.Sheets.CellTypes.Base.prototype.paint.apply(this, [ctx, value, x+20, y, w-20, h, style, context]);
    ctx.beginPath();
    // let img = document.getElementById('icon-lock');
    ctx.drawImage(this.img, x + 2, y + 2, 16, 16);
    ctx.fill();
    ctx.stroke();

    ctx.restore();
};

    HTML

    <img id="icon-lock" style="display:none"  src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTAgNTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTBweCIgaGVpZ2h0PSI1MHB4Ij4KPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNOSw0OWMtMS4xLDAtMi0wLjktMi0yVjIzICBjMC0xLjEsMC45LTIsMi0yaDMyYzEuMSwwLDIsMC45LDIsMnYyNGMwLDEuMS0wLjksMi0yLDJIOXoiLz4KPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMzYsMjFjMCwwLDAtNC45LDAtNiAgYzAtNi4xLTQuOS0xMS0xMS0xMWMtNi4xLDAtMTEsNC45LTExLDExYzAsMS4xLDAsNiwwLDYiLz4KPHBhdGggZD0iTTI4LDMzYzAtMS43LTEuMy0zLTMtM2MtMS43LDAtMywxLjMtMywzYzAsMC45LDAuNCwxLjcsMSwyLjJWMzhjMCwxLjEsMC45LDIsMiwyYzEuMSwwLDItMC45LDItMnYtMi44ICBDMjcuNiwzNC43LDI4LDMzLjksMjgsMzN6Ii8+Cjwvc3ZnPgo="/>
<h1>SpreadJS</h1>
<div id="ss" style="width: 500px; height: 400px; border: 1px solid gray"></div>

    Renders

    enter image description here