Distingui visivamente la gerarchia dei layer
This commit is contained in:
1 parent
bb30f23d67
commit
0ffcc7ae31
3 files changed
+97
-8
No files matched your search
@@ -1268,6 +1268,26 @@ function layerManagerRowActions(renameButton, removeButton) {
|
||||
return `<span class="layer-row-actions">${renameButton}${removeButton}</span>`;
|
||||
}
|
||||
|
||||
const layerManagerPalettes = [
|
||||
{ surface: "#f0fdf4", parent: "#dcfce7", border: "#86efac", accent: "#166534" },
|
||||
{ surface: "#eff6ff", parent: "#dbeafe", border: "#93c5fd", accent: "#1d4ed8" },
|
||||
{ surface: "#fffbeb", parent: "#fef3c7", border: "#fcd34d", accent: "#92400e" },
|
||||
{ surface: "#fff1f2", parent: "#ffe4e6", border: "#fda4af", accent: "#be123c" },
|
||||
{ surface: "#f5f3ff", parent: "#ede9fe", border: "#c4b5fd", accent: "#6d28d9" },
|
||||
{ surface: "#ecfeff", parent: "#cffafe", border: "#67e8f9", accent: "#0e7490" },
|
||||
{ surface: "#f7fee7", parent: "#ecfccb", border: "#bef264", accent: "#3f6212" }
|
||||
];
|
||||
|
||||
function applyLayerManagerPalette(row, key) {
|
||||
const hash = [...String(key)].reduce((value, character) =>
|
||||
((value * 31) + character.charCodeAt(0)) >>> 0, 0);
|
||||
const palette = layerManagerPalettes[hash % layerManagerPalettes.length];
|
||||
row.style.setProperty("--layer-group-surface", palette.surface);
|
||||
row.style.setProperty("--layer-group-parent", palette.parent);
|
||||
row.style.setProperty("--layer-group-border", palette.border);
|
||||
row.style.setProperty("--layer-group-accent", palette.accent);
|
||||
}
|
||||
|
||||
function removeManagedRecords(records, subject) {
|
||||
if (!records.length) {
|
||||
return;
|
||||
@@ -1388,7 +1408,9 @@ function renderLayerManagerCategory(category, records) {
|
||||
const group = document.createElement("details");
|
||||
group.className = "layer-manager-group";
|
||||
group.dataset.dragType = "category";
|
||||
group.dataset.layerDepth = "0";
|
||||
group.dataset.categoryKey = category.key;
|
||||
applyLayerManagerPalette(group, `category:${category.key}`);
|
||||
bindLayerManagerExpansion(group, `category:${category.key}`);
|
||||
const categoryName = managedCategoryName(category, records);
|
||||
const renameButton = managedCategoryCanRename(category)
|
||||
@@ -1438,8 +1460,10 @@ function renderLayerManagerBlock(category, source, records) {
|
||||
const block = document.createElement("details");
|
||||
block.className = "layer-manager-block";
|
||||
block.dataset.dragType = "block";
|
||||
block.dataset.layerDepth = "1";
|
||||
block.dataset.categoryKey = category.key;
|
||||
block.dataset.blockKey = source;
|
||||
applyLayerManagerPalette(block, `block:${category.key}:${source}`);
|
||||
bindLayerManagerExpansion(block, `block:${category.key}:${source}`);
|
||||
const visibleCount = records.filter(record => !lmeState.managerHiddenObjectIds.has(record.id)).length;
|
||||
const visible = visibleCount === records.length;
|
||||
@@ -1479,6 +1503,7 @@ function renderLayerManagerObject(record, index) {
|
||||
object.classList.add("layer-manager-object-selected");
|
||||
}
|
||||
object.dataset.dragType = "object";
|
||||
object.dataset.layerDepth = "2";
|
||||
object.dataset.objectId = record.id;
|
||||
bindLayerManagerExpansion(object, `object:${record.id}`);
|
||||
const visible = !lmeState.managerHiddenObjectIds.has(record.id);
|
||||
|
||||
Reference in new issue
Block a user