From 80e3f221f5e7fdb87d911af081ccb5512752c586 Mon Sep 17 00:00:00 2001 From: Shishir Raven Date: Sun, 9 Jan 2022 00:11:14 +0530 Subject: [PATCH] Added sizeInPixel for resize and resized events They will return size like this. min: 0, max: 100, size: 46.423017107309484, sizeInPixel: 596} This would help in responsive layouts where screen size change and percent value might tell about the available space. --- src/components/splitpanes/splitpanes.vue | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/splitpanes/splitpanes.vue b/src/components/splitpanes/splitpanes.vue index 40316ff..be1de35 100644 --- a/src/components/splitpanes/splitpanes.vue +++ b/src/components/splitpanes/splitpanes.vue @@ -88,13 +88,16 @@ export default { event.preventDefault() this.touch.dragging = true this.calculatePanesSize(this.getCurrentMouseDrag(event)) - this.$emit('resize', this.panes.map(pane => ({ min: pane.min, max: pane.max, size: pane.size }))) + var containerSize = this.container[this.horizontal ? 'clientHeight' : 'clientWidth'] + this.$emit('resize', this.panes.map(pane => ({ min: pane.min, max: pane.max, size: pane.size, sizeInPixel: (containerSize/100)*pane.size }))) + } }, onMouseUp () { if (this.touch.dragging) { - this.$emit('resized', this.panes.map(pane => ({ min: pane.min, max: pane.max, size: pane.size }))) + var containerSize = this.container[this.horizontal ? 'clientHeight' : 'clientWidth'] + this.$emit('resized', this.panes.map(pane => ({ min: pane.min, max: pane.max, size: pane.size, sizeInPixel: (containerSize/100)*pane.size }))) } this.touch.mouseDown = false // Keep dragging flag until click event is finished (click happens immediately after mouseup)