cytoscape.js-layers icon indicating copy to clipboard operation
cytoscape.js-layers copied to clipboard

redrawing html elements when node resized

Open bunsenbeaker opened this issue 7 months ago • 1 comments

Hi, I'm using renderPerNode() with a HTML layer in order to create an Image object to be displayed on bottom right edge of my Cytoscape circular node, using the following options object:

{
                init: (elem: HTMLElement, node: NodeSingular): void => {
                    const domain: DomainDTO = node.data('dto');
                    const selected: boolean = node.data('selected');

                    if (domain.primary) {
                        const img = new Image();
                        img.src = 'assets/icons/primary_domain.svg';
                        img.width = 4;
                        img.height = 4;
                        img.style.transform = selected ? 'translate(20px, 20px)' : 'translate(5.1px, -5px)';
                        elem.appendChild(img);
                    }
                },
                uniqueElements: true,
                checkBounds: true,
                updateOn: 'auto'
            }

This adds the image perfectly, it's resized properly when zooming in/out, however when my nodes width & height are changed (based on Cytoscale stylesheet width+height properties) image is not redrawn so I can't recalculate its transform values. I tried various 'updateOn' values with no luck...

Screenshots / Sketches

Context

  • Version:
  • Browser:

Additional context

bunsenbeaker avatar Jul 16 '24 07:07 bunsenbeaker