Add

적용 버전: VIZWide3D 3.0

Dock 패널 추가

Parameters

Name	Type	Description
id	String	- 패널 id (등록 후 Show/Hide/리본 panelToggle 에서 사용)
opts	Object	- 패널 옵션
[opts.icon='article']	String	- 탭 아이콘(Material Symbols 이름)
[opts.label=id]	String	- 패널 라벨(탭 툴팁/패널 목록에 표시)
[opts.content]	Function	- 콘텐츠 생성 콜백 — 패널에 들어갈 element 를 인자(el)에 추가
[opts.dock]	String	- 기본 dock 위치('left'/'right'/'bottom') — Show(id, true) 시 사용
[opts.floating]	Boolean	- true 면 Show() 시 dock 대신 플로팅으로 열기

Returns

Type	Description
UIDockPanel	메서드 체이닝용 this

Example

import VIZCore3DModule from "./VIZCore3D/VIZCore3D.js";

let main = document.createElement('div');
main.className = "VIZWeb_Main";

let view = document.createElement('div');
view.id = "view";
view.className = "VIZCore3D";
main.appendChild(view);

document.body.appendChild(main);
const vizcore = new VIZCore3DModule(view);

let onInitialize = function () {
    const fileKey = "example";
    const url = "./model/toycar/vizw/toycar_wh.vizw";

    let onload = (e) => {
        //해당파일 다운로드 성공
        console.log("onload::", e);
    };

    let onerror = function () {
        //해당파일 다운로드 실패
        console.log("onerror");
    };

    //모델 열기
    vizcore.Model.OpenFile(fileKey, url, onload, onerror);

    let ui = vizcore.UIElement;
    let dockPanel = ui.DockPanel;
    let ribbonbar = ui.GetRibbonbar();

    // 1) 패널 등록 — content 는 패널 안에 들어갈 element 를 el 에 채워 넣는 콜백.
    //    (vizcore.Tree 같은 기존 컴포넌트를 재사용해도 되고, 아래처럼 순수 DOM element 를
    //    직접 만들어 넣어도 된다 — 가장 간단한 형태.)
    dockPanel.Add('MyPanel', {
        icon: 'account_tree',
        label: 'My Panel',
        content: function (el) {
            let myElement = document.createElement('div');
            myElement.textContent = 'Hello, MyPanel!';
            el.appendChild(myElement);
        }
    });

    // 2) 리본 버튼에 연결 — 버튼 클릭 시 자동으로 열기/닫기 토글(document 레벨 핸들러가 처리)
    ribbonbar.AddButton('Home', 'Home_Panel', {
        id: 'MyPanelButton', text: 'My Panel',
        icon: { normal: 'account_tree' },
        style: { type: 1 }, // CHECK — 열림 상태를 버튼 체크로 표시
        status: { visible: true, enable: true, check: false },
        panelToggle: 'MyPanel', panelDock: 'left', // 'left' | 'right'
    });

    // 3) 코드로 직접 열기/닫기(panelToggle 을 지원하지 않는 툴바 버튼 등에서 수동으로 쓸 때)
    // let DOCK_POS = ui.Layout.Enum.DOCK_POS;
    // dockPanel.Show('MyPanel', DOCK_POS.LEFT); // DOCK_POS.LEFT/RIGHT/BOTTOM
    // dockPanel.Hide('MyPanel');
};

let vizcoreParam = {
    event: {
        onInit: onInitialize,
    }
};

vizcore.Init(vizcoreParam);