@tft/interact 12.5.2 → 12.5.3

package/bundles/tft-interact.umd.js

@@ -626,6 +626,7 @@
             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();
@@ -704,7 +705,7 @@
         { type: i0.Directive, args: [{
                     selector: '[tftDropzone]',
                     host: {
-                        '[id]': 'dropzoneId',
+                        '[id]': 'dropzoneId'
                     }
                 },] }
     ];
@@ -718,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 }],
@@ -805,10 +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 () {
-        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;
@@ -817,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;
@@ -949,7 +1005,10 @@
         };
         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;
@@ -977,6 +1036,10 @@
                         _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) {
@@ -998,6 +1061,10 @@
                 }
                 _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
                     setTimeout(function () {
@@ -1006,6 +1073,15 @@
                 }
             });
         };
+        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 = [
@@ -1027,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 }],
@@ -1069,7 +1146,7 @@
 
     /** @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;
@@ -1079,6 +1156,7 @@
             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';
@@ -1090,6 +1168,7 @@
             this.defaultConfig = {
                 edges: { left: true, right: true, bottom: true, top: true }
             };
+            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", {
@@ -1127,23 +1206,16 @@
             this.interactService.destroyInteractable(this.interactableId, this.registryId);
         };
         ResizableDirective.prototype.resizeListener = function (event) {
+            var element = this.el.nativeElement;
             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;
-            }
+            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);
         };
         /**
@@ -1157,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);
@@ -1168,11 +1249,17 @@
                 _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
@@ -1197,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 = [
@@ -1223,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 }],
@@ -1351,6 +1455,7 @@
         DropzoneDirective,
         GesturableDirective,
         DragRootDirective,
+        AutoScrollDirective,
         AccountForScaleDirective,
         ApplyScaleDirective,
         DragPreviewDirective,
@@ -1387,6 +1492,7 @@
     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;
@@ -1408,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 });