|
229 | 229 | maxRows: Infinity, |
230 | 230 | draggable: null, |
231 | 231 | resizable: null, |
| 232 | + transformScale: 1, |
232 | 233 | useCssTransforms: true, |
233 | 234 | useStyleCursor: true, |
234 | 235 |
|
|
279 | 280 | self.resizable = isResizable; |
280 | 281 | } |
281 | 282 | }; |
| 283 | +
|
282 | 284 | self.setBoundedHandler = function (isBounded) { |
283 | 285 | if (self.isBounded === null) { |
284 | 286 | self.bounded = isBounded; |
285 | 287 | } |
286 | 288 | }; |
| 289 | +
|
| 290 | + self.setTransformScaleHandler = function (transformScale) { |
| 291 | + self.transformScale = transformScale |
| 292 | + }; |
| 293 | +
|
287 | 294 | self.setRowHeightHandler = function (rowHeight) { |
288 | 295 | self.rowHeight = rowHeight; |
289 | 296 | }; |
|
306 | 313 | this.eventBus.$on('setDraggable', self.setDraggableHandler); |
307 | 314 | this.eventBus.$on('setResizable', self.setResizableHandler); |
308 | 315 | this.eventBus.$on('setBounded', self.setBoundedHandler); |
| 316 | + this.eventBus.$on('setTransformScale', self.setTransformScaleHandler) |
309 | 317 | this.eventBus.$on('setRowHeight', self.setRowHeightHandler); |
310 | 318 | this.eventBus.$on('setMaxRows', self.setMaxRowsHandler); |
311 | 319 | this.eventBus.$on('directionchange', self.directionchangeHandler); |
|
321 | 329 | this.eventBus.$off('setDraggable', self.setDraggableHandler); |
322 | 330 | this.eventBus.$off('setResizable', self.setResizableHandler); |
323 | 331 | this.eventBus.$off('setBounded', self.setBoundedHandler); |
| 332 | + this.eventBus.$off('setTransformScale', self.setTransformScaleHandler) |
324 | 333 | this.eventBus.$off('setRowHeight', self.setRowHeightHandler); |
325 | 334 | this.eventBus.$off('setMaxRows', self.setMaxRowsHandler); |
326 | 335 | this.eventBus.$off('directionchange', self.directionchangeHandler); |
|
355 | 364 | } else { |
356 | 365 | this.bounded = this.isBounded; |
357 | 366 | } |
| 367 | + this.transformScale = this.layout.transformScale |
358 | 368 | this.useCssTransforms = this.layout.useCssTransforms; |
359 | 369 | this.useStyleCursor = this.layout.useStyleCursor; |
360 | 370 | this.createStyle(); |
|
540 | 550 | let pos; |
541 | 551 | switch (event.type) { |
542 | 552 | case "resizestart": { |
| 553 | + this.tryMakeResizable() |
543 | 554 | this.previousW = this.innerW; |
544 | 555 | this.previousH = this.innerH; |
545 | 556 | pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH); |
|
553 | 564 | // console.log("### resize => " + event.type + ", lastW=" + this.lastW + ", lastH=" + this.lastH); |
554 | 565 | const coreEvent = createCoreData(this.lastW, this.lastH, x, y); |
555 | 566 | if (this.renderRtl) { |
556 | | - newSize.width = this.resizing.width - coreEvent.deltaX; |
| 567 | + newSize.width = this.resizing.width - coreEvent.deltaX / this.transformScale; |
557 | 568 | } else { |
558 | | - newSize.width = this.resizing.width + coreEvent.deltaX; |
| 569 | + newSize.width = this.resizing.width + coreEvent.deltaX / this.transformScale; |
559 | 570 | } |
560 | | - newSize.height = this.resizing.height + coreEvent.deltaY; |
| 571 | + newSize.height = this.resizing.height + coreEvent.deltaY / this.transformScale; |
561 | 572 |
|
562 | 573 | ///console.log("### resize => " + event.type + ", deltaX=" + coreEvent.deltaX + ", deltaY=" + coreEvent.deltaY); |
563 | 574 | this.resizing = newSize; |
|
627 | 638 |
|
628 | 639 | let parentRect = event.target.offsetParent.getBoundingClientRect(); |
629 | 640 | let clientRect = event.target.getBoundingClientRect(); |
| 641 | +
|
| 642 | + const cLeft = clientRect.left / this.transformScale; |
| 643 | + const pLeft = parentRect.left / this.transformScale; |
| 644 | + const cRight = clientRect.right / this.transformScale; |
| 645 | + const pRight = parentRect.right / this.transformScale; |
| 646 | + const cTop = clientRect.top / this.transformScale; |
| 647 | + const pTop = parentRect.top / this.transformScale; |
| 648 | +
|
630 | 649 | if (this.renderRtl) { |
631 | | - newPosition.left = (clientRect.right - parentRect.right) * -1; |
| 650 | + newPosition.left = (cRight - pRight) * -1; |
632 | 651 | } else { |
633 | | - newPosition.left = clientRect.left - parentRect.left; |
| 652 | + newPosition.left = cLeft - pLeft; |
634 | 653 | } |
635 | | - newPosition.top = clientRect.top - parentRect.top; |
| 654 | + newPosition.top = cTop - pTop; |
636 | 655 | this.dragging = newPosition; |
637 | 656 | this.isDragging = true; |
638 | 657 | break; |
|
641 | 660 | if (!this.isDragging) return; |
642 | 661 | let parentRect = event.target.offsetParent.getBoundingClientRect(); |
643 | 662 | let clientRect = event.target.getBoundingClientRect(); |
| 663 | +
|
| 664 | + const cLeft = clientRect.left / this.transformScale; |
| 665 | + const pLeft = parentRect.left / this.transformScale; |
| 666 | + const cRight = clientRect.right / this.transformScale; |
| 667 | + const pRight = parentRect.right / this.transformScale; |
| 668 | + const cTop = clientRect.top / this.transformScale; |
| 669 | + const pTop = parentRect.top / this.transformScale; |
| 670 | +
|
644 | 671 | // Add rtl support |
645 | 672 | if (this.renderRtl) { |
646 | | - newPosition.left = (clientRect.right - parentRect.right) * -1; |
| 673 | + newPosition.left = (cRight - pRight) * -1; |
647 | 674 | } else { |
648 | | - newPosition.left = clientRect.left - parentRect.left; |
| 675 | + newPosition.left = cLeft - pLeft; |
649 | 676 | } |
650 | | - newPosition.top = clientRect.top - parentRect.top; |
| 677 | + newPosition.top = cTop - pTop; |
651 | 678 | // console.log("### drag end => " + JSON.stringify(newPosition)); |
652 | 679 | // console.log("### DROP: " + JSON.stringify(newPosition)); |
653 | 680 | this.dragging = null; |
|
659 | 686 | const coreEvent = createCoreData(this.lastX, this.lastY, x, y); |
660 | 687 | // Add rtl support |
661 | 688 | if (this.renderRtl) { |
662 | | - newPosition.left = this.dragging.left - coreEvent.deltaX; |
| 689 | + newPosition.left = this.dragging.left - coreEvent.deltaX / this.transformScale; |
663 | 690 | } else { |
664 | | - newPosition.left = this.dragging.left + coreEvent.deltaX; |
| 691 | + newPosition.left = this.dragging.left + coreEvent.deltaX / this.transformScale; |
665 | 692 | } |
666 | | - newPosition.top = this.dragging.top + coreEvent.deltaY; |
| 693 | + newPosition.top = this.dragging.top + coreEvent.deltaY / this.transformScale; |
667 | 694 | if(this.bounded){ |
668 | 695 | const bottomBoundary = event.target.offsetParent.clientHeight - this.calcGridItemWHPx(this.h, this.rowHeight, this.margin[1]); |
669 | 696 | newPosition.top = this.clamp(newPosition.top, 0, bottomBoundary); |
|
848 | 875 | } |
849 | 876 | } |
850 | 877 | if (this.resizable && !this.static) { |
851 | | - let maximum = this.calcPosition(0,0,this.maxW, this.maxH); |
| 878 | + let maximum = this.calcPosition(0,0, this.maxW, this.maxH); |
852 | 879 | let minimum = this.calcPosition(0,0, this.minW, this.minH); |
853 | 880 |
|
854 | 881 | // console.log("### MAX " + JSON.stringify(maximum)); |
|
865 | 892 | ignoreFrom: this.resizeIgnoreFrom, |
866 | 893 | restrictSize: { |
867 | 894 | min: { |
868 | | - height: minimum.height, |
869 | | - width: minimum.width |
| 895 | + height: minimum.height * this.transformScale, |
| 896 | + width: minimum.width * this.transformScale |
870 | 897 | }, |
871 | 898 | max: { |
872 | | - height: maximum.height, |
873 | | - width: maximum.width |
| 899 | + height: maximum.height * this.transformScale, |
| 900 | + width: maximum.width * this.transformScale |
874 | 901 | } |
875 | 902 | }, |
876 | 903 | ...this.resizeOption, |
|
0 commit comments