add prop types, fix warnings

This commit is contained in:
Tomáš Mládek 2021-01-12 18:05:28 +01:00
parent 4c42baf268
commit 8bbcd96050
3 changed files with 12 additions and 11 deletions

View file

@ -5,17 +5,17 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import {defineComponent, ref, watch} from "vue"; import {defineComponent, PropType, ref, watch} from "vue";
export default defineComponent({ export default defineComponent({
name: "AudioArea", name: "AudioArea",
props: { props: {
definition: { definition: {
type: Object, type: Object as PropType<AudioAreaDef>,
required: true required: true
}, },
bbox: { bbox: {
type: Object, type: Object as PropType<BoundingBox>,
required: true required: true
}, },
}, },
@ -68,7 +68,8 @@ export interface BoundingBox {
x: number, x: number,
y: number, y: number,
w: number, w: number,
h: number h: number,
z: number
} }
</script> </script>

View file

@ -30,7 +30,7 @@
import {defineComponent, onMounted, reactive, ref} from "vue"; import {defineComponent, onMounted, reactive, ref} from "vue";
import createPanZoom, {PanZoom} from "panzoom"; import createPanZoom, {PanZoom} from "panzoom";
import VideoScroll, {VideoScrollDef, VideoScrollDirection} from "@/components/VideoScroll.vue"; import VideoScroll, {VideoScrollDef, VideoScrollDirection} from "@/components/VideoScroll.vue";
import AudioArea, {AudioAreaDef} from "@/components/AudioArea.vue"; import AudioArea, {AudioAreaDef, BoundingBox} from "@/components/AudioArea.vue";
import Stats from "stats.js"; import Stats from "stats.js";
import {rotate} from "@/utils"; import {rotate} from "@/utils";
@ -62,7 +62,7 @@ export default defineComponent({
const scrolls = ref<VideoScrollDef[]>([]); const scrolls = ref<VideoScrollDef[]>([]);
const panToAnchor = ref(); const panToAnchor = ref();
const audioAreas = ref<AudioAreaDef[]>([]); const audioAreas = ref<AudioAreaDef[]>([]);
const bbox = reactive({ const bbox: BoundingBox = reactive({
x: ref(0), x: ref(0),
y: ref(0), y: ref(0),
w: ref(0), w: ref(0),
@ -100,7 +100,7 @@ export default defineComponent({
maxZoom: 3637937, maxZoom: 3637937,
zoomSpeed: 0.05, zoomSpeed: 0.05,
zoomDoubleClickSpeed: 1, zoomDoubleClickSpeed: 1,
onDoubleClick: function (e) { onDoubleClick: function () {
if (!document.fullscreenElement) { if (!document.fullscreenElement) {
console.debug("[SVG] Fullscreen requested."); console.debug("[SVG] Fullscreen requested.");
document.body.requestFullscreen(); document.body.requestFullscreen();

View file

@ -26,19 +26,19 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import {defineComponent} from "vue"; import {defineComponent, PropType} from "vue";
import {rotate} from "@/utils"; import {rotate} from "@/utils";
export default defineComponent({ export default defineComponent({
name: "VideoScroll", name: "VideoScroll",
props: { props: {
definition: { definition: {
type: Object, type: Object as PropType<VideoScrollDef>,
required: true required: true
} }
}, },
computed: { computed: {
dynamicFiles(): { [key: string]: string } { dynamicFiles(): { top: number, left: number, src: string }[] {
return this.definition.files.slice(1).map((src: string, idx: number) => { return this.definition.files.slice(1).map((src: string, idx: number) => {
const cy = this.definition.top + const cy = this.definition.top +
(this.isVertical ? (this.definition.height * (idx + 1) * this.verticalDirection) : 0); (this.isVertical ? (this.definition.height * (idx + 1) * this.verticalDirection) : 0);
@ -66,7 +66,7 @@ export default defineComponent({
} }
}, },
mounted() { mounted() {
const observer = new IntersectionObserver((entries, observer) => { const observer = new IntersectionObserver((entries, _) => {
entries.forEach((entry) => { entries.forEach((entry) => {
const element = entry.target as HTMLImageElement; const element = entry.target as HTMLImageElement;
if (entry.isIntersecting) { if (entry.isIntersecting) {