@tft/interact 12.4.3 → 12.5.3

package/esm2015/lib/directives/apply-scale.directive.js

@@ -2,20 +2,14 @@ import { Directive, ElementRef, HostBinding, Input } from '@angular/core';
 export 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: [{
@@ -27,9 +21,6 @@ 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',] }]
 };
 //# sourceMappingURL=apply-scale.directive.js.map

package/esm2015/lib/directives/apply-scale.directive.js.map

@@ -1 +1 @@
-{"version":3,"file":"apply-scale.directive.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/apply-scale.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,EAA4B,MAAM,eAAe,CAAC;AAKpG,MAAM,OAAO,mBAAmB;IAc9B,YACS,EAAc;QAAd,OAAE,GAAF,EAAE,CAAY;QAPd,WAAM,GAAG,CAAC,CAAC;QACX,WAAM,GAAG,CAAC,CAAC;QAG2B,oBAAe,GAAG,KAAK,CAAC;IAInE,CAAC;IAdJ,+FAA+F;IAChG,IAAa,KAAK,CAAC,GAAW;QAC5B,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC;QAClB,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC;IACpB,CAAC;IAAA,CAAC;IAYF,6DAA6D;IAC7D,WAAW,CAAC,QAAuB;QACjC,IAAI,CAAC,SAAS,GAAG,UAAU,IAAI,CAAC,MAAM,YAAY,IAAI,CAAC,MAAM,GAAG,CAAC;IACnE,CAAC;;;YAxBF,SAAS,SAAC;gBACT,QAAQ,EAAE,iBAAiB;aAC5B;;;YAJmB,UAAU;;;oBAQ3B,KAAK;qBAKL,KAAK;qBACL,KAAK;wBAEL,WAAW,SAAC,iBAAiB;8BAC7B,KAAK,YAAI,WAAW,SAAC,uBAAuB","sourcesContent":["import { Directive, ElementRef, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';\n\n@Directive({\n  selector: '[tftApplyScale]'\n})\nexport class ApplyScaleDirective implements OnChanges {\n\n   // this setup allows consumers to set x, y scale independently or just set them both with scale\n  @Input() set scale(val: number){\n    this.scaleY = val;\n    this.scaleX = val;\n  };\n\n  @Input() scaleX = 1;\n  @Input() scaleY = 1;\n\n  @HostBinding('style.transform') transform: string;\n  @Input() @HostBinding('style.transformOrigin') transformOrigin = '0 0';\n\n  constructor(\n    public el: ElementRef\n  ) { }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  ngOnChanges(_changes: SimpleChanges) {\n    this.transform = `scaleX(${this.scaleX}) scaleY(${this.scaleY})`;\n  }\n}\n"]}
+{"version":3,"file":"apply-scale.directive.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/apply-scale.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAK1E,MAAM,OAAO,mBAAmB;IAW9B,YACS,EAAc;QAAd,OAAE,GAAF,EAAE,CAAY;QAVvB,WAAM,GAAG,CAAC,CAAC;IAWP,CAAC;IAVJ,+FAA+F;IAChG,IAAa,KAAK,CAAC,GAAW;QAC5B,IAAI,CAAC,MAAM,CAAC;QACZ,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC;IAC7B,CAAC;IAAA,CAAC;;;YAVH,SAAS,SAAC;gBACT,QAAQ,EAAE,iBAAiB;aAC5B;;;YAJmB,UAAU;;;oBAS3B,KAAK;uBAKL,WAAW,SAAC,gBAAgB","sourcesContent":["import { Directive, ElementRef, HostBinding, Input } from '@angular/core';\n\n@Directive({\n  selector: '[tftApplyScale]'\n})\nexport class ApplyScaleDirective {\n\n  _scale = 1;\n   // this setup allows consumers to set x, y scale independently or just set them both with scale\n  @Input() set scale(val: number){\n    this._scale;\n    this.fontSize = `${val}px`;\n  };\n\n  @HostBinding('style.fontSize') fontSize: string;\n\n  constructor(\n    public el: ElementRef\n  ) { }\n}\n"]}

package/esm2015/lib/directives/apply-scale.directive.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"ApplyScaleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[tftApplyScale]"}]}],"members":{"scale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"scaleX":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"scaleY":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"transform":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":16,"character":3},"arguments":["style.transform"]}]}],"transformOrigin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":17,"character":12},"arguments":["style.transformOrigin"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":20,"character":15}]}],"ngOnChanges":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"ApplyScaleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[tftApplyScale]"}]}],"members":{"scale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"fontSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":14,"character":3},"arguments":["style.fontSize"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":17,"character":15}]}]}}}}]

package/esm2015/lib/directives/apply-scale.directive.ngfactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"apply-scale.directive.ngfactory.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/apply-scale.directive.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n"]}

package/esm2015/lib/directives/auto-scroll.directive.js

@@ -0,0 +1,54 @@
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { scan, shareReplay } from 'rxjs/operators';
+;
+/**
+ * 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
+ */
+export 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'],] }]
+};
+//# sourceMappingURL=auto-scroll.directive.js.map

