Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improve GLSP UI Extension mechanism for easier re-use of HTML elements
- Allow more fine-grained definition of container and parent - Allow more fine-grained - Replace hard-coded styles with 'hidden' class - Rework index file to define structure and use grid for layouting - Remove workaround for toolbar height (48px adjustment) - Ensure Quick Action UI is still rendering correctly
- Loading branch information
1 parent
4393495
commit 4af96b4
Showing
15 changed files
with
151 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import { AbstractUIExtension } from '@eclipse-glsp/client'; | ||
| import { injectable } from 'inversify'; | ||
|
|
||
| @injectable() | ||
| export abstract class IvyUIExtension extends AbstractUIExtension { | ||
| static UI_EXTENSION_CLASS = 'ui-extension'; | ||
|
|
||
| protected get diagramContainerId(): string { | ||
| return this.options.baseDiv; | ||
| } | ||
|
|
||
| protected get parentContainerSelector(): string { | ||
| return '#' + this.diagramContainerId; | ||
| } | ||
|
|
||
| protected get containerSelector(): string { | ||
| return '#' + this.id(); | ||
| } | ||
|
|
||
| protected get initialized(): boolean { | ||
| return !!this.containerElement; | ||
| } | ||
|
|
||
| protected initialize(): boolean { | ||
| if (this.initialized) { | ||
| return true; | ||
| } | ||
| try { | ||
| this.containerElement = this.getOrCreateContainer(); | ||
| this.initializeContainer(this.containerElement); | ||
| this.initializeContents(this.containerElement); | ||
| } catch (error) { | ||
| const msg = error instanceof Error ? error.message : `Could not retrieve container element for UI extension ${this.id}`; | ||
| this.logger.error(this, msg); | ||
| return false; | ||
| } | ||
| return true; | ||
| } | ||
|
|
||
| protected getOrCreateContainer(): HTMLElement { | ||
| if (this.containerElement) { | ||
| return this.containerElement; | ||
| } | ||
| const existingContainer = this.getContainer(); | ||
| if (existingContainer) { | ||
| return existingContainer; | ||
| } | ||
| const parent = this.getParentContainer(); | ||
| if (!parent || !parent.isConnected) { | ||
| throw new Error(`Could not obtain attached parent for initializing UI extension ${this.id}`); | ||
| } | ||
| const container = this.createContainer(parent); | ||
| this.insertContainerIntoParent(container, parent); | ||
| return container; | ||
| } | ||
|
|
||
| protected getContainer(): HTMLElement | null { | ||
| return document.querySelector<HTMLElement>(this.containerSelector); | ||
| } | ||
|
|
||
| protected createContainer(parent: HTMLElement): HTMLElement { | ||
| const container = document.createElement('div'); | ||
| container.id = parent.id + '_' + this.id(); | ||
| return container; | ||
| } | ||
|
|
||
| protected initializeContainer(container: HTMLElement): void { | ||
| container.classList.add(IvyUIExtension.UI_EXTENSION_CLASS, this.containerClass()); | ||
| } | ||
|
|
||
| protected getParentContainer(): HTMLElement { | ||
| return document.querySelector<HTMLElement>(this.parentContainerSelector)!; | ||
| } | ||
|
|
||
| protected insertContainerIntoParent(container: HTMLElement, parent: HTMLElement): void { | ||
| parent.insertBefore(container, parent.firstChild); | ||
| } | ||
|
|
||
| protected setContainerVisible(visible: boolean): void { | ||
| if (visible) { | ||
| this.containerElement?.classList.remove('hidden'); | ||
| } else { | ||
| this.containerElement?.classList.add('hidden'); | ||
| } | ||
| } | ||
|
|
||
| protected isContainerVisible(): boolean { | ||
| return this.containerElement && !this.containerElement.classList.contains('hidden'); | ||
| } | ||
|
|
||
| protected toggleContainerVisible(): void { | ||
| this.setContainerVisible(!this.isContainerVisible()); | ||
| } | ||
| } |
Oops, something went wrong.