add prop types, fix warnings
This commit is contained in:
parent
4c42baf268
commit
8bbcd96050
3 changed files with 12 additions and 11 deletions
|
@ -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>
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue