nodes collapse if rendered when tab not in focus

[royair]

Hi all! this weird thing happens: my nodes collapsed when rendered while chrome/Edge tab is not in focus.

see image here https://ibb.co/wcpnBsD

when tab is in focus - nodes are rendered correctly (distributed properly)

I've tried eliminating all surroundings, and ended up with only map component on screen, but it didn't help.

i'm using:

• react-diagrams: "6.1.1"
• dagre: "0.8.5"

attaching relevant code here (full components code is more the 700 lines...)

  useEffect(() => {
    // no need to init or update in case of 0 devices
    if (devices.length === 0) return;

    isInit ? updateModel() : initModel();
  }, [devices]);

  const initModel = () => {
    let model = engine.getModel();

    devices.forEach((device) => {
      const {deviceId, deviceType} = device;
      let node;
      let pipe;

      // abort node creation if not needed
      if (!needToCreateNode(device)) return;

      switch (deviceType) {
        case 'compressor':
          node = new CompressorNodeModel(device);
          break;

        case 'wetAirTank':
          node = new WetAirTankNodeModel(device);
          break;

        case 'desiccantAirDryer':
          node = new DesiccantAirDryerNodeModel(device);
          break;

        case 'refrigeratedAirDryer':
          node = new RefrigeratedAirDryerNodeModel(device);
          break;

        case 'flowAndPressureSensor':
          node = new FlowAndPressureSensorNodeModel(device);
          break;

        case 'dewpointSensor':
          node = new DewpointSensorNodeModel(device);
          break;

        case 'airFilter':
          node = new AirFilterNodeModel(device);
          break;

        case 'dryAirTank':
          node = new DryAirTankNodeModel(device);
          break;

        case 'powerSensor':
          break;

        case 'pressureSensor':
          node = new PressureSensorNodeModel(device);
          break;

        case 'flowSensor':
          node = new FlowSensorNodeModel(device);
          break;

        case 'productionFloor':
          node = new ProductionFloorNodeModel(device);
          break;

        case 'pipe':
          pipe = new PipeLinkModel(device);
          break;

        default:
          break;
      }

      if (node) nodes.set(deviceId, node);
      if (pipe) pipes.set(deviceId, pipe);
    });

    connectSourceLinks();
    connectTargetLinks();

    const createPipeProps = (pipe) => {
      const node = nodes.get(pipe.getEntity().toDevices[0]);
      if (node !== null && node.getEntity().deviceType === 'productionFloor') {
        pipe.color = '#727d8a';
      }
    };

    for (let node of nodes.values()) {
      node.setPosition(-10000, -10000);
      model.addNode(node);
    }

    for (let pipe of pipes.values()) {
      createPipeProps(pipe);
      model.addLink(pipe);
    }

    model.setLocked(true);
    engine.setModel(model);
    setIsInit(true);

    setTimeout(() => {
      dagerEngine.redistribute(model);
      engine.repaintCanvas();
    }, 500);
  };

*does not reproduce on firefox

[stanislav-grin]

Try to use Page Visibility API. Listen for visibility and when page is visible again, call redistribute

[royair]

Try to use Page Visibility API. Listen for visibility and when page is visible again, call redistribute

thanks @stanislav-grin , i'll try that! :)