Reposition draggable div on parent resize
Test: Manually
Fixes: 158638640
Change-Id: I4fa805664a48da14e52ecd13aa383d0a6fa87de9
diff --git a/tools/winscope/src/App.vue b/tools/winscope/src/App.vue
index 1ada00c..4f351ba 100644
--- a/tools/winscope/src/App.vue
+++ b/tools/winscope/src/App.vue
@@ -38,9 +38,9 @@
@click="onDataViewFocus(file)"
/>
- <bottom-navigation
+ <overlay
:store="store"
- :ref="bottomNavRef"
+ :ref="overlayRef"
v-if="dataLoaded"
/>
</md-app-content>
@@ -49,7 +49,7 @@
</template>
<script>
import TreeView from './TreeView.vue'
-import BottomNavigation from './BottomNavigation.vue'
+import Overlay from './Overlay.vue'
import Rects from './Rects.vue'
import DataView from './DataView.vue'
import DataInput from './DataInput.vue'
@@ -71,7 +71,7 @@
onlyVisible: false,
displayDefaults: true,
}),
- bottomNavRef: "bottomNav",
+ overlayRef: "overlay",
}
},
created() {
@@ -144,10 +144,10 @@
}
},
components: {
- 'bottom-navigation': BottomNavigation,
- 'dataview': DataView,
- 'datainput': DataInput,
- 'dataadb': DataAdb,
+ overlay: Overlay,
+ dataview: DataView,
+ datainput: DataInput,
+ dataadb: DataAdb,
}
};
</script>
diff --git a/tools/winscope/src/DraggableDiv.vue b/tools/winscope/src/DraggableDiv.vue
index 6ea7530..fe56574 100644
--- a/tools/winscope/src/DraggableDiv.vue
+++ b/tools/winscope/src/DraggableDiv.vue
@@ -35,6 +35,7 @@
clientY: undefined,
movementX: 0,
movementY: 0,
+ parentResizeObserver: null,
}
}
},
@@ -87,7 +88,25 @@
stopDrag() {
document.onmouseup = null;
document.onmousemove = null;
- }
+ },
+ onParentResize() {
+ const parentHeight = this.$el.parentElement.clientHeight;
+ const parentWidth = this.$el.parentElement.clientWidth;
+
+ const elHeight = this.$el.clientHeight;
+ const elWidth = this.$el.clientWidth;
+ const rect = this.$el.getBoundingClientRect();
+
+ const offsetBottom = parentHeight - (rect.y + elHeight);
+ if (offsetBottom < 0) {
+ this.$el.style.top = parseInt(this.$el.style.top) + offsetBottom + 'px';
+ }
+
+ const offsetRight = parentWidth - (rect.x + elWidth);
+ if (offsetRight < 0) {
+ this.$el.style.left = parseInt(this.$el.style.left) + offsetRight + 'px';
+ }
+ },
},
mounted() {
const margin = 15;
@@ -111,7 +130,15 @@
// eg: if video needs to load it will change height at a later time than now
resizeObserver.observe(this.$el);
setTimeout(() => { resizeObserver.unobserve(this.$el); }, 500);
- }
+
+ // Listen for changes in parent height to avoid element exiting visible view
+ this.parentResizeObserver = new ResizeObserver(this.onParentResize);
+
+ this.parentResizeObserver.observe(this.$el.parentElement);
+ },
+ destroyed() {
+ this.parentResizeObserver.unobserve(this.$el.parentElement);
+ },
}
</script>
<style scoped>
diff --git a/tools/winscope/src/BottomNavigation.vue b/tools/winscope/src/Overlay.vue
similarity index 98%
rename from tools/winscope/src/BottomNavigation.vue
rename to tools/winscope/src/Overlay.vue
index 84c5953..f8ecd07 100644
--- a/tools/winscope/src/BottomNavigation.vue
+++ b/tools/winscope/src/Overlay.vue
@@ -140,7 +140,7 @@
import { nanos_to_string } from './transform.js'
export default {
- name: 'bottom-navigation',
+ name: 'overlay',
props: [ 'store' ],
data() {
return {
@@ -154,7 +154,6 @@
},
resizeOffset: 0,
showVideoOverlay: true,
- videoOverlayTop: 0,
mergedTimeline: null,
}
},
@@ -300,7 +299,7 @@
},
openVideoOverlay() {
this.showVideoOverlay = true;
- }
+ },
},
components: {
'timeline': Timeline,
@@ -308,9 +307,6 @@
'videoview': VideoView,
'draggable-div': DraggableDiv,
},
- mounted() {
- this.videoOverlayTop = this.$refs.overlayContent.clientHeight - 150 - 15 + "px";
- }
}
</script>
<style scoped>
