ByoungSooPark/gemini-viewer-examples
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upgrade gemini-viewer-threejs to 0.2.52

Browse Source
This commit is contained in:
yanzexuan
2023-07-25 08:21:42 +08:00
parent 33c27b19e8
commit 28aed23f11
13 changed files with 27 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
public/demo/dxf_0.html
View File

@ -4,7 +4,6 @@
<link rel="icon" href="./demo/favicon.ico">
<link rel="stylesheet" type="text/css" href="./demo/global.css">
<link rel="stylesheet" type="text/css" href="./demo/iconfont/iconfont.css">
<link rel="stylesheet" href="./demo/layerManager/layerManager.css">
<link rel="stylesheet" href="./demo/settings/SettingsPanel.css">
<style>
#myCanvas {
@ -23,13 +22,13 @@
AxisGizmoPlugin,
BottomBarPlugin,
DxfViewer,
LayerManagerPlugin,
MeasurementPlugin,
StatsPlugin,
ToolbarMenuId,
ViewerEvent,
} from "./demo/libs/gemini-viewer.esm.min.js";
import DxfSettingsPanel from './demo/settings/DxfSettingsPanel.js';
import LayerManager from './demo/layerManager/LayerManager.js';
const filename = "rac_basic_sample_project";
const modelCfg = {
@ -65,15 +64,12 @@
onActive: () => {
console.log("[Toolbar]", "Activate Layers");
if (!window.layerManager) {
window.layerManager = new LayerManager(window.viewer);
window.layerManager = new LayerManagerPlugin(window.viewer);
}
window.layerManager.show();
},
onDeactive: () => {
console.log("[Toolbar]", "Deactivate Layers");
if (!window.layerManager) {
window.layerManager = new LayerManager(window.viewer);
}
window.layerManager.hide();
},
},

8
public/demo/dxf_1.html
View File

@ -4,7 +4,6 @@
<link rel="icon" href="./demo/favicon.ico" />
<link rel="stylesheet" type="text/css" href="./demo/global.css" />
<link rel="stylesheet" type="text/css" href="./demo/iconfont/iconfont.css" />
<link rel="stylesheet" href="./demo/layerManager/layerManager.css" />
<link rel="stylesheet" href="./demo/settings/SettingsPanel.css">
<style>
#myCanvas {
@ -23,13 +22,13 @@
AxisGizmoPlugin,
BottomBarPlugin,
DxfViewer,
LayerManagerPlugin,
MeasurementPlugin,
StatsPlugin,
ToolbarMenuId,
ViewerEvent,
} from "./demo/libs/gemini-viewer.esm.min.js";
import DxfSettingsPanel from './demo/settings/DxfSettingsPanel.js';
import LayerManager from "./demo/layerManager/LayerManager.js";
const filename = "apartments";
const modelCfg = {
@ -65,15 +64,12 @@
onActive: () => {
console.log("[Toolbar]", "Activate Layers");
if (!window.layerManager) {
window.layerManager = new LayerManager(window.viewer);
window.layerManager = new LayerManagerPlugin(window.viewer);
}
window.layerManager.show();
},
onDeactive: () => {
console.log("[Toolbar]", "Deactivate Layers");
if (!window.layerManager) {
window.layerManager = new LayerManager(window.viewer);
}
window.layerManager.hide();
},
},

8
public/demo/dxf_10_upload_files_to_compre.html
View File

@ -4,7 +4,6 @@
<link rel="stylesheet" type="text/css" href="./demo/global.css" />
<link rel="stylesheet" type="text/css" href="./demo/iconfont/iconfont.css" />
<link rel="stylesheet" href="./demo/compare/dxfComparePanel.css" />
<link rel="stylesheet" href="./demo/layerManager/layerManager.css" />
<link rel="stylesheet" href="./demo/settings/SettingsPanel.css" />
<style>
body {
@ -77,6 +76,7 @@
BottomBarPlugin,
DxfCompareHelper,
DxfViewer,
LayerManagerPlugin,
MeasurementPlugin,
StatsPlugin,
ToolbarMenuId,
@ -84,7 +84,6 @@
} from "./demo/libs/gemini-viewer.esm.min.js";
import DxfComparePanel from "./demo/compare/dxfComparePanel.js";
import DxfSettingsPanel from "./demo/settings/DxfSettingsPanel.js";
import LayerManager from "./demo/layerManager/LayerManager.js";
const compareHelper = new DxfCompareHelper(
{
@ -191,15 +190,12 @@
onActive: () => {
console.log("[Toolbar]", "Activate Layers");
if (!viewer.layerManager) {
viewer.layerManager = new LayerManager(viewer);
viewer.layerManager = new LayerManagerPlugin(viewer);
}
viewer.layerManager.show();
},
onDeactive: () => {
console.log("[Toolbar]", "Deactivate Layers");
if (!viewer.layerManager) {
viewer.layerManager = new LayerManager(viewer);
}
viewer.layerManager.hide();
},
},

8
public/demo/dxf_2.html
View File

@ -4,7 +4,6 @@
<link rel="icon" href="./demo/favicon.ico" />
<link rel="stylesheet" type="text/css" href="./demo/global.css" />
<link rel="stylesheet" type="text/css" href="./demo/iconfont/iconfont.css" />
<link rel="stylesheet" href="./demo/layerManager/layerManager.css" />
<link rel="stylesheet" href="./demo/settings/SettingsPanel.css">
<style>
#myCanvas {
@ -23,13 +22,13 @@
AxisGizmoPlugin,
BottomBarPlugin,
DxfViewer,
LayerManagerPlugin,
MeasurementPlugin,
StatsPlugin,
ToolbarMenuId,
ViewerEvent,
} from "./demo/libs/gemini-viewer.esm.min.js";
import DxfSettingsPanel from './demo/settings/DxfSettingsPanel.js';
import LayerManager from "./demo/layerManager/LayerManager.js";
const filename = "doors_and_windows";
const modelCfg = {
@ -65,15 +64,12 @@
onActive: () => {
console.log("[Toolbar]", "Activate Layers");
if (!window.layerManager) {
window.layerManager = new LayerManager(window.viewer);
window.layerManager = new LayerManagerPlugin(window.viewer);
}
window.layerManager.show();
},
onDeactive: () => {
console.log("[Toolbar]", "Deactivate Layers");
if (!window.layerManager) {
window.layerManager = new LayerManager(window.viewer);
}
window.layerManager.hide();
},
},

7
public/demo/dxf_3_compare_with_1_viewport.html
View File

@ -5,7 +5,6 @@
<link rel="stylesheet" type="text/css" href="./demo/global.css" />
<link rel="stylesheet" type="text/css" href="./demo/iconfont/iconfont.css" />
<link rel="stylesheet" href="./demo/compare/dxfComparePanel.css" />
<link rel="stylesheet" href="./demo/layerManager/layerManager.css" />
<link rel="stylesheet" href="./demo/settings/SettingsPanel.css" />
<style>
#myCanvas {
@ -30,7 +29,6 @@
} from "./demo/libs/gemini-viewer.esm.min.js";
import DxfComparePanel from "./demo/compare/dxfComparePanel.js"
import DxfSettingsPanel from "./demo/settings/DxfSettingsPanel.js";
import LayerManager from "./demo/layerManager/LayerManager.js";
const url1 = "./demo/models/dxf/doors_and_windows.dxf";
const url2 = "./demo/models/dxf/doors_and_windows_mopdified.dxf";
@ -61,15 +59,12 @@
onActive: () => {
console.log("[Toolbar]", "Activate Layers");
if (!window.layerManager) {
window.layerManager = new LayerManager(window.compareHelper.viewer);
window.layerManager = new LayerManagerPlugin(window.compareHelper.viewer);
}
window.layerManager.show();
},
onDeactive: () => {
console.log("[Toolbar]", "Deactivate Layers");
if (!window.layerManager) {
window.layerManager = new LayerManager(window.compareHelper.viewer);
}
window.layerManager.hide();
},
},

