chore: docs

packages/docs/templates/dockview/custom-header/typescript/src/index.ts

@@ -0,0 +1,134 @@
+import 'dockview-core/dist/styles/dockview.css';
+import {
+    createDockview,
+    GroupPanelPartInitParameters,
+    IContentRenderer,
+    ITabRenderer,
+    PanelUpdateEvent,
+    Parameters,
+} from 'dockview-core';
+
+class Panel implements IContentRenderer {
+    private readonly _element: HTMLElement;
+
+    private readonly e1: HTMLElement;
+    private readonly e2: HTMLElement;
+    private readonly e3: HTMLElement;
+
+    private interval: any;
+
+    get element(): HTMLElement {
+        return this._element;
+    }
+
+    constructor() {
+        this._element = document.createElement('div');
+        this._element.style.color = 'white';
+
+        this.e1 = document.createElement('div');
+        this.e2 = document.createElement('button');
+        this.e3 = document.createElement('span');
+
+        this.e2.textContent = 'Start';
+
+        this.element.append(this.e1, this.e2, this.e3);
+    }
+
+    init(parameters: GroupPanelPartInitParameters): void {
+        parameters.api.onDidTitleChange((event) => {
+            this.e1.textContent = event.title;
+        });
+
+        this.e1.textContent = parameters.api.title;
+        this.e3.textContent = `value: ${parameters.params.myValue}`;
+
+        this.e2.addEventListener('click', () => {
+            if (this.interval) {
+                clearInterval(this.interval);
+                this.interval = undefined;
+                this.e2.textContent = 'Start';
+            } else {
+                this.interval = setInterval(() => {
+                    parameters.api.updateParameters({ myValue: Date.now() });
+                }, 1000);
+                parameters.api.updateParameters({ myValue: Date.now() });
+                this.e2.textContent = 'Stop';
+            }
+        });
+    }
+
+    update(event: PanelUpdateEvent<Parameters>): void {
+        this.e3.textContent = `value: ${event.params.myValue}`;
+    }
+}
+
+class CustomTab implements ITabRenderer {
+    private readonly _element: HTMLElement;
+
+    private readonly e1: HTMLElement;
+    private readonly e2: HTMLElement;
+
+    get element(): HTMLElement {
+        return this._element;
+    }
+
+    constructor() {
+        this._element = document.createElement('div');
+        this._element.style.color = 'white';
+
+        this.e1 = document.createElement('div');
+        this.e2 = document.createElement('span');
+
+        this.element.append(this.e1, this.e2);
+    }
+
+    init(parameters: GroupPanelPartInitParameters): void {
+        parameters.api.onDidTitleChange((event) => {
+            this.e1.textContent = parameters.api.title;
+        });
+
+        this.e1.textContent = parameters.api.title;
+        this.e2.textContent = `value: ${parameters.params.myValue}`;
+    }
+
+    update(event: PanelUpdateEvent<Parameters>): void {
+        this.e2.textContent = `value: ${event.params.myValue}`;
+    }
+}
+
+const api = createDockview(document.getElementById('app'), {
+    className: 'dockview-theme-abyss',
+    createComponent: (options) => {
+        switch (options.name) {
+            case 'default':
+                return new Panel();
+        }
+    },
+    createTabComponent: (options) => {
+        switch (options.name) {
+            case 'default':
+                return new CustomTab();
+        }
+    },
+});
+
+api.addPanel({
+    id: 'panel_1',
+    component: 'default',
+    tabComponent: 'default',
+    title: 'Panel 1',
+    params: {
+        myValue: Date.now(),
+    },
+});
+
+api.addPanel({
+    id: 'panel_2',
+    component: 'default',
+    tabComponent: 'default',
+    position: { referencePanel: 'panel_1', direction: 'right' },
+    title: 'Panel 2',
+    params: {
+        myValue: Date.now(),
+    },
+});

packages/docs/templates/dockview/locked/typescript/src/index.ts

@@ -0,0 +1,80 @@
+import 'dockview-core/dist/styles/dockview.css';
+import {
+    createDockview,
+    GroupPanelPartInitParameters,
+    IContentRenderer,
+    ITabRenderer,
+    PanelUpdateEvent,
+    Parameters,
+} from 'dockview-core';
+
+class Panel implements IContentRenderer {
+    private readonly _element: HTMLElement;
+
+    private readonly e1: HTMLElement;
+
+    get element(): HTMLElement {
+        return this._element;
+    }
+
+    constructor() {
+        this._element = document.createElement('div');
+        this._element.style.color = 'white';
+
+        this.e1 = document.createElement('div');
+
+        this.element.append(this.e1);
+    }
+
+    init(parameters: GroupPanelPartInitParameters): void {
+        parameters.api.onDidTitleChange((event) => {
+            this.e1.textContent = event.title;
+        });
+
+        this.e1.textContent = parameters.api.title;
+    }
+}
+
+const api = createDockview(document.getElementById('app'), {
+    className: 'dockview-theme-abyss',
+    createComponent: (options) => {
+        switch (options.name) {
+            case 'default':
+                return new Panel();
+        }
+    },
+    locked: true,
+});
+
+api.addPanel({
+    id: 'panel_1',
+    component: 'default',
+});
+
+api.addPanel({
+    id: 'panel_2',
+    component: 'default',
+    position: {
+        direction: 'right',
+        referencePanel: 'panel_1',
+    },
+});
+
+api.addPanel({
+    id: 'panel_3',
+    component: 'default',
+    position: {
+        direction: 'below',
+        referencePanel: 'panel_1',
+    },
+});
+
+api.addPanel({
+    id: 'panel_4',
+    component: 'default',
+});
+
+api.addPanel({
+    id: 'panel_5',
+    component: 'default',
+});

packages/docs/templates/dockview/scrollbars/typescript/src/index.ts

@@ -0,0 +1,108 @@
+import 'dockview-core/dist/styles/dockview.css';
+import {
+    createDockview,
+    GroupPanelPartInitParameters,
+    IContentRenderer,
+} from 'dockview-core';
+
+const TEXT =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+
+class FixedHeightContainer implements IContentRenderer {
+    private readonly _element: HTMLElement;
+
+    get element(): HTMLElement {
+        return this._element;
+    }
+
+    constructor() {
+        this._element = document.createElement('div');
+        this._element.style.color = 'white';
+        this._element.style.height = '100%';
+        this._element.textContent = [TEXT, '\n\n'].join('').repeat(20);
+    }
+
+    init(parameters: GroupPanelPartInitParameters): void {
+        //
+    }
+}
+
+class OverflowContainer implements IContentRenderer {
+    private readonly _element: HTMLElement;
+
+    get element(): HTMLElement {
+        return this._element;
+    }
+
+    constructor() {
+        this._element = document.createElement('div');
+        this._element.style.color = 'white';
+        this._element.style.height = '200px';
+        this._element.style.overflow = 'auto';
+        this._element.textContent = [TEXT, '\n\n'].join('').repeat(20);
+    }
+
+    init(parameters: GroupPanelPartInitParameters): void {
+        //
+    }
+}
+
+class UserDefinedOverflowContainer implements IContentRenderer {
+    private readonly _element: HTMLElement;
+
+    get element(): HTMLElement {
+        return this._element;
+    }
+
+    constructor() {
+        this._element = document.createElement('div');
+        this._element.style.color = 'white';
+        this._element.style.height = '100%';
+
+        const innerEl = document.createElement('div');
+        innerEl.style.height = '100%';
+        innerEl.style.color = 'white';
+        innerEl.style.overflow = 'auto';
+
+        innerEl.textContent = [TEXT, '\n\n'].join('').repeat(20);
+        this._element.appendChild(innerEl);
+    }
+
+    init(parameters: GroupPanelPartInitParameters): void {
+        //
+    }
+}
+
+const api = createDockview(document.getElementById('app'), {
+    className: 'dockview-theme-abyss',
+    createComponent: (options) => {
+        switch (options.name) {
+            case 'fixedHeightContainer':
+                return new FixedHeightContainer();
+            case 'overflowContainer':
+                return new OverflowContainer();
+            case 'userDefinedOverflowContainer':
+                return new UserDefinedOverflowContainer();
+        }
+    },
+});
+
+api.addPanel({
+    id: 'panel_1',
+    component: 'fixedHeightContainer',
+    title: 'Panel 1',
+});
+
+api.addPanel({
+    id: 'panel_2',
+    component: 'overflowContainer',
+    title: 'Panel 2',
+    position: { direction: 'right' },
+});
+
+api.addPanel({
+    id: 'panel_3',
+    component: 'userDefinedOverflowContainer',
+    title: 'Panel 3',
+    position: { direction: 'right' },
+});

