66 lines
5.1 KiB
HTML
66 lines
5.1 KiB
HTML
<!doctype html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ifc viewer</title><link rel="stylesheet" href="./css/style.css"><style></style></head><body><div class="full-screen" id="full-screen"></div><div class="progress-wrap"><div class="progress-content" id="progress-text"></div></div><div class="btnGroup"></div><div class="left" id="tree"><div class="side-resize"></div><div class="left-header"><div class="file-info"><div id="schema" class="schema">Version</div><div id="file-name" class="file-name">FileName</div></div><h2>IFC Structure</h2></div><div class="left-conts scrollbar"><div class="tree-container" id="tree-container"></div></div></div><div class="right" id="property-table"><div class="side-resize"></div><div class="right-header"><h2>PROPERTIES</h2></div><div class="right-conts scrollbar"><div class="accordion"><div class="accordion-header"><button type="button" class="btn-accordion" aria-expanded="false" aria-controls="Attributes">Attributes</button></div><div class="accordion-collapse collapse" id="Attributes" aria-hidden="true"><div class="accordion-body"></div></div></div><div class="accordion"><div class="accordion-header"><button type="button" class="btn-accordion" aria-expanded="false" aria-controls="PropertySets">Property Sets</button></div><div class="accordion-collapse collapse" id="PropertySets" aria-hidden="true"><div class="accordion-body"></div></div></div><div class="accordion"><div class="accordion-header"><button type="button" class="btn-accordion" aria-expanded="false" aria-controls="Material">Material</button></div><div class="accordion-collapse collapse" id="Material" aria-hidden="true"><div class="accordion-body"></div></div></div><div class="accordion"><div class="accordion-header"><button type="button" class="btn-accordion" aria-expanded="false" aria-controls="SpatialContainer">Spatial Container</button></div><div class="accordion-collapse collapse" id="SpatialContainer" aria-hidden="true"><div class="accordion-body"></div></div></div></div></div><script>/* -------------------- Left, Right 사이드 패널 폭 조절 -------------------- */
|
|
const $leftResize = document.querySelector('.left .side-resize');
|
|
const $rightResize = document.querySelector('.right .side-resize');
|
|
const $left = document.querySelector('.left');
|
|
const $right = document.querySelector('.right');
|
|
|
|
let activeResize = null; // "left" 또는 "right" 값을 가짐
|
|
let startX = 0;
|
|
let initialWidth = 0;
|
|
|
|
// 왼쪽 리사이저: 왼쪽 요소의 너비 조절
|
|
$leftResize.addEventListener('mousedown', (event) => {
|
|
activeResize = 'left';
|
|
startX = event.clientX;
|
|
initialWidth = $left.getBoundingClientRect().width;
|
|
});
|
|
|
|
// 오른쪽 리사이저: 오른쪽 요소의 너비 조절
|
|
$rightResize.addEventListener('mousedown', (event) => {
|
|
activeResize = 'right';
|
|
startX = event.clientX;
|
|
initialWidth = $right.getBoundingClientRect().width;
|
|
});
|
|
|
|
// 마우스 업 시, 드래그 종료
|
|
document.addEventListener('mouseup', () => {
|
|
activeResize = null;
|
|
});
|
|
|
|
// 마우스 이동 시, 해당하는 요소의 너비 조절
|
|
document.addEventListener('mousemove', (event) => {
|
|
if (!activeResize) return;
|
|
|
|
if (activeResize === 'left') {
|
|
// 왼쪽 요소의 경우, 오른쪽으로 드래그하면 너비 증가
|
|
const newWidth = initialWidth + (event.clientX - startX);
|
|
handleResize($left, newWidth);
|
|
} else if (activeResize === 'right') {
|
|
// 오른쪽 요소의 경우, 보통 리사이저가 왼쪽 경계에 있으므로
|
|
// 마우스를 왼쪽으로 드래그하면 너비 증가
|
|
const newWidth = initialWidth - (event.clientX - startX);
|
|
handleResize($right, newWidth);
|
|
}
|
|
});
|
|
|
|
// 사이즈 조절 동작 함수 (최소, 최대값 적용)
|
|
function handleResize(elem, newWidth) {
|
|
if (!elem) return;
|
|
|
|
if (newWidth <= 300) {
|
|
elem.style.width = '300px';
|
|
} else if (newWidth >= 650) {
|
|
elem.style.width = '650px';
|
|
} else {
|
|
elem.style.width = `${newWidth}px`;
|
|
}
|
|
}</script><script src="https://api.digitalarchive.work/hmCesium/lib/axios/dist/axios.js"></script><script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script><script type="importmap">{
|
|
"imports": {
|
|
"three": "../node_modules/three/build/three.module.js",
|
|
"@thatopen/components": "../node_modules/@thatopen/components/dist/index.mjs",
|
|
"@thatopen/components-front": "../node_modules/@thatopen/components-front/dist/index.js",
|
|
"@thatopen/fragments": "../node_modules/@thatopen/fragments/dist/index.mjs",
|
|
"@thatopen/ui": "../node_modules/@thatopen/ui/dist/index.js",
|
|
"web-ifc": "../node_modules/web-ifc/web-ifc-api.js"
|
|
}
|
|
}</script><script defer="defer" src="./bundle.19489245bc592e8a0b87.js"></script><script defer="defer" src="./bundle.f1f097cba5dc7baf1c3c.js"></script></body></html> |