[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

분리 가능한 사이드 패널

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

사이드 패널 드래그 앤 드롭

사이드 패널의 제목 표시줄을 클릭하고 드래그하면 패널이 드래그 모드로 전환됩니다. 패널 중앙에는 위치 표시기가 나타나며, 미리보기 오버레이는 도킹 가능한 위치를 보여줍니다.

demo_EN_new.9422f8.gif

패널 배치 방법

  • 위치 표시기 사용: 패널을 위치 표시기 위로 드래그한 뒤 지정된 위치에 도킹합니다.

    2.f29aaa.gif

  • 오버레이 사용: 패널을 원하는 위치 근처로 드래그하면, 미리보기 오버레이가 목표 위치를 보여줍니다. 이때 놓으면 해당 위치에 도킹됩니다.

    quick.68248c.gif

참고:

사이드 패널만 드래그 앤 드롭 기능을 지원하며, 왼쪽/오른쪽으로만 이동할 수 있고 상단/하단으로는 이동 불가합니다.

사이드 패널 탭

여러 개의 사이드 패널이 동시에 표시되면 탭으로 정리할 수 있습니다.

2.d5c62a.png

  • 기본 탭 동작:

    같은 측면에 여러 패널이 표시되면 기본적으로 자동으로 탭으로 나타납니다.

  • 병렬 표시 옵션:

    설정 파일을 통해 패널을 탭 대신 나란히(side-by-side) 표시하도록 구성할 수 있습니다.

  • 드래그 앤 드롭으로 탭 그룹화:

    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);

사용자 정의 사이드 패널 도킹 지원

사용자 정의 패널에서도 드래그 앤 드롭 기능을 사용하려면, 패널 템플릿에 PanelTitle 컴포넌트를 포함해야 합니다.

PanelTitle은 드래그 핸들 역할을 하여 제목 영역을 드래그할 수 있게 합니다.

interface IPanelTitleOption extends GC.Spread.Sheets.Designer.ITextBlockOption {
  type: "PanelTitle"
}

참고: 드래그 가능 동작은 패널 위치가 left 또는 right일 때만 적용됩니다.

예시:

const config = GC.Spread.Sheets.Designer.DefaultConfig;
const customPanel = {
  command: "customPanel",
  position: "right",
  uiTemplate: "customPanelTemplate",
  width: "300px"
};

const customPanelCommand = {
  commandName: "customPanel",
  execute: () => {},
  getState: () => {}
};

const customPanelTemplate = {
  templateName: "customPanelTemplate",
  content: [
    {
      type: "Column",
      children: [
        {
          type: "PanelTitle",                 // 드래그 핸들
          text: "Custom Panel",
          margin: "10px"
        },
        {
          type: "TextBlock",
          text: "This is a custom side panel.",
          margin: "10px"
        }
      ]
    }
  ]
}

GC.Spread.Sheets.Designer.registerTemplate("customPanelTemplate", customPanelTemplate);
config.sidePanels.push(customPanel);
config.commandMap = {
  customPanel: customPanelCommand
};

designer.setConfig(config);

custom.054574.gif

사용자 정의 명령 로직을 정의하면, 사이드 패널이 사용자 행동이나 비즈니스 시나리오에 맞춰 동적으로 반응하도록 커스터마이징할 수 있습니다.