bpmn-studio-offline/index.html at master · Dragos-cloud/bpmn-studio-offline · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Security: Content Security Policy - Fully Offline -->
    <meta http-equiv="Content-Security-Policy" content="
        default-src 'self';
        script-src 'self' 'unsafe-inline';
        style-src 'self' 'unsafe-inline';
        font-src 'self' data:;
        img-src 'self' data: blob:;
        connect-src 'self';
        object-src 'none';
        base-uri 'self';
    ">

    <title>ORAND BPMN Studio</title>

    <!-- BPMN.js Styles - Local -->
    <link rel="stylesheet" href="css/diagram-js.css" />
    <link rel="stylesheet" href="css/bpmn.css" />

    <!-- ORAND Styles -->
    <link rel="stylesheet" href="css/orand-core.css" />
    <link rel="stylesheet" href="css/bpmn-studio.css" />
</head>
<body>

    <!-- Header -->
    <header>
        <div class="brand-area">
            <div class="brand-logo">ORAND</div>
            <div class="brand-tagline">BPMN Studio</div>
        </div>
        <div class="controls">
            <input type="file" id="file-input" accept=".bpmn,.xml">
            <button id="btn-simulate" class="secondary" onclick="window.BPMNStudio.toggleSimulation()">
                Start Simulation
            </button>
            <span class="separator"></span>
            <button class="secondary" onclick="window.BPMNUI.triggerUpload()">Open File</button>
            <button class="secondary" onclick="window.BPMNStudio.createNew()">New Diagram</button>
            <button onclick="window.BPMNExport.exportBPMN()">Save BPMN</button>
            <button onclick="window.BPMNExport.exportSVG()">Export SVG</button>
            <button onclick="window.BPMNExport.exportPDF()" style="background-color: #d32f2f;">Export PDF</button>
        </div>
    </header>

    <!-- Navigation Tabs -->
    <div class="tabs">
        <button class="tab-btn active" onclick="window.BPMNUI.switchTab('workspace')">Workspace</button>
        <button class="tab-btn" onclick="window.BPMNUI.switchTab('docs')">User Guide</button>
    </div>

    <!-- Main Content -->
    <main>
        <!-- Tab 1: Workspace -->
        <div id="workspace" class="tab-content active">
            <div class="workspace-container">
                <!-- Breadcrumb Navigation -->
                <div id="breadcrumb-nav" class="breadcrumb-nav hidden">
                    <span class="breadcrumb-icon">📍</span>
                    <div id="breadcrumb-path" class="breadcrumb-path"></div>
                </div>

                <div id="canvas"></div>

                <!-- Properties Panel -->
                <aside id="properties-panel" class="properties-panel">
                    <div class="properties-header">
                        <h3>Properties</h3>
                        <span id="prop-element-type" class="element-type">Select an element</span>
                    </div>

                    <div class="properties-content">
                        <div class="hint">Click on canvas elements to view and edit their properties.</div>

                        <!-- Basic Properties -->
                        <div class="property-section">
                            <h4>Basic Properties</h4>

                            <div class="property-field">
                                <label for="prop-type">Type</label>
                                <input type="text" id="prop-type" readonly class="readonly" />
                            </div>

                            <div class="property-field">
                                <label for="prop-id">ID</label>
                                <input type="text" id="prop-id" placeholder="Element ID" />
                            </div>

                            <div class="property-field">
                                <label for="prop-name">Name</label>
                                <textarea id="prop-name" rows="2" placeholder="Element name"></textarea>
                            </div>

                            <div class="property-field">
                                <label for="prop-documentation">Documentation</label>
                                <textarea id="prop-documentation" rows="3" placeholder="Add documentation..."></textarea>
                            </div>

                            <!-- Border Color Control -->
                            <div class="property-field" id="color-control">
                                <label>Border Color</label>
                                <div class="color-row">
                                    <div class="color-swatch swatch-none" data-color="none" title="Default" onclick="setElementColor(null)"></div>
                                    <div class="color-swatch swatch-red" data-color="#ef4444" title="Red" onclick="setElementColor('#ef4444')"></div>
                                    <div class="color-swatch swatch-green" data-color="#10b981" title="Green" onclick="setElementColor('#10b981')"></div>
                                    <div class="color-swatch swatch-orange" data-color="#f97316" title="Orange" onclick="setElementColor('#f97316')"></div>
                                    <div class="color-swatch swatch-blue" data-color="#0047ab" title="Blue" onclick="setElementColor('#0047AB')"></div>
                                </div>
                            </div>
                        </div>

                        <!-- Gateway Properties (shown only for gateways) -->
                        <div id="gateway-properties" class="property-section hidden">
                            <h4>Gateway Properties</h4>

                            <div class="property-field">
                                <label for="prop-gateway-direction">Direction</label>
                                <input type="text" id="prop-gateway-direction" readonly class="readonly" />
                            </div>

                            <div class="property-field">
                                <label for="prop-default-flow">Default Flow</label>
                                <input type="text" id="prop-default-flow" readonly class="readonly" />
                            </div>

                            <div class="info-box">
                                <strong>Gateway Direction:</strong>
                                <ul>
                                    <li><strong>Diverging:</strong> Splits flow into multiple paths</li>
                                    <li><strong>Converging:</strong> Merges multiple paths</li>
                                    <li><strong>Mixed:</strong> Both split and merge./ Modelers prefer to separate this behavior into two sequential Gateways — one to converge the flow and another to diverge it — rather than using a single Mixed Gateway</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </aside>
            </div>
        </div>

        <!-- Tab 2: Documentation -->
        <div id="docs" class="tab-content">
            <div class="docs-container">
                <h1>BPMN Studio - User Guide</h1>
                <p>Welcome to the ORAND BPMN Studio v5.0 - Complete Offline Edition. This fully self-contained tool includes a custom-built Token Simulation engine, breadcrumb navigation for nested processes, and multi-level PDF export capabilities. <strong>No internet connection required!</strong></p>

                <!-- Sub-tabs for User Guide -->
                <div class="sub-tabs">
                    <button class="sub-tab-btn active" onclick="window.BPMNUI.switchSubTab('getting-started')">Getting Started</button>
                    <button class="sub-tab-btn" onclick="window.BPMNUI.switchSubTab('simulation')">Simulation</button>
                    <button class="sub-tab-btn" onclick="window.BPMNUI.switchSubTab('file-ops')">File Operations</button>
                    <button class="sub-tab-btn" onclick="window.BPMNUI.switchSubTab('properties')">Properties</button>
                    <button class="sub-tab-btn" onclick="window.BPMNUI.switchSubTab('shortcuts')">Shortcuts</button>
                    <button class="sub-tab-btn" onclick="window.BPMNUI.switchSubTab('security')">Security</button>
                    <button class="sub-tab-btn" onclick="window.BPMNUI.switchSubTab('elements')">Elements</button>
                    <button class="sub-tab-btn" onclick="window.BPMNUI.switchSubTab('tips')">Tips</button>
                    <button class="sub-tab-btn" onclick="window.BPMNUI.switchSubTab('about')">About</button>
                </div>

                <!-- Sub-tab: Getting Started -->
                <div id="getting-started" class="sub-tab-content active">

                    <h2>🚀 Getting Started</h2>
                    <ul>
                        <li><strong>Palette:</strong> Located on the left. Contains Tasks, Gateways, Events, and Sub-processes.</li>
                        <li><strong>Context Pad:</strong> Click any element on the canvas to see context options (append, delete, etc.).</li>
                        <li><strong>Properties Panel:</strong> Located on the right. Click elements to view and edit their properties including name, documentation, and border color.</li>
                        <li><strong>Breadcrumb Navigation:</strong> When drilling into sub-processes, a breadcrumb appears at top-left showing your location (e.g., 📍 Main Process › Sub-Process). Click any parent to navigate back.</li>
                        <li><strong>Drag & Drop:</strong> You can drag .bpmn or .xml files directly onto the canvas to open them.</li>
                    </ul>
                </div>
                <!-- Sub-tab: File Operations -->
                <div id="file-ops" class="sub-tab-content">

                    <h2>💾 File Operations</h2>
                    <ul>
                        <li><strong>New Diagram:</strong> Creates a blank diagram with a single Start Event</li>
                        <li><strong>Open File:</strong> Load a .bpmn or .xml file from your computer</li>
                        <li><strong>Export XML:</strong> Save your diagram as BPMN 2.0 XML (standard format)</li>
                        <li><strong>Export SVG:</strong> Save as vector graphic for documentation</li>
                        <li><strong>Export PDF:</strong> Generate professional PDF with comprehensive documentation
                            <ul>
                                <li><strong>From Main Process:</strong> Exports single-level diagram with full documentation</li>
                                <li><strong>From Sub-Process:</strong> Exports multi-level PDF showing:
                                    <ul>
                                        <li>Page 1: Main process overview diagram</li>
                                        <li>Page 2: Sub-process detailed diagram</li>
                                        <li>Page 3+: Documentation for both levels with section headers</li>
                                    </ul>
                                </li>
                                <li>Elements documented in logical flow order for easy reading</li>
                            </ul>
                        </li>
                    </ul>

                </div>
                <!-- Sub-tab: Simulation Mode -->
                <div id="simulation" class="sub-tab-content">

                    <h2>🎯 Simulation Mode</h2>
                    <p>Verify your process logic without external tools.</p>
                    <ul>
                        <li><strong>Activate:</strong> Click the "Start Simulation" button in the header. The palette will be disabled.</li>
                        <li><strong>Trigger:</strong> Click any <strong>Start Event</strong> (green circle) to spawn a token.</li>
                        <li><strong>Behavior:</strong> Tokens flow automatically along arrows. At <strong>Exclusive Gateways</strong> (X), a random path is currently chosen. At <strong>Parallel Gateways</strong> (+), tokens split and join.</li>
                        <li><strong>Stop:</strong> Click "Stop Simulation" to return to editing mode.</li>
                    </ul>

                    <h3>Simulation Features</h3>
                    <ul>
                        <li>✅ Token visualization with animated overlays</li>
                        <li>✅ Flow highlighting during animation</li>
                        <li>✅ Parallel Gateway split (1 → N tokens)</li>
                        <li>✅ Parallel Gateway join (N → 1 token with synchronization)</li>
                        <li>✅ Exclusive Gateway (XOR) with random path selection</li>
                        <li>✅ Toast notifications for simulation events</li>
                    </ul>
                </div>

                <!-- Sub-tab: Properties Panel -->
                <div id="properties" class="sub-tab-content">

                    <h2>🎨 Properties Panel</h2>
                    <p>The Properties Panel on the right side allows you to customize elements:</p>
                    <ul>
                        <li><strong>Basic Properties:</strong> Available for all elements including sequence flows
                            <ul>
                                <li>View element type and ID</li>
                                <li>Edit element name</li>
                                <li>Add documentation notes</li>
                                <li>Set border color (visual categorization)</li>
                            </ul>
                        </li>
                        <li><strong>Gateway Properties:</strong> View direction (diverging/converging/mixed) and default flow settings</li>
                        <li><strong>Color Coding:</strong> Use border colors to categorize elements:
                            <ul>
                                <li>Red - Critical tasks or error paths</li>
                                <li>Green - Success paths or completed items</li>
                                <li>Orange - Warning or review needed</li>
                                <li>Blue - Standard process flow</li>
                            </ul>
                        </li>
                    </ul>
                </div>

                <!-- Sub-tab: Keyboard Shortcuts -->
                <div id="shortcuts" class="sub-tab-content">
                    <h2>⚡ Keyboard Shortcuts</h2>
                <div class="feature-grid">
                    <div class="feature-card">
                        <h4>Selection</h4>
                        <ul>
                            <li>Click - Select element</li>
                            <li>Ctrl+A - Select all</li>
                            <li>Esc - Deselect</li>
                        </ul>
                    </div>
                    <div class="feature-card">
                        <h4>Editing</h4>
                        <ul>
                            <li>Del - Delete element</li>
                            <li>Ctrl+Z - Undo</li>
                            <li>Ctrl+Y - Redo</li>
                        </ul>
                    </div>
                    <div class="feature-card">
                        <h4>Canvas</h4>
                        <ul>
                            <li>Mouse wheel - Zoom</li>
                            <li>Space+Drag - Pan canvas</li>
                            <li>Ctrl+0 - Reset zoom</li>
                        </ul>
                    </div>
                </div>

                </div>

                <!-- Sub-tab: Security & Privacy -->
                <div id="security" class="sub-tab-content">
                    <h2>🔒 Security & Privacy</h2>
                <div class="code-block">
