From ef8808d36871e7de106c632c5d0bfd87dba99364 Mon Sep 17 00:00:00 2001 From: Gustavo Santos Date: Fri, 15 Jan 2021 17:46:49 +0000 Subject: [PATCH] added preserveAspectRatio prop to GridItem --- public/app.css | 6 +++++- src/App.vue | 30 ++++++++++++++++++++++-------- src/components/GridItem.vue | 18 +++++++++++++----- src/components/TestElement.vue | 17 +++++++++++++---- website/docs/guide/properties.md | 10 +++++++++- 5 files changed, 62 insertions(+), 19 deletions(-) diff --git a/public/app.css b/public/app.css index 4bf6ceb8..2fa5ca1d 100644 --- a/public/app.css +++ b/public/app.css @@ -100,4 +100,8 @@ background-origin: content-box; box-sizing: border-box; cursor: pointer; -} \ No newline at end of file +} + +#content .vue-grid-item.vue-grid-placeholder { + background-color: green; +} diff --git a/src/App.vue b/src/App.vue index cf31ffcf..ff152bc7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -45,7 +45,7 @@ :is-resizable="resizable" :is-mirrored="mirrored" :prevent-collision="preventCollision" - :vertical-compact="true" + :vertical-compact="compact" :use-css-transforms="true" :responsive="responsive" @layout-created="layoutCreatedEvent" @@ -68,6 +68,7 @@ :max-x="item.maxX" :min-y="item.minY" :max-y="item.maxY" + :preserve-aspect-ratio="item.preserveAspectRatio" @resize="resize" @move="move" @resized="resized" @@ -75,7 +76,7 @@ @moved="moved" > - + @@ -119,7 +120,7 @@ let testLayout = [ {"x":0,"y":0,"w":2,"h":2,"i":"0", resizable: true, draggable: true, static: false, minY: 0, maxY: 2}, {"x":2,"y":0,"w":2,"h":4,"i":"1", resizable: null, draggable: null, static: true}, - {"x":4,"y":0,"w":2,"h":5,"i":"2", resizable: false, draggable: false, static: false, minX: 4, maxX: 4, minW: 2, maxW: 2}, + {"x":4,"y":0,"w":2,"h":5,"i":"2", resizable: false, draggable: false, static: false, minX: 4, maxX: 4, minW: 2, maxW: 2, preserveAspectRatio: true}, {"x":6,"y":0,"w":2,"h":3,"i":"3", resizable: false, draggable: false, static: false}, {"x":8,"y":0,"w":2,"h":3,"i":"4", resizable: false, draggable: false, static: false}, {"x":10,"y":0,"w":2,"h":3,"i":"5", resizable: false, draggable: false, static: false}, @@ -139,6 +140,14 @@ {"x":2,"y":6,"w":2,"h":2,"i":"19", resizable: false, draggable: false, static: false} ]; + /*let testLayout = [ + { x: 0, y: 0, w: 2, h: 2, i: "0" }, + { x: 2, y: 0, w: 2, h: 2, i: "1" }, + { x: 4, y: 0, w: 2, h: 2, i: "2" }, + { x: 6, y: 0, w: 2, h: 2, i: "3" }, + { x: 8, y: 0, w: 2, h: 2, i: "4" }, + ];*/ + export default { name: 'app', components: { @@ -156,6 +165,7 @@ mirrored: false, responsive: true, preventCollision: false, + compact: true, rowHeight: 30, colNum: 12, index: 0, @@ -180,9 +190,10 @@ width -= 20; document.getElementById("content").style.width = width+"px"; }, - removeItem: function(item) { - //console.log("### REMOVE " + item.i); - this.layout.splice(this.layout.indexOf(item), 1); + removeItem: function(i) { + console.log("### REMOVE " + i); + const index = this.layout.map(item => item.i).indexOf(i); + this.layout.splice(index, 1); }, addItem: function() { // let self = this; @@ -192,9 +203,12 @@ this.layout.push(item); }, addItemDynamically: function() { + const x = (this.layout.length * 2) % (this.colNum || 12); + const y = this.layout.length + (this.colNum || 12); + console.log("X=" + x + " Y=" + y) let item = { - x: (this.layout.length * 2) % (this.colNum || 12), - y: this.layout.length + (this.colNum || 12), + x: x, + y: y, w: 2, h: 2, i: this.index+"", diff --git a/src/components/GridItem.vue b/src/components/GridItem.vue index 1f081351..bb391f69 100644 --- a/src/components/GridItem.vue +++ b/src/components/GridItem.vue @@ -197,6 +197,11 @@ required: false, default: 'a, button' }, + preserveAspectRatio: { + type: Boolean, + required: false, + default: false, + } }, inject: ["eventBus", "layout"], data: function () { @@ -790,11 +795,6 @@ // console.log("### MIN " + JSON.stringify(minimum)); const opts = { - modifiers: [ - interact.modifiers.aspectRatio({ - ratio: 'preserve' - }), - ], // allowFrom: "." + this.resizableHandleClass.trim().replace(" ", "."), edges: { left: false, @@ -815,6 +815,14 @@ } }; + if (this.preserveAspectRatio) { + opts.modifiers = [ + interact.modifiers.aspectRatio({ + ratio: 'preserve' + }), + ] + } + this.interactObj.resizable(opts); if (!this.resizeEventSet) { this.resizeEventSet = true; diff --git a/src/components/TestElement.vue b/src/components/TestElement.vue index 2868a4b0..1e82e6b0 100644 --- a/src/components/TestElement.vue +++ b/src/components/TestElement.vue @@ -1,9 +1,18 @@ \ No newline at end of file + diff --git a/website/docs/guide/properties.md b/website/docs/guide/properties.md index ed404a01..fbbe756c 100644 --- a/website/docs/guide/properties.md +++ b/website/docs/guide/properties.md @@ -133,7 +133,7 @@ See also [responsiveLayouts](#responsivelayouts), [breakpoints](#breakpoints) an * required: `false` * default: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 } -Breakpoints defined for responsive layout,the parameter represents the width of different devices:lg(large), md(medium), sm(small), xs(extra small). Sets widths on wich column number changes +Breakpoints defined for responsive layout, the parameter represents the width of different devices:lg(large), md(medium), sm(small), xs(extra small). Sets widths on wich column number changes See also [responsiveLayouts](#responsivelayouts) and [cols](#cols) @@ -306,3 +306,11 @@ The value is `css-like` selector string. For more info please refer to `ignoreFrom` in [interact.js docs](http://interactjs.io/docs/#ignorable-selectors). + +### preserveAspectRatio + +* type: `Boolean` +* required: `false` +* default: `'false'` + +If 'true', forces the GridItem to preserve its aspect ratio when resizing.