분리 가능한 사이드 패널

SpreadJS 디자이너 컴포넌트의 분리 가능한 사이드 패널은 사용자 경험과 작업 효율성을 높여줍니다. 사용자는 개인 취향이나 작업 흐름에 맞게 패널 위치를 자유롭게 조정할 수 있어 화면 공간을 최적화하면서 디자인 뷰포트를 가리지 않습니다. 또한 자주 사용하는 기능에 빠르게 접근할 수 있도록 도와줍니다.

사이드 패널 드래그 앤 드롭

• 드래그 앤 드롭 동작:

  사이드 패널만 드래그 앤 드롭 기능을 지원하며, 워크북의 왼쪽 또는 오른쪽 위치로만 이동할 수 있습니다. 위, 아래 또는 그 외 다른 위치로는 이동할 수 없습니다.

• 도킹 힌트:

  사이드 패널의 제목 표시줄을 클릭하고 누르고 있으면 도킹 힌트 버튼이 나타납니다. 패널을 도킹하려면 원하는 도킹 버튼 위에 마우스를 올려놓은 상태에서 클릭을 놓아야 합니다.

사이드 패널 탭

여러 개의 사이드 패널이 동시에 표시될 경우, 탭을 사용하여 정리할 수 있습니다.

• 기본 탭 동작

  여러 사이드 패널이 동일한 쪽에 표시되면 기본적으로 자동으로 탭 형태로 나타납니다.

• 나란히 표시 옵션

  사용자는 구성 파일 설정을 통해 패널이 탭 형태 대신 나란히 표시되도록 설정할 수 있습니다.

• ​드래그 앤 드롭을 통한 탭 그룹화

  패널을 탭으로 그룹화하려면:

  1. 한 패널을 다른 패널의 도킹 힌트 버튼 위로 드래그합니다.

  2. 대상 패널의 탭 영역이 강조 표시되면 드래그를 해제합니다.

  이렇게 하면 드래그한 패널이 대상 패널의 탭 그룹에 추가됩니다.

• 인터페이스

export interface ISidePanel {
    /* ... */
    canStack?: boolean;     // 기본 true
}

canStack이 false로 설정되면:

• 사이드 패널이 다른 패널과 나란히 배치됩니다.

• 탭 그룹화 기능이 비활성화됩니다.

• 이 설정은 이전 버전과의 호환성을 유지하기 위해 사용됩니다.

예시

const config = GC.Spread.Sheets.Designer.DefaultConfig;
config.sidePanels.forEach(panel => {
  panel.canStack = false;
});
const designer = new GC.Spread.Sheets.Designer.Designer('gc-designer-container', config);