Status: ✅ Fully Secure & Offline<br>
Data Storage: In-Memory (RAM) only<br>
Network: ZERO external connections required<br>
Processing: 100% Client-Side<br>
Privacy: No data leaves your browser<br>
Libraries: All included locally (no CDN)<br>
Content Security Policy: Strict - blocks all external sources
                </div>
                <p><strong>Complete Privacy:</strong> Your BPMN diagrams are processed entirely in your browser with <strong>zero network activity</strong>. All libraries are loaded locally. No data is sent anywhere. No tracking. No analytics. Works completely offline even without internet connection.</p>

                </div>

                <!-- Sub-tab: BPMN Elements -->
                <div id="elements" class="sub-tab-content">
                    <h2>📚 BPMN 2.0 Elements Supported</h2>
                <ul>
                    <li><strong>Events:</strong> Start, End, Intermediate (Message, Timer, etc.)</li>
                    <li><strong>Tasks:</strong> Task, Service Task, User Task, Manual Task, Script Task</li>
                    <li><strong>Gateways:</strong> Exclusive (XOR), Parallel (AND), Inclusive (OR), Event-Based</li>
                    <li><strong>Containers:</strong> Sub-Process, Call Activity, Event Sub-Process</li>
                    <li><strong>Data:</strong> Data Objects, Data Stores</li>
                    <li><strong>Artifacts:</strong> Text Annotations, Groups</li>
                    <li><strong>Swimlanes:</strong> Pools and Lanes</li>
                </ul>

                </div>

                <!-- Sub-tab: Tips -->
                <div id="tips" class="sub-tab-content">
                    <h2>💡 Tips for Better Diagrams</h2>
                <ul>
                    <li>Use meaningful names for all elements</li>
                    <li>Add documentation to complex elements using the Properties Panel</li>
                    <li>Use color coding for visual categorization (red for critical, green for success)</li>
                    <li>Use gateways to show decision points clearly</li>
                    <li>Group related tasks in sub-processes for better organization</li>
                    <li>Use breadcrumb navigation to drill into and explore sub-processes</li>
                    <li>Use swimlanes (pools/lanes) to show roles and responsibilities</li>
                    <li>Test your process flow with the simulation mode</li>
                    <li>Export multi-level PDFs when documenting complex nested processes</li>
                    <li>Work offline - no internet needed, ensuring complete data privacy</li>
                </ul>

                </div>

                <!-- Sub-tab: About -->
                <div id="about" class="sub-tab-content">
                    <h2>🏢 About ORAND BPMN Studio</h2>
                <p><strong>- Complete Offline Edition -</strong></p>
                <p>This tool is part of the ORAND Micro-Tools suite - privacy-first, single-purpose applications that run entirely in your browser with <strong>zero external dependencies</strong>. All libraries are included locally for complete offline operation.</p>
                <p>ORAND Advisors specializes in business consulting and process improvement for manufacturing and service organizations. Our tools prioritize privacy, security, and offline capability.</p>
                <p><strong>Key Features:</strong></p>
                <ul>
                    <li>✅ 100% Offline - No internet required</li>
                    <li>✅ Breadcrumb Navigation - Navigate nested processes</li>
                    <li>✅ Multi-Level PDF Export - Complete documentation</li>
                    <li>✅ Token Simulation - Test process logic</li>
                    <li>✅ Properties Panel - Full customization</li>
                    <li>✅ Privacy-First - Zero data collection</li>
                </ul>

                    <h2>📄 License & Copyright</h2>
                    <p>Copyright © 2026 ORAND Advisors. All rights reserved.</p>
                    <p>This tool uses BPMN.js (bpmn.io) which is licensed under the bpmn.io license.</p>
                </div>
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer>
        @ORAND Advisors | Business Consulting & Process Improvement
    </footer>

    <!-- Toast Notification -->
    <div id="message-box"></div>

    <!-- BPMN.js Library - Local -->
    <script src="libs/bpmn-modeler.development.js"></script>

    <!-- jsPDF Library for PDF Export - Local -->
    <script src="libs/jspdf.umd.min.js"></script>

    <!-- Application JavaScript Modules -->
    <script src="js/bpmn-data.js"></script>
    <script src="js/token-simulator.js"></script>
    <script src="js/bpmn-export.js"></script>
    <script src="js/bpmn-properties.js"></script>
    <script src="js/bpmn-ui.js"></script>
    <script src="js/bpmn-app.js"></script>
</body>
</html>

<!--
  ╔═══════════════════════════════════════════════════════════════╗
  ║  ORAND BPMN STUDIO - FOLDER STRUCTURE                         ║
  ║  ═══════════════════════════════════════════════════════════  ║
  ║  100% Client-Side Processing • Privacy-First                  ║
  ║  Part of ORAND Advisors Micro-Tools Suite                     ║
  ║                                                               ║
  ║  Features:                                                    ║
  ║  • Full BPMN 2.0 modeling                                     ║
  ║  • Custom-built token simulation engine                       ║
  ║  • Export to BPMN XML and SVG                                 ║
  ║  • Modular JavaScript architecture                            ║
  ║  • ORAND framework compliant                                  ║
  ║                                                               ║
  ║  Copyright © 2026 ORAND Advisors                              ║
  ╚═══════════════════════════════════════════════════════════════╝
-->