@tft/interact 12.4.3 → 12.5.3

package/bundles/tft-interact.umd.js

@@ -361,6 +361,7 @@
                 },] }
     ];
 
+    var INTERACT_ROOT_CONFIG = new i0.InjectionToken('INTERACT_ROOT_CONFIG_PARAMS');
     var DEFAULT_REGISTRY_ID = 'DEFAULT';
     /**
      * Default initial value for Delta BehaviorSubject
@@ -388,14 +389,17 @@
     };
 
     var InteractService = /** @class */ (function () {
-        function InteractService(rendererFactory, ngZone) {
+        function InteractService(rendererFactory, ngZone, rootConfig) {
             this.rendererFactory = rendererFactory;
             this.ngZone = ngZone;
+            this.rootConfig = rootConfig;
             this._interactableIndex = 0;
             this._dropzoneIndex = 0;
             // TODO: consider using Map here
             this.dragRegistrySystem = {};
+            this.cssUnit = 'px';
             this.renderer = this.rendererFactory.createRenderer(null, null);
+            this.cssUnit = (rootConfig === null || rootConfig === void 0 ? void 0 : rootConfig.cssDimensionUnit) || 'px';
         }
         InteractService.prototype.addDeltaToPosition = function (delta, position) {
             return {
@@ -415,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] = {};
@@ -425,7 +429,16 @@
         };
         InteractService.prototype.destroyInteractable = function (interactableId, registryId) {
             if (registryId === void 0) { registryId = DEFAULT_REGISTRY_ID; }
-            if (this.dragRegistrySystem[registryId][interactableId]) {
+            var interactableSystem = this.dragRegistrySystem[registryId][interactableId];
+            if (interactableSystem) {
+                // unsubscribe from all the subscriptions if they're subscriptions
+                for (var propName in interactableSystem) {
+                    var prop = interactableSystem[propName];
+                    if (prop.unsubscribe && typeof prop.unsubscribe === 'function') {
+                        prop.unsubscribe();
+                    }
+                    ;
+                }
                 delete this.dragRegistrySystem[registryId][interactableId];
             }
         };
@@ -446,8 +459,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);
                     });
@@ -466,8 +479,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,
@@ -497,28 +510,28 @@
             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 });
         };
         InteractService.prototype.interactableExistOnRegistry = function (interactId, registryId) {
             if (registryId === void 0) { registryId = DEFAULT_REGISTRY_ID; }
-            return this.dragRegistrySystem.hasOwnProperty(registryId)
-                && this.dragRegistrySystem[registryId].hasOwnProperty(interactId);
+            // eslint-disable-next-line no-prototype-builtins
+            return this.dragRegistrySystem.hasOwnProperty(registryId) && this.dragRegistrySystem[registryId].hasOwnProperty(interactId);
         };
         /**
          * Uses renderer to set width and height of angular component
@@ -527,21 +540,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 scaleX = accountForScaleDirective.scaleX, scaleY = accountForScaleDirective.scaleY;
-                var scaledWidth = width / scaleX;
-                var scaledHeight = height / scaleY;
-                this.renderer.setStyle(target, 'width', scaledWidth + "px");
-                this.renderer.setStyle(target, 'height', scaledHeight + "px");
-            }
-            else {
-                this.renderer.setStyle(target, 'width', width + "px");
-                this.renderer.setStyle(target, 'height', height + "px");
-            }
+            this.renderer.setStyle(target, 'width', "" + width + this.cssUnit);
+            this.renderer.setStyle(target, 'height', "" + height + this.cssUnit);
         };
         /**
          * Uses renderer to set position of angular component
@@ -550,19 +552,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 accountForScaleDirective = (_b = (_a = position.targetElement) === null || _a === void 0 ? void 0 : _a.dragRef) === null || _b === void 0 ? void 0 : _b.account_for_scale_dir;
-            if (accountForScaleDirective) {
-                var scaleX = accountForScaleDirective.scaleX, scaleY = accountForScaleDirective.scaleY;
-                this.renderer.setStyle(position.targetElement, 'left', x / scaleX + "px");
-                this.renderer.setStyle(position.targetElement, 'top', y / scaleY + "px");
-            }
-            else {
-                this.renderer.setStyle(position.targetElement, 'left', x + "px");
-                this.renderer.setStyle(position.targetElement, 'top', y + "px");
-            }
+            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
@@ -571,7 +564,7 @@
          * @param y the position along the y axis
          */
         InteractService.prototype.createTransformString = function (x, y) {
-            return "translate3d(" + x + "px, " + y + "px, 0)";
+            return "translate3d(" + x + this.cssUnit + ", " + y + this.cssUnit + ", 0)";
         };
         InteractService.prototype.calculatePositionInElement = function (zoneElement, dragElement, scale) {
             // TODO: this calculation may not cover a lot of scenarios, keep an eye out for possible improvements
@@ -579,23 +572,25 @@
             var dragRect = dragElement.getBoundingClientRect();
             var position = scale
                 ? {
-                    x: (dragRect.left - zoneRect.left) / scale.x || 1,
-                    y: (dragRect.top - zoneRect.top) / scale.y || 1
+                    x: (dragRect.left - zoneRect.left) / scale || 1,
+                    y: (dragRect.top - zoneRect.top) / scale || 1
                 } : {
                 x: dragRect.left - zoneRect.left,
                 y: dragRect.top - zoneRect.top
             };
+            // console.log({ y:position.y, drt:dragRect.top, zrt: zoneRect.top})
             return position;
         };
         return InteractService;
     }());
-    InteractService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function InteractService_Factory() { return new InteractService(i0__namespace.ɵɵinject(i0__namespace.RendererFactory2), i0__namespace.ɵɵinject(i0__namespace.NgZone)); }, token: InteractService, providedIn: "root" });
+    InteractService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function InteractService_Factory() { return new InteractService(i0__namespace.ɵɵinject(i0__namespace.RendererFactory2), i0__namespace.ɵɵinject(i0__namespace.NgZone), i0__namespace.ɵɵinject(INTERACT_ROOT_CONFIG, 8)); }, token: InteractService, providedIn: "root" });
     InteractService.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
     InteractService.ctorParameters = function () { return [
         { type: i0.RendererFactory2 },
-        { type: i0.NgZone }
+        { type: i0.NgZone },
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [INTERACT_ROOT_CONFIG,] }] }
     ]; };
 
     /**
@@ -607,19 +602,9 @@
     var AccountForScaleDirective = /** @class */ (function () {
         function AccountForScaleDirective(el) {
             this.el = el;
-            this.scaleX = 1;
-            this.scaleY = 1;
-        }
-        Object.defineProperty(AccountForScaleDirective.prototype, "scale", {
             // this setup allows consumers to set x, y scale independently or just set them both with scale
-            set: function (val) {
-                this.scaleY = val;
-                this.scaleX = val;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ;
+            this.scale = 1;
+        }
         return AccountForScaleDirective;
     }());
     AccountForScaleDirective.decorators = [
@@ -631,9 +616,7 @@
         { type: i0.ElementRef }
     ]; };
     AccountForScaleDirective.propDecorators = {
-        scale: [{ type: i0.Input }],
-        scaleX: [{ type: i0.Input }],
-        scaleY: [{ type: i0.Input }]
+        scale: [{ type: i0.Input }]
     };
 
     var DropzoneDirective = /** @class */ (function () {
@@ -643,12 +626,21 @@
             this.interactService = interactService;
             this.account_for_scale_dir = account_for_scale_dir;
             this.dropzoneConfig = {};
+            this.position = 'relative';
             // proxies to pass interact events through to consumer of directive
             this.dropActivate = new i0.EventEmitter();
             this.dragEnter = new i0.EventEmitter();
             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);
@@ -695,10 +687,7 @@
             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 = this.account_for_scale_dir ? {
-                x: this.account_for_scale_dir.scaleX,
-                y: this.account_for_scale_dir.scaleY
-            } : null;
+            var scale = this.scale;
             var positionInDropTarget = zoneElement && dragElement
                 ? this.interactService.calculatePositionInElement(zoneElement, dragElement, scale)
                 : null;
@@ -716,7 +705,7 @@
         { type: i0.Directive, args: [{
                     selector: '[tftDropzone]',
                     host: {
-                        '[id]': 'dropzoneId',
+                        '[id]': 'dropzoneId'
                     }
                 },] }
     ];
@@ -730,6 +719,7 @@
         dropzoneId: [{ type: i0.Input }],
         dropzoneConfig: [{ type: i0.Input }],
         dropzoneData: [{ type: i0.Input }],
+        position: [{ type: i0.Input }, { type: i0.HostBinding, args: ['style.position',] }],
         dropActivate: [{ type: i0.Output }],
         dragEnter: [{ type: i0.Output }],
         dragLeave: [{ type: i0.Output }],
@@ -797,22 +787,19 @@
      * @note this directive will overwrite any style transformations (e.g. transform: scale(2); )
      */
     var DragRootDirective = /** @class */ (function () {
-        function DragRootDirective(el, account_for_scale_dir) {
+        function DragRootDirective(el, 
+        // This is used when passing a dragRoot as in input to a draggable element that not a child of that dragRoot
+        // It allows the the interact service to check if the drag root has some scaling applied to it and account for it when the component is dragged
+        account_for_scale_dir) {
             this.el = el;
-            // This accounts for a bug where drag element is misaligned when using a drag root
-            // with a dropzone inside of it and a drag item inside the dropzone
-            // e.g <div tftDragRoot> <div tftDropzone> <div tftDraggable</div> </div> </div>
-            // TODO: This is a band-aid, root cause in misunderstood, it started after switching from
-            // using `translate3d` to top/left for positioning
-            if (!account_for_scale_dir) {
-                el.nativeElement.style.transform = 'scale(1)';
-            }
+            this.account_for_scale_dir = account_for_scale_dir;
         }
         return DragRootDirective;
     }());
     DragRootDirective.decorators = [
         { type: i0.Directive, args: [{
-                    selector: '[tftDragRoot]'
+                    selector: '[tftDragRoot]',
+                    exportAs: 'tftDragRoot'
                 },] }
     ];
     DragRootDirective.ctorParameters = function () { return [
@@ -820,11 +807,63 @@
         { type: AccountForScaleDirective, decorators: [{ type: i0.Optional }, { type: i0.Self }] }
     ]; };
 
+    ;
+    /**
+     * Use to apply scale to the element and tell the drag and resize directives to account for the scale when
+     * @example <div tftAccountForScale [scale]="2.5"> <div tftDraggable> </div> </div>
+     * @note if `dragRoot` is used this directive should be used on the same element to ensure that the drag
+     * element accounts for scale
+     */
+    var AutoScrollDirective = /** @class */ (function () {
+        function AutoScrollDirective(el) {
+            var _this = this;
+            this.el = el;
+            /**
+             * Limit minimum time between scroll events in milliseconds
+             */
+            this.autoScrollConfig = {
+                margin: 50,
+                distance: 3,
+                interval: 50,
+                speed: 300,
+                enabled: true
+            };
+            this.scrollDeltaObserver = new rxjs.Subject();
+            var _a = el.nativeElement, scrollTop = _a.scrollTop, scrollLeft = _a.scrollLeft;
+            this.scrollSubject = new rxjs.BehaviorSubject({ scrollTop: scrollTop, scrollLeft: scrollLeft });
+            this.scrollObserver = this.scrollSubject.pipe(operators.scan(function (previous, current) {
+                var scrollTop = current.scrollTop - previous.scrollTop;
+                var scrollLeft = current.scrollLeft - previous.scrollLeft;
+                _this.scrollDeltaObserver.next({ scrollTop: scrollTop, scrollLeft: scrollLeft });
+                return current;
+            }), operators.shareReplay(1));
+            this.scrollObserver.subscribe();
+        }
+        // this setup allows consumers to set x, y scale independently or just set them both with scale
+        AutoScrollDirective.prototype.scroll = function (scrollEvent) {
+            var target = scrollEvent.target;
+            var scrollTop = target.scrollTop, scrollLeft = target.scrollLeft;
+            this.scrollSubject.next({ scrollTop: scrollTop, scrollLeft: scrollLeft });
+        };
+        return AutoScrollDirective;
+    }());
+    AutoScrollDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[tftAutoScroll]'
+                },] }
+    ];
+    AutoScrollDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+    AutoScrollDirective.propDecorators = {
+        autoScrollConfig: [{ type: i0.Input }],
+        scroll: [{ type: i0.HostListener, args: ['scroll', ['$event'],] }]
+    };
+
     /** @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) {
+        function DraggableDirective(el, interactService, renderer, _viewContainerRef, _document, account_for_scale_dir, dropzone_dir, drag_root_dir, auto_scroll_dir) {
             this.el = el;
             this.interactService = interactService;
             this.renderer = renderer;
@@ -833,6 +872,7 @@
             this.account_for_scale_dir = account_for_scale_dir;
             this.dropzone_dir = dropzone_dir;
             this.drag_root_dir = drag_root_dir;
+            this.auto_scroll_dir = auto_scroll_dir;
             /* zIndex while dragging*/
             this.dragZIndex = 10000;
             this.enableDragDefault = true;
