[카테고리:] 미분류

웹 UI 라이브러리인 GWC에서 제공하는 Select 컴포넌트의 선택 항목을 사용자 정의 그리기로 정의하기 위한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.panel {
    display: flex;
    gap: 2em;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#select {
    width: 200px;
}

js 코드는 다음과 같습니다.

window.onload = () => {
    select.setCustomDrawingMethod([
        {v: "4 4"}, // 사용자 정의 아이템을 시각화하기 위한 임의의 데이터
        {v: "8 4"},
        {v: "8 8"},
        {v: "16 8"},
        {v: "16 4"}
    ], (item) => {
        const domSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        domSVG.setAttribute("width", "100px");
        domSVG.setAttribute("height", "20px");

        const svgLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
        svgLine.setAttribute("x1", 4);
        svgLine.setAttribute("y1", 10);
        svgLine.setAttribute("x2", 96);
        svgLine.setAttribute("y2", 10);
        svgLine.style = `stroke:white;stroke-width:4;stroke-dasharray:${item.v}`;

        domSVG.appendChild(svgLine);

        return domSVG;
    });

    select.selectedIndex = 1;

    select.addEventListener("change",  (event) => {
        const select = event.target;
        label.content = `"${select.value.v}"(으)로 변경되었습니다.`;
    });

    button.addEventListener("click", () => {
        gwcMessage(`select의 값: ${select.value.v}`);
    });

    GeoServiceWebComponentManager.instance.update();
};

실행 결과는 다음과 같습니다.

하나의 모달 대화상자를 gwcCreateModalDialog 함수를 이용해 만들때 class 단위로 만들면 전체적인 시스템의 UI 기능이 효과적으로 분리됩니다. 먼저 모달 대화상자에 대한 코드를 class로 만듭니다.

class ArchiveManagerDialog {
    constructor() {
        const dlg = gwcCreateModalDialog("아카이브 관리자");
        dlg.content = `
            

                

                    

                        
                        
                        
                        

                            
                            
                            
                        
                    
                    
                        
                            
                        
                    
                
            
        `;
       
        dlg.width = "50em";

        dlg.resizablePanel.resizableLeft = true;
        dlg.resizablePanel.resizableRight = true;
        dlg.resizablePanel.resizableTop = true;
        dlg.resizablePanel.resizableBottom = true;

        dlg.resizablePanel.minWidth = 450;
        dlg.resizablePanel.minHeight = 300;
        dlg.resizablePanel.addEventListener("change", (event) => {
            if(event.target === dlg.resizablePanel) {
                const { mode, oldHeight, newHeight } = event.detail;
                if(mode === "BOTTOM" || mode == "TOP") {
                    const domScrollView = dlg.content.querySelector("gwc-vscrollview");
                    const height = parseFloat(window.getComputedStyle(domScrollView).getPropertyValue("height"));
                    domScrollView.style.height = `${height - (oldHeight - newHeight)}px`;
                    domScrollView.refresh();
                }
            }
        });

        dlg.show();
        GeoServiceWebComponentManager.instance.update();
    }
}

CSS에 대한 코드는 다음과 같습니다.

.vertical-linear-layout {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.horizontal-linear-layout {
    display: flex;
    gap: 0.3em;
    flex-direction: row;
    _padding: 0 1em;
}

.v-center {
    align-items: center;
}

.h-center {
    justify-content: center;
}

.v-space {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.archive-manager-dialog {
    padding: 0.5em 0.5em 0.5em 0.5em;
}

.archive-manager-dialog gwc-textinput {
    width: 10em;
}

.archive-manager-dialog .search-part {
    margin-left: auto;
}

.archive-manager-dialog gwc-vscrollview {
    height: 30em; /* js 코드로 크기를 조정해야 함 */
    margin: 0 0.2em;
    background: rgba(0,0,0,0.3);
    box-shadow: inset -0.6px -0.6px 0.6px rgba(255,255,255,0.4), 
        inset 0.6px 0.6px 0.6px rgba(0,0,0,0.5);
    border-radius: 0.5em;    
}

.archive-manager-dialog gwc-tree {
    width: 100%;
    padding: 0.5em 0.5em 0.5em 0.5em;
    _border: 1px solid red;    
}

실행 결과는 다음과 같습니다.