Merge pull request #696 from tone-row/dev

v1.53.0

api/package.json

@@ -23,7 +23,7 @@
  "axios": "^0.27.2",
  "csv-parse": "^5.3.6",
  "date-fns": "^2.29.3",
- "graph-selector": "^0.10.0",
+ "graph-selector": "^0.11.1",
  "highlight.js": "^11.8.0",
  "marked": "^4.1.1",
  "micro": "^10.0.1",

app/package.json

@@ -1,6 +1,6 @@
 {
  "name": "app",
- "version": "1.52.0",
+ "version": "1.53.0",
  "main": "module/module.js",
  "license": "MIT",
  "scripts": {
@@ -80,7 +80,7 @@
  "file-saver": "^2.0.5",
  "formulaic": "workspace:*",
  "framer-motion": "^10.13.1",
- "graph-selector": "^0.10.0",
+ "graph-selector": "^0.11.1",
  "gray-matter": "^4.0.2",
  "highlight.js": "^11.7.0",
  "immer": "^9.0.16",
@@ -98,7 +98,7 @@
  "papaparse": "^5.4.1",
  "phosphor-react": "^1.3.1",
  "postcss-flexbugs-fixes": "^5.0.2",
- "posthog-js": "^1.133.0",
+ "posthog-js": "^1.150.0",
  "prettier": "^2.3.1",
  "re-resizable": "^6.9.0",
  "react": "^18.2.0",

app/src/components/ConvertOnPasteOverlay.tsx

@@ -34,8 +34,6 @@ export function ConvertOnPasteOverlay() {
  }
  }, [userPasted]);
 
- const convertIsRunning = usePromptStore((s) => s.isRunning);
-
  // Qualities for displaying Convert to Flowchart button:
  // OR
  // Convert is currently running
@@ -47,8 +45,7 @@ export function ConvertOnPasteOverlay() {
  // Full text is selected and is more than 150 characters
  // Less than 15 seconds have passed since user pasted more than 150 characters
  const showConvertToFlowchart =
- convertIsRunning ||
- (!isDefaultText && enoughCharacters && lastResult !== text && userPasted);
+ !isDefaultText && enoughCharacters && lastResult !== text && userPasted;
 
  if (showConvertToFlowchart) return <Overlay />;
 

app/src/components/GraphFloatingMenu.tsx

@@ -1,12 +1,19 @@
 import { t } from "@lingui/macro";
-import { ArrowsClockwise, MagnifyingGlass, Minus, Plus } from "phosphor-react";
+import {
+ ArrowsClockwise,
+ MagnifyingGlass,
+ Minus,
+ Plus,
+ AlignCenterVertical,
+} from "phosphor-react";
 import { useCallback } from "react";
 import { FaRegSnowflake } from "react-icons/fa";
 
 import { lockZoomToGraph, useGraphStore } from "../lib/useGraphStore";
 import { unfreezeDoc, useIsFrozen } from "../lib/useIsFrozen";
 import { resetGraph } from "../lib/useUnmountStore";
 import { IconButton2, IconToggleButton, Tooltip2 } from "../ui/Shared";
+import { alignNodes } from "../lib/alignNodes";
 
 const ZOOM_STEP = 0.5;
 
@@ -93,6 +100,18 @@ export function GraphFloatingMenu() {
  <FaRegSnowflake size={16} />
  </IconToggleButton>
  </Tooltip2>
+ <Tooltip2 content={t`Align Nodes`}>
+ <IconButton2
+ size="xs"
+ onClick={alignNodes}
+ aria-label={t`Align Nodes`}
+ data-testid="Align Nodes"
+ data-session-activity="align-nodes"
+ disabled={!isFrozen}
+ >
+ <AlignCenterVertical size={16} />
+ </IconButton2>
+ </Tooltip2>
  </div>
  );
 }

app/src/components/TextEditor.tsx

