From b86d96f2ed5dd4f17b047e8aba22512400484bb3 Mon Sep 17 00:00:00 2001
From: pacien
Date: Sun, 26 Apr 2020 06:02:33 +0200
Subject: viewer/LdPicture: implement mousewheel zoom
GitHub: closes #153
---
viewer/src/components/LdPicture.vue | 61 +++++++++++++++++++------------------
1 file changed, 31 insertions(+), 30 deletions(-)
(limited to 'viewer/src/components')
diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue
index 3170c81..622165d 100644
--- a/viewer/src/components/LdPicture.vue
+++ b/viewer/src/components/LdPicture.vue
@@ -19,31 +19,37 @@
<template>
<div
+ ref="containerElement"
v-dragscroll
- class="scrollbar"
- :class="{'fit-to-screen': !$uiStore.fullscreen, 'original-size': $uiStore.fullscreen}"
+ class="scrollbar ld-picture-container"
@click.capture="e => dragScrollClickFix.onClickCapture(e)"
- @click="$uiStore.toggleFullscreen()"
+ @dblclick="$uiStore.toggleFullscreen()"
+ @dragstart.prevent
@dragscrollstart="dragScrollClickFix.onDragScrollStart()"
@dragscrollend="dragScrollClickFix.onDragScrollEnd()"
>
<v-lazy-image
+ ref="imageElement"
:src="pictureSrc(picture.properties.resource)"
+ class="ld-picture-element"
:class="{'slow-loading': Boolean(slowLoadingStyle)}"
:style="slowLoadingStyle"
- @load="clearSlowLoading"
+ @load="lazyImageLoaded"
/>
<b-loading :active="loader" :is-full-page="false" class="ld-picture-loader" />
</div>
</template>
<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
+import { Component, Vue, Prop, Ref } from "vue-property-decorator";
+import LdZoom from "@/services/ldzoom";
import DragScrollClickFix from "@/services/dragscrollclickfix";
@Component
export default class LdPicture extends Vue {
@Prop({ required: true }) readonly picture!: Gallery.Picture;
+ @Ref() readonly containerElement!: HTMLDivElement;
+ @Ref() readonly imageElement!: any; // FIXME: no typedef for v-lazy-image
readonly SLOW_LOADING_TIMEOUT_MS: number = 1500;
readonly dragScrollClickFix = new DragScrollClickFix();
@@ -60,6 +66,11 @@ export default class LdPicture extends Vue {
this.clearSlowLoading();
}
+ lazyImageLoaded() {
+ this.clearSlowLoading();
+ new LdZoom(this.containerElement, this.imageElement.$el, 10, 1 / 5).install();
+ }
+
clearSlowLoading() {
if (this.timer) clearTimeout(this.timer);
this.timer = null;
@@ -85,13 +96,17 @@ export default class LdPicture extends Vue {
<style lang="scss">
@import "~@/assets/scss/theme.scss";
-.ld-picture-loader {
- position: relative;
- & .loading-background {
- background: none !important;
- }
+.ld-picture-container {
+ height: 100%;
+}
+
+.ld-picture-element {
+ max-width: unset;
+ max-height: unset;
+ cursor: grab;
}
-img.slow-loading {
+
+.slow-loading {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
@@ -99,25 +114,11 @@ img.slow-loading {
background-blend-mode: soft-light;
opacity: 1 !important;
}
-.fit-to-screen {
- display: flex;
- justify-content: space-around;
- height: 100%;
- & > img {
- object-fit: contain;
- cursor: zoom-in;
- }
-}
-.original-size {
- display: block;
- text-align: center;
- cursor: grab;
- height: 100%;
- & > img {
- max-width: unset;
- max-height: unset;
- object-fit: none;
- cursor: zoom-out;
+
+.ld-picture-loader {
+ position: relative;
+ & .loading-background {
+ background: none !important;
}
}
</style>
--
cgit v1.2.3
From b4b698ccbdec98dd902b6290f12207bf5547b140 Mon Sep 17 00:00:00 2001
From: pacien
Date: Tue, 28 Apr 2020 01:51:08 +0200
Subject: viewer/LdPicture: fix centering in loading phase
---
viewer/src/components/LdPicture.vue | 11 ++++-------
1 file changed, 4 insertions(+), 7 deletions(-)
(limited to 'viewer/src/components')
diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue
index 622165d..de46bcb 100644
--- a/viewer/src/components/LdPicture.vue
+++ b/viewer/src/components/LdPicture.vue
@@ -18,6 +18,7 @@
-->
<template>
+ <!-- FIXME: v-dragscroll interferes with pinch-to-zoom -->
<div
ref="containerElement"
v-dragscroll
@@ -34,7 +35,7 @@
class="ld-picture-element"
:class="{'slow-loading': Boolean(slowLoadingStyle)}"
:style="slowLoadingStyle"
- @load="lazyImageLoaded"
+ @load="clearSlowLoading"
/>
<b-loading :active="loader" :is-full-page="false" class="ld-picture-loader" />
</div>
@@ -49,7 +50,7 @@ import DragScrollClickFix from "@/services/dragscrollclickfix";
export default class LdPicture extends Vue {
@Prop({ required: true }) readonly picture!: Gallery.Picture;
@Ref() readonly containerElement!: HTMLDivElement;
- @Ref() readonly imageElement!: any; // FIXME: no typedef for v-lazy-image
+ @Ref() readonly imageElement!: Vue;
readonly SLOW_LOADING_TIMEOUT_MS: number = 1500;
readonly dragScrollClickFix = new DragScrollClickFix();
@@ -60,17 +61,13 @@ export default class LdPicture extends Vue {
mounted() {
this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS);
+ new LdZoom(this.containerElement, this.imageElement.$el as HTMLImageElement, this.picture.properties, 10, 1 / 5).install();
}
destroyed() {
this.clearSlowLoading();
}
- lazyImageLoaded() {
- this.clearSlowLoading();
- new LdZoom(this.containerElement, this.imageElement.$el, 10, 1 / 5).install();
- }
-
clearSlowLoading() {
if (this.timer) clearTimeout(this.timer);
this.timer = null;
--
cgit v1.2.3