diff --git a/packages/demo/pages/overlays.html b/packages/demo/pages/overlays.html index 89c14c6e..a0e67c24 100644 --- a/packages/demo/pages/overlays.html +++ b/packages/demo/pages/overlays.html @@ -24,22 +24,5 @@

OverlaysPlugin demo

-
- - - -
diff --git a/packages/demo/src/assets/overlays.css b/packages/demo/src/assets/overlays.css index d3be5fc9..1e0d973d 100644 --- a/packages/demo/src/assets/overlays.css +++ b/packages/demo/src/assets/overlays.css @@ -39,71 +39,3 @@ limitations under the License. position: absolute; inset: 0; } - -/* The "Zoom Box" style is taken and adapted from https://github.com/process-analytics/bpmn-visualization-examples/blob/v0.41.0/projects/typescript-vue/src/style.css */ -.zoomBox { - position: absolute; - right: 1.75rem; - bottom: 2rem; - - border-radius: 20px; - box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.15), 0 2px 2px 0 rgba(0, 0, 0, 0.2); - display: inline-block; - vertical-align: middle; - border: 0; -} - -.zoomBox .sideButton { - position: relative; - background-color: #fff; - color: #333; - line-height: inherit; - text-align: center; - padding: 4px 6px; - font-size: 12px; - height: 25px; - border: 0; - cursor: pointer; - display: flex; - align-items: center; -} -.sideButton.float-left { - float: left; - border-radius: 20px 0 0 20px; -} -.sideButton.float-right { - float: right; - border-radius: 0 20px 20px 0; -} - -.zoomBox .sideButton svg { - height: 80%; -} - -.zoomBox .sideButton:hover { - color: #14a9d5; - box-shadow: 0 0 3px #14a9d5; - z-index: 2; -} - -.zoomBox .mainButton { - overflow: visible; - vertical-align: middle; - padding: 4px 6px; - font-size: 12px; - height: 25px; - background-color: #fff; - color: #333; - line-height: inherit; - position: relative; - float: left; - border: 0; - width: 30px; - cursor: pointer; -} - -.zoomBox .mainButton:hover { - color: #333; - box-shadow: 0 0 3px #14a9d5; - z-index: 2; -} diff --git a/packages/demo/src/assets/zoom-box.css b/packages/demo/src/assets/zoom-box.css new file mode 100644 index 00000000..7d1783ed --- /dev/null +++ b/packages/demo/src/assets/zoom-box.css @@ -0,0 +1,67 @@ +/* The "Zoom Box" style is taken and adapted from https://github.com/process-analytics/bpmn-visualization-examples/blob/v0.41.0/projects/typescript-vue/src/style.css */ +.zoomBox { + position: absolute; + right: 1.75rem; + bottom: 2rem; + + border-radius: 20px; + box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.15), 0 2px 2px 0 rgba(0, 0, 0, 0.2); + display: inline-block; + vertical-align: middle; + border: 0; +} + +.zoomBox .sideButton { + position: relative; + background-color: #fff; + color: #333; + line-height: inherit; + text-align: center; + padding: 4px 6px; + font-size: 12px; + height: 25px; + border: 0; + cursor: pointer; + display: flex; + align-items: center; +} +.zoomBox .sideButton.float-left { + float: left; + border-radius: 20px 0 0 20px; +} +.zoomBox .sideButton.float-right { + float: right; + border-radius: 0 20px 20px 0; +} + +.zoomBox .sideButton svg { + height: 80%; +} + +.zoomBox .sideButton:hover { + color: #14a9d5; + box-shadow: 0 0 3px #14a9d5; + z-index: 2; +} + +.zoomBox .mainButton { + overflow: visible; + vertical-align: middle; + padding: 4px 6px; + font-size: 12px; + height: 25px; + background-color: #fff; + color: #333; + line-height: inherit; + position: relative; + float: left; + border: 0; + width: 30px; + cursor: pointer; +} + +.zoomBox .mainButton:hover { + color: #333; + box-shadow: 0 0 3px #14a9d5; + z-index: 2; +} diff --git a/packages/demo/src/overlays.ts b/packages/demo/src/overlays.ts index 1ff3e2c2..b98c898e 100644 --- a/packages/demo/src/overlays.ts +++ b/packages/demo/src/overlays.ts @@ -19,11 +19,12 @@ import './assets/overlays.css'; import type { FitOptions } from 'bpmn-visualization'; import { BpmnVisualization, OverlaysPlugin } from '@process-analytics/bv-experimental-add-ons'; -import { FitType, ZoomType } from 'bpmn-visualization'; +import { FitType } from 'bpmn-visualization'; // This is simple example of the BPMN diagram, loaded as string. The '?.raw' extension support is provided by Vite. // For other load methods, see https://github.com/process-analytics/bpmn-visualization-examples import diagram from './assets/diagram.bpmn?raw'; +import { ZoomComponent } from './shared/zoom-component'; // Instantiate BpmnVisualization, and pass the OverlaysPlugin const bpmnVisualization = new BpmnVisualization({ @@ -61,12 +62,4 @@ overlaysVisibilityButton.addEventListener('click', () => { }); // Zoom box -(document.querySelector('.zoomBox .sideButton.float-left') as HTMLButtonElement).addEventListener('click', () => { - bpmnVisualization.navigation.zoom(ZoomType.Out); -}); -(document.querySelector('.zoomBox .sideButton.float-right') as HTMLButtonElement).addEventListener('click', () => { - bpmnVisualization.navigation.zoom(ZoomType.In); -}); -(document.querySelector('.zoomBox .mainButton') as HTMLButtonElement).addEventListener('click', () => { - bpmnVisualization.navigation.fit(fitOptions); -}); +new ZoomComponent(bpmnVisualization, fitOptions).render(); diff --git a/packages/demo/src/shared/zoom-component.ts b/packages/demo/src/shared/zoom-component.ts new file mode 100644 index 00000000..0bce1bbe --- /dev/null +++ b/packages/demo/src/shared/zoom-component.ts @@ -0,0 +1,71 @@ +/* +Copyright 2023 Bonitasoft S.A. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import '../assets/zoom-box.css'; +import type { BpmnVisualization, FitOptions } from 'bpmn-visualization'; + +import { ZoomType } from 'bpmn-visualization'; + +const getButtonByQuerySelector = (container: HTMLDivElement, selectors: string): HTMLButtonElement => container.querySelector(selectors) as HTMLButtonElement; + +const addDomElement = (): HTMLDivElement => { + const div = document.createElement('div'); + div.classList.add('zoomBox'); + div.innerHTML = ` + + `; + document.body.append(div); + return div; +}; + +export class ZoomComponent { + private isRendered = false; + constructor( + private bpmnVisualization: BpmnVisualization, + private fitOptions: FitOptions, + ) {} + + render(): void { + if (this.isRendered) { + return; + } + const divElement = addDomElement(); + this.isRendered = true; + getButtonByQuerySelector(divElement, '.sideButton.float-left').addEventListener('click', () => { + this.bpmnVisualization.navigation.zoom(ZoomType.Out); + }); + getButtonByQuerySelector(divElement, '.sideButton.float-right').addEventListener('click', () => { + this.bpmnVisualization.navigation.zoom(ZoomType.In); + }); + getButtonByQuerySelector(divElement, '.mainButton').addEventListener('click', () => { + this.bpmnVisualization.navigation.fit(this.fitOptions); + }); + } +}