Add clear option to resize PiP
Test: Visual
Change-Id: Id6ab0167cc7e3bd1da73c2b26389e822e92a4c1f
diff --git a/tools/winscope/src/DraggableDiv.vue b/tools/winscope/src/DraggableDiv.vue
index 01993eb..adccaf4 100644
--- a/tools/winscope/src/DraggableDiv.vue
+++ b/tools/winscope/src/DraggableDiv.vue
@@ -18,13 +18,16 @@
:style="{visibility: contentIsLoaded ? 'visible' : 'hidden'}"
>
<md-card class="draggable-card">
- <div class="header" @mousedown="onMouseDown">
+ <div class="header" @mousedown="onHeaderMouseDown">
<md-icon class="drag-icon">
drag_indicator
</md-icon>
<slot name="header" />
</div>
- <slot name="main" ref="content"/>
+ <div class="content">
+ <slot name="main" ref="content"/>
+ <div class="resizer" v-show="resizeable" @mousedown="onResizerMouseDown"/>
+ </div>
</md-card>
</div>
</template>
@@ -32,7 +35,7 @@
export default {
name: "DraggableDiv",
// If asyncLoad is enabled must call contentLoaded when content is ready
- props: ['position', 'asyncLoad'],
+ props: ['position', 'asyncLoad', 'resizeable'],
data() {
return {
positions: {
@@ -43,14 +46,21 @@
},
parentResizeObserver: null,
contentIsLoaded: false,
+ extraWidth: 0,
+ extraHeight: 0,
}
},
methods: {
- onMouseDown(e) {
+ onHeaderMouseDown(e) {
e.preventDefault();
this.initDragAction(e);
},
+ onResizerMouseDown(e) {
+ e.preventDefault();
+
+ this.startResize(e);
+ },
initDragAction(e) {
this.positions.clientX = e.clientX;
this.positions.clientY = e.clientY;
@@ -94,6 +104,40 @@
document.onmouseup = null;
document.onmousemove = null;
},
+ startResize(e) {
+ e.preventDefault();
+ this.startResizeX = e.clientX;
+ this.startResizeY = e.clientY;
+ document.onmousemove = this.resizing;
+ document.onmouseup = this.stopResize;
+ document.body.style.cursor = "nwse-resize";
+ },
+ resizing(e) {
+ let extraWidth = this.extraWidth + (e.clientX - this.startResizeX);
+ if (extraWidth < 0) {
+ extraWidth = 0;
+ }
+ this.$emit('requestExtraWidth', extraWidth);
+
+ let extraHeight = this.extraHeight + (e.clientY - this.startResizeY);
+ if (extraHeight < 0) {
+ extraHeight = 0;
+ }
+ this.$emit('requestExtraHeight', extraHeight);
+ },
+ stopResize(e) {
+ this.extraWidth += e.clientX - this.startResizeX;
+ if (this.extraWidth < 0) {
+ this.extraWidth = 0;
+ }
+ this.extraHeight += e.clientY - this.startResizeY;
+ if (this.extraHeight < 0) {
+ this.extraHeight = 0;
+ }
+ document.onmousemove = null;
+ document.onmouseup = null;
+ document.body.style.cursor = null;
+ },
onParentResize() {
const parentHeight = this.$el.parentElement.clientHeight;
const parentWidth = this.$el.parentElement.clientWidth;
@@ -170,4 +214,16 @@
cursor: grab;
padding: 3px;
}
+
+.resizer {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 0 0 15px 15px;
+ border-color: transparent transparent #ffffff transparent;
+ cursor: nwse-resize;
+}
</style>
\ No newline at end of file
diff --git a/tools/winscope/src/Overlay.vue b/tools/winscope/src/Overlay.vue
index 804782c..3ab6f2f 100644
--- a/tools/winscope/src/Overlay.vue
+++ b/tools/winscope/src/Overlay.vue
@@ -21,6 +21,9 @@
v-show="minimized && showVideoOverlay"
position="bottomLeft"
:asyncLoad="true"
+ :resizeable="true"
+ v-on:requestExtraWidth="updateVideoOverlayWidth"
+ :style="videoOverlayStyle"
v-if="video"
>
<template slot="header">
@@ -239,6 +242,7 @@
mergedTimeline: null,
NAVIGATION_STYLE,
navigationStyle: this.store.navigationStyle,
+ videoOverlayExtraWidth: 0,
}
},
created() {
@@ -272,6 +276,11 @@
video() {
return this.$store.getters.video;
},
+ videoOverlayStyle() {
+ return {
+ width: 150 + this.videoOverlayExtraWidth + 'px',
+ }
+ },
timelineFiles() {
return this.$store.getters.timelineFiles;
},
@@ -527,6 +536,9 @@
this.$store.commit('setNavigationFilesFilter', navigationStyleFilter);
},
+ updateVideoOverlayWidth(width) {
+ this.videoOverlayExtraWidth = width;
+ },
},
components: {
'timeline': Timeline,
@@ -635,7 +647,6 @@
.video-overlay {
display: inline-block;
margin-bottom: 15px;
- width: 150px;
min-width: 50px;
max-width: 50vw;
height: auto;
