116 lines
2.3 KiB
HTML
116 lines
2.3 KiB
HTML
<div class="pinch-zoom {disabled ? 'pinch-zoom-disabled' : ''} {className ? className : ''}" >
|
|
<pinch-zoom class="pinch-zoom-inner" ref:node>
|
|
<slot></slot>
|
|
</pinch-zoom>
|
|
<IconButton
|
|
className="pinch-zoom-button pinch-zoom-button-zoom-out"
|
|
muted={true}
|
|
label="Zoom out"
|
|
href="#fa-search-minus"
|
|
on:click="zoomOut()"
|
|
/>
|
|
<IconButton
|
|
className="pinch-zoom-button pinch-zoom-button-zoom-in"
|
|
muted={true}
|
|
label="Zoom in"
|
|
href="#fa-search-plus"
|
|
on:click="zoomIn()"
|
|
/>
|
|
</div>
|
|
<style>
|
|
.pinch-zoom {
|
|
position: relative;
|
|
}
|
|
.pinch-zoom-disabled {
|
|
pointer-events: none;
|
|
}
|
|
.pinch-zoom-inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
:global(.icon-button.pinch-zoom-button) {
|
|
position: absolute;
|
|
z-index: 110;
|
|
bottom: 10px;
|
|
background: var(--mask-opaque-bg);
|
|
}
|
|
|
|
:global(.pinch-zoom-button-zoom-in) {
|
|
right: 10px;
|
|
}
|
|
|
|
:global(.pinch-zoom-button-zoom-out) {
|
|
left: 10px;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
:global(.pinch-zoom-button-zoom-in) {
|
|
right: 5px;
|
|
}
|
|
|
|
:global(.pinch-zoom-button-zoom-out) {
|
|
left: 5px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 320px) {
|
|
:global(.icon-button.pinch-zoom-button) {
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
}
|
|
|
|
:global(.pinch-zoom-disabled .pinch-zoom-button) {
|
|
visibility: hidden;
|
|
}
|
|
</style>
|
|
<script>
|
|
import IconButton from '../../IconButton.html'
|
|
import 'pinch-zoom-element/dist/pinch-zoom.js'
|
|
import { observe } from 'svelte-extras'
|
|
|
|
const ZOOM_INCREMENT = 0.1
|
|
|
|
export default {
|
|
oncreate () {
|
|
this.observe('disabled', disabled => {
|
|
if (disabled) {
|
|
this.resetZoom()
|
|
}
|
|
}, { init: false })
|
|
},
|
|
data: () => ({
|
|
disabled: false
|
|
}),
|
|
components: {
|
|
IconButton
|
|
},
|
|
methods: {
|
|
observe,
|
|
zoomIn () {
|
|
this.zoomBy(ZOOM_INCREMENT)
|
|
},
|
|
zoomOut () {
|
|
this.zoomBy(-ZOOM_INCREMENT)
|
|
},
|
|
zoomBy (increment) {
|
|
let { node } = this.refs
|
|
let scale = node.scale || 1
|
|
node.scaleTo(scale + increment, {
|
|
originX: '50%',
|
|
originY: '50%'
|
|
})
|
|
},
|
|
resetZoom () {
|
|
let { node } = this.refs
|
|
node.setTransform({
|
|
scale: 1,
|
|
x: 0,
|
|
y: 0
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|