added preserveAspectRatio prop to GridItem

TuiQiao · Jan 15, 2021 · ef8808d · ef8808d
1 parent 0783f5d
commit ef8808d
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 19 deletions.
diff --git a/public/app.css b/public/app.css
@@ -100,4 +100,8 @@
     background-origin: content-box;
     box-sizing: border-box;
     cursor: pointer;
-}
+}
+
+#content .vue-grid-item.vue-grid-placeholder {
+    background-color: green;
+}
diff --git 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,14 +68,15 @@
                            :max-x="item.maxX"
                            :min-y="item.minY"
                            :max-y="item.maxY"
+                           :preserve-aspect-ratio="item.preserveAspectRatio"
                            @resize="resize"
                            @move="move"
                            @resized="resized"
                            @container-resized="containerResized"
                            @moved="moved"
                 >
                     <!--<custom-drag-element :text="item.i"></custom-drag-element>-->
-                    <test-element :text="item.i"></test-element>
+                    <test-element :text="item.i" @removeItem="removeItem($event)"></test-element>
                     <!--<button @click="clicked">CLICK ME!</button>-->
                 </grid-item>
             </grid-layout>
@@ -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
@@ -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
@@ -1,9 +1,18 @@
 <template>
-    <span class="text">
-        {{text}}
-    </span>
+    <div>
+        <span class="text">
+            {{text}}
+        </span>
+        <span class="remove" @click="$emit('removeItem', text)">x</span>
+    </div>
 </template>
 <style>
+.remove {
+    position: absolute;
+    right: 2px;
+    top: 0;
+    cursor: pointer;
+}
 </style>
 <script>
     export default {
@@ -22,4 +31,4 @@
             console.log("### " + this.text + " ready!");
         },
     }
-</script>
+</script>
diff --git 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.