@zenuml/core 3.39.1 → 3.39.2
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.
- package/confluence-iframe-content.html +312 -0
- package/confluence-test.html +491 -0
- package/dist/zenuml.esm.mjs +5943 -5963
- package/dist/zenuml.js +464 -464
- package/package.json +1 -1
|
@@ -0,0 +1,312 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>ZenUML Diagram - Confluence Macro</title>
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 16px;
|
|
11
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
12
|
+
background: #ffffff;
|
|
13
|
+
height: 100vh;
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.macro-wrapper {
|
|
18
|
+
background: white;
|
|
19
|
+
border-radius: 4px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.macro-toolbar {
|
|
23
|
+
background: #f7f8f9;
|
|
24
|
+
border-bottom: 1px solid #dfe1e6;
|
|
25
|
+
padding: 8px 12px;
|
|
26
|
+
display: flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
justify-content: space-between;
|
|
29
|
+
margin: -16px -16px 16px -16px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.macro-title {
|
|
33
|
+
font-size: 14px;
|
|
34
|
+
font-weight: 600;
|
|
35
|
+
color: #42526e;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.macro-actions {
|
|
39
|
+
display: flex;
|
|
40
|
+
gap: 8px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.macro-btn {
|
|
44
|
+
background: none;
|
|
45
|
+
border: 1px solid #dfe1e6;
|
|
46
|
+
color: #42526e;
|
|
47
|
+
padding: 4px 8px;
|
|
48
|
+
border-radius: 3px;
|
|
49
|
+
font-size: 12px;
|
|
50
|
+
cursor: pointer;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.macro-btn:hover {
|
|
54
|
+
background: #f4f5f7;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.content-area {
|
|
58
|
+
padding: 20px 0;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.diagram-header {
|
|
62
|
+
text-align: center;
|
|
63
|
+
margin-bottom: 24px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.diagram-title {
|
|
67
|
+
font-size: 24px;
|
|
68
|
+
font-weight: 600;
|
|
69
|
+
color: #172b4d;
|
|
70
|
+
margin-bottom: 8px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.diagram-subtitle {
|
|
74
|
+
color: #5e6c84;
|
|
75
|
+
font-size: 14px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
#diagram-container {
|
|
79
|
+
background: white;
|
|
80
|
+
border: 1px solid #dfe1e6;
|
|
81
|
+
border-radius: 6px;
|
|
82
|
+
min-height: calc(100vh - 200px);
|
|
83
|
+
height: auto;
|
|
84
|
+
position: relative;
|
|
85
|
+
overflow: visible;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.loading-state {
|
|
89
|
+
display: flex;
|
|
90
|
+
align-items: center;
|
|
91
|
+
justify-content: center;
|
|
92
|
+
height: 400px;
|
|
93
|
+
color: #5e6c84;
|
|
94
|
+
font-size: 16px;
|
|
95
|
+
flex-direction: column;
|
|
96
|
+
gap: 12px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.loading-spinner {
|
|
100
|
+
width: 32px;
|
|
101
|
+
height: 32px;
|
|
102
|
+
border: 3px solid #f4f5f7;
|
|
103
|
+
border-top: 3px solid #0052cc;
|
|
104
|
+
border-radius: 50%;
|
|
105
|
+
animation: spin 1s linear infinite;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
@keyframes spin {
|
|
109
|
+
0% { transform: rotate(0deg); }
|
|
110
|
+
100% { transform: rotate(360deg); }
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.debug-info {
|
|
114
|
+
position: fixed;
|
|
115
|
+
top: 10px;
|
|
116
|
+
right: 10px;
|
|
117
|
+
background: rgba(0,0,0,0.8);
|
|
118
|
+
color: white;
|
|
119
|
+
padding: 12px;
|
|
120
|
+
border-radius: 4px;
|
|
121
|
+
font-family: 'Monaco', 'Menlo', monospace;
|
|
122
|
+
font-size: 11px;
|
|
123
|
+
z-index: 200;
|
|
124
|
+
max-width: 280px;
|
|
125
|
+
line-height: 1.4;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.debug-info h4 {
|
|
129
|
+
margin: 0 0 8px 0;
|
|
130
|
+
color: #4a9eff;
|
|
131
|
+
font-size: 12px;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.debug-item {
|
|
135
|
+
margin: 4px 0;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.footer-content {
|
|
139
|
+
margin-top: 40px;
|
|
140
|
+
padding-top: 20px;
|
|
141
|
+
border-top: 1px solid #f4f5f7;
|
|
142
|
+
text-align: center;
|
|
143
|
+
color: #5e6c84;
|
|
144
|
+
font-size: 14px;
|
|
145
|
+
}
|
|
146
|
+
</style>
|
|
147
|
+
</head>
|
|
148
|
+
<body>
|
|
149
|
+
<div class="macro-wrapper">
|
|
150
|
+
<!-- Macro Toolbar (similar to Confluence macro header) -->
|
|
151
|
+
<div class="macro-toolbar">
|
|
152
|
+
<div class="macro-title">ZenUML Sequence Diagram</div>
|
|
153
|
+
<div class="macro-actions">
|
|
154
|
+
<button class="macro-btn">Edit</button>
|
|
155
|
+
<button class="macro-btn">⚙️</button>
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
|
|
159
|
+
<div class="content-area">
|
|
160
|
+
<div class="diagram-header">
|
|
161
|
+
<h1 class="diagram-title">Order Processing Flow</h1>
|
|
162
|
+
<div class="diagram-subtitle">Interactive sequence diagram showing order processing workflow</div>
|
|
163
|
+
</div>
|
|
164
|
+
|
|
165
|
+
<div id="diagram-container">
|
|
166
|
+
<div class="loading-state">
|
|
167
|
+
<div class="loading-spinner"></div>
|
|
168
|
+
<div>Loading ZenUML diagram...</div>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
|
|
172
|
+
<div class="footer-content">
|
|
173
|
+
<p>Scroll up and down to test the sticky participant effect</p>
|
|
174
|
+
<p><small>This diagram is embedded in a Confluence-style iframe environment</small></p>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<div class="debug-info" id="debug-info">
|
|
180
|
+
<h4>Iframe Debug Info</h4>
|
|
181
|
+
<div class="debug-item" id="iframe-scroll">Iframe scroll: 0px</div>
|
|
182
|
+
<div class="debug-item" id="parent-scroll">Parent scroll: 0px</div>
|
|
183
|
+
<div class="debug-item" id="sticky-offset">Sticky offset: 0</div>
|
|
184
|
+
<div class="debug-item" id="external-shift">External shift: 0</div>
|
|
185
|
+
<div class="debug-item" id="is-iframe">Is iframe: true</div>
|
|
186
|
+
<div class="debug-item" id="participant-count">Participants: 0</div>
|
|
187
|
+
</div>
|
|
188
|
+
|
|
189
|
+
<script type="module">
|
|
190
|
+
// Configuration matching the Confluence environment
|
|
191
|
+
const urlParams = new URLSearchParams(window.location.search);
|
|
192
|
+
const stickyOffset = 56;
|
|
193
|
+
const externalShift = parseInt(urlParams.get('externalShift') || '0');
|
|
194
|
+
|
|
195
|
+
// Update debug info
|
|
196
|
+
function updateDebugInfo() {
|
|
197
|
+
try {
|
|
198
|
+
const parentScroll = window.parent ? (window.parent.pageYOffset || window.parent.scrollY || 0) : 0;
|
|
199
|
+
|
|
200
|
+
document.getElementById('iframe-scroll').textContent = `Iframe scroll: ${window.scrollY}px`;
|
|
201
|
+
document.getElementById('parent-scroll').textContent = `Parent scroll: ${parentScroll}px`;
|
|
202
|
+
document.getElementById('sticky-offset').textContent = `Sticky offset: ${stickyOffset}px`;
|
|
203
|
+
document.getElementById('external-shift').textContent = `External shift: ${externalShift}px`;
|
|
204
|
+
document.getElementById('is-iframe').textContent = `Is iframe: ${window !== window.parent}`;
|
|
205
|
+
|
|
206
|
+
const participantElements = document.querySelectorAll('[data-participant-id]');
|
|
207
|
+
document.getElementById('participant-count').textContent = `Participants: ${participantElements.length}`;
|
|
208
|
+
} catch (e) {
|
|
209
|
+
console.warn('Debug info update failed (likely cross-origin):', e.message);
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
// Listen for scroll events (both iframe and parent)
|
|
214
|
+
window.addEventListener('scroll', updateDebugInfo);
|
|
215
|
+
try {
|
|
216
|
+
window.parent.addEventListener('scroll', updateDebugInfo);
|
|
217
|
+
} catch (e) {
|
|
218
|
+
console.warn('Cannot listen to parent scroll (cross-origin)');
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
// ZenUML content for testing - simple but comprehensive
|
|
222
|
+
const zenUmlCode = `RET ret = A.methodA() {
|
|
223
|
+
new X()
|
|
224
|
+
B.method
|
|
225
|
+
B.method
|
|
226
|
+
B.method
|
|
227
|
+
C.method
|
|
228
|
+
C.method
|
|
229
|
+
C.invoke
|
|
230
|
+
B.method() {
|
|
231
|
+
if (X) {
|
|
232
|
+
C.methodC() {
|
|
233
|
+
a = A.methodA(111) {
|
|
234
|
+
D.method
|
|
235
|
+
D.method()
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
while (Y) {
|
|
240
|
+
C.methodC() {
|
|
241
|
+
A.methodA()
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
}`;
|
|
246
|
+
|
|
247
|
+
// Load ZenUML when page loads
|
|
248
|
+
async function loadZenUML() {
|
|
249
|
+
try {
|
|
250
|
+
// Import ZenUML modules from the dev server
|
|
251
|
+
const { createConfig } = await import('/src/config.ts');
|
|
252
|
+
const { initZenUml } = await import('/src/main.tsx');
|
|
253
|
+
|
|
254
|
+
// Clear loading state
|
|
255
|
+
const container = document.getElementById('diagram-container');
|
|
256
|
+
container.innerHTML = '<pre class="zenuml"></pre>';
|
|
257
|
+
|
|
258
|
+
const preElement = container.querySelector('pre.zenuml');
|
|
259
|
+
const zenUmlInstance = initZenUml(preElement);
|
|
260
|
+
|
|
261
|
+
// Create configuration for Confluence environment
|
|
262
|
+
const config = createConfig({
|
|
263
|
+
stickyOffset: stickyOffset,
|
|
264
|
+
externalViewportShift: externalShift,
|
|
265
|
+
theme: 'theme-simple',
|
|
266
|
+
onContentChange: (code) => {
|
|
267
|
+
console.log('ZenUML content changed:', code?.length || 0, 'characters');
|
|
268
|
+
}
|
|
269
|
+
});
|
|
270
|
+
|
|
271
|
+
console.log('ZenUML Config for Confluence:', config);
|
|
272
|
+
|
|
273
|
+
// Render the diagram
|
|
274
|
+
await zenUmlInstance.render(zenUmlCode, config);
|
|
275
|
+
console.log('ZenUML diagram rendered successfully in Confluence iframe');
|
|
276
|
+
|
|
277
|
+
// Update debug info after render
|
|
278
|
+
updateDebugInfo();
|
|
279
|
+
|
|
280
|
+
} catch (error) {
|
|
281
|
+
console.error('Failed to load ZenUML in Confluence iframe:', error);
|
|
282
|
+
document.getElementById('diagram-container').innerHTML = `
|
|
283
|
+
<div class="loading-state" style="color: #de350b;">
|
|
284
|
+
<div>❌ Error loading ZenUML</div>
|
|
285
|
+
<div style="font-size: 12px; margin-top: 8px;">${error.message}</div>
|
|
286
|
+
<div style="font-size: 11px; margin-top: 4px;">Make sure the dev server is running on port 8080</div>
|
|
287
|
+
</div>
|
|
288
|
+
`;
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
// Initialize when DOM is ready
|
|
293
|
+
if (document.readyState === 'loading') {
|
|
294
|
+
document.addEventListener('DOMContentLoaded', loadZenUML);
|
|
295
|
+
} else {
|
|
296
|
+
loadZenUML();
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
// Initial debug update
|
|
300
|
+
updateDebugInfo();
|
|
301
|
+
|
|
302
|
+
// Log iframe context for debugging
|
|
303
|
+
console.log('Confluence iframe context:', {
|
|
304
|
+
isIframe: window !== window.parent,
|
|
305
|
+
stickyOffset,
|
|
306
|
+
externalShift,
|
|
307
|
+
location: window.location.href,
|
|
308
|
+
parentAvailable: !!window.parent
|
|
309
|
+
});
|
|
310
|
+
</script>
|
|
311
|
+
</body>
|
|
312
|
+
</html>
|