1661 lines
74 KiB
TypeScript
1661 lines
74 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useCallback } from "react";
|
|
import {
|
|
ReactFlow,
|
|
Controls,
|
|
Background,
|
|
BackgroundVariant,
|
|
Node,
|
|
Edge,
|
|
useNodesState,
|
|
useEdgesState,
|
|
MarkerType,
|
|
useReactFlow,
|
|
ReactFlowProvider,
|
|
} from "@xyflow/react";
|
|
import "@xyflow/react/dist/style.css";
|
|
|
|
import { ScreenDefinition } from "@/types/screen";
|
|
import { ScreenNode, TableNode, ScreenNodeData, TableNodeData, ReferenceInfo } from "./ScreenNode";
|
|
import {
|
|
getFieldJoins,
|
|
getDataFlows,
|
|
getTableRelations,
|
|
getMultipleScreenLayoutSummary,
|
|
getScreenGroup,
|
|
getScreenSubTables,
|
|
ScreenLayoutSummary,
|
|
ScreenSubTablesData,
|
|
SubTableInfo,
|
|
inferVisualRelationType,
|
|
VisualRelationType,
|
|
} from "@/lib/api/screenGroup";
|
|
import { getTableColumns, ColumnTypeInfo } from "@/lib/api/tableManagement";
|
|
|
|
// 관계 유형별 색상 정의
|
|
const RELATION_COLORS: Record<VisualRelationType, { stroke: string; strokeLight: string; label: string }> = {
|
|
filter: { stroke: '#8b5cf6', strokeLight: '#c4b5fd', label: '마스터-디테일' }, // 보라색
|
|
hierarchy: { stroke: '#06b6d4', strokeLight: '#a5f3fc', label: '계층 구조' }, // 시안색
|
|
lookup: { stroke: '#f59e0b', strokeLight: '#fcd34d', label: '코드 참조' }, // 주황색 (기존)
|
|
mapping: { stroke: '#10b981', strokeLight: '#6ee7b7', label: '데이터 매핑' }, // 녹색
|
|
join: { stroke: '#ea580c', strokeLight: '#fdba74', label: '엔티티 조인' }, // 주황색 (진한)
|
|
};
|
|
|
|
// 노드 타입 등록
|
|
const nodeTypes = {
|
|
screenNode: ScreenNode,
|
|
tableNode: TableNode,
|
|
};
|
|
|
|
// 레이아웃 상수
|
|
const SCREEN_Y = 50; // 화면 노드 Y 위치 (상단)
|
|
const TABLE_Y = 420; // 메인 테이블 노드 Y 위치 (중단)
|
|
const SUB_TABLE_Y = 690; // 서브 테이블 노드 Y 위치 (하단) - 메인과 270px 간격
|
|
const NODE_WIDTH = 260; // 노드 너비
|
|
const NODE_GAP = 40; // 노드 간격
|
|
|
|
interface ScreenRelationFlowProps {
|
|
screen: ScreenDefinition | null;
|
|
selectedGroup?: { id: number; name: string } | null;
|
|
initialFocusedScreenId?: number | null;
|
|
}
|
|
|
|
// 노드 타입 (Record<string, unknown> 확장)
|
|
type ScreenNodeType = Node<ScreenNodeData & Record<string, unknown>>;
|
|
type TableNodeType = Node<TableNodeData & Record<string, unknown>>;
|
|
type AllNodeType = ScreenNodeType | TableNodeType;
|
|
|
|
// 내부 컴포넌트 (useReactFlow 사용 가능)
|
|
function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId }: ScreenRelationFlowProps) {
|
|
const [nodes, setNodes, onNodesChange] = useNodesState<AllNodeType>([]);
|
|
const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [tableColumns, setTableColumns] = useState<Record<string, ColumnTypeInfo[]>>({});
|
|
|
|
// ReactFlow 인스턴스 (fitView 제어용)
|
|
const reactFlowInstance = useReactFlow();
|
|
|
|
// 데이터 로드 버전 (초기 로드 시에만 fitView 호출)
|
|
const [dataLoadVersion, setDataLoadVersion] = useState(0);
|
|
|
|
// 뷰 준비 상태 (fitView 완료 후 true로 설정하여 깜빡임 방지)
|
|
const [isViewReady, setIsViewReady] = useState(false);
|
|
|
|
|
|
// 그룹 내 포커스된 화면 ID (그룹 모드에서만 사용)
|
|
const [focusedScreenId, setFocusedScreenId] = useState<number | null>(null);
|
|
|
|
// 그룹 또는 화면이 변경될 때 포커스 초기화
|
|
useEffect(() => {
|
|
setFocusedScreenId(null);
|
|
}, [selectedGroup?.id, screen?.screenId]);
|
|
|
|
// 외부에서 전달된 초기 포커스 ID 적용 (화면 이동 없이 강조만)
|
|
useEffect(() => {
|
|
if (initialFocusedScreenId !== undefined) {
|
|
setFocusedScreenId(initialFocusedScreenId);
|
|
}
|
|
}, [initialFocusedScreenId]);
|
|
|
|
// 화면 ID와 테이블명 매핑 (포커스 시 연결선 강조용)
|
|
const [screenTableMap, setScreenTableMap] = useState<Record<number, string>>({});
|
|
|
|
// 화면 ID별 서브 테이블 매핑 (포커스 시 서브 테이블 연결선 강조용)
|
|
const [screenSubTableMap, setScreenSubTableMap] = useState<Record<number, string[]>>({});
|
|
|
|
// 서브 테이블 데이터 저장 (조인 컬럼 정보 포함)
|
|
const [subTablesDataMap, setSubTablesDataMap] = useState<Record<number, ScreenSubTablesData>>({});
|
|
|
|
// 화면별 사용 컬럼 매핑 (화면 ID -> 테이블명 -> 사용 컬럼들)
|
|
const [screenUsedColumnsMap, setScreenUsedColumnsMap] = useState<Record<number, Record<string, string[]>>>({});
|
|
|
|
// 테이블 컬럼 정보 로드
|
|
const loadTableColumns = useCallback(
|
|
async (tableName: string): Promise<ColumnTypeInfo[]> => {
|
|
if (!tableName) return [];
|
|
if (tableColumns[tableName]) return tableColumns[tableName];
|
|
|
|
try {
|
|
const response = await getTableColumns(tableName);
|
|
if (response.success && response.data && response.data.columns) {
|
|
const columns = response.data.columns;
|
|
setTableColumns((prev) => ({ ...prev, [tableName]: columns }));
|
|
return columns;
|
|
}
|
|
} catch (error) {
|
|
console.error(`테이블 ${tableName} 컬럼 로드 실패:`, error);
|
|
}
|
|
return [];
|
|
},
|
|
[tableColumns]
|
|
);
|
|
|
|
// 중복 useEffect 제거됨 (위에서 이미 선언)
|
|
|
|
// 데이터 로드 및 노드/엣지 생성
|
|
useEffect(() => {
|
|
// 그룹도 없고 화면도 없으면 빈 상태
|
|
if (!screen && !selectedGroup) {
|
|
setNodes([]);
|
|
setEdges([]);
|
|
return;
|
|
}
|
|
|
|
const loadRelations = async () => {
|
|
setLoading(true);
|
|
setIsViewReady(false); // 뷰 준비 상태 초기화
|
|
|
|
try {
|
|
let screenList: ScreenDefinition[] = [];
|
|
|
|
// ========== 그룹 선택 시: 그룹의 화면들 로드 ==========
|
|
if (selectedGroup) {
|
|
const groupRes = await getScreenGroup(selectedGroup.id);
|
|
if (groupRes.success && groupRes.data) {
|
|
const groupData = groupRes.data as any;
|
|
const groupScreens = groupData.screens || [];
|
|
|
|
// display_order 순으로 정렬
|
|
groupScreens.sort((a: any, b: any) => (a.display_order || 0) - (b.display_order || 0));
|
|
|
|
// screen_definitions 형식으로 변환 (table_name 포함)
|
|
screenList = groupScreens.map((gs: any) => ({
|
|
screenId: gs.screen_id,
|
|
screenName: gs.screen_name || `화면 ${gs.screen_id}`,
|
|
screenCode: gs.screen_code || "",
|
|
tableName: gs.table_name || "", // 테이블명 포함
|
|
companyCode: groupData.company_code,
|
|
isActive: "Y",
|
|
createdDate: new Date(),
|
|
updatedDate: new Date(),
|
|
screenRole: gs.screen_role, // screen_role 추가
|
|
displayOrder: gs.display_order, // display_order 추가
|
|
} as ScreenDefinition & { screenRole?: string; displayOrder?: number }));
|
|
}
|
|
} else if (screen) {
|
|
// 기존 방식: 선택된 화면 중심
|
|
screenList = [screen];
|
|
}
|
|
|
|
if (screenList.length === 0) {
|
|
setNodes([]);
|
|
setEdges([]);
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
// 화면-테이블 매핑 저장 (포커스 시 연결선 강조용)
|
|
const newScreenTableMap: Record<number, string> = {};
|
|
screenList.forEach((scr: any) => {
|
|
if (scr.tableName) {
|
|
newScreenTableMap[scr.screenId] = scr.tableName;
|
|
}
|
|
});
|
|
setScreenTableMap(newScreenTableMap);
|
|
|
|
// 관계 데이터 로드 (첫 번째 화면 기준)
|
|
const [joinsRes, flowsRes, relationsRes] = await Promise.all([
|
|
getFieldJoins(screenList[0].screenId).catch(() => ({ success: false, data: [] })),
|
|
getDataFlows().catch(() => ({ success: false, data: [] })),
|
|
getTableRelations({ screen_id: screenList[0].screenId }).catch(() => ({ success: false, data: [] })),
|
|
]);
|
|
|
|
const joins = joinsRes.success ? joinsRes.data || [] : [];
|
|
const flows = flowsRes.success ? flowsRes.data || [] : [];
|
|
const relations = relationsRes.success ? relationsRes.data || [] : [];
|
|
|
|
// 데이터 흐름에서 연결된 화면들 추가
|
|
flows.forEach((flow: any) => {
|
|
if (flow.source_screen_id === screen.screenId && flow.target_screen_id) {
|
|
const exists = screenList.some((s) => s.screenId === flow.target_screen_id);
|
|
if (!exists) {
|
|
screenList.push({
|
|
screenId: flow.target_screen_id,
|
|
screenName: flow.target_screen_name || `화면 ${flow.target_screen_id}`,
|
|
screenCode: "",
|
|
tableName: "",
|
|
companyCode: screen.companyCode,
|
|
isActive: "Y",
|
|
createdDate: new Date(),
|
|
updatedDate: new Date(),
|
|
} as ScreenDefinition);
|
|
}
|
|
}
|
|
});
|
|
|
|
// 화면 레이아웃 요약 정보 로드
|
|
const screenIds = screenList.map((s) => s.screenId);
|
|
let layoutSummaries: Record<number, ScreenLayoutSummary> = {};
|
|
let subTablesData: Record<number, ScreenSubTablesData> = {};
|
|
try {
|
|
// 레이아웃 요약과 서브 테이블 정보 병렬 로드
|
|
const [layoutRes, subTablesRes] = await Promise.all([
|
|
getMultipleScreenLayoutSummary(screenIds),
|
|
getScreenSubTables(screenIds),
|
|
]);
|
|
|
|
if (layoutRes.success && layoutRes.data) {
|
|
// API 응답이 Record 형태 (screenId -> summary)
|
|
layoutSummaries = layoutRes.data as Record<number, ScreenLayoutSummary>;
|
|
}
|
|
|
|
if (subTablesRes.success && subTablesRes.data) {
|
|
subTablesData = subTablesRes.data as Record<number, ScreenSubTablesData>;
|
|
// 서브 테이블 데이터 저장 (조인 컬럼 정보 포함)
|
|
setSubTablesDataMap(subTablesData);
|
|
}
|
|
} catch (e) {
|
|
console.error("레이아웃 요약/서브 테이블 로드 실패:", e);
|
|
}
|
|
|
|
// 화면별 사용 컬럼 정보 추출 (layoutSummaries에서)
|
|
const usedColumnsMap: Record<number, Record<string, string[]>> = {};
|
|
screenList.forEach((screenItem) => {
|
|
const layout = layoutSummaries[screenItem.screenId];
|
|
if (layout && layout.layoutItems) {
|
|
const mainTable = screenItem.tableName;
|
|
if (mainTable) {
|
|
// layoutItems에서 사용 컬럼과 조인 컬럼 추출
|
|
const allUsedColumns: string[] = [];
|
|
const allJoinColumns: string[] = [];
|
|
|
|
layout.layoutItems.forEach((item) => {
|
|
// usedColumns 배열에서 추출 (columns_config에서 가져온 컬럼명)
|
|
if (item.usedColumns && Array.isArray(item.usedColumns)) {
|
|
item.usedColumns.forEach((col) => {
|
|
if (col && !allUsedColumns.includes(col)) {
|
|
allUsedColumns.push(col);
|
|
}
|
|
});
|
|
}
|
|
// joinColumns 배열에서 추출 (isEntityJoin = true인 컬럼)
|
|
if (item.joinColumns && Array.isArray(item.joinColumns)) {
|
|
item.joinColumns.forEach((col) => {
|
|
if (col && !allJoinColumns.includes(col)) {
|
|
allJoinColumns.push(col);
|
|
}
|
|
});
|
|
}
|
|
// 하위 호환성: bindField도 사용 컬럼에 추가
|
|
if (item.bindField && !allUsedColumns.includes(item.bindField)) {
|
|
allUsedColumns.push(item.bindField);
|
|
}
|
|
});
|
|
|
|
if (!usedColumnsMap[screenItem.screenId]) {
|
|
usedColumnsMap[screenItem.screenId] = {};
|
|
}
|
|
// 사용 컬럼과 조인 컬럼을 별도 키로 저장
|
|
usedColumnsMap[screenItem.screenId][mainTable] = allUsedColumns;
|
|
usedColumnsMap[screenItem.screenId][`${mainTable}__join`] = allJoinColumns;
|
|
}
|
|
}
|
|
});
|
|
setScreenUsedColumnsMap(usedColumnsMap);
|
|
|
|
// ========== 상단: 화면 노드들 ==========
|
|
const screenNodes: ScreenNodeType[] = [];
|
|
const screenStartX = 50;
|
|
|
|
// screen_role 레이블 매핑
|
|
const getRoleLabel = (role?: string) => {
|
|
if (!role || role === "member") return "화면";
|
|
const roleMap: Record<string, string> = {
|
|
main_list: "메인 그리드",
|
|
register_form: "등록 폼",
|
|
popup: "팝업",
|
|
detail: "상세",
|
|
};
|
|
return roleMap[role] || role;
|
|
};
|
|
|
|
screenList.forEach((scr: any, idx) => {
|
|
const isMain = screen && scr.screenId === screen.screenId;
|
|
const summary = layoutSummaries[scr.screenId];
|
|
const roleLabel = getRoleLabel(scr.screenRole);
|
|
|
|
// 포커스 여부 결정 (그룹 모드 & 개별 화면 모드 모두 지원)
|
|
const isInGroup = !!selectedGroup;
|
|
let isFocused: boolean;
|
|
let isFaded: boolean;
|
|
|
|
if (isInGroup) {
|
|
// 그룹 모드: 클릭한 화면만 포커스
|
|
isFocused = focusedScreenId === scr.screenId;
|
|
isFaded = focusedScreenId !== null && !isFocused;
|
|
} else {
|
|
// 개별 화면 모드: 메인 화면(선택된 화면)만 포커스, 연결 화면은 흐리게
|
|
isFocused = isMain;
|
|
isFaded = !isMain && screenList.length > 1;
|
|
}
|
|
|
|
screenNodes.push({
|
|
id: `screen-${scr.screenId}`,
|
|
type: "screenNode",
|
|
position: { x: screenStartX + idx * (NODE_WIDTH + NODE_GAP), y: SCREEN_Y },
|
|
data: {
|
|
label: scr.screenName,
|
|
subLabel: selectedGroup ? `${roleLabel} (#${scr.displayOrder || idx + 1})` : (isMain ? "메인 화면" : "연결 화면"),
|
|
type: "screen",
|
|
isMain: selectedGroup ? idx === 0 : isMain,
|
|
tableName: scr.tableName,
|
|
layoutSummary: summary,
|
|
// 화면 포커스 관련 속성 (그룹 모드 & 개별 모드 공통)
|
|
isInGroup,
|
|
isFocused,
|
|
isFaded,
|
|
screenRole: scr.screenRole,
|
|
},
|
|
});
|
|
});
|
|
|
|
// ========== 중단: 메인 테이블 노드들 ==========
|
|
const tableNodes: TableNodeType[] = [];
|
|
const mainTableSet = new Set<string>();
|
|
const subTableSet = new Set<string>();
|
|
|
|
// 모든 화면의 메인 테이블 추가
|
|
screenList.forEach((scr) => {
|
|
if (scr.tableName) {
|
|
mainTableSet.add(scr.tableName);
|
|
}
|
|
});
|
|
|
|
// 조인된 테이블들 (screen_field_joins에서)
|
|
joins.forEach((join: any) => {
|
|
if (join.save_table) mainTableSet.add(join.save_table);
|
|
if (join.join_table) mainTableSet.add(join.join_table);
|
|
});
|
|
|
|
// 테이블 관계에서 추가
|
|
relations.forEach((rel: any) => {
|
|
if (rel.table_name) mainTableSet.add(rel.table_name);
|
|
});
|
|
|
|
// 서브 테이블 수집 (componentConfig에서 추출된 테이블들)
|
|
// 서브 테이블은 메인 테이블과 다른 테이블들
|
|
// 화면별 서브 테이블 매핑도 함께 구축
|
|
const newScreenSubTableMap: Record<number, string[]> = {};
|
|
|
|
Object.entries(subTablesData).forEach(([screenIdStr, screenSubData]) => {
|
|
const screenId = parseInt(screenIdStr);
|
|
const subTableNames: string[] = [];
|
|
|
|
screenSubData.subTables.forEach((subTable) => {
|
|
// 메인 테이블에 없는 것만 서브 테이블로 추가
|
|
if (!mainTableSet.has(subTable.tableName)) {
|
|
subTableSet.add(subTable.tableName);
|
|
subTableNames.push(subTable.tableName);
|
|
}
|
|
});
|
|
|
|
if (subTableNames.length > 0) {
|
|
newScreenSubTableMap[screenId] = subTableNames;
|
|
}
|
|
});
|
|
|
|
// 화면별 서브 테이블 매핑 저장
|
|
setScreenSubTableMap(newScreenSubTableMap);
|
|
|
|
// ========== 참조 관계 수집 (어떤 테이블이 어디서 참조되는지) ==========
|
|
// 테이블명 → 참조 정보 배열 (이 테이블을 참조하는 관계들)
|
|
const tableReferencesMap = new Map<string, ReferenceInfo[]>();
|
|
|
|
Object.entries(subTablesData).forEach(([screenIdStr, screenSubData]) => {
|
|
const mainTable = screenSubData.mainTable;
|
|
|
|
screenSubData.subTables.forEach((subTable) => {
|
|
const visualType = inferVisualRelationType(subTable);
|
|
|
|
// 1. lookup, reference 관계: 참조되는 테이블에 정보 추가
|
|
if (subTable.relationType === 'lookup' || subTable.relationType === 'reference') {
|
|
const existingRefs = tableReferencesMap.get(subTable.tableName) || [];
|
|
existingRefs.push({
|
|
fromTable: mainTable,
|
|
fromColumn: subTable.fieldMappings?.[0]?.sourceField || '',
|
|
toColumn: subTable.fieldMappings?.[0]?.targetField || '',
|
|
relationType: 'lookup',
|
|
});
|
|
tableReferencesMap.set(subTable.tableName, existingRefs);
|
|
}
|
|
|
|
// 2. rightPanelRelation (마스터-디테일 필터링): 디테일 테이블에 정보 추가
|
|
// 마스터(mainTable) → 디테일(subTable.tableName) 필터링 관계
|
|
if (subTable.relationType === 'rightPanelRelation') {
|
|
const existingRefs = tableReferencesMap.get(subTable.tableName) || [];
|
|
existingRefs.push({
|
|
fromTable: mainTable,
|
|
fromColumn: subTable.leftColumn || '', // 마스터 테이블의 선택 기준 컬럼
|
|
toColumn: subTable.foreignKey || '', // 디테일 테이블의 FK 컬럼
|
|
relationType: 'filter',
|
|
});
|
|
tableReferencesMap.set(subTable.tableName, existingRefs);
|
|
}
|
|
});
|
|
});
|
|
|
|
// 메인 테이블 노드 배치 (화면들의 중앙 아래에 배치)
|
|
const mainTableList = Array.from(mainTableSet);
|
|
|
|
// 화면 노드들의 총 너비 계산
|
|
const screenTotalWidth = screenList.length * NODE_WIDTH + (screenList.length - 1) * NODE_GAP;
|
|
const screenCenterX = screenStartX + screenTotalWidth / 2;
|
|
|
|
// 메인 테이블 노드들의 총 너비 계산
|
|
const mainTableTotalWidth = mainTableList.length * NODE_WIDTH + (mainTableList.length - 1) * NODE_GAP;
|
|
const mainTableStartX = screenCenterX - mainTableTotalWidth / 2;
|
|
|
|
// 각 테이블이 어떤 화면들의 메인 테이블인지 매핑
|
|
const tableToScreensMap = new Map<string, string[]>();
|
|
screenList.forEach((scr: any) => {
|
|
if (scr.tableName) {
|
|
const screens = tableToScreensMap.get(scr.tableName) || [];
|
|
screens.push(scr.screenName);
|
|
tableToScreensMap.set(scr.tableName, screens);
|
|
}
|
|
});
|
|
|
|
for (let idx = 0; idx < mainTableList.length; idx++) {
|
|
const tableName = mainTableList[idx];
|
|
// mainTableSet에 있는 테이블은 모두 해당 화면의 "메인 테이블"
|
|
const linkedScreens = tableToScreensMap.get(tableName) || [];
|
|
|
|
// 컬럼 정보 로드
|
|
let columns: ColumnTypeInfo[] = [];
|
|
try {
|
|
columns = await loadTableColumns(tableName);
|
|
} catch (e) {
|
|
// ignore
|
|
}
|
|
|
|
// 컬럼 정보를 PK/FK 표시와 함께 변환 (전체 컬럼 저장, 표시는 TableNode에서 제한)
|
|
const formattedColumns = columns.map((col) => ({
|
|
name: col.displayName || col.columnName || "",
|
|
originalName: col.columnName || "", // 영문 컬럼명 (필터링용)
|
|
type: col.dataType || "",
|
|
isPrimaryKey: col.isPrimaryKey || col.columnName === "id",
|
|
isForeignKey: !!col.referenceTable || (col.columnName?.includes("_id") && col.columnName !== "id"),
|
|
}));
|
|
|
|
// 여러 화면이 같은 테이블 사용하면 "공통 메인 테이블", 아니면 "메인 테이블"
|
|
const subLabel = linkedScreens.length > 1
|
|
? `메인 테이블 (${linkedScreens.length}개 화면)`
|
|
: "메인 테이블";
|
|
|
|
// 이 테이블을 참조하는 관계들
|
|
tableNodes.push({
|
|
id: `table-${tableName}`,
|
|
type: "tableNode",
|
|
position: { x: mainTableStartX + idx * (NODE_WIDTH + NODE_GAP), y: TABLE_Y },
|
|
data: {
|
|
label: tableName,
|
|
subLabel: subLabel,
|
|
isMain: true, // mainTableSet의 모든 테이블은 메인
|
|
columns: formattedColumns,
|
|
// referencedBy, filterColumns는 styledNodes에서 포커스 상태에 따라 동적으로 설정
|
|
},
|
|
});
|
|
}
|
|
|
|
// ========== 하단: 서브 테이블 노드들 (참조/조회용) ==========
|
|
const subTableList = Array.from(subTableSet);
|
|
|
|
if (subTableList.length > 0) {
|
|
// 서브 테이블 노드들의 총 너비 계산
|
|
const subTableTotalWidth = subTableList.length * NODE_WIDTH + (subTableList.length - 1) * NODE_GAP;
|
|
const subTableStartX = screenCenterX - subTableTotalWidth / 2;
|
|
|
|
for (let idx = 0; idx < subTableList.length; idx++) {
|
|
const tableName = subTableList[idx];
|
|
|
|
// 컬럼 정보 로드
|
|
let columns: ColumnTypeInfo[] = [];
|
|
try {
|
|
columns = await loadTableColumns(tableName);
|
|
} catch (e) {
|
|
// ignore
|
|
}
|
|
|
|
// 컬럼 정보를 PK/FK 표시와 함께 변환 (전체 컬럼 저장, 표시는 TableNode에서 제한)
|
|
const formattedColumns = columns.map((col) => ({
|
|
name: col.displayName || col.columnName || "",
|
|
originalName: col.columnName || "", // 영문 컬럼명 (필터링용)
|
|
type: col.dataType || "",
|
|
isPrimaryKey: col.isPrimaryKey || col.columnName === "id",
|
|
isForeignKey: !!col.referenceTable || (col.columnName?.includes("_id") && col.columnName !== "id"),
|
|
}));
|
|
|
|
// 서브 테이블의 관계 타입 결정
|
|
let relationType = "참조";
|
|
Object.values(subTablesData).forEach((screenSubData) => {
|
|
const matchedSub = screenSubData.subTables.find((st) => st.tableName === tableName);
|
|
if (matchedSub) {
|
|
if (matchedSub.relationType === "lookup") relationType = "조회";
|
|
else if (matchedSub.relationType === "source") relationType = "데이터 소스";
|
|
else if (matchedSub.relationType === "join") relationType = "조인";
|
|
}
|
|
});
|
|
|
|
tableNodes.push({
|
|
id: `subtable-${tableName}`,
|
|
type: "tableNode",
|
|
position: { x: subTableStartX + idx * (NODE_WIDTH + NODE_GAP), y: SUB_TABLE_Y },
|
|
data: {
|
|
label: tableName,
|
|
subLabel: `서브 테이블 (${relationType})`,
|
|
isMain: false,
|
|
columns: formattedColumns,
|
|
isFaded: true, // 기본적으로 흐리게 표시 (포커스 시에만 활성화)
|
|
// referencedBy, filterColumns는 styledNodes에서 포커스 상태에 따라 동적으로 설정
|
|
},
|
|
});
|
|
}
|
|
}
|
|
|
|
// ========== 엣지: 연결선 생성 ==========
|
|
const newEdges: Edge[] = [];
|
|
|
|
// 그룹 선택 시: 화면 간 연결선 (display_order 순)
|
|
if (selectedGroup && screenList.length > 1) {
|
|
for (let i = 0; i < screenList.length - 1; i++) {
|
|
const currentScreen = screenList[i];
|
|
const nextScreen = screenList[i + 1];
|
|
|
|
newEdges.push({
|
|
id: `edge-screen-flow-${i}`,
|
|
source: `screen-${currentScreen.screenId}`,
|
|
target: `screen-${nextScreen.screenId}`,
|
|
sourceHandle: "right",
|
|
targetHandle: "left",
|
|
type: "smoothstep",
|
|
label: `${i + 1}`,
|
|
labelStyle: { fontSize: 11, fill: "#0ea5e9", fontWeight: 600 },
|
|
labelBgStyle: { fill: "white", stroke: "#e2e8f0", strokeWidth: 1 },
|
|
labelBgPadding: [4, 2] as [number, number],
|
|
markerEnd: { type: MarkerType.ArrowClosed, color: "#0ea5e9" },
|
|
animated: true,
|
|
style: { stroke: "#0ea5e9", strokeWidth: 2 },
|
|
});
|
|
}
|
|
}
|
|
|
|
// 각 화면 → 해당 메인 테이블 연결선 생성 (실선)
|
|
// 모든 화면-테이블 연결은 동일한 스타일 (각 화면의 메인 테이블이므로)
|
|
screenList.forEach((scr) => {
|
|
if (scr.tableName && mainTableSet.has(scr.tableName)) {
|
|
newEdges.push({
|
|
id: `edge-screen-table-${scr.screenId}`,
|
|
source: `screen-${scr.screenId}`,
|
|
target: `table-${scr.tableName}`,
|
|
sourceHandle: "bottom",
|
|
targetHandle: "top",
|
|
type: "smoothstep",
|
|
animated: true, // 모든 메인 테이블 연결은 애니메이션
|
|
style: {
|
|
stroke: "#3b82f6",
|
|
strokeWidth: 2,
|
|
},
|
|
});
|
|
}
|
|
});
|
|
|
|
// 메인 테이블 → 서브 테이블 연결선 생성 (점선)
|
|
// 메인 테이블 → 메인 테이블 연결선도 생성 (점선, 연한 주황색)
|
|
// 화면별 서브 테이블 연결을 추적하기 위해 screenId 정보도 엣지 ID에 포함
|
|
const mainToMainEdgeSet = new Set<string>(); // 중복 방지용
|
|
|
|
Object.entries(subTablesData).forEach(([screenIdStr, screenSubData]) => {
|
|
const sourceScreenId = parseInt(screenIdStr);
|
|
const mainTable = screenSubData.mainTable;
|
|
if (!mainTable || !mainTableSet.has(mainTable)) return;
|
|
|
|
screenSubData.subTables.forEach((subTable) => {
|
|
const isTargetSubTable = subTableSet.has(subTable.tableName);
|
|
const isTargetMainTable = mainTableSet.has(subTable.tableName);
|
|
|
|
// 자기 자신 연결 방지
|
|
if (mainTable === subTable.tableName) return;
|
|
|
|
// 메인 테이블 → 메인 테이블 연결 (서브테이블 구간을 통해 연결)
|
|
// 규격: bottom → bottom_target (참조하는 테이블에서 참조당하는 테이블로)
|
|
//
|
|
// 방향 결정 로직 (범용성):
|
|
// 1. parentMapping (fieldMappings에 sourceTable 있음): mainTable → sourceTable
|
|
// - mainTable이 sourceTable을 참조하는 관계
|
|
// - 예: customer_item_mapping.customer_id → customer_mng.customer_code
|
|
// 2. rightPanelRelation (foreignKey 있음): subTable → mainTable
|
|
// - subTable이 mainTable을 참조하는 관계
|
|
// - 예: customer_item_mapping.customer_id → customer_mng.customer_code
|
|
// 3. reference (column_labels): mainTable → subTable
|
|
// - mainTable이 subTable을 참조하는 관계
|
|
if (isTargetMainTable) {
|
|
// 실제 참조 방향 결정
|
|
let referrerTable: string; // 참조하는 테이블 (source)
|
|
let referencedTable: string; // 참조당하는 테이블 (target)
|
|
|
|
// fieldMappings에서 sourceTable 확인
|
|
const hasSourceTable = subTable.fieldMappings?.some(
|
|
(fm: any) => fm.sourceTable && fm.sourceTable === subTable.tableName
|
|
);
|
|
|
|
if (subTable.relationType === 'parentMapping' || hasSourceTable) {
|
|
// parentMapping: mainTable이 sourceTable(=subTable.tableName)을 참조
|
|
// 방향: mainTable → subTable.tableName
|
|
referrerTable = mainTable;
|
|
referencedTable = subTable.tableName;
|
|
} else if (subTable.relationType === 'rightPanelRelation') {
|
|
// rightPanelRelation: split-panel-layout의 마스터-디테일 관계
|
|
// mainTable(leftPanel, 마스터)이 subTable(rightPanel, 디테일)을 필터링
|
|
// 방향: mainTable(마스터) → subTable(디테일)
|
|
referrerTable = mainTable;
|
|
referencedTable = subTable.tableName;
|
|
} else if (subTable.relationType === 'reference') {
|
|
// reference (column_labels): mainTable이 subTable을 참조
|
|
// 방향: mainTable → subTable.tableName
|
|
referrerTable = mainTable;
|
|
referencedTable = subTable.tableName;
|
|
} else {
|
|
// 기본: subTable이 mainTable을 참조한다고 가정
|
|
referrerTable = subTable.tableName;
|
|
referencedTable = mainTable;
|
|
}
|
|
|
|
// 화면별로 고유한 키 생성 (같은 테이블 쌍이라도 다른 화면에서는 별도 엣지)
|
|
const pairKey = `${sourceScreenId}-${[mainTable, subTable.tableName].sort().join('-')}`;
|
|
if (!mainToMainEdgeSet.has(pairKey)) {
|
|
mainToMainEdgeSet.add(pairKey);
|
|
|
|
// 관계 유형 추론 및 색상 결정
|
|
const visualRelationType = inferVisualRelationType(subTable as SubTableInfo);
|
|
const relationColor = RELATION_COLORS[visualRelationType];
|
|
|
|
// 화면별로 고유한 엣지 ID
|
|
const edgeId = `edge-main-main-${sourceScreenId}-${referrerTable}-${referencedTable}`;
|
|
newEdges.push({
|
|
id: edgeId,
|
|
source: `table-${referrerTable}`, // 참조하는 테이블
|
|
target: `table-${referencedTable}`, // 참조당하는 테이블
|
|
sourceHandle: "bottom", // 하단에서 나감 (서브테이블 구간으로)
|
|
targetHandle: "bottom_target", // 하단으로 들어감
|
|
type: "smoothstep",
|
|
animated: false,
|
|
style: {
|
|
stroke: relationColor.strokeLight, // 관계 유형별 연한 색상
|
|
strokeWidth: 1.5,
|
|
strokeDasharray: "8,4",
|
|
opacity: 0.5,
|
|
},
|
|
markerEnd: {
|
|
type: MarkerType.ArrowClosed,
|
|
color: relationColor.strokeLight
|
|
},
|
|
data: {
|
|
sourceScreenId,
|
|
isMainToMain: true,
|
|
referrerTable,
|
|
referencedTable,
|
|
visualRelationType, // 관계 유형 저장
|
|
},
|
|
});
|
|
}
|
|
return; // 메인-메인은 위에서 처리했으므로 스킵
|
|
}
|
|
|
|
// 서브 테이블이 아니면 스킵
|
|
if (!isTargetSubTable) return;
|
|
|
|
// 화면별로 고유한 엣지 ID (같은 서브 테이블이라도 다른 화면에서 사용하면 별도 엣지)
|
|
const edgeId = `edge-main-sub-${sourceScreenId}-${mainTable}-${subTable.tableName}`;
|
|
const exists = newEdges.some((e) => e.id === edgeId);
|
|
if (exists) return;
|
|
|
|
// 관계 타입에 따른 라벨
|
|
let relationLabel = "참조";
|
|
if (subTable.relationType === "lookup") relationLabel = "조회";
|
|
else if (subTable.relationType === "source") relationLabel = "데이터 소스";
|
|
else if (subTable.relationType === "join") relationLabel = "조인";
|
|
|
|
newEdges.push({
|
|
id: edgeId,
|
|
source: `table-${mainTable}`,
|
|
target: `subtable-${subTable.tableName}`,
|
|
sourceHandle: "bottom",
|
|
targetHandle: "top",
|
|
type: "smoothstep",
|
|
label: relationLabel,
|
|
labelStyle: {
|
|
fontSize: 9,
|
|
fill: "#94a3b8",
|
|
fontWeight: 500
|
|
},
|
|
labelBgStyle: {
|
|
fill: "white",
|
|
stroke: "#e2e8f0",
|
|
strokeWidth: 1
|
|
},
|
|
labelBgPadding: [3, 2] as [number, number],
|
|
markerEnd: {
|
|
type: MarkerType.ArrowClosed,
|
|
color: "#94a3b8"
|
|
},
|
|
animated: false, // 기본: 애니메이션 비활성화 (포커스 시에만 활성화)
|
|
style: {
|
|
stroke: "#94a3b8",
|
|
strokeWidth: 1,
|
|
strokeDasharray: "6,4", // 점선
|
|
opacity: 0.5, // 기본 투명도
|
|
},
|
|
data: { sourceScreenId },
|
|
});
|
|
});
|
|
});
|
|
|
|
// 조인 관계 엣지 (테이블 간 - 1:N 관계 표시)
|
|
joins.forEach((join: any, idx: number) => {
|
|
if (join.save_table && join.join_table && join.save_table !== join.join_table) {
|
|
newEdges.push({
|
|
id: `edge-join-${idx}`,
|
|
source: `table-${join.save_table}`,
|
|
target: `table-${join.join_table}`,
|
|
sourceHandle: "right",
|
|
targetHandle: "left",
|
|
type: "smoothstep",
|
|
label: "1:N 관계",
|
|
labelStyle: { fontSize: 10, fill: "#6366f1", fontWeight: 500 },
|
|
labelBgStyle: { fill: "white", stroke: "#e2e8f0", strokeWidth: 1 },
|
|
labelBgPadding: [4, 2] as [number, number],
|
|
markerEnd: { type: MarkerType.ArrowClosed, color: "#6366f1" },
|
|
style: { stroke: "#6366f1", strokeWidth: 1.5, strokeDasharray: "5,5" },
|
|
});
|
|
}
|
|
});
|
|
|
|
// 테이블 관계 엣지 (추가 관계)
|
|
relations.forEach((rel: any, idx: number) => {
|
|
if (rel.table_name && rel.table_name !== screen.tableName) {
|
|
// 화면 → 연결 테이블
|
|
const edgeExists = newEdges.some(
|
|
(e) => e.source === `screen-${screen.screenId}` && e.target === `table-${rel.table_name}`
|
|
);
|
|
if (!edgeExists) {
|
|
newEdges.push({
|
|
id: `edge-rel-${idx}`,
|
|
source: `screen-${screen.screenId}`,
|
|
target: `table-${rel.table_name}`,
|
|
sourceHandle: "bottom",
|
|
targetHandle: "top",
|
|
type: "smoothstep",
|
|
label: rel.relation_type === "join" ? "조인" : rel.crud_operations || "",
|
|
labelStyle: { fontSize: 9, fill: "#10b981" },
|
|
labelBgStyle: { fill: "white", stroke: "#e2e8f0", strokeWidth: 1 },
|
|
labelBgPadding: [3, 2] as [number, number],
|
|
style: { stroke: "#10b981", strokeWidth: 1.5 },
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
// 데이터 흐름 엣지 (화면 간)
|
|
flows
|
|
.filter((flow: any) => flow.source_screen_id === screen.screenId)
|
|
.forEach((flow: any, idx: number) => {
|
|
if (flow.target_screen_id) {
|
|
newEdges.push({
|
|
id: `edge-flow-${idx}`,
|
|
source: `screen-${screen.screenId}`,
|
|
target: `screen-${flow.target_screen_id}`,
|
|
sourceHandle: "right",
|
|
targetHandle: "left",
|
|
type: "smoothstep",
|
|
animated: true,
|
|
label: flow.flow_label || flow.flow_type || "이동",
|
|
labelStyle: { fontSize: 10, fill: "#8b5cf6", fontWeight: 500 },
|
|
labelBgStyle: { fill: "white", stroke: "#e2e8f0", strokeWidth: 1 },
|
|
labelBgPadding: [4, 2] as [number, number],
|
|
markerEnd: { type: MarkerType.ArrowClosed, color: "#8b5cf6" },
|
|
style: { stroke: "#8b5cf6", strokeWidth: 2 },
|
|
});
|
|
}
|
|
});
|
|
|
|
// 최종 노드 배열 합치기
|
|
const allNodes: AllNodeType[] = [...screenNodes, ...tableNodes];
|
|
|
|
// 테이블이 없으면 안내 노드 추가
|
|
if (tableNodes.length === 0) {
|
|
allNodes.push({
|
|
id: "hint-table",
|
|
type: "tableNode",
|
|
position: { x: 50, y: TABLE_Y },
|
|
data: {
|
|
label: "연결된 테이블 없음",
|
|
subLabel: "화면에 테이블을 설정하세요",
|
|
isMain: false,
|
|
columns: [],
|
|
},
|
|
});
|
|
}
|
|
|
|
setNodes(allNodes);
|
|
setEdges(newEdges);
|
|
|
|
// 데이터 로드 완료 후 버전 증가 (fitView 트리거용)
|
|
setDataLoadVersion((prev) => prev + 1);
|
|
} catch (error) {
|
|
console.error("관계 데이터 로드 실패:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
loadRelations();
|
|
// focusedScreenId는 스타일링에만 영향을 미치므로 의존성에서 제외
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [screen, selectedGroup, setNodes, setEdges, loadTableColumns]);
|
|
|
|
// 데이터 로드 완료 시 fitView 호출 (초기 로드 시에만)
|
|
useEffect(() => {
|
|
if (dataLoadVersion > 0 && nodes.length > 0) {
|
|
// setTimeout으로 노드 렌더링 완료 후 fitView 호출
|
|
const timer = setTimeout(() => {
|
|
// duration: 0으로 설정하여 애니메이션 없이 즉시 이동
|
|
reactFlowInstance.fitView({ padding: 0.2, duration: 0 });
|
|
// fitView 완료 후 뷰 표시
|
|
setIsViewReady(true);
|
|
}, 50);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [dataLoadVersion, reactFlowInstance, nodes.length]);
|
|
|
|
// 노드 클릭 핸들러 (그룹 모드에서 화면 포커스) - 조건부 return 전에 선언해야 함
|
|
const handleNodeClick = useCallback((_event: React.MouseEvent, node: Node) => {
|
|
// 그룹 모드가 아니면 무시
|
|
if (!selectedGroup) return;
|
|
|
|
// 화면 노드만 처리
|
|
if (node.id.startsWith("screen-")) {
|
|
const screenId = parseInt(node.id.replace("screen-", ""));
|
|
// 이미 포커스된 화면을 다시 클릭하면 포커스 해제
|
|
setFocusedScreenId((prev) => (prev === screenId ? null : screenId));
|
|
}
|
|
}, [selectedGroup]);
|
|
|
|
// 포커스에 따른 노드 스타일링 (그룹 모드에서 화면 클릭 시)
|
|
const styledNodes = React.useMemo(() => {
|
|
// 그룹 모드가 아니면 원본 반환
|
|
if (!selectedGroup) return nodes;
|
|
|
|
// 포커스된 화면의 서브 테이블 목록 (포커스가 없으면 빈 배열)
|
|
const focusedSubTables = focusedScreenId !== null
|
|
? (screenSubTableMap[focusedScreenId] || [])
|
|
: [];
|
|
|
|
// 포커스된 화면의 서브 테이블 데이터 (조인 컬럼 정보 포함)
|
|
const focusedSubTablesData = focusedScreenId !== null
|
|
? subTablesDataMap[focusedScreenId]
|
|
: null;
|
|
|
|
// 포커스된 화면의 사용 컬럼 정보
|
|
const focusedUsedColumns = focusedScreenId !== null
|
|
? screenUsedColumnsMap[focusedScreenId]
|
|
: null;
|
|
|
|
// 연관 테이블 정보 추출 (parentDataMapping, rightPanelRelation 등으로 연결된 테이블)
|
|
// { tableName: { columns: [sourceField1, sourceField2], displayNames: [displayName1, displayName2] } }
|
|
const relatedTablesMap: Record<string, { columns: string[], displayNames: string[] }> = {};
|
|
if (focusedSubTablesData) {
|
|
focusedSubTablesData.subTables.forEach((subTable) => {
|
|
// parentDataMapping, rightPanelRelation 타입의 연결에서 sourceTable 추출
|
|
if ((subTable.relationType === 'parentMapping' || subTable.relationType === 'rightPanelRelation')
|
|
&& subTable.fieldMappings) {
|
|
subTable.fieldMappings.forEach((mapping) => {
|
|
// sourceTable이 명시되어 있으면 그 테이블에 sourceField 추가
|
|
// sourceTable이 없으면 subTable.tableName을 sourceTable로 간주하지 않음
|
|
// mapping에서 sourceTable 정보가 필요함 - 현재는 tableName에서 추론
|
|
// parentDataMapping의 경우: tableName이 targetTable이고, sourceTable은 별도 정보 필요
|
|
|
|
// 임시: subTables의 tableName과 다른 메인 테이블들을 확인
|
|
// fieldMappings에서 sourceField가 다른 테이블에 있다면 그 테이블이 연관 테이블
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// 모든 화면의 메인 테이블과 그에 연결된 조인 정보 매핑
|
|
// 포커스된 화면이 다른 메인 테이블을 참조하는 경우 해당 테이블도 강조
|
|
const relatedMainTables: Record<string, { columns: string[], displayNames: string[] }> = {};
|
|
|
|
// 모든 화면의 메인 테이블 Set (빠른 조회용)
|
|
const allMainTableSet = new Set(Object.values(screenTableMap));
|
|
|
|
if (focusedSubTablesData) {
|
|
// 포커스된 화면의 subTables 순회
|
|
focusedSubTablesData.subTables.forEach((subTable) => {
|
|
// 1. subTable.tableName 자체가 다른 화면의 메인 테이블인 경우
|
|
if (allMainTableSet.has(subTable.tableName) && subTable.tableName !== focusedSubTablesData.mainTable) {
|
|
if (!relatedMainTables[subTable.tableName]) {
|
|
relatedMainTables[subTable.tableName] = { columns: [], displayNames: [] };
|
|
}
|
|
|
|
// fieldMappings가 있으면 조인 컬럼 정보 추출
|
|
if (subTable.fieldMappings) {
|
|
subTable.fieldMappings.forEach((mapping: any) => {
|
|
// reference, source 타입: targetField가 서브(연관) 테이블 컬럼
|
|
// parentMapping 등: sourceField가 연관 테이블 컬럼
|
|
const relatedColumn = mapping.sourceTable
|
|
? mapping.sourceField // parentMapping 스타일
|
|
: mapping.targetField; // reference/source 스타일
|
|
const displayName = mapping.sourceTable
|
|
? (mapping.sourceDisplayName || mapping.sourceField)
|
|
: (mapping.targetDisplayName || mapping.targetField);
|
|
|
|
if (relatedColumn && !relatedMainTables[subTable.tableName].columns.includes(relatedColumn)) {
|
|
relatedMainTables[subTable.tableName].columns.push(relatedColumn);
|
|
relatedMainTables[subTable.tableName].displayNames.push(displayName);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// 2. fieldMappings.sourceTable이 다른 화면의 메인 테이블인 경우
|
|
if (subTable.fieldMappings) {
|
|
subTable.fieldMappings.forEach((mapping: any) => {
|
|
if (mapping.sourceTable && allMainTableSet.has(mapping.sourceTable) && mapping.sourceTable !== focusedSubTablesData.mainTable) {
|
|
if (!relatedMainTables[mapping.sourceTable]) {
|
|
relatedMainTables[mapping.sourceTable] = { columns: [], displayNames: [] };
|
|
}
|
|
if (mapping.sourceField && !relatedMainTables[mapping.sourceTable].columns.includes(mapping.sourceField)) {
|
|
relatedMainTables[mapping.sourceTable].columns.push(mapping.sourceField);
|
|
relatedMainTables[mapping.sourceTable].displayNames.push(mapping.sourceDisplayName || mapping.sourceField);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
return nodes.map((node) => {
|
|
// 화면 노드 스타일링 (포커스가 있을 때만)
|
|
if (node.id.startsWith("screen-")) {
|
|
if (focusedScreenId === null) {
|
|
// 포커스 없음: 모든 화면 정상 표시
|
|
return {
|
|
...node,
|
|
data: {
|
|
...node.data,
|
|
isFocused: false,
|
|
isFaded: false,
|
|
},
|
|
};
|
|
}
|
|
|
|
const screenId = parseInt(node.id.replace("screen-", ""));
|
|
const isFocused = screenId === focusedScreenId;
|
|
const isFaded = !isFocused;
|
|
|
|
return {
|
|
...node,
|
|
data: {
|
|
...node.data,
|
|
isFocused,
|
|
isFaded,
|
|
},
|
|
};
|
|
}
|
|
|
|
// 메인 테이블 노드 스타일링
|
|
if (node.id.startsWith("table-")) {
|
|
const tableName = node.id.replace("table-", "");
|
|
|
|
// 포커스된 화면의 메인 테이블인지 확인
|
|
const isFocusedTable = focusedScreenId !== null && screenTableMap[focusedScreenId] === tableName;
|
|
|
|
// 연관 테이블인지 확인 (다른 화면의 메인 테이블이지만 포커스된 화면에서 참조하는 테이블)
|
|
const isRelatedTable = relatedMainTables[tableName] !== undefined;
|
|
const relatedTableInfo = relatedMainTables[tableName];
|
|
|
|
// 조인 컬럼 추출
|
|
// 1. columns_config에서 isEntityJoin=true인 컬럼 (__join 키)
|
|
// 2. 서브 테이블 연결 시 fieldMappings에서 메인테이블 컬럼 추출
|
|
let joinColumns: string[] = [...(focusedUsedColumns?.[`${tableName}__join`] || [])];
|
|
|
|
// 서브 테이블 연결 정보에서도 추가 (포커스된 화면의 메인 테이블인 경우)
|
|
if (focusedSubTablesData && focusedSubTablesData.mainTable === tableName) {
|
|
focusedSubTablesData.subTables.forEach((subTable) => {
|
|
if (subTable.fieldMappings) {
|
|
subTable.fieldMappings.forEach((mapping) => {
|
|
const hasSourceTable = 'sourceTable' in mapping && mapping.sourceTable;
|
|
|
|
if (hasSourceTable) {
|
|
if (mapping.targetField && !joinColumns.includes(mapping.targetField)) {
|
|
joinColumns.push(mapping.targetField);
|
|
}
|
|
} else if (subTable.relationType === 'reference' || subTable.relationType === 'source') {
|
|
if (mapping.sourceField && !joinColumns.includes(mapping.sourceField)) {
|
|
joinColumns.push(mapping.sourceField);
|
|
}
|
|
} else if (subTable.relationType === 'parentMapping' || subTable.relationType === 'rightPanelRelation') {
|
|
if (mapping.targetField && !joinColumns.includes(mapping.targetField)) {
|
|
joinColumns.push(mapping.targetField);
|
|
}
|
|
} else {
|
|
if (mapping.targetField && !joinColumns.includes(mapping.targetField)) {
|
|
joinColumns.push(mapping.targetField);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// 연관 테이블인 경우: 참조되는 컬럼을 조인 컬럼으로 추가
|
|
if (isRelatedTable && relatedTableInfo) {
|
|
relatedTableInfo.columns.forEach((col) => {
|
|
if (!joinColumns.includes(col)) {
|
|
joinColumns.push(col);
|
|
}
|
|
});
|
|
}
|
|
|
|
// 사용 컬럼 추출 (조인 컬럼 제외)
|
|
const allUsedColumns = focusedUsedColumns?.[tableName] || [];
|
|
const highlightedColumns = allUsedColumns.filter(col => !joinColumns.includes(col));
|
|
|
|
// 테이블 활성화 여부: 포커스된 화면의 메인 테이블 OR 연관 테이블
|
|
const isActiveTable = isFocusedTable || isRelatedTable;
|
|
|
|
// 메인테이블용 fieldMappings 생성 (조인 컬럼 옆에 연관 테이블 컬럼명 표시)
|
|
// 예: 거래처 ID ← 거래처 코드 (메인테이블 컬럼 ← 연관테이블 컬럼)
|
|
let mainTableFieldMappings: Array<{ sourceField: string; targetField: string; sourceDisplayName?: string; targetDisplayName?: string }> = [];
|
|
if (isFocusedTable && focusedSubTablesData) {
|
|
focusedSubTablesData.subTables.forEach((subTable) => {
|
|
if (subTable.fieldMappings) {
|
|
subTable.fieldMappings.forEach((mapping) => {
|
|
// 메인테이블에서는:
|
|
// - sourceField/targetField 중 메인테이블 컬럼이 targetField (표시할 컬럼)
|
|
// - 연관테이블 컬럼이 sourceField (← 뒤에 표시할 참조 컬럼)
|
|
if (subTable.relationType === 'source' && mapping.sourceTable) {
|
|
// parentDataMapping 스타일: targetField = 메인테이블, sourceField = 연관테이블
|
|
mainTableFieldMappings.push({
|
|
sourceField: mapping.sourceField, // 연관 테이블 컬럼
|
|
targetField: mapping.targetField, // 메인 테이블 컬럼
|
|
sourceDisplayName: mapping.sourceDisplayName || mapping.sourceField,
|
|
targetDisplayName: mapping.targetDisplayName || mapping.targetField,
|
|
});
|
|
} else if (subTable.relationType === 'parentMapping' || subTable.relationType === 'rightPanelRelation') {
|
|
mainTableFieldMappings.push({
|
|
sourceField: mapping.sourceField,
|
|
targetField: mapping.targetField,
|
|
sourceDisplayName: mapping.sourceDisplayName || mapping.sourceField,
|
|
targetDisplayName: mapping.targetDisplayName || mapping.targetField,
|
|
});
|
|
} else if (subTable.relationType === 'reference' || subTable.relationType === 'source') {
|
|
// reference/source: sourceField = 메인테이블, targetField = 서브테이블
|
|
// 메인테이블 표시: sourceField ← targetDisplayName
|
|
mainTableFieldMappings.push({
|
|
sourceField: mapping.targetField, // 연관 테이블 컬럼 (표시용)
|
|
targetField: mapping.sourceField, // 메인 테이블 컬럼
|
|
sourceDisplayName: mapping.targetDisplayName || mapping.targetField,
|
|
targetDisplayName: mapping.sourceDisplayName || mapping.sourceField,
|
|
});
|
|
} else {
|
|
// lookup: targetField = 메인테이블, sourceField = 서브테이블
|
|
mainTableFieldMappings.push({
|
|
sourceField: mapping.sourceField,
|
|
targetField: mapping.targetField,
|
|
sourceDisplayName: mapping.sourceDisplayName || mapping.sourceField,
|
|
targetDisplayName: mapping.targetDisplayName || mapping.targetField,
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// 연관 테이블용 fieldMappings 생성
|
|
let relatedTableFieldMappings: Array<{ sourceField: string; targetField: string; sourceDisplayName?: string; targetDisplayName?: string }> = [];
|
|
if (isRelatedTable && focusedSubTablesData) {
|
|
focusedSubTablesData.subTables.forEach((subTable) => {
|
|
// 1. subTable.tableName === tableName인 경우 (메인-메인 조인)
|
|
if (subTable.tableName === tableName && subTable.fieldMappings) {
|
|
subTable.fieldMappings.forEach((mapping) => {
|
|
// reference/source 타입: sourceField가 메인테이블, targetField가 이 연관테이블
|
|
// 연관 테이블 표시: targetField ← sourceDisplayName (메인테이블 컬럼 한글명)
|
|
if (subTable.relationType === 'reference' || subTable.relationType === 'source') {
|
|
relatedTableFieldMappings.push({
|
|
sourceField: mapping.sourceField, // 메인 테이블 컬럼 (참조 표시용)
|
|
targetField: mapping.targetField, // 연관 테이블 컬럼 (표시할 컬럼)
|
|
sourceDisplayName: mapping.sourceDisplayName || mapping.sourceField,
|
|
targetDisplayName: mapping.targetDisplayName || mapping.targetField,
|
|
});
|
|
} else {
|
|
// lookup, parentMapping 등: targetField가 메인테이블, sourceField가 연관테이블
|
|
relatedTableFieldMappings.push({
|
|
sourceField: mapping.targetField, // 메인 테이블 컬럼 (참조 표시용)
|
|
targetField: mapping.sourceField, // 연관 테이블 컬럼 (표시할 컬럼)
|
|
sourceDisplayName: mapping.targetDisplayName || mapping.targetField,
|
|
targetDisplayName: mapping.sourceDisplayName || mapping.sourceField,
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// 2. mapping.sourceTable === tableName인 경우 (parentDataMapping 등)
|
|
if (subTable.fieldMappings) {
|
|
subTable.fieldMappings.forEach((mapping) => {
|
|
if (mapping.sourceTable === tableName) {
|
|
// 이 테이블이 sourceTable인 경우: sourceField가 이 테이블의 컬럼
|
|
relatedTableFieldMappings.push({
|
|
sourceField: mapping.targetField, // 메인 테이블 컬럼 (참조 표시용)
|
|
targetField: mapping.sourceField, // 연관 테이블 컬럼 (표시할 컬럼)
|
|
sourceDisplayName: mapping.targetDisplayName || mapping.targetField,
|
|
targetDisplayName: mapping.sourceDisplayName || mapping.sourceField,
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// 중복 제거
|
|
const seen = new Set<string>();
|
|
relatedTableFieldMappings = relatedTableFieldMappings.filter(fm => {
|
|
const key = `${fm.sourceField}-${fm.targetField}`;
|
|
if (seen.has(key)) return false;
|
|
seen.add(key);
|
|
return true;
|
|
});
|
|
}
|
|
|
|
// 포커스된 화면에서 이 테이블이 필터링 대상인지 확인
|
|
// (rightPanelRelation의 서브테이블인 경우)
|
|
let focusedFilterColumns: string[] = [];
|
|
let focusedReferencedBy: ReferenceInfo[] = [];
|
|
|
|
if (focusedScreenId !== null && focusedSubTablesData) {
|
|
// 포커스된 화면에서 이 테이블이 rightPanelRelation의 서브테이블인 경우
|
|
focusedSubTablesData.subTables.forEach((subTable) => {
|
|
if (subTable.tableName === tableName && subTable.relationType === 'rightPanelRelation') {
|
|
// FK 컬럼 추출
|
|
if (subTable.foreignKey) {
|
|
focusedFilterColumns.push(subTable.foreignKey);
|
|
}
|
|
// 참조 정보 생성
|
|
focusedReferencedBy.push({
|
|
fromTable: focusedSubTablesData.mainTable,
|
|
fromColumn: subTable.leftColumn || 'id',
|
|
toColumn: subTable.foreignKey || '',
|
|
relationType: 'filter',
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
return {
|
|
...node,
|
|
data: {
|
|
...node.data,
|
|
isFocused: isFocusedTable,
|
|
isRelated: isRelatedTable,
|
|
isFaded: focusedScreenId !== null && !isActiveTable,
|
|
highlightedColumns: isActiveTable ? highlightedColumns : [],
|
|
joinColumns: isActiveTable ? joinColumns : [],
|
|
filterColumns: focusedFilterColumns, // 포커스 상태에서만 표시
|
|
referencedBy: focusedReferencedBy.length > 0 ? focusedReferencedBy : undefined, // 포커스 상태에서만 표시
|
|
fieldMappings: isFocusedTable ? mainTableFieldMappings : (isRelatedTable ? relatedTableFieldMappings : []),
|
|
},
|
|
};
|
|
}
|
|
|
|
// 서브 테이블 노드 스타일링
|
|
// 기본: 흐리게, 포커스된 화면의 서브 테이블만 활성화
|
|
if (node.id.startsWith("subtable-")) {
|
|
const subTableName = node.id.replace("subtable-", "");
|
|
const isActiveSubTable = focusedSubTables.includes(subTableName);
|
|
|
|
// 조인 컬럼 추출 (서브 테이블 측의 컬럼)
|
|
// relationType에 따라 다름:
|
|
// - reference: targetField가 서브테이블 컬럼 (예: manager_id -> user_id)
|
|
// - lookup 등: sourceField가 서브테이블 컬럼
|
|
let subTableJoinColumns: string[] = [];
|
|
if (isActiveSubTable && focusedSubTablesData) {
|
|
const subTableInfo = focusedSubTablesData.subTables.find(st => st.tableName === subTableName);
|
|
if (subTableInfo?.fieldMappings) {
|
|
subTableInfo.fieldMappings.forEach((mapping) => {
|
|
// reference, source, parentMapping, rightPanelRelation 타입: targetField가 서브테이블의 컬럼 (조인 키)
|
|
// lookup 타입: sourceField가 서브테이블의 컬럼
|
|
if (subTableInfo.relationType === 'reference' || subTableInfo.relationType === 'source' ||
|
|
subTableInfo.relationType === 'parentMapping' || subTableInfo.relationType === 'rightPanelRelation') {
|
|
// reference, source, parentMapping, rightPanelRelation: 메인테이블 컬럼(sourceField) -> 서브테이블 컬럼(targetField)
|
|
if (mapping.targetField && !subTableJoinColumns.includes(mapping.targetField)) {
|
|
subTableJoinColumns.push(mapping.targetField);
|
|
}
|
|
} else {
|
|
// lookup 등: sourceField가 서브테이블 컬럼
|
|
if (mapping.sourceField && !subTableJoinColumns.includes(mapping.sourceField)) {
|
|
subTableJoinColumns.push(mapping.sourceField);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 디버깅 로그
|
|
console.log(`서브테이블 ${subTableName} (${subTableInfo?.relationType}):`, {
|
|
fieldMappings: subTableInfo?.fieldMappings,
|
|
extractedJoinColumns: subTableJoinColumns
|
|
});
|
|
}
|
|
|
|
// 서브 테이블의 highlightedColumns도 추가 (화면에서 서브테이블 컬럼을 직접 사용하는 경우)
|
|
// joinColumns와 별개로 표시 (조인 키 외 사용 컬럼)
|
|
const subTableHighlightedColumns: string[] = [];
|
|
|
|
// 필드 매핑 정보 추출 (조인 관계 표시용)
|
|
// reference, source, parentMapping, rightPanelRelation 타입: sourceField = 메인테이블 컬럼, targetField = 서브테이블 컬럼
|
|
// lookup 타입: sourceField = 서브테이블 컬럼, targetField = 메인테이블 컬럼 (swap 필요)
|
|
let displayFieldMappings: Array<{ sourceField: string; targetField: string; sourceDisplayName?: string; targetDisplayName?: string }> = [];
|
|
if (isActiveSubTable && focusedSubTablesData) {
|
|
const subTableInfo = focusedSubTablesData.subTables.find(st => st.tableName === subTableName);
|
|
if (subTableInfo?.fieldMappings) {
|
|
displayFieldMappings = subTableInfo.fieldMappings.map((mapping) => {
|
|
if (subTableInfo.relationType === 'reference' || subTableInfo.relationType === 'source' ||
|
|
subTableInfo.relationType === 'parentMapping' || subTableInfo.relationType === 'rightPanelRelation') {
|
|
// reference, source, parentMapping, rightPanelRelation: 백엔드에서 sourceField = 메인테이블, targetField = 서브테이블
|
|
// 표시: 서브테이블 컬럼(targetField) ← 메인테이블 한글명(sourceDisplayName)
|
|
return {
|
|
sourceField: mapping.sourceField, // 메인 테이블 컬럼 (참조)
|
|
targetField: mapping.targetField, // 서브 테이블 컬럼 (표시)
|
|
sourceDisplayName: mapping.sourceDisplayName || mapping.sourceField, // 메인 테이블 한글명
|
|
targetDisplayName: mapping.targetDisplayName || mapping.targetField,
|
|
};
|
|
} else {
|
|
// lookup 등: 백엔드 fieldMappings가 reference/source와 반대
|
|
// 백엔드: sourceField = 서브테이블 컬럼, targetField = 메인테이블 컬럼
|
|
// 프론트엔드 표시: 서브테이블 컬럼(sourceField) ← 메인테이블 컬럼(targetField)
|
|
// 그래서 swap 필요!
|
|
return {
|
|
sourceField: mapping.targetField, // 메인 테이블 컬럼 (참조)
|
|
targetField: mapping.sourceField, // 서브 테이블 컬럼 (표시)
|
|
sourceDisplayName: mapping.targetDisplayName || mapping.targetField, // 메인 테이블 한글명
|
|
targetDisplayName: mapping.sourceDisplayName || mapping.sourceField, // 서브 테이블 한글명
|
|
};
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
return {
|
|
...node,
|
|
style: {
|
|
...node.style,
|
|
opacity: isActiveSubTable ? 1 : 0.3,
|
|
filter: isActiveSubTable ? "none" : "grayscale(80%)",
|
|
},
|
|
data: {
|
|
...node.data,
|
|
isFocused: isActiveSubTable,
|
|
isFaded: !isActiveSubTable,
|
|
highlightedColumns: isActiveSubTable ? subTableHighlightedColumns : [],
|
|
joinColumns: isActiveSubTable ? subTableJoinColumns : [],
|
|
fieldMappings: isActiveSubTable ? displayFieldMappings : [],
|
|
},
|
|
};
|
|
}
|
|
|
|
return node;
|
|
});
|
|
}, [nodes, selectedGroup, focusedScreenId, screenSubTableMap, subTablesDataMap, screenUsedColumnsMap, screenTableMap]);
|
|
|
|
// 포커스에 따른 엣지 스타일링 (그룹 모드 & 개별 화면 모드)
|
|
const styledEdges = React.useMemo(() => {
|
|
// 개별 화면 모드: 메인 화면의 연결선만 강조
|
|
if (!selectedGroup && screen) {
|
|
const mainScreenId = screen.screenId;
|
|
|
|
return edges.map((edge) => {
|
|
// 화면 간 연결선
|
|
if (edge.source.startsWith("screen-") && edge.target.startsWith("screen-")) {
|
|
const sourceId = parseInt(edge.source.replace("screen-", ""));
|
|
const targetId = parseInt(edge.target.replace("screen-", ""));
|
|
const isConnected = sourceId === mainScreenId || targetId === mainScreenId;
|
|
|
|
return {
|
|
...edge,
|
|
animated: isConnected,
|
|
style: {
|
|
...edge.style,
|
|
stroke: isConnected ? "#8b5cf6" : "#d1d5db",
|
|
strokeWidth: isConnected ? 2 : 1,
|
|
opacity: isConnected ? 1 : 0.3,
|
|
},
|
|
};
|
|
}
|
|
|
|
// 화면-테이블 연결선
|
|
if (edge.source.startsWith("screen-") && edge.target.startsWith("table-")) {
|
|
const sourceId = parseInt(edge.source.replace("screen-", ""));
|
|
const isMyConnection = sourceId === mainScreenId;
|
|
|
|
return {
|
|
...edge,
|
|
animated: isMyConnection,
|
|
style: {
|
|
...edge.style,
|
|
stroke: isMyConnection ? "#3b82f6" : "#d1d5db",
|
|
strokeWidth: isMyConnection ? 2 : 1,
|
|
strokeDasharray: isMyConnection ? undefined : "5,5",
|
|
opacity: isMyConnection ? 1 : 0.3,
|
|
},
|
|
};
|
|
}
|
|
|
|
return edge;
|
|
});
|
|
}
|
|
|
|
// 그룹 모드가 아니면 원본 반환
|
|
if (!selectedGroup) return edges;
|
|
|
|
// 연관 테이블 간 조인 엣지 생성 (메인 테이블 간 조인 관계)
|
|
const joinEdges: Edge[] = [];
|
|
|
|
if (focusedScreenId !== null) {
|
|
const focusedSubTablesData = subTablesDataMap[focusedScreenId];
|
|
const focusedMainTable = screenTableMap[focusedScreenId];
|
|
|
|
// 모든 화면의 메인 테이블 목록 (메인-메인 조인 판단용)
|
|
const allMainTables = new Set(Object.values(screenTableMap));
|
|
|
|
// 이미 추가된 테이블 쌍 추적 (중복 방지)
|
|
const addedPairs = new Set<string>();
|
|
|
|
if (focusedSubTablesData) {
|
|
focusedSubTablesData.subTables.forEach((subTable) => {
|
|
// 1. subTable.tableName이 다른 화면의 메인 테이블인 경우 (메인-메인 조인)
|
|
const isTargetMainTable = allMainTables.has(subTable.tableName) && subTable.tableName !== focusedMainTable;
|
|
|
|
if (isTargetMainTable) {
|
|
const pairKey = `${subTable.tableName}-${focusedMainTable}`;
|
|
if (addedPairs.has(pairKey)) return;
|
|
addedPairs.add(pairKey);
|
|
|
|
// 메인 테이블 간 조인 연결선 - edge-main-main 스타일 업데이트만 수행
|
|
// 별도의 edge-main-join을 생성하지 않고, styledEdges에서 edge-main-main을 강조 처리
|
|
}
|
|
|
|
// 2. fieldMappings.sourceTable이 있는 경우 (parentMapping, rightPanelRelation 등)
|
|
if (subTable.fieldMappings) {
|
|
subTable.fieldMappings.forEach((mapping: any) => {
|
|
const sourceTable = mapping.sourceTable;
|
|
if (!sourceTable) return;
|
|
|
|
// sourceTable이 메인 테이블인 경우만 메인-메인 조인선 추가
|
|
if (!allMainTables.has(sourceTable) || sourceTable === focusedMainTable) return;
|
|
|
|
const pairKey = `${sourceTable}-${focusedMainTable}`;
|
|
if (addedPairs.has(pairKey)) return;
|
|
addedPairs.add(pairKey);
|
|
|
|
const edgeId = `edge-join-relation-${focusedScreenId}-${sourceTable}-${focusedMainTable}`;
|
|
const sourceNodeId = `table-${sourceTable}`;
|
|
const targetNodeId = `table-${focusedMainTable}`;
|
|
|
|
// 이미 존재하는 엣지인지 확인
|
|
if (joinEdges.some(e => e.id === edgeId)) return;
|
|
|
|
// 관계 유형 추론 및 색상 결정
|
|
const visualRelationType = inferVisualRelationType(subTable as SubTableInfo);
|
|
const relationColor = RELATION_COLORS[visualRelationType];
|
|
|
|
joinEdges.push({
|
|
id: edgeId,
|
|
source: sourceNodeId,
|
|
target: targetNodeId,
|
|
sourceHandle: 'bottom', // 고정: 서브테이블 구간 통과
|
|
targetHandle: 'bottom_target', // 고정: 서브테이블 구간 통과
|
|
type: 'smoothstep',
|
|
animated: true,
|
|
style: {
|
|
stroke: relationColor.stroke, // 관계 유형별 색상
|
|
strokeWidth: 2,
|
|
strokeDasharray: '8,4',
|
|
},
|
|
markerEnd: {
|
|
type: MarkerType.ArrowClosed,
|
|
color: relationColor.stroke,
|
|
width: 15,
|
|
height: 15,
|
|
},
|
|
data: {
|
|
visualRelationType,
|
|
},
|
|
});
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// 기존 엣지 스타일링 + 조인 엣지 추가
|
|
const styledOriginalEdges = edges.map((edge) => {
|
|
// 화면 간 연결선 (1, 2, 3 라벨)
|
|
if (edge.source.startsWith("screen-") && edge.target.startsWith("screen-")) {
|
|
// 포커스가 없으면 모든 화면 간 연결선 정상 표시
|
|
if (focusedScreenId === null) {
|
|
return edge; // 원본 그대로
|
|
}
|
|
|
|
// 포커스된 화면과 연결된 화면 간 선만 활성화
|
|
const sourceId = parseInt(edge.source.replace("screen-", ""));
|
|
const targetId = parseInt(edge.target.replace("screen-", ""));
|
|
const isConnected = sourceId === focusedScreenId || targetId === focusedScreenId;
|
|
|
|
return {
|
|
...edge,
|
|
animated: isConnected,
|
|
style: {
|
|
...edge.style,
|
|
stroke: isConnected ? "#8b5cf6" : "#d1d5db",
|
|
strokeWidth: isConnected ? 2 : 1,
|
|
opacity: isConnected ? 1 : 0.3,
|
|
},
|
|
};
|
|
}
|
|
|
|
// 화면-테이블 연결선
|
|
if (edge.source.startsWith("screen-") && edge.target.startsWith("table-")) {
|
|
// 포커스가 없으면 모든 화면-테이블 연결선 정상 표시
|
|
if (focusedScreenId === null) {
|
|
return edge; // 원본 그대로
|
|
}
|
|
|
|
const sourceId = parseInt(edge.source.replace("screen-", ""));
|
|
const isMyConnection = sourceId === focusedScreenId;
|
|
|
|
return {
|
|
...edge,
|
|
animated: isMyConnection,
|
|
style: {
|
|
...edge.style,
|
|
stroke: isMyConnection ? "#3b82f6" : "#d1d5db",
|
|
strokeWidth: isMyConnection ? 2 : 1,
|
|
strokeDasharray: isMyConnection ? undefined : "5,5",
|
|
opacity: isMyConnection ? 1 : 0.3,
|
|
},
|
|
};
|
|
}
|
|
|
|
// 메인 테이블 → 서브 테이블 연결선
|
|
// 규격: bottom → top 고정 (아래로 문어발처럼 뻗어나감)
|
|
if (edge.source.startsWith("table-") && edge.target.startsWith("subtable-")) {
|
|
// 포커스가 없으면 모든 서브 테이블 연결선 흐리게 (기본 상태)
|
|
if (focusedScreenId === null) {
|
|
return {
|
|
...edge,
|
|
sourceHandle: "bottom", // 고정: 메인 테이블 하단에서 나감
|
|
targetHandle: "top", // 고정: 서브 테이블 상단으로 들어감
|
|
animated: false,
|
|
style: {
|
|
...edge.style,
|
|
stroke: "#d1d5db",
|
|
strokeWidth: 1,
|
|
strokeDasharray: "6,4",
|
|
opacity: 0.3,
|
|
},
|
|
labelStyle: {
|
|
...edge.labelStyle,
|
|
opacity: 0.3,
|
|
},
|
|
};
|
|
}
|
|
|
|
// 엣지 ID에서 화면 ID 추출: edge-main-sub-{screenId}-{mainTable}-{subTable}
|
|
const idParts = edge.id.split("-");
|
|
// edge-main-sub-1413-sales_order_mng-customer_mng 형식
|
|
const edgeScreenId = idParts.length >= 4 ? parseInt(idParts[3]) : null;
|
|
|
|
// 포커스된 화면의 서브 테이블 연결인지 확인
|
|
const isMySubTable = edgeScreenId === focusedScreenId;
|
|
|
|
// 대체 방법: screenSubTableMap 사용
|
|
const focusedSubTables = focusedScreenId ? screenSubTableMap[focusedScreenId] || [] : [];
|
|
const subTableName = edge.target.replace("subtable-", "");
|
|
const isMySubTableByMap = focusedSubTables.includes(subTableName);
|
|
|
|
const isActive = isMySubTable || isMySubTableByMap;
|
|
|
|
return {
|
|
...edge,
|
|
sourceHandle: "bottom", // 고정
|
|
targetHandle: "top", // 고정
|
|
animated: isActive, // 활성화된 것만 애니메이션
|
|
style: {
|
|
...edge.style,
|
|
stroke: isActive ? "#f97316" : "#d1d5db",
|
|
strokeWidth: isActive ? 2 : 1,
|
|
strokeDasharray: "6,4", // 항상 점선
|
|
opacity: isActive ? 1 : 0.2,
|
|
},
|
|
labelStyle: {
|
|
...edge.labelStyle,
|
|
opacity: isActive ? 1 : 0.3,
|
|
},
|
|
};
|
|
}
|
|
|
|
// 메인 테이블 → 메인 테이블 연결선 (서브테이블 구간 통과)
|
|
// 규격: bottom → bottom_target 고정 (아래쪽 서브테이블 선 구간을 통해 연결)
|
|
if (edge.source.startsWith("table-") && edge.target.startsWith("table-") && edge.id.startsWith("edge-main-main-")) {
|
|
// 관계 유형별 색상 결정
|
|
const visualRelationType = (edge.data as any)?.visualRelationType as VisualRelationType || 'join';
|
|
const relationColor = RELATION_COLORS[visualRelationType];
|
|
|
|
if (focusedScreenId === null) {
|
|
// 포커스 없으면 관계 유형별 연한 색상으로 표시
|
|
return {
|
|
...edge,
|
|
sourceHandle: "bottom",
|
|
targetHandle: "bottom_target",
|
|
animated: false,
|
|
style: {
|
|
...edge.style,
|
|
stroke: relationColor.strokeLight,
|
|
strokeWidth: 1.5,
|
|
strokeDasharray: "8,4",
|
|
opacity: 0.4,
|
|
},
|
|
};
|
|
}
|
|
|
|
// 포커스된 화면에서 생성된 연결선만 표시
|
|
const edgeSourceScreenId = (edge.data as any)?.sourceScreenId;
|
|
const isMyConnection = edgeSourceScreenId === focusedScreenId;
|
|
|
|
// 포커스된 화면과 관련 없는 메인-메인 엣지는 숨김
|
|
if (!isMyConnection) {
|
|
return {
|
|
...edge,
|
|
hidden: true,
|
|
};
|
|
}
|
|
|
|
return {
|
|
...edge,
|
|
sourceHandle: "bottom", // 고정: 서브테이블 구간 통과
|
|
targetHandle: "bottom_target", // 고정: 서브테이블 구간 통과
|
|
animated: true,
|
|
style: {
|
|
...edge.style,
|
|
stroke: relationColor.stroke, // 관계 유형별 진한 색상
|
|
strokeWidth: 2.5,
|
|
strokeDasharray: "8,4",
|
|
opacity: 1,
|
|
},
|
|
markerEnd: {
|
|
type: MarkerType.ArrowClosed,
|
|
color: relationColor.stroke,
|
|
width: 15,
|
|
height: 15,
|
|
},
|
|
};
|
|
}
|
|
|
|
return edge;
|
|
});
|
|
|
|
// 기존 엣지 + 조인 관계 엣지 합치기
|
|
return [...styledOriginalEdges, ...joinEdges];
|
|
}, [edges, nodes, selectedGroup, focusedScreenId, screen, screenSubTableMap, subTablesDataMap, screenTableMap]);
|
|
|
|
// 조건부 렌더링 (모든 훅 선언 후에 위치해야 함)
|
|
if (!screen && !selectedGroup) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center text-muted-foreground">
|
|
<div className="text-center">
|
|
<p className="text-sm">그룹 또는 화면을 선택하면</p>
|
|
<p className="text-sm">데이터 관계가 시각화됩니다</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center">
|
|
<div className="text-sm text-muted-foreground">로딩 중...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="h-full w-full">
|
|
{/* isViewReady가 false면 숨김 처리하여 깜빡임 방지 */}
|
|
<div className={`h-full w-full transition-opacity duration-0 ${isViewReady ? "opacity-100" : "opacity-0"}`}>
|
|
<ReactFlow
|
|
nodes={styledNodes}
|
|
edges={styledEdges}
|
|
onNodesChange={onNodesChange}
|
|
onEdgesChange={onEdgesChange}
|
|
onNodeClick={handleNodeClick}
|
|
nodeTypes={nodeTypes}
|
|
minZoom={0.3}
|
|
maxZoom={1.5}
|
|
proOptions={{ hideAttribution: true }}
|
|
>
|
|
<Background variant={BackgroundVariant.Dots} gap={20} size={1} color="#e2e8f0" />
|
|
<Controls position="bottom-right" />
|
|
</ReactFlow>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 외부 래퍼 컴포넌트 (ReactFlowProvider 포함)
|
|
export function ScreenRelationFlow(props: ScreenRelationFlowProps) {
|
|
return (
|
|
<ReactFlowProvider>
|
|
<ScreenRelationFlowInner {...props} />
|
|
</ReactFlowProvider>
|
|
);
|
|
}
|