@tft/interact 12.5.0 → 12.5.1

package/bundles/tft-interact.umd.js

@@ -419,7 +419,7 @@
             if (interactableId === void 0) { interactableId = null; }
             var registryId = customRegistryId || DEFAULT_REGISTRY_ID;
             // if we pass an id to createInteractableId then it is used when creating the interactable
-            // and returned, otherwise a an id is created for the draggable.
+            // and returned, otherwise a new id is created for the draggable.
             var key = this.createInteractableId(interactableId);
             if (!Object.prototype.hasOwnProperty.call(this.dragRegistrySystem, registryId)) {
                 this.dragRegistrySystem[registryId] = {};
@@ -430,6 +430,11 @@
         InteractService.prototype.destroyInteractable = function (interactableId, registryId) {
             if (registryId === void 0) { registryId = DEFAULT_REGISTRY_ID; }
             if (this.dragRegistrySystem[registryId][interactableId]) {
+                // unsubscribe from all the subscriptions if they're subscriptions
+                for (var propName in this.dragRegistrySystem[registryId][interactableId]) {
+                    var prop = this.dragRegistrySystem[registryId][interactableId][propName];
+                    prop === null || prop === void 0 ? void 0 : prop.unsubscribe();
+                }
                 delete this.dragRegistrySystem[registryId][interactableId];
             }
         };
@@ -450,8 +455,8 @@
                 // startWith({...initialSize, ...initialDelta}),
                 operators.shareReplay(1), 
                 // filter(resizeEvent => !!resizeEvent.targetElement),
-                operators.tap(function (_c) {
-                    var deltaX = _c.deltaX, deltaY = _c.deltaY, width = _c.width, height = _c.height, targetElement = _c.targetElement;
+                operators.tap(function (_a) {
+                    var deltaX = _a.deltaX, deltaY = _a.deltaY, width = _a.width, height = _a.height, targetElement = _a.targetElement;
                     _this.ngZone.runOutsideAngular(function () {
                         _this.setElementSize(width, height, targetElement);
                     });
@@ -470,8 +475,8 @@
                         _this.setElementTransform(position.x, position.y, position);
                     });
                 }))