@@ -104,6 +104,7 @@ export function TextEditor({
  editor.onDidPaste((e) => {
  // get the text in the range
  const text = editor.getModel()?.getValueInRange(e.range);
+
  if (text) {
  // store it in the editor
  useEditorStore.setState({ userPasted: text });

app/src/components/getNodePositionsFromCy.tsx

@@ -1,6 +1,8 @@
 import { cytoscape } from "../lib/cytoscape";
 
-export function getNodePositionsFromCy() {
+export type NodePositions = Record<string, cytoscape.Position>;
+
+export function getNodePositionsFromCy(): NodePositions {
  if (!window.__cy) return {};
  const nodes = (window.__cy.json() as any).elements
  .nodes as cytoscape.ElementDefinition[];

app/src/lib/alignNodes.ts

@@ -0,0 +1,59 @@
+import { NodePositions } from "../components/getNodePositionsFromCy";
+import { useDoc } from "./useDoc";
+
+/**
+ * This function tries to align nodes vertical and horiontal on their center
+ * axis by iterating over all the nodes, finding their centers, looking for other
+ * nodes that are close to them, and then moving them to the center of the
+ * closest node.
+ */
+export function alignNodes() {
+ const meta = useDoc.getState().meta;
+ const nodePositions = meta.nodePositions as NodePositions;
+ if (!nodePositions) return;
+
+ const threshold = 20; // Adjust this value to change the alignment sensitivity
+ const alignedPositions: NodePositions = {};
+
+ // Iterate through all nodes
+ Object.entries(nodePositions).forEach(([nodeId, position]) => {
+ let closestHorizontal: cytoscape.Position | null = null;
+ let closestVertical: cytoscape.Position | null = null;
+ let minHorizontalDiff = Infinity;
+ let minVerticalDiff = Infinity;
+
+ // Compare with other nodes
+ for (const [otherNodeId, otherPosition] of Object.entries(nodePositions)) {
+ if (nodeId !== otherNodeId) {
+ const horizontalDiff = Math.abs(position.x - otherPosition.x);
+ const verticalDiff = Math.abs(position.y - otherPosition.y);
+
+ // Check for horizontal alignment
+ if (horizontalDiff < threshold && horizontalDiff < minHorizontalDiff) {
+ closestHorizontal = otherPosition;
+ minHorizontalDiff = horizontalDiff;
+ }
+
+ // Check for vertical alignment
+ if (verticalDiff < threshold && verticalDiff < minVerticalDiff) {
+ closestVertical = otherPosition;
+ minVerticalDiff = verticalDiff;
+ }
+ }
+ }
+
+ // Align the node
+ alignedPositions[nodeId] = {
+ x: closestHorizontal ? closestHorizontal.x : position.x,
+ y: closestVertical ? closestVertical.y : position.y,
+ };
+ });
+
+ // Update the node positions in the document state
+ useDoc.setState((state) => ({
+ meta: {
+ ...state.meta,
+ nodePositions: alignedPositions,
+ },
+ }));
+}

app/src/lib/getDefaultText.ts

@@ -2,16 +2,16 @@ import { t } from "@lingui/macro";
 
 export function getDefaultText() {
  return `${t`Welcome to Flowchart Fun!`}
- ${t`Get Started`}: ${t`Modify the text to see it transform into a flowchart on the right.`}
- ${t`Understanding Syntax`} .shape_circle.color_orange
+ ${t`Start`}: ${t`Modify text to see it transform into a flowchart on the right.`}
+ ${t`Understand Syntax`} .shape_circle
  ${t`Begin Typing`}: ${t`Start with a label or decision.`}
- ${t`Decisions`}: ${t`Use colons, like "Explore options:".`}
- ${t`Indent for steps`}: ${t`Show progression or dependency.`}
- ${t`Customize`}: ${t`Add classes to alter color and shape`} \\(.color_blue)
- ${t`Right-click on nodes to see more options.`}
+ ${t`Decisions`}: ${t`Use colons like "Decisions:".`}
+ ${t`Indent for Steps`}: ${t`Indicate progression or dependency.`}
+ ${t`Customize`}: ${t`Add classes to change color and shape`} \\(.color_red)
+ ${t`Right-click nodes for more options.`}
  ${t`Use AI`} .color_green
- ${t`Paste a document or outline to auto-convert into a flowchart.`}
+ ${t`Paste a document to convert it into a flowchart.`}
  ${t`Share Your Work`} .color_blue
- ${t`Download or convert your flowchart via the 'Share' button.`}
+ ${t`Download or share your flowchart using the 'Share' button.`}
 `;
 }

app/src/lib/writeEditorText.ts

@@ -3,14 +3,14 @@ import { useDoc } from "./useDoc";
 
 /**
  * This function takes a reference to the editor and a string and a speed
- * and animates the text being written to the editor one character at a time.
+ * and animates the text being written to the editor one line at a time.
  * It now checks for a query parameter to skip animation for e2e tests.
  */
 export function writeEditorText(
  interval: NodeJS.Timeout | null,
  editor: editor.IStandaloneCodeEditor,
  text: string,
- speed: number = 30
+ speed: number = 1500 / 10
 ) {
  // Check for e2e test query parameter
  const urlParams = new URLSearchParams(window.location.search);
@@ -27,23 +27,17 @@ export function writeEditorText(
  if (interval) clearInterval(interval);
  });
 
+ let lines = text.split("\n");
  let index = 0;
  interval = setInterval(() => {
- if (index < text.length) {
- // Find the next non-whitespace character
- let nextIndex = index;
- while (nextIndex < text.length && /\s/.test(text[nextIndex])) {
- nextIndex++;
- }
- nextIndex++; // Include the non-whitespace character
-
+ if (index < lines.length) {
  editor.executeEdits("", [
  {
  range: editor.getModel()!.getFullModelRange(),
- text: text.substring(0, nextIndex),
+ text: lines.slice(0, index + 1).join("\n"),
  },
  ]);
- index = nextIndex;
+ index++;
  } else {
  if (interval) clearInterval(interval);
  }