Commit 0e743d87 authored by Mathias Bär's avatar Mathias Bär
Browse files

selecting an annotation in the annotation list now correctly scrolls the...

selecting an annotation in the annotation list now correctly scrolls the marker on the swim lane into view when in expanded mode.
parent ddadcc0e
Pipeline #10974 passed with stage
in 11 minutes and 26 seconds
......@@ -116,7 +116,7 @@
if (!EventHub.keyIsPressed(' ')) {
this.inputOffset = this.root.getInputPositionAbsGraph()
this.$root.$emit('UIDown', 'graphBackground')
this.$root.$emit('markerUnselect')
// this.$root.$emit('markerUnselect')
}
},
onGraphMouseWheel (event) {
......@@ -165,6 +165,9 @@
}
// console.log('n:', n, 'for:', idx)
return n
},
getMarkerByUUID (uuid) {
return uuid
}
}
}
......
......@@ -14,6 +14,7 @@
v-for="(a, index) in annotations",
:annotationData="a",
:key="a._uuid",
:ref="a._uuid",
:index="index",
:root="root"
)
......
......@@ -81,7 +81,8 @@
...mapGetters({
laneMode: 'swimLaneSettings/getLaneMode',
expandedMode: 'swimLaneSettings/getExpandedMode',
selectedAnnotation: 'swimLaneSettings/getSelectedAnnotation'
selectedAnnotation: 'swimLaneSettings/getSelectedAnnotation',
scaleFactor: 'swimLaneSettings/getScaleFactor'
}),
handleFill () {
return this.isHovered || this.isDragged ? 'rgba(255,255,255,0.5)' : 'transparent'
......@@ -163,7 +164,23 @@
},
watch: {
selectedAnnotation () {
if (this.selectedAnnotation) this.isSelected = this.selectedAnnotation._uuid === this.annotationData._uuid
if (this.selectedAnnotation) {
this.isSelected = this.selectedAnnotation._uuid === this.annotationData._uuid
if (this.isSelected) {
const bounds = {
top: this.y + this.$parent.y,
bottom: this.y + this.$parent.y,
right: this.root.toAbsGraphX(this.xRel),
left: this.root.toAbsGraphX(this.xRel)
}
const v = this.root.isVisible(bounds)
const s = {
// x: !v.x ? this.xRel - (this.scaleFactor / 2) : null,
y: !v.y ? this.root.toRelGraphY(this.y + this.$parent.y - 2) : null
}
this.$root.$emit('scrollPositionChange', s)
}
}
}
},
methods: {
......
......@@ -190,7 +190,7 @@
TimecodeLabel
},
props: ['timelineUuid', 'markerDetails', 'resizable', 'start', 'duration', 'annotations', 'video', 'map',
'currentAnnotation', 'forceRendererMarker'],
'selectedMillis', 'forceRendererMarker'],
data () {
return {
self: this,
......@@ -374,9 +374,9 @@
// this.setScrollPosition({x: this.millisTotaltoRelGraph(val) - this.scaleFactor / 2, y: 0})
// this.jumpToMarker()
},
currentAnnotation (val) {
// this.setScrollPosition({x: this.millisTotaltoRelGraph(val), y: 0})
this.setScrollPosition({x: this.millisTotaltoRelGraph(val) - this.scaleFactor / 2, y: 0})
selectedMillis (ms) {
let v = this.isVisible({left: this.millisTotaltoAbsGraph(ms), top: 0})
if (!v.x) this.setScrollPosition({x: this.millisTotaltoRelGraph(ms) - this.scaleFactor / 2})
},
timecodeCurrent (tc) {
this.timecode.currentText = this.millisToText(tc)
......@@ -398,7 +398,7 @@
jumpToMarker (val, useDuration) {
let jumpingPoint
if (!useDuration) {
// if (!val) jumpingPoint = this.currentAnnotation
// if (!val) jumpingPoint = this.selectedMillis
if (!val) jumpingPoint = this.selectedAnnotation
else jumpingPoint = val
}
......@@ -629,6 +629,12 @@
}
this.annotations.push(m)
},
scrollToMillis (ms) {
return ms
},
scrollToAnnotation (a) {
return a
},
// ------------------------------------------------------------------------------------------------------- E Other
onResize () {
// TODO: throttle this: emit custom event here and use event.throttle with inline declaration ?
......@@ -639,10 +645,10 @@
let x = null
let y = null
if (!isNaN(sp.x) && this.$refs.nav) {
if (!isNaN(sp.x) && sp.x !== null && this.$refs.nav) {
x = this.restrict(sp.x, 0, this.toRelCompX(this.el.width - this.$refs.nav.navHandleWidth))
}
if (!isNaN(sp.y) && this.$refs.graph && this.el) {
if (!isNaN(sp.y) && sp.y !== null && this.$refs.graph && this.el) {
y = this.restrict(sp.y, 0, this.toRelGraphY(this.$refs.graph.height - this.el.height))
}
this.$store.commit('swimLaneSettings/setScrollPosition', {x: x, y: y})
......@@ -685,7 +691,6 @@
getInputPositionAbsGraph () {
return {x: this.inputPosition.x - this.$refs.graph.x, y: this.inputPosition.y - this.$refs.graph.y}
},
// TODO add y value
getInputPositionRelGraph () {
return {x: this.toRelGraphX(this.getInputPositionAbsGraph().x), y: this.toRelGraphY(this.getInputPositionAbsGraph().y)}
},
......@@ -717,6 +722,9 @@
let t1 = this.relToMillis(this.toRelGraphX(this.el.width))
return {start: t0, length: t1}
},
getMarkerByUUID (uuid) {
this.$refs.graph.getMarkerByUUID(uuid)
},
// ---------------------------------------------------------------------------------------------------------- Misc
registerMarker (m) {
this.markerList.push(m)
......@@ -758,18 +766,32 @@
}
},
// checking for visibility seems to be slower than just rendering everything D=
// top and left needs to be set
isVisible (bounds) {
let spa = this.toAbsGraphX(this.scrollPosition.x)
let offset = bounds.offset || 0
return bounds.left - spa >= -offset && bounds.right - spa <= this.el.width + offset
let sx = this.toAbsGraphX(this.scrollPosition.x)
let sy = this.toAbsGraphY(this.scrollPosition.y)
let ox = bounds.offsetX || 0
let oy = bounds.offsetY || 0
let b = {
left: bounds.left,
right: bounds.right || bounds.left,
top: bounds.top,
bottom: bounds.bottom || bounds.top
}
return {
x: b.left - sx >= -ox && b.right - sx <= this.el.width + ox,
y: b.top - sy >= -oy && b.bottom - sy <= this.el.height + oy
}
},
// ---------------------------------------------------------------------------------------------------- Conversion
toAbsCompX (rel) {
return rel * this.el.width
},
toAbsGraphX (rel) {
if (this.$refs.graph) return rel * this.$refs.graph.width
else return rel * 1
return (this.$refs.graph) ? rel * this.$refs.graph.width : rel * 1
},
toAbsGraphY (rel) {
return (this.$refs.graph) ? rel * this.$refs.graph.height : rel * 1
},
toRelCompX (abs) { // return 0 - 1
return abs / this.el.width
......@@ -791,9 +813,6 @@
}
else return 0
},
// relComptoRelGraphX (rel) {
// return rel + this.scroll
// },
millisToRelGraph (ms) {
let res = ms / this.timeline.duration
if (isFinite(res)) return res
......
......@@ -31,27 +31,30 @@
// swimlane content
.absolute-bottom-right.bg-dark.full-width.shadow-up-4(v-if="visibilitySwimlanes",
:style="{height: swimlanesHeight + 'px', borderTop: '1px solid #333', minHeight: '250px'}",
ref="swimlaneWrap")
swim-lane(
v-if="timeline",
:map="timeline",
:timelineUuid="timeline._uuid",
:markerDetails="false",
:resizable="true",
:start="getVideoDate().toMillis()",
:duration="getVideoDuration()",
:annotations="annotations",
:video="video",
:key="componentKey",
:currentAnnotation="selectorMillis",
:forceRendererMarker="fRendererMarker",
@emitHandler="handlerToggle('swimlanes')",
@forceRenderer="onForceRenderer",
@timecodeChange="gotoMillis",
@updateAnnotation="updateAnnotation"
.absolute-bottom-right.bg-dark.full-width.shadow-up-4(
v-if="visibilitySwimlanes",
:style="{height: swimlanesHeight + 'px', borderTop: '1px solid #333', minHeight: '250px'}",
ref="swimlaneWrap"
)
swim-lane(
v-if="timeline",
:map="timeline",
:timelineUuid="timeline._uuid",
:markerDetails="false",
:resizable="true",
:start="getVideoDate().toMillis()",
:duration="getVideoDuration()",
:annotations="annotations",
:video="video",
:key="componentKey",
:selectedMillis="selectedMillis",
:focusedAnnotation="focusedAnnotation",
:forceRendererMarker="fRendererMarker",
@emitHandler="handlerToggle('swimlanes')",
@forceRenderer="onForceRenderer",
@timecodeChange="gotoMillis",
@updateAnnotation="updateAnnotation"
)
// button toggles swimlanes visibility
......@@ -95,7 +98,7 @@
annotation-icon.cursor-pointer(
:annotation="annotation",
:isSelected="selectedAnnotation ? selectedAnnotation._uuid === annotation._uuid : false",
@click.native="selectAnnotation(annotation)"
@click.native="gotoSelector(annotation.target.selector, false, annotation)"
)
timecode-label(
@click.native="gotoSelector(annotation.target.selector, false, annotation)",
......@@ -211,7 +214,7 @@
videoHeight: undefined,
detailsWidth: undefined,
componentKey: 0,
selectorMillis: undefined,
selectedMillis: undefined,
fRendererMarker: false,
drawerVisibility: undefined
}
......@@ -443,13 +446,16 @@
let millis = selector._valueMillis - this.video.target.selector._valueMillis
if (useDuration) {
millis += selector._valueDuration
this.selectorMillis = selector._valueMillis + selector._valueDuration
this.selectedMillis = selector._valueMillis + selector._valueDuration
}
else {
this.selectorMillis = selector._valueMillis
this.selectedMillis = selector._valueMillis
}
this.gotoMillis(millis)
this.$store.commit('swimLaneSettings/setSelectedAnnotation', annotation)
if (annotation) {
this.$store.commit('swimLaneSettings/setSelectedAnnotation', annotation)
}
this.fRendererMarker = !this.fRendererMarker
},
gotoHashvalue () {
......@@ -514,8 +520,9 @@
}
},
selectAnnotation (annotation) {
// this.selectorMillis = annotation.target.selector._valueMillis
// this.selectedMillis = annotation.target.selector._valueMillis
this.gotoSelector(annotation.target.selector)
// this.gotoMillis(annotation.target.selector._valueMillis - this.video.target.selector._valueMillis)
this.$store.commit('swimLaneSettings/setSelectedAnnotation', annotation)
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment