Html label inside the node / node size as a function of html label / add hook for DOM update

[cversari]

Hello, first of all, thank you for this extension which I find extremely useful.

I am currently using the html label to display html content inside a node, by placing the label in the center of the node and resizing dynamically the node as a function of the size of the label (which may change over time during the lifetime of the node).

However I cannot do it in a clean way, because when the content of the label is changed, the addition of the html label to the DOM takes time and there is no triggered event that tells me when the document update is complete. Therefore I must use setTimeout() and wait for some milliseconds before calling the function that updates the sizes of the nodes. This is quite risky, because for some platforms the update time is long (mobile phones for example). On the other hand, having a too long timeout makes the UI quite impractical to use. I also tried to add a script tag to the html label, to trigger a function as soon as the element is added to the DOM, but then the parsing of the label fails for some reason.

So here is my feature request: would it be possible to automatically update the size of the node as a function of the size of its html label? Alternatively: would it be possible to specify a hook function in nodeHtmlLabel() parameters, that is triggered when the update of the DOM is complete?

Thank you

Cristian

[morficus]

@cversari can you share how are you calculating the node size based on the HTML label?

[cversari]

@morficus just wrap the label content in a <div>, then use getBoundingClientRect to compute the size of the node.

[klysak]

Hello, first of all, thank you for this extension which I find extremely useful.

I am currently using the html label to display html content inside a node, by placing the label in the center of the node and resizing dynamically the node as a function of the size of the label (which may change over time during the lifetime of the node).

However I cannot do it in a clean way, because when the content of the label is changed, the addition of the html label to the DOM takes time and there is no triggered event that tells me when the document update is complete. Therefore I must use setTimeout() and wait for some milliseconds before calling the function that updates the sizes of the nodes. This is quite risky, because for some platforms the update time is long (mobile phones for example). On the other hand, having a too long timeout makes the UI quite impractical to use. I also tried to add a script tag to the html label, to trigger a function as soon as the element is added to the DOM, but then the parsing of the label fails for some reason.

So here is my feature request: would it be possible to automatically update the size of the node as a function of the size of its html label? Alternatively: would it be possible to specify a hook function in nodeHtmlLabel() parameters, that is triggered when the update of the DOM is complete?

Thank you

Cristian

Hello Cristian!

Did you manage to solve your problem?

[Mote-Z]

I can now update the node size by simply adding a return in addOrUpdateElem function

   addOrUpdateElem(id: string, param: CytoscapeNodeHtmlParams, payload: { data?: any, position?: ICytoscapeNodeHtmlPosition } = {}) {
      let cur = this._elements[id];
      console.log(cur)
      if (cur) {
        cur.updateParams(param);
        cur.updateData(payload.data);
        cur.updatePosition(payload.position);
        return null
      } else {
        let nodeElem = document.createElement("div");
        this._node.appendChild(nodeElem);

        this._elements[id] = new LabelElement({
          node: nodeElem,
          data: payload.data,
          position: payload.position
        }, param);
        return nodeElem
      }
    }

then update the node when creating the html label

    function createNodesCyHandler({cy}: ICyEventObject) {
      _params.forEach(x => {
        cy.elements(x.query).forEach((d: any) => {
          if (d.isNode()) {
            let htmlEle =_lc.addOrUpdateElem(d.id(), x, {
              position: getNodePosition(d),
              data: d.data()
            });
            console.log(htmlEle);
            console.log(htmlEle.clientHeight);
            d.style('height',htmlEle.clientHeight);
            d.style('width',htmlEle.clientWidth);
          }
        });
      });
    }

however , I encountered a new problem , when I click the link on the label , It actually click the node , I haven't found a solution yet