@@ -848,14 +888,23 @@
             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;
+            var _a, _b, _c, _d, _e;
             this.interactable = this.initiateDragEvents(this.dragConfig, this.el.nativeElement);
-            this.dragRoot = this.dragRoot || ((_b = (_a = this.drag_root_dir) === null || _a === void 0 ? void 0 : _a.el) === null || _b === void 0 ? void 0 : _b.nativeElement) || this._document.body;
+            this.dragRootEl = (((_b = (_a = this.dragRoot) === null || _a === void 0 ? void 0 : _a.el) === null || _b === void 0 ? void 0 : _b.nativeElement) || ((_d = (_c = this.drag_root_dir) === null || _c === void 0 ? void 0 : _c.el) === null || _d === void 0 ? void 0 : _d.nativeElement)) || this._document.body;
             // register with parent dropzone if it exists, otherwise use default
             // this gives us a place on the registry to store our drag items that don't have a dropzone
-            this.registryId = ((_c = this.dropzone_dir) === null || _c === void 0 ? void 0 : _c.dropzoneId) || DEFAULT_REGISTRY_ID;
+            this.registryId = ((_e = this.dropzone_dir) === null || _e === void 0 ? void 0 : _e.dropzoneId) || DEFAULT_REGISTRY_ID;
             // add draggable to directory and store its id
             this.interactableId = this.interactService.addDraggableToRegistry(this.registryId, this.interactableId);
             this.alignPositionWithInputs(this.x, this.y);
@@ -906,12 +955,15 @@
         };
         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');
             this.renderer.setStyle(dragElement, 'zIndex', this.dragZIndex);
-            this.renderer.setStyle(dragElement, 'position', 'fixed');
+            this.renderer.setStyle(dragElement, 'position', 'absolute');
         };
         DraggableDirective.prototype.addDragPropertiesToElement = function (nativeElement) {
             this.renderer.setProperty(nativeElement, 'dropTarget', this.dropzone_dir || null);
@@ -922,8 +974,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,
@@ -952,8 +1005,12 @@
         };
         DraggableDirective.prototype.initiateDragEvents = function (dragConfig, nativeElement) {
             var _this = this;
-            return interact__default['default'](nativeElement).draggable(Object.assign(Object.assign({}, dragConfig), { enabled: !(this.disabled || this.dragDisabled) }))
+            var defaultDragConfig = Object.assign(Object.assign(Object.assign({}, dragConfig), { enabled: !(this.disabled || this.dragDisabled) }), (this.auto_scroll_dir && {
+                autoScroll: Object.assign(Object.assign({}, this.auto_scroll_dir.autoScrollConfig), { container: this.auto_scroll_dir.el.nativeElement })
+            }));
+            return interact__default['default'](nativeElement).draggable(defaultDragConfig)
                 .on('dragstart', function (event) {
+                var _a, _b, _c;
                 var interaction = event.interaction;
                 // check if we should append drag element to body
                 if (_this.enableDragDefault
@@ -971,13 +1028,18 @@
                     }
                     _this.addDragPropertiesToElement(_this.previewRef);
                     _this.setDragStyles(_this.previewRef);
-                    _this.dragRoot.prepend(_this.previewRef);
-                    var _d = _this.interactService.calculatePositionInElement(_this.dragRoot, nativeElement), x = _d.x, y = _d.y;
+                    _this.dragRootEl.prepend(_this.previewRef);
+                    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');
                     }
                 }
+                // subscribe to scroll events if they are there, by only subscribing on dragstart we avoid wasting subscriptions on interactables that aren't be dragged
+                if (_this.auto_scroll_dir) {
+                    _this.subscribeToScrollEvents();
+                }
                 _this.dragStart.emit(_this.mapDragEvent(event));
             })
                 .on('dragmove', function (event) {
@@ -994,20 +1056,32 @@
                 .on('dragend', function (event) {
                 var mappedEvent = _this.mapDragEvent(event);
                 if (!!_this.dropzone_dir && _this.dropzone_dir === event.target.dropTarget) {
-                    var _d = mappedEvent.positionInDropTarget, x = _d.x, y = _d.y;
+                    var _f = mappedEvent.positionInDropTarget, x = _f.x, y = _f.y;
                     _this.setPosition(x, y);
                 }
                 _this.renderer.setStyle(_this.el.nativeElement, 'display', '');
                 _this.dragEnd.emit(mappedEvent);
+                // unsubscribe from scroll events if subscribed
+                if (_this.auto_scroll_dir) {
+                    _this.scrollEventsSubscription.unsubscribe();
+                }
                 if (_this.el.nativeElement !== _this.previewRef) {
-                    // we do this in a timeout, so that we don't
-                    // remove before the dropzone can get the boundingElementRect
+                    // we do this in a timeout, so that we don't remove before the dropzone can get the boundingElementRect
                     setTimeout(function () {
-                        _this.dragRoot.removeChild(_this.previewRef);
+                        _this.dragRootEl.removeChild(_this.previewRef);
                     });
                 }
             });
         };
+        DraggableDirective.prototype.subscribeToScrollEvents = function () {
+            var _this = this;
+            this.scrollEventsSubscription = this.auto_scroll_dir.scrollDeltaObserver.subscribe(function (_f) {
+                var scrollLeft = _f.scrollLeft, scrollTop = _f.scrollTop;
+                var deltaX = _this.scale ? scrollLeft / _this.scale : scrollLeft;
+                var deltaY = _this.scale ? scrollTop / _this.scale : scrollTop;
+                _this.interactService.updateDeltas(_this.interactableId, _this.registryId, { deltaX: deltaX, deltaY: deltaY }, _this.previewRef);
+            });
+        };
         return DraggableDirective;
     }());
     DraggableDirective.decorators = [
@@ -1029,7 +1103,8 @@
         { type: Document, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] },
         { type: AccountForScaleDirective, decorators: [{ type: i0.Optional }] },
         { type: DropzoneDirective, decorators: [{ type: i0.Optional }, { type: i0.SkipSelf }] },
-        { type: DragRootDirective, decorators: [{ type: i0.Optional }, { type: i0.SkipSelf }] }
+        { type: DragRootDirective, decorators: [{ type: i0.Optional }, { type: i0.SkipSelf }] },
+        { type: AutoScrollDirective, decorators: [{ type: i0.Optional }, { type: i0.SkipSelf }] }
     ]; };
     DraggableDirective.propDecorators = {
         x: [{ type: i0.Input }],
@@ -1071,15 +1146,17 @@
 
     /** @dynamic */
     var ResizableDirective = /** @class */ (function () {
-        function ResizableDirective(el, _document, interactService, renderer, drag_root_dir, account_for_scale_dir, draggable_dir, dropzone_dir) {
+        function ResizableDirective(el, _document, interactService, renderer, drag_root_dir, account_for_scale_dir, draggable_dir, dropzone_dir, auto_scroll_dir) {
             var _a;
             this.el = el;
             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;
+            this.auto_scroll_dir = auto_scroll_dir;
             this.enableResizeDefault = true;
             // TODO: should this be an input with default or should consuming user set display in styles each time
             this.position = 'absolute';
@@ -1091,8 +1168,17 @@
             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.activeEdges = { left: false, right: false, top: false, bottom: false };
+            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, _c;
+                return ((_a = this.account_for_scale_dir) === null || _a === void 0 ? void 0 : _a.scale) || ((_c = (_b = this.drag_root_dir) === null || _b === void 0 ? void 0 : _b.account_for_scale_dir) === null || _c === void 0 ? void 0 : _c.scale);
+            },
+            enumerable: false,
+            configurable: true
+        });
         ResizableDirective.prototype.ngOnInit = function () {
             var _a, _b;
             this.addResizePropertiesToElement(this.el.nativeElement);
@@ -1120,9 +1206,16 @@
             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 element = this.el.nativeElement;
+            var scale = this.scale;
+            var deltaRect = event.deltaRect;
+            var deltaX = deltaRect.left / scale;
+            var deltaY = deltaRect.top / scale;
+            // We get the width and height directly from the native element because
+            // the event dimension can get out of sync when resizing with autoScroll
+            var rect = element.getBoundingClientRect();
+            var width = (rect.width + deltaRect.width) / scale;
+            var height = (rect.height + deltaRect.height) / scale;
             this.interactService.updateSize(this.interactableId, this.registryId, { deltaX: deltaX, deltaY: deltaY, width: width, height: height }, this.el.nativeElement);
         };
         /**
@@ -1136,9 +1229,18 @@
             var _this = this;
             var _a;
             // TODO: This should try and get interactable from tft_draggable if it exists
+            var defaultResizeConfig = Object.assign(Object.assign(Object.assign({}, resizeConfig), { enabled: !this.resizeDisabled }), (this.auto_scroll_dir && {
+                autoScroll: Object.assign(Object.assign({}, this.auto_scroll_dir.autoScrollConfig), { container: this.auto_scroll_dir.el.nativeElement })
+            }));
             var interactable = ((_a = this.draggable_dir) === null || _a === void 0 ? void 0 : _a.interactable) || interact__default['default'](nativeElement);
-            return interactable.resizable(Object.assign(Object.assign({}, resizeConfig), { enabled: !this.resizeDisabled }))
-                .on('resizestart', function (event) { _this.resizeStart.emit(_this.mapResizeEvent(event)); })
+            return interactable.resizable(defaultResizeConfig)
+                .on('resizestart', function (event) {
+                _this.activeEdges = event.edges;
+                if (_this.auto_scroll_dir) {
+                    _this.subscribeToScrollEvents();
+                }
+                _this.resizeStart.emit(_this.mapResizeEvent(event));
+            })
                 .on('resizemove', function (event) {
                 if (_this.enableResizeDefault) {
                     _this.resizeListener(event);
@@ -1147,23 +1249,33 @@
                 _this.resizeMove.emit(mappedEvent);
             })
                 .on('resizeinertiastart', function (event) { return _this.resizeInertiaStart.emit(_this.mapResizeEvent(event)); })
-                .on('resizeend', function (event) { return _this.resizeEnd.emit(_this.mapResizeEvent(event)); });
+                .on('resizeend', function (event) {
+                if (_this.auto_scroll_dir) {
+                    _this.scrollEventsSubscription.unsubscribe();
+                }
+                _this.activeEdges = { left: false, right: false, top: false, bottom: false };
+                _this.resizeEnd.emit(_this.mapResizeEvent(event));
+            });
         };
         ResizableDirective.prototype.mapResizeEvent = function (event) {
             var _a, _b;
-            var target = event.target;
+            var target = this.el.nativeElement;
             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 = this.scale;
             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,
-                positionInDropTarget: positionInDropTarget
+                positionInDropTarget: positionInDropTarget,
+                size: {
+                    width: target.clientWidth / scale,
+                    height: target.clientHeight / scale
+                }
             };
         };
         ResizableDirective.prototype.alignDimensionsWithInputs = function (width, height) {
@@ -1172,6 +1284,22 @@
         ResizableDirective.prototype.addResizePropertiesToElement = function (nativeElement) {
             this.renderer.setProperty(nativeElement, 'resizeRef', this);
         };
+        ResizableDirective.prototype.subscribeToScrollEvents = function () {
+            var _this = this;
+            this.scrollEventsSubscription = this.auto_scroll_dir.scrollDeltaObserver.subscribe(function (_d) {
+                var scrollLeft = _d.scrollLeft, scrollTop = _d.scrollTop;
+                var scale = _this.scale;
+                var target = _this.el.nativeElement;
+                var _e = target.getBoundingClientRect(), prevWidth = _e.width, prevHeight = _e.height;
+                var deltaHeight = scrollTop * (_this.activeEdges.top ? -1 : _this.activeEdges.bottom ? 1 : 0);
+                var deltaWidth = scrollLeft * (_this.activeEdges.left ? -1 : _this.activeEdges.right ? 1 : 0);
+                var height = (prevHeight + deltaHeight) / scale;
+                var width = (prevWidth + deltaWidth) / scale;
+                var deltaX = _this.activeEdges.left ? (scrollLeft / scale) : 0;
+                var deltaY = _this.activeEdges.top ? (scrollTop / scale) : 0;
+                _this.interactService.updateSize(_this.interactableId, _this.registryId, { deltaX: deltaX, deltaY: deltaY, width: width, height: height }, _this.el.nativeElement);
+            });
+        };
         return ResizableDirective;
     }());
     ResizableDirective.decorators = [
@@ -1198,7 +1326,8 @@
         { type: DragRootDirective, decorators: [{ type: i0.Optional }] },
         { type: AccountForScaleDirective, decorators: [{ type: i0.Optional }] },
         { type: DraggableDirective, decorators: [{ type: i0.Optional }] },
-        { type: DropzoneDirective, decorators: [{ type: i0.Optional }, { type: i0.SkipSelf }] }
+        { type: DropzoneDirective, decorators: [{ type: i0.Optional }, { type: i0.SkipSelf }] },
+        { type: AutoScrollDirective, decorators: [{ type: i0.Optional }, { type: i0.SkipSelf }] }
     ]; };
     ResizableDirective.propDecorators = {
         enableResizeDefault: [{ type: i0.Input }],
@@ -1293,24 +1422,18 @@
     var ApplyScaleDirective = /** @class */ (function () {
         function ApplyScaleDirective(el) {
             this.el = el;
-            this.scaleX = 1;
-            this.scaleY = 1;
-            this.transformOrigin = '0 0';
+            this._scale = 1;
         }
         Object.defineProperty(ApplyScaleDirective.prototype, "scale", {
             // this setup allows consumers to set x, y scale independently or just set them both with scale
             set: function (val) {
-                this.scaleY = val;
-                this.scaleX = val;
+                this._scale;
+                this.fontSize = val + "px";
             },
             enumerable: false,
             configurable: true
         });
         ;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        ApplyScaleDirective.prototype.ngOnChanges = function (_changes) {
-            this.transform = "scaleX(" + this.scaleX + ") scaleY(" + this.scaleY + ")";
-        };
         return ApplyScaleDirective;
     }());
     ApplyScaleDirective.decorators = [
@@ -1323,10 +1446,7 @@
     ]; };
     ApplyScaleDirective.propDecorators = {
         scale: [{ type: i0.Input }],
-        scaleX: [{ type: i0.Input }],
-        scaleY: [{ type: i0.Input }],
-        transform: [{ type: i0.HostBinding, args: ['style.transform',] }],
-        transformOrigin: [{ type: i0.Input }, { type: i0.HostBinding, args: ['style.transformOrigin',] }]
+        fontSize: [{ type: i0.HostBinding, args: ['style.fontSize',] }]
     };
 
     var EXPORTS = [
@@ -1335,6 +1455,7 @@
         DropzoneDirective,
         GesturableDirective,
         DragRootDirective,
+        AutoScrollDirective,
         AccountForScaleDirective,
         ApplyScaleDirective,
         DragPreviewDirective,
@@ -1343,11 +1464,22 @@
     var InteractModule = /** @class */ (function () {
         function InteractModule() {
         }
+        InteractModule.forRoot = function (config) {
+            var defaultConfig = { cssDimensionUnit: 'px' };
+            return {
+                ngModule: InteractModule,
+                providers: [
+                    { provide: INTERACT_ROOT_CONFIG, useValue: Object.assign(Object.assign({}, defaultConfig), config) },
+                    InteractService
+                ]
+            };
+        };
         return InteractModule;
     }());
     InteractModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [common.CommonModule],
+                    // providers: [{ provide: INTERACT_ROOT_CONFIG, useValue: 'px' }],
                     declarations: __spreadArray([], __read(EXPORTS)),
                     exports: __spreadArray([], __read(EXPORTS))
                 },] }