packages/docs/templates/dockview/tabview/typescript/src/index.ts

@@ -0,0 +1,66 @@
+import 'dockview-core/dist/styles/dockview.css';
+import {
+    createDockview,
+    GroupPanelPartInitParameters,
+    IContentRenderer,
+} from 'dockview-core';
+
+class Panel implements IContentRenderer {
+    private readonly _element: HTMLElement;
+
+    get element(): HTMLElement {
+        return this._element;
+    }
+
+    constructor() {
+        this._element = document.createElement('div');
+        this._element.style.color = 'white';
+    }
+
+    init(parameters: GroupPanelPartInitParameters): void {
+        this._element.textContent = 'Hello World';
+    }
+}
+
+const api = createDockview(document.getElementById('app'), {
+    className: 'dockview-theme-abyss',
+    createComponent: (options) => {
+        switch (options.name) {
+            case 'default':
+                return new Panel();
+        }
+    },
+    disableFloatingGroups: true,
+});
+
+api.onWillShowOverlay((e) => {
+    if (e.kind === 'header_space' || e.kind === 'tab') {
+        return;
+    }
+    e.preventDefault();
+});
+
+api.addPanel({
+    id: 'panel_1',
+    component: 'default',
+});
+
+api.addPanel({
+    id: 'panel_2',
+    component: 'default',
+});
+
+api.addPanel({
+    id: 'panel_3',
+    component: 'default',
+});
+
+api.addPanel({
+    id: 'panel_4',
+    component: 'default',
+});
+
+api.addPanel({
+    id: 'panel_5',
+    component: 'default',
+});

packages/docs/templates/dockview/update-parameters/typescript/src/index.ts

@@ -0,0 +1,134 @@
+import 'dockview-core/dist/styles/dockview.css';
+import {
+    createDockview,
+    GroupPanelPartInitParameters,
+    IContentRenderer,
+    ITabRenderer,
+    PanelUpdateEvent,
+    Parameters,
+} from 'dockview-core';
+
+class Panel implements IContentRenderer {
+    private readonly _element: HTMLElement;
+
+    private readonly e1: HTMLElement;
+    private readonly e2: HTMLElement;
+    private readonly e3: HTMLElement;
+
+    private interval: any;
+
+    get element(): HTMLElement {
+        return this._element;
+    }
+
+    constructor() {
+        this._element = document.createElement('div');
+        this._element.style.color = 'white';
+
+        this.e1 = document.createElement('div');
+        this.e2 = document.createElement('button');
+        this.e3 = document.createElement('span');
+
+        this.e2.textContent = 'Start';
+
+        this.element.append(this.e1, this.e2, this.e3);
+    }
+
+    init(parameters: GroupPanelPartInitParameters): void {
+        parameters.api.onDidTitleChange((event) => {
+            this.e1.textContent = event.title;
+        });
+
+        this.e1.textContent = parameters.api.title;
+        this.e3.textContent = `value: ${parameters.params.myValue}`;
+
+        this.e2.addEventListener('click', () => {
+            if (this.interval) {
+                clearInterval(this.interval);
+                this.interval = undefined;
+                this.e2.textContent = 'Start';
+            } else {
+                this.interval = setInterval(() => {
+                    parameters.api.updateParameters({ myValue: Date.now() });
+                }, 1000);
+                parameters.api.updateParameters({ myValue: Date.now() });
+                this.e2.textContent = 'Stop';
+            }
+        });
+    }
+
+    update(event: PanelUpdateEvent<Parameters>): void {
+        this.e3.textContent = `value: ${event.params.myValue}`;
+    }
+}
+
+class CustomTab implements ITabRenderer {
+    private readonly _element: HTMLElement;
+
+    private readonly e1: HTMLElement;
+    private readonly e2: HTMLElement;
+
+    get element(): HTMLElement {
+        return this._element;
+    }
+
+    constructor() {
+        this._element = document.createElement('div');
+        this._element.style.color = 'white';
+
+        this.e1 = document.createElement('div');
+        this.e2 = document.createElement('span');
+
+        this.element.append(this.e1, this.e2);
+    }
+
+    init(parameters: GroupPanelPartInitParameters): void {
+        parameters.api.onDidTitleChange((event) => {
+            this.e1.textContent = parameters.api.title;
+        });
+
+        this.e1.textContent = parameters.api.title;
+        this.e2.textContent = `value: ${parameters.params.myValue}`;
+    }
+
+    update(event: PanelUpdateEvent<Parameters>): void {
+        this.e2.textContent = `value: ${event.params.myValue}`;
+    }
+}
+
+const api = createDockview(document.getElementById('app'), {
+    className: 'dockview-theme-abyss',
+    createComponent: (options) => {
+        switch (options.name) {
+            case 'default':
+                return new Panel();
+        }
+    },
+    createTabComponent: (options) => {
+        switch (options.name) {
+            case 'default':
+                return new CustomTab();
+        }
+    },
+});
+
+api.addPanel({
+    id: 'panel_1',
+    component: 'default',
+    tabComponent: 'default',
+    title: 'Panel 1',
+    params: {
+        myValue: Date.now(),
+    },
+});
+
+api.addPanel({
+    id: 'panel_2',
+    component: 'default',
+    tabComponent: 'default',
+    position: { referencePanel: 'panel_1', direction: 'right' },
+    title: 'Panel 2',
+    params: {
+        myValue: Date.now(),
+    },
+});

