@tft/interact 12.4.3 → 12.5.3

package/esm2015/lib/services/interact.service.js

@@ -1,17 +1,21 @@
-import { Injectable, RendererFactory2, NgZone } from '@angular/core';
+import { Injectable, RendererFactory2, NgZone, Inject, Optional } from '@angular/core';
 import { BehaviorSubject, combineLatest } from 'rxjs';
 import { tap, map, shareReplay } from 'rxjs/operators';
-import { defaultPosition, defaultSize, defaultDelta, DEFAULT_REGISTRY_ID } from '../models';
+import { defaultPosition, defaultSize, defaultDelta, DEFAULT_REGISTRY_ID, INTERACT_ROOT_CONFIG } from '../models';
 import * as i0 from "@angular/core";
+import * as i1 from "../models/interact";
 export 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 {
@@ -28,7 +32,7 @@ export 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] = {};
@@ -37,7 +41,16 @@ export 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];
         }
     }
@@ -119,8 +132,8 @@ export 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
@@ -129,21 +142,10 @@ export 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
@@ -152,19 +154,10 @@ export 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
@@ -173,7 +166,7 @@ export 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
@@ -181,21 +174,23 @@ export 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(i1.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,] }] }
 ];
 //# sourceMappingURL=interact.service.js.map

package/esm2015/lib/services/interact.service.js.map

@@ -1 +1 @@
-{"version":3,"file":"interact.service.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/services/interact.service.ts"],"names":[],"mappings":"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","sourcesContent":["\nimport { Injectable, Renderer2, RendererFactory2, NgZone } from '@angular/core';\nimport { BehaviorSubject, Observable, combineLatest } from 'rxjs';\nimport { tap, map, shareReplay } from 'rxjs/operators';\nimport {\n  TftCoords, Delta, Size, Position, InteractableRegistry,\n  defaultPosition, defaultSize, defaultDelta, DEFAULT_REGISTRY_ID, TftDragElement, TftResizeElement\n} from '../models';\n\n@Injectable({providedIn: 'root'})\nexport class InteractService {\n\n  private _interactableIndex = 0;\n  private _dropzoneIndex = 0;\n  private renderer: Renderer2;\n\n  // TODO: consider using Map here\n  readonly dragRegistrySystem: { [key: string]: InteractableRegistry } = { };\n\n  constructor(\n    private rendererFactory: RendererFactory2,\n    private ngZone: NgZone\n  ) {\n    this.renderer = this.rendererFactory.createRenderer(null, null);\n  }\n\n  addDeltaToPosition(delta: Delta, position: Position) {\n    return {\n      x: delta.deltaX + position.x,\n      y: delta.deltaY + position.y,\n      targetElement: position.targetElement || delta.targetElement\n    }\n  }\n\n  addRegistryToSystem(customRegistryId: string | null = null) {\n    const registryId = customRegistryId || this.createDropzoneId(this._dropzoneIndex++);\n    this.dragRegistrySystem[registryId] = {};\n    return registryId;\n  }\n\n  addDraggableToRegistry(customRegistryId = null, interactableId: string | null = null ) {\n    const registryId = customRegistryId || DEFAULT_REGISTRY_ID;\n    // if we pass an id to createInteractableId then it is used when creating the interactable\n    // and returned, otherwise a an id is created for the draggable.\n    const key = this.createInteractableId(interactableId );\n    if (!Object.prototype.hasOwnProperty.call(this.dragRegistrySystem, registryId)) {\n      this.dragRegistrySystem[registryId] = {};\n    }\n    this.dragRegistrySystem[registryId][key] = this.createInteractableState(defaultPosition, defaultSize, defaultDelta);\n    return key\n  }\n\n  destroyInteractable(interactableId: string, registryId = DEFAULT_REGISTRY_ID) {\n    if(this.dragRegistrySystem[registryId][interactableId]) {\n      delete this.dragRegistrySystem[registryId][interactableId];\n    }\n  }\n\n  subscribeToInteractable(interactableId: string, registryId = DEFAULT_REGISTRY_ID) {\n    return this.dragRegistrySystem[registryId][interactableId];\n  }\n\n  createInteractableState(initialPosition: Position, initialSize: Size, initialDelta: Delta ) {\n\n    const deltas$ = new BehaviorSubject(initialDelta);\n    // tracks the size of the element\n    const size$ = new BehaviorSubject({...initialSize, ...initialDelta});\n    // Stream of positions as they change\n    const position$ = new BehaviorSubject(initialPosition);\n\n    // All draggable data mapped together\n    const interactable$: Observable<TftCoords> = combineLatest([\n      size$.pipe(\n        // startWith({...initialSize, ...initialDelta}),\n        shareReplay(1),\n        // filter(resizeEvent => !!resizeEvent.targetElement),\n        tap(({deltaX, deltaY, width, height, targetElement}) => {\n          this.ngZone.runOutsideAngular(() => {\n            this.setElementSize(width, height, targetElement);\n          });\n          // only reposition if necessary i.e when resizing left or up\n          if(deltaX || deltaY) {\n            deltas$.next({deltaX, deltaY, targetElement});\n          }\n        })\n      ),\n      deltas$.pipe(\n        shareReplay(1),\n        tap((delta) => {\n          const position = position$.value;\n          const newPosition = this.addDeltaToPosition(delta, position);\n          position$.next(newPosition);\n        })\n      ),\n      position$.pipe(\n        shareReplay(1),\n        tap( position => {\n          this.ngZone.runOutsideAngular(() => {\n            this.setElementTransform(position.x, position.y, position);\n          })\n        })\n      )\n      ]).pipe(\n      shareReplay(1),\n      map( ([size, deltas, position]): TftCoords=> {\n        return {\n          x: position.x,\n          y: position.y,\n          deltaX: deltas.deltaX,\n          deltaY: deltas.deltaY,\n          width: size.width,\n          height: size.height,\n          targetElement: size.targetElement || position.targetElement || deltas.targetElement\n        }\n      }),\n    )\n    // TODO: update system to handle only returning interactable$\n    return {\n      deltas$,\n      position$,\n      size$,\n      interactable$\n    }\n  }\n\n  createInteractableId(customInteractableId: string | null = null) {\n    return customInteractableId || `interactable${this._interactableIndex++}`\n  }\n\n  createDropzoneId(index: number) {\n    return `dropzone${index}`\n  }\n\n  getInteractableState( interactableId: string, registryId = DEFAULT_REGISTRY_ID) {\n    return this.dragRegistrySystem[registryId][interactableId].interactable$;\n  }\n\n  updateDeltas(interactId: string, registryId: string, { deltaX, deltaY }, targetElement) {\n    if (!this.interactableExistOnRegistry(interactId, registryId)) return;\n    this.dragRegistrySystem[registryId][interactId].deltas$.next({ deltaX, deltaY, targetElement })\n  }\n\n  updatePosition(interactId: string, registryId: string, { x, y }, targetElement) {\n    if (!this.interactableExistOnRegistry(interactId, registryId)) return;\n    this.dragRegistrySystem[registryId][interactId].position$.next({ x, y, targetElement })\n  }\n\n  updateSize(interactId: string, registryId: string, { deltaX, deltaY, width, height }, targetElement) {\n    if (!this.interactableExistOnRegistry(interactId, registryId)) return\n    this.dragRegistrySystem[registryId][interactId].size$.next({deltaX, deltaY, width, height, targetElement});\n  }\n\n  interactableExistOnRegistry(interactId: string, registryId = DEFAULT_REGISTRY_ID) {\n    return this.dragRegistrySystem.hasOwnProperty(registryId)\n      && this.dragRegistrySystem[registryId].hasOwnProperty(interactId);\n  }\n  /**\n   * Uses renderer to set width and height of angular component\n   * @param width the desired width of component\n   * @param height the desired height of component\n   * @param target the element to transform\n   */\n  setElementSize(width: number, height: number, target: TftResizeElement) {\n    if(!target) return;\n\n    const accountForScaleDirective = target.resizeRef?.account_for_scale_dir\n    if (accountForScaleDirective) {\n      const { scaleX, scaleY } = accountForScaleDirective\n      const scaledWidth = width / scaleX;\n      const scaledHeight = height / scaleY;\n      this.renderer.setStyle(target, 'width', `${scaledWidth}px`);\n      this.renderer.setStyle(target, 'height', `${scaledHeight}px`);\n    } else {\n      this.renderer.setStyle(target, 'width', `${width}px`);\n      this.renderer.setStyle(target, 'height', `${height}px`);\n    }\n  }\n  /**\n   * Uses renderer to set position of angular component\n   * @param x position on x axis\n   * @param y position on y axis\n   * @param target the element to transform\n   */\n  setElementTransform(x: number, y: number, position: Position ) {\n    if(!position?.targetElement) return;\n    const accountForScaleDirective = position.targetElement?.dragRef?.account_for_scale_dir\n    if (accountForScaleDirective) {\n      const {scaleX, scaleY} = accountForScaleDirective;\n      this.renderer.setStyle(position.targetElement, 'left', `${x / scaleX}px`);\n      this.renderer.setStyle(position.targetElement, 'top', `${y / scaleY}px`);\n    } else {\n      this.renderer.setStyle(position.targetElement, 'left', `${x}px`);\n      this.renderer.setStyle(position.targetElement, 'top', `${y}px`);\n    }\n  }\n  /**\n   * Generates a translate string for the x and y arguments passed to\n   * be passed to css transform\n   * @param x the position along the x axis\n   * @param y the position along the y axis\n   */\n  createTransformString(x: number, y: number) {\n    return `translate3d(${x}px, ${y}px, 0)`\n  }\n\n  calculatePositionInElement(zoneElement: Interact.Element, dragElement: TftDragElement, scale?: {x: number, y: number}) {\n    // TODO: this calculation may not cover a lot of scenarios, keep an eye out for possible improvements\n    const zoneRect = zoneElement.getBoundingClientRect();\n    const dragRect = dragElement.getBoundingClientRect();\n    const position = scale\n      ? {\n      x: (dragRect.left - zoneRect.left) / scale.x  || 1,\n      y: (dragRect.top - zoneRect.top) / scale.y || 1\n      } : {\n        x: dragRect.left - zoneRect.left,\n        y: dragRect.top - zoneRect.top\n    };\n    return position;\n  }\n}\n"]}
+{"version":3,"file":"interact.service.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/services/interact.service.ts"],"names":[],"mappings":"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","sourcesContent":["\nimport { Injectable, Renderer2, RendererFactory2, NgZone, Inject, Optional } from '@angular/core';\nimport { BehaviorSubject, Observable, combineLatest } from 'rxjs';\nimport { tap, map, shareReplay } from 'rxjs/operators';\nimport {\n  TftCoords, Delta, Size, Position, InteractableRegistry,\n  defaultPosition, defaultSize, defaultDelta, DEFAULT_REGISTRY_ID, TftDragElement, TftResizeElement, INTERACT_ROOT_CONFIG, InteractRootConfig\n} from '../models';\n\n\n\n@Injectable({providedIn: 'root'})\nexport class InteractService {\n\n  private _interactableIndex = 0;\n  private _dropzoneIndex = 0;\n  private renderer: Renderer2;\n\n  // TODO: consider using Map here\n  readonly dragRegistrySystem: { [key: string]: InteractableRegistry } = { };\n  private cssUnit = 'px'\n  constructor(\n    private rendererFactory: RendererFactory2,\n    private ngZone: NgZone,\n    @Optional() @Inject(INTERACT_ROOT_CONFIG) public rootConfig\n  ) {\n    this.renderer = this.rendererFactory.createRenderer(null, null);\n    this.cssUnit = rootConfig?.cssDimensionUnit || 'px';\n  }\n\n  addDeltaToPosition(delta: Delta, position: Position) {\n    return {\n      x: delta.deltaX + position.x,\n      y: delta.deltaY + position.y,\n      targetElement: position.targetElement || delta.targetElement\n    }\n  }\n\n  addRegistryToSystem(customRegistryId: string | null = null) {\n    const registryId = customRegistryId || this.createDropzoneId(this._dropzoneIndex++);\n    this.dragRegistrySystem[registryId] = {};\n    return registryId;\n  }\n\n  addDraggableToRegistry(customRegistryId = null, interactableId: string | null = null ) {\n    const registryId = customRegistryId || DEFAULT_REGISTRY_ID;\n    // if we pass an id to createInteractableId then it is used when creating the interactable\n    // and returned, otherwise a new id is created for the draggable.\n    const key = this.createInteractableId(interactableId );\n    if (!Object.prototype.hasOwnProperty.call(this.dragRegistrySystem, registryId)) {\n      this.dragRegistrySystem[registryId] = {};\n    }\n    this.dragRegistrySystem[registryId][key] = this.createInteractableState(defaultPosition, defaultSize, defaultDelta);\n    return key\n  }\n\n  destroyInteractable(interactableId: string, registryId = DEFAULT_REGISTRY_ID) {\n    const interactableSystem =this.dragRegistrySystem[registryId][interactableId];\n    if(interactableSystem) {\n      // unsubscribe from all the subscriptions if they're subscriptions\n      for (const propName in interactableSystem)  {\n        const prop = interactableSystem[propName];\n        if (prop.unsubscribe && typeof prop.unsubscribe === 'function' ) {\n          prop.unsubscribe();\n        };\n      }\n      delete this.dragRegistrySystem[registryId][interactableId];\n    }\n  }\n\n  subscribeToInteractable(interactableId: string, registryId = DEFAULT_REGISTRY_ID) {\n    return this.dragRegistrySystem[registryId][interactableId];\n  }\n\n  createInteractableState(initialPosition: Position, initialSize: Size, initialDelta: Delta ) {\n\n    const deltas$ = new BehaviorSubject(initialDelta);\n    // tracks the size of the element\n    const size$ = new BehaviorSubject({...initialSize, ...initialDelta});\n    // Stream of positions as they change\n    const position$ = new BehaviorSubject(initialPosition);\n\n    // All draggable data mapped together\n    const interactable$: Observable<TftCoords> = combineLatest([\n      size$.pipe(\n        // startWith({...initialSize, ...initialDelta}),\n        shareReplay(1),\n        // filter(resizeEvent => !!resizeEvent.targetElement),\n        tap(({deltaX, deltaY, width, height, targetElement}) => {\n          this.ngZone.runOutsideAngular(() => {\n            this.setElementSize(width, height, targetElement);\n          });\n          // only reposition if necessary i.e when resizing left or up\n          if(deltaX || deltaY) {\n            deltas$.next({deltaX, deltaY, targetElement});\n          }\n        })\n      ),\n      deltas$.pipe(\n        shareReplay(1),\n        tap((delta) => {\n          const position = position$.value;\n          const newPosition = this.addDeltaToPosition(delta, position);\n          position$.next(newPosition);\n        })\n      ),\n      position$.pipe(\n        shareReplay(1),\n        tap( position => {\n          this.ngZone.runOutsideAngular(() => {\n            this.setElementTransform(position.x, position.y, position);\n          })\n        })\n      )\n      ]).pipe(\n      shareReplay(1),\n      map( ([size, deltas, position]): TftCoords=> {\n        return {\n          x: position.x,\n          y: position.y,\n          deltaX: deltas.deltaX,\n          deltaY: deltas.deltaY,\n          width: size.width,\n          height: size.height,\n          targetElement: size.targetElement || position.targetElement || deltas.targetElement\n        }\n      }),\n    )\n    // TODO: update system to handle only returning interactable$\n    return {\n      deltas$,\n      position$,\n      size$,\n      interactable$\n    }\n  }\n\n  createInteractableId(customInteractableId: string | null = null) {\n    return customInteractableId || `interactable${this._interactableIndex++}`\n  }\n\n  createDropzoneId(index: number) {\n    return `dropzone${index}`\n  }\n\n  getInteractableState( interactableId: string, registryId = DEFAULT_REGISTRY_ID) {\n    return this.dragRegistrySystem[registryId][interactableId].interactable$;\n  }\n\n  updateDeltas(interactId: string, registryId: string, { deltaX, deltaY }, targetElement) {\n    if (!this.interactableExistOnRegistry(interactId, registryId)) return;\n    this.dragRegistrySystem[registryId][interactId].deltas$.next({ deltaX, deltaY, targetElement })\n  }\n\n  updatePosition(interactId: string, registryId: string, { x, y }: {x: number; y: number;}, targetElement) {\n    if (!this.interactableExistOnRegistry(interactId, registryId)) return;\n    this.dragRegistrySystem[registryId][interactId].position$.next({ x, y, targetElement })\n  }\n\n  updateSize(interactId: string, registryId: string, { deltaX, deltaY, width, height }, targetElement) {\n    if (!this.interactableExistOnRegistry(interactId, registryId)) return\n    this.dragRegistrySystem[registryId][interactId].size$.next({deltaX, deltaY, width, height, targetElement});\n  }\n\n  interactableExistOnRegistry(interactId: string, registryId = DEFAULT_REGISTRY_ID) {\n    // eslint-disable-next-line no-prototype-builtins\n    return this.dragRegistrySystem.hasOwnProperty(registryId) && this.dragRegistrySystem[registryId].hasOwnProperty(interactId);\n  }\n  /**\n   * Uses renderer to set width and height of angular component\n   * @param width the desired width of component\n   * @param height the desired height of component\n   * @param target the element to transform\n   */\n  setElementSize(width: number, height: number, target: TftResizeElement) {\n    if(!target) return;\n    this.renderer.setStyle(target, 'width', `${width}${this.cssUnit}`);\n    this.renderer.setStyle(target, 'height', `${height}${this.cssUnit}`);\n  }\n  /**\n   * Uses renderer to set position of angular component\n   * @param x position on x axis\n   * @param y position on y axis\n   * @param target the element to transform\n   */\n  setElementTransform(x: number, y: number, position: Position ) {\n    if(!position?.targetElement) return;\n    this.renderer.setStyle(position.targetElement, 'left', `${x}${this.cssUnit}`);\n    this.renderer.setStyle(position.targetElement, 'top', `${y}${this.cssUnit}`);\n  }\n  /**\n   * Generates a translate string for the x and y arguments passed to\n   * be passed to css transform\n   * @param x the position along the x axis\n   * @param y the position along the y axis\n   */\n  createTransformString(x: number, y: number) {\n    return `translate3d(${x}${this.cssUnit}, ${y}${this.cssUnit}, 0)`\n  }\n\n  calculatePositionInElement(zoneElement: Interact.Element, dragElement: TftDragElement, scale?: number) {\n    // TODO: this calculation may not cover a lot of scenarios, keep an eye out for possible improvements\n    const zoneRect = zoneElement.getBoundingClientRect();\n    const dragRect = dragElement.getBoundingClientRect();\n    const position = scale\n      ? {\n      x: (dragRect.left - zoneRect.left) / scale  || 1,\n      y: (dragRect.top - zoneRect.top) / scale || 1\n      } : {\n        x: dragRect.left - zoneRect.left,\n        y: dragRect.top - zoneRect.top\n    };\n    // console.log({ y:position.y, drt:dragRect.top, zrt: zoneRect.top})\n    return position;\n  }\n}\n"]}

package/esm2015/lib/services/interact.service.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"InteractService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":9,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"RendererFactory2","line":20,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":21,"character":20}]}],"addDeltaToPosition":[{"__symbolic":"method"}],"addRegistryToSystem":[{"__symbolic":"method"}],"addDraggableToRegistry":[{"__symbolic":"method"}],"destroyInteractable":[{"__symbolic":"method"}],"subscribeToInteractable":[{"__symbolic":"method"}],"createInteractableState":[{"__symbolic":"method"}],"createInteractableId":[{"__symbolic":"method"}],"createDropzoneId":[{"__symbolic":"method"}],"getInteractableState":[{"__symbolic":"method"}],"updateDeltas":[{"__symbolic":"method"}],"updatePosition":[{"__symbolic":"method"}],"updateSize":[{"__symbolic":"method"}],"interactableExistOnRegistry":[{"__symbolic":"method"}],"setElementSize":[{"__symbolic":"method"}],"setElementTransform":[{"__symbolic":"method"}],"createTransformString":[{"__symbolic":"method"}],"calculatePositionInElement":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"InteractService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":11,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":24,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":24,"character":17},"arguments":[{"__symbolic":"reference","module":"../models","name":"INTERACT_ROOT_CONFIG","line":24,"character":24}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"RendererFactory2","line":22,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":23,"character":20},null]}],"addDeltaToPosition":[{"__symbolic":"method"}],"addRegistryToSystem":[{"__symbolic":"method"}],"addDraggableToRegistry":[{"__symbolic":"method"}],"destroyInteractable":[{"__symbolic":"method"}],"subscribeToInteractable":[{"__symbolic":"method"}],"createInteractableState":[{"__symbolic":"method"}],"createInteractableId":[{"__symbolic":"method"}],"createDropzoneId":[{"__symbolic":"method"}],"getInteractableState":[{"__symbolic":"method"}],"updateDeltas":[{"__symbolic":"method"}],"updatePosition":[{"__symbolic":"method"}],"updateSize":[{"__symbolic":"method"}],"interactableExistOnRegistry":[{"__symbolic":"method"}],"setElementSize":[{"__symbolic":"method"}],"setElementTransform":[{"__symbolic":"method"}],"createTransformString":[{"__symbolic":"method"}],"calculatePositionInElement":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}}}}]

package/esm2015/lib/services/interact.service.ngfactory.js.map

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

package/esm2015/tft-interact.js

@@ -2,6 +2,6 @@
  * Generated bundle index. Do not edit.
  */
 export * from './index';
-export { AccountForScaleDirective as ɵf, ApplyScaleDirective as ɵg, DragPreviewDirective as ɵh, DragRootDirective as ɵe, DraggableDirective as ɵa, DropzoneDirective as ɵc, GesturableDirective as ɵd, ResizableDirective as ɵb } from './lib/directives';
-export { ArrayOfNPipe as ɵi } from './lib/pipes/array-of-n.pipe';
+export { AccountForScaleDirective as ɵg, ApplyScaleDirective as ɵh, AutoScrollDirective as ɵf, DragPreviewDirective as ɵi, DragRootDirective as ɵe, DraggableDirective as ɵa, DropzoneDirective as ɵc, GesturableDirective as ɵd, ResizableDirective as ɵb } from './lib/directives';
+export { ArrayOfNPipe as ɵj } from './lib/pipes/array-of-n.pipe';
 //# sourceMappingURL=tft-interact.js.map

package/esm2015/tft-interact.js.map

@@ -1 +1 @@
-{"version":3,"file":"tft-interact.js","sourceRoot":"","sources":["../../../../libs/interact/src/tft-interact.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC;AAExB,OAAO,EAAC,wBAAwB,IAAI,EAAE,EAAC,mBAAmB,IAAI,EAAE,EAAC,oBAAoB,IAAI,EAAE,EAAC,iBAAiB,IAAI,EAAE,EAAC,kBAAkB,IAAI,EAAE,EAAC,iBAAiB,IAAI,EAAE,EAAC,mBAAmB,IAAI,EAAE,EAAC,kBAAkB,IAAI,EAAE,EAAC,MAAM,kBAAkB,CAAC;AACjP,OAAO,EAAC,YAAY,IAAI,EAAE,EAAC,MAAM,6BAA6B,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {AccountForScaleDirective as ɵf,ApplyScaleDirective as ɵg,DragPreviewDirective as ɵh,DragRootDirective as ɵe,DraggableDirective as ɵa,DropzoneDirective as ɵc,GesturableDirective as ɵd,ResizableDirective as ɵb} from './lib/directives';\nexport {ArrayOfNPipe as ɵi} from './lib/pipes/array-of-n.pipe';"]}
+{"version":3,"file":"tft-interact.js","sourceRoot":"","sources":["../../../../libs/interact/src/tft-interact.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC;AAExB,OAAO,EAAC,wBAAwB,IAAI,EAAE,EAAC,mBAAmB,IAAI,EAAE,EAAC,mBAAmB,IAAI,EAAE,EAAC,oBAAoB,IAAI,EAAE,EAAC,iBAAiB,IAAI,EAAE,EAAC,kBAAkB,IAAI,EAAE,EAAC,iBAAiB,IAAI,EAAE,EAAC,mBAAmB,IAAI,EAAE,EAAC,kBAAkB,IAAI,EAAE,EAAC,MAAM,kBAAkB,CAAC;AAC3Q,OAAO,EAAC,YAAY,IAAI,EAAE,EAAC,MAAM,6BAA6B,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {AccountForScaleDirective as ɵg,ApplyScaleDirective as ɵh,AutoScrollDirective as ɵf,DragPreviewDirective as ɵi,DragRootDirective as ɵe,DraggableDirective as ɵa,DropzoneDirective as ɵc,GesturableDirective as ɵd,ResizableDirective as ɵb} from './lib/directives';\nexport {ArrayOfNPipe as ɵj} from './lib/pipes/array-of-n.pipe';"]}

package/esm2015/tft-interact.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./index"},{"from":"./lib/directives","export":[{"name":"AccountForScaleDirective","as":"ɵf"},{"name":"ApplyScaleDirective","as":"ɵg"},{"name":"DragPreviewDirective","as":"ɵh"},{"name":"DragRootDirective","as":"ɵe"},{"name":"DraggableDirective","as":"ɵa"},{"name":"DropzoneDirective","as":"ɵc"},{"name":"GesturableDirective","as":"ɵd"},{"name":"ResizableDirective","as":"ɵb"}]},{"from":"./lib/pipes/array-of-n.pipe","export":[{"name":"ArrayOfNPipe","as":"ɵi"}]}]}]
+[{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./index"},{"from":"./lib/directives","export":[{"name":"AccountForScaleDirective","as":"ɵg"},{"name":"ApplyScaleDirective","as":"ɵh"},{"name":"AutoScrollDirective","as":"ɵf"},{"name":"DragPreviewDirective","as":"ɵi"},{"name":"DragRootDirective","as":"ɵe"},{"name":"DraggableDirective","as":"ɵa"},{"name":"DropzoneDirective","as":"ɵc"},{"name":"GesturableDirective","as":"ɵd"},{"name":"ResizableDirective","as":"ɵb"}]},{"from":"./lib/pipes/array-of-n.pipe","export":[{"name":"ArrayOfNPipe","as":"ɵj"}]}]}]