63 lines
7.3 KiB
HTML
63 lines
7.3 KiB
HTML
<!doctype html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document</title><link rel="stylesheet" href="./css/style.css"></head><body><canvas class="canvas" id="canvas"></canvas><div class="progress-wrap"><div class="progress-content" id="progress-text"></div></div><div class="modal"><div class="modal-content"><div class="modal__conts">• 모델 파일은 <span class="highlight">300MB</span>를 초과할 경우 지원되지 않습니다<br>• 파일 크기가 클 땐 웹 최적화된 GLB포맷 또는 IFC형식으로 변환해 보세요<br></div></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"></div></div><h2>FileName</h2></div><div class="left-conts scrollbar"><div class="tree-container" id="tree-container"><ul class="tree"><li><input type="checkbox" id="root" class="input-caret" checked="checked"> <label for="root" class="label-caret"></label> <input type="checkbox" id="root-visible" class="input-visible"> <label for="root-visible" class="label-visible"></label><div><span class="ifc-type">node-02-01</span> <span class="ifc-name">Description1111111112222222444442222222221</span></div><ul><li><input type="checkbox" id="node-01" class="input-caret"> <label for="node-01" class="label-caret"></label> <input type="checkbox" id="node-01-visible" class="input-visible"> <label for="node-01-visible" class="label-visible"></label><div><span class="ifc-type">node-01</span> <span class="ifc-name">Description1111</span></div></li><li><input type="checkbox" id="node-02" class="input-caret"> <label for="node-02" class="label-caret"></label> <input type="checkbox" id="node-02-visible" class="input-visible"> <label for="node-02-visible" class="label-visible"></label><div><span class="ifc-type">node-02</span> <span class="ifc-name">Description2</span></div><ul><li><input type="checkbox" id="node-02-01" class="input-caret"> <label for="node-02-01" class="label-caret"></label> <input type="checkbox" id="node-02-01-visible" class="input-visible"> <label for="node-02-01-visible" class="label-visible"></label><div><span class="ifc-type">node-02-01</span> <span class="ifc-name">Description2</span></div></li><li><input type="checkbox" id="node-02-02" class="input-caret"> <label for="node-02-02" class="label-caret"></label> <input type="checkbox" id="node-02-02-visible" class="input-visible"> <label for="node-02-02-visible" class="label-visible"></label><div><span class="ifc-type">node-02-02</span> <span class="ifc-name">Description2</span></div></li></ul></li><li><input type="checkbox" id="node-03"> <label for="node-03" class="label-caret"></label> <input type="checkbox" id="node-03-visible" class="input-visible"> <label for="node-03-visible" class="label-visible"></label><div>node-03<span>Description</span></div></li></ul></li></ul></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",
|
|
"three/addons/": "../node_modules/three/examples/jsm/",
|
|
"@tweenjs/tween.js": "../node_modules/@tweenjs/tween.js/dist/tween.esm.js"
|
|
}
|
|
}</script><script defer="defer" src="./bundle.669a5fff259e4110fa12.js"></script><script defer="defer" src="./bundle.26e9bcb072f8f12dccbf.js"></script></body></html> |