-
Notifications
You must be signed in to change notification settings - Fork 2
/
viewport-bar.ts
104 lines (91 loc) · 3.72 KB
/
viewport-bar.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import {
Action,
EditorContextService,
GLSPActionDispatcher,
IActionHandler,
ICommand,
isViewport,
IToolManager,
SetUIExtensionVisibilityAction,
SetViewportAction,
TYPES,
SelectionService
} from '@eclipse-glsp/client';
import { inject, injectable } from 'inversify';
import { CenterButton, FitToScreenButton, OriginScreenButton, ViewportBarButton } from './button';
import { createElement, createIcon } from '../../utils/ui-utils';
import { QuickActionUI } from '../quick-action/quick-action-ui';
import { EnableViewportAction, SetViewportZoomAction } from '@axonivy/process-editor-protocol';
import { IvyUIExtension } from '../../utils/ivy-ui-extension';
@injectable()
export class ViewportBar extends IvyUIExtension implements IActionHandler {
static readonly ID = 'ivy-viewport-bar';
@inject(TYPES.IActionDispatcher) protected readonly actionDispatcher: GLSPActionDispatcher;
@inject(TYPES.IToolManager) protected readonly toolManager: IToolManager;
@inject(EditorContextService) protected readonly editorContext: EditorContextService;
@inject(SelectionService) protected selectionService: SelectionService;
protected zoomLevel = '100%';
protected zoomLevelElement?: HTMLElement;
id(): string {
return ViewportBar.ID;
}
containerClass(): string {
return ViewportBar.ID;
}
protected initializeContents(containerElement: HTMLElement): void {
this.createBar();
containerElement.onwheel = ev => (ev.ctrlKey ? ev.preventDefault() : true);
}
protected createBar(): void {
const headerCompartment = createElement('div', ['viewport-bar']);
headerCompartment.appendChild(this.createViewportTools());
this.containerElement.appendChild(headerCompartment);
}
private createViewportTools(): HTMLElement {
const viewportTools = createElement('div', ['viewport-bar-tools']);
viewportTools.appendChild(this.createViewportButton(new OriginScreenButton()));
viewportTools.appendChild(this.createViewportButton(new FitToScreenButton()));
viewportTools.appendChild(this.createViewportButton(new CenterButton(() => [...this.selectionService.getSelectedElementIDs()])));
this.zoomLevelElement = document.createElement('label');
this.zoomLevelElement.textContent = this.zoomLevel;
viewportTools.appendChild(this.zoomLevelElement);
return viewportTools;
}
protected createViewportButton(toolButton: ViewportBarButton): HTMLElement {
const button = createElement('span');
button.appendChild(createIcon(toolButton.icon));
button.id = toolButton.id;
button.title = toolButton.title;
button.onclick = () =>
this.actionDispatcher.dispatch(toolButton.action()).then(() => {
const model = this.editorContext.modelRoot;
if (isViewport(model)) {
this.actionDispatcher.dispatchAll([
SetUIExtensionVisibilityAction.create({
extensionId: QuickActionUI.ID,
visible: true,
contextElementsId: [...this.selectionService.getSelectedElementIDs()]
}),
SetViewportAction.create(model.id, model, {})
]);
}
});
return button;
}
handle(action: Action): ICommand | Action | void {
if (EnableViewportAction.is(action)) {
this.actionDispatcher.dispatch(SetUIExtensionVisibilityAction.create({ extensionId: ViewportBar.ID, visible: true }));
}
if (SetViewportAction.is(action)) {
this.updateZoomLevel(action.newViewport.zoom);
} else if (SetViewportZoomAction.is(action)) {
this.updateZoomLevel(action.zoom);
}
}
private updateZoomLevel(zoom: number): void {
this.zoomLevel = (zoom * 100).toFixed(0).toString() + '%';
if (this.zoomLevelElement) {
this.zoomLevelElement.textContent = this.zoomLevel;
}
}
}