react-archer icon indicating copy to clipboard operation
react-archer copied to clipboard

`endShape` prop does not work properly `ArcherContainer`

Open pierpo opened this issue 3 years ago • 0 comments

The following code gives this

image

If we remove endShape=..., it gives this result instead:

image

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { ArcherContainer, ArcherElement } from "react-archer";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <ArcherContainer
          strokeColor="yellow"
          endShape={{ circle: { radius: 2 } }}
        >
          <div style={{ display: "flex" }}>
            <ArcherElement id="first">
              <div>first</div>
            </ArcherElement>
            <ArcherElement
              id="second"
              relations={[
                {
                  targetId: "first",
                  targetAnchor: "right",
                  sourceAnchor: "left"
                }
              ]}
            >
              <div style={{ marginLeft: 100 }}>second</div>
            </ArcherElement>
          </div>
        </ArcherContainer>
      </header>
    </div>
  );
}

export default App;

pierpo avatar Mar 30 '22 14:03 pierpo