File size: 2,963 Bytes
47f370d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Playground Editor</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mundorum/collections@0.3.1/full.min.css">
  <script type="module" src="/app/static/editor/js/editor-rest.js"></script>
  <script type="module">
    import { EditorPg } from '/app/static/editor/js/editor-pg.js'
    window.editorPg = EditorPg.i
  </script>
</head>
<body onload="editorPg.start()">
  <oid-sphere assets="https://mundorum.github.io/oid/oid/playground/assets/" stydefault="https://cdn.jsdelivr.net/npm/@mundorum/collections@0.3.1/full.min.css" global></oid-sphere>
  <div style="width:100%;height:100vh;display:flex;flex-direction:column">
    <div style="width:100%">
    <h2>
      <oid-sphere id="control" stylesheets="https://cdn.jsdelivr.net/npm/@mundorum/collections@0.3.1/" 
                  style="display: flex; align-items: center; gap: 20px;">
        Playground Editor
        <file-oid label="Composition" publish="dispatch~file/loaded" style="width:200px"></file-oid>
        <select id="oid-list" class="btn btn-secondary">
          <option value="" selected>Select an id</option>
        </select>
        <button-oid label="Render" publish="click~control/render"></button-oid>
        <button-oid label="Code" publish="click~control/code"></button-oid>
        <button-oid label="Clear" publish="click~control/clear"></button-oid>
        <button-oid label="Download Code" publish="click~control/download/code"></button-oid>
        <button-oid label="Download Page" publish="click~control/download/page"></button-oid>
      </oid-sphere>
    </h2>
    </div>
    
    <div style="height:100%">
    <split-pane-oid>
      <div style="width:100%;height:100%" slot="side-a">
        <split-pane-oid split="vertical">
          <div id="pg-tree" slot="side-a"
               style="width:100%;height:100%;padding:5px;border-style:solid;border-width:1px">
            <oid-sphere id="control">
              <graph-oid layout="vh"
                         subscribe="tree/node~node/add;tree/edge~edge/add;tree/clear~graph/clear"></graph-oid>
            </oid-sphere>
          </div>
          <textarea id="pg-editor" slot="side-b" class="code"
                    style="width:100%;height:100%"></textarea>
        </split-pane-oid>
      </div>
      <div style="width:100%;height:100%" slot="side-b">
        <split-pane-oid split="vertical" proportion="75%">
          <div id="pg-render" slot="side-a"
               style="width:100%;height:100%;padding:5px;border-style:solid;border-width:1px">
          </div>
          <div id="pg-bus" style="width:100%;height:100%" slot="side-b">
            <oid-sphere id="control">
              <console-oid class="code" prompt="" subscribe="control/monitor~display">
              </console-oid>
            </oid-sphere>
          </div>
        </split-pane-oid>
      </div>
    </split-pane-oid>
  </div>
  </div>
</body>
</html>