update .gitgnore
This commit is contained in:
hujinwei
208
public/demo/layerManager/LayerManager.js
Normal file
208
public/demo/layerManager/LayerManager.js
Normal file
@ -0,0 +1,208 @@
|
||||
/* eslint-disable no-undef */
|
||||
export default class LayerManager {
|
||||
viewer;
|
||||
container;
|
||||
listWrapper;
|
||||
listContainer;
|
||||
confirmBtn;
|
||||
cancelBtn;
|
||||
headerText;
|
||||
closeBtn;
|
||||
layers;
|
||||
checkboxes;
|
||||
colorInputs;
|
||||
|
||||
constructor(viewer, container = document.body) {
|
||||
this.init(viewer, container);
|
||||
}
|
||||
|
||||
init(viewer, container) {
|
||||
this.viewer = viewer;
|
||||
this.container = container;
|
||||
this.layers = this.viewer.getLayers();
|
||||
this.buildPage();
|
||||
this.addContent();
|
||||
this.addEventHandlers();
|
||||
}
|
||||
|
||||
show() {
|
||||
if (this.listContainer?.classList.contains("popup-hide")) {
|
||||
this.listContainer.classList.remove("popup-hide");
|
||||
this.updatePage();
|
||||
}
|
||||
}
|
||||
|
||||
hide() {
|
||||
if (!this.listContainer?.classList.contains("popup-hide")) {
|
||||
this.listContainer?.classList.add("popup-hide");
|
||||
|
||||
// when click the close button, trigger the layers button's click event
|
||||
const layersBtn = document.querySelector("#Layers");
|
||||
if (layersBtn.classList.contains("active")) {
|
||||
layersBtn.click();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.closeBtn?.removeEventListener("click", this.hide);
|
||||
|
||||
this.checkboxes?.forEach((checkbox) => {
|
||||
checkbox.removeEventListener("change", () => {
|
||||
this.checkboxHandler(checkbox);
|
||||
});
|
||||
});
|
||||
document.body.removeChild(this.listContainer);
|
||||
}
|
||||
|
||||
buildPage() {
|
||||
this.listContainer = document.createElement("div");
|
||||
this.listContainer.classList.add("popup-container", "popup-hide");
|
||||
|
||||
const header = document.createElement("div");
|
||||
header.classList.add("popup-header");
|
||||
this.headerText = document.createElement("span");
|
||||
this.headerText.innerHTML = "图层管理";
|
||||
this.closeBtn = document.createElement("span");
|
||||
this.closeBtn.classList.add("popup-close");
|
||||
this.closeBtn.innerHTML = "X";
|
||||
header.appendChild(this.headerText);
|
||||
header.appendChild(this.closeBtn);
|
||||
this.listContainer.appendChild(header);
|
||||
|
||||
this.listWrapper = document.createElement("div");
|
||||
this.listWrapper.classList.add("popup-wrapper");
|
||||
this.listContainer.appendChild(this.listWrapper);
|
||||
|
||||
this.container.appendChild(this.listContainer);
|
||||
this.updateHeaderText();
|
||||
}
|
||||
|
||||
addContent() {
|
||||
let fragment = `
|
||||
<div class="popup-list-item">
|
||||
<input type="checkbox" id="toggleAllLayers" checked class="checkbox"></input>
|
||||
<span class="popup-layer-color">颜色</span>
|
||||
<span class="popup-layer-name">图层名称</span>
|
||||
</div>
|
||||
`;
|
||||
const bAppendModelId = this.layers.length > 1;
|
||||
for (let i = 0; i < this.layers.length; ++i) {
|
||||
const layers = this.layers[i].layers;
|
||||
let layerNames = Object.keys(layers);
|
||||
layerNames = layerNames.sort();
|
||||
for (const layerName of layerNames) {
|
||||
const dxfLayer = layers[layerName];
|
||||
// add "<modelId>" as layer name prefix when there is more than one models
|
||||
const tmpLayerName = bAppendModelId ? `<${this.layers[i].modelId}> ${layerName}` : layerName;
|
||||
const color = convertDecimalToHex(dxfLayer.color);
|
||||
const listItem = this.generateListItem(tmpLayerName, dxfLayer.visible, color);
|
||||
fragment += listItem;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.listWrapper) {
|
||||
this.listWrapper.innerHTML = fragment;
|
||||
}
|
||||
|
||||
// add checkboxes events
|
||||
const checkboxEles = document.querySelectorAll("input[type=checkbox]");
|
||||
this.checkboxes = [].slice.call(checkboxEles, 0);
|
||||
const colorInputsEles = document.querySelectorAll("input[type=color]");
|
||||
this.colorInputs = [].slice.call(colorInputsEles, 0);
|
||||
|
||||
// input[type=checkbox]
|
||||
this.checkboxes.forEach((checkbox) => {
|
||||
checkbox.addEventListener("change", () => {
|
||||
this.checkboxHandler(checkbox);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
generateListItem(layer, visible, color) {
|
||||
const listItem = `
|
||||
<div class="popup-list-item">
|
||||
<input type="checkbox" value="${layer}" ${visible ? "checked" : ""} class="checkbox">
|
||||
<div class="popup-color" style="background-color: ${color}"></div>
|
||||
<span class="popup-layer-name">${layer}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return listItem;
|
||||
}
|
||||
|
||||
addEventHandlers() {
|
||||
this.closeBtn?.addEventListener("click", this.hide.bind(this));
|
||||
|
||||
const layersBtn = document.querySelector("#Layers");
|
||||
layersBtn.addEventListener("click", () => {
|
||||
if (layersBtn.classList.contains("active")) {
|
||||
if (!this.viewer.layerManager) {
|
||||
this.viewer.layerManager = new LayerManager(this.viewer);
|
||||
} else {
|
||||
this.viewer.layerManager.show();
|
||||
}
|
||||
} else {
|
||||
this.hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
checkboxHandler(checkbox) {
|
||||
if (checkbox.id === "toggleAllLayers") {
|
||||
for (let i = 0; i < this.layers.length; ++i) {
|
||||
const modelId = this.layers[i].modelId;
|
||||
const layers = this.layers[i].layers;
|
||||
Object.keys(layers).forEach((layerName) => {
|
||||
this.viewer.setLayerVisibility(layerName, checkbox.checked, modelId);
|
||||
});
|
||||
}
|
||||
|
||||
this.checkboxes?.forEach((cb) => (cb.checked = checkbox.checked));
|
||||
return;
|
||||
}
|
||||
|
||||
let modelId = "";
|
||||
let layerName = checkbox.value;
|
||||
const idx = layerName.indexOf(">");
|
||||
if (idx !== -1) {
|
||||
modelId = layerName.slice(1, idx);
|
||||
layerName = layerName.slice(idx + 2);
|
||||
}
|
||||
if (!modelId) {
|
||||
modelId = this.layers[0].modelId;
|
||||
}
|
||||
this.viewer.setLayerVisibility(layerName, checkbox.checked, modelId);
|
||||
}
|
||||
|
||||
updatePage() {
|
||||
const layers = this.viewer.getLayers();
|
||||
// if layers.length is the same, there is no change to loaded models
|
||||
if (layers.length === this.layers.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.layers = layers;
|
||||
this.addContent();
|
||||
this.updateHeaderText();
|
||||
}
|
||||
|
||||
updateHeaderText() {
|
||||
let layerCount = 0;
|
||||
for (let i = 0; i < this.layers.length; ++i) {
|
||||
const layers = this.layers[i].layers;
|
||||
layerCount += Object.keys(layers).length;
|
||||
}
|
||||
this.headerText.innerHTML = `图层管理 (共 ${layerCount} 个图层)`;
|
||||
}
|
||||
}
|
||||
|
||||
function convertDecimalToHex(decimal) {
|
||||
if (decimal === undefined) {
|
||||
return "#ffffff";
|
||||
}
|
||||
|
||||
const hex = decimal.toString(16);
|
||||
|
||||
return `#${hex.padStart(6, "0")}`;
|
||||
}
|
||||
133
public/demo/layerManager/layerManager.css
Normal file
133
public/demo/layerManager/layerManager.css
Normal file
@ -0,0 +1,133 @@
|
||||
input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type="color"] {
|
||||
width: 30px;
|
||||
height: 16px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background-color: rgba(0, 0, 0, 0.0);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ::-webkit-color-swatch-wrapper {
|
||||
border: 1px solid #777;
|
||||
} */
|
||||
::-webkit-color-swatch {
|
||||
position:relative;
|
||||
margin-top: -5px;
|
||||
width: 40px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.popup-container {
|
||||
position: absolute;
|
||||
top: 76px;
|
||||
left: calc(5%);
|
||||
width: 330px;
|
||||
height: 600px;
|
||||
max-height: 90%; /* fix the issue when canvas's height is less than 600px */
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.7);
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
color: black;
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popup-container:hover {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.popup-wrapper {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.popup-list-item {
|
||||
display: flex;
|
||||
/* justify-content: space-between; */
|
||||
align-items: center;
|
||||
padding: 6px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.popup-list-item:hover {
|
||||
background-color: aliceblue;
|
||||
}
|
||||
.popup-layer-color {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
width: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.popup-layer-name {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
padding: 1px 0;
|
||||
width: 280px;
|
||||
font-size: 12px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.popup-color {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
border: 1px solid black;
|
||||
width: 18px;
|
||||
height: 16px;
|
||||
min-width: 18px;
|
||||
}
|
||||
.popup-freeze {
|
||||
margin-right: 5px;
|
||||
color: #ccc;
|
||||
font-size: 12px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.popup-hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
/* justify-content: space-between; */
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
/* .popup-layer-name-title,
|
||||
.popup-layer-color-title {
|
||||
display: inline;
|
||||
color: #ccc;
|
||||
font-size: 12px;
|
||||
}
|
||||
.popup-layer-name-title {
|
||||
margin-left: 40px;
|
||||
}
|
||||
.popup-layer-color-title {
|
||||
margin-right: 75px;
|
||||
} */
|
||||
|
||||
.popup-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 6px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
background-color: #00000022;
|
||||
}
|
||||
Reference in New Issue
Block a user