#Grid View

<div id="grid-view" style="height: 32rem"></div>
<script type="module">
import {
GridviewPanel,
Orientation,
createGridview,
themeA3S,
} from "@a3s-lab/ui/dockview";
import "@a3s-lab/ui/dockview/css";

class Panel extends GridviewPanel {
part = {
update: parameters => {
this.element.textContent = parameters.params.title;
},
dispose() {},
};
constructor(id, component) {
super(id, component);
this.api.initialize(this);
}
getComponent() { return this.part; }
}

const root = document.querySelector("#grid-view");
const api = createGridview(root, {
className: themeA3S.className,
orientation: Orientation.VERTICAL,
createComponent: options => new Panel(options.id, options.name),
});
api.layout(root.clientWidth, root.clientHeight);

const canvas = api.addPanel({
id: "canvas",
component: "panel",
params: { title: "画布" },
});
api.addPanel({
id: "preview",
component: "panel",
params: { title: "预览" },
position: { direction: "right", referencePanel: canvas.id },
});

</script>