@tft/interact 12.4.3 → 12.5.3

package/fesm2015/tft-interact.js

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Pipe, Injectable, RendererFactory2, NgZone, Directive, ElementRef, Input, EventEmitter, Renderer2, Optional, Output, InjectionToken, TemplateRef, Self, ViewContainerRef, Inject, SkipSelf, ContentChild, HostBinding, NgModule } from '@angular/core';
+import { Pipe, InjectionToken, Injectable, RendererFactory2, NgZone, Optional, Inject, Directive, ElementRef, Input, EventEmitter, Renderer2, HostBinding, Output, TemplateRef, Self, HostListener, ViewContainerRef, SkipSelf, ContentChild, NgModule } from '@angular/core';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import interact from 'interactjs';
-import { BehaviorSubject, combineLatest } from 'rxjs';
-import { shareReplay, tap, map } from 'rxjs/operators';
+import { BehaviorSubject, combineLatest, Subject } from 'rxjs';
+import { shareReplay, tap, map, scan } from 'rxjs/operators';
 
 class ArrayOfNPipe {
     /**
@@ -22,6 +22,7 @@ ArrayOfNPipe.decorators = [
             },] }
 ];
 
+const INTERACT_ROOT_CONFIG = new InjectionToken('INTERACT_ROOT_CONFIG_PARAMS');
 const DEFAULT_REGISTRY_ID = 'DEFAULT';
 /**
  * Default initial value for Delta BehaviorSubject
@@ -49,14 +50,17 @@ const defaultPosition = {
 };
 
 class InteractService {
-    constructor(rendererFactory, ngZone) {
+    constructor(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';
     }
     addDeltaToPosition(delta, position) {
         return {
@@ -73,7 +77,7 @@ class InteractService {
     addDraggableToRegistry(customRegistryId = null, interactableId = null) {
         const 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.
         const key = this.createInteractableId(interactableId);
         if (!Object.prototype.hasOwnProperty.call(this.dragRegistrySystem, registryId)) {
             this.dragRegistrySystem[registryId] = {};
@@ -82,7 +86,16 @@ class InteractService {
         return key;
     }
     destroyInteractable(interactableId, registryId = DEFAULT_REGISTRY_ID) {
-        if (this.dragRegistrySystem[registryId][interactableId]) {
+        const interactableSystem = this.dragRegistrySystem[registryId][interactableId];
+        if (interactableSystem) {
+            // unsubscribe from all the subscriptions if they're subscriptions
+            for (const propName in interactableSystem) {
+                const prop = interactableSystem[propName];
+                if (prop.unsubscribe && typeof prop.unsubscribe === 'function') {
+                    prop.unsubscribe();
+                }
+                ;
+            }
             delete this.dragRegistrySystem[registryId][interactableId];
         }
     }
@@ -164,8 +177,8 @@ class InteractService {
         this.dragRegistrySystem[registryId][interactId].size$.next({ deltaX, deltaY, width, height, targetElement });
     }
     interactableExistOnRegistry(interactId, 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
@@ -174,21 +187,10 @@ class InteractService {
      * @param target the element to transform
      */
     setElementSize(width, height, target) {
-        var _a;
         if (!target)
             return;
-        const accountForScaleDirective = (_a = target.resizeRef) === null || _a === void 0 ? void 0 : _a.account_for_scale_dir;
-        if (accountForScaleDirective) {
-            const { scaleX, scaleY } = accountForScaleDirective;
-            const scaledWidth = width / scaleX;
-            const 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
@@ -197,19 +199,10 @@ class InteractService {
      * @param target the element to transform
      */
     setElementTransform(x, y, position) {
-        var _a, _b;
         if (!(position === null || position === void 0 ? void 0 : position.targetElement))
             return;
-        const 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) {
-            const { scaleX, scaleY } = accountForScaleDirective;
-            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
@@ -218,7 +211,7 @@ class InteractService {
      * @param y the position along the y axis
      */
     createTransformString(x, y) {
-        return `translate3d(${x}px, ${y}px, 0)`;
+        return `translate3d(${x}${this.cssUnit}, ${y}${this.cssUnit}, 0)`;
     }
     calculatePositionInElement(zoneElement, dragElement, scale) {
         // TODO: this calculation may not cover a lot of scenarios, keep an eye out for possible improvements
@@ -226,22 +219,24 @@ class InteractService {
         const dragRect = dragElement.getBoundingClientRect();
         const 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;
     }
 }
-InteractService.ɵprov = i0.ɵɵdefineInjectable({ factory: function InteractService_Factory() { return new InteractService(i0.ɵɵinject(i0.RendererFactory2), i0.ɵɵinject(i0.NgZone)); }, token: InteractService, providedIn: "root" });
+InteractService.ɵprov = i0.ɵɵdefineInjectable({ factory: function InteractService_Factory() { return new InteractService(i0.ɵɵinject(i0.RendererFactory2), i0.ɵɵinject(i0.NgZone), i0.ɵɵinject(INTERACT_ROOT_CONFIG, 8)); }, token: InteractService, providedIn: "root" });
 InteractService.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
 InteractService.ctorParameters = () => [
     { type: RendererFactory2 },
-    { type: NgZone }
+    { type: NgZone },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [INTERACT_ROOT_CONFIG,] }] }
 ];
 
 /**
@@ -253,15 +248,9 @@ InteractService.ctorParameters = () => [
 class AccountForScaleDirective {
     constructor(el) {
         this.el = el;
-        this.scaleX = 1;
-        this.scaleY = 1;
+        // this setup allows consumers to set x, y scale independently or just set them both with scale
+        this.scale = 1;
     }
-    // this setup allows consumers to set x, y scale independently or just set them both with scale
-    set scale(val) {
-        this.scaleY = val;
-        this.scaleX = val;
-    }
-    ;
 }
 AccountForScaleDirective.decorators = [
     { type: Directive, args: [{
@@ -272,9 +261,7 @@ AccountForScaleDirective.ctorParameters = () => [
     { type: ElementRef }
 ];
 AccountForScaleDirective.propDecorators = {
-    scale: [{ type: Input }],
-    scaleX: [{ type: Input }],
-    scaleY: [{ type: Input }]
+    scale: [{ type: Input }]
 };
 
 class DropzoneDirective {
@@ -284,12 +271,17 @@ class DropzoneDirective {
         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 EventEmitter();
         this.dragEnter = new EventEmitter();
         this.dragLeave = new EventEmitter();
         this.dragDrop = new EventEmitter();
     }
+    get scale() {
+        var _a;
+        return (_a = this.account_for_scale_dir) === null || _a === void 0 ? void 0 : _a.scale;
+    }
     ngOnInit() {
         // connects
         this.dropzone = this.connectDropzoneEvents(this.el.nativeElement, this.dropzoneConfig);
@@ -335,10 +327,7 @@ class DropzoneDirective {
         var _a, _b;
         const zoneElement = event.target;
         const dragElement = (_b = (_a = event.relatedTarget) === null || _a === void 0 ? void 0 : _a.dragRef) === null || _b === void 0 ? void 0 : _b.previewRef;
-        const scale = this.account_for_scale_dir ? {
-            x: this.account_for_scale_dir.scaleX,
-            y: this.account_for_scale_dir.scaleY
-        } : null;
+        const scale = this.scale;
         const positionInDropTarget = zoneElement && dragElement
             ? this.interactService.calculatePositionInElement(zoneElement, dragElement, scale)
             : null;
@@ -355,7 +344,7 @@ DropzoneDirective.decorators = [
     { type: Directive, args: [{
                 selector: '[tftDropzone]',
                 host: {
-                    '[id]': 'dropzoneId',
+                    '[id]': 'dropzoneId'
                 }
             },] }
 ];
@@ -369,6 +358,7 @@ DropzoneDirective.propDecorators = {
     dropzoneId: [{ type: Input }],
     dropzoneConfig: [{ type: Input }],
     dropzoneData: [{ type: Input }],
+    position: [{ type: Input }, { type: HostBinding, args: ['style.position',] }],
     dropActivate: [{ type: Output }],
     dragEnter: [{ type: Output }],
     dragLeave: [{ type: Output }],
@@ -435,21 +425,18 @@ function getRootNode(viewRef, _document) {
  * @note this directive will overwrite any style transformations (e.g. transform: scale(2); )
  */
 class DragRootDirective {
-    constructor(el, account_for_scale_dir) {
+    constructor(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;
     }
 }
 DragRootDirective.decorators = [
     { type: Directive, args: [{
-                selector: '[tftDragRoot]'
+                selector: '[tftDragRoot]',
+                exportAs: 'tftDragRoot'
             },] }
 ];
 DragRootDirective.ctorParameters = () => [
@@ -457,11 +444,61 @@ DragRootDirective.ctorParameters = () => [
     { type: AccountForScaleDirective, decorators: [{ type: Optional }, { type: 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
+ */
+class AutoScrollDirective {
+    constructor(el) {
+        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 Subject();
+        const { scrollTop, scrollLeft } = el.nativeElement;
+        this.scrollSubject = new BehaviorSubject({ scrollTop, scrollLeft });
+        this.scrollObserver = this.scrollSubject.pipe(scan((previous, current) => {
+            const scrollTop = current.scrollTop - previous.scrollTop;
+            const scrollLeft = current.scrollLeft - previous.scrollLeft;
+            this.scrollDeltaObserver.next({ scrollTop, scrollLeft });
+            return current;
+        }), shareReplay(1));
+        this.scrollObserver.subscribe();
+    }
+    // this setup allows consumers to set x, y scale independently or just set them both with scale
+    scroll(scrollEvent) {
+        const target = scrollEvent.target;
+        const { scrollTop, scrollLeft } = target;
+        this.scrollSubject.next({ scrollTop, scrollLeft });
+    }
+}
+AutoScrollDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[tftAutoScroll]'
+            },] }
+];
+AutoScrollDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+AutoScrollDirective.propDecorators = {
+    autoScrollConfig: [{ type: Input }],
+    scroll: [{ type: HostListener, args: ['scroll', ['$event'],] }]
+};
+
 /** @dynamic */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 class DraggableDirective {
-    // cache holding element to use as placeholder while dragging
-    constructor(el, interactService, renderer, _viewContainerRef, _document, account_for_scale_dir, dropzone_dir, drag_root_dir) {
+    constructor(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;
@@ -470,6 +507,7 @@ class DraggableDirective {
         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;
@@ -485,13 +523,18 @@ class DraggableDirective {
         this.dragInertiaStart = new EventEmitter();
         this.dragEnd = new EventEmitter();
     }
+    // check all the different places for scale
+    get scale() {
+        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);
+    }
     ngOnInit() {
-        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);
@@ -542,12 +585,15 @@ class DraggableDirective {
     }
     dragMoveListener(event, element) {
         const { dx, dy } = event;
-        this.interactService.updateDeltas(this.interactableId, this.registryId, { deltaX: dx, deltaY: dy }, element);
+        const scale = this.scale;
+        const deltaX = scale ? dx / scale : dx;
+        const deltaY = scale ? dy / scale : dy;
+        this.interactService.updateDeltas(this.interactableId, this.registryId, { deltaX, deltaY }, element);
     }
     setDragStyles(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');
     }
     addDragPropertiesToElement(nativeElement) {
         this.renderer.setProperty(nativeElement, 'dropTarget', this.dropzone_dir || null);
@@ -558,8 +604,9 @@ class DraggableDirective {
         var _a;
         const { target, dropzone } = event;
         const dropzoneElement = (dropzone === null || dropzone === void 0 ? void 0 : dropzone.target) || ((_a = target.dropTarget) === null || _a === void 0 ? void 0 : _a.el.nativeElement);
+        const scale = this.scale;
         const positionInDropTarget = target && dropzoneElement
-            ? this.interactService.calculatePositionInElement(dropzoneElement, this.previewRef)
+            ? this.interactService.calculatePositionInElement(dropzoneElement, this.previewRef, scale)
             : null;
         return {
             interactEvent: event,
@@ -587,8 +634,12 @@ class DraggableDirective {
         return typeof num === 'number' && !isNaN(num);
     }
     initiateDragEvents(dragConfig, nativeElement) {
-        return interact(nativeElement).draggable(Object.assign(Object.assign({}, dragConfig), { enabled: !(this.disabled || this.dragDisabled) }))
+        const 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(nativeElement).draggable(defaultDragConfig)
             .on('dragstart', (event) => {
+            var _a, _b, _c;
             const interaction = event.interaction;
             // check if we should append drag element to body
             if (this.enableDragDefault
@@ -606,13 +657,18 @@ class DraggableDirective {
                 }
                 this.addDragPropertiesToElement(this.previewRef);
                 this.setDragStyles(this.previewRef);
-                this.dragRoot.prepend(this.previewRef);
-                const { x, y } = this.interactService.calculatePositionInElement(this.dragRoot, nativeElement);
+                this.dragRootEl.prepend(this.previewRef);
+                const 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;
+                const { x, y } = this.interactService.calculatePositionInElement(this.dragRootEl, nativeElement, scale);
                 this.interactService.updatePosition(this.interactableId, this.registryId, { x, 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', (event) => {
@@ -634,15 +690,25 @@ class DraggableDirective {
             }
             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(() => {
-                    this.dragRoot.removeChild(this.previewRef);
+                    this.dragRootEl.removeChild(this.previewRef);
                 });
             }
         });
     }
+    subscribeToScrollEvents() {
+        this.scrollEventsSubscription = this.auto_scroll_dir.scrollDeltaObserver.subscribe(({ scrollLeft, scrollTop }) => {
+            const deltaX = this.scale ? scrollLeft / this.scale : scrollLeft;
+            const deltaY = this.scale ? scrollTop / this.scale : scrollTop;
+            this.interactService.updateDeltas(this.interactableId, this.registryId, { deltaX, deltaY }, this.previewRef);
+        });
+    }
 }
 DraggableDirective.decorators = [
     { type: Directive, args: [{
@@ -663,7 +729,8 @@ DraggableDirective.ctorParameters = () => [
     { type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
     { type: AccountForScaleDirective, decorators: [{ type: Optional }] },
     { type: DropzoneDirective, decorators: [{ type: Optional }, { type: SkipSelf }] },
-    { type: DragRootDirective, decorators: [{ type: Optional }, { type: SkipSelf }] }
+    { type: DragRootDirective, decorators: [{ type: Optional }, { type: SkipSelf }] },
+    { type: AutoScrollDirective, decorators: [{ type: Optional }, { type: SkipSelf }] }
 ];
 DraggableDirective.propDecorators = {
     x: [{ type: Input }],
@@ -705,15 +772,17 @@ function getPreviewInsertionPoint(documentRef) {
 
 /** @dynamic */
 class ResizableDirective {
-    constructor(el, _document, interactService, renderer, drag_root_dir, account_for_scale_dir, draggable_dir, dropzone_dir) {
+    constructor(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';
@@ -725,7 +794,12 @@ class ResizableDirective {
         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;
+    }
+    get scale() {
+        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);
     }
     ngOnInit() {
         var _a, _b;
@@ -754,9 +828,16 @@ class ResizableDirective {
         this.interactService.destroyInteractable(this.interactableId, this.registryId);
     }
     resizeListener(event) {
-        const deltaX = event.deltaRect.left;
-        const deltaY = event.deltaRect.top;
-        const { width, height } = event.rect;
+        const element = this.el.nativeElement;
+        const scale = this.scale;
+        const { deltaRect } = event;
+        const deltaX = deltaRect.left / scale;
+        const 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
+        const rect = element.getBoundingClientRect();
+        const width = (rect.width + deltaRect.width) / scale;
+        const height = (rect.height + deltaRect.height) / scale;
         this.interactService.updateSize(this.interactableId, this.registryId, { deltaX, deltaY, width, height }, this.el.nativeElement);
     }
     /**
@@ -769,9 +850,18 @@ class ResizableDirective {
     initiateResizeEvents(resizeConfig, nativeElement) {
         var _a;
         // TODO: This should try and get interactable from tft_draggable if it exists
+        const 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 })
+        }));
         const interactable = ((_a = this.draggable_dir) === null || _a === void 0 ? void 0 : _a.interactable) || interact(nativeElement);
-        return interactable.resizable(Object.assign(Object.assign({}, resizeConfig), { enabled: !this.resizeDisabled }))
-            .on('resizestart', (event) => { this.resizeStart.emit(this.mapResizeEvent(event)); })
+        return interactable.resizable(defaultResizeConfig)
+            .on('resizestart', (event) => {
+            this.activeEdges = event.edges;
+            if (this.auto_scroll_dir) {
+                this.subscribeToScrollEvents();
+            }
+            this.resizeStart.emit(this.mapResizeEvent(event));
+        })
             .on('resizemove', (event) => {
             if (this.enableResizeDefault) {
                 this.resizeListener(event);
@@ -780,23 +870,33 @@ class ResizableDirective {
             this.resizeMove.emit(mappedEvent);
         })
             .on('resizeinertiastart', (event) => this.resizeInertiaStart.emit(this.mapResizeEvent(event)))
-            .on('resizeend', (event) => this.resizeEnd.emit(this.mapResizeEvent(event)));
+            .on('resizeend', (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));
+        });
     }
     mapResizeEvent(event) {
         var _a, _b;
-        const target = event.target;
+        const target = this.el.nativeElement;
         const relatedTarget = (_b = (_a = this.draggable_dir) === null || _a === void 0 ? void 0 : _a.dropzone_dir) === null || _b === void 0 ? void 0 : _b.el.nativeElement;
+        const scale = this.scale;
         const 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,
+            size: {
+                width: target.clientWidth / scale,
+                height: target.clientHeight / scale
+            }
         };
     }
     alignDimensionsWithInputs(width, height) {
@@ -805,6 +905,20 @@ class ResizableDirective {
     addResizePropertiesToElement(nativeElement) {
         this.renderer.setProperty(nativeElement, 'resizeRef', this);
     }
+    subscribeToScrollEvents() {
+        this.scrollEventsSubscription = this.auto_scroll_dir.scrollDeltaObserver.subscribe(({ scrollLeft, scrollTop }) => {
+            const scale = this.scale;
+            const target = this.el.nativeElement;
+            const { width: prevWidth, height: prevHeight } = target.getBoundingClientRect();
+            const deltaHeight = scrollTop * (this.activeEdges.top ? -1 : this.activeEdges.bottom ? 1 : 0);
+            const deltaWidth = scrollLeft * (this.activeEdges.left ? -1 : this.activeEdges.right ? 1 : 0);
+            const height = (prevHeight + deltaHeight) / scale;
+            const width = (prevWidth + deltaWidth) / scale;
+            const deltaX = this.activeEdges.left ? (scrollLeft / scale) : 0;
+            const deltaY = this.activeEdges.top ? (scrollTop / scale) : 0;
+            this.interactService.updateSize(this.interactableId, this.registryId, { deltaX, deltaY, width, height }, this.el.nativeElement);
+        });
+    }
 }
 ResizableDirective.decorators = [
     { type: Directive, args: [{
@@ -830,7 +944,8 @@ ResizableDirective.ctorParameters = () => [
     { type: DragRootDirective, decorators: [{ type: Optional }] },
     { type: AccountForScaleDirective, decorators: [{ type: Optional }] },
     { type: DraggableDirective, decorators: [{ type: Optional }] },
-    { type: DropzoneDirective, decorators: [{ type: Optional }, { type: SkipSelf }] }
+    { type: DropzoneDirective, decorators: [{ type: Optional }, { type: SkipSelf }] },
+    { type: AutoScrollDirective, decorators: [{ type: Optional }, { type: SkipSelf }] }
 ];
 ResizableDirective.propDecorators = {
     enableResizeDefault: [{ type: Input }],
@@ -923,20 +1038,14 @@ GesturableDirective.propDecorators = {
 class ApplyScaleDirective {
     constructor(el) {
         this.el = el;
-        this.scaleX = 1;
-        this.scaleY = 1;
-        this.transformOrigin = '0 0';
+        this._scale = 1;
     }
     // this setup allows consumers to set x, y scale independently or just set them both with scale
     set scale(val) {
-        this.scaleY = val;
-        this.scaleX = val;
+        this._scale;
+        this.fontSize = `${val}px`;
     }
     ;
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ngOnChanges(_changes) {
-        this.transform = `scaleX(${this.scaleX}) scaleY(${this.scaleY})`;
-    }
 }
 ApplyScaleDirective.decorators = [
     { type: Directive, args: [{
@@ -948,10 +1057,7 @@ ApplyScaleDirective.ctorParameters = () => [
 ];
 ApplyScaleDirective.propDecorators = {
     scale: [{ type: Input }],
-    scaleX: [{ type: Input }],
-    scaleY: [{ type: Input }],
-    transform: [{ type: HostBinding, args: ['style.transform',] }],
-    transformOrigin: [{ type: Input }, { type: HostBinding, args: ['style.transformOrigin',] }]
+    fontSize: [{ type: HostBinding, args: ['style.fontSize',] }]
 };
 
 const EXPORTS = [
@@ -960,16 +1066,28 @@ const EXPORTS = [
     DropzoneDirective,
     GesturableDirective,
     DragRootDirective,
+    AutoScrollDirective,
     AccountForScaleDirective,
     ApplyScaleDirective,
     DragPreviewDirective,
     ArrayOfNPipe,
 ];
 class InteractModule {
+    static forRoot(config) {
+        const defaultConfig = { cssDimensionUnit: 'px' };
+        return {
+            ngModule: InteractModule,
+            providers: [
+                { provide: INTERACT_ROOT_CONFIG, useValue: Object.assign(Object.assign({}, defaultConfig), config) },
+                InteractService
+            ]
+        };
+    }
 }
 InteractModule.decorators = [
     { type: NgModule, args: [{
                 imports: [CommonModule],
+                // providers: [{ provide: INTERACT_ROOT_CONFIG, useValue: 'px' }],
                 declarations: [
                     ...EXPORTS,
                 ],
@@ -983,5 +1101,5 @@ InteractModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AccountForScaleDirective, ApplyScaleDirective, ArrayOfNPipe, DEFAULT_REGISTRY_ID, DragPreviewDirective, DragRootDirective, DraggableDirective, DropzoneDirective, GesturableDirective, InteractModule, ResizableDirective, TFT_DRAG_PREVIEW, cloneElement$1 as cloneElement, defaultDelta, defaultPosition, defaultSize, getClosestMatchingAncestor, getRootNode, DraggableDirective as ɵa, ResizableDirective as ɵb, DropzoneDirective as ɵc, GesturableDirective as ɵd, DragRootDirective as ɵe, AccountForScaleDirective as ɵf, ApplyScaleDirective as ɵg, DragPreviewDirective as ɵh, ArrayOfNPipe as ɵi };
+export { AccountForScaleDirective, ApplyScaleDirective, ArrayOfNPipe, AutoScrollDirective, DEFAULT_REGISTRY_ID, DragPreviewDirective, DragRootDirective, DraggableDirective, DropzoneDirective, GesturableDirective, INTERACT_ROOT_CONFIG, InteractModule, ResizableDirective, TFT_DRAG_PREVIEW, cloneElement$1 as cloneElement, defaultDelta, defaultPosition, defaultSize, getClosestMatchingAncestor, getRootNode, DraggableDirective as ɵa, ResizableDirective as ɵb, DropzoneDirective as ɵc, GesturableDirective as ɵd, DragRootDirective as ɵe, AutoScrollDirective as ɵf, AccountForScaleDirective as ɵg, ApplyScaleDirective as ɵh, DragPreviewDirective as ɵi, ArrayOfNPipe as ɵj };
 //# sourceMappingURL=tft-interact.js.map