Skip to content

Commit d40b238

Browse files
ittusittus
committed
Support colNum dynamic
1 parent da151c1 commit d40b238

File tree

3 files changed

+50
-33
lines changed

3 files changed

+50
-33
lines changed

‎src/App.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,11 @@
3030
<input type="checkbox" v-model="resizable"/> Resizable
3131
<input type="checkbox" v-model="mirrored"/> Mirrored
3232
<br/>
33-
Row Height: <input type="number" v-model="rowHeight"/>
33+
Row Height: <input type="number" v-model="rowHeight"/> Col nums: <input type="number" v-model="colNum"/>
3434
<br/>
3535
<grid-layout
3636
:layout="layout"
37-
:col-num="12"
37+
:col-num="parseInt(colNum)"
3838
:row-height="rowHeight"
3939
:is-draggable="draggable"
4040
:is-resizable="resizable"
@@ -136,7 +136,7 @@
136136
resizable: true,
137137
mirrored: false,
138138
rowHeight: 30,
139-
colNum: 0,
139+
colNum: 12,
140140
index: 0
141141
}
142142
},
@@ -174,7 +174,7 @@
174174
},
175175
resize: function(i, newH, newW){
176176
console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW);
177-
},
177+
},
178178
moved: function(i, newX, newY){
179179
console.log("### MOVED i=" + i + ", X=" + newX + ", Y=" + newY);
180180
},

‎src/GridItem.vue‎

Lines changed: 43 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,10 @@
212212
previousH: null,
213213
previousX: null,
214214
previousY: null,
215+
innerX: this.x,
216+
innerY: this.y,
217+
innerW: this.w,
218+
innerH: this.h
215219
}
216220
},
217221
created () {
@@ -250,16 +254,18 @@
250254
this.compact();
251255
};
252256
257+
self.setColNum = (colNum) => {
258+
self.cols = parseInt(colNum);
259+
}
260+
253261
this.eventBus.$on('updateWidth', self.updateWidthHandler);
254262
this.eventBus.$on('compact', self.compactHandler);
255263
this.eventBus.$on('setDraggable', self.setDraggableHandler);
256264
this.eventBus.$on('setResizable', self.setResizableHandler);
257265
this.eventBus.$on('setRowHeight', self.setRowHeightHandler);
258266
this.eventBus.$on('directionchange', self.directionchangeHandler);
267+
this.eventBus.$on('setColNum', self.setColNum)
259268
260-
/*this.eventBus.$on('setColNum', function(colNum) {
261-
self.cols = colNum;
262-
});*/
263269
var direction = (document.dir !== undefined) ?
264270
document.dir :
265271
document.getElementsByTagName("html")[0].getAttribute("dir");
@@ -274,6 +280,7 @@
274280
this.eventBus.$off('setResizable', self.setResizableHandler);
275281
this.eventBus.$off('setRowHeight', self.setRowHeightHandler);
276282
this.eventBus.$off('directionchange', self.directionchangeHandler);
283+
this.eventBus.$off('setColNum', self.setColNum);
277284
},
278285
mounted: function () {
279286
this.cols = this.$parent.colNum;
@@ -336,7 +343,7 @@
336343
edges: {left: false, right: true, bottom: true, top: false},
337344
ignoreFrom: this.resizeIgnoreFrom
338345
};
339-
346+
340347
this.interactObj.resizable(opts);
341348
if (!this.resizeEventSet) {
342349
this.resizeEventSet = true;
@@ -360,16 +367,20 @@
360367
containerWidth: function () {
361368
this.createStyle();
362369
},
363-
x: function () {
370+
x: function (newVal) {
371+
this.innerX = newVal;
364372
this.createStyle();
365373
},
366-
y: function () {
374+
y: function (newVal) {
375+
this.innerY = newVal;
367376
this.createStyle();
368377
},
369-
h: function () {
378+
h: function (newVal) {
379+
this.innerH = newVal
370380
this.createStyle();
371381
},
372-
w: function () {
382+
w: function (newVal) {
383+
this.innerW = newVal;
373384
this.createStyle();
374385
},
375386
renderRtl: function () {
@@ -391,11 +402,14 @@
391402
methods: {
392403
createStyle: function () {
393404
if (this.x + this.w > this.cols) {
394-
this.x = 0;
395-
this.w = this.cols;
405+
this.innerX = 0;
406+
this.innerW = (this.w > this.cols) ? this.cols : this.w
407+
} else {
408+
this.innerX = this.x;
409+
this.innerW = this.w;
396410
}
411+
var pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH);
397412
398-
var pos = this.calcPosition(this.x, this.y, this.w, this.h);
399413
400414
if (this.isDragging) {
401415
pos.top = this.dragging.top;
@@ -441,9 +455,9 @@
441455
const newSize = {width: 0, height: 0};
442456
switch (event.type) {
443457
case "resizestart":
444-
this.previousW = this.w;
445-
this.previousH = this.h;
446-
var pos = this.calcPosition(this.x, this.y, this.w, this.h);
458+
this.previousW = this.innerW;
459+
this.previousH = this.innerH;
460+
var pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH);
447461
newSize.width = pos.width;
448462
newSize.height = pos.height;
449463
this.resizing = newSize;
@@ -463,8 +477,8 @@
463477
this.resizing = newSize;
464478
break;
465479
case "resizeend":
466-
//console.log("### resize end => x=" +this.x + " y=" + this.y + " w=" + this.w + " h=" + this.h);
467-
var pos = this.calcPosition(this.x, this.y, this.w, this.h);
480+
//console.log("### resize end => x=" +this.innerX + " y=" + this.innerY + " w=" + this.innerW + " h=" + this.innerH);
481+
var pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH);
468482
newSize.width = pos.width;
469483
newSize.height = pos.height;
470484
// console.log("### resize end => " + JSON.stringify(newSize));
@@ -498,13 +512,13 @@
498512
this.lastW = x;
499513
this.lastH = y;
500514
501-
if (this.w !== pos.w || this.h !== pos.h) {
515+
if (this.innerW !== pos.w || this.innerH !== pos.h) {
502516
this.$emit("resize", this.i, pos.h, pos.w);
503517
}
504-
if (event.type === "resizeend" && (this.previousW !== this.w || this.previousH !== this.h)) {
518+
if (event.type === "resizeend" && (this.previousW !== this.innerW || this.previousH !== this.innerH)) {
505519
this.$emit("resized", this.i, pos.h, pos.w, newSize.height, newSize.width);
506520
}
507-
this.eventBus.$emit("resizeEvent", event.type, this.i, this.x, this.y, pos.h, pos.w);
521+
this.eventBus.$emit("resizeEvent", event.type, this.i, this.innerX, this.innerY, pos.h, pos.w);
508522
},
509523
handleDrag(event) {
510524
if (this.isResizing) return;
@@ -519,8 +533,8 @@
519533
const newPosition = {top: 0, left: 0};
520534
switch (event.type) {
521535
case "dragstart":
522-
this.previousX = this.x;
523-
this.previousY = this.y;
536+
this.previousX = this.innerX;
537+
this.previousY = this.innerY;
524538
525539
var parentRect = event.target.offsetParent.getBoundingClientRect();
526540
var clientRect = event.target.getBoundingClientRect();
@@ -576,13 +590,13 @@
576590
this.lastX = x;
577591
this.lastY = y;
578592
579-
if (this.x !== pos.x || this.y !== pos.y) {
593+
if (this.innerX !== pos.x || this.innerY !== pos.y) {
580594
this.$emit("move", this.i, pos.x, pos.y);
581595
}
582-
if (event.type === "dragend" && (this.previousX !== this.x || this.previousY !== this.y)) {
596+
if (event.type === "dragend" && (this.previousX !== this.innerX || this.previousY !== this.innerY)) {
583597
this.$emit("moved", this.i, pos.x, pos.y);
584598
}
585-
this.eventBus.$emit("dragEvent", event.type, this.i, pos.x, pos.y, this.h, this.w);
599+
this.eventBus.$emit("dragEvent", event.type, this.i, pos.x, pos.y, this.innerH, this.innerW);
586600
},
587601
calcPosition: function (x, y, w, h) {
588602
const colWidth = this.calcColWidth();
@@ -633,15 +647,15 @@
633647
let y = Math.round((top - this.margin[1]) / (this.rowHeight + this.margin[1]));
634648
635649
// Capping
636-
x = Math.max(Math.min(x, this.cols - this.w), 0);
637-
y = Math.max(Math.min(y, this.maxRows - this.h), 0);
650+
x = Math.max(Math.min(x, this.cols - this.innerW), 0);
651+
y = Math.max(Math.min(y, this.maxRows - this.innerH), 0);
638652
639653
return {x, y};
640654
},
641655
// Helper for generating column width
642656
calcColWidth() {
643657
var colWidth = (this.containerWidth - (this.margin[0] * (this.cols + 1))) / this.cols;
644-
// console.log("### COLS=" + this.cols + " COL WIDTH=" + colWidth);
658+
// console.log("### COLS=" + this.cols + " COL WIDTH=" + colWidth + " MARGIN " + this.margin[0]);
645659
return colWidth;
646660
},
647661
@@ -661,8 +675,8 @@
661675
let h = Math.round((height + this.margin[1]) / (this.rowHeight + this.margin[1]));
662676
663677
// Capping
664-
w = Math.max(Math.min(w, this.cols - this.x), 0);
665-
h = Math.max(Math.min(h, this.maxRows - this.y), 0);
678+
w = Math.max(Math.min(w, this.cols - this.innerX), 0);
679+
h = Math.max(Math.min(h, this.maxRows - this.innerY), 0);
666680
return {w, h};
667681
},
668682
updateWidth: function (width, colNum) {

‎src/GridLayout.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,9 @@
175175
layout: function () {
176176
this.layoutUpdate();
177177
},
178+
colNum: function (val) {
179+
this.eventBus.$emit("setColNum", val);
180+
},
178181
rowHeight: function() {
179182
this.eventBus.$emit("setRowHeight", this.rowHeight);
180183
},

0 commit comments

Comments
 (0)