@@ -1360,12 +1492,14 @@
     exports.AccountForScaleDirective = AccountForScaleDirective;
     exports.ApplyScaleDirective = ApplyScaleDirective;
     exports.ArrayOfNPipe = ArrayOfNPipe;
+    exports.AutoScrollDirective = AutoScrollDirective;
     exports.DEFAULT_REGISTRY_ID = DEFAULT_REGISTRY_ID;
     exports.DragPreviewDirective = DragPreviewDirective;
     exports.DragRootDirective = DragRootDirective;
     exports.DraggableDirective = DraggableDirective;
     exports.DropzoneDirective = DropzoneDirective;
     exports.GesturableDirective = GesturableDirective;
+    exports.INTERACT_ROOT_CONFIG = INTERACT_ROOT_CONFIG;
     exports.InteractModule = InteractModule;
     exports.ResizableDirective = ResizableDirective;
     exports.TFT_DRAG_PREVIEW = TFT_DRAG_PREVIEW;
@@ -1380,10 +1514,11 @@
     exports.ɵc = DropzoneDirective;
     exports.ɵd = GesturableDirective;
     exports.ɵe = DragRootDirective;
-    exports.ɵf = AccountForScaleDirective;
-    exports.ɵg = ApplyScaleDirective;
-    exports.ɵh = DragPreviewDirective;
-    exports.ɵi = ArrayOfNPipe;
+    exports.ɵf = AutoScrollDirective;
+    exports.ɵg = AccountForScaleDirective;
+    exports.ɵh = ApplyScaleDirective;
+    exports.ɵi = DragPreviewDirective;
+    exports.ɵj = ArrayOfNPipe;
 
     Object.defineProperty(exports, '__esModule', { value: true });