packages/docs/templates/dockview/update-title/typescript/src/index.ts

@@ -0,0 +1,88 @@
+import 'dockview-core/dist/styles/dockview.css';
+import {
+    createDockview,
+    GroupPanelPartInitParameters,
+    IContentRenderer,
+    ITabRenderer,
+    PanelUpdateEvent,
+    Parameters,
+} from 'dockview-core';
+
+class Panel implements IContentRenderer {
+    private readonly _element: HTMLElement;
+
+    private readonly e1: HTMLElement;
+    private readonly e2: HTMLInputElement;
+    private readonly e3: HTMLElement;
+
+    get element(): HTMLElement {
+        return this._element;
+    }
+
+    constructor() {
+        this._element = document.createElement('div');
+        this._element.style.color = 'white';
+        this._element.style.padding = '20px';
+
+        this.e1 = document.createElement('div');
+        this.e2 = document.createElement('input');
+        this.e3 = document.createElement('button');
+        this.e3.textContent = 'Change';
+
+        this.element.append(this.e1, this.e2, this.e3);
+    }
+
+    init(parameters: GroupPanelPartInitParameters): void {
+        parameters.api.onDidTitleChange((event) => {
+            this.e1.textContent = `props.api.title=${event.title}`;
+        });
+
+        this.e1.textContent = `props.api.title=${parameters.api.title}`;
+
+        this.e3.addEventListener('click', () => {
+            parameters.api.setTitle(this.e2.value);
+        });
+    }
+
+    update(event: PanelUpdateEvent<Parameters>): void {
+        this.e3.textContent = `value: ${event.params.myValue}`;
+    }
+}
+
+const api = createDockview(document.getElementById('app'), {
+    className: 'dockview-theme-abyss',
+    createComponent: (options) => {
+        switch (options.name) {
+            case 'default':
+                return new Panel();
+        }
+    },
+});
+
+const panel = api.addPanel({
+    id: 'panel_1',
+    component: 'default',
+    title: 'Panel 1',
+});
+
+const panel2 = api.addPanel({
+    id: 'panel_2',
+    component: 'default',
+    title: 'Panel 2',
+    position: { referencePanel: panel },
+});
+
+const panel3 = api.addPanel({
+    id: 'panel_3',
+    component: 'default',
+    title: 'Panel 3',
+
+    position: { referencePanel: panel, direction: 'right' },
+});
+
+const panel4 = api.addPanel({
+    id: 'panel_4',
+    component: 'default',
+    title: 'Panel 4',
+    position: { referencePanel: panel3 },
+});