Fix recursion problem

src/components/MetricTable.tsx

@@ -10,7 +10,6 @@ import { useState } from "react";
 const { SheetComponent } = await import("~/components/export/s2react");
 
 const preprocess = (partialMetric: PartialMetric) => {
-  console.log(partialMetric);
   const result = [];
   for (const { top, duplication, levels, fingering } of partialMetric.tiers!) {
     const tier = top === undefined ? "全部" : `前 ${top}`;

src/components/Node.tsx

@@ -36,6 +36,18 @@ const getNewId = (sources: Record<string, any>, type: "s" | "c") => {
   return `${type}${newId}`;
 };
 
+const sortObject = function <T>(unordered: Record<string, T>) {
+  return Object.keys(unordered)
+    .sort()
+    .reduce(
+      (obj, key) => {
+        obj[key] = unordered[key]!;
+        return obj;
+      },
+      {} as Record<string, T>,
+    );
+};
+
 type Creator = (etype?: "positive" | "negative") => MenuItemType;
 
 const ContextMenu = ({ id, children }: PropsWithChildren<{ id: string }>) => {
@@ -50,7 +62,7 @@ const ContextMenu = ({ id, children }: PropsWithChildren<{ id: string }>) => {
       onClick: () => {
         const newId = getNewId(sources, "s");
         const defaultSource: Source = { object: { type: "汉字" }, next: null };
-        const newSources = { ...sources, [newId]: defaultSource };
+        const newSources = sortObject({ ...sources, [newId]: defaultSource });
         const newConditions = { ...conditions };
         if (etype === undefined) {
           newSources[id] = { ...newSources[id]!, next: newId };
@@ -80,7 +92,10 @@ const ContextMenu = ({ id, children }: PropsWithChildren<{ id: string }>) => {
           positive: null,
           negative: null,
         };
-        const newConditions = { ...conditions, [newId]: defaultCondition };
+        const newConditions = sortObject({
+          ...conditions,
+          [newId]: defaultCondition,
+        });
         if (etype === undefined) {
           newSources[id] = { ...newSources[id]!, next: newId };
         } else {

src/components/SingleRules.tsx

@@ -77,16 +77,6 @@ function EncoderGraph({
   );
   const [selected, setSelected] = useState<string | undefined>(undefined);
 
-  const onConnect = (connection: Connection) => {
-    setEdges((eds) => addEdge({ ...connection, animated: true }, eds));
-    const [lnodes, ledges] = getLayoutedElements(nodes, edges);
-    setNodes([...lnodes]);
-    setEdges([...ledges]);
-    window.requestAnimationFrame(() => {
-      fitView();
-    });
-  };
-
   const onSelectionChange = useCallback(({ nodes }: { nodes: Node[] }) => {
     nodes[0] && setSelected(nodes[0].id);
   }, []);
@@ -140,7 +130,6 @@ function EncoderGraph({
             onNodesChange={onNodesChange}
             onEdgesChange={onEdgesChange}
             onSelectionChange={onSelectionChange}
-            onConnect={onConnect}
             onPaneClick={() => setSelected(undefined)}
             nodeDragThreshold={10000}
             fitView