92 lines
2.8 KiB
JavaScript
92 lines
2.8 KiB
JavaScript
|
const LayerOrder = function() {
|
||
|
|
const layerIDs = [];
|
||
|
|
let mom= false;
|
||
|
|
let updateDom = (from, to) => {
|
||
|
|
const layerID = layerIDs[from];
|
||
|
|
const domLayerSelector = `.layerMover${layerID}`;
|
||
|
|
const domLayer = tp.shadowRoot.querySelector(domLayerSelector);
|
||
|
|
const otherLayerID = layerIDs[to];
|
||
|
|
const otherDomLayerSelector = `.layerMover${otherLayerID}`;
|
||
|
|
const otherDomLayer = tp.shadowRoot.querySelector(otherDomLayerSelector);
|
||
|
|
if (domLayer === null || otherDomLayer == null) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (mom === false) {
|
||
|
|
mom = domLayer.parentNode;
|
||
|
|
}
|
||
|
|
if (mom !== otherDomLayer.parentNode) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (from > to) {
|
||
|
|
mom.insertBefore(domLayer, otherDomLayer);
|
||
|
|
} else {
|
||
|
|
mom.insertBefore(otherDomLayer, domLayer);
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
};
|
||
|
|
const updateOf = () => {
|
||
|
|
const layers = JSON.parse(JSON.stringify(layerIDs));
|
||
|
|
layers.reverse();
|
||
|
|
const v = new Module.vector$string$();
|
||
|
|
for (let i = 0; i < layers.length; i++) {
|
||
|
|
v.push_back(layers[i]);
|
||
|
|
}
|
||
|
|
Module.setLayerOrder(v);
|
||
|
|
};
|
||
|
|
this.add = (id) => {
|
||
|
|
layerIDs.push(id);
|
||
|
|
updateOf();
|
||
|
|
};
|
||
|
|
this.remove = (id) => {
|
||
|
|
const i = layerIDs.indexOf(id);
|
||
|
|
layerIDs.splice(i, 1);
|
||
|
|
updateOf();
|
||
|
|
};
|
||
|
|
this.move = (from, to) => {
|
||
|
|
if (updateDom(from, to)) {
|
||
|
|
// remove `from` item and store it
|
||
|
|
var l = layerIDs.splice(from, 1)[0];
|
||
|
|
// insert stored item into position `to`
|
||
|
|
layerIDs.splice(to, 0, l);
|
||
|
|
updateOf();
|
||
|
|
} else {
|
||
|
|
console.error('js::LayerOrder::move failed');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
this.moveDown = (id) => {
|
||
|
|
let i = layerIDs.indexOf(id);
|
||
|
|
const nextI = i + 1;
|
||
|
|
if (nextI >= layerIDs.length) {
|
||
|
|
console.log('LayerOrder::moveDown', 'cannot move further down');
|
||
|
|
} else {
|
||
|
|
this.move(i, nextI);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
this.moveUp = (id) => {
|
||
|
|
let i = layerIDs.indexOf(id);
|
||
|
|
const nextI = i - 1;
|
||
|
|
if (nextI < 0) {
|
||
|
|
console.log('LayerOrder::moveUp', 'cannot move further up');
|
||
|
|
} else {
|
||
|
|
this.move(i, nextI);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
this.get = () => {
|
||
|
|
return layerIDs;
|
||
|
|
};
|
||
|
|
this.set = (newLayerIDs) => {
|
||
|
|
window.newLayerIDs = newLayerIDs;
|
||
|
|
window.layerIDs = layerIDs;
|
||
|
|
newLayerIDs.forEach((id, to_i) => {
|
||
|
|
//console.log(`id: ${id}, to_i: ${to_i}, layerIDs[0]: ${layerIDs[0]}`);
|
||
|
|
const from_i = layerIDs.indexOf(id);
|
||
|
|
//console.log({id, from_i, to_i});
|
||
|
|
this.move(from_i, to_i);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
export {
|
||
|
|
LayerOrder
|
||
|
|
};
|