svugy-cli 0.2.0

Command line for svugy: text in, an isometric SVG you can click into
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

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>svugy view</title>
<style>
  html, body { margin: 0; height: 100%; overflow: hidden; background: #0a0b10; }
  @media (prefers-color-scheme: light) { html, body { background: #f6f8ff; } }
  #diagram { display: block; width: 100%; height: 100%; }
  #diagnostics {
    position: fixed; left: 0; right: 0; bottom: 0; max-height: 60%; overflow: auto;
    margin: 0; padding: 12px 16px; box-sizing: border-box;
    background: rgba(18, 20, 28, 0.96); color: #e6e8ee; border-top: 2px solid #e5484d;
    font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre;
  }
  #diagnostics[hidden] { display: none; }
</style>
</head>
<body>
<object id="diagram" type="image/svg+xml" aria-label="diagram"></object>
<pre id="diagnostics" hidden></pre>
<script>
  'use strict';

  const diagram = document.getElementById('diagram');
  const diagnostics = document.getElementById('diagnostics');
  const events = new EventSource('/events');

  events.addEventListener('reload', (event) => {
    const focusedLevelLink = focusedLevelFragment();
    diagram.data = `/diagram.svg?v=${event.data}${focusedLevelLink}`;
    diagnostics.hidden = true;
  });

  events.addEventListener('diagnostics', (event) => {
    diagnostics.textContent = event.data;
    diagnostics.hidden = false;
  });

  /** Links the shown diagram's workflow, focused level and shown layer as `#svugy=PATH&layer=K&workflow=ID`; empty at the start state or before the first load. */
  function focusedLevelFragment() {
    const svgDocument = diagram.contentDocument;
    const focusedLevel = svgDocument === null ? null : svgDocument.querySelector('[data-svugy-entered]');
    if (focusedLevel === null) {
      return '';
    }
    const focusedPath = focusedLevel.getAttribute('data-svugy-level');
    const shownLayer = focusedLevel.closest('[data-svugy-layer]');
    const shownLayerIndex = shownLayer === null ? '0' : shownLayer.getAttribute('data-svugy-layer');
    const shownWorkflow = focusedLevel.closest('[data-svugy-workflow]');
    const firstWorkflow = svgDocument.querySelector('[data-svugy-workflow]');
    const isFirstWorkflowShown = shownWorkflow === firstWorkflow;
    const isStartState = focusedPath === '' && shownLayerIndex === '0' && isFirstWorkflowShown;
    if (isStartState) {
      return '';
    }
    const encodedPath = encodeURIComponent(focusedPath);
    const levelFragment = `#svugy=${encodedPath}&layer=${shownLayerIndex}`;
    if (isFirstWorkflowShown) {
      return levelFragment;
    }
    const shownWorkflowId = shownWorkflow.getAttribute('data-svugy-workflow');
    const encodedWorkflowId = encodeURIComponent(shownWorkflowId);
    return `${levelFragment}&workflow=${encodedWorkflowId}`;
  }
</script>
</body>
</html>