Skip to content

Commit 33c5205

Browse files
gmsagmsa
authored
Merge pull request jbaysolutions#153 from ittus/feature/support-colNum-dynamic
Support colNum dynamic
2 parents 36954ab + d40b238 commit 33c5205

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
@@ -216,6 +216,10 @@
216216
previousH: null,
217217
previousX: null,
218218
previousY: null,
219+
innerX: this.x,
220+
innerY: this.y,
221+
innerW: this.w,
222+
innerH: this.h
219223
}
220224
},
221225
created () {
@@ -254,16 +258,18 @@
254258
this.compact();
255259
};
256260
261+
self.setColNum = (colNum) => {
262+
self.cols = parseInt(colNum);
263+
}
264+
257265
this.eventBus.$on('updateWidth', self.updateWidthHandler);
258266
this.eventBus.$on('compact', self.compactHandler);
259267
this.eventBus.$on('setDraggable', self.setDraggableHandler);
260268
this.eventBus.$on('setResizable', self.setResizableHandler);
261269
this.eventBus.$on('setRowHeight', self.setRowHeightHandler);
262270
this.eventBus.$on('directionchange', self.directionchangeHandler);
271+
this.eventBus.$on('setColNum', self.setColNum)
263272
264-
/*this.eventBus.$on('setColNum', function(colNum) {
265-
self.cols = colNum;
266-
});*/
267273
var direction = (document.dir !== undefined) ?
268274
document.dir :
269275
document.getElementsByTagName("html")[0].getAttribute("dir");
@@ -278,6 +284,7 @@
278284
this.eventBus.$off('setResizable', self.setResizableHandler);
279285
this.eventBus.$off('setRowHeight', self.setRowHeightHandler);
280286
this.eventBus.$off('directionchange', self.directionchangeHandler);
287+
this.eventBus.$off('setColNum', self.setColNum);
281288
},
282289
mounted: function () {
283290
this.cols = this.$parent.colNum;
@@ -345,7 +352,7 @@
345352
},
346353
ignoreFrom: this.resizeIgnoreFrom
347354
};
348-
355+
349356
this.interactObj.resizable(opts);
350357
if (!this.resizeEventSet) {
351358
this.resizeEventSet = true;
@@ -369,16 +376,20 @@
369376
containerWidth: function () {
370377
this.createStyle();
371378
},
372-
x: function () {
379+
x: function (newVal) {
380+
this.innerX = newVal;
373381
this.createStyle();
374382
},
375-
y: function () {
383+
y: function (newVal) {
384+
this.innerY = newVal;
376385
this.createStyle();
377386
},
378-
h: function () {
387+
h: function (newVal) {
388+
this.innerH = newVal
379389
this.createStyle();
380390
},
381-
w: function () {
391+
w: function (newVal) {
392+
this.innerW = newVal;
382393
this.createStyle();
383394
},
384395
renderRtl: function () {
@@ -400,11 +411,14 @@
400411
methods: {
401412
createStyle: function () {
402413
if (this.x + this.w > this.cols) {
403-
this.x = 0;
404-
this.w = this.cols;
414+
this.innerX = 0;
415+
this.innerW = (this.w > this.cols) ? this.cols : this.w
416+
} else {
417+
this.innerX = this.x;
418+
this.innerW = this.w;
405419
}
420+
var pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH);
406421
407-
var pos = this.calcPosition(this.x, this.y, this.w, this.h);
408422
409423
if (this.isDragging) {
410424
pos.top = this.dragging.top;
@@ -450,9 +464,9 @@
450464
const newSize = {width: 0, height: 0};
451465
switch (event.type) {
452466
case "resizestart":
453-
this.previousW = this.w;
454-
this.previousH = this.h;
455-
var pos = this.calcPosition(this.x, this.y, this.w, this.h);
467+
this.previousW = this.innerW;
468+
this.previousH = this.innerH;
469+
var pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH);
456470
newSize.width = pos.width;
457471
newSize.height = pos.height;
458472
this.resizing = newSize;
@@ -472,8 +486,8 @@
472486
this.resizing = newSize;
473487
break;
474488
case "resizeend":
475-
//console.log("### resize end => x=" +this.x + " y=" + this.y + " w=" + this.w + " h=" + this.h);
476-
var pos = this.calcPosition(this.x, this.y, this.w, this.h);
489+
//console.log("### resize end => x=" +this.innerX + " y=" + this.innerY + " w=" + this.innerW + " h=" + this.innerH);
490+
var pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH);
477491
newSize.width = pos.width;
478492
newSize.height = pos.height;
479493
// console.log("### resize end => " + JSON.stringify(newSize));
@@ -507,13 +521,13 @@
507521
this.lastW = x;
508522
this.lastH = y;
509523
510-
if (this.w !== pos.w || this.h !== pos.h) {
524+
if (this.innerW !== pos.w || this.innerH !== pos.h) {
511525
this.$emit("resize", this.i, pos.h, pos.w);
512526
}
513-
if (event.type === "resizeend" && (this.previousW !== this.w || this.previousH !== this.h)) {
527+
if (event.type === "resizeend" && (this.previousW !== this.innerW || this.previousH !== this.innerH)) {
514528
this.$emit("resized", this.i, pos.h, pos.w, newSize.height, newSize.width);
515529
}
516-
this.eventBus.$emit("resizeEvent", event.type, this.i, this.x, this.y, pos.h, pos.w);
530+
this.eventBus.$emit("resizeEvent", event.type, this.i, this.innerX, this.innerY, pos.h, pos.w);
517531
},
518532
handleDrag(event) {
519533
if (this.isResizing) return;
@@ -528,8 +542,8 @@
528542
const newPosition = {top: 0, left: 0};
529543
switch (event.type) {
530544
case "dragstart":
531-
this.previousX = this.x;
532-
this.previousY = this.y;
545+
this.previousX = this.innerX;
546+
this.previousY = this.innerY;
533547
534548
var parentRect = event.target.offsetParent.getBoundingClientRect();
535549
var clientRect = event.target.getBoundingClientRect();
@@ -585,13 +599,13 @@
585599
this.lastX = x;
586600
this.lastY = y;
587601
588-
if (this.x !== pos.x || this.y !== pos.y) {
602+
if (this.innerX !== pos.x || this.innerY !== pos.y) {
589603
this.$emit("move", this.i, pos.x, pos.y);
590604
}
591-
if (event.type === "dragend" && (this.previousX !== this.x || this.previousY !== this.y)) {
605+
if (event.type === "dragend" && (this.previousX !== this.innerX || this.previousY !== this.innerY)) {
592606
this.$emit("moved", this.i, pos.x, pos.y);
593607
}
594-
this.eventBus.$emit("dragEvent", event.type, this.i, pos.x, pos.y, this.h, this.w);
608+
this.eventBus.$emit("dragEvent", event.type, this.i, pos.x, pos.y, this.innerH, this.innerW);
595609
},
596610
calcPosition: function (x, y, w, h) {
597611
const colWidth = this.calcColWidth();
@@ -642,15 +656,15 @@
642656
let y = Math.round((top - this.margin[1]) / (this.rowHeight + this.margin[1]));
643657
644658
// Capping
645-
x = Math.max(Math.min(x, this.cols - this.w), 0);
646-
y = Math.max(Math.min(y, this.maxRows - this.h), 0);
659+
x = Math.max(Math.min(x, this.cols - this.innerW), 0);
660+
y = Math.max(Math.min(y, this.maxRows - this.innerH), 0);
647661
648662
return {x, y};
649663
},
650664
// Helper for generating column width
651665
calcColWidth() {
652666
var colWidth = (this.containerWidth - (this.margin[0] * (this.cols + 1))) / this.cols;
653-
// console.log("### COLS=" + this.cols + " COL WIDTH=" + colWidth);
667+
// console.log("### COLS=" + this.cols + " COL WIDTH=" + colWidth + " MARGIN " + this.margin[0]);
654668
return colWidth;
655669
},
656670
@@ -670,8 +684,8 @@
670684
let h = Math.round((height + this.margin[1]) / (this.rowHeight + this.margin[1]));
671685
672686
// Capping
673-
w = Math.max(Math.min(w, this.cols - this.x), 0);
674-
h = Math.max(Math.min(h, this.maxRows - this.y), 0);
687+
w = Math.max(Math.min(w, this.cols - this.innerX), 0);
688+
h = Math.max(Math.min(h, this.maxRows - this.innerY), 0);
675689
return {w, h};
676690
},
677691
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)