초기 PM 소스 전체 업로드

libs/ifcViewer/css/font.css

@@ -0,0 +1,26 @@
+/* 폰트 */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Protest+Riot&family=Gowun+Dodum&display=swap');
+
+@font-face {
+    font-family: 'S-CoreDream-3Light';
+    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
+    font-style: normal;
+}
+@font-face {
+    font-family: 'SeoulNamsanM';
+    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/SeoulNamsanM.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+/* @font-face {
+    font-family: "Nova Flat", system-ui;
+    font-weight: 400;
+    font-style: normal;
+    src:url('https://fonts.googleapis.com/css2?family=Nova+Flat&display=swap');
+} */
+
+
+
+/* 폰트적용 */
+/* * { font-family: 'Noto Sans KR', 'Protest Riot', 'Gowun Dodum', sans-serif; } */

libs/ifcViewer/css/reset.css

@@ -0,0 +1,10 @@
+/* https://velog.io/@teo/2022-CSS-Reset-%EB%8B%A4%EC%8B%9C-%EC%8D%A8%EB%B3%B4%EA%B8%B0 */
+* { margin: 0; padding: 0; font: inherit; color: inherit; }
+*, :after, :before { box-sizing: border-box; }
+:root {-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;cursor:default;line-height:1.5;overflow-wrap:break-word;word-break:break-word;tab-size:4}
+html, body { height:100%; color: #000; }
+img, picture, video, canvas, svg { display: block;max-width:100%; }
+button { background:none;border:0;cursor:pointer; }
+a { text-decoration:none }
+table { border-collapse:collapse;border-spacing:0 }
+ul, li { list-style: none; }

libs/ifcViewer/css/style.css

@@ -0,0 +1,100 @@
+@import url('./reset.css');
+@import url('./font.css');
+
+* { font-family: 'Gowun Dodum', 'Noto Sans KR', sans-serif; font-size: 14px; } 
+
+:root {--background-color: rgba(0, 0, 0, 0.3); --color1: #6944F0; --color2: #6944F0; --gray: rgba(255, 255, 255, 0.7); }
+
+html,body { position: relative; font-size: 62.5%; } 
+body { overflow: hidden; user-select: none; } 
+
+.wrap { display: flex; flex-direction: column; height: 100%; }
+
+
+/* -------------------- Main : Center -------------------- */
+.full-screen { width: 100vw; height: 100vh; position: relative; overflow: hidden; }
+
+.btnGroup { display: flex; gap: 10px; position: absolute; left: 460px; top: 20px;  }
+.btnGroup > button { width: fit-content; font-size: 12px;}
+.btnGroup > input { width: fit-content; font-size: 12px;}
+
+.left { display: flex; flex-direction: column; position: absolute; top: 14px; left: 14px; width: 420px; max-height: calc(100% - 28px); padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.5);  }
+.left .side-resize { position: absolute; top: 0; right: -6px; width: 6px; height: 100%; background: none; cursor: ew-resize; }
+.left .left-header .file-info { display: flex; align-items: center;}
+.left .left-header .file-info .schema { width: fit-content; margin-right: 6px; padding: 0 4px; border-radius: 4px; color: white; background: gray; font-size: 12px; }
+.left .left-header .file-info .file-name { flex: 1; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.left .left-header h2 { font-family: 'S-CoreDream-3Light'; font-size: 18px; font-weight: bold; }
+.left .left-conts { display: flex; flex-direction: column; position: relative; overflow: auto; scrollbar-gutter: stable; margin-right: -14px; }
+
+.tree-container { width: fit-content; min-width: -webkit-fill-available; background: var(--gray); user-select: none; font-size: 14px; }
+.tree { list-style: none; margin: 8px 14px; width: 100%;}
+.tree *:before { width: 14px; height: 14px; display: inline-block; }
+
+.tree ul { list-style: none; margin-left: 10px; padding-left: 11px; border-left: 1px dashed #999;}
+.tree ul:first-child { margin-left: 0; padding-left: 0; border-left: 0; }
+.tree li { list-style: none; width: 100%; white-space: nowrap; }
+
+.tree li > .input-caret { display: none; }
+.tree li > .label-caret { display: inline-block; width: 14px; height: 14px; margin: 0 4px; background: url('../img/arrow-plus.svg') no-repeat center center/cover; transition: all 0.2s ease; cursor: pointer; }
+.tree li > .input-caret:checked+.label-caret { background: url('../img/arrow-minus.svg') no-repeat center center/cover; transform: rotate(-360deg); }
+.tree li > div { display: inline-block; }
+.tree li > div > .ifc-type { display: inline-block; padding-left: 6px; color: gray; font-size: 14px; cursor: pointer; }
+.tree li > div > .ifc-name { display: inline-block; padding-left: 6px; font-size: 14px; }
+.tree li > div.selected { background-color: rgba(0, 123, 255, 0.2); }
+.tree li .label-caret > span { margin-left: 14px; color: #000; }
+.tree .input-caret:not(:checked)~ul { display: none; }
+
+.tree li > .input-visible { display: none; }
+.tree li > .label-visible { display: inline-block; width: 14px; height: 14px; margin-left: 4px; background: url('../img/hide.svg') no-repeat center center/cover; transition: all 0.2s ease; cursor: pointer; }
+.tree li > .input-visible:checked+.label-visible { background: url('../img/show.svg') no-repeat center center/cover; transform: rotate(-360deg); }
+
+.right { display: flex; flex-direction: column; position: absolute; top: 14px; right: -680px; width: 420px; max-height: calc(100% - 28px); padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.5); }
+.right .side-resize { position: absolute; top: 0; left: -6px; width: 6px; height: 100%; background: none; cursor: ew-resize; }
+
+.show-right { right: 14px !important; }
+
+.right .right-header h2 { font-family: 'S-CoreDream-3Light'; font-size: 18px; font-weight: bold; }
+.right .right-conts { display: flex; flex-direction: column; position: relative; overflow-y: auto; scrollbar-gutter: stable; margin-right: -14px; }
+
+.accordion { margin-top: 8px;}
+.accordion .accordion-header { display: flex; height: 32px; border-left: 2px solid var(--color2); border-bottom: 1px solid rgba(0, 0, 0, 0.1);  background:var(--gray); }
+.accordion .accordion-header .btn-accordion { display: flex; align-items: center; position: relative; width: 100%; padding-left: 14px; font-size: 16px; font-weight: bold; text-align: left; }
+.accordion .accordion-header .btn-accordion img { width: 16px;  height: 16px; margin-right: 7px; }
+.accordion .accordion-header .btn-accordion::after { content: ""; display: inline-block; position: absolute; right: 4px; width: 16px; height: 16px; background: url('../img/caret.svg') no-repeat center center/cover; transition: all 0.2s; }
+.accordion .accordion-header .btn-accordion.collapse::after { transform: rotate(-180deg); }
+.accordion .accordion-collapse { max-height: 0; overflow: hidden; transition: all 0.2s; background:var(--gray);  }
+.accordion .accordion-collapse[aria-hidden="false"] { max-height: 5000px; /* A large enough value to accommodate content */ }
+.accordion .accordion-collapse .accordion-body { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-left: 2px solid var(--color2); }
+.accordion .accordion-collapse .accordion-body .sub-title { margin-top: 7px; }
+.accordion .accordion-collapse .accordion-body .sub-title:first-child { margin-top: 0; }
+.accordion .accordion-collapse .accordion-body dl { display: flex; }
+.accordion .accordion-collapse .accordion-body dl dt { width: 40%; padding-left: 8px; color: gray; word-break: break-all; }
+.accordion .accordion-collapse .accordion-body dl dd { flex:1; padding-left: 8px; word-break: break-all; }
+
+
+
+/* -------------------- Scrollbar -------------------- */
+.scrollbar::-webkit-scrollbar { width: 16px; }
+.scrollbar::-webkit-scrollbar-track { background-color: transparent; }
+.scrollbar::-webkit-scrollbar-thumb { background-color: gray; border-radius: 20px; border: 6px solid transparent; background-clip: content-box; min-height: 50px; }
+.scrollbar::-webkit-scrollbar-thumb:hover { background-color: var(--color1); }
+.scrollbar::-webkit-scrollbar-corner { background: transparent; }
+
+
+
+/* -------------------- Progress -------------------- */
+.progress-wrap { display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
+.progress-wrap .progress-content { display: flex; flex-direction: column; align-items: center; font-family: 'Protest Riot'; font-size: 30px; }
+
+.loader { display: inline-block; position: relative; width: 48px; height: 48px; }
+.loader::after, .loader::before { content: ''; position: absolute; left: 0; top: 0; width: 48px; height: 48px; border: 4px solid #FFF; box-sizing: border-box; animation: rotation 2s ease-in-out infinite; }
+.loader::after { border-color: var(--color1); animation-delay: 1s; }
+@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 
+
+
+
+/* -------------------- Media query -------------------- */
+@media (max-width: 768px) {
+    .left { display: none }
+    .right { display: none }
+}

libs/ifcViewer/img/arrow-minus.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="20" height="20" rx="4" fill="#D9D9D9"/>
+<path d="M15.1429 11H4.85714C4.62981 11 4.4118 10.8946 4.25105 10.7071C4.09031 10.5196 4 10.2652 4 10C4 9.73478 4.09031 9.48043 4.25105 9.29289C4.4118 9.10536 4.62981 9 4.85714 9H15.1429C15.3702 9 15.5882 9.10536 15.7489 9.29289C15.9097 9.48043 16 9.73478 16 10C16 10.2652 15.9097 10.5196 15.7489 10.7071C15.5882 10.8946 15.3702 11 15.1429 11Z" fill="black"/>
+</svg>

libs/ifcViewer/img/arrow-plus.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="20" height="20" rx="4" fill="#D9D9D9"/>
+<path d="M10 5V15M15 10H5" stroke="#292828" stroke-width="1.66667" stroke-linecap="round"/>
+</svg>

libs/ifcViewer/img/caret.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5276 15.6023C19.1951 15.8933 18.6897 15.8596 18.3987 15.5271L12.0008 8.2152L5.6028 15.5271C5.3119 15.8596 4.8065 15.8933 4.474 15.6023C4.1415 15.3114 4.1078 14.806 4.3987 14.4735L12.0008 5.7854L19.6028 14.4735C19.8938 14.806 19.8601 15.3114 19.5276 15.6023Z" fill="#000" fill-opacity="1.0"/>
+</svg>

libs/ifcViewer/img/hide.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.66683 4.39134L2.7335 3.33301L16.6668 17.2663L15.6085 18.333L13.0418 15.7663C12.0835 16.083 11.0668 16.2497 10.0002 16.2497C5.8335 16.2497 2.27516 13.658 0.833496 9.99967C1.4085 8.53301 2.32516 7.24134 3.49183 6.21634L1.66683 4.39134ZM10.0002 7.49967C10.6632 7.49967 11.2991 7.76307 11.7679 8.23191C12.2368 8.70075 12.5002 9.33663 12.5002 9.99967C12.5006 10.2835 12.4527 10.5653 12.3585 10.833L9.16683 7.64134C9.43455 7.54716 9.71636 7.49925 10.0002 7.49967ZM10.0002 3.74967C14.1668 3.74967 17.7252 6.34134 19.1668 9.99967C18.4863 11.7271 17.3306 13.2266 15.8335 14.3247L14.6502 13.133C15.8026 12.3359 16.7321 11.2573 17.3502 9.99967C16.6765 8.62456 15.6306 7.46603 14.3313 6.6558C13.032 5.84557 11.5314 5.41614 10.0002 5.41634C9.09183 5.41634 8.20016 5.56634 7.36683 5.83301L6.0835 4.55801C7.2835 4.04134 8.6085 3.74967 10.0002 3.74967ZM2.65016 9.99967C3.32378 11.3748 4.36971 12.5333 5.66903 13.3435C6.96834 14.1538 8.46892 14.5832 10.0002 14.583C10.5752 14.583 11.1418 14.5247 11.6668 14.408L9.76683 12.4997C9.18697 12.4375 8.64585 12.1787 8.23348 11.7664C7.8211 11.354 7.56232 10.8129 7.50016 10.233L4.66683 7.39134C3.84183 8.09967 3.15016 8.98301 2.65016 9.99967Z" fill="black"/>
+</svg>

libs/ifcViewer/img/show.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0002 7.5C9.33712 7.5 8.70124 7.76339 8.2324 8.23223C7.76355 8.70107 7.50016 9.33696 7.50016 10C7.50016 10.663 7.76355 11.2989 8.2324 11.7678C8.70124 12.2366 9.33712 12.5 10.0002 12.5C10.6632 12.5 11.2991 12.2366 11.7679 11.7678C12.2368 11.2989 12.5002 10.663 12.5002 10C12.5002 9.33696 12.2368 8.70107 11.7679 8.23223C11.2991 7.76339 10.6632 7.5 10.0002 7.5ZM10.0002 14.1667C8.89509 14.1667 7.83529 13.7277 7.05388 12.9463C6.27248 12.1649 5.8335 11.1051 5.8335 10C5.8335 8.89493 6.27248 7.83512 7.05388 7.05372C7.83529 6.27232 8.89509 5.83333 10.0002 5.83333C11.1052 5.83333 12.165 6.27232 12.9464 7.05372C13.7278 7.83512 14.1668 8.89493 14.1668 10C14.1668 11.1051 13.7278 12.1649 12.9464 12.9463C12.165 13.7277 11.1052 14.1667 10.0002 14.1667ZM10.0002 3.75C5.8335 3.75 2.27516 6.34167 0.833496 10C2.27516 13.6583 5.8335 16.25 10.0002 16.25C14.1668 16.25 17.7252 13.6583 19.1668 10C17.7252 6.34167 14.1668 3.75 10.0002 3.75Z" fill="black"/>
+</svg>

libs/ifcViewer/index.html

@@ -0,0 +1,66 @@
+<!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>