Skip to content

Commit 6487f91

Browse files
gmsagmsa
authored
Merge pull request jbaysolutions#124 from kweij/issue-123-mirrored-grid-layout
Add mirrored grid layout option
2 parents 12ab330 + 2ff7ce3 commit 6487f91

File tree

9 files changed

+207
-65
lines changed

9 files changed

+207
-65
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ or include the script in your html (download from [releases](https://github.com/
109109
:row-height="30"
110110
:is-draggable="true"
111111
:is-resizable="true"
112+
:is-mirrored="false"
112113
:vertical-compact="true"
113114
:margin="[10, 10]"
114115
:use-css-transforms="true"

‎dist/vue-grid-layout.js

Lines changed: 62 additions & 50 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-grid-layout.min.js

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-grid-layout.min.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/04-allow-ignore.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ <h1>Vue Grid Layout Example 4 - Drag allow/ignore elements</h1>
1212
<a href="https://github.com/jbaysolutions/vue-grid-layout">View project on Github</a>
1313
<br/>
1414
<a href="03-multiple-grids.html">Previous example: Multiple grids</a>
15+
<br/>
16+
<a href="05-mirrored.html">Next example: Mirrored grid layout</a>
1517

1618

1719
<div id="app" style="width: 100%;">

‎examples/05-mirrored.html

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Vue Grid Layout Example 4 - Mirrored grid layout</title>
6+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
7+
<link rel="stylesheet" href="app.css">
8+
</head>
9+
<body>
10+
<h1>Vue Grid Layout Example 5 - Mirrored grid layout</h1>
11+
12+
<a href="https://github.com/jbaysolutions/vue-grid-layout">View project on Github</a>
13+
<br/>
14+
<a href="04-allow-ignore.html">Previous example: Drag allow/ignore elements</a>
15+
16+
<div id="app" style="width: 100%;">
17+
<!--<pre>{{ $data | json }}</pre>-->
18+
<div>
19+
<div class="layoutJSON">
20+
Displayed as <code>[x, y, w, h]</code>:
21+
<div class="columns">
22+
<div class="layoutItem" v-for="item in layout">
23+
<b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
24+
</div>
25+
</div>
26+
</div>
27+
</div>
28+
<div id="content">
29+
<!--<button @click="decreaseWidth">Decrease Width</button>
30+
<button @click="increaseWidth">Increase Width</button>
31+
<button @click="addItem">Add an item</button>-->
32+
<input type="checkbox" v-model="draggable"/> Draggable
33+
<input type="checkbox" v-model="resizable"/> Resizable
34+
<input type="checkbox" v-model="mirrored"/> Mirrored
35+
<br/>
36+
<grid-layout :layout="layout"
37+
:col-num="12"
38+
:row-height="30"
39+
:is-draggable="draggable"
40+
:is-resizable="resizable"
41+
:is-mirrored="mirrored"
42+
:vertical-compact="true"
43+
:use-css-transforms="true"
44+
:right-to-left="true"
45+
>
46+
<grid-item v-for="item in layout"
47+
:x="item.x"
48+
:y="item.y"
49+
:w="item.w"
50+
:h="item.h"
51+
:i="item.i"
52+
>
53+
<span class="text">{{item.i}}</span>
54+
</grid-item>
55+
</grid-layout>
56+
</div>
57+
58+
</div>
59+
<script src="vue.min.js"></script>
60+
<script src="../dist/vue-grid-layout.min.js"></script>
61+
<script type="text/javascript">
62+
const testLayout = [
63+
{"x":0,"y":0,"w":2,"h":2,"i":"0"},
64+
{"x":2,"y":0,"w":2,"h":4,"i":"1"},
65+
{"x":4,"y":0,"w":2,"h":5,"i":"2"},
66+
{"x":6,"y":0,"w":2,"h":3,"i":"3"},
67+
{"x":8,"y":0,"w":2,"h":3,"i":"4"},
68+
{"x":10,"y":0,"w":2,"h":3,"i":"5"},
69+
{"x":0,"y":5,"w":2,"h":5,"i":"6"},
70+
{"x":2,"y":5,"w":2,"h":5,"i":"7"},
71+
{"x":4,"y":5,"w":2,"h":5,"i":"8"},
72+
{"x":6,"y":4,"w":2,"h":4,"i":"9"},
73+
{"x":8,"y":4,"w":2,"h":4,"i":"10"},
74+
{"x":10,"y":4,"w":2,"h":4,"i":"11"},
75+
{"x":0,"y":10,"w":2,"h":5,"i":"12"},
76+
{"x":2,"y":10,"w":2,"h":5,"i":"13"},
77+
{"x":4,"y":8,"w":2,"h":4,"i":"14"},
78+
{"x":6,"y":8,"w":2,"h":4,"i":"15"},
79+
{"x":8,"y":10,"w":2,"h":5,"i":"16"},
80+
{"x":10,"y":4,"w":2,"h":2,"i":"17"},
81+
{"x":0,"y":9,"w":2,"h":3,"i":"18"},
82+
{"x":2,"y":6,"w":2,"h":2,"i":"19"}
83+
];
84+
85+
Vue.config.debug = true;
86+
Vue.config.devtools = true;
87+
88+
const GridLayout = VueGridLayout.GridLayout;
89+
const GridItem = VueGridLayout.GridItem;
90+
91+
new Vue({
92+
el: '#app',
93+
components: {
94+
"GridLayout": GridLayout,
95+
"GridItem": GridItem
96+
},
97+
data: {
98+
layout: testLayout,
99+
draggable: true,
100+
resizable: true,
101+
mirrored: true,
102+
index: 0
103+
},
104+
});
105+
</script>
106+
</body>
107+
</html>

‎src/App.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
<button @click="changeDirection">Change Direction</button>
2929
<input type="checkbox" v-model="draggable"/> Draggable
3030
<input type="checkbox" v-model="resizable"/> Resizable
31+
<input type="checkbox" v-model="mirrored"/> Mirrored
3132
<br/>
3233
Row Height: <input type="number" v-model="rowHeight"/>
3334
<br/>
@@ -37,6 +38,7 @@
3738
:row-height="rowHeight"
3839
:is-draggable="draggable"
3940
:is-resizable="resizable"
41+
:is-mirrored="mirrored"
4042
:vertical-compact="true"
4143
:use-css-transforms="true"
4244
>
@@ -132,6 +134,7 @@
132134
layout2: JSON.parse(JSON.stringify(testLayout)),
133135
draggable: true,
134136
resizable: true,
137+
mirrored: false,
135138
rowHeight: 30,
136139
colNum: 0,
137140
index: 0

‎src/GridItem.vue

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div ref="item"
33
class="vue-grid-item"
4-
:class="{ 'vue-resizable' : resizable, 'resizing' : isResizing, 'vue-draggable-dragging' : isDragging, 'cssTransforms' : useCssTransforms }"
4+
:class="{ 'vue-resizable' : resizable, 'resizing' : isResizing, 'vue-draggable-dragging' : isDragging, 'cssTransforms' : useCssTransforms, 'render-rtl' : renderRtl }"
55
:style="style"
66
>
77
<slot></slot>
@@ -18,6 +18,13 @@
1818
1919
.vue-grid-item.cssTransforms {
2020
transition-property: transform;
21+
left: 0;
22+
right: auto;
23+
}
24+
25+
.vue-grid-item.cssTransforms.render-rtl {
26+
left: auto;
27+
right: 0;
2128
}
2229
2330
.vue-grid-item.resizing {
@@ -364,11 +371,17 @@
364371
},
365372
w: function () {
366373
this.createStyle();
374+
},
375+
renderRtl: function () {
376+
this.createStyle();
367377
}
368378
},
369379
computed: {
380+
renderRtl() {
381+
return (this.$parent.isMirrored) ? !this.rtl : this.rtl;
382+
},
370383
resizableHandleClass() {
371-
if (this.rtl) {
384+
if (this.renderRtl) {
372385
return 'vue-resizable-handle vue-rtl-resizable-handle';
373386
} else {
374387
return 'vue-resizable-handle';
@@ -387,7 +400,7 @@
387400
if (this.isDragging) {
388401
pos.top = this.dragging.top;
389402
// Add rtl support
390-
if (this.rtl) {
403+
if (this.renderRtl) {
391404
pos.right = this.dragging.left;
392405
} else {
393406
pos.left = this.dragging.left;
@@ -402,15 +415,15 @@
402415
// CSS Transforms support (default)
403416
if (this.useCssTransforms) {
404417
// Add rtl support
405-
if (this.rtl) {
418+
if (this.renderRtl) {
406419
style = setTransformRtl(pos.top, pos.right, pos.width, pos.height);
407420
} else {
408421
style = setTransform(pos.top, pos.left, pos.width, pos.height);
409422
}
410423
411424
} else { // top,left (slow)
412425
// Add rtl support
413-
if (this.rtl) {
426+
if (this.renderRtl) {
414427
style = setTopRight(pos.top, pos.right, pos.width, pos.height);
415428
} else {
416429
style = setTopLeft(pos.top, pos.left, pos.width, pos.height);
@@ -439,7 +452,7 @@
439452
case "resizemove":
440453
// console.log("### resize => " + event.type + ", lastW=" + this.lastW + ", lastH=" + this.lastH);
441454
const coreEvent = createCoreData(this.lastW, this.lastH, x, y);
442-
if (this.rtl) {
455+
if (this.renderRtl) {
443456
newSize.width = this.resizing.width - coreEvent.deltaX;
444457
} else {
445458
newSize.width = this.resizing.width + coreEvent.deltaX;
@@ -511,7 +524,7 @@
511524
512525
var parentRect = event.target.offsetParent.getBoundingClientRect();
513526
var clientRect = event.target.getBoundingClientRect();
514-
if (this.rtl) {
527+
if (this.renderRtl) {
515528
newPosition.left = (clientRect.right - parentRect.right) * -1;
516529
} else {
517530
newPosition.left = clientRect.left - parentRect.left;
@@ -525,7 +538,7 @@
525538
parentRect = event.target.offsetParent.getBoundingClientRect();
526539
clientRect = event.target.getBoundingClientRect();
527540
// Add rtl support
528-
if (this.rtl) {
541+
if (this.renderRtl) {
529542
newPosition.left = (clientRect.right - parentRect.right) * -1;
530543
} else {
531544
newPosition.left = clientRect.left - parentRect.left;
@@ -540,7 +553,7 @@
540553
case "dragmove":
541554
const coreEvent = createCoreData(this.lastX, this.lastY, x, y);
542555
// Add rtl support
543-
if (this.rtl) {
556+
if (this.renderRtl) {
544557
newPosition.left = this.dragging.left - coreEvent.deltaX;
545558
} else {
546559
newPosition.left = this.dragging.left + coreEvent.deltaX;
@@ -554,7 +567,7 @@
554567
}
555568
556569
// Get new XY
557-
if (this.rtl) {
570+
if (this.renderRtl) {
558571
var pos = this.calcXY(newPosition.top, newPosition.left);
559572
} else {
560573
var pos = this.calcXY(newPosition.top, newPosition.left);
@@ -574,7 +587,7 @@
574587
calcPosition: function (x, y, w, h) {
575588
const colWidth = this.calcColWidth();
576589
// add rtl support
577-
if (this.rtl) {
590+
if (this.renderRtl) {
578591
var out = {
579592
right: Math.round(colWidth * x + (x + 1) * this.margin[0]),
580593
top: Math.round(this.rowHeight * y + (y + 1) * this.margin[1]),

‎src/GridLayout.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,10 @@
6464
type: Boolean,
6565
default: true
6666
},
67+
isMirrored: {
68+
type: Boolean,
69+
default: false
70+
},
6771
useCssTransforms: {
6872
type: Boolean,
6973
default: true

0 commit comments

Comments
 (0)