@transitrix/diagrams 1.0.0 → 1.1.0

package/src/fgca/nodes/FGCAChangeNode.tsx

@@ -1,64 +1,64 @@
-import React, { memo } from "react";
-import { Handle, Position } from "reactflow";
-
-const NODE_WIDTH = 250;
-const NODE_HEIGHT = 80;
-
-export interface FGCAChangeNodeProps {
-  data: {
-    id: number;
-    name: string;
-    borderColor?: string;
-    borderWidth?: number;
-  };
-  isConnectable?: boolean;
-}
-
-const FGCAChangeNode = memo(({ data, isConnectable }: FGCAChangeNodeProps) => (
-  <div
-    style={{
-      background: "var(--ts-layer-change)",
-      width: NODE_WIDTH,
-      height: NODE_HEIGHT,
-      padding: "6px 8px",
-      fontSize: "12px",
-      borderColor: data.borderColor ?? "var(--ts-node-stroke)",
-      borderWidth: data.borderWidth ?? 1,
-      borderStyle: "solid",
-      borderRadius: "0.75rem",
-      boxShadow: "0 1px 4px rgba(0,0,0,0.12)",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
-      textAlign: "center",
-      color: "var(--ts-text-primary)",
-    }}
-  >
-    <Handle type="target" position={Position.Left} isConnectable={isConnectable} style={{ background: "var(--ts-node-stroke)" }} />
-    <Handle type="source" position={Position.Right} isConnectable={false} style={{ background: "var(--ts-node-stroke)" }} />
-    <div
-      style={{
-        fontWeight: 600,
-        lineHeight: 1.2,
-        overflow: "hidden",
-        display: "-webkit-box",
-        WebkitLineClamp: 2,
-        WebkitBoxOrient: "vertical",
-        wordBreak: "break-word",
-        padding: "0 4px",
-        width: "100%",
-      }}
-      title={data.name}
-    >
-      {data.name}
-    </div>
-    <div style={{ fontSize: "10px", color: "var(--ts-text-secondary)", marginTop: 2 }}>
-      C-{String(data.id).padStart(3, "0")}
-    </div>
-  </div>
-));
-
-FGCAChangeNode.displayName = "FGCAChangeNode";
-
-export default FGCAChangeNode;
+import React, { memo } from "react";
+import { Handle, Position } from "reactflow";
+
+const NODE_WIDTH = 250;
+const NODE_HEIGHT = 80;
+
+export interface FGCAChangeNodeProps {
+  data: {
+    id: number;
+    name: string;
+    borderColor?: string;
+    borderWidth?: number;
+  };
+  isConnectable?: boolean;
+}
+
+const FGCAChangeNode = memo(({ data, isConnectable }: FGCAChangeNodeProps) => (
+  <div
+    style={{
+      background: "var(--ts-layer-change)",
+      width: NODE_WIDTH,
+      height: NODE_HEIGHT,
+      padding: "6px 8px",
+      fontSize: "12px",
+      borderColor: data.borderColor ?? "var(--ts-node-stroke)",
+      borderWidth: data.borderWidth ?? 1,
+      borderStyle: "solid",
+      borderRadius: "0.75rem",
+      boxShadow: "0 1px 4px rgba(0,0,0,0.12)",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      textAlign: "center",
+      color: "var(--ts-text-primary)",
+    }}
+  >
+    <Handle type="target" position={Position.Left} isConnectable={isConnectable} style={{ background: "var(--ts-node-stroke)" }} />
+    <Handle type="source" position={Position.Right} isConnectable={false} style={{ background: "var(--ts-node-stroke)" }} />
+    <div
+      style={{
+        fontWeight: 600,
+        lineHeight: 1.2,
+        overflow: "hidden",
+        display: "-webkit-box",
+        WebkitLineClamp: 2,
+        WebkitBoxOrient: "vertical",
+        wordBreak: "break-word",
+        padding: "0 4px",
+        width: "100%",
+      }}
+      title={data.name}
+    >
+      {data.name}
+    </div>
+    <div style={{ fontSize: "10px", color: "var(--ts-text-secondary)", marginTop: 2 }}>
+      C-{String(data.id).padStart(3, "0")}
+    </div>
+  </div>
+));
+
+FGCAChangeNode.displayName = "FGCAChangeNode";
+
+export default FGCAChangeNode;

package/src/fgca/nodes/FGCAFactorNode.tsx

@@ -1,64 +1,64 @@
-import React, { memo } from "react";
-import { Handle, Position } from "reactflow";
-
-const NODE_WIDTH = 250;
-const NODE_HEIGHT = 80;
-
-export interface FGCAFactorNodeProps {
-  data: {
-    id: number;
-    name: string;
-    borderColor?: string;
-    borderWidth?: number;
-  };
-  isConnectable?: boolean;
-}
-
-const FGCAFactorNode = memo(({ data, isConnectable }: FGCAFactorNodeProps) => (
-  <div
-    style={{
-      background: "var(--ts-layer-factor)",
-      width: NODE_WIDTH,
-      height: NODE_HEIGHT,
-      padding: "6px 8px",
-      fontSize: "12px",
-      borderColor: data.borderColor ?? "var(--ts-node-stroke)",
-      borderWidth: data.borderWidth ?? 1,
-      borderStyle: "solid",
-      borderRadius: "0.75rem",
-      boxShadow: "0 1px 4px rgba(0,0,0,0.12)",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
-      textAlign: "center",
-      color: "var(--ts-text-primary)",
-    }}
-  >
-    <Handle type="target" position={Position.Left} isConnectable={false} style={{ background: "var(--ts-node-stroke)" }} />
-    <Handle type="source" position={Position.Right} isConnectable={isConnectable} style={{ background: "var(--ts-node-stroke)" }} />
-    <div
-      style={{
-        fontWeight: 600,
-        lineHeight: 1.2,
-        overflow: "hidden",
-        display: "-webkit-box",
-        WebkitLineClamp: 2,
-        WebkitBoxOrient: "vertical",
-        wordBreak: "break-word",
-        padding: "0 4px",
-        width: "100%",
-      }}
-      title={data.name}
-    >
-      {data.name}
-    </div>
-    <div style={{ fontSize: "10px", color: "var(--ts-text-secondary)", marginTop: 2 }}>
-      F-{String(data.id).padStart(4, "0")}
-    </div>
-  </div>
-));
-
-FGCAFactorNode.displayName = "FGCAFactorNode";
-
-export default FGCAFactorNode;
+import React, { memo } from "react";
+import { Handle, Position } from "reactflow";
+
+const NODE_WIDTH = 250;
+const NODE_HEIGHT = 80;
+
+export interface FGCADriverNodeProps {
+  data: {
+    id: number;
+    name: string;
+    borderColor?: string;
+    borderWidth?: number;
+  };
+  isConnectable?: boolean;
+}
+
+const FGCADriverNode = memo(({ data, isConnectable }: FGCADriverNodeProps) => (
+  <div
+    style={{
+      background: "var(--ts-layer-driver)",
+      width: NODE_WIDTH,
+      height: NODE_HEIGHT,
+      padding: "6px 8px",
+      fontSize: "12px",
+      borderColor: data.borderColor ?? "var(--ts-node-stroke)",
+      borderWidth: data.borderWidth ?? 1,
+      borderStyle: "solid",
+      borderRadius: "0.75rem",
+      boxShadow: "0 1px 4px rgba(0,0,0,0.12)",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      textAlign: "center",
+      color: "var(--ts-text-primary)",
+    }}
+  >
+    <Handle type="target" position={Position.Left} isConnectable={false} style={{ background: "var(--ts-node-stroke)" }} />
+    <Handle type="source" position={Position.Right} isConnectable={isConnectable} style={{ background: "var(--ts-node-stroke)" }} />
+    <div
+      style={{
+        fontWeight: 600,
+        lineHeight: 1.2,
+        overflow: "hidden",
+        display: "-webkit-box",
+        WebkitLineClamp: 2,
+        WebkitBoxOrient: "vertical",
+        wordBreak: "break-word",
+        padding: "0 4px",
+        width: "100%",
+      }}
+      title={data.name}
+    >
+      {data.name}
+    </div>
+    <div style={{ fontSize: "10px", color: "var(--ts-text-secondary)", marginTop: 2 }}>
+      D-{String(data.id).padStart(4, "0")}
+    </div>
+  </div>
+));
+
+FGCADriverNode.displayName = "FGCADriverNode";
+
+export default FGCADriverNode;

package/src/fgca/nodes/FGCAGoalNode.tsx

