editor/packages/editors/voxel-model/index.html at main · JollyPixel/editor · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Voxel Model Editor</title>
  <link rel="stylesheet" href="./main.css">
</head>
<style>
  body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    position: relative;
  }

  section {
    flex-grow: 1;
    height: 100%;
    min-width: 200px;
  }

  /*
   * Docks default to flex-shrink: 1, so widening one could steal space from
   * the other under a narrow viewport. Only #threeRenderer's flex-grow above
   * should absorb space pressure; a dock's width comes from its own handle.
   */
  jolly-dock {
    flex-shrink: 0;
  }

  #threeRenderer canvas {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
  }

  jolly-scope {
    display: contents;
  }
</style>

<jolly-scope>
  <jolly-dock key="left" side="left" collapsible min-size="200" max-size="900" storage-key="voxel-model:left">
    <jolly-pane locked>
      <jolly-model-editor-left-panel></jolly-model-editor-left-panel>
    </jolly-pane>
  </jolly-dock>
  <section id="threeRenderer"><canvas tabindex="-1"></canvas></section>
  <jolly-dock key="right" side="right" collapsible min-size="250" max-size="500" storage-key="voxel-model:right">
    <jolly-pane locked>
      <jolly-model-editor-right-panel></jolly-model-editor-right-panel>
    </jolly-pane>
  </jolly-dock>
</jolly-scope>

<script type="module" src="./src/index.ts"></script>

</html>