If quality is proof, mount () will not work #24
Description
export const layout = {
name: "fcose",
quality: "proof",
randomize: false,
animate: true
};With the above settings, the graph is not laid out correctly when mount() is used. It will only display a straight line graph.
As far as I've verified, quality=proof only works when the initial option is container.
Works pettern
app.tsx
import React, { useState, useEffect } from "react";
import cytoscape from "cytoscape";
import fcose from "cytoscape-fcose";
import { ThemeProvider } from "styled-components";
import { GlobalStyle, theme } from "@/themes/global-style";
import { CytoscapeComponent } from "@/components/cytoscape";
import { nodes, edges, style, layout } from "@/data";
export default function App() {
const options = {
container: document.getElementById("cy"),
elements: { nodes, edges },
style,
ready: function () {
this.layout(layout).run();
},
};
cytoscape.use(fcose);
const cy = cytoscape(options as any);
return (
<ThemeProvider theme={theme}>
<GlobalStyle />
</ThemeProvider>
);
}index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cytoscape</title>
</head>
<body>
<div id="app" style="width: 100vw; height: 100vh"></div>
<div id="cy" style="width: 100vw; height: 100vh"></div>
</body>
</html>Not works pettern
app.tsx
import React, { useState, useEffect } from "react";
import cytoscape from "cytoscape";
import fcose from "cytoscape-fcose";
import { ThemeProvider } from "styled-components";
import { GlobalStyle, theme } from "@/themes/global-style";
import { CytoscapeComponent } from "@/components/cytoscape";
import { nodes, edges, style, layout } from "@/data";
export default function App() {
const options = {
elements: { nodes, edges },
style,
};
cytoscape.use(fcose);
const cy = cytoscape(options as any);
return (
<ThemeProvider theme={theme}>
<GlobalStyle />
<CytoscapeComponent cy={cy} />
</ThemeProvider>
);
}cytoscape.tsx
import React, { useState, useEffect } from "react";
import styled from "styled-components";
import { layout, style } from "@/data";
const Root = styled.div`
width: 100vw;
height: 100vh;
background: ${(props) => props.theme.colors.background};
`;
export const CytoscapeComponent = ({ cy }) => {
useEffect(() => {
const container = document.getElementById("cy");
cy.mount(container);
cy.ready(function () {
this.layout(layout).run();
});
}, []);
return (
<>
<Root id="cy" />
</>
);
};index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cytoscape</title>
</head>
<body>
<div id="app" style="width: 100vw; height: 100vh"></div>
</body>
</html>Can you confirm this issue?