From 5cf3cfb6167cd5488ce01337f5882739db31e096 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sun, 27 Oct 2024 20:59:04 +0000 Subject: [PATCH] chore: docs --- .../custom-header/typescript/src/index.ts | 134 ++++++++++++++++++ .../dockview/locked/typescript/src/index.ts | 80 +++++++++++ .../scrollbars/typescript/src/index.ts | 108 ++++++++++++++ .../dockview/tabview/typescript/src/index.ts | 66 +++++++++ .../update-parameters/typescript/src/index.ts | 134 ++++++++++++++++++ .../update-title/typescript/src/index.ts | 88 ++++++++++++ 6 files changed, 610 insertions(+) create mode 100644 packages/docs/templates/dockview/custom-header/typescript/src/index.ts create mode 100644 packages/docs/templates/dockview/locked/typescript/src/index.ts create mode 100644 packages/docs/templates/dockview/scrollbars/typescript/src/index.ts create mode 100644 packages/docs/templates/dockview/tabview/typescript/src/index.ts create mode 100644 packages/docs/templates/dockview/update-parameters/typescript/src/index.ts create mode 100644 packages/docs/templates/dockview/update-title/typescript/src/index.ts diff --git a/packages/docs/templates/dockview/custom-header/typescript/src/index.ts b/packages/docs/templates/dockview/custom-header/typescript/src/index.ts new file mode 100644 index 000000000..7eecc568c --- /dev/null +++ b/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): 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): 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(), + }, +}); diff --git a/packages/docs/templates/dockview/locked/typescript/src/index.ts b/packages/docs/templates/dockview/locked/typescript/src/index.ts new file mode 100644 index 000000000..7050b6b89 --- /dev/null +++ b/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', +}); diff --git a/packages/docs/templates/dockview/scrollbars/typescript/src/index.ts b/packages/docs/templates/dockview/scrollbars/typescript/src/index.ts new file mode 100644 index 000000000..b0b34cb38 --- /dev/null +++ b/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' }, +}); diff --git a/packages/docs/templates/dockview/tabview/typescript/src/index.ts b/packages/docs/templates/dockview/tabview/typescript/src/index.ts new file mode 100644 index 000000000..53be1f98a --- /dev/null +++ b/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', +}); diff --git a/packages/docs/templates/dockview/update-parameters/typescript/src/index.ts b/packages/docs/templates/dockview/update-parameters/typescript/src/index.ts new file mode 100644 index 000000000..7eecc568c --- /dev/null +++ b/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): 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): 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(), + }, +}); diff --git a/packages/docs/templates/dockview/update-title/typescript/src/index.ts b/packages/docs/templates/dockview/update-title/typescript/src/index.ts new file mode 100644 index 000000000..8925fd53d --- /dev/null +++ b/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): 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 }, +});