seat-editor 3.6.39 → 3.6.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -171,95 +171,99 @@ export const useConnectionGraph = ({ svgRef, onEdgesChange, keyNode, mappingKey,
|
|
|
171
171
|
onEdgesChange === null || onEdgesChange === void 0 ? void 0 : onEdgesChange(edges);
|
|
172
172
|
};
|
|
173
173
|
const hasInitialEdges = useRef(false);
|
|
174
|
-
//
|
|
174
|
+
// 1. useEffect Inisialisasi: Jalankan HANYA jika belum diinisialisasi
|
|
175
175
|
useEffect(() => {
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
176
|
+
// Jika sudah pernah inisialisasi atau data belum siap, jangan jalankan lagi
|
|
177
|
+
// if (hasInitialEdges.current || !initialEdges?.length || !components) return;
|
|
178
|
+
const allElements = components === null || components === void 0 ? void 0 : components.map((table) => {
|
|
179
|
+
if (mappingKey && (table === null || table === void 0 ? void 0 : table[mappingKey])) {
|
|
180
|
+
return Object.assign({}, table === null || table === void 0 ? void 0 : table[mappingKey]);
|
|
181
|
+
}
|
|
182
|
+
return Object.assign({}, table);
|
|
183
|
+
});
|
|
184
|
+
console.log("allElements", allElements, components);
|
|
185
|
+
const transformAllEdges = initialEdges === null || initialEdges === void 0 ? void 0 : initialEdges.map((edge) => {
|
|
186
|
+
var _a, _b;
|
|
187
|
+
const fromElement = allElements === null || allElements === void 0 ? void 0 : allElements.find((el) => { var _a; return ((_a = el === null || el === void 0 ? void 0 : el[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _a !== void 0 ? _a : el.id) === edge.from; });
|
|
188
|
+
console.log("fromElement", fromElement);
|
|
189
|
+
if (!fromElement)
|
|
190
|
+
return null;
|
|
191
|
+
const { x: fromX, y: fromY, rotation: fromRotation, width: fromWidth, height: fromHeight } = fromElement;
|
|
192
|
+
const fromRotated = rotatePoint(fromWidth / 2, fromHeight / 2, fromRotation !== null && fromRotation !== void 0 ? fromRotation : 0);
|
|
193
|
+
const fromCx = fromX + fromRotated.x;
|
|
194
|
+
const fromCy = fromY + fromRotated.y;
|
|
195
|
+
let fromLx = 0, fromLy = 0;
|
|
196
|
+
const fromHw = fromWidth / 2;
|
|
197
|
+
const fromHh = fromHeight / 2;
|
|
198
|
+
if (edge.fromPos.name === "top") {
|
|
199
|
+
fromLx = 0;
|
|
200
|
+
fromLy = -fromHh;
|
|
201
|
+
}
|
|
202
|
+
else if (edge.fromPos.name === "right") {
|
|
203
|
+
fromLx = fromHw;
|
|
204
|
+
fromLy = 0;
|
|
205
|
+
}
|
|
206
|
+
else if (edge.fromPos.name === "bottom") {
|
|
207
|
+
fromLx = 0;
|
|
208
|
+
fromLy = fromHh;
|
|
209
|
+
}
|
|
210
|
+
else if (edge.fromPos.name === "left") {
|
|
211
|
+
fromLx = -fromHw;
|
|
212
|
+
fromLy = 0;
|
|
213
|
+
}
|
|
214
|
+
const rad = ((fromRotation !== null && fromRotation !== void 0 ? fromRotation : 0) * Math.PI) / 180;
|
|
215
|
+
const fromPos = {
|
|
216
|
+
x: fromCx + fromLx * Math.cos(rad) - fromLy * Math.sin(rad),
|
|
217
|
+
y: fromCy + fromLx * Math.sin(rad) + fromLy * Math.cos(rad),
|
|
218
|
+
name: edge.fromPos.name,
|
|
219
|
+
};
|
|
220
|
+
const toElement = allElements === null || allElements === void 0 ? void 0 : allElements.find((el) => { var _a; return ((_a = el === null || el === void 0 ? void 0 : el[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _a !== void 0 ? _a : el.id) === edge.to; });
|
|
221
|
+
if (!toElement)
|
|
222
|
+
return null;
|
|
223
|
+
const { x: toX, y: toY, rotation: toRotation, width: toWidth, height: toHeight } = toElement;
|
|
224
|
+
const toRotated = rotatePoint(toWidth / 2, toHeight / 2, toRotation !== null && toRotation !== void 0 ? toRotation : 0);
|
|
225
|
+
const toCx = toX + toRotated.x;
|
|
226
|
+
const toCy = toY + toRotated.y;
|
|
227
|
+
let toLx = 0, toLy = 0;
|
|
228
|
+
const toHw = toWidth / 2;
|
|
229
|
+
const toHh = toHeight / 2;
|
|
230
|
+
if (edge.toPos.name === "top") {
|
|
231
|
+
toLx = 0;
|
|
232
|
+
toLy = -toHh;
|
|
233
|
+
}
|
|
234
|
+
else if (edge.toPos.name === "right") {
|
|
235
|
+
toLx = toHw;
|
|
236
|
+
toLy = 0;
|
|
237
|
+
}
|
|
238
|
+
else if (edge.toPos.name === "bottom") {
|
|
239
|
+
toLx = 0;
|
|
240
|
+
toLy = toHh;
|
|
241
|
+
}
|
|
242
|
+
else if (edge.toPos.name === "left") {
|
|
243
|
+
toLx = -toHw;
|
|
244
|
+
toLy = 0;
|
|
245
|
+
}
|
|
246
|
+
const rad2 = ((toRotation !== null && toRotation !== void 0 ? toRotation : 0) * Math.PI) / 180;
|
|
247
|
+
const toPos = {
|
|
248
|
+
x: toCx + toLx * Math.cos(rad2) - toLy * Math.sin(rad2),
|
|
249
|
+
y: toCy + toLx * Math.sin(rad2) + toLy * Math.cos(rad2),
|
|
250
|
+
name: edge.toPos.name,
|
|
251
|
+
};
|
|
252
|
+
return Object.assign(Object.assign({}, edge), { from: (_a = fromElement === null || fromElement === void 0 ? void 0 : fromElement[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _a !== void 0 ? _a : fromElement.id, to: (_b = toElement === null || toElement === void 0 ? void 0 : toElement[groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.dataKey]) !== null && _b !== void 0 ? _b : toElement.id, fromPos,
|
|
253
|
+
toPos });
|
|
254
|
+
});
|
|
255
|
+
const filteredEdges = transformAllEdges === null || transformAllEdges === void 0 ? void 0 : transformAllEdges.filter((el) => el !== null);
|
|
256
|
+
// Tandai bahwa inisialisasi sukses sebelum setEdges agar useEffect kedua tidak kaget
|
|
257
|
+
hasInitialEdges.current = true;
|
|
258
|
+
console.log("filteredEdges", filteredEdges, transformAllEdges);
|
|
259
|
+
setEdges(filteredEdges);
|
|
260
|
+
}, [initialEdges, components, groupSelection, mappingKey]); // Hapus 'edges' dari sini
|
|
261
|
+
// 2. useEffect Trigger Perubahan: Hanya kirim ke parent jika user memicu perubahan baru
|
|
259
262
|
useEffect(() => {
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
+
// Hanya panggil onUpdateEdges jika inisialisasi awal sudah selesai
|
|
264
|
+
// DAN data edges saat ini memang berbeda dari initialEdges bawaan parent
|
|
265
|
+
if (hasInitialEdges.current && !isEqual(edges, initialEdges)) {
|
|
266
|
+
onUpdateEdges === null || onUpdateEdges === void 0 ? void 0 : onUpdateEdges();
|
|
263
267
|
}
|
|
264
268
|
}, [edges]);
|
|
265
269
|
return {
|