-            ]).pipe(operators.shareReplay(1), operators.map(function (_c) {
-                var _d = __read(_c, 3), size = _d[0], deltas = _d[1], position = _d[2];
+            ]).pipe(operators.shareReplay(1), operators.map(function (_a) {
+                var _b = __read(_a, 3), size = _b[0], deltas = _b[1], position = _b[2];
                 return {
                     x: position.x,
                     y: position.y,
@@ -501,20 +506,20 @@
             if (registryId === void 0) { registryId = DEFAULT_REGISTRY_ID; }
             return this.dragRegistrySystem[registryId][interactableId].interactable$;
         };
-        InteractService.prototype.updateDeltas = function (interactId, registryId, _c, targetElement) {
-            var deltaX = _c.deltaX, deltaY = _c.deltaY;
+        InteractService.prototype.updateDeltas = function (interactId, registryId, _a, targetElement) {
+            var deltaX = _a.deltaX, deltaY = _a.deltaY;
             if (!this.interactableExistOnRegistry(interactId, registryId))
                 return;
             this.dragRegistrySystem[registryId][interactId].deltas$.next({ deltaX: deltaX, deltaY: deltaY, targetElement: targetElement });
         };
-        InteractService.prototype.updatePosition = function (interactId, registryId, _c, targetElement) {
-            var x = _c.x, y = _c.y;
+        InteractService.prototype.updatePosition = function (interactId, registryId, _a, targetElement) {
+            var x = _a.x, y = _a.y;
             if (!this.interactableExistOnRegistry(interactId, registryId))
                 return;
             this.dragRegistrySystem[registryId][interactId].position$.next({ x: x, y: y, targetElement: targetElement });
         };
-        InteractService.prototype.updateSize = function (interactId, registryId, _c, targetElement) {
-            var deltaX = _c.deltaX, deltaY = _c.deltaY, width = _c.width, height = _c.height;
+        InteractService.prototype.updateSize = function (interactId, registryId, _a, targetElement) {
+            var deltaX = _a.deltaX, deltaY = _a.deltaY, width = _a.width, height = _a.height;
             if (!this.interactableExistOnRegistry(interactId, registryId))
                 return;
             this.dragRegistrySystem[registryId][interactId].size$.next({ deltaX: deltaX, deltaY: deltaY, width: width, height: height, targetElement: targetElement });
@@ -531,21 +536,10 @@
          * @param target the element to transform
          */
         InteractService.prototype.setElementSize = function (width, height, target) {
-            var _a;
             if (!target)
                 return;
-            var accountForScaleDirective = (_a = target.resizeRef) === null || _a === void 0 ? void 0 : _a.account_for_scale_dir;
-            if (accountForScaleDirective) {
-                var scale = accountForScaleDirective.scale;
-                var scaledWidth = width / scale;
-                var scaledHeight = height / scale;
-                this.renderer.setStyle(target, 'width', "" + scaledWidth + this.cssUnit);
-                this.renderer.setStyle(target, 'height', "" + scaledHeight + this.cssUnit);
-            }
-            else {
-                this.renderer.setStyle(target, 'width', "" + width + this.cssUnit);
-                this.renderer.setStyle(target, 'height', "" + height + this.cssUnit);
-            }
+            this.renderer.setStyle(target, 'width', "" + width + this.cssUnit);
+            this.renderer.setStyle(target, 'height', "" + height + this.cssUnit);
         };
         /**
          * Uses renderer to set position of angular component
@@ -554,20 +548,10 @@
          * @param target the element to transform
          */
         InteractService.prototype.setElementTransform = function (x, y, position) {
-            var _a, _b;
             if (!(position === null || position === void 0 ? void 0 : position.targetElement))
                 return;
-            var dragRef = (_a = position.targetElement) === null || _a === void 0 ? void 0 : _a.dragRef;
-            var accountForScaleDirective = (dragRef === null || dragRef === void 0 ? void 0 : dragRef.account_for_scale_dir) || ((_b = dragRef === null || dragRef === void 0 ? void 0 : dragRef.dragRoot) === null || _b === void 0 ? void 0 : _b.account_for_scale_dir);
-            if (accountForScaleDirective) {
-                var scale = accountForScaleDirective.scale;
-                this.renderer.setStyle(position.targetElement, 'left', "" + x / scale + this.cssUnit);
-                this.renderer.setStyle(position.targetElement, 'top', "" + y / scale + this.cssUnit);
-            }
-            else {
-                this.renderer.setStyle(position.targetElement, 'left', "" + x + this.cssUnit);
-                this.renderer.setStyle(position.targetElement, 'top', "" + y + this.cssUnit);
-            }
+            this.renderer.setStyle(position.targetElement, 'left', "" + x + this.cssUnit);
+            this.renderer.setStyle(position.targetElement, 'top', "" + y + this.cssUnit);
         };
         /**
          * Generates a translate string for the x and y arguments passed to
@@ -644,6 +628,14 @@
             this.dragLeave = new i0.EventEmitter();
             this.dragDrop = new i0.EventEmitter();
         }
+        Object.defineProperty(DropzoneDirective.prototype, "scale", {
+            get: function () {
+                var _a;
+                return (_a = this.account_for_scale_dir) === null || _a === void 0 ? void 0 : _a.scale;
+            },
+            enumerable: false,
+            configurable: true
+        });
         DropzoneDirective.prototype.ngOnInit = function () {
             // connects
             this.dropzone = this.connectDropzoneEvents(this.el.nativeElement, this.dropzoneConfig);
@@ -687,10 +679,10 @@
          * @param event the drop event emitted by interact, extended with extra fields we added to
          */
         DropzoneDirective.prototype.mapDropzoneEvent = function (event) {
-            var _a, _b, _c;
+            var _a, _b;
             var zoneElement = event.target;
             var dragElement = (_b = (_a = event.relatedTarget) === null || _a === void 0 ? void 0 : _a.dragRef) === null || _b === void 0 ? void 0 : _b.previewRef;
-            var scale = ((_c = this.account_for_scale_dir) === null || _c === void 0 ? void 0 : _c.scale) || null;
+            var scale = this.scale;
             var positionInDropTarget = zoneElement && dragElement
                 ? this.interactService.calculatePositionInElement(zoneElement, dragElement, scale)
                 : null;
@@ -812,7 +804,6 @@
     /** @dynamic */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var DraggableDirective = /** @class */ (function () {
-        // cache holding element to use as placeholder while dragging
         function DraggableDirective(el, interactService, renderer, _viewContainerRef, _document, account_for_scale_dir, dropzone_dir, drag_root_dir) {
             this.el = el;
             this.interactService = interactService;
@@ -837,6 +828,15 @@
             this.dragInertiaStart = new i0.EventEmitter();
             this.dragEnd = new i0.EventEmitter();
         }
+        Object.defineProperty(DraggableDirective.prototype, "scale", {
+            // check all the different places for scale
+            get: function () {
+                var _a, _b, _c, _d;
+                return ((_a = this.account_for_scale_dir) === null || _a === void 0 ? void 0 : _a.scale) || ((_b = this.drag_root_dir) === null || _b === void 0 ? void 0 : _b.account_for_scale_dir.scale) || ((_d = (_c = this.dragRoot) === null || _c === void 0 ? void 0 : _c.account_for_scale_dir) === null || _d === void 0 ? void 0 : _d.scale);
+            },
+            enumerable: false,
+            configurable: true
+        });
         DraggableDirective.prototype.ngOnInit = function () {
             var _this = this;
             var _a, _b, _c, _d, _e;
@@ -895,7 +895,10 @@
         };
         DraggableDirective.prototype.dragMoveListener = function (event, element) {
             var dx = event.dx, dy = event.dy;
-            this.interactService.updateDeltas(this.interactableId, this.registryId, { deltaX: dx, deltaY: dy }, element);
+            var scale = this.scale;
+            var deltaX = scale ? dx / scale : dx;
+            var deltaY = scale ? dy / scale : dy;
+            this.interactService.updateDeltas(this.interactableId, this.registryId, { deltaX: deltaX, deltaY: deltaY }, element);
         };
         DraggableDirective.prototype.setDragStyles = function (dragElement) {
             this.renderer.setStyle(dragElement, 'touchAction', 'none');
@@ -911,8 +914,9 @@
             var _a;
             var target = event.target, dropzone = event.dropzone;
             var dropzoneElement = (dropzone === null || dropzone === void 0 ? void 0 : dropzone.target) || ((_a = target.dropTarget) === null || _a === void 0 ? void 0 : _a.el.nativeElement);
+            var scale = this.scale;
             var positionInDropTarget = target && dropzoneElement
-                ? this.interactService.calculatePositionInElement(dropzoneElement, this.previewRef)
+                ? this.interactService.calculatePositionInElement(dropzoneElement, this.previewRef, scale)
                 : null;
             return {
                 interactEvent: event,
@@ -943,6 +947,7 @@
             var _this = this;
             return interact__default['default'](nativeElement).draggable(Object.assign(Object.assign({}, dragConfig), { enabled: !(this.disabled || this.dragDisabled) }))
                 .on('dragstart', function (event) {
+                var _a, _b, _c;
                 var interaction = event.interaction;
                 // check if we should append drag element to body
                 if (_this.enableDragDefault
@@ -961,7 +966,8 @@
                     _this.addDragPropertiesToElement(_this.previewRef);
                     _this.setDragStyles(_this.previewRef);
                     _this.dragRootEl.prepend(_this.previewRef);
-                    var _f = _this.interactService.calculatePositionInElement(_this.dragRootEl, nativeElement), x = _f.x, y = _f.y;
+                    var scale = ((_a = _this.account_for_scale_dir) === null || _a === void 0 ? void 0 : _a.scale) || ((_c = (_b = _this.dragRoot) === null || _b === void 0 ? void 0 : _b.account_for_scale_dir) === null || _c === void 0 ? void 0 : _c.scale) || 1;
+                    var _f = _this.interactService.calculatePositionInElement(_this.dragRootEl, nativeElement, scale), x = _f.x, y = _f.y;
                     _this.interactService.updatePosition(_this.interactableId, _this.registryId, { x: x, y: y }, _this.previewRef);
                     if (!_this.showPlaceholder) {
                         _this.renderer.setStyle(_this.el.nativeElement, 'display', 'none');
@@ -1065,6 +1071,7 @@
             this._document = _document;
             this.interactService = interactService;
             this.renderer = renderer;
+            this.drag_root_dir = drag_root_dir;
             this.account_for_scale_dir = account_for_scale_dir;
             this.draggable_dir = draggable_dir;
             this.dropzone_dir = dropzone_dir;
@@ -1079,8 +1086,16 @@
             this.defaultConfig = {
                 edges: { left: true, right: true, bottom: true, top: true }
             };
-            this.dragRoot = ((_a = drag_root_dir === null || drag_root_dir === void 0 ? void 0 : drag_root_dir.el) === null || _a === void 0 ? void 0 : _a.nativeElement) || this._document.body;
+            this.dragRootEl = ((_a = drag_root_dir === null || drag_root_dir === void 0 ? void 0 : drag_root_dir.el) === null || _a === void 0 ? void 0 : _a.nativeElement) || this._document.body;
         }
+        Object.defineProperty(ResizableDirective.prototype, "scale", {
+            get: function () {
+                var _a, _b;
+                return ((_a = this.account_for_scale_dir) === null || _a === void 0 ? void 0 : _a.scale) || ((_b = this.drag_root_dir) === null || _b === void 0 ? void 0 : _b.account_for_scale_dir.scale);
+            },
+            enumerable: false,
+            configurable: true
+        });
         ResizableDirective.prototype.ngOnInit = function () {
             var _a, _b;
             this.addResizePropertiesToElement(this.el.nativeElement);
@@ -1108,9 +1123,23 @@
             this.interactService.destroyInteractable(this.interactableId, this.registryId);
         };
         ResizableDirective.prototype.resizeListener = function (event) {
-            var deltaX = event.deltaRect.left;
-            var deltaY = event.deltaRect.top;
-            var _c = event.rect, width = _c.width, height = _c.height;
+            var scale = this.scale;
+            var deltaX;
+            var deltaY;
+            var height;
+            var width;
+            if (scale) {
+                deltaX = event.deltaRect.left / scale;
+                deltaY = event.deltaRect.top / scale;
+                height = event.rect.height / scale;
+                width = event.rect.width / scale;
+            }
+            else {
+                deltaX = event.deltaRect.left;
+                deltaY = event.deltaRect.top;
+                width = event.rect.width;
+                height = event.rect.height;
+            }
             this.interactService.updateSize(this.interactableId, this.registryId, { deltaX: deltaX, deltaY: deltaY, width: width, height: height }, this.el.nativeElement);
         };
         /**
@@ -1138,16 +1167,16 @@
                 .on('resizeend', function (event) { return _this.resizeEnd.emit(_this.mapResizeEvent(event)); });
         };
         ResizableDirective.prototype.mapResizeEvent = function (event) {
-            var _a, _b;
+            var _a, _b, _c, _d, _e;
             var target = event.target;
             var relatedTarget = (_b = (_a = this.draggable_dir) === null || _a === void 0 ? void 0 : _a.dropzone_dir) === null || _b === void 0 ? void 0 : _b.el.nativeElement;
+            var scale = ((_c = this.account_for_scale_dir) === null || _c === void 0 ? void 0 : _c.scale) || ((_e = (_d = this.drag_root_dir) === null || _d === void 0 ? void 0 : _d.account_for_scale_dir) === null || _e === void 0 ? void 0 : _e.scale) || 1;
             var positionInDropTarget = target && relatedTarget
-                ? this.interactService.calculatePositionInElement(relatedTarget, target)
+                ? this.interactService.calculatePositionInElement(relatedTarget, target, scale)
                 : null;
             return {
                 interactEvent: event,
                 resizeRef: this,
-                // should I remove this?
                 dragRef: this.draggable_dir,
                 dragOrigin: this.dropzone_dir,
                 dropTarget: this.el.nativeElement.dropTarget,