npm - @tft/interact - Versions diffs - 12.4.3 → 12.5.0 - Mend

@tft/interact 12.4.3 → 12.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"interact.service.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/services/interact.service.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAa,gBAAgB,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,eAAe,EAAc,aAAa,EAAE,MAAM,MAAM,CAAC;AAClE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAEL,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,mBAAmB,EAChE,MAAM,WAAW,CAAC;;AAGnB,MAAM,OAAO,eAAe;IAS1B,YACU,eAAiC,EACjC,MAAc;QADd,oBAAe,GAAf,eAAe,CAAkB;QACjC,WAAM,GAAN,MAAM,CAAQ;QAThB,uBAAkB,GAAG,CAAC,CAAC;QACvB,mBAAc,GAAG,CAAC,CAAC;QAG3B,gCAAgC;QACvB,uBAAkB,GAA4C,EAAG,CAAC;QAMzE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAClE,CAAC;IAED,kBAAkB,CAAC,KAAY,EAAE,QAAkB;QACjD,OAAO;YACL,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC,CAAC;YAC5B,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC,CAAC;YAC5B,aAAa,EAAE,QAAQ,CAAC,aAAa,IAAI,KAAK,CAAC,aAAa;SAC7D,CAAA;IACH,CAAC;IAED,mBAAmB,CAAC,mBAAkC,IAAI;QACxD,MAAM,UAAU,GAAG,gBAAgB,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;QACpF,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC;QACzC,OAAO,UAAU,CAAC;IACpB,CAAC;IAED,sBAAsB,CAAC,gBAAgB,GAAG,IAAI,EAAE,iBAAgC,IAAI;QAClF,MAAM,UAAU,GAAG,gBAAgB,IAAI,mBAAmB,CAAC;QAC3D,0FAA0F;QAC1F,gEAAgE;QAChE,MAAM,GAAG,GAAG,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAE,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,EAAE;YAC9E,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC;SAC1C;QACD,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,uBAAuB,CAAC,eAAe,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;QACpH,OAAO,GAAG,CAAA;IACZ,CAAC;IAED,mBAAmB,CAAC,cAAsB,EAAE,UAAU,GAAG,mBAAmB;QAC1E,IAAG,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,EAAE;YACtD,OAAO,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,CAAC;SAC5D;IACH,CAAC;IAED,uBAAuB,CAAC,cAAsB,EAAE,UAAU,GAAG,mBAAmB;QAC9E,OAAO,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,CAAC;IAC7D,CAAC;IAED,uBAAuB,CAAC,eAAyB,EAAE,WAAiB,EAAE,YAAmB;QAEvF,MAAM,OAAO,GAAG,IAAI,eAAe,CAAC,YAAY,CAAC,CAAC;QAClD,iCAAiC;QACjC,MAAM,KAAK,GAAG,IAAI,eAAe,iCAAK,WAAW,GAAK,YAAY,EAAE,CAAC;QACrE,qCAAqC;QACrC,MAAM,SAAS,GAAG,IAAI,eAAe,CAAC,eAAe,CAAC,CAAC;QAEvD,qCAAqC;QACrC,MAAM,aAAa,GAA0B,aAAa,CAAC;YACzD,KAAK,CAAC,IAAI;YACR,gDAAgD;YAChD,WAAW,CAAC,CAAC,CAAC;YACd,sDAAsD;YACtD,GAAG,CAAC,CAAC,EAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAC,EAAE,EAAE;gBACrD,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,EAAE;oBACjC,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC;gBACpD,CAAC,CAAC,CAAC;gBACH,4DAA4D;gBAC5D,IAAG,MAAM,IAAI,MAAM,EAAE;oBACnB,OAAO,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,MAAM,EAAE,aAAa,EAAC,CAAC,CAAC;iBAC/C;YACH,CAAC,CAAC,CACH;YACD,OAAO,CAAC,IAAI,CACV,WAAW,CAAC,CAAC,CAAC,EACd,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBACZ,MAAM,QAAQ,GAAG,SAAS,CAAC,KAAK,CAAC;gBACjC,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;gBAC7D,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAC9B,CAAC,CAAC,CACH;YACD,SAAS,CAAC,IAAI,CACZ,WAAW,CAAC,CAAC,CAAC,EACd,GAAG,CAAE,QAAQ,CAAC,EAAE;gBACd,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,EAAE;oBACjC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;gBAC7D,CAAC,CAAC,CAAA;YACJ,CAAC,CAAC,CACH;SACA,CAAC,CAAC,IAAI,CACP,WAAW,CAAC,CAAC,CAAC,EACd,GAAG,CAAE,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAY,EAAE;YAC1C,OAAO;gBACL,CAAC,EAAE,QAAQ,CAAC,CAAC;gBACb,CAAC,EAAE,QAAQ,CAAC,CAAC;gBACb,MAAM,EAAE,MAAM,CAAC,MAAM;gBACrB,MAAM,EAAE,MAAM,CAAC,MAAM;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,aAAa,EAAE,IAAI,CAAC,aAAa,IAAI,QAAQ,CAAC,aAAa,IAAI,MAAM,CAAC,aAAa;aACpF,CAAA;QACH,CAAC,CAAC,CACH,CAAA;QACD,6DAA6D;QAC7D,OAAO;YACL,OAAO;YACP,SAAS;YACT,KAAK;YACL,aAAa;SACd,CAAA;IACH,CAAC;IAED,oBAAoB,CAAC,uBAAsC,IAAI;QAC7D,OAAO,oBAAoB,IAAI,eAAe,IAAI,CAAC,kBAAkB,EAAE,EAAE,CAAA;IAC3E,CAAC;IAED,gBAAgB,CAAC,KAAa;QAC5B,OAAO,WAAW,KAAK,EAAE,CAAA;IAC3B,CAAC;IAED,oBAAoB,CAAE,cAAsB,EAAE,UAAU,GAAG,mBAAmB;QAC5E,OAAO,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,CAAC,aAAa,CAAC;IAC3E,CAAC;IAED,YAAY,CAAC,UAAkB,EAAE,UAAkB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,aAAa;QACpF,IAAI,CAAC,IAAI,CAAC,2BAA2B,CAAC,UAAU,EAAE,UAAU,CAAC;YAAE,OAAO;QACtE,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAA;IACjG,CAAC;IAED,cAAc,CAAC,UAAkB,EAAE,UAAkB,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa;QAC5E,IAAI,CAAC,IAAI,CAAC,2BAA2B,CAAC,UAAU,EAAE,UAAU,CAAC;YAAE,OAAO;QACtE,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,aAAa,EAAE,CAAC,CAAA;IACzF,CAAC;IAED,UAAU,CAAC,UAAkB,EAAE,UAAkB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,aAAa;QACjG,IAAI,CAAC,IAAI,CAAC,2BAA2B,CAAC,UAAU,EAAE,UAAU,CAAC;YAAE,OAAM;QACrE,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAC,CAAC,CAAC;IAC7G,CAAC;IAED,2BAA2B,CAAC,UAAkB,EAAE,UAAU,GAAG,mBAAmB;QAC9E,OAAO,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,UAAU,CAAC;eACpD,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;IACtE,CAAC;IACD;;;;;OAKG;IACH,cAAc,CAAC,KAAa,EAAE,MAAc,EAAE,MAAwB;;QACpE,IAAG,CAAC,MAAM;YAAE,OAAO;QAEnB,MAAM,wBAAwB,GAAG,MAAA,MAAM,CAAC,SAAS,0CAAE,qBAAqB,CAAA;QACxE,IAAI,wBAAwB,EAAE;YAC5B,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,wBAAwB,CAAA;YACnD,MAAM,WAAW,GAAG,KAAK,GAAG,MAAM,CAAC;YACnC,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;YACrC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG,WAAW,IAAI,CAAC,CAAC;YAC5D,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,EAAE,QAAQ,EAAE,GAAG,YAAY,IAAI,CAAC,CAAC;SAC/D;aAAM;YACL,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC;YACtD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,IAAI,CAAC,CAAC;SACzD;IACH,CAAC;IACD;;;;;OAKG;IACH,mBAAmB,CAAC,CAAS,EAAE,CAAS,EAAE,QAAkB;;QAC1D,IAAG,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,aAAa,CAAA;YAAE,OAAO;QACpC,MAAM,wBAAwB,GAAG,MAAA,MAAA,QAAQ,CAAC,aAAa,0CAAE,OAAO,0CAAE,qBAAqB,CAAA;QACvF,IAAI,wBAAwB,EAAE;YAC5B,MAAM,EAAC,MAAM,EAAE,MAAM,EAAC,GAAG,wBAAwB,CAAC;YAClD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,EAAE,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC;YAC1E,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,EAAE,KAAK,EAAE,GAAG,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC;SAC1E;aAAM;YACL,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,EAAE,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;YACjE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,EAAE,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;SACjE;IACH,CAAC;IACD;;;;;OAKG;IACH,qBAAqB,CAAC,CAAS,EAAE,CAAS;QACxC,OAAO,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAA;IACzC,CAAC;IAED,0BAA0B,CAAC,WAA6B,EAAE,WAA2B,EAAE,KAA8B;QACnH,qGAAqG;QACrG,MAAM,QAAQ,GAAG,WAAW,CAAC,qBAAqB,EAAE,CAAC;QACrD,MAAM,QAAQ,GAAG,WAAW,CAAC,qBAAqB,EAAE,CAAC;QACrD,MAAM,QAAQ,GAAG,KAAK;YACpB,CAAC,CAAC;gBACF,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC,IAAK,CAAC;gBAClD,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,CAAC;aAC9C,CAAC,CAAC,CAAC;YACF,CAAC,EAAE,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI;YAChC,CAAC,EAAE,QAAQ,CAAC,GAAG,GAAG,QAAQ,CAAC,GAAG;SACjC,CAAC;QACF,OAAO,QAAQ,CAAC;IAClB,CAAC;;;;YAjNF,UAAU,SAAC,EAAC,UAAU,EAAE,MAAM,EAAC;;;YARA,gBAAgB;YAAE,MAAM","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"]}
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, Inject, InjectionToken, Optional, AfterViewInit } 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 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 // 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 const accountForScaleDirective = target.resizeRef?.account_for_scale_dir\n if (accountForScaleDirective) {\n const { scale } = accountForScaleDirective\n const scaledWidth = width / scale;\n const scaledHeight = height / scale;\n this.renderer.setStyle(target, 'width', `${scaledWidth}${this.cssUnit}`);\n this.renderer.setStyle(target, 'height', `${scaledHeight}${this.cssUnit}`);\n } else {\n this.renderer.setStyle(target, 'width', `${width}${this.cssUnit}`);\n this.renderer.setStyle(target, 'height', `${height}${this.cssUnit}`);\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 dragRef = position.targetElement?.dragRef;\n const accountForScaleDirective = dragRef?.account_for_scale_dir \|\| dragRef?.dragRoot?.account_for_scale_dir\n if (accountForScaleDirective) {\n const {scale} = accountForScaleDirective;\n this.renderer.setStyle(position.targetElement, 'left', `${x / scale}${this.cssUnit}`);\n this.renderer.setStyle(position.targetElement, 'top', `${y / scale}${this.cssUnit}`);\n } else {\n this.renderer.setStyle(position.targetElement, 'left', `${x}${this.cssUnit}`);\n this.renderer.setStyle(position.targetElement, 'top', `${y}${this.cssUnit}`);\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}${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 CHANGED Viewed

	@@ -1 +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":{}}}}}]
1	+ [{"__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/fesm2015/tft-interact.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Pipe, Injectable, RendererFactory2, NgZone, Directive, ElementRef, Input, EventEmitter, Renderer2, Optional, Output, InjectionToken, TemplateRef, Self, ViewContainerRef, Inject, SkipSelf, ContentChild, HostBinding, NgModule } from '@angular/core';
+import { Pipe, InjectionToken, Injectable, RendererFactory2, NgZone, Optional, Inject, Directive, ElementRef, Input, EventEmitter, Renderer2, Output, TemplateRef, Self, ViewContainerRef, SkipSelf, ContentChild, HostBinding, NgModule } from '@angular/core';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import interact from 'interactjs';
 import { BehaviorSubject, combineLatest } from 'rxjs';
@@ -22,6 +22,7 @@ ArrayOfNPipe.decorators = [
             },] }
 ];
+const INTERACT_ROOT_CONFIG = new InjectionToken('INTERACT_ROOT_CONFIG_PARAMS');
 const DEFAULT_REGISTRY_ID = 'DEFAULT';
 /**
  * Default initial value for Delta BehaviorSubject
@@ -49,14 +50,17 @@ const defaultPosition = {
 };
 class InteractService {
-    constructor(rendererFactory, ngZone) {
+    constructor(rendererFactory, ngZone, rootConfig) {
         this.rendererFactory = rendererFactory;
         this.ngZone = ngZone;
+        this.rootConfig = rootConfig;
         this._interactableIndex = 0;
         this._dropzoneIndex = 0;
         // TODO: consider using Map here
         this.dragRegistrySystem = {};
+        this.cssUnit = 'px';
         this.renderer = this.rendererFactory.createRenderer(null, null);
+        this.cssUnit = (rootConfig === null || rootConfig === void 0 ? void 0 : rootConfig.cssDimensionUnit) || 'px';
     }
     addDeltaToPosition(delta, position) {
         return {
@@ -164,8 +168,8 @@ class InteractService {
         this.dragRegistrySystem[registryId][interactId].size$.next({ deltaX, deltaY, width, height, targetElement });
     }
     interactableExistOnRegistry(interactId, registryId = DEFAULT_REGISTRY_ID) {
-        return this.dragRegistrySystem.hasOwnProperty(registryId)
-            && this.dragRegistrySystem[registryId].hasOwnProperty(interactId);
+        // eslint-disable-next-line no-prototype-builtins
+        return this.dragRegistrySystem.hasOwnProperty(registryId) && this.dragRegistrySystem[registryId].hasOwnProperty(interactId);
     }
     /**
      * Uses renderer to set width and height of angular component
@@ -179,15 +183,15 @@ class InteractService {
             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`);
+            const { scale } = accountForScaleDirective;
+            const scaledWidth = width / scale;
+            const scaledHeight = height / scale;
+            this.renderer.setStyle(target, 'width', `${scaledWidth}${this.cssUnit}`);
+            this.renderer.setStyle(target, 'height', `${scaledHeight}${this.cssUnit}`);
         }
         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}`);
         }
     }
     /**
@@ -200,15 +204,16 @@ class InteractService {
         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;
+        const dragRef = (_a = position.targetElement) === null || _a === void 0 ? void 0 : _a.dragRef;
+        const accountForScaleDirective = (dragRef === null || dragRef === void 0 ? void 0 : dragRef.account_for_scale_dir) || ((_b = dragRef === null || dragRef === void 0 ? void 0 : dragRef.dragRoot) === 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`);
+            const { scale } = accountForScaleDirective;
+            this.renderer.setStyle(position.targetElement, 'left', `${x / scale}${this.cssUnit}`);
+            this.renderer.setStyle(position.targetElement, 'top', `${y / scale}${this.cssUnit}`);
         }
         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}`);
         }
     }
     /**
@@ -218,7 +223,7 @@ class InteractService {
      * @param y the position along the y axis
      */
     createTransformString(x, y) {
-        return `translate3d(${x}px, ${y}px, 0)`;
+        return `translate3d(${x}${this.cssUnit}, ${y}${this.cssUnit}, 0)`;
     }
     calculatePositionInElement(zoneElement, dragElement, scale) {
         // TODO: this calculation may not cover a lot of scenarios, keep an eye out for possible improvements
@@ -226,22 +231,24 @@ class InteractService {
         const dragRect = dragElement.getBoundingClientRect();
         const position = scale
             ? {
-                x: (dragRect.left - zoneRect.left) / scale.x || 1,
-                y: (dragRect.top - zoneRect.top) / scale.y || 1
+                x: (dragRect.left - zoneRect.left) / scale || 1,
+                y: (dragRect.top - zoneRect.top) / scale || 1
             } : {
             x: dragRect.left - zoneRect.left,
             y: dragRect.top - zoneRect.top
         };
+        // console.log({ y:position.y, drt:dragRect.top, zrt: zoneRect.top})
         return position;
     }
 }
-InteractService.ɵprov = i0.ɵɵdefineInjectable({ factory: function InteractService_Factory() { return new InteractService(i0.ɵɵinject(i0.RendererFactory2), i0.ɵɵinject(i0.NgZone)); }, token: InteractService, providedIn: "root" });
+InteractService.ɵprov = i0.ɵɵdefineInjectable({ factory: function InteractService_Factory() { return new InteractService(i0.ɵɵinject(i0.RendererFactory2), i0.ɵɵinject(i0.NgZone), i0.ɵɵinject(INTERACT_ROOT_CONFIG, 8)); }, token: InteractService, providedIn: "root" });
 InteractService.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
 InteractService.ctorParameters = () => [
     { type: RendererFactory2 },
-    { type: NgZone }
+    { type: NgZone },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [INTERACT_ROOT_CONFIG,] }] }
 ];
 /**
@@ -253,15 +260,9 @@ InteractService.ctorParameters = () => [
 class AccountForScaleDirective {
     constructor(el) {
         this.el = el;
-        this.scaleX = 1;
-        this.scaleY = 1;
+        // this setup allows consumers to set x, y scale independently or just set them both with scale
+        this.scale = 1;
     }
-    // this setup allows consumers to set x, y scale independently or just set them both with scale
-    set scale(val) {
-        this.scaleY = val;
-        this.scaleX = val;
-    }
-    ;
 }
 AccountForScaleDirective.decorators = [
     { type: Directive, args: [{
@@ -272,9 +273,7 @@ AccountForScaleDirective.ctorParameters = () => [
     { type: ElementRef }
 ];
 AccountForScaleDirective.propDecorators = {
-    scale: [{ type: Input }],
-    scaleX: [{ type: Input }],
-    scaleY: [{ type: Input }]
+    scale: [{ type: Input }]
 };
 class DropzoneDirective {
@@ -332,13 +331,10 @@ class DropzoneDirective {
      * @param event the drop event emitted by interact, extended with extra fields we added to
      */
     mapDropzoneEvent(event) {
-        var _a, _b;
+        var _a, _b, _c;
         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 = ((_c = this.account_for_scale_dir) === null || _c === void 0 ? void 0 : _c.scale) || null;
         const positionInDropTarget = zoneElement && dragElement
             ? this.interactService.calculatePositionInElement(zoneElement, dragElement, scale)
             : null;
@@ -435,21 +431,18 @@ function getRootNode(viewRef, _document) {
  * @note this directive will overwrite any style transformations (e.g. transform: scale(2); )
  */
 class DragRootDirective {
-    constructor(el, account_for_scale_dir) {
+    constructor(el,
+    // This is used when passing a dragRoot as in input to a draggable element that not a child of that dragRoot
+    // It allows the the interact service to check if the drag root has some scaling applied to it and account for it when the component is dragged
+    account_for_scale_dir) {
         this.el = el;
-        // This accounts for a bug where drag element is misaligned when using a drag root
-        // with a dropzone inside of it and a drag item inside the dropzone
-        // e.g <div tftDragRoot> <div tftDropzone> <div tftDraggable</div> </div> </div>
-        // TODO: This is a band-aid, root cause in misunderstood, it started after switching from
-        // using `translate3d` to top/left for positioning
-        if (!account_for_scale_dir) {
-            el.nativeElement.style.transform = 'scale(1)';
-        }
+        this.account_for_scale_dir = account_for_scale_dir;
     }
 }
 DragRootDirective.decorators = [
     { type: Directive, args: [{
-                selector: '[tftDragRoot]'
+                selector: '[tftDragRoot]',
+                exportAs: 'tftDragRoot'
             },] }
 ];
 DragRootDirective.ctorParameters = () => [
@@ -486,12 +479,12 @@ class DraggableDirective {
         this.dragEnd = new EventEmitter();
     }
     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);
@@ -547,7 +540,7 @@ class DraggableDirective {
     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);
@@ -606,8 +599,8 @@ 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 { x, y } = this.interactService.calculatePositionInElement(this.dragRootEl, nativeElement);
                 this.interactService.updatePosition(this.interactableId, this.registryId, { x, y }, this.previewRef);
                 if (!this.showPlaceholder) {
                     this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
@@ -635,10 +628,9 @@ class DraggableDirective {
             this.renderer.setStyle(this.el.nativeElement, 'display', '');
             this.dragEnd.emit(mappedEvent);
             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);
                 });
             }
         });
@@ -923,20 +915,14 @@ GesturableDirective.propDecorators = {
 class ApplyScaleDirective {
     constructor(el) {
         this.el = el;
-        this.scaleX = 1;
-        this.scaleY = 1;
-        this.transformOrigin = '0 0';
+        this._scale = 1;
     }
     // this setup allows consumers to set x, y scale independently or just set them both with scale
     set scale(val) {
-        this.scaleY = val;
-        this.scaleX = val;
+        this._scale;
+        this.fontSize = `${val}px`;
     }
     ;
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ngOnChanges(_changes) {
-        this.transform = `scaleX(${this.scaleX}) scaleY(${this.scaleY})`;
-    }
 }
 ApplyScaleDirective.decorators = [
     { type: Directive, args: [{
@@ -948,10 +934,7 @@ ApplyScaleDirective.ctorParameters = () => [
 ];
 ApplyScaleDirective.propDecorators = {
     scale: [{ type: Input }],
-    scaleX: [{ type: Input }],
-    scaleY: [{ type: Input }],
-    transform: [{ type: HostBinding, args: ['style.transform',] }],
-    transformOrigin: [{ type: Input }, { type: HostBinding, args: ['style.transformOrigin',] }]
+    fontSize: [{ type: HostBinding, args: ['style.fontSize',] }]
 };
 const EXPORTS = [
@@ -966,10 +949,21 @@ const EXPORTS = [
     ArrayOfNPipe,
 ];
 class InteractModule {
+    static forRoot(config) {
+        const defaultConfig = { cssDimensionUnit: 'px' };
+        return {
+            ngModule: InteractModule,
+            providers: [
+                { provide: INTERACT_ROOT_CONFIG, useValue: Object.assign(Object.assign({}, defaultConfig), config) },
+                InteractService
+            ]
+        };
+    }
 }
 InteractModule.decorators = [
     { type: NgModule, args: [{
                 imports: [CommonModule],
+                // providers: [{ provide: INTERACT_ROOT_CONFIG, useValue: 'px' }],
                 declarations: [
                     ...EXPORTS,
                 ],
@@ -983,5 +977,5 @@ InteractModule.decorators = [
  * Generated bundle index. Do not edit.
  */
-export { AccountForScaleDirective, ApplyScaleDirective, ArrayOfNPipe, DEFAULT_REGISTRY_ID, DragPreviewDirective, DragRootDirective, DraggableDirective, DropzoneDirective, GesturableDirective, InteractModule, ResizableDirective, TFT_DRAG_PREVIEW, cloneElement$1 as cloneElement, defaultDelta, defaultPosition, defaultSize, getClosestMatchingAncestor, getRootNode, DraggableDirective as ɵa, ResizableDirective as ɵb, DropzoneDirective as ɵc, GesturableDirective as ɵd, DragRootDirective as ɵe, AccountForScaleDirective as ɵf, ApplyScaleDirective as ɵg, DragPreviewDirective as ɵh, ArrayOfNPipe as ɵi };
+export { AccountForScaleDirective, ApplyScaleDirective, ArrayOfNPipe, DEFAULT_REGISTRY_ID, DragPreviewDirective, DragRootDirective, DraggableDirective, DropzoneDirective, GesturableDirective, INTERACT_ROOT_CONFIG, InteractModule, ResizableDirective, TFT_DRAG_PREVIEW, cloneElement$1 as cloneElement, defaultDelta, defaultPosition, defaultSize, getClosestMatchingAncestor, getRootNode, DraggableDirective as ɵa, ResizableDirective as ɵb, DropzoneDirective as ɵc, GesturableDirective as ɵd, DragRootDirective as ɵe, AccountForScaleDirective as ɵf, ApplyScaleDirective as ɵg, DragPreviewDirective as ɵh, ArrayOfNPipe as ɵi };
 //# sourceMappingURL=tft-interact.js.map