Arrows Not Re-Rendering Correctly on Transform

[dooleyb1]

Hi there,

First of all thanks to @pierpo for the great library, everything has been extremely easy to integrate and use and has been super useful so far.

The issue I am having at the moment is when trying to programatically control the zoom of my ArcherContainer using a transform(zoom) CSS method the arrows are not being re-rendered correctly. Everything else within the container scales as desired however the arrows now no longer point to the desired target as well as they previously did.

I have put together a simple CodeSandbox demonstrating this here:

https://codesandbox.io/s/quirky-minsky-5ou2h?file=/src/App.js

Similarly, I have attempted to use a ref and the ref.current.refreshScreen() method which is exposed which also did not work for me.

Many thanks for any help! 😄

The sample source code is as follows:

import React, { useState, useEffect, useRef } from "react";
import "./styles.css";

import { ArcherContainer, ArcherElement } from "react-archer";
const rootStyle = { display: "flex", justifyContent: "center" };
const rowStyle = {
  margin: "200px 0",
  display: "flex",
  justifyContent: "space-between"
};
const boxStyle = { padding: "10px", border: "1px solid black" };

const App = () => {
  const [zoom, setZoom] = useState(1.0);

  let archerContainerRef = useRef(null);

  function _incrementZoom() {
    setZoom(prevState => {
      return (prevState += 0.1);
    });

    archerContainerRef.current.refreshScreen();
  }

  function _decrementZoom() {
    setZoom(prevState => {
      return (prevState -= 0.1);
    });

    archerContainerRef.current.refreshScreen();
  }

  return (
    <div>
      <div style={{ marginBottom: 10 }}>Current Zoom: {zoom}</div>
      <div
        style={{ backgroundColor: "green", width: 180, marginBottom: 10 }}
        onClick={() => _incrementZoom()}
      >
        Increment Zoom (+)
      </div>
      <div
        style={{ backgroundColor: "red", width: 180, marginBottom: 10 }}
        onClick={() => _decrementZoom()}
      >
        Decrement Zoom (-)
      </div>
      <ArcherContainer
        strokeColor="red"
        ref={archerContainerRef}
        style={{ transform: `scale(${zoom})` }}
      >
        <div style={rootStyle}>
          <ArcherElement
            id="root"
            relations={[
              {
                targetId: "element2",
                targetAnchor: "top",
                sourceAnchor: "bottom"
              }
            ]}
          >
            <div style={boxStyle}>Root</div>
          </ArcherElement>
        </div>

        <div style={rowStyle}>
          <ArcherElement
            id="element2"
            relations={[
              {
                targetId: "element3",
                targetAnchor: "left",
                sourceAnchor: "right",
                style: { strokeColor: "blue", strokeWidth: 1 },
                label: <div style={{ marginTop: "-20px" }}>Arrow 2</div>
              }
            ]}
          >
            <div style={boxStyle}>Element 2</div>
          </ArcherElement>

          <ArcherElement id="element3">
            <div style={boxStyle}>Element 3</div>
          </ArcherElement>

          <ArcherElement
            id="element4"
            relations={[
              {
                targetId: "root",
                targetAnchor: "right",
                sourceAnchor: "left",
                label: "Arrow 3"
              }
            ]}
          >
            <div style={boxStyle}>Element 4</div>
          </ArcherElement>
        </div>
      </ArcherContainer>
    </div>
  );
};

export default App;

[pierpo]

Hi @dooleyb1 !

Many thanks for the reproducible example! This is super helpful 😊

This might be a duplicate of #57

I'll keep this issue open and look into your example individually.
I have no clue why it doesn't work for now...

Can't give you an ETA for the solution, sorry about that 😞

[endlesstravel]

setTimeout is work for me in useEffect

    useEffect(() => {
        setTimeout(()=>archerContainerRef.current?.refreshScreen(), 10); // refresh in timer
    }, [...deps ]);

[pierpo]

Mmmmh, glad to hear that it works... But that's kind of a hack. I guess something's wrong with the lib 🤔
Thank you for the tip, though!

Fixing this hack might take a deep investigation, so I'm not planning on doing it soon. My long-term plan would be to re-write everything in a more modern way (using hooks etc.), and re-think the core of the lib. That would maybe fix it.

I'll wait for @dooleyb1 's feedback to know if the issue is solved!