@@ -1,72 +1,72 @@
-import React, { memo } from "react";
-import { Handle, Position } from "reactflow";
-
-const NODE_WIDTH = 250;
-const NODE_HEIGHT = 80;
-const DEFAULT_BG = "var(--ts-layer-goal)";
-
-export interface FGCAGoalNodeProps {
-  data: {
-    id: number;
-    name: string;
-    level?: number;
-    bgColor?: string;
-    borderColor?: string;
-    borderWidth?: number;
-  };
-  isConnectable?: boolean;
-}
-
-const FGCAGoalNode = memo(({ data, isConnectable }: FGCAGoalNodeProps) => {
-  const level = data.level ?? 0;
-  const bg = data.bgColor ?? DEFAULT_BG;
-
-  return (
-    <div
-      style={{
-        background: bg,
-        width: NODE_WIDTH,
-        height: NODE_HEIGHT,
-        padding: "6px 8px",
-        fontSize: "12px",
-        borderColor: data.borderColor ?? "var(--ts-node-stroke)",
-        borderWidth: data.borderWidth ?? 1,
-        borderStyle: "solid",
-        borderRadius: "0.75rem",
-        boxShadow: "0 1px 4px rgba(0,0,0,0.12)",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        textAlign: "center",
-        color: "var(--ts-text-primary)",
-      }}
-    >
-      <Handle type="target" position={Position.Left} isConnectable={false} style={{ background: "var(--ts-node-stroke)" }} />
-      <Handle type="source" position={Position.Right} isConnectable={isConnectable} style={{ background: "var(--ts-node-stroke)" }} />
-      <div
-        style={{
-          fontWeight: 600,
-          lineHeight: 1.2,
-          overflow: "hidden",
-          display: "-webkit-box",
-          WebkitLineClamp: 2,
-          WebkitBoxOrient: "vertical",
-          wordBreak: "break-word",
-          padding: "0 4px",
-          width: "100%",
-        }}
-        title={data.name}
-      >
-        {data.name}
-      </div>
-      <div style={{ fontSize: "10px", color: "var(--ts-text-secondary)", marginTop: 2 }}>
-        G-{String(data.id).padStart(4, "0")} | Lvl: {level}
-      </div>
-    </div>
-  );
-});
-
-FGCAGoalNode.displayName = "FGCAGoalNode";
-
-export default FGCAGoalNode;
+import React, { memo } from "react";
+import { Handle, Position } from "reactflow";
+
+const NODE_WIDTH = 250;
+const NODE_HEIGHT = 80;
+const DEFAULT_BG = "var(--ts-layer-goal)";
+
+export interface FGCAGoalNodeProps {
+  data: {
+    id: number;
+    name: string;
+    level?: number;
+    bgColor?: string;
+    borderColor?: string;
+    borderWidth?: number;
+  };
+  isConnectable?: boolean;
+}
+
+const FGCAGoalNode = memo(({ data, isConnectable }: FGCAGoalNodeProps) => {
+  const level = data.level ?? 0;
+  const bg = data.bgColor ?? DEFAULT_BG;
+
+  return (
+    <div
+      style={{
+        background: bg,
+        width: NODE_WIDTH,
+        height: NODE_HEIGHT,
+        padding: "6px 8px",
+        fontSize: "12px",
+        borderColor: data.borderColor ?? "var(--ts-node-stroke)",
+        borderWidth: data.borderWidth ?? 1,
+        borderStyle: "solid",
+        borderRadius: "0.75rem",
+        boxShadow: "0 1px 4px rgba(0,0,0,0.12)",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        textAlign: "center",
+        color: "var(--ts-text-primary)",
+      }}
+    >
+      <Handle type="target" position={Position.Left} isConnectable={false} style={{ background: "var(--ts-node-stroke)" }} />
+      <Handle type="source" position={Position.Right} isConnectable={isConnectable} style={{ background: "var(--ts-node-stroke)" }} />
+      <div
+        style={{
+          fontWeight: 600,
+          lineHeight: 1.2,
+          overflow: "hidden",
+          display: "-webkit-box",
+          WebkitLineClamp: 2,
+          WebkitBoxOrient: "vertical",
+          wordBreak: "break-word",
+          padding: "0 4px",
+          width: "100%",
+        }}
+        title={data.name}
+      >
+        {data.name}
+      </div>
+      <div style={{ fontSize: "10px", color: "var(--ts-text-secondary)", marginTop: 2 }}>
+        G-{String(data.id).padStart(4, "0")} | Lvl: {level}
+      </div>
+    </div>
+  );
+});
+
+FGCAGoalNode.displayName = "FGCAGoalNode";
+
+export default FGCAGoalNode;