Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(demo): improve zoom control buttons #186

Merged
merged 2 commits into from
Dec 12, 2023
Merged

feat(demo): improve zoom control buttons #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cbb4f64
feat(demo): improve zoom control buttons
tbouffard Dec 6, 2023
0677277
CSS: more precise selector to avoid side effects
tbouffard Dec 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 0 additions & 17 deletions packages/demo/pages/overlays.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,22 +24,5 @@ <h1>OverlaysPlugin demo</h1>
</div>
</div>
</div>
<div class="zoomBox">
<button class="sideButton float-left">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path
d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z" />
</svg>
</button>
<button class="mainButton">
<span class="fit">Fit</span>
</button>
<button class="sideButton float-right">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path
d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z" />
</svg>
</button>
</div>
</body>
</html>
68 changes: 0 additions & 68 deletions packages/demo/src/assets/overlays.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
67 changes: 67 additions & 0 deletions packages/demo/src/assets/zoom-box.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
13 changes: 3 additions & 10 deletions packages/demo/src/overlays.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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();
71 changes: 71 additions & 0 deletions packages/demo/src/shared/zoom-component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = `<button class="sideButton float-left" title="Zoom out">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path
d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z" />
</svg>
</button>
<button class="mainButton" title="Reset zoom">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
<path d="M6 1a1 1 0 0 1-1 1H3a1 1 0 0 0-1 1v2a1 1 0 1 1-2 0V3c0-1.654 1.346-3 3-3h2a1 1 0 0 1 1 1zm9-1h-2a1 1 0 1 0 0 2h2a1 1 0 0 1 1 1v2a1 1 0 1 0 2 0V3c0-1.654-1.346-3-3-3ZM5 16H3a1 1 0 0 1-1-1v-2a1 1 0 1 0-2 0v2c0 1.654 1.346 3 3 3h2a1 1 0 1 0 0-2Zm12-4a1 1 0 0 0-1 1v2a1 1 0 0 1-1 1h-2a1 1 0 1 0 0 2h2c1.654 0 3-1.346 3-3v-2a1 1 0 0 0-1-1z"/>
</svg>
</button>
<button class="sideButton float-right" title="Zoom in">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path
d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z" />
</svg>
</button>`;
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);
});
}
}