Fix CoSE Layout

app/src/components/Graph.tsx

@@ -135,6 +135,11 @@ const Graph = memo(function Graph({ shouldResize }: { shouldResize: number }) {
 export default Graph;
 
 function handleDragFree() {
+ // If the layout is fcose, we don't want to freeze the layout
+ // because people may not expect that behavior / Subject to change!
+ const layout = useGraphStore.getState().layout;
+ if (layout.name === "fcose" || layout.name === "stress") return;
+
  const nodePositions = getNodePositionsFromCy();
  useDoc.setState(
  (state) => {
@@ -240,6 +245,10 @@ function initializeGraph({
  }
  );
 
+ cyCurrent.on("dragstart", "node", () => {
+ // stop the layout from running
+ window.__cy?.stop();
+ });
  cyCurrent.on("dragfree", handleDragFree);
 
  // on zoom
@@ -344,9 +353,6 @@ function getGraphUpdater({
 
  elements = getElements(doc.text);
 
- // Test
- cyErrorCatcher.current.json({ elements, layout, style });
-
  // Very specific bug wrt to cose layouts
  // If it's the first render, randomize cannot be false
  // Because the graph has no positions yet
@@ -362,8 +368,20 @@ function getGraphUpdater({
  }
  }
 
+ // Stress layout, need to turn off interactive and animation on first render
  // @ts-ignore
- layout.animate = false;
+ if (layout.name === "elk" && layout.elk.algorithm === "stress") {
+ if (isFirstRender.current) {
+ // @ts-ignore
+ layout.elk.interactive = false;
+ // @ts-ignore
+ layout.animate = false;
+ // @ts-ignore
+ delete layout.animationDuration;
+ // @ts-ignore
+ delete layout.animationEasing;
+ }
+ }
 
  // Finally we get rid of layouts when user has dragged
  // Apply the preset layout if nodePositions is defined
@@ -376,6 +394,9 @@ function getGraphUpdater({
  delete layout.spacingFactor;
  }
 
+ // Test
+ cyErrorCatcher.current.json({ elements, layout, style });
+
  cyErrorCatcher.current.layout(layout);
 
  // Set up a listener to mark the graph as initialized after the first layout run

app/src/lib/templates/mindmap-dark-template.ts

@@ -38,7 +38,7 @@ export const theme: FFTheme = {
  targetArrowShape: "none",
  sourceDistanceFromNode: 5,
  targetDistanceFromNode: 5,
- edgeTextSize: 10,
+ edgeTextSize: 1,
  rotateEdgeLabel: false,
  direction: "DOWN",
  fixedHeight: 300,

app/src/lib/templates/network-diagram-dark-template.ts

@@ -48,7 +48,7 @@ export const theme: FFTheme = {
  sourceDistanceFromNode: 0,
  targetDistanceFromNode: 6,
  arrowScale: 0.8,
- edgeTextSize: 10,
+ edgeTextSize: 1,
  rotateEdgeLabel: false,
  fixedHeight: 100,
 };

app/src/lib/templates/pert-light-template.ts

@@ -42,7 +42,7 @@ export const theme: FFTheme = {
  sourceDistanceFromNode: 5,
  targetDistanceFromNode: 5,
  arrowScale: 1,
- edgeTextSize: 10,
+ edgeTextSize: 1,
  rotateEdgeLabel: true,
 };
 

app/src/lib/toTheme.ts

@@ -27,8 +27,25 @@ export function toTheme(theme: FFTheme) {
  // Tree is actually called mr-tree
  algorithm: theme.layoutName,
  };
+
+ if (theme.layoutName === "stress") {
+ // @ts-ignore
+ layout.elk.interactive = true;
+ // @ts-ignore
+ layout.animate = true;
+ // @ts-ignore
+ layout.animationDuration = 150;
+ // @ts-ignore
+ layout.animationEasing = "ease-in-out";
+ }
  } else if (theme.layoutName === "cose") {
  layout.name = "fcose";
+ // @ts-ignore
+ layout.animate = true;
+ // @ts-ignore
+ layout.animationDuration = 150;
+ // @ts-ignore
+ layout.animationEasing = "ease-in-out";
  } else {
  layout.name = theme.layoutName;
  }
@@ -207,7 +224,7 @@ export function toTheme(theme: FFTheme) {
  }
 
  return {
- layout,
+ layout: layout as cytoscape.LayoutOptions,
  style: preStyle.join("\n"),
  postStyle,
  };