package/esm2015/lib/directives/auto-scroll.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-scroll.directive.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/auto-scroll.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAc,OAAO,EAAE,MAAM,MAAM,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEW,CAAC;AAC/D;;;;;GAKG;AAIH,MAAM,OAAO,mBAAmB;IAsB9B,YACS,EAAc;QAAd,OAAE,GAAF,EAAE,CAAY;QAtBvB;;WAEG;QACM,qBAAgB,GAAG;YAC1B,MAAM,EAAE,EAAE;YACV,QAAQ,EAAE,CAAC;YACX,QAAQ,EAAE,EAAE;YACZ,KAAK,EAAE,GAAG;YACV,OAAO,EAAE,IAAI;SACd,CAAC;QAGO,wBAAmB,GAAG,IAAI,OAAO,EAAgB,CAAC;QAYzD,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAI,EAAE,CAAC,aAA6B,CAAC;QACpE,IAAI,CAAC,aAAa,GAAG,IAAI,eAAe,CAAC,EAAC,SAAS,EAAE,UAAU,EAAC,CAAC,CAAC;QAClE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAC3C,IAAI,CAAC,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE;YACzB,MAAM,SAAS,GAAG,OAAO,CAAC,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC;YACzD,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,GAAG,QAAQ,CAAC,UAAU,CAAC;YAC5D,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAC,SAAS,EAAE,UAAU,EAAC,CAAC,CAAC;YACvD,OAAO,OAAO,CAAC;QACjB,CAAC,CAAC,EACF,WAAW,CAAC,CAAC,CAAC,CACf,CAAA;QACD,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;IAClC,CAAC;IAvBD,+FAA+F;IAC3D,MAAM,CAAC,WAAkB;QAC3D,MAAM,MAAM,GAAI,WAAW,CAAC,MAAsB,CAAC;QACnD,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC;QACzC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAC,SAAS,EAAE,UAAU,EAAC,CAAC,CAAA;IAClD,CAAC;;;YAtBF,SAAS,SAAC;gBACT,QAAQ,EAAE,iBAAiB;aAC5B;;;YAbmB,UAAU;;;+BAkB3B,KAAK;qBAWL,YAAY,SAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC","sourcesContent":["import { Directive, ElementRef, HostListener, Input } from '@angular/core';\nimport { BehaviorSubject, Observable, Subject } from 'rxjs';\nimport { scan, shareReplay } from 'rxjs/operators';\n\ninterface ScrollObject {scrollTop: number, scrollLeft: number};\n/**\n * Use to apply scale to the element and tell the drag and resize directives to account for the scale when\n * @example <div tftAccountForScale [scale]=\"2.5\"> <div tftDraggable> </div> </div>\n * @note if `dragRoot` is used this directive should be used on the same element to ensure that the drag\n * element accounts for scale\n */\n@Directive({\n  selector: '[tftAutoScroll]'\n})\nexport class AutoScrollDirective {\n  /**\n   * Limit minimum time between scroll events in milliseconds\n   */\n  @Input() autoScrollConfig = {\n    margin: 50,\n    distance: 3,\n    interval: 50,\n    speed: 300,\n    enabled: true\n  };\n  private scrollSubject: BehaviorSubject<ScrollObject>;\n  readonly scrollObserver: Observable<ScrollObject>;\n  readonly scrollDeltaObserver = new Subject<ScrollObject>();\n  // this setup allows consumers to set x, y scale independently or just set them both with scale\n  @HostListener('scroll', ['$event']) scroll(scrollEvent: Event) {\n    const target = (scrollEvent.target as HTMLElement);\n    const { scrollTop, scrollLeft } = target;\n    this.scrollSubject.next({scrollTop, scrollLeft})\n  }\n\n\n  constructor(\n    public el: ElementRef\n  ) {\n    const { scrollTop, scrollLeft } = (el.nativeElement as HTMLElement);\n    this.scrollSubject = new BehaviorSubject({scrollTop, scrollLeft});\n    this.scrollObserver = this.scrollSubject.pipe(\n      scan((previous, current) => {\n        const scrollTop = current.scrollTop - previous.scrollTop;\n        const scrollLeft = current.scrollLeft - previous.scrollLeft;\n        this.scrollDeltaObserver.next({scrollTop, scrollLeft});\n        return current;\n      }),\n      shareReplay(1),\n    )\n    this.scrollObserver.subscribe();\n  }\n\n}\n"]}

package/esm2015/lib/directives/auto-scroll.directive.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"AutoScrollDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":11,"character":1},"arguments":[{"selector":"[tftAutoScroll]"}]}],"members":{"autoScrollConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"scroll":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":29,"character":3},"arguments":["scroll",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":37,"character":15}]}]}}}}]

package/esm2015/lib/directives/auto-scroll.directive.ngfactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-scroll.directive.ngfactory.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/auto-scroll.directive.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n"]}

package/esm2015/lib/directives/drag-preview.directive.ngfactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-preview.directive.ngfactory.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/drag-preview.directive.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n"]}

package/esm2015/lib/directives/drag-root.directive.js

@@ -1,26 +1,23 @@
-import { Directive, ElementRef, Optional, Self } from '@angular/core';
 import { AccountForScaleDirective } from './account-for-scale.directive';
+import { Directive, ElementRef, Optional, Self } from '@angular/core';
 /**
  * Use this directive to select which element to attach the element to while dragging
  * @example <div tftDragRoot><div tftDraggable> </div> </div>
  * @note this directive will overwrite any style transformations (e.g. transform: scale(2); )
  */
 export 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 = () => [

package/esm2015/lib/directives/drag-root.directive.js.map

@@ -1 +1 @@
-{"version":3,"file":"drag-root.directive.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/drag-root.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAEzE;;;;GAIG;AAIH,MAAM,OAAO,iBAAiB;IAE5B,YACS,EAAc,EACD,qBAAgD;QAD7D,OAAE,GAAF,EAAE,CAAY;QAGrB,kFAAkF;QAClF,mEAAmE;QACnE,gFAAgF;QAChF,yFAAyF;QACzF,kDAAkD;QAClD,IAAG,CAAC,qBAAqB,EAAE;YACxB,EAAE,CAAC,aAA6B,CAAC,KAAK,CAAC,SAAS,GAAG,UAAU,CAAC;SAChE;IACH,CAAC;;;YAjBF,SAAS,SAAC;gBACT,QAAQ,EAAE,eAAe;aAC1B;;;YAVmB,UAAU;YACrB,wBAAwB,uBAc5B,QAAQ,YAAI,IAAI","sourcesContent":["import { Directive, ElementRef, Optional, Self } from '@angular/core';\nimport { AccountForScaleDirective } from './account-for-scale.directive';\n\n/**\n * Use this directive to select which element to attach the element to while dragging\n * @example <div tftDragRoot><div tftDraggable> </div> </div>\n * @note this directive will overwrite any style transformations (e.g. transform: scale(2); )\n */\n@Directive({\n  selector: '[tftDragRoot]'\n})\nexport class DragRootDirective {\n\n  constructor(\n    public el: ElementRef,\n    @Optional() @Self() account_for_scale_dir?: AccountForScaleDirective\n  ) {\n    // This accounts for a bug where drag element is misaligned when using a drag root\n    // with a dropzone inside of it and a drag item inside the dropzone\n    // e.g <div tftDragRoot> <div tftDropzone> <div tftDraggable</div> </div> </div>\n    // TODO: This is a band-aid, root cause in misunderstood, it started after switching from\n    // using `translate3d` to top/left for positioning\n    if(!account_for_scale_dir) {\n      (el.nativeElement as HTMLElement).style.transform = 'scale(1)';\n    }\n  }\n}\n"]}
+{"version":3,"file":"drag-root.directive.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/drag-root.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEtE;;;;GAIG;AAKH,MAAM,OAAO,iBAAiB;IAE5B,YACS,EAAc;IACrB,4GAA4G;IAC5G,+IAA+I;IACpH,qBAAgD;QAHpE,OAAE,GAAF,EAAE,CAAY;QAGM,0BAAqB,GAArB,qBAAqB,CAA2B;IACzE,CAAC;;;YAXN,SAAS,SAAC;gBACT,QAAQ,EAAE,eAAe;gBACzB,QAAQ,EAAE,aAAa;aACxB;;;YAVmB,UAAU;YADrB,wBAAwB,uBAkB5B,QAAQ,YAAI,IAAI","sourcesContent":["import { AccountForScaleDirective } from './account-for-scale.directive';\nimport { Directive, ElementRef, Optional, Self } from '@angular/core';\n\n/**\n * Use this directive to select which element to attach the element to while dragging\n * @example <div tftDragRoot><div tftDraggable> </div> </div>\n * @note this directive will overwrite any style transformations (e.g. transform: scale(2); )\n */\n@Directive({\n  selector: '[tftDragRoot]',\n  exportAs: 'tftDragRoot'\n})\nexport class DragRootDirective {\n\n  constructor(\n    public el: ElementRef,\n    // This is used when passing a dragRoot as in input to a draggable element that not a child of that dragRoot\n    // 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\n    @Optional() @Self() public account_for_scale_dir?: AccountForScaleDirective\n  ) { }\n}\n"]}

package/esm2015/lib/directives/drag-root.directive.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"DragRootDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":8,"character":1},"arguments":[{"selector":"[tftDragRoot]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":15,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self","line":15,"character":17}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":14,"character":15},{"__symbolic":"reference","module":"./account-for-scale.directive","name":"AccountForScaleDirective","line":15,"character":48}]}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"DragRootDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":8,"character":1},"arguments":[{"selector":"[tftDragRoot]","exportAs":"tftDragRoot"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":18,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self","line":18,"character":17}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":15,"character":15},{"__symbolic":"reference","module":"./account-for-scale.directive","name":"AccountForScaleDirective","line":18,"character":55}]}]}}}}]

package/esm2015/lib/directives/drag-root.directive.ngfactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-root.directive.ngfactory.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/drag-root.directive.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n"]}

package/esm2015/lib/directives/draggable.directive.js

@@ -8,11 +8,11 @@ import { DragPreviewDirective } from './drag-preview.directive';
 import { getRootNode } from '../utils';
 import { DragRootDirective } from './drag-root.directive';
 import { AccountForScaleDirective } from './account-for-scale.directive';
+import { AutoScrollDirective } from './auto-scroll.directive';
 /** @dynamic */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export 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;
@@ -21,6 +21,7 @@ export 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;
@@ -36,13 +37,18 @@ export 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);
@@ -93,12 +99,15 @@ export 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);
@@ -109,8 +118,9 @@ export 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,
@@ -138,8 +148,12 @@ export 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
@@ -157,13 +171,18 @@ export 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) => {
@@ -185,15 +204,25 @@ export 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: [{
@@ -214,7 +243,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 }],

package/esm2015/lib/directives/draggable.directive.js.map

@@ -1 +1 @@
-{"version":3,"file":"draggable.directive.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/draggable.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import { Directive, ElementRef, Input, OnInit, Output,\n   OnDestroy, EventEmitter, Optional, SkipSelf, Renderer2, SimpleChanges, OnChanges, ContentChild, ViewContainerRef, Inject, AfterViewInit } from '@angular/core';\nimport { DOCUMENT } from '@angular/common'\nimport interact from 'interactjs';\nimport { InteractService } from '../services/interact.service';\nimport { DraggableOptions, Interactable } from '@interactjs/types/index';\nimport { Subscription, Observable } from 'rxjs';\nimport { DropzoneDirective } from './dropzone.directive';\nimport { NgDragEvent, TftDragEvent, DEFAULT_REGISTRY_ID, TftCoords, TftDragElement} from '../models';\nimport { DragPreviewDirective } from './drag-preview.directive';\nimport { getRootNode } from '../utils';\nimport { DragRootDirective } from './drag-root.directive';\nimport { AccountForScaleDirective } from './account-for-scale.directive';\n\n/** @dynamic */\n@Directive({\n  selector: '[tftDraggable]',\n  // eslint-disable-next-line @angular-eslint/no-host-metadata-property\n  host: {\n    '[style.touchAction]': 'this.dragDisabled ? \"auto\" : \"none\"',\n    '[style.position]': '\"absolute\"',\n    '[id]': 'interactableId',\n  }\n})\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport class DraggableDirective<D = any> implements OnInit, OnChanges, OnDestroy, AfterViewInit {\n\n\n  @Input() x: number;\n  @Input() y: number;\n  /* zIndex while dragging*/\n  @Input() dragZIndex = 10000;\n  /** zIndex while at rest */\n  @Input() zIndex: number\n  @Input() interactableId: string;\n  @Input() dragData: D;\n  @Input() enableDragDefault = true;\n  /**\n   * @deprecated replaced by 'dragDisabled' property, please migrate before v13\n   */\n  @Input() disabled = false;\n  @Input() dragDisabled = false;\n  @Input() dragConfig: Partial<Interact.OrBoolean<DraggableOptions>>;\n  @Input() showPlaceholder = false;\n\n  /**\n   * The element we want to prepend the drag element to.\n   * Use `tftDragRoot` directive on a parent element to set custom root element\n   *  @default document.body\n   */\n  @Input() dragRoot: HTMLElement;\n\n  // pipes all interact events to event emitters\n  @Output() dragStart = new EventEmitter<TftDragEvent>();\n  @Output() dragMove = new EventEmitter<TftDragEvent>();\n  @Output() dragInertiaStart = new EventEmitter<TftDragEvent>();\n  @Output() dragEnd = new EventEmitter<TftDragEvent>();\n\n  @ContentChild(DragPreviewDirective) _previewTemplate: DragPreviewDirective;\n  // dragPreview: Interact.Element;\n  interactableState: Observable<TftCoords>;\n  interactable: Interactable;\n  private registryId: string;\n  private interactableSubscription: Subscription;\n  // cache holding element to use as drag preview (the element the user sees being dragged around)\n  previewRef: TftDragElement;\n  // cache holding element to use as placeholder while dragging\n  constructor(\n    public el: ElementRef,\n    private interactService: InteractService,\n    private renderer: Renderer2,\n    private _viewContainerRef: ViewContainerRef,\n    @Inject(DOCUMENT) private _document: Document,\n    @Optional() public account_for_scale_dir?: AccountForScaleDirective,\n    @Optional() @SkipSelf() public dropzone_dir?: DropzoneDirective,\n    @Optional() @SkipSelf() public drag_root_dir?: DragRootDirective\n  ) { }\n\n  ngOnInit() {\n    this.interactable = this.initiateDragEvents(this.dragConfig, this.el.nativeElement);\n    this.dragRoot = this.dragRoot || this.drag_root_dir?.el?.nativeElement as HTMLElement || this._document.body;\n    // register with parent dropzone if it exists, otherwise use default\n    // this gives us a place on the registry to store our drag items that don't have a dropzone\n    this.registryId = this.dropzone_dir?.dropzoneId || DEFAULT_REGISTRY_ID;\n    // add draggable to directory and store its id\n    this.interactableId = this.interactService.addDraggableToRegistry(this.registryId, this.interactableId);\n    this.alignPositionWithInputs(this.x, this.y);\n    // cache subscription to interactable state so we can unsubscribe onDestroy\n    this.interactableState = this.interactService\n      .getInteractableState(this.interactableId, this.registryId);\n    // keep our cached position values in line with our drag state\n    this.interactableSubscription = this.interactableState.subscribe((state) => {\n      this.y = state.y;\n      this.x = state.x;\n    });\n    this.setDragConfig();\n  }\n\n  // TODO: watch config here as well and update interactable\n  ngOnChanges(changes: SimpleChanges) {\n    // we do this here instead of using a setter on the input so that it\n    // will only run once when there is a change to x and y\n    if(changes.y || changes.x) {\n      this.alignPositionWithInputs(this.x, this.y);\n    }\n    if(changes.dragConfig || changes.disabled || changes.dragDisabled) {\n      if(!this.interactable) return;\n      this.setDragConfig();\n    }\n    /**\n     * @deprecated remove this in v13\n     */\n    if (changes.disabled) {\n      console.warn(`It looks like your using the 'disabled' input on a tftDraggable directive, it has been deprecated and is replaced with 'dragDisabled', please migrate by v13`)\n    }\n  }\n\n  setDragConfig() {\n    const enabled = !(this.disabled || this.dragDisabled)\n    const dragConfig = {...this.dragConfig, enabled};\n    this.interactable.draggable(dragConfig);\n  }\n\n  ngAfterViewInit() {\n    this.addDragPropertiesToElement(this.el.nativeElement);\n    if (!this.dropzone_dir) {\n      this.previewRef = this.el.nativeElement;\n    }\n  }\n\n  ngOnDestroy() {\n    // clean up state and subscriptions related to destroyed component\n    this.interactableSubscription.unsubscribe();\n    this.interactService.destroyInteractable(this.interactableId, this.registryId);\n  }\n\n  dragMoveListener(event: NgDragEvent, element: Interact.Element) {\n    const { dx, dy } = event;\n    this.interactService.updateDeltas(\n      this.interactableId,\n      this.registryId,\n      {deltaX: dx, deltaY: dy},\n      element\n    );\n  }\n\n  setDragStyles(dragElement: HTMLElement) {\n    this.renderer.setStyle(dragElement, 'touchAction', 'none')\n    this.renderer.setStyle(dragElement, 'zIndex', this.dragZIndex)\n    this.renderer.setStyle(dragElement, 'position', 'fixed')\n  }\n\n  addDragPropertiesToElement(nativeElement: TftDragElement) {\n    this.renderer.setProperty(nativeElement, 'dropTarget', this.dropzone_dir || null);\n    this.renderer.setProperty(nativeElement, 'dragOrigin', this.dropzone_dir || null);\n    this.renderer.setProperty(nativeElement, 'dragRef', this);\n  }\n\n  mapDragEvent(event: NgDragEvent): TftDragEvent {\n    const { target, dropzone } = event;\n    const dropzoneElement = dropzone?.target || target.dropTarget?.el.nativeElement;\n    const positionInDropTarget = target && dropzoneElement\n      ? this.interactService.calculatePositionInElement(dropzoneElement, this.previewRef)\n      : null;\n    return {\n      interactEvent: event,\n      dragRef: this,\n      dragOrigin: target.dragOrigin,\n      dropTarget: target.dropTarget,\n      positionInDropTarget\n    }\n  }\n\n  setPosition(x: number, y: number) {\n    this.interactService.updatePosition(\n      this.interactableId,\n      this.registryId,\n      {x, y},\n      this.el.nativeElement\n    );\n  }\n\n  alignPositionWithInputs(x: number, y: number) {\n    // short circuit if positions aren't numbers or  if they haven't changed\n    if(!this.isValidPosition(x, y)) return;\n    this.interactService.updatePosition(\n      this.interactableId,\n      this.registryId,\n      {x, y},\n      this.el.nativeElement\n    );\n  }\n\n  isValidPosition(x: number, y: number) {\n    return this.isNumeric(x) && this.isNumeric(y);\n  }\n  // We use use this instead of isNaN here to try and help performance\n  // We should be able to reliably restrict to numbers or falsey values\n  isNumeric(num: number) {\n    return typeof num === 'number' && !isNaN(num);\n  }\n\n  initiateDragEvents(dragConfig: Partial<Interact.OrBoolean<DraggableOptions>>, nativeElement: HTMLElement) {\n    return interact(nativeElement).draggable({...dragConfig, enabled:  !(this.disabled || this.dragDisabled) })\n      .on('dragstart',  (event: NgDragEvent) => {\n        const interaction = event.interaction;\n\n        // check if we should append drag element to body\n        if ( this.enableDragDefault\n          && interaction.pointerIsDown\n          // TODO: probably don't need following condition checks anymore remove by 2022\n          // && !!this.dropzone_dir\n          // && !interaction.interacting()\n          ) {\n          if (this._previewTemplate) {\n            const viewRef = this._viewContainerRef.createEmbeddedView(this._previewTemplate.templateRef);\n            this.previewRef = getRootNode(viewRef, this._document);\n          } else {\n            this.previewRef = cloneElement(this.el.nativeElement);\n          }\n          this.addDragPropertiesToElement(this.previewRef);\n          this.setDragStyles(this.previewRef)\n\n          this.dragRoot.prepend(this.previewRef);\n\n          const {x, y} = this.interactService.calculatePositionInElement(this.dragRoot, nativeElement);\n          this.interactService.updatePosition(this.interactableId, this.registryId, {x, y}, this.previewRef);\n          if (!this.showPlaceholder) {\n            this.renderer.setStyle(this.el.nativeElement, 'display', 'none');\n          }\n        }\n        this.dragStart.emit(this.mapDragEvent(event));\n      })\n      .on('dragmove', (event: NgDragEvent) => {\n        if (this.enableDragDefault) {\n          const dragElement = this.dropzone_dir && this.previewRef || nativeElement\n          this.dragMoveListener(event, dragElement);\n        }\n        const mappedEvent = this.mapDragEvent(event);\n        this.dragMove.emit(mappedEvent);\n      })\n      .on('draginertiastart', (event: NgDragEvent) => {\n        this.dragInertiaStart.emit(this.mapDragEvent(event))\n      })\n      .on('dragend', (event: NgDragEvent) => {\n        const mappedEvent = this.mapDragEvent(event)\n        if(!!this.dropzone_dir && this.dropzone_dir === event.target.dropTarget) {\n          const { x, y} = mappedEvent.positionInDropTarget;\n          this.setPosition(x, y);\n        }\n        this.renderer.setStyle(this.el.nativeElement, 'display', '');\n        this.dragEnd.emit(mappedEvent);\n\n        if ( this.el.nativeElement !== this.previewRef) {\n          // we do this in a timeout, so that we don't\n          // remove before the dropzone can get the boundingElementRect\n          setTimeout(() => {\n            this.dragRoot.removeChild(this.previewRef);\n          })\n        }\n      });\n  }\n\n\n}\n\n/**\n * Component utils\n */\n// create a clone of the component passed in and add it to the root component\nfunction cloneElement(element: HTMLElement) {\n  const clone = element.cloneNode(true) as HTMLElement;\n  clone.removeAttribute('id');\n  return clone;\n}\nfunction getPreviewInsertionPoint(documentRef: any): HTMLElement {\n  // We can't use the body if the user is in fullscreen mode,\n  // because the preview will render under the fullscreen element.\n  return documentRef.fullscreenElement ||\n         documentRef.webkitFullscreenElement ||\n         documentRef.mozFullScreenElement ||\n         documentRef.msFullscreenElement ||\n         documentRef.body;\n}\n"]}
+{"version":3,"file":"draggable.directive.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/draggable.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import { Directive, ElementRef, Input, OnInit, Output,\n   OnDestroy, EventEmitter, Optional, SkipSelf, Renderer2, SimpleChanges, OnChanges, ContentChild, ViewContainerRef, Inject, AfterViewInit } from '@angular/core';\nimport { DOCUMENT } from '@angular/common'\nimport interact from 'interactjs';\nimport { InteractService } from '../services/interact.service';\nimport { DraggableOptions, Interactable } from '@interactjs/types/index';\nimport { Subscription, Observable } from 'rxjs';\nimport { DropzoneDirective } from './dropzone.directive';\nimport { NgDragEvent, TftDragEvent, DEFAULT_REGISTRY_ID, TftCoords, TftDragElement} from '../models';\nimport { DragPreviewDirective } from './drag-preview.directive';\nimport { getRootNode } from '../utils';\nimport { DragRootDirective } from './drag-root.directive';\nimport { AccountForScaleDirective } from './account-for-scale.directive';\nimport { AutoScrollDirective } from './auto-scroll.directive';\n\n/** @dynamic */\n@Directive({\n  selector: '[tftDraggable]',\n  // eslint-disable-next-line @angular-eslint/no-host-metadata-property\n  host: {\n    '[style.touchAction]': 'this.dragDisabled ? \"auto\" : \"none\"',\n    '[style.position]': '\"absolute\"',\n    '[id]': 'interactableId',\n  }\n})\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport class DraggableDirective<D = any> implements OnInit, OnChanges, OnDestroy, AfterViewInit {\n\n\n  @Input() x: number;\n  @Input() y: number;\n  /* zIndex while dragging*/\n  @Input() dragZIndex = 10000;\n  /** zIndex while at rest */\n  @Input() zIndex: number\n  @Input() interactableId: string;\n  @Input() dragData: D;\n  @Input() enableDragDefault = true;\n  /**\n   * @deprecated replaced by 'dragDisabled' property, please migrate before v13\n   */\n  @Input() disabled = false;\n  @Input() dragDisabled = false;\n  @Input() dragConfig: Partial<Interact.OrBoolean<DraggableOptions>>;\n  @Input() showPlaceholder = false;\n\n  /**\n   * The element we want to prepend the drag element to.\n   * Use `tftDragRoot` directive on a parent element to set custom root element\n   *  @default document.body\n   */\n  @Input() dragRoot: DragRootDirective; // HTMLElement;\n\n  private dragRootEl: HTMLElement;\n  // pipes all interact events to event emitters\n  @Output() dragStart = new EventEmitter<TftDragEvent>();\n  @Output() dragMove = new EventEmitter<TftDragEvent>();\n  @Output() dragInertiaStart = new EventEmitter<TftDragEvent>();\n  @Output() dragEnd = new EventEmitter<TftDragEvent>();\n\n  @ContentChild(DragPreviewDirective) _previewTemplate: DragPreviewDirective;\n  // dragPreview: Interact.Element;\n  interactableState: Observable<TftCoords>;\n  interactable: Interactable;\n  private registryId: string;\n  private interactableSubscription: Subscription;\n  private scrollEventsSubscription: Subscription;\n\n  // cache holding element to use as drag preview (the element the user sees being dragged around)\n  previewRef: TftDragElement;\n  // check all the different places for scale\n  get scale(): number {\n    return this.account_for_scale_dir?.scale || this.drag_root_dir?.account_for_scale_dir.scale || this.dragRoot?.account_for_scale_dir?.scale;\n  }\n\n  constructor(\n    public el: ElementRef,\n    private interactService: InteractService,\n    private renderer: Renderer2,\n    private _viewContainerRef: ViewContainerRef,\n    @Inject(DOCUMENT) private _document: Document,\n    @Optional() public account_for_scale_dir?: AccountForScaleDirective,\n    @Optional() @SkipSelf() public dropzone_dir?: DropzoneDirective,\n    @Optional() @SkipSelf() public drag_root_dir?: DragRootDirective,\n    @Optional() @SkipSelf() public auto_scroll_dir?: AutoScrollDirective\n  ) { }\n\n  ngOnInit() {\n    this.interactable = this.initiateDragEvents(this.dragConfig, this.el.nativeElement);\n    this.dragRootEl = (this.dragRoot?.el?.nativeElement || this.drag_root_dir?.el?.nativeElement) as HTMLElement || this._document.body;\n    // register with parent dropzone if it exists, otherwise use default\n    // this gives us a place on the registry to store our drag items that don't have a dropzone\n    this.registryId = this.dropzone_dir?.dropzoneId || DEFAULT_REGISTRY_ID;\n    // add draggable to directory and store its id\n    this.interactableId = this.interactService.addDraggableToRegistry(this.registryId, this.interactableId);\n    this.alignPositionWithInputs(this.x, this.y);\n    // cache subscription to interactable state so we can unsubscribe onDestroy\n    this.interactableState = this.interactService\n      .getInteractableState(this.interactableId, this.registryId);\n    // keep our cached position values in line with our drag state\n    this.interactableSubscription = this.interactableState.subscribe((state) => {\n      this.y = state.y;\n      this.x = state.x;\n    });\n    this.setDragConfig();\n  }\n\n  // TODO: watch config here as well and update interactable\n  ngOnChanges(changes: SimpleChanges) {\n    // we do this here instead of using a setter on the input so that it\n    // will only run once when there is a change to x and y\n    if(changes.y || changes.x) {\n      this.alignPositionWithInputs(this.x, this.y);\n    }\n    if(changes.dragConfig || changes.disabled || changes.dragDisabled) {\n      if(!this.interactable) return;\n      this.setDragConfig();\n    }\n    /**\n     * @deprecated remove this in v13\n     */\n    if (changes.disabled) {\n      console.warn(`It looks like your using the 'disabled' input on a tftDraggable directive, it has been deprecated and is replaced with 'dragDisabled', please migrate by v13`)\n    }\n  }\n\n  setDragConfig() {\n    const enabled = !(this.disabled || this.dragDisabled)\n    const dragConfig = {...this.dragConfig, enabled};\n    this.interactable.draggable(dragConfig);\n  }\n\n  ngAfterViewInit() {\n    this.addDragPropertiesToElement(this.el.nativeElement);\n    if (!this.dropzone_dir) {\n      this.previewRef = this.el.nativeElement;\n    }\n  }\n\n  ngOnDestroy() {\n    // clean up state and subscriptions related to destroyed component\n    this.interactableSubscription.unsubscribe();\n    this.interactService.destroyInteractable(this.interactableId, this.registryId);\n  }\n\n  dragMoveListener(event: NgDragEvent, element: Interact.Element) {\n    const { dx, dy } = event;\n    const scale = this.scale;\n    const deltaX = scale ? dx / scale : dx;\n    const deltaY = scale ? dy / scale : dy;\n\n    this.interactService.updateDeltas(\n      this.interactableId,\n      this.registryId,\n      {deltaX, deltaY},\n      element\n    );\n  }\n\n  setDragStyles(dragElement: HTMLElement) {\n    this.renderer.setStyle(dragElement, 'touchAction', 'none')\n    this.renderer.setStyle(dragElement, 'zIndex', this.dragZIndex)\n    this.renderer.setStyle(dragElement, 'position', 'absolute')\n  }\n\n  addDragPropertiesToElement(nativeElement: TftDragElement) {\n    this.renderer.setProperty(nativeElement, 'dropTarget', this.dropzone_dir || null);\n    this.renderer.setProperty(nativeElement, 'dragOrigin', this.dropzone_dir || null);\n    this.renderer.setProperty(nativeElement, 'dragRef', this);\n  }\n\n  mapDragEvent(event: NgDragEvent): TftDragEvent {\n    const { target, dropzone } = event;\n    const dropzoneElement = dropzone?.target || target.dropTarget?.el.nativeElement;\n    const scale = this.scale;\n    const positionInDropTarget = target && dropzoneElement\n      ? this.interactService.calculatePositionInElement(dropzoneElement, this.previewRef, scale)\n      : null;\n    return {\n      interactEvent: event,\n      dragRef: this,\n      dragOrigin: target.dragOrigin,\n      dropTarget: target.dropTarget,\n      positionInDropTarget\n    }\n  }\n\n  setPosition(x: number, y: number) {\n    this.interactService.updatePosition(\n      this.interactableId,\n      this.registryId,\n      {x, y},\n      this.el.nativeElement\n    );\n  }\n\n  alignPositionWithInputs(x: number, y: number) {\n    // short circuit if positions aren't numbers or  if they haven't changed\n    if(!this.isValidPosition(x, y)) return;\n    this.interactService.updatePosition(\n      this.interactableId,\n      this.registryId,\n      {x, y},\n      this.el.nativeElement\n    );\n  }\n\n  isValidPosition(x: number, y: number) {\n    return this.isNumeric(x) && this.isNumeric(y);\n  }\n  // We use use this instead of isNaN here to try and help performance\n  // We should be able to reliably restrict to numbers or falsey values\n  isNumeric(num: number) {\n    return typeof num === 'number' && !isNaN(num);\n  }\n\n  initiateDragEvents(dragConfig: Partial<Interact.OrBoolean<DraggableOptions>>, nativeElement: HTMLElement) {\n    const defaultDragConfig = {\n      ...dragConfig,\n      enabled:  !(this.disabled || this.dragDisabled),\n      ...(this.auto_scroll_dir && {\n        autoScroll:\n          {\n            ...this.auto_scroll_dir.autoScrollConfig,\n            container: this.auto_scroll_dir.el.nativeElement as HTMLElement\n          }\n        }\n      )\n    };\n    return interact(nativeElement).draggable(defaultDragConfig)\n      .on('dragstart',  (event: NgDragEvent) => {\n        const interaction = event.interaction;\n        // check if we should append drag element to body\n        if ( this.enableDragDefault\n          && interaction.pointerIsDown\n          // TODO: probably don't need following condition checks anymore remove by 2022\n          // && !!this.dropzone_dir\n          // && !interaction.interacting()\n          ) {\n          if (this._previewTemplate) {\n            const viewRef = this._viewContainerRef.createEmbeddedView(this._previewTemplate.templateRef);\n            this.previewRef = getRootNode(viewRef, this._document);\n          } else {\n            this.previewRef = cloneElement(this.el.nativeElement);\n          }\n          this.addDragPropertiesToElement(this.previewRef);\n          this.setDragStyles(this.previewRef)\n\n          this.dragRootEl.prepend(this.previewRef);\n          const scale = this.account_for_scale_dir?.scale || this.dragRoot?.account_for_scale_dir?.scale || 1;\n          const {x, y} = this.interactService.calculatePositionInElement(this.dragRootEl, nativeElement, scale);\n          this.interactService.updatePosition(this.interactableId, this.registryId, {x, y}, this.previewRef);\n          if (!this.showPlaceholder) {\n            this.renderer.setStyle(this.el.nativeElement, 'display', 'none');\n          }\n        }\n        // subscribe to scroll events if they are there, by only subscribing on dragstart we avoid wasting subscriptions on interactables that aren't be dragged\n        if (this.auto_scroll_dir) {\n          this.subscribeToScrollEvents();\n        }\n        this.dragStart.emit(this.mapDragEvent(event));\n      })\n      .on('dragmove', (event: NgDragEvent) => {\n        if (this.enableDragDefault) {\n          const dragElement = this.dropzone_dir && this.previewRef || nativeElement\n          this.dragMoveListener(event, dragElement);\n        }\n        const mappedEvent = this.mapDragEvent(event);\n        this.dragMove.emit(mappedEvent);\n      })\n      .on('draginertiastart', (event: NgDragEvent) => {\n        this.dragInertiaStart.emit(this.mapDragEvent(event))\n      })\n      .on('dragend', (event: NgDragEvent) => {\n        const mappedEvent = this.mapDragEvent(event)\n        if(!!this.dropzone_dir && this.dropzone_dir === event.target.dropTarget) {\n          const { x, y} = mappedEvent.positionInDropTarget;\n          this.setPosition(x, y);\n        }\n        this.renderer.setStyle(this.el.nativeElement, 'display', '');\n        this.dragEnd.emit(mappedEvent);\n        // unsubscribe from scroll events if subscribed\n        if (this.auto_scroll_dir) {\n          this.scrollEventsSubscription.unsubscribe();\n        }\n        if ( this.el.nativeElement !== this.previewRef) {\n          // we do this in a timeout, so that we don't remove before the dropzone can get the boundingElementRect\n          setTimeout(() => {\n            this.dragRootEl.removeChild(this.previewRef);\n          })\n        }\n      });\n  }\n\n  subscribeToScrollEvents() {\n    this.scrollEventsSubscription = this.auto_scroll_dir.scrollDeltaObserver.subscribe(({scrollLeft, scrollTop}) => {\n      const deltaX = this.scale ? scrollLeft / this.scale : scrollLeft;\n      const deltaY = this.scale ? scrollTop / this.scale : scrollTop;\n\n      this.interactService.updateDeltas(\n        this.interactableId,\n        this.registryId,\n        {deltaX, deltaY},\n        this.previewRef\n      );\n    });\n\n  }\n}\n\n/**\n * Component utils\n */\n// create a clone of the component passed in and add it to the root component\nfunction cloneElement(element: HTMLElement) {\n  const clone = element.cloneNode(true) as HTMLElement;\n  clone.removeAttribute('id');\n  return clone;\n}\nfunction getPreviewInsertionPoint(documentRef: any): HTMLElement {\n  // We can't use the body if the user is in fullscreen mode,\n  // because the preview will render under the fullscreen element.\n  return documentRef.fullscreenElement ||\n         documentRef.webkitFullscreenElement ||\n         documentRef.mozFullScreenElement ||\n         documentRef.msFullscreenElement ||\n         documentRef.body;\n}\n"]}

package/esm2015/lib/directives/draggable.directive.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"DraggableDirective":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":15,"character":1},"arguments":[{"selector":"[tftDraggable]","host":{"[style.touchAction]":"this.dragDisabled ? \"auto\" : \"none\"","[style.position]":"\"absolute\"","[id]":"interactableId","$quoted$":["[style.touchAction]","[style.position]","[id]"]}}]}],"members":{"x":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"y":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"dragZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"zIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"interactableId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"dragData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"enableDragDefault":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"dragDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"dragConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"showPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"dragRoot":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"dragStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":53,"character":3}}]}],"dragMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":3}}]}],"dragInertiaStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":3}}]}],"dragEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":3}}]}],"_previewTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":58,"character":3},"arguments":[{"__symbolic":"reference","module":"./drag-preview.directive","name":"DragPreviewDirective","line":58,"character":16}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":72,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":72,"character":12}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":73,"character":5}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":74,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":74,"character":17}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":75,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":75,"character":17}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":68,"character":15},{"__symbolic":"reference","module":"../services/interact.service","name":"InteractService","line":69,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":70,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":71,"character":31},{"__symbolic":"error","message":"Could not resolve type","line":72,"character":41,"context":{"typeName":"Document"}},{"__symbolic":"reference","module":"./account-for-scale.directive","name":"AccountForScaleDirective","line":73,"character":47},{"__symbolic":"reference","module":"./dropzone.directive","name":"DropzoneDirective","line":74,"character":50},{"__symbolic":"reference","module":"./drag-root.directive","name":"DragRootDirective","line":75,"character":51}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"setDragConfig":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"dragMoveListener":[{"__symbolic":"method"}],"setDragStyles":[{"__symbolic":"method"}],"addDragPropertiesToElement":[{"__symbolic":"method"}],"mapDragEvent":[{"__symbolic":"method"}],"setPosition":[{"__symbolic":"method"}],"alignPositionWithInputs":[{"__symbolic":"method"}],"isValidPosition":[{"__symbolic":"method"}],"isNumeric":[{"__symbolic":"method"}],"initiateDragEvents":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"DraggableDirective":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":16,"character":1},"arguments":[{"selector":"[tftDraggable]","host":{"[style.touchAction]":"this.dragDisabled ? \"auto\" : \"none\"","[style.position]":"\"absolute\"","[id]":"interactableId","$quoted$":["[style.touchAction]","[style.position]","[id]"]}}]}],"members":{"x":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"y":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"dragZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"zIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"interactableId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"dragData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"enableDragDefault":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"dragDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"dragConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"showPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"dragRoot":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3}}]}],"dragStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":3}}]}],"dragMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":3}}]}],"dragInertiaStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":57,"character":3}}]}],"dragEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":58,"character":3}}]}],"_previewTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":60,"character":3},"arguments":[{"__symbolic":"reference","module":"./drag-preview.directive","name":"DragPreviewDirective","line":60,"character":16}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":80,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":80,"character":12}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":81,"character":5}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":82,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":82,"character":17}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":83,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":83,"character":17}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":84,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":84,"character":17}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":76,"character":15},{"__symbolic":"reference","module":"../services/interact.service","name":"InteractService","line":77,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":78,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":79,"character":31},{"__symbolic":"error","message":"Could not resolve type","line":80,"character":41,"context":{"typeName":"Document"}},{"__symbolic":"reference","module":"./account-for-scale.directive","name":"AccountForScaleDirective","line":81,"character":47},{"__symbolic":"reference","module":"./dropzone.directive","name":"DropzoneDirective","line":82,"character":50},{"__symbolic":"reference","module":"./drag-root.directive","name":"DragRootDirective","line":83,"character":51},{"__symbolic":"reference","module":"./auto-scroll.directive","name":"AutoScrollDirective","line":84,"character":53}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"setDragConfig":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"dragMoveListener":[{"__symbolic":"method"}],"setDragStyles":[{"__symbolic":"method"}],"addDragPropertiesToElement":[{"__symbolic":"method"}],"mapDragEvent":[{"__symbolic":"method"}],"setPosition":[{"__symbolic":"method"}],"alignPositionWithInputs":[{"__symbolic":"method"}],"isValidPosition":[{"__symbolic":"method"}],"isNumeric":[{"__symbolic":"method"}],"initiateDragEvents":[{"__symbolic":"method"}],"subscribeToScrollEvents":[{"__symbolic":"method"}]}}}}]

package/esm2015/lib/directives/draggable.directive.ngfactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draggable.directive.ngfactory.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/draggable.directive.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n"]}

package/esm2015/lib/directives/dropzone.directive.js

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, Input, Output, EventEmitter, Renderer2, Optional } from '@angular/core';
+import { Directive, ElementRef, Input, Output, EventEmitter, Renderer2, Optional, HostBinding } from '@angular/core';
 import interact from 'interactjs';
 import { InteractService } from '../services/interact.service';
 import { AccountForScaleDirective } from './account-for-scale.directive';
@@ -9,12 +9,17 @@ export 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);
@@ -60,10 +65,7 @@ export 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;
@@ -80,7 +82,7 @@ DropzoneDirective.decorators = [
     { type: Directive, args: [{
                 selector: '[tftDropzone]',
                 host: {
-                    '[id]': 'dropzoneId',
+                    '[id]': 'dropzoneId'
                 }
             },] }
 ];
@@ -94,6 +96,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 }],