From 6f6ef768fd1691ba412bcde1f8b153df1fb238af Mon Sep 17 00:00:00 2001 From: "xing.heng" Date: Sun, 29 May 2022 20:40:24 +0800 Subject: [PATCH] feat: support for changing height or width only --- src/App.vue | 6 +++ src/components/GridItem.vue | 90 ++++++++++++++++++++++++++++++----- src/components/GridLayout.vue | 15 +++++- 3 files changed, 96 insertions(+), 15 deletions(-) diff --git a/src/App.vue b/src/App.vue index ff152bc7..39f983f4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -32,6 +32,8 @@ Mirrored Responsive Prevent Collision + isVerticalResize + isHorizontalResize
Row Height: Col nums: Margin x: Margin y: @@ -69,6 +71,8 @@ :min-y="item.minY" :max-y="item.maxY" :preserve-aspect-ratio="item.preserveAspectRatio" + :is-horizontal-resize="isHorizontalResize" + :is-vertical-resize="isVerticalResize" @resize="resize" @move="move" @resized="resized" @@ -166,6 +170,8 @@ responsive: true, preventCollision: false, compact: true, + isHorizontalResize: true, + isVerticalResize: true, rowHeight: 30, colNum: 12, index: 0, diff --git a/src/components/GridItem.vue b/src/components/GridItem.vue index d539dce1..5ac388b3 100644 --- a/src/components/GridItem.vue +++ b/src/components/GridItem.vue @@ -5,7 +5,9 @@ :style="style" > - + + +
@@ -81,6 +83,23 @@ right: auto; } + .vue-grid-item > .vue-resizable-handle-bottom { + bottom: 0; + right: 50%; + transform: translate(50%, 0); + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjUzNzA3NTUxMzE5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQwNzUiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+QGZvbnQtZmFjZSB7IGZvbnQtZmFtaWx5OiBmZWVkYmFjay1pY29uZm9udDsgc3JjOiB1cmwoIi8vYXQuYWxpY2RuLmNvbS90L2ZvbnRfMTAzMTE1OF91Njl3OHloeGR1LndvZmYyP3Q9MTYzMDAzMzc1OTk0NCIpIGZvcm1hdCgid29mZjIiKSwgdXJsKCIvL2F0LmFsaWNkbi5jb20vdC9mb250XzEwMzExNThfdTY5dzh5aHhkdS53b2ZmP3Q9MTYzMDAzMzc1OTk0NCIpIGZvcm1hdCgid29mZiIpLCB1cmwoIi8vYXQuYWxpY2RuLmNvbS90L2ZvbnRfMTAzMTE1OF91Njl3OHloeGR1LnR0Zj90PTE2MzAwMzM3NTk5NDQiKSBmb3JtYXQoInRydWV0eXBlIik7IH0KPC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUxMiA2MjRhMTEyIDExMiAwIDEgMCAwLTIyNCAxMTIgMTEyIDAgMCAwIDAgMjI0eiIgcC1pZD0iNDA3NiIgZmlsbD0iIzhlOGU4ZSI+PC9wYXRoPjwvc3ZnPg==); + background-position: center 4px; + cursor: ns-resize; + } + .vue-grid-item > .vue-resizable-handle-right { + bottom: 50%; + right: 0; + transform: translate(0, 50%); + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjUzNzA3NTUxMzE5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQwNzUiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+QGZvbnQtZmFjZSB7IGZvbnQtZmFtaWx5OiBmZWVkYmFjay1pY29uZm9udDsgc3JjOiB1cmwoIi8vYXQuYWxpY2RuLmNvbS90L2ZvbnRfMTAzMTE1OF91Njl3OHloeGR1LndvZmYyP3Q9MTYzMDAzMzc1OTk0NCIpIGZvcm1hdCgid29mZjIiKSwgdXJsKCIvL2F0LmFsaWNkbi5jb20vdC9mb250XzEwMzExNThfdTY5dzh5aHhkdS53b2ZmP3Q9MTYzMDAzMzc1OTk0NCIpIGZvcm1hdCgid29mZiIpLCB1cmwoIi8vYXQuYWxpY2RuLmNvbS90L2ZvbnRfMTAzMTE1OF91Njl3OHloeGR1LnR0Zj90PTE2MzAwMzM3NTk5NDQiKSBmb3JtYXQoInRydWV0eXBlIik7IH0KPC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUxMiA2MjRhMTEyIDExMiAwIDEgMCAwLTIyNCAxMTIgMTEyIDAgMCAwIDAgMjI0eiIgcC1pZD0iNDA3NiIgZmlsbD0iIzhlOGU4ZSI+PC9wYXRoPjwvc3ZnPg==); + background-position: 4px center; + cursor: ew-resize; + } + .vue-grid-item.disable-userselect { user-select: none; } @@ -201,7 +220,15 @@ type: Boolean, required: false, default: false, - } + }, + isVerticalResize: { + type: Boolean, + default: false + }, + isHorizontalResize: { + type: Boolean, + default: false + }, }, inject: ["eventBus", "layout"], data: function () { @@ -237,7 +264,8 @@ innerX: this.x, innerY: this.y, innerW: this.w, - innerH: this.h + innerH: this.h, + cursorType: 'rightBottom' } }, created () { @@ -441,6 +469,9 @@ } }, methods: { + mouseenter(e, type) { + this.cursorType = type; + }, createStyle: function () { if (this.x + this.w > this.cols) { this.innerX = 0; @@ -473,7 +504,14 @@ if (this.renderRtl) { style = setTransformRtl(pos.top, pos.right, pos.width, pos.height); } else { - style = setTransform(pos.top, pos.left, pos.width, pos.height); + // style = setTransform(pos.top, pos.left, pos.width, pos.height); + if (this.cursorType === "rightBottom") { + style = setTransform(pos.top, pos.left, pos.width, pos.height); + } else if(this.cursorType === "right") { + style = setTransform(pos.top, pos.left, pos.width, this.style.height); + } else if(this.cursorType === "bottom") { + style = setTransform(pos.top, pos.left, this.style.width, pos.height); + } } } else { // top,left (slow) @@ -513,8 +551,14 @@ this.previousW = this.innerW; this.previousH = this.innerH; pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH); - newSize.width = pos.width; - newSize.height = pos.height; + if(this.cursorType === "rightBottom") { + newSize.width = pos.width; + newSize.height = pos.height; + } else if(this.cursorType === "right"){ + newSize.width = pos.width; + } else if(this.cursorType === "bottom") { + newSize.height = pos.height; + } this.resizing = newSize; this.isResizing = true; break; @@ -522,13 +566,20 @@ case "resizemove": { // console.log("### resize => " + event.type + ", lastW=" + this.lastW + ", lastH=" + this.lastH); const coreEvent = createCoreData(this.lastW, this.lastH, x, y); - if (this.renderRtl) { + if (this.renderRtl) { newSize.width = this.resizing.width - coreEvent.deltaX; + newSize.height = this.resizing.height + coreEvent.deltaY; } else { - newSize.width = this.resizing.width + coreEvent.deltaX; + if(this.cursorType === "rightBottom") { + newSize.width = this.resizing.width + coreEvent.deltaX; + newSize.height = this.resizing.height + coreEvent.deltaY; + } else if(this.cursorType === "right"){ + newSize.width = this.resizing.width + coreEvent.deltaX; + } else if(this.cursorType === "bottom") { + newSize.height = this.resizing.height + coreEvent.deltaY; + } + } - newSize.height = this.resizing.height + coreEvent.deltaY; - ///console.log("### resize => " + event.type + ", deltaX=" + coreEvent.deltaX + ", deltaY=" + coreEvent.deltaY); this.resizing = newSize; break; @@ -536,8 +587,14 @@ case "resizeend": { //console.log("### resize end => x=" +this.innerX + " y=" + this.innerY + " w=" + this.innerW + " h=" + this.innerH); pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH); - newSize.width = pos.width; - newSize.height = pos.height; + if(this.cursorType === "rightBottom") { + newSize.width = pos.width; + newSize.height = pos.height; + } else if(this.cursorType === "right"){ + newSize.width = pos.width; + } else if(this.cursorType === "bottom") { + newSize.height = pos.height; + } // console.log("### resize end => " + JSON.stringify(newSize)); this.resizing = null; this.isResizing = false; @@ -576,7 +633,14 @@ if (event.type === "resizeend" && (this.previousW !== this.innerW || this.previousH !== this.innerH)) { this.$emit("resized", this.i, pos.h, pos.w, newSize.height, newSize.width); } - this.eventBus.$emit("resizeEvent", event.type, this.i, this.innerX, this.innerY, pos.h, pos.w); + // this.eventBus.$emit("resizeEvent", event.type, this.i, this.innerX, this.innerY, pos.h, pos.w); + if (this.cursorType === "rightBottom") { + this.eventBus.$emit("resizeEvent", event.type, this.i, this.innerX, this.innerY, pos.h, pos.w); + } else if(this.cursorType === "right") { + this.eventBus.$emit("resizeEvent", event.type, this.i, this.innerX, this.innerY, this.innerH, pos.w); + } else if(this.cursorType === "bottom") { + this.eventBus.$emit("resizeEvent", event.type, this.i, this.innerX, this.innerY, pos.h, this.innerW); + } }, handleDrag(event) { if (this.static) return; diff --git a/src/components/GridLayout.vue b/src/components/GridLayout.vue index 8fb2cd8c..87be1d5e 100644 --- a/src/components/GridLayout.vue +++ b/src/components/GridLayout.vue @@ -7,7 +7,10 @@ :y="placeholder.y" :w="placeholder.w" :h="placeholder.h" - :i="placeholder.i"> + :i="placeholder.i" + :is-horizontal-resize="isHorizontalResize" + :is-vertical-resize="isVerticalResize" + >