|
1 | 1 | <template> |
2 | 2 | <div v-el:item |
3 | 3 | class="vue-grid-item" |
4 | | - :class="{ 'vue-resizable' : isResizable, 'vue-draggable-dragging' : isDragging, 'cssTransforms' : useCssTransforms }" |
| 4 | + :class="{ 'vue-resizable' : isResizable, 'resizing' : isResizing, 'vue-draggable-dragging' : isDragging, 'cssTransforms' : useCssTransforms }" |
5 | 5 | :style="style" |
6 | 6 | > |
7 | 7 | <slot></slot> |
8 | | - <!--span class="text">{{id}}</span--> |
9 | | - <!--<span class="text">{{i}}</span>--> |
10 | | - <!--<pre> |
11 | | - x: {{ x | json}} |
12 | | - y: {{ y | json}} |
13 | | - w: {{ w | json}} |
14 | | - h: {{ h | json}} |
15 | | - </pre>--> |
16 | | - <span v-if="isResizable" v-el:handle class="vue-resizable-handle"></span> |
17 | | - </div> |
| 8 | + <!--<pre> |
| 9 | + x: {{ x | json}} |
| 10 | + y: {{ y | json}} |
| 11 | + w: {{ w | json}} |
| 12 | + h: {{ h | json}} |
| 13 | + </pre>--> |
| 14 | + <span v-if="isResizable" v-el:handle class="vue-resizable-handle"></span> |
18 | 15 | </div> |
19 | 16 | </template> |
20 | 17 | <style> |
|
26 | 23 | transition-property: transform; |
27 | 24 | } |
28 | 25 | .vue-grid-item.resizing { |
29 | | - z-index: 1; |
| 26 | + opacity: 0.6; |
| 27 | + z-index: 3; |
30 | 28 | } |
31 | 29 |
|
32 | 30 | .vue-grid-item.vue-draggable-dragging { |
|
91 | 89 | type: Number, |
92 | 90 | required: true |
93 | 91 | }, |
| 92 | + isDraggable: { |
| 93 | + type: Boolean, |
| 94 | + required: true |
| 95 | + }, |
| 96 | + isResizable: { |
| 97 | + type: Boolean, |
| 98 | + required: true |
| 99 | + }, |
| 100 | + useCssTransforms: { |
| 101 | + type: Boolean, |
| 102 | + required: true |
| 103 | + }, |
| 104 | + static: { |
| 105 | + type: Boolean, |
| 106 | + required: false, |
| 107 | + default: false |
| 108 | + }, |
| 109 | + */ |
94 | 110 | minH: { |
95 | 111 | type: Number, |
96 | 112 | required: false, |
|
111 | 127 | required: false, |
112 | 128 | default: Infinity |
113 | 129 | }, |
114 | | - isDraggable: { |
115 | | - type: Boolean, |
116 | | - required: true |
117 | | - }, |
118 | | - isResizable: { |
119 | | - type: Boolean, |
120 | | - required: true |
121 | | - }, |
122 | | - useCssTransforms: { |
123 | | - type: Boolean, |
124 | | - required: true |
125 | | - },*/ |
126 | | - static: { |
127 | | - type: Boolean, |
128 | | - required: false, |
129 | | - default: false |
130 | | - }, |
131 | 130 | x: { |
132 | 131 | type: Number, |
133 | 132 | required: true |
|
155 | 154 | rowHeight: 30, |
156 | 155 | margin: [10, 10], |
157 | 156 | maxRows: Infinity, |
158 | | - minH: 1, |
159 | | - minW: 1, |
160 | | - maxH: Infinity, |
161 | | - maxW: Infinity, |
162 | 157 | isDraggable: true, |
163 | 158 | isResizable: true, |
164 | 159 | useCssTransforms: true, |
|
171 | 166 | lastY: NaN, |
172 | 167 | lastW: NaN, |
173 | 168 | lastH: NaN, |
174 | | - className: "", |
175 | | - style: "" |
| 169 | + style: {} |
176 | 170 | } |
177 | 171 | }, |
178 | 172 | ready: function() { |
179 | 173 | this.cols = this.$parent.colNum; |
180 | 174 | this.rowHeight = this.$parent.rowHeight; |
181 | 175 | this.margin = this.$parent.margin; |
182 | 176 | this.maxRows = this.$parent.maxRows; |
183 | | - this.minH = this.$parent.minH; |
184 | | - this.minW = this.$parent.minW; |
185 | | - this.maxH = this.$parent.maxH; |
186 | | - this.maxW = this.$parent.maxW; |
187 | 177 | this.isDraggable = this.$parent.isDraggable; |
188 | 178 | this.isResizable = this.$parent.isResizable; |
189 | 179 | this.useCssTransforms = this.$parent.useCssTransforms; |
|
247 | 237 | // var pos = this.calcPosition(x, y, w, h); |
248 | 238 | var pos = this.calcPosition(this.x, this.y, this.w, this.h); |
249 | 239 |
|
| 240 | + if (this.isDragging) { |
| 241 | + pos.top = this.dragging.top; |
| 242 | + pos.left = this.dragging.left; |
| 243 | + } |
| 244 | + if (this.isResizing) { |
| 245 | + pos.width = this.resizing.width; |
| 246 | + pos.height = this.resizing.height; |
| 247 | + } |
| 248 | +
|
250 | 249 | //const {usePercentages, containerWidth, useCssTransforms} = this.props; |
251 | 250 |
|
252 | 251 | let style; |
|
258 | 257 | else { |
259 | 258 | style = setTopLeft(pos.top, pos.left, pos.width, pos.height); |
260 | 259 | } |
| 260 | +/* |
| 261 | + if (this.isDragging || this.isResizing) { |
| 262 | + style["z-index"] = 3; |
| 263 | + } |
| 264 | +*/ |
| 265 | +// this.style = createMarkup(style); |
| 266 | + this.style = style; |
261 | 267 |
|
262 | | - this.style = createMarkup(style); |
263 | 268 | }, |
264 | 269 | handleResize: function(event) { |
265 | 270 | const position = getControlPosition(event); |
|
276 | 281 | this.resizing = newSize; |
277 | 282 | this.isResizing = true; |
278 | 283 | break; |
279 | | - case "resizeend": |
280 | | - //console.log("### resize end => x=" +this.x + " y=" + this.y + " w=" + this.w + " h=" + this.h); |
281 | | - var pos = this.calcPosition(this.x, this.y, this.w, this.h); |
282 | | - newSize.width = pos.width; |
283 | | - newSize.height = pos.height; |
284 | | -// console.log("### resize end => " + JSON.stringify(newSize)); |
285 | | - this.resizing = null; |
286 | | - this.isResizing = false; |
287 | | - break; |
288 | 284 | case "resizemove": |
289 | 285 | // console.log("### resize => " + event.type + ", lastW=" + this.lastW + ", lastH=" + this.lastH); |
290 | 286 | const coreEvent = createCoreData(this.lastW, this.lastH, x, y); |
|
295 | 291 | ///console.log("### resize => " + event.type + ", deltaX=" + coreEvent.deltaX + ", deltaY=" + coreEvent.deltaY); |
296 | 292 | this.resizing = newSize; |
297 | 293 | break; |
| 294 | + case "resizeend": |
| 295 | + //console.log("### resize end => x=" +this.x + " y=" + this.y + " w=" + this.w + " h=" + this.h); |
| 296 | + var pos = this.calcPosition(this.x, this.y, this.w, this.h); |
| 297 | + newSize.width = pos.width; |
| 298 | + newSize.height = pos.height; |
| 299 | +// console.log("### resize end => " + JSON.stringify(newSize)); |
| 300 | + this.resizing = null; |
| 301 | + this.isResizing = false; |
| 302 | + break; |
298 | 303 | } |
| 304 | +
|
299 | 305 | // Get new WH |
300 | 306 | var pos = this.calcWH(newSize.height, newSize.width); |
| 307 | + if (pos.w < this.minW) { |
| 308 | + pos.w = this.minW; |
| 309 | + } |
| 310 | + if (pos.w > this.maxW) { |
| 311 | + pos.w = this.maxW; |
| 312 | + } |
| 313 | + if (pos.h < this.minH) { |
| 314 | + pos.h = this.minH; |
| 315 | + } |
| 316 | + if (pos.h > this.maxH) { |
| 317 | + pos.h = this.maxH; |
| 318 | + } |
| 319 | +
|
301 | 320 | if (pos.h >= 1) { |
302 | 321 | this.h = pos.h; |
303 | 322 | } else { |
|
312 | 331 | this.lastW = x; |
313 | 332 | this.lastH = y; |
314 | 333 |
|
315 | | - this.$dispatch("resizeEvent", event.type, this.i, this.h, this.w); |
| 334 | + this.$dispatch("resizeEvent", event.type, this.i, this.x, this.y, this.h, this.w); |
316 | 335 | }, |
317 | 336 | handleDrag(event) { |
318 | 337 | if (this.isResizing) return; |
|
366 | 385 | this.lastX = x; |
367 | 386 | this.lastY = y; |
368 | 387 |
|
369 | | - this.$dispatch("dragEvent", event.type, this.i, this.x, this.y); |
| 388 | + this.$dispatch("dragEvent", event.type, this.i, this.x, this.y, this.w, this.h); |
370 | 389 | }, |
371 | 390 | calcPosition: function(x, y, w, h) { |
372 | 391 | const colWidth = this.calcColWidth(); |
|
445 | 464 | }, |
446 | 465 | compact: function(layout) { |
447 | 466 | var l = getLayoutItem(layout, this.i); |
448 | | - this.x = l.x; |
449 | | - this.y = l.y; |
450 | | - this.h = l.h; |
451 | | - this.w = l.w; |
| 467 | + if (l !== undefined && l !== null) { |
| 468 | + this.x = l.x; |
| 469 | + this.y = l.y; |
| 470 | + this.h = l.h; |
| 471 | + this.w = l.w; |
| 472 | + } |
| 473 | + this.createStyle(); |
452 | 474 | } |
453 | 475 | } |
454 | 476 | } |
|
0 commit comments