56 lines
1.1 KiB
JavaScript
56 lines
1.1 KiB
JavaScript
/**
|
|
* The layering UI window
|
|
*/
|
|
|
|
const uiLayers = {
|
|
layers: [],
|
|
active: null,
|
|
|
|
_syncLayers() {
|
|
const layersEl = document.getElementById("layer-list");
|
|
|
|
const children = Array.from(layersEl.children);
|
|
|
|
this.layers.forEach((uiLayer) => {
|
|
if (!uiLayer.entry) {
|
|
uiLayer.entry = document.createElement("div");
|
|
uiLayer.entry.textContent = uiLayer.name;
|
|
|
|
uiLayer.entry.id = `ui-layer-${uiLayer.id}`;
|
|
uiLayer.entry.classList.add("ui-layer");
|
|
uiLayer.entry.addEventListener(
|
|
"click",
|
|
() => (this.active = uiLayer.layer)
|
|
);
|
|
|
|
if (true || children.length === 0) layersEl.appendChild(uiLayer.entry);
|
|
}
|
|
});
|
|
},
|
|
|
|
addLayer(group, name) {
|
|
const layer = imageCollection.registerLayer(null, {
|
|
name,
|
|
after:
|
|
(this.layers.length > 0 && this.layers[this.layers.length - 1].layer) ||
|
|
bgLayer,
|
|
});
|
|
|
|
const uiLayer = {
|
|
id: layer.id,
|
|
group,
|
|
name,
|
|
entry: null,
|
|
layer,
|
|
};
|
|
this.layers.push(uiLayer);
|
|
|
|
this.active = uiLayer.layer;
|
|
|
|
this._syncLayers();
|
|
|
|
return uiLayer;
|
|
},
|
|
};
|
|
uiLayers.addLayer(null, "Default Image Layer");
|
|
uiLayers.addLayer(null, "Test Extra Layer");
|