Initial commit
This commit is contained in:
commit
05c65aad4d
155 changed files with 93617 additions and 0 deletions
546
viewer/editor/materials-editor.js
Normal file
546
viewer/editor/materials-editor.js
Normal file
|
|
@ -0,0 +1,546 @@
|
|||
import { core } from "../core.js";
|
||||
import { showToast, toastHelper } from "../viewer-utils.js";
|
||||
import { t } from "../i18n-utils.js";
|
||||
import THREE from "../init.js";
|
||||
|
||||
export function attachMaterialsEditor(Viewer) {
|
||||
Object.assign(Viewer, {
|
||||
openMaterialsFolder(materialUuid = null) {
|
||||
this.buildMaterialsDialog();
|
||||
if (!this.materialsDialog) return;
|
||||
if (!this.materialsEditorObject || !this.materialsList?.length) {
|
||||
showToast(t("gui.selectByMaterial", "select by material"), "warning");
|
||||
return;
|
||||
}
|
||||
|
||||
this.syncMaterialsDialogSelectionOptions();
|
||||
|
||||
const nextUuid =
|
||||
materialUuid && materialUuid !== ""
|
||||
? materialUuid
|
||||
: this.selectedMaterialUuid || this.materialsList[0]?.uuid || "";
|
||||
|
||||
if (nextUuid) {
|
||||
this.selectMaterialInEditor(this.materialsEditorObject, nextUuid);
|
||||
}
|
||||
|
||||
this.updateMaterialsDialogBounds();
|
||||
this.materialsDialog.hidden = false;
|
||||
this.syncMaterialsDialogFields();
|
||||
this.closeActionMenu();
|
||||
this.materialsDialogSelect?.focus();
|
||||
},
|
||||
|
||||
destroyMaterialGuiControls() {
|
||||
if (this.materialGuiControls) {
|
||||
Object.values(this.materialGuiControls).forEach((controller) => {
|
||||
if (controller?.destroy) {
|
||||
controller.destroy();
|
||||
}
|
||||
});
|
||||
this.materialGuiControls = null;
|
||||
}
|
||||
},
|
||||
|
||||
destroyMaterialSelectionController() {
|
||||
this.materialsEditorObject = null;
|
||||
this.selectedMaterialUuid = null;
|
||||
this.materialsList = [];
|
||||
if (this.materialsDialogSelect) {
|
||||
this.materialsDialogSelect.innerHTML = "";
|
||||
}
|
||||
this.syncMaterialsDialogFields();
|
||||
},
|
||||
|
||||
getMaterialByUuid(object, uuid) {
|
||||
if (!object || !uuid) return null;
|
||||
let found = null;
|
||||
object.traverse((child) => {
|
||||
if (
|
||||
child.isMesh &&
|
||||
child.material
|
||||
) {
|
||||
const materials = Array.isArray(child.material) ? child.material : [child.material];
|
||||
materials.forEach((material) => {
|
||||
if (material?.isMaterial && material.uuid === uuid) {
|
||||
found = material;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
return found;
|
||||
},
|
||||
|
||||
normalizeMaterialColorValue(value, fallback = "#ffffff") {
|
||||
if (!value) return fallback;
|
||||
if (typeof value === "string") {
|
||||
if (value.startsWith("0x")) {
|
||||
return `#${value.slice(2).padStart(6, "0")}`;
|
||||
}
|
||||
return value.startsWith("#") ? value : `#${value}`;
|
||||
}
|
||||
if (typeof value.getHexString === "function") {
|
||||
return `#${value.getHexString()}`;
|
||||
}
|
||||
return fallback;
|
||||
},
|
||||
|
||||
syncMaterialsDialogSelectionOptions() {
|
||||
if (!this.materialsDialogSelect) return;
|
||||
|
||||
const currentValue = this.selectedMaterialUuid || "";
|
||||
this.materialsDialogSelect.innerHTML = "";
|
||||
|
||||
const placeholder = document.createElement("option");
|
||||
placeholder.value = "";
|
||||
placeholder.textContent = t("gui.selectByMaterial", "select by material");
|
||||
this.materialsDialogSelect.appendChild(placeholder);
|
||||
|
||||
this.materialsList.forEach((item) => {
|
||||
const option = document.createElement("option");
|
||||
option.value = item.uuid;
|
||||
option.textContent = item.label;
|
||||
this.materialsDialogSelect.appendChild(option);
|
||||
});
|
||||
|
||||
this.materialsDialogSelect.value = currentValue;
|
||||
},
|
||||
|
||||
updateMaterialsDialogLabels() {
|
||||
if (!this.materialsDialog) return;
|
||||
|
||||
const title = this.materialsDialog.querySelector("#materialsDialogTitle");
|
||||
const closeButton = this.materialsDialog.querySelector(".materials-dialog__close");
|
||||
const fieldLabels = Array.from(
|
||||
this.materialsDialog.querySelectorAll(".materials-dialog__field > span")
|
||||
);
|
||||
const hint = this.materialsDialogInputs?.hint;
|
||||
const emptyState = this.materialsDialogInputs?.emptyState;
|
||||
|
||||
if (title) {
|
||||
title.textContent = t("gui.materials", "Materials");
|
||||
}
|
||||
if (closeButton) {
|
||||
closeButton.setAttribute("aria-label", t("gui.materials", "Materials"));
|
||||
}
|
||||
|
||||
if (fieldLabels.length > 0) {
|
||||
fieldLabels[0].textContent = t("gui.editMaterial", "Edit material");
|
||||
}
|
||||
if (fieldLabels.length > 1) {
|
||||
fieldLabels[1].textContent = t("gui.color", "Color");
|
||||
}
|
||||
if (fieldLabels.length > 2) {
|
||||
fieldLabels[2].textContent = t("gui.emissive", "Emissive");
|
||||
}
|
||||
if (fieldLabels.length > 3) {
|
||||
fieldLabels[3].textContent = t("gui.intensity", "Intensity");
|
||||
}
|
||||
if (fieldLabels.length > 4) {
|
||||
fieldLabels[4].textContent = t("gui.metalness", "Metalness");
|
||||
}
|
||||
|
||||
if (this.materialsDialogSelect) {
|
||||
const placeholderOption = this.materialsDialogSelect.querySelector('option[value=""]');
|
||||
if (placeholderOption) {
|
||||
placeholderOption.textContent = t("gui.selectByMaterial", "select by material");
|
||||
}
|
||||
}
|
||||
|
||||
if (hint) {
|
||||
hint.textContent = t("gui.selectByMaterial", "select by material");
|
||||
}
|
||||
if (emptyState) {
|
||||
emptyState.textContent = t("gui.selectByMaterial", "select by material");
|
||||
}
|
||||
},
|
||||
|
||||
syncMaterialsDialogFields() {
|
||||
if (!this.materialsDialogInputs) return;
|
||||
|
||||
const material = this.materialsEditorObject && this.selectedMaterialUuid
|
||||
? this.getMaterialByUuid(this.materialsEditorObject, this.selectedMaterialUuid)
|
||||
: null;
|
||||
const hasMaterial = Boolean(material);
|
||||
const {
|
||||
color,
|
||||
emissiveColor,
|
||||
emissive,
|
||||
metalness,
|
||||
emptyState,
|
||||
hint,
|
||||
} = this.materialsDialogInputs;
|
||||
|
||||
if (this.materialsDialogSelect) {
|
||||
this.materialsDialogSelect.disabled = this.materialsList.length === 0;
|
||||
this.materialsDialogSelect.value = this.selectedMaterialUuid || "";
|
||||
}
|
||||
|
||||
[color, emissiveColor, emissive, metalness].forEach((input) => {
|
||||
if (input) input.disabled = !hasMaterial;
|
||||
});
|
||||
|
||||
if (!hasMaterial) {
|
||||
if (color) color.value = "#ffffff";
|
||||
if (emissiveColor) emissiveColor.value = "#000000";
|
||||
if (emissive) emissive.value = "0";
|
||||
if (metalness) metalness.value = "0";
|
||||
if (emptyState) emptyState.hidden = this.materialsList.length > 0;
|
||||
if (hint) hint.textContent = t("gui.selectByMaterial", "select by material");
|
||||
return;
|
||||
}
|
||||
|
||||
if (color) color.value = this.normalizeMaterialColorValue(material.color, "#ffffff");
|
||||
if (emissiveColor) emissiveColor.value = this.normalizeMaterialColorValue(material.emissive, "#000000");
|
||||
if (emissive) emissive.value = String(material.emissiveIntensity ?? 0);
|
||||
if (metalness) metalness.value = String(material.metalness ?? 0);
|
||||
if (emptyState) emptyState.hidden = true;
|
||||
if (hint) {
|
||||
hint.textContent =
|
||||
this.materialsList.find((item) => item.uuid === material.uuid)?.label || material.uuid;
|
||||
}
|
||||
},
|
||||
|
||||
selectMaterialInEditor(object, value) {
|
||||
if (!object) return;
|
||||
if (!value) {
|
||||
this.destroyMaterialGuiControls();
|
||||
this.selectedMaterialUuid = null;
|
||||
this.refreshMaterialsToolbarMenu();
|
||||
this.syncMaterialsDialogFields();
|
||||
return;
|
||||
}
|
||||
|
||||
this.destroyMaterialGuiControls();
|
||||
const material = this.getMaterialByUuid(object, value);
|
||||
if (!material) {
|
||||
this.selectedMaterialUuid = null;
|
||||
this.refreshMaterialsToolbarMenu();
|
||||
this.syncMaterialsDialogFields();
|
||||
return;
|
||||
}
|
||||
|
||||
core.materialProperties.color = this.normalizeMaterialColorValue(material.color, "#ffffff");
|
||||
core.materialProperties.emissiveColor = this.normalizeMaterialColorValue(material.emissive, "#000000");
|
||||
core.materialProperties.emissive = material.emissiveIntensity ?? 0;
|
||||
core.materialProperties.metalness = material.metalness ?? 0;
|
||||
this.selectedMaterialUuid = value;
|
||||
this.syncMaterialsDialogSelectionOptions();
|
||||
this.refreshMaterialsToolbarMenu();
|
||||
this.syncMaterialsDialogFields();
|
||||
},
|
||||
|
||||
initializeMaterialsEditor(object) {
|
||||
if (!object) return;
|
||||
this.destroyMaterialGuiControls();
|
||||
this.destroyMaterialSelectionController();
|
||||
|
||||
const materials = new Map();
|
||||
const registerMaterial = (material) => {
|
||||
if (!material || !material.isMaterial || !material.uuid) return;
|
||||
if (!materials.has(material.uuid)) {
|
||||
materials.set(material.uuid, material);
|
||||
}
|
||||
};
|
||||
|
||||
const gatherMaterials = (mesh) => {
|
||||
if (!mesh.material) return;
|
||||
if (Array.isArray(mesh.material)) {
|
||||
mesh.material.forEach(registerMaterial);
|
||||
} else {
|
||||
registerMaterial(mesh.material);
|
||||
}
|
||||
};
|
||||
|
||||
if (object.isMesh) {
|
||||
gatherMaterials(object);
|
||||
}
|
||||
object.traverse((child) => {
|
||||
if (child.isMesh) {
|
||||
gatherMaterials(child);
|
||||
}
|
||||
});
|
||||
|
||||
const options = {
|
||||
[t("gui.selectByMaterial", "select by material")]: "",
|
||||
};
|
||||
this.materialsList = [];
|
||||
|
||||
materials.forEach((material, uuid) => {
|
||||
const label = material.name?.trim() ? material.name : uuid;
|
||||
options[label] = uuid;
|
||||
this.materialsList.push({ uuid, label });
|
||||
});
|
||||
|
||||
core.materialsPropertiesText["Edit material"] = "";
|
||||
this.materialsEditorObject = object;
|
||||
this.refreshMaterialsToolbarMenu();
|
||||
this.syncMaterialsDialogSelectionOptions();
|
||||
this.syncMaterialsDialogFields();
|
||||
},
|
||||
|
||||
refreshMaterialsToolbarMenu() {
|
||||
if (!this.materialsSubmenu) return;
|
||||
this.materialsSubmenu.innerHTML = "";
|
||||
|
||||
const list = this.materialsList?.length ? this.materialsList : [];
|
||||
if (!list.length) {
|
||||
const emptyButton = document.createElement("button");
|
||||
emptyButton.type = "button";
|
||||
emptyButton.className = "viewer-editor-tool viewer-editor-tool_submenu-button viewer-editor-tool_submenu-control viewer-editor-tool_submenu-materials";
|
||||
emptyButton.disabled = true;
|
||||
const label = t("gui.selectByMaterial", "Select by material");
|
||||
const text = document.createElement("span");
|
||||
text.textContent = label;
|
||||
emptyButton.appendChild(text);
|
||||
this.materialsSubmenu.appendChild(emptyButton);
|
||||
return;
|
||||
}
|
||||
|
||||
list.forEach((item) => {
|
||||
const subButton = document.createElement("button");
|
||||
subButton.type = "button";
|
||||
subButton.className = "viewer-editor-tool viewer-editor-tool_submenu-button viewer-editor-tool_submenu-control viewer-editor-tool_submenu-materials";
|
||||
if (item.uuid === this.selectedMaterialUuid) {
|
||||
subButton.classList.add("is-active");
|
||||
}
|
||||
subButton.dataset.materialUuid = item.uuid;
|
||||
subButton.setAttribute("title", item.label);
|
||||
subButton.setAttribute("aria-label", item.label);
|
||||
|
||||
const iconSpan = document.createElement("span");
|
||||
iconSpan.className = "viewer-editor-tool_icon";
|
||||
iconSpan.setAttribute("aria-hidden", "true");
|
||||
iconSpan.innerHTML = this.getEditorToolbarIcon("color");
|
||||
subButton.appendChild(iconSpan);
|
||||
|
||||
const labelSpan = document.createElement("span");
|
||||
labelSpan.className = "viewer-editor-tool_label";
|
||||
labelSpan.textContent = item.label;
|
||||
subButton.appendChild(labelSpan);
|
||||
|
||||
this.bindEventListener(subButton, "click", (event) => {
|
||||
event.stopPropagation();
|
||||
this.openMaterialsFolder(item.uuid);
|
||||
});
|
||||
|
||||
this.materialsSubmenu.appendChild(subButton);
|
||||
});
|
||||
},
|
||||
|
||||
buildMaterialsDialog() {
|
||||
if (!core.container || this.materialsDialog) return;
|
||||
|
||||
const dialog = document.createElement("div");
|
||||
dialog.id = "materialsDialog";
|
||||
dialog.className = "materials-dialog";
|
||||
dialog.hidden = true;
|
||||
dialog.innerHTML = `
|
||||
<div class="materials-dialog__backdrop" data-materials-dismiss="true"></div>
|
||||
<div class="materials-dialog__panel" role="dialog" aria-modal="true" aria-labelledby="materialsDialogTitle">
|
||||
<div class="materials-dialog__header">
|
||||
<h3 id="materialsDialogTitle">${t("gui.materials", "Materials")}</h3>
|
||||
<button type="button" class="materials-dialog__close" data-materials-dismiss="true" aria-label="${t("gui.materials", "Materials")}">×</button>
|
||||
</div>
|
||||
<div class="materials-dialog__body">
|
||||
<label class="materials-dialog__field">
|
||||
<span>${t("gui.editMaterial", "Edit material")}</span>
|
||||
<select id="materialsDialogSelect"></select>
|
||||
</label>
|
||||
<p id="materialsDialogHint" class="materials-dialog__hint">${t("gui.selectByMaterial", "select by material")}</p>
|
||||
<p id="materialsDialogEmpty" class="materials-dialog__empty">${t("gui.selectByMaterial", "select by material")}</p>
|
||||
<div class="materials-dialog__grid">
|
||||
<label class="materials-dialog__field">
|
||||
<span>${t("gui.color", "Color")}</span>
|
||||
<input id="materialsDialogColor" type="color" />
|
||||
</label>
|
||||
<label class="materials-dialog__field">
|
||||
<span>${t("gui.emissive", "Emissive")}</span>
|
||||
<input id="materialsDialogEmissiveColor" type="color" />
|
||||
</label>
|
||||
<label class="materials-dialog__field">
|
||||
<span>${t("gui.intensity", "Intensity")}</span>
|
||||
<input id="materialsDialogEmissive" type="range" min="0" max="1" step="0.01" />
|
||||
</label>
|
||||
<label class="materials-dialog__field">
|
||||
<span>${t("gui.metalness", "Metalness")}</span>
|
||||
<input id="materialsDialogMetalness" type="range" min="0" max="1" step="0.01" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(dialog);
|
||||
this.materialsDialog = dialog;
|
||||
this.materialsDialogPosition = null;
|
||||
this.materialsDialogSelect = dialog.querySelector("#materialsDialogSelect");
|
||||
const panel = dialog.querySelector(".materials-dialog__panel");
|
||||
const header = dialog.querySelector(".materials-dialog__header");
|
||||
this.materialsDialogInputs = {
|
||||
color: dialog.querySelector("#materialsDialogColor"),
|
||||
emissiveColor: dialog.querySelector("#materialsDialogEmissiveColor"),
|
||||
emissive: dialog.querySelector("#materialsDialogEmissive"),
|
||||
metalness: dialog.querySelector("#materialsDialogMetalness"),
|
||||
emptyState: dialog.querySelector("#materialsDialogEmpty"),
|
||||
hint: dialog.querySelector("#materialsDialogHint"),
|
||||
};
|
||||
|
||||
this.bindEventListener(dialog, "click", (event) => {
|
||||
const dismissTrigger = event.target?.closest?.("[data-materials-dismiss='true']");
|
||||
if (dismissTrigger) {
|
||||
this.closeMaterialsDialog();
|
||||
}
|
||||
});
|
||||
|
||||
this.bindEventListener(document, "keydown", (event) => {
|
||||
if (event.key !== "Escape") return;
|
||||
if (!this.materialsDialog || this.materialsDialog.hidden) return;
|
||||
event.preventDefault();
|
||||
this.closeMaterialsDialog();
|
||||
});
|
||||
|
||||
const handleMaterialSelect = (event) => {
|
||||
this.selectMaterialInEditor(this.materialsEditorObject, event.target.value);
|
||||
};
|
||||
this.bindEventListener(this.materialsDialogSelect, "change", handleMaterialSelect);
|
||||
this.bindEventListener(this.materialsDialogSelect, "input", handleMaterialSelect);
|
||||
|
||||
this.bindEventListener(this.materialsDialogInputs.color, "input", (event) => {
|
||||
const material = this.getMaterialByUuid(this.materialsEditorObject, this.selectedMaterialUuid);
|
||||
if (!material?.color) return;
|
||||
const value = event.target.value;
|
||||
core.materialProperties.color = value;
|
||||
material.color = new THREE.Color(value);
|
||||
});
|
||||
|
||||
this.bindEventListener(this.materialsDialogInputs.emissiveColor, "input", (event) => {
|
||||
const material = this.getMaterialByUuid(this.materialsEditorObject, this.selectedMaterialUuid);
|
||||
if (!material || material.emissive === undefined) return;
|
||||
const value = event.target.value;
|
||||
core.materialProperties.emissiveColor = value;
|
||||
material.emissive = new THREE.Color(value);
|
||||
});
|
||||
|
||||
this.bindEventListener(this.materialsDialogInputs.emissive, "input", (event) => {
|
||||
const material = this.getMaterialByUuid(this.materialsEditorObject, this.selectedMaterialUuid);
|
||||
if (!material) return;
|
||||
const value = parseFloat(event.target.value);
|
||||
core.materialProperties.emissive = value;
|
||||
material.emissiveIntensity = value;
|
||||
});
|
||||
|
||||
this.bindEventListener(this.materialsDialogInputs.metalness, "input", (event) => {
|
||||
const material = this.getMaterialByUuid(this.materialsEditorObject, this.selectedMaterialUuid);
|
||||
if (!material) return;
|
||||
const value = parseFloat(event.target.value);
|
||||
core.materialProperties.metalness = value;
|
||||
material.metalness = value;
|
||||
});
|
||||
|
||||
this.bindEventListener(header, "pointerdown", (event) => {
|
||||
if (event.button !== 0) return;
|
||||
if (event.target?.closest?.(".materials-dialog__close")) return;
|
||||
const targetRect =
|
||||
Viewer.mainCanvas?.getBoundingClientRect?.() ||
|
||||
core.container?.getBoundingClientRect?.();
|
||||
const panelRect = panel?.getBoundingClientRect?.();
|
||||
if (!targetRect || !panelRect) return;
|
||||
|
||||
this.materialsDialogDragging = {
|
||||
offsetX: event.clientX - panelRect.left,
|
||||
offsetY: event.clientY - panelRect.top,
|
||||
};
|
||||
panel.setPointerCapture?.(event.pointerId);
|
||||
panel.classList.add("is-dragging");
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
this.bindEventListener(document, "pointermove", (event) => {
|
||||
if (!this.materialsDialogDragging || !this.materialsDialog || this.materialsDialog.hidden) return;
|
||||
const targetRect =
|
||||
Viewer.mainCanvas?.getBoundingClientRect?.() ||
|
||||
core.container?.getBoundingClientRect?.();
|
||||
const panelRect = panel?.getBoundingClientRect?.();
|
||||
if (!targetRect || !panelRect) return;
|
||||
|
||||
const nextLeft = event.clientX - this.materialsDialogDragging.offsetX;
|
||||
const nextTop = event.clientY - this.materialsDialogDragging.offsetY;
|
||||
const minLeft = targetRect.left + 12;
|
||||
const maxLeft = targetRect.right - panelRect.width - 12;
|
||||
const minTop = targetRect.top + 12;
|
||||
const maxTop = targetRect.bottom - panelRect.height - 12;
|
||||
|
||||
this.materialsDialogPosition = {
|
||||
left: Math.min(Math.max(nextLeft, minLeft), Math.max(minLeft, maxLeft)),
|
||||
top: Math.min(Math.max(nextTop, minTop), Math.max(minTop, maxTop)),
|
||||
};
|
||||
|
||||
this.updateMaterialsDialogBounds();
|
||||
});
|
||||
|
||||
const stopMaterialsDialogDrag = () => {
|
||||
this.materialsDialogDragging = false;
|
||||
panel?.classList.remove("is-dragging");
|
||||
};
|
||||
|
||||
this.bindEventListener(document, "pointerup", stopMaterialsDialogDrag);
|
||||
this.bindEventListener(document, "pointercancel", stopMaterialsDialogDrag);
|
||||
|
||||
this.bindEventListener(window, "resize", () => this.updateMaterialsDialogBounds());
|
||||
this.bindEventListener(window, "scroll", () => this.updateMaterialsDialogBounds(), true);
|
||||
this.bindEventListener(document, "fullscreenchange", () => this.updateMaterialsDialogBounds());
|
||||
|
||||
this.syncMaterialsDialogSelectionOptions();
|
||||
this.syncMaterialsDialogFields();
|
||||
},
|
||||
|
||||
updateMaterialsDialogBounds() {
|
||||
if (!this.materialsDialog) return;
|
||||
const targetRect =
|
||||
Viewer.mainCanvas?.getBoundingClientRect?.() ||
|
||||
core.container?.getBoundingClientRect?.();
|
||||
if (!targetRect) return;
|
||||
|
||||
const left = Math.max(0, Math.round(targetRect.left));
|
||||
const top = Math.max(0, Math.round(targetRect.top));
|
||||
const width = Math.max(0, Math.round(targetRect.width));
|
||||
const height = Math.max(0, Math.round(targetRect.height));
|
||||
const panel = this.materialsDialog.querySelector(".materials-dialog__panel");
|
||||
const panelWidth = panel?.offsetWidth || Math.min(360, width - 24);
|
||||
const panelHeight = panel?.offsetHeight || Math.min(520, height - 24);
|
||||
|
||||
if (!this.materialsDialogPosition) {
|
||||
this.materialsDialogPosition = {
|
||||
left: Math.max(left + 12, left + width - panelWidth - 16),
|
||||
top: Math.max(top + 16, top + Math.min(40, Math.max(16, height * 0.08))),
|
||||
};
|
||||
} else {
|
||||
const minLeft = left + 12;
|
||||
const maxLeft = left + width - panelWidth - 12;
|
||||
const minTop = top + 12;
|
||||
const maxTop = top + height - panelHeight - 12;
|
||||
this.materialsDialogPosition = {
|
||||
left: Math.min(Math.max(this.materialsDialogPosition.left, minLeft), Math.max(minLeft, maxLeft)),
|
||||
top: Math.min(Math.max(this.materialsDialogPosition.top, minTop), Math.max(minTop, maxTop)),
|
||||
};
|
||||
}
|
||||
|
||||
this.materialsDialog.style.left = `${left}px`;
|
||||
this.materialsDialog.style.top = `${top}px`;
|
||||
this.materialsDialog.style.width = `${width}px`;
|
||||
this.materialsDialog.style.height = `${height}px`;
|
||||
if (panel) {
|
||||
panel.style.left = `${this.materialsDialogPosition.left - left}px`;
|
||||
panel.style.top = `${this.materialsDialogPosition.top - top}px`;
|
||||
panel.style.right = "auto";
|
||||
panel.style.transform = "none";
|
||||
}
|
||||
},
|
||||
|
||||
closeMaterialsDialog() {
|
||||
if (!this.materialsDialog) return;
|
||||
this.materialsDialog.hidden = true;
|
||||
},
|
||||
});
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue