tile-editor/layerOptions.js at master · rokyed/tile-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
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
import { Scenario } from "./scenario.js";

export class LayerOptions extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.render();
    this.shadowRoot.addEventListener("click", this.onClick.bind(this));
    this.shadowRoot.addEventListener("change", this.onChange.bind(this));
    window.addEventListener("update.ui", () => this.update());
  }

  onClick(event) {
    const path = event.composedPath();
    if (path.includes(this.shadowRoot.querySelector("#add_layer"))) {
      Scenario.getInstance().addLayer();
      this.update();
    } else if (path.includes(this.shadowRoot.querySelector("#remove_layer"))) {
      Scenario.getInstance().removeLayer();
      this.update();
    }
  }

  onChange(event) {
    const checkbox = event.target.closest('input[data-layer]');
    if (checkbox) {
      const layer = parseInt(checkbox.getAttribute('data-layer'));
      Scenario.getInstance().setLayerVisibility(layer, checkbox.checked);
    }
  }

  update() {
    const scenario = Scenario.getInstance();
    const countSpan = this.shadowRoot.querySelector("#layer_count");
    if (countSpan) {
      countSpan.textContent = scenario.layerCount;
    }
    const layerView = this.shadowRoot.querySelector('[name="current_layer"]');
    if (layerView) {
      layerView.textContent = `Current layer: ${scenario.currentLayer}`;
    }
    const list = this.shadowRoot.querySelector('#layer_visibility');
    if (list) {
      list.innerHTML = '';
      for (let i = 0; i < scenario.layerCount; i++) {
        const checked = scenario.isLayerVisible(i) ? 'checked' : '';
        list.innerHTML += `<label><input type="checkbox" data-layer="${i}" ${checked}/> ${i}</label>`;
      }
    }
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          border: 1px solid #333;
          border-radius: 4px;
          padding: 4px;
          margin-top: 4px;
          background: #444;
        }
        .row {
          display: flex;
          gap: 4px;
          margin-bottom: 4px;
        }
        .row > * {
          flex: 1 1 1px;
          white-space: nowrap;
        }
        button {
          background: #555;
          color: #FFF;
          cursor: pointer;
          border: 2px solid #999;
        }
        button:hover {
          background: #777;
        }
      </style>
      <details>
        <summary>Layer Options</summary>
        <div class="row">
          <button id="add_layer">Add</button>
          <button id="remove_layer">Remove</button>
        </div>
        <div>Layer count: <span id="layer_count"></span></div>
        <div class="row">
          <button id="layer_down">-</button>
          <span name="current_layer">Current layer</span>
          <button id="layer_up">+</button>
          <button id="toggle_only_layer">Only</button>
        </div>
        <div id="layer_visibility" class="row"></div>
      </details>
    `;
    this.update();
  }
}

customElements.define("layer-options", LayerOptions);