7
public/demo/dxf_5_markups.html
View File

@ -4,7 +4,6 @@
<link rel="icon" href="./demo/favicon.ico">
<link rel="stylesheet" type="text/css" href="./demo/global.css">
<link rel="stylesheet" type="text/css" href="./demo/iconfont/iconfont.css">
<link rel="stylesheet" href="./demo/layerManager/layerManager.css">
<link rel="stylesheet" href="./demo/settings/SettingsPanel.css">
<style>
#myCanvas {
@ -87,7 +86,6 @@
ViewerEvent,
} from "./demo/libs/gemini-viewer.esm.min.js";
import DxfSettingsPanel from './demo/settings/DxfSettingsPanel.js';
import LayerManager from './demo/layerManager/LayerManager.js';
const filename = "rac_basic_sample_project";
const modelCfg = {
@ -122,15 +120,12 @@
onActive: () => {
console.log("[Toolbar]", "Activate Layers");
if (!window.layerManager) {
window.layerManager = new LayerManager(window.viewer);
window.layerManager = new LayerManagerPlugin(window.viewer);
}
window.layerManager.show();
},
onDeactive: () => {
console.log("[Toolbar]", "Deactivate Layers");
if (!window.layerManager) {
window.layerManager = new LayerManager(window.viewer);
}
window.layerManager.hide();
},
},

10
public/demo/dxf_6_hotpoints.html
View File

@ -4,7 +4,6 @@
<link rel="icon" href="./demo/favicon.ico">
<link rel="stylesheet" type="text/css" href="./demo/global.css">
<link rel="stylesheet" type="text/css" href="./demo/iconfont/iconfont.css">
<link rel="stylesheet" href="./demo/layerManager/layerManager.css">
<link rel="stylesheet" href="./demo/settings/SettingsPanel.css">
<style>
#myCanvas {
@ -98,11 +97,11 @@
AxisGizmoPlugin,
DxfViewer,
HotpointPlugin,
LayerManagerPlugin,
ToolbarMenuId,
ViewerEvent,
} from "./demo/libs/gemini-viewer.esm.min.js";
import DxfSettingsPanel from './demo/settings/DxfSettingsPanel.js';
import LayerManager from './demo/layerManager/LayerManager.js';
const filename = "rac_basic_sample_project";
const modelCfg = {
@ -137,15 +136,12 @@
onActive: () => {
console.log("[Toolbar]", "Activate Layers");
if (!window.layerManager) {
window.layerManager = new LayerManager(window.viewer);
window.layerManager = new LayerManagerPlugin(window.viewer);
}
window.layerManager.show();
},
onDeactive: () => {
console.log("[Toolbar]", "Deactivate Layers");
if (!window.layerManager) {
window.layerManager = new LayerManager(window.viewer);
}
window.layerManager.hide();
},
},
@ -185,7 +181,7 @@
clearHotpointsBtn.onclick = () => {
addHotpointBtn.classList.remove("btn-active");
addingHotpoint = false;
viewer.clearHotpoints();
hotpointPlugin.clear();
Object.keys(hotpointsPerLayout).forEach((key) => {
hotpointsPerLayout[key] = [];
});

8
public/demo/dxf_7_building1_2.html
View File

@ -4,7 +4,6 @@
<link rel="icon" href="./demo/favicon.ico">
<link rel="stylesheet" type="text/css" href="./demo/global.css">
<link rel="stylesheet" type="text/css" href="./demo/iconfont/iconfont.css">
<link rel="stylesheet" href="./demo/layerManager/layerManager.css">
<link rel="stylesheet" href="./demo/settings/SettingsPanel.css">
<style>
#myCanvas {
@ -22,12 +21,12 @@
import {
AxisGizmoPlugin,
DxfViewer,
LayerManagerPlugin,
MeasurementPlugin,
ToolbarMenuId,
ViewerEvent,
} from "./demo/libs/gemini-viewer.esm.min.js";
import DxfSettingsPanel from './demo/settings/DxfSettingsPanel.js';
import LayerManager from './demo/layerManager/LayerManager.js';
const filename = "building_1_2";
const modelCfg = {
@ -63,15 +62,12 @@
onActive: () => {
console.log("[Toolbar]", "Activate Layers");
if (!window.layerManager) {
window.layerManager = new LayerManager(window.viewer);
window.layerManager = new LayerManagerPlugin(window.viewer);
}
window.layerManager.show();
},
onDeactive: () => {
console.log("[Toolbar]", "Deactivate Layers");
if (!window.layerManager) {
window.layerManager = new LayerManager(window.viewer);
}
window.layerManager.hide();
},
},

8
public/demo/dxf_8_compare_with_2_viewports.html
View File

@ -4,7 +4,6 @@
<link rel="stylesheet" type="text/css" href="./demo/global.css" />
<link rel="stylesheet" type="text/css" href="./demo/iconfont/iconfont.css" />
<link rel="stylesheet" href="./demo/compare/dxfComparePanel.css" />
<link rel="stylesheet" href="./demo/layerManager/layerManager.css" />
<link rel="stylesheet" href="./demo/settings/SettingsPanel.css" />
<style>
body {
@ -60,13 +59,13 @@
AxisGizmoPlugin,
DxfCompareHelper,
DxfViewer,
LayerManagerPlugin,
MeasurementPlugin,
ToolbarMenuId,
ViewerEvent,
} from "./demo/libs/gemini-viewer.esm.min.js";
import DxfComparePanel from "./demo/compare/dxfComparePanel.js";
import DxfSettingsPanel from "./demo/settings/DxfSettingsPanel.js";
import LayerManager from "./demo/layerManager/LayerManager.js";
const url1 = "./demo/models/dxf/doors_and_windows.dxf";
const url2 = "./demo/models/dxf/doors_and_windows_mopdified.dxf";
@ -147,15 +146,12 @@
onActive: () => {
console.log("[Toolbar]", "Activate Layers");
if (!viewer.layerManager) {
viewer.layerManager = new LayerManager(viewer);
viewer.layerManager = new LayerManagerPlugin(viewer);
}
viewer.layerManager.show();
},
onDeactive: () => {
console.log("[Toolbar]", "Deactivate Layers");
if (!viewer.layerManager) {
viewer.layerManager = new LayerManager(viewer);
}
viewer.layerManager.hide();
},
},

23
public/demo/dxf_9_screenshot.html
View File

@ -12,12 +12,7 @@
/>
<link rel="icon" href="./demo/favicon.ico" />
<link rel="stylesheet" type="text/css" href="./demo/global.css" />
<link
rel="stylesheet"
type="text/css"
href="./demo/iconfont/iconfont.css"
/>
<link rel="stylesheet" href="./demo/layerManager/layerManager.css" />
<link rel="stylesheet" type="text/css" href="./demo/iconfont/iconfont.css"/>
<link rel="stylesheet" href="./demo/settings/SettingsPanel.css" />
<style>
#myCanvas {
@ -35,6 +30,7 @@
import {
AxisGizmoPlugin,
DxfViewer,
LayerManagerPlugin,
MeasurementPlugin,
MenuTypeEnums,
ScreenshotMode,
@ -42,7 +38,6 @@
ViewerEvent,
} from "./demo/libs/gemini-viewer.esm.min.js";
import DxfSettingsPanel from "./demo/settings/DxfSettingsPanel.js";
import LayerManager from "./demo/layerManager/LayerManager.js";
const filename = "rac_basic_sample_project";
const modelCfg = {
@ -78,31 +73,25 @@
onActive: () => {
console.log("[Toolbar]", "Activate Layers");
if (!window.layerManager) {
window.layerManager = new LayerManager(window.viewer);
window.layerManager = new LayerManagerPlugin(window.viewer);
}
window.layerManager.show();
},
onDeactive: () => {
console.log("[Toolbar]", "Deactivate Layers");
if (!window.layerManager) {
window.layerManager = new LayerManager(window.viewer);
}
window.layerManager.hide();
},
},
},
};
const viewer = new DxfViewer(config);
const fontFiles = ["./demo/three/fonts/hztxt.shx", "./demo/three/fonts/simplex.shx"];
await viewer.setFont(fontFiles);
window.viewer = viewer;
new AxisGizmoPlugin(viewer, { ignoreZAxis: true });
new MeasurementPlugin(viewer);
const fontFiles = [
"./demo/three/fonts/hztxt.shx",
"./demo/three/fonts/simplex.shx",
];
await viewer.setFont(fontFiles);
const toolbar = viewer.toolbar;
toolbar.addMenu(
"markup-screenshot",

12
public/demo/empty_dxf_project.html
View File

@ -3,7 +3,6 @@
<head>
<link rel="icon" href="./demo/favicon.ico" />
<link rel="stylesheet" type="text/css" href="./demo/global.css" />
<link rel="stylesheet" href="./demo/layerManager/layerManager.css">
<link rel="stylesheet" href="./demo/settings/SettingsPanel.css">
<style>
#myCanvas {
@ -79,6 +78,7 @@
AxisGizmoPlugin,
BottomBarPlugin,
DxfViewer,
LayerManagerPlugin,
LocalDxfUploader,
MeasurementPlugin,
StatsPlugin,
@ -86,7 +86,6 @@
ViewerEvent,
} from "./demo/libs/gemini-viewer.esm.min.js";
import DxfSettingsPanel from './demo/settings/DxfSettingsPanel.js';
import LayerManager from './demo/layerManager/LayerManager.js';
const config = {
containerId: "myCanvas",
@ -115,15 +114,12 @@
onActive: () => {
console.log("[Toolbar]", "Activate Layers");
if (!window.layerManager) {
window.layerManager = new LayerManager(window.viewer);
window.layerManager = new LayerManagerPlugin(window.viewer);
}
window.layerManager.show();
},
onDeactive: () => {
console.log("[Toolbar]", "Deactivate Layers");
if (!window.layerManager) {
window.layerManager = new LayerManager(window.viewer);
}
window.layerManager.hide();
},
},
@ -142,7 +138,7 @@
const modelUploader = new LocalDxfUploader(viewer);
modelUploader.onSuccess = () => {
!viewer.layerManager && (viewer.layerManager = new LayerManager(viewer));
!window.layerManager && (window.layerManager = new LayerManagerPlugin(viewer));
}
document.getElementById("uploadModelFile").onclick = function() {
modelUploader.openFileBrowserToUpload();
@ -152,7 +148,7 @@
if (url) {
viewer.loadModelAsync({ src: url, merge: true }).then(() => {
console.log(`[Demo] Loaded model ${url}`);
!viewer.layerManager && (viewer.layerManager = new LayerManager(viewer));
!window.layerManager && (window.layerManager = new LayerManagerPlugin(viewer));
})
}
}

215
public/demo/layerManager/LayerManager.js
View File

@ -1,215 +0,0 @@
/* 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 = viewer.viewerContainer;
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, i) => {
checkbox.removeEventListener("change", () => {
this.checkboxHandler(checkbox, i);
});
});
this.listContainer.remove();
}
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 ? `&lt;${this.layers[i].modelId}&gt; ${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 = this.listContainer.querySelectorAll("input[type=checkbox]");
this.checkboxes = [].slice.call(checkboxEles, 0);
const colorInputsEles = this.listContainer.querySelectorAll("input[type=color]");
this.colorInputs = [].slice.call(colorInputsEles, 0);
// input[type=checkbox]
this.checkboxes.forEach((checkbox, i) => {
checkbox.addEventListener("change", () => {
this.checkboxHandler(checkbox, i);
});
});
}
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 &&
// 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, index) {
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;
let layerHandle = undefined;
if (index === this.checkboxes.length - 1) {
layerHandle = Object.values(this.layers.at(-1).layers)[0].handle;
}
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
View File

@ -1,133 +0,0 @@
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;
}