gwc-card + gwc-vscrollview 에서 resizing

gwc-card 내부에 gwc-vscrollview를 배치하고 자연스러운 resizing을 위한 코드인데 추후 범용적인 개선이 필요하기에 메모를 남김.

먼저 DOM 구성을 위한 코드는 다음과 같다.

const domLayout = document.createElement("div");
domLayout.classList.add("layer-editor-attributes", "gwc-show-animation");

const htmlContent = .... ;

const html = /* html */`
  
    
      
        

          

            ${htmlContent}
          
        
      
    
  
`;

domLayout.innerHTML = html;

const domCard = domLayout.querySelector("gwc-card");

domCard.resizablePanel.resizableLeft = false;
domCard.resizablePanel.resizableRight = true;
domCard.resizablePanel.resizableTop = false;
domCard.resizablePanel.resizableBottom = true;

domCard.resizablePanel.minWidth = 200;
domCard.resizablePanel.minHeight = 68;

스타일은 다음과 같다.

.layer-editor-attributes {
    width: 0;
    height: 0;
}

.layer-editor-attributes gwc-card {
    top: 120px;
    left: 20px;
    width: 270px;
    height: 180px;
}

.layer-editor-attributes gwc-card gwc-vscrollview {
    margin: 0.3em 0;
    width: 100%;
    height: 100%;
}

.layer-editor-attributes .content {
    height: 0;
}

.layer-editor-attributes .content .vertical-linear-layout {
    gap: 0.2em;
}

.layer-editor-attributes .content > div > div > gwc-label {
    width: 7.5em;
    zoom: 0.8;
}

.layer-editor-attributes .content gwc-textinput {
    flex: 1;
    zoom: 0.8;
}

.layer-editor-attributes gwc-resizable-panel {
    height: 100%;
}

위 스타일 코드 중 15번째에서 height를 0으로 주고 있다는 것이 핵심이다. 추후 이 부분에 대해서 그 이유를 파악하고 응용쪽이 아닌 컴포넌트 쪽에 반영할 필요가 있다.