@peter.prib/renderengine 0.2.5 → 0.2.7

package/examples/archimate.html

@@ -1,66 +1,68 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ArchiMate Modeller</title>
-</head>
-<body>
-<!-- Deliberately empty: the workbench and the modeller part are built from
-     JavaScript and JSON specs. A classic script (not type="module") so the
-     page also opens straight off disk. The modeller is the diagram editor's
-     canvas (ArchimateCanvasPart), one per model in a ModelsPart, so several
-     models can be open at once (File > New model, Open… in a new tab);
-     archimate-legacy.html keeps the graph-engine editor for comparison. -->
-<script>
-function runModeller() {
-    const { el, registerBuiltinParts, ArchimateCanvasPart } = RenderEngineWorkspace;
-
-    Object.assign(document.documentElement.style, { height: '100%' });
-    Object.assign(document.body.style, { margin: '0', height: '100%', display: 'flex' });
-
-    const ws = document.body.appendChild(el({
-        tag: 'ws-workspace',
-        attrs: { label: 'ArchiMate Modeller', theme: 'light' },
-        style: { flex: '1 1 auto', minHeight: '0' },
-    }));
-    registerBuiltinParts(ws);
-    ws.registerPart(ArchimateCanvasPart);
-
-    // The models open at once: a tab each. The first is this sample; New model makes empty ones.
-    ws.addParts([{
-        id: 'models', type: 'models', editorType: 'archimate-canvas', newModel: { analysis: true },
-        models: [{
-            id: 'modeller', name: 'Sample model', analysis: true,
-            elements: [
-                { id: 'customer', name: 'Customer', layer: 'business', type: 'business-actor', icon: '👤' },
-                { id: 'order', name: 'Order Process', layer: 'business', type: 'business-process' },
-                { id: 'order-svc', name: 'Order Service', layer: 'application', type: 'application-service' },
-                { id: 'db', name: 'Database', layer: 'technology', type: 'node', icon: '🗄️' },
-            ],
-            relationships: [
-                { source: 'customer', target: 'order', kind: 'assignment' },
-                { source: 'order-svc', target: 'order', kind: 'serving' },
-                { source: 'db', target: 'order-svc', kind: 'serving' },
-            ],
-            views: [{
-                id: 'default',
-                name: 'Default View',
-                elementIds: ['customer', 'order', 'order-svc', 'db'],
-                layout: {
-                    customer: { x: 80, y: 80 },
-                    order: { x: 300, y: 80 },
-                    'order-svc': { x: 300, y: 200 },
-                    db: { x: 80, y: 200 },
-                },
-            }],
-        }],
-    }]);
-
-    ws.registerPerspective('Modelling', { type: 'part', partId: 'models' });
-    ws.activatePerspective('Modelling');
-}
-</script>
-<script src="../dist/renderengine-workspace.umd.js" onload="runModeller()"></script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ArchiMate Modeller</title>
+</head>
+<body>
+<!-- Deliberately empty: the workbench and the modeller part are built from
+     JavaScript and JSON specs. A classic script (not type="module") so the
+     page also opens straight off disk. The modeller is the diagram editor's
+     canvas (ArchimateCanvasPart), one per model in a ModelsPart, so several
+     models can be open at once (File > New model, Open… in a new tab);
+     archimate-legacy.html keeps the graph-engine editor for comparison. -->
+<script>
+function runModeller() {
+    const { el, registerBuiltinParts, ArchimateCanvasPart } = RenderEngineWorkspace;
+
+    Object.assign(document.documentElement.style, { height: '100%' });
+    Object.assign(document.body.style, { margin: '0', height: '100%', display: 'flex' });
+
+    const ws = document.body.appendChild(el({
+        tag: 'ws-workspace',
+        attrs: { label: 'ArchiMate Modeller', theme: 'light' },
+        style: { flex: '1 1 auto', minHeight: '0' },
+    }));
+    registerBuiltinParts(ws);
+    ws.registerPart(ArchimateCanvasPart);
+
+    // The models open at once: a tab each. The first is this sample; New model makes empty ones.
+    // keep: every model is kept in this browser as it is edited, and those open reopen next time;
+    // File > This browser backs them up (to a folder chosen once, such as one OneDrive or Google Drive syncs).
+    ws.addParts([{
+        id: 'models', type: 'models', editorType: 'archimate-canvas', newModel: { analysis: true }, keep: true,
+        models: [{
+            id: 'modeller', name: 'Sample model', analysis: true,
+            elements: [
+                { id: 'customer', name: 'Customer', layer: 'business', type: 'business-actor', icon: '👤' },
+                { id: 'order', name: 'Order Process', layer: 'business', type: 'business-process' },
+                { id: 'order-svc', name: 'Order Service', layer: 'application', type: 'application-service' },
+                { id: 'db', name: 'Database', layer: 'technology', type: 'node', icon: '🗄️' },
+            ],
+            relationships: [
+                { source: 'customer', target: 'order', kind: 'assignment' },
+                { source: 'order-svc', target: 'order', kind: 'serving' },
+                { source: 'db', target: 'order-svc', kind: 'serving' },
+            ],
+            views: [{
+                id: 'default',
+                name: 'Default View',
+                elementIds: ['customer', 'order', 'order-svc', 'db'],
+                layout: {
+                    customer: { x: 80, y: 80 },
+                    order: { x: 300, y: 80 },
+                    'order-svc': { x: 300, y: 200 },
+                    db: { x: 80, y: 200 },
+                },
+            }],
+        }],
+    }]);
+
+    ws.registerPerspective('Modelling', { type: 'part', partId: 'models' });
+    ws.activatePerspective('Modelling');
+}
+</script>
+<script src="../dist/renderengine-workspace.umd.js" onload="runModeller()"></script>
+</body>
+</html>