Skip to content

Commit d78f0b9

Browse files
seroakseroak
committed
시각화 엔진 리펙토링
1 parent a64b555 commit d78f0b9

File tree

4 files changed

+210
-113
lines changed

4 files changed

+210
-113
lines changed

‎src/pages/Visualization/components/RightSection/hooks/processors/processorDispatcher.ts‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
import { ProcessorContext, ProcessorResult, ProcessorFunction } from "./types";
2+
import { processEndUserFunc } from "./processEndUserFunc";
3+
import { processAppend } from "./processAppend";
4+
import { processAssign } from "./processAssign";
5+
import { processCreateCallStack } from "./processCreateCallStack";
6+
import { processIfElseDefine } from "./processIfElseDefine";
7+
import { processCodeFlow } from "./processCodeFlow";
8+
import {
9+
EndUserFuncDto,
10+
AppendDto,
11+
VariablesDto,
12+
CreateCallStackDto,
13+
IfElseDto,
14+
ForDto,
15+
PrintDto,
16+
IfElseChangeDto,
17+
CodeFlowVariableDto,
18+
WhileDto,
19+
} from "@/pages/Visualization/types/dto";
20+
21+
const endUserFuncWrapper: ProcessorFunction = (context) => {
22+
const result = processEndUserFunc({
23+
preprocessedCode: context.preprocessedCode as EndUserFuncDto,
24+
accCodeFlow: context.accCodeFlow,
25+
accDataStructures: context.accDataStructures,
26+
usedName: context.usedName,
27+
prevTrackingId: context.prevTrackingId,
28+
prevTrackingDepth: context.prevTrackingDepth,
29+
});
30+
return {
31+
accCodeFlow: result.accCodeFlow,
32+
accDataStructures: result.accDataStructures,
33+
usedName: result.usedName,
34+
arrowTexts: [result.arrowText],
35+
highlightIds: [result.highlightId],
36+
newTrackingId: result.newTrackingId,
37+
newTrackingDepth: result.newTrackingDepth,
38+
};
39+
};
40+
41+
const appendWrapper: ProcessorFunction = (context) => {
42+
const result = processAppend({
43+
preprocessedCode: context.preprocessedCode as AppendDto,
44+
accCodeFlow: context.accCodeFlow,
45+
accDataStructures: context.accDataStructures,
46+
usedId: context.usedId,
47+
});
48+
return {
49+
accCodeFlow: result.accCodeFlow,
50+
accDataStructures: result.accDataStructures,
51+
usedId: result.usedId,
52+
arrowTexts: [result.arrowText],
53+
highlightIds: [result.highlightId],
54+
};
55+
};
56+
57+
const assignWrapper: ProcessorFunction = (context) => {
58+
const result = processAssign({
59+
preprocessedCode: context.preprocessedCode as VariablesDto,
60+
accCodeFlow: context.accCodeFlow,
61+
accDataStructures: context.accDataStructures,
62+
usedName: context.usedName,
63+
usedId: context.usedId,
64+
});
65+
return {
66+
accCodeFlow: result.accCodeFlow,
67+
accDataStructures: result.accDataStructures,
68+
usedName: result.usedName,
69+
usedId: result.usedId,
70+
arrowTexts: result.arrowTexts,
71+
highlightIds: result.highlightIds,
72+
};
73+
};
74+
75+
const createCallStackWrapper: ProcessorFunction = (context) => {
76+
const result = processCreateCallStack({
77+
preprocessedCode: context.preprocessedCode as CreateCallStackDto,
78+
accDataStructures: context.accDataStructures,
79+
usedName: context.usedName,
80+
});
81+
return {
82+
accDataStructures: result.accDataStructures,
83+
usedName: result.usedName,
84+
arrowTexts: [result.arrowText],
85+
highlightIds: [result.highlightId],
86+
};
87+
};
88+
89+
const ifElseDefineWrapper: ProcessorFunction = (context) => {
90+
const result = processIfElseDefine({
91+
preprocessedCode: context.preprocessedCode as IfElseDto,
92+
accCodeFlow: context.accCodeFlow,
93+
usedId: context.usedId,
94+
prevTrackingId: context.prevTrackingId,
95+
prevTrackingDepth: context.prevTrackingDepth,
96+
});
97+
return {
98+
accCodeFlow: result.accCodeFlow,
99+
usedId: result.usedId,
100+
arrowTexts: [result.arrowText],
101+
highlightIds: [result.highlightId],
102+
newTrackingId: result.newTrackingId,
103+
newTrackingDepth: result.newTrackingDepth,
104+
};
105+
};
106+
107+
const codeFlowWrapper: ProcessorFunction = (context) => {
108+
const result = processCodeFlow({
109+
preprocessedCode: context.preprocessedCode as ForDto | PrintDto | IfElseChangeDto | CodeFlowVariableDto | WhileDto,
110+
accCodeFlow: context.accCodeFlow,
111+
usedId: context.usedId,
112+
activate: context.activate,
113+
prevTrackingId: context.prevTrackingId,
114+
prevTrackingDepth: context.prevTrackingDepth,
115+
});
116+
return {
117+
accCodeFlow: result.accCodeFlow,
118+
usedId: result.usedId,
119+
activate: result.activate,
120+
arrowTexts: [result.arrowText],
121+
highlightIds: [result.highlightId],
122+
consoleLog: result.consoleLog,
123+
newTrackingId: result.newTrackingId,
124+
newTrackingDepth: result.newTrackingDepth,
125+
};
126+
};
127+
128+
const processorMap: Record<string, ProcessorFunction> = {
129+
enduserfunc: endUserFuncWrapper,
130+
append: appendWrapper,
131+
assign: assignWrapper,
132+
createcallstack: createCallStackWrapper,
133+
ifelsedefine: ifElseDefineWrapper,
134+
};
135+
136+
export const dispatchProcessor = (codeType: string, context: ProcessorContext): ProcessorResult => {
137+
const processor = processorMap[codeType] || codeFlowWrapper;
138+
return processor(context);
139+
};

‎src/pages/Visualization/components/RightSection/hooks/processors/types.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { ActivateItem } from "@/pages/Visualization/types/activateItem";
2+
import { WrapperDataStructureItem } from "@/pages/Visualization/types/dataStructuresItem/wrapperDataStructureItem";
3+
import { usedNameObjectType } from "@/pages/Visualization/types/dataStructuresItem/usedNameObjectType";
4+
import { State } from "../../types";
5+
import { ValidTypeDto } from "@/pages/Visualization/types/dto/ValidTypeDto";
6+
7+
// Union type for all possible preprocessed code DTOs
8+
export type PreprocessedCode = ValidTypeDto;
9+
10+
export interface ProcessorContext {
11+
preprocessedCode: PreprocessedCode;
12+
accCodeFlow: State;
13+
accDataStructures: WrapperDataStructureItem;
14+
usedName: usedNameObjectType;
15+
usedId: number[];
16+
activate: ActivateItem[];
17+
prevTrackingId: number;
18+
prevTrackingDepth: number;
19+
}
20+
21+
export interface ProcessorResult {
22+
accCodeFlow?: State;
23+
accDataStructures?: WrapperDataStructureItem;
24+
usedName?: usedNameObjectType;
25+
usedId?: number[];
26+
activate?: ActivateItem[];
27+
arrowTexts: string[]; // Changed to array to support multiple texts (e.g. assign)
28+
highlightIds: number[]; // Changed to array
29+
consoleLog?: string;
30+
newTrackingId?: number;
31+
newTrackingDepth?: number;
32+
}
33+
34+
export type ProcessorFunction = (context: ProcessorContext) => ProcessorResult;

‎src/pages/Visualization/components/RightSection/hooks/usePreprocessedCodesProcessor.ts‎

Lines changed: 27 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,19 @@ import { useEffect, useState } from "react";
22
import { PreprocessedCodesContext } from "../../../context/PreProcessedCodesContext";
33
import { useContext } from "react";
44
import { ActivateItem } from "@/pages/Visualization/types/activateItem";
5-
import { VariablesDto } from "@/pages/Visualization/types/dto/variablesDto";
6-
import { ForDto } from "@/pages/Visualization/types/dto/forDto";
7-
import { PrintDto } from "@/pages/Visualization/types/dto/printDto";
8-
import { IfElseDto } from "@/pages/Visualization/types/dto/ifElseDto";
9-
import { CodeFlowVariableDto } from "@/pages/Visualization/types/dto/codeFlowVariableDto";
10-
import { WhileDto } from "@/pages/Visualization/types/dto/whileDto";
115
import { AllDataStructureItem } from "@/pages/Visualization/types/dataStructuresItem/allDataStructureItem";
126
import { WrapperDataStructureItem } from "@/pages/Visualization/types/dataStructuresItem/wrapperDataStructureItem";
13-
import { CreateCallStackDto } from "@/pages/Visualization/types/dto/createCallStackDto";
14-
import { EndUserFuncDto } from "@/pages/Visualization/types/dto/endUserFuncDto";
157
import { usedNameObjectType } from "../../../types/dataStructuresItem/usedNameObjectType";
16-
import { AppendDto } from "../../../types/dto/appendDto";
17-
import { IfElseChangeDto } from "@/pages/Visualization/types/dto/ifElseChangeDto";
188
import { State } from "../types";
199
import { useConsoleStore, useCodeFlowLengthStore } from "@/store/console";
2010
import { useEditorStore } from "@/store/editor";
2111
import { useArrowStore } from "@/store/arrow";
2212
import _ from "lodash";
2313

2414
// Processors
25-
import { processEndUserFunc } from "./processors/processEndUserFunc";
26-
import { processAppend } from "./processors/processAppend";
27-
import { processAssign } from "./processors/processAssign";
28-
import { processCreateCallStack } from "./processors/processCreateCallStack";
29-
import { processIfElseDefine } from "./processors/processIfElseDefine";
30-
import { processCodeFlow } from "./processors/processCodeFlow";
31-
import {
32-
resetDataStructuresLight,
33-
calculateToLightStructures,
34-
applyLightToStructures,
35-
} from "./processors/utils";
15+
import { dispatchProcessor } from "./processors/processorDispatcher";
16+
import { ProcessorContext } from "./processors/types";
17+
import { resetDataStructuresLight, calculateToLightStructures, applyLightToStructures } from "./processors/utils";
3618

3719
interface ProcessingState {
3820
prevTrackingId: number;
@@ -113,98 +95,30 @@ export const usePreprocessedCodesProcessor = () => {
11395

11496
const codeType = preprocessedCode.type.toLowerCase();
11597

116-
// 타입별 처리
117-
if (codeType === "enduserfunc") {
118-
const result = processEndUserFunc({
119-
preprocessedCode: preprocessedCode as EndUserFuncDto,
120-
accCodeFlow: state.accCodeFlow,
121-
accDataStructures: state.accDataStructures,
122-
usedName: state.usedName,
123-
prevTrackingId: state.prevTrackingId,
124-
prevTrackingDepth: state.prevTrackingDepth,
125-
});
126-
127-
state.accCodeFlow = result.accCodeFlow;
128-
state.accDataStructures = result.accDataStructures;
129-
state.usedName = result.usedName;
130-
state.arrowTexts.push(result.arrowText);
131-
state.highlightLine.push(result.highlightId);
132-
state.prevTrackingId = result.newTrackingId;
133-
state.prevTrackingDepth = result.newTrackingDepth;
134-
} else if (codeType === "append") {
135-
const result = processAppend({
136-
preprocessedCode: preprocessedCode as AppendDto,
137-
accCodeFlow: state.accCodeFlow,
138-
accDataStructures: state.accDataStructures,
139-
usedId: state.usedId,
140-
});
141-
142-
state.accCodeFlow = result.accCodeFlow;
143-
state.accDataStructures = result.accDataStructures;
144-
state.usedId = result.usedId;
145-
state.arrowTexts.push(result.arrowText);
146-
state.highlightLine.push(result.highlightId);
147-
} else if (codeType === "assign") {
148-
const result = processAssign({
149-
preprocessedCode: preprocessedCode as VariablesDto,
150-
accCodeFlow: state.accCodeFlow,
151-
accDataStructures: state.accDataStructures,
152-
usedName: state.usedName,
153-
usedId: state.usedId,
154-
});
155-
156-
state.accCodeFlow = result.accCodeFlow;
157-
state.accDataStructures = result.accDataStructures;
158-
state.usedName = result.usedName;
159-
state.usedId = result.usedId;
160-
state.arrowTexts.push(...result.arrowTexts);
161-
state.highlightLine.push(...result.highlightIds);
162-
} else if (codeType === "createcallstack") {
163-
const result = processCreateCallStack({
164-
preprocessedCode: preprocessedCode as CreateCallStackDto,
165-
accDataStructures: state.accDataStructures,
166-
usedName: state.usedName,
167-
});
168-
169-
state.accDataStructures = result.accDataStructures;
170-
state.usedName = result.usedName;
171-
state.arrowTexts.push(result.arrowText);
172-
state.highlightLine.push(result.highlightId);
173-
} else if (codeType === "ifelsedefine") {
174-
const result = processIfElseDefine({
175-
preprocessedCode: preprocessedCode as IfElseDto,
176-
accCodeFlow: state.accCodeFlow,
177-
usedId: state.usedId,
178-
prevTrackingId: state.prevTrackingId,
179-
prevTrackingDepth: state.prevTrackingDepth,
180-
});
181-
182-
state.accCodeFlow = result.accCodeFlow;
183-
state.usedId = result.usedId;
184-
state.arrowTexts.push(result.arrowText);
185-
state.highlightLine.push(result.highlightId);
186-
state.prevTrackingId = result.newTrackingId;
187-
state.prevTrackingDepth = result.newTrackingDepth;
188-
} else {
189-
// 기타 타입 (for, print, while, variable 등)
190-
const result = processCodeFlow({
191-
preprocessedCode: preprocessedCode as ForDto | PrintDto | IfElseChangeDto | CodeFlowVariableDto | WhileDto,
192-
accCodeFlow: state.accCodeFlow,
193-
usedId: state.usedId,
194-
activate: state.activate,
195-
prevTrackingId: state.prevTrackingId,
196-
prevTrackingDepth: state.prevTrackingDepth,
197-
});
198-
199-
state.accCodeFlow = result.accCodeFlow;
200-
state.usedId = result.usedId;
201-
state.activate = result.activate;
202-
state.arrowTexts.push(result.arrowText);
203-
state.highlightLine.push(result.highlightId);
204-
state.accConsoleLog += result.consoleLog;
205-
state.prevTrackingId = result.newTrackingId;
206-
state.prevTrackingDepth = result.newTrackingDepth;
207-
}
98+
const context: ProcessorContext = {
99+
preprocessedCode,
100+
accCodeFlow: state.accCodeFlow,
101+
accDataStructures: state.accDataStructures,
102+
usedName: state.usedName,
103+
usedId: state.usedId,
104+
activate: state.activate,
105+
prevTrackingId: state.prevTrackingId,
106+
prevTrackingDepth: state.prevTrackingDepth,
107+
};
108+
109+
const result = dispatchProcessor(codeType, context);
110+
111+
if (result.accCodeFlow) state.accCodeFlow = result.accCodeFlow;
112+
if (result.accDataStructures) state.accDataStructures = result.accDataStructures;
113+
if (result.usedName) state.usedName = result.usedName;
114+
if (result.usedId) state.usedId = result.usedId;
115+
if (result.activate) state.activate = result.activate;
116+
if (result.consoleLog) state.accConsoleLog += result.consoleLog;
117+
if (result.newTrackingId !== undefined) state.prevTrackingId = result.newTrackingId;
118+
if (result.newTrackingDepth !== undefined) state.prevTrackingDepth = result.newTrackingDepth;
119+
120+
state.arrowTexts.push(...result.arrowTexts);
121+
state.highlightLine.push(...result.highlightIds);
208122

209123
// toLightStructures 계산 및 적용
210124
const { toLightStructures, accCodeFlow: updatedCodeFlow } = calculateToLightStructures(

‎src/pages/Visualization/types/dto/index.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export * from "./variablesDto";
2+
export * from "./forDto";
3+
export * from "./printDto";
4+
export * from "./ifElseDto";
5+
export * from "./codeFlowVariableDto";
6+
export * from "./whileDto";
7+
export * from "./createCallStackDto";
8+
export * from "./endUserFuncDto";
9+
export * from "./appendDto";
10+
export * from "./ifElseChangeDto";

0 commit comments

Comments
 (0)