TechManWorkflow-JointJS/test-container-deletion-optimization.html at main · kelvenray/TechManWorkflow-JointJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
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
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>容器删除优化测试 - TechManWorkflow JointJS</title>
    <link rel="stylesheet" href="js/lib/jointjs-3.7.7.min.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f5f5f5;
            overflow: hidden;
        }

        #sidebar {
            position: fixed;
            left: 0;
            top: 0;
            width: 250px;
            height: 100vh;
            background: white;
            border-right: 1px solid #ddd;
            padding: 20px;
            box-sizing: border-box;
            z-index: 1000;
            overflow-y: auto;
        }

        #paper-container {
            position: absolute;
            left: 250px;
            top: 0;
            right: 0;
            bottom: 0;
            background: #f9f9f9;
        }

        .test-section {
            margin-bottom: 30px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #e9ecef;
        }

        .test-section h3 {
            margin: 0 0 15px 0;
            color: #495057;
            font-size: 16px;
        }

        .test-button {
            display: block;
            width: 100%;
            padding: 10px;
            margin: 8px 0;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.2s;
        }

        .test-button:hover {
            background: #0056b3;
        }

        .test-button.danger {
            background: #dc3545;
        }

        .test-button.danger:hover {
            background: #c82333;
        }

        .test-button.success {
            background: #28a745;
        }

        .test-button.success:hover {
            background: #218838;
        }

        .info-panel {
            background: #e7f3ff;
            border: 1px solid #b3d9ff;
            border-radius: 4px;
            padding: 12px;
            margin: 10px 0;
            font-size: 13px;
            line-height: 1.4;
        }

        .status-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .status-indicator.green {
            background: #28a745;
        }

        .status-indicator.red {
            background: #dc3545;
        }

        .status-indicator.yellow {
            background: #ffc107;
        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <div id="sidebar">
        <h2 style="margin-top: 0; color: #333;">容器删除优化测试</h2>

        <div class="info-panel">
            <strong>测试目标：</strong><br>
            验证容器删除时，嵌套节点保持位置和连接，只删除容器本身。
        </div>

        <div class="test-section">
            <h3>1. 创建测试场景</h3>
            <button class="test-button" onclick="createTestScenario()">创建测试容器和节点</button>
            <button class="test-button" onclick="createConnections()">创建节点连接</button>
        </div>

        <div class="test-section">
            <h3>2. 验证删除行为</h3>
            <button class="test-button danger" onclick="deleteContainer()">删除容器节点</button>
            <button class="test-button danger" onclick="deleteContainerDirect()">直接删除容器（调试）</button>
            <button class="test-button success" onclick="verifyResults()">验证结果</button>
        </div>

        <div class="test-section">
            <h3>3. 测试状态</h3>
            <div id="test-status">
                <div><span class="status-indicator yellow"></span>等待开始测试</div>
            </div>
        </div>

        <div class="test-section">
            <h3>4. 重置测试</h3>
            <button class="test-button" onclick="resetTest()">清空画布</button>
        </div>

        <div class="info-panel">
            <strong>预期行为：</strong><br>
            • 容器删除后，嵌套节点保持原位置<br>
            • 节点间的连接线保持完整<br>
            • 嵌套节点可以正常选择和移动<br>
            • 容器相关UI元素被清理
        </div>
    </div>

    <!-- 主画布容器 -->
    <div id="paper-container"></div>

    <!-- JointJS依赖库 -->
    <script src="js/lib/jquery-3.7.1.min.js"></script>
    <script src="js/lib/underscore-1.13.6.min.js"></script>
    <script src="js/lib/backbone-1.4.1.min.js"></script>
    <script src="js/lib/jointjs-3.7.7.min.js"></script>

    <!-- 应用模块 -->
    <script src="js/core/constants.js"></script>
    <script src="js/utils/helpers.js"></script>
    <script src="js/core/graph.js"></script>
    <script src="js/features/node-manager.js"></script>

    <script>
        // 测试应用实例
        let app = null;
        let nodeManager = null;
        let testContainer = null;
        let testNodes = [];
        let testLinks = [];

        // 初始化测试应用
        document.addEventListener('DOMContentLoaded', async () => {
            try {
                console.log('初始化容器删除优化测试...');

                // 创建工作流应用实例
                app = new WorkflowApp();
                await app.init();

                // 创建节点管理器
                nodeManager = new NodeManager(app);

                updateStatus('应用初始化完成', 'green');
                console.log('测试应用初始化完成');

            } catch (error) {
                console.error('测试应用初始化失败:', error);
                updateStatus('初始化失败: ' + error.message, 'red');
            }
        });

        // 创建测试场景
        function createTestScenario() {
            try {
                if (!app || !nodeManager) {
                    updateStatus('应用未初始化，请等待', 'red');
                    return;
                }

                console.log('创建测试场景...');

                // 清空现有内容
                app.graph.clear();
                testNodes = [];
                testLinks = [];
                testContainer = null;

                // 创建容器节点
                testContainer = nodeManager.createContainerNode(400, 300);
                if (!testContainer) {
                    throw new Error('容器节点创建失败');
                }
                testContainer.resize(300, 200);
                app.graph.addCell(testContainer);

                // 在容器内创建几个节点
                const node1 = nodeManager.createProcessNode(350, 250);
                const node2 = nodeManager.createDecisionNode(450, 250);
                const node3 = nodeManager.createProcessNode(350, 350);

                if (!node1 || !node2 || !node3) {
                    throw new Error('节点创建失败');
                }

                // 添加节点到图中
                app.graph.addCell([node1, node2, node3]);

                testNodes = [node1, node2, node3];

                // 手动嵌套节点到容器中
                setTimeout(() => {
                    try {
                        testNodes.forEach(node => {
                            testContainer.embed(node);
                            node.toFront();
                        });

                        updateStatus('测试场景创建完成 - 容器包含3个节点', 'green');
                        console.log('测试场景创建完成');
                    } catch (embedError) {
                        console.error('嵌套节点失败:', embedError);
                        updateStatus('嵌套节点失败: ' + embedError.message, 'red');
                    }
                }, 100);

            } catch (error) {
                console.error('创建测试场景失败:', error);
                updateStatus('创建场景失败: ' + error.message, 'red');
            }
        }

        // 创建节点连接
        function createConnections() {
            try {
                if (testNodes.length < 3) {
                    updateStatus('请先创建测试场景', 'red');
                    return;
                }

                console.log('创建节点连接...');

                // 创建连接线
                const link1 = new joint.shapes.standard.Link();
                link1.source(testNodes[0]);
                link1.target(testNodes[1]);
                link1.addTo(app.graph);

                const link2 = new joint.shapes.standard.Link();
                link2.source(testNodes[1]);
                link2.target(testNodes[2]);
                link2.addTo(app.graph);

                testLinks = [link1, link2];

                updateStatus('节点连接创建完成', 'green');
                console.log('节点连接创建完成');

            } catch (error) {
                console.error('创建连接失败:', error);
                updateStatus('创建连接失败: ' + error.message, 'red');
            }
        }

        // 删除容器
        function deleteContainer() {
            try {
                if (!testContainer) {
                    updateStatus('请先创建测试场景', 'red');
                    return;
                }

                console.log('删除容器节点...');

                // 记录删除前的节点位置和连接
                const nodePositionsBefore = testNodes.map(node => ({
                    id: node.id,
                    position: node.position(),
                    exists: !!app.graph.getCell(node.id)
                }));

                const linksBefore = testLinks.map(link => ({
                    id: link.id,
                    exists: !!app.graph.getCell(link.id)
                }));

                console.log('删除前状态:', { nodePositionsBefore, linksBefore });

                // 使用优化的删除方法
                console.log('调用 nodeManager.deleteNode...');
                try {
                    const deleteResult = nodeManager.deleteNode(testContainer);
                    console.log('删除结果:', deleteResult);
                    if (deleteResult) {
                        console.log('容器删除成功');
                    } else {
                        console.warn('容器删除返回false');
                    }
                } catch (deleteError) {
                    console.error('容器删除过程中出错:', deleteError);
                    updateStatus('删除过程出错: ' + deleteError.message, 'red');
                    return;
                }

                // 验证删除结果
                setTimeout(() => {
                    const nodePositionsAfter = testNodes.map(node => ({
                        id: node.id,
                        position: node.position(),
                        exists: !!app.graph.getCell(node.id)
                    }));

                    const linksAfter = testLinks.map(link => ({
                        id: link.id,
                        exists: !!app.graph.getCell(link.id)
                    }));

                    console.log('删除后状态:', { nodePositionsAfter, linksAfter });

                    updateStatus('容器已删除，请验证结果', 'yellow');
                }, 200);

            } catch (error) {
                console.error('删除容器失败:', error);
                updateStatus('删除容器失败: ' + error.message, 'red');
            }
        }

        // 直接删除容器（调试用）
        function deleteContainerDirect() {
            try {
                if (!testContainer) {
                    updateStatus('请先创建测试场景', 'red');
                    return;
                }

                console.log('直接删除容器节点（绕过ErrorHandler）...');

                // 记录删除前的状态
                const embeddedCells = testContainer.getEmbeddedCells ? testContainer.getEmbeddedCells() : [];
                console.log(`容器包含 ${embeddedCells.length} 个嵌套节点`);

                // 直接调用容器删除方法
                nodeManager.deleteContainerNode(testContainer);

                updateStatus('直接删除完成，请验证结果', 'yellow');

            } catch (error) {
                console.error('直接删除容器失败:', error);
                updateStatus('直接删除失败: ' + error.message, 'red');
            }
        }

        // 验证结果
        function verifyResults() {
            try {
                if (!app || !testContainer || testNodes.length === 0) {
                    updateStatus('请先创建测试场景并删除容器', 'red');
                    return;
                }

                console.log('验证测试结果...');

                let results = [];
                let allPassed = true;

                // 检查容器是否被删除
                const containerExists = !!app.graph.getCell(testContainer.id);
                if (containerExists) {
                    results.push('❌ 容器节点未被删除');
                    allPassed = false;
                } else {
                    results.push('✅ 容器节点已正确删除');
                }

                // 检查嵌套节点是否保留
                let nodesPreserved = 0;
                let nodeDetails = [];
                testNodes.forEach((node, index) => {
                    const exists = !!app.graph.getCell(node.id);
                    if (exists) {
                        nodesPreserved++;
                        nodeDetails.push(`节点${index + 1}: 保留`);
                    } else {
                        nodeDetails.push(`节点${index + 1}: 丢失`);
                    }
                });

                if (nodesPreserved === testNodes.length) {
                    results.push('✅ 所有嵌套节点已保留');
                } else {
                    results.push(`❌ 只有${nodesPreserved}/${testNodes.length}个节点被保留`);
                    results.push(`详情: ${nodeDetails.join(', ')}`);
                    allPassed = false;
                }

                // 检查连接线是否保留
                let linksPreserved = 0;
                let linkDetails = [];
                testLinks.forEach((link, index) => {
                    const exists = !!app.graph.getCell(link.id);
                    if (exists) {
                        linksPreserved++;
                        linkDetails.push(`连接${index + 1}: 保留`);
                    } else {
                        linkDetails.push(`连接${index + 1}: 丢失`);
                    }
                });

                if (testLinks.length === 0) {
                    results.push('⚠️ 未创建连接线，跳过连接验证');
                } else if (linksPreserved === testLinks.length) {
                    results.push('✅ 所有连接线已保留');
                } else {
                    results.push(`❌ 只有${linksPreserved}/${testLinks.length}个连接线被保留`);
                    results.push(`详情: ${linkDetails.join(', ')}`);
                    allPassed = false;
                }

                // 检查节点是否可以交互
                const firstNode = testNodes[0];
                if (firstNode && app.graph.getCell(firstNode.id)) {
                    const elementView = app.paper.findViewByModel(firstNode);
                    if (elementView) {
                        results.push('✅ 节点可以正常交互');
                    } else {
                        results.push('❌ 节点无法正常交互');
                        allPassed = false;
                    }
                } else {
                    results.push('❌ 第一个节点不存在，无法验证交互性');
                    allPassed = false;
                }

                // 检查节点位置是否保持
                let positionsPreserved = true;
                testNodes.forEach((node, index) => {
                    const currentNode = app.graph.getCell(node.id);
                    if (currentNode) {
                        const currentPos = currentNode.position();
                        // 简单检查节点是否在合理位置（不在原点）
                        if (currentPos.x === 0 && currentPos.y === 0) {
                            positionsPreserved = false;
                        }
                    }
                });

                if (positionsPreserved) {
                    results.push('✅ 节点位置已保持');
                } else {
                    results.push('❌ 节点位置未正确保持');
                    allPassed = false;
                }

                const statusText = allPassed ?
                    '测试通过！所有功能正常工作' :
                    '测试失败！存在问题需要修复';

                const statusColor = allPassed ? 'green' : 'red';

                updateStatus(statusText, statusColor);

                console.log('验证结果:', results);
                alert(results.join('\n'));

            } catch (error) {
                console.error('验证结果失败:', error);
                updateStatus('验证失败: ' + error.message, 'red');
            }
        }

        // 重置测试
        function resetTest() {
            try {
                app.graph.clear();
                testNodes = [];
                testLinks = [];
                testContainer = null;
                updateStatus('测试已重置', 'yellow');
                console.log('测试已重置');
            } catch (error) {
                console.error('重置测试失败:', error);
                updateStatus('重置失败: ' + error.message, 'red');
            }
        }

        // 更新状态显示
        function updateStatus(message, color = 'yellow') {
            const statusElement = document.getElementById('test-status');
            statusElement.innerHTML = `<div><span class="status-indicator ${color}"></span>${message}</div>`;
        }
    </script>
</body>
</html>