@tft/interact 12.5.0 → 12.5.1

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: 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  // 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.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    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', '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 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        // 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\n          const {x, y} = this.interactService.calculatePositionInElement(this.dragRootEl, 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 remove before the dropzone can get the boundingElementRect\n          setTimeout(() => {\n            this.dragRootEl.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';\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  // 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  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.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    return interact(nativeElement).draggable({...dragConfig, enabled:  !(this.disabled || this.dragDisabled) })\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        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 remove before the dropzone can get the boundingElementRect\n          setTimeout(() => {\n            this.dragRootEl.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"]}

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":54,"character":3}}]}],"dragMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":3}}]}],"dragInertiaStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":3}}]}],"dragEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":57,"character":3}}]}],"_previewTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":59,"character":3},"arguments":[{"__symbolic":"reference","module":"./drag-preview.directive","name":"DragPreviewDirective","line":59,"character":16}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":73,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":73,"character":12}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":74,"character":5}}],[{"__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}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":76,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":76,"character":17}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":69,"character":15},{"__symbolic":"reference","module":"../services/interact.service","name":"InteractService","line":70,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":71,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":72,"character":31},{"__symbolic":"error","message":"Could not resolve type","line":73,"character":41,"context":{"typeName":"Document"}},{"__symbolic":"reference","module":"./account-for-scale.directive","name":"AccountForScaleDirective","line":74,"character":47},{"__symbolic":"reference","module":"./dropzone.directive","name":"DropzoneDirective","line":75,"character":50},{"__symbolic":"reference","module":"./drag-root.directive","name":"DragRootDirective","line":76,"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":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":54,"character":3}}]}],"dragMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":3}}]}],"dragInertiaStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":3}}]}],"dragEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":57,"character":3}}]}],"_previewTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":59,"character":3},"arguments":[{"__symbolic":"reference","module":"./drag-preview.directive","name":"DragPreviewDirective","line":59,"character":16}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":76,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":76,"character":12}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":77,"character":5}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":78,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":78,"character":17}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":79,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":79,"character":17}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":72,"character":15},{"__symbolic":"reference","module":"../services/interact.service","name":"InteractService","line":73,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":74,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":75,"character":31},{"__symbolic":"error","message":"Could not resolve type","line":76,"character":41,"context":{"typeName":"Document"}},{"__symbolic":"reference","module":"./account-for-scale.directive","name":"AccountForScaleDirective","line":77,"character":47},{"__symbolic":"reference","module":"./dropzone.directive","name":"DropzoneDirective","line":78,"character":50},{"__symbolic":"reference","module":"./drag-root.directive","name":"DragRootDirective","line":79,"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"}]}}}}]

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

@@ -15,6 +15,10 @@ export class DropzoneDirective {
         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);
@@ -57,10 +61,10 @@ export class DropzoneDirective {
      * @param event the drop event emitted by interact, extended with extra fields we added to
      */
     mapDropzoneEvent(event) {
-        var _a, _b, _c;
+        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 = ((_c = this.account_for_scale_dir) === null || _c === void 0 ? void 0 : _c.scale) || null;
+        const scale = this.scale;
         const positionInDropTarget = zoneElement && dragElement
             ? this.interactService.calculatePositionInElement(zoneElement, dragElement, scale)
             : null;

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

@@ -1 +1 @@
-{"version":3,"file":"dropzone.directive.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/dropzone.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import { Directive, ElementRef, Input, OnInit, Output, EventEmitter, SimpleChanges, OnChanges, Renderer2, Optional } from '@angular/core';\nimport interact from 'interactjs';\nimport { DropzoneOptions, Interactable } from '@interactjs/types/index';\nimport { InteractService } from '../services/interact.service';\nimport { NgDropEvent, TftDragElement, TftDropEvent } from '../models';\nimport { AccountForScaleDirective } from './account-for-scale.directive';\n@Directive({\n  selector: '[tftDropzone]',\n  host: {\n    '[id]': 'dropzoneId',\n  }\n})\nexport class DropzoneDirective implements OnInit, OnChanges {\n\n  @Input() dropzoneId: string;\n  @Input() dropzoneConfig: DropzoneOptions = {};\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Input() dropzoneData: any;\n  // proxies to pass interact events through to consumer of directive\n  @Output() dropActivate = new EventEmitter<TftDropEvent>();\n  @Output() dragEnter = new EventEmitter<TftDropEvent>();\n  @Output() dragLeave = new EventEmitter<TftDropEvent>();\n  @Output() dragDrop = new EventEmitter<TftDropEvent>();\n\n  dropzone: Interactable;\n  constructor(\n    public el: ElementRef,\n    private renderer: Renderer2,\n    private interactService: InteractService,\n    @Optional() private account_for_scale_dir?: AccountForScaleDirective\n  ) { }\n\n  ngOnInit() {\n    // connects\n    this.dropzone = this.connectDropzoneEvents(this.el.nativeElement, this.dropzoneConfig);\n    this.dropzoneId = this.interactService.addRegistryToSystem(this.dropzoneId);\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    if(!changes.dropzoneConfig || !this.dropzone) return;\n    // this.dropzone.unset();\n    // this.dropzone = this.connectDropzoneEvents(this.el.nativeElement, this.dropzoneConfig)\n    this.dropzone.dropzone(this.dropzoneConfig)\n  }\n  /**\n  * Connects element to interacts dropzone events and returns a reference to the interactable\n  * @param nativeElement the element to tie drop events to\n  * @param dropzoneConfig the interact configuration to use when connecting\n  */\n  connectDropzoneEvents(nativeElement, dropzoneConfig: DropzoneOptions) {\n    return interact(nativeElement).dropzone(dropzoneConfig)\n      // TODO: investigate when this fires in different scenarios\n      .on('dropactivate', (event: NgDropEvent) => {\n        this.dropActivate.emit(this.mapDropzoneEvent(event));\n      })\n      .on('dragenter', (event: NgDropEvent) => {\n        this.renderer.setProperty(event.relatedTarget, 'dropTarget', this)\n        this.dragEnter.emit(this.mapDropzoneEvent(event));\n      })\n      .on('dragleave', (event: NgDropEvent) => {\n        if ( event.relatedTarget.dropTarget === this) {\n          this.renderer.setProperty(event.relatedTarget, 'dropTarget', null)\n        }\n        this.dragLeave.emit(this.mapDropzoneEvent(event));\n      })\n      .on('drop',  (event: NgDropEvent) => {\n        this.dragDrop.emit(this.mapDropzoneEvent(event));\n      });\n  }\n  /**\n   * Maps the drop event emitted by interact to something a little easier to use\n   * @param event the drop event emitted by interact, extended with extra fields we added to\n   */\n  mapDropzoneEvent(event: NgDropEvent): TftDropEvent {\n    const zoneElement = event.target;\n    const dragElement = event.relatedTarget?.dragRef?.previewRef as TftDragElement;\n    const scale = this.account_for_scale_dir?.scale || null;\n    const positionInDropTarget = zoneElement && dragElement\n    ? this.interactService.calculatePositionInElement(zoneElement, dragElement, scale)\n    : null;\n    return {\n      interactEvent: event,\n      dragRef: dragElement.dragRef,\n      dragOrigin: dragElement.dragOrigin,\n      dropTarget: event.relatedTarget.dropTarget,\n      positionInDropTarget\n    }\n  }\n}\n"]}
+{"version":3,"file":"dropzone.directive.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/dropzone.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import { Directive, ElementRef, Input, OnInit, Output, EventEmitter, SimpleChanges, OnChanges, Renderer2, Optional } from '@angular/core';\nimport interact from 'interactjs';\nimport { DropzoneOptions, Interactable } from '@interactjs/types/index';\nimport { InteractService } from '../services/interact.service';\nimport { NgDropEvent, TftDragElement, TftDropEvent } from '../models';\nimport { AccountForScaleDirective } from './account-for-scale.directive';\n@Directive({\n  selector: '[tftDropzone]',\n  host: {\n    '[id]': 'dropzoneId',\n  }\n})\nexport class DropzoneDirective implements OnInit, OnChanges {\n\n  @Input() dropzoneId: string;\n  @Input() dropzoneConfig: DropzoneOptions = {};\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Input() dropzoneData: any;\n  // proxies to pass interact events through to consumer of directive\n  @Output() dropActivate = new EventEmitter<TftDropEvent>();\n  @Output() dragEnter = new EventEmitter<TftDropEvent>();\n  @Output() dragLeave = new EventEmitter<TftDropEvent>();\n  @Output() dragDrop = new EventEmitter<TftDropEvent>();\n\n  dropzone: Interactable;\n\n  get scale(): number {\n    return this.account_for_scale_dir?.scale;\n  }\n  constructor(\n    public el: ElementRef,\n    private renderer: Renderer2,\n    private interactService: InteractService,\n    @Optional() private account_for_scale_dir?: AccountForScaleDirective\n  ) { }\n\n  ngOnInit() {\n    // connects\n    this.dropzone = this.connectDropzoneEvents(this.el.nativeElement, this.dropzoneConfig);\n    this.dropzoneId = this.interactService.addRegistryToSystem(this.dropzoneId);\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    if(!changes.dropzoneConfig || !this.dropzone) return;\n    // this.dropzone.unset();\n    // this.dropzone = this.connectDropzoneEvents(this.el.nativeElement, this.dropzoneConfig)\n    this.dropzone.dropzone(this.dropzoneConfig)\n  }\n  /**\n  * Connects element to interacts dropzone events and returns a reference to the interactable\n  * @param nativeElement the element to tie drop events to\n  * @param dropzoneConfig the interact configuration to use when connecting\n  */\n  connectDropzoneEvents(nativeElement, dropzoneConfig: DropzoneOptions) {\n    return interact(nativeElement).dropzone(dropzoneConfig)\n      // TODO: investigate when this fires in different scenarios\n      .on('dropactivate', (event: NgDropEvent) => {\n        this.dropActivate.emit(this.mapDropzoneEvent(event));\n      })\n      .on('dragenter', (event: NgDropEvent) => {\n        this.renderer.setProperty(event.relatedTarget, 'dropTarget', this)\n        this.dragEnter.emit(this.mapDropzoneEvent(event));\n      })\n      .on('dragleave', (event: NgDropEvent) => {\n        if ( event.relatedTarget.dropTarget === this) {\n          this.renderer.setProperty(event.relatedTarget, 'dropTarget', null)\n        }\n        this.dragLeave.emit(this.mapDropzoneEvent(event));\n      })\n      .on('drop',  (event: NgDropEvent) => {\n        this.dragDrop.emit(this.mapDropzoneEvent(event));\n      });\n  }\n  /**\n   * Maps the drop event emitted by interact to something a little easier to use\n   * @param event the drop event emitted by interact, extended with extra fields we added to\n   */\n  mapDropzoneEvent(event: NgDropEvent): TftDropEvent {\n    const zoneElement = event.target;\n    const dragElement = event.relatedTarget?.dragRef?.previewRef as TftDragElement;\n    const scale = this.scale;\n    const positionInDropTarget = zoneElement && dragElement\n    ? this.interactService.calculatePositionInElement(zoneElement, dragElement, scale)\n    : null;\n    return {\n      interactEvent: event,\n      dragRef: dragElement.dragRef,\n      dragOrigin: dragElement.dragOrigin,\n      dropTarget: event.relatedTarget.dropTarget,\n      positionInDropTarget\n    }\n  }\n}\n"]}

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

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"DropzoneDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":6,"character":1},"arguments":[{"selector":"[tftDropzone]","host":{"[id]":"dropzoneId","$quoted$":["[id]"]}}]}],"members":{"dropzoneId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"dropzoneConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"dropzoneData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"dropActivate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"dragEnter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"dragLeave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"dragDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":29,"character":5}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":26,"character":15},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":27,"character":22},{"__symbolic":"reference","module":"../services/interact.service","name":"InteractService","line":28,"character":29},{"__symbolic":"reference","module":"./account-for-scale.directive","name":"AccountForScaleDirective","line":29,"character":48}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"connectDropzoneEvents":[{"__symbolic":"method"}],"mapDropzoneEvent":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"DropzoneDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":6,"character":1},"arguments":[{"selector":"[tftDropzone]","host":{"[id]":"dropzoneId","$quoted$":["[id]"]}}]}],"members":{"dropzoneId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"dropzoneConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"dropzoneData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"dropActivate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"dragEnter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"dragLeave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"dragDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":33,"character":5}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":30,"character":15},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":31,"character":22},{"__symbolic":"reference","module":"../services/interact.service","name":"InteractService","line":32,"character":29},{"__symbolic":"reference","module":"./account-for-scale.directive","name":"AccountForScaleDirective","line":33,"character":48}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"connectDropzoneEvents":[{"__symbolic":"method"}],"mapDropzoneEvent":[{"__symbolic":"method"}]}}}}]

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

@@ -15,6 +15,7 @@ export class ResizableDirective {
         this._document = _document;
         this.interactService = interactService;
         this.renderer = renderer;
+        this.drag_root_dir = drag_root_dir;
         this.account_for_scale_dir = account_for_scale_dir;
         this.draggable_dir = draggable_dir;
         this.dropzone_dir = dropzone_dir;
@@ -29,7 +30,11 @@ export class ResizableDirective {
         this.defaultConfig = {
             edges: { left: true, right: true, bottom: true, top: true }
         };
-        this.dragRoot = ((_a = drag_root_dir === null || drag_root_dir === void 0 ? void 0 : drag_root_dir.el) === null || _a === void 0 ? void 0 : _a.nativeElement) || this._document.body;
+        this.dragRootEl = ((_a = drag_root_dir === null || drag_root_dir === void 0 ? void 0 : drag_root_dir.el) === null || _a === void 0 ? void 0 : _a.nativeElement) || this._document.body;
+    }
+    get scale() {
+        var _a, _b;
+        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);
     }
     ngOnInit() {
         var _a, _b;
@@ -58,9 +63,23 @@ export class ResizableDirective {
         this.interactService.destroyInteractable(this.interactableId, this.registryId);
     }
     resizeListener(event) {
-        const deltaX = event.deltaRect.left;
-        const deltaY = event.deltaRect.top;
-        const { width, height } = event.rect;
+        const scale = this.scale;
+        let deltaX;
+        let deltaY;
+        let height;
+        let width;
+        if (scale) {
+            deltaX = event.deltaRect.left / scale;
+            deltaY = event.deltaRect.top / scale;
+            height = event.rect.height / scale;
+            width = event.rect.width / scale;
+        }
+        else {
+            deltaX = event.deltaRect.left;
+            deltaY = event.deltaRect.top;
+            width = event.rect.width;
+            height = event.rect.height;
+        }
         this.interactService.updateSize(this.interactableId, this.registryId, { deltaX, deltaY, width, height }, this.el.nativeElement);
     }
     /**
@@ -87,16 +106,16 @@ export class ResizableDirective {
             .on('resizeend', (event) => this.resizeEnd.emit(this.mapResizeEvent(event)));
     }
     mapResizeEvent(event) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         const target = event.target;
         const relatedTarget = (_b = (_a = this.draggable_dir) === null || _a === void 0 ? void 0 : _a.dropzone_dir) === null || _b === void 0 ? void 0 : _b.el.nativeElement;
+        const scale = ((_c = this.account_for_scale_dir) === null || _c === void 0 ? void 0 : _c.scale) || ((_e = (_d = this.drag_root_dir) === null || _d === void 0 ? void 0 : _d.account_for_scale_dir) === null || _e === void 0 ? void 0 : _e.scale) || 1;
         const positionInDropTarget = target && relatedTarget
-            ? this.interactService.calculatePositionInElement(relatedTarget, target)
+            ? this.interactService.calculatePositionInElement(relatedTarget, target, scale)
             : null;
         return {
             interactEvent: event,
             resizeRef: this,
-            // should I remove this?
             dragRef: this.draggable_dir,
             dragOrigin: this.dropzone_dir,
             dropTarget: this.el.nativeElement.dropTarget,

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

@@ -1 +1 @@
-{"version":3,"file":"resizable.directive.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/resizable.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import { Directive, OnInit, OnDestroy, ElementRef, Input, Optional, SkipSelf, Output, EventEmitter, OnChanges, SimpleChanges, Renderer2, Inject} from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport interact from 'interactjs';\nimport { InteractService } from '../services/interact.service';\nimport { ResizableOptions, ResizeEvent, Interactable } from '@interactjs/types/index';\nimport { Subscription } from 'rxjs';\nimport { DraggableDirective } from './draggable.directive';\nimport { DropzoneDirective } from './dropzone.directive';\nimport { DragRootDirective } from './drag-root.directive';\nimport { AccountForScaleDirective } from './account-for-scale.directive';\nimport { NgResizeEvent, TftResizeEvent, DEFAULT_REGISTRY_ID, TftDragElement } from '../models';\n\n/** @dynamic */\n@Directive({\n  selector: '[tftResizable]',\n  // eslint-disable-next-line @angular-eslint/no-host-metadata-property\n  host: {\n    // prevents touch events from colliding with with mouse events\n    // on touch screen\n    '[style.touchAction]': 'this.resizeDisabled ? \"auto\" : \"none\"',\n    // default to absolute here to accommodate likely use cases\n    // consuming component can easily over ride with position input\n    '[style.position]': 'position',\n    // follows interactjs suggested practices\n    '[style.boxSizing]': '\"border-box\"',\n\n  }\n})\nexport class ResizableDirective implements OnInit, OnDestroy, OnChanges {\n\n  @Input() enableResizeDefault = true;\n  // TODO: should this be an input with default or should consuming user set display in styles each time\n  @Input() position = 'absolute';\n  @Input() resizeConfig: Partial<Interact.OrBoolean<ResizableOptions>>;\n  @Input() interactableId: string;\n\n  @Input() width: number;\n  @Input() height: number;\n  @Input() resizeDisabled = false;\n\n  @Output() resizeStart = new EventEmitter<TftResizeEvent>();\n  @Output() resizeMove = new EventEmitter<TftResizeEvent>();\n  @Output() resizeInertiaStart = new EventEmitter<TftResizeEvent>();\n  @Output() resizeEnd = new EventEmitter<TftResizeEvent>();\n\n  defaultConfig: Partial<Interact.OrBoolean<ResizableOptions>> = {\n    edges: { left: true, right: true, bottom: true, top: true }\n  };\n  registryId: string;\n  interactable: Interactable;\n  // The\n  dragRoot: HTMLElement;\n\n  private interactableSubscription: Subscription;\n\n  constructor(\n    public el: ElementRef,\n    @Inject(DOCUMENT) private _document: Document,\n    private interactService: InteractService,\n    private renderer: Renderer2,\n    @Optional() drag_root_dir?: DragRootDirective,\n    @Optional() public account_for_scale_dir?: AccountForScaleDirective,\n    @Optional() private draggable_dir?: DraggableDirective,\n    @Optional() @SkipSelf() private dropzone_dir?: DropzoneDirective\n  ) {\n    this.dragRoot = (drag_root_dir?.el?.nativeElement as HTMLElement) || this._document.body;\n  }\n\n  ngOnInit() {\n    this.addResizePropertiesToElement(this.el.nativeElement);\n\n    // we check for a dropzone, we use its id as the registry id if there is on\n    // otherwise, we use DEFAULT_REGISTRY_ID as a registry id. This allows us to keep our interactable\n    // drag state organized by dropzones.\n    this.registryId = this.dropzone_dir?.dropzoneId || DEFAULT_REGISTRY_ID;\n\n    this.interactableId = this.draggable_dir?.interactableId || this.interactService.addDraggableToRegistry(this.registryId, this.interactableId);\n\n    this.interactable = this.initiateResizeEvents(\n      {...this.defaultConfig, ...this.resizeConfig },\n      this.el.nativeElement\n    );\n\n    this.alignDimensionsWithInputs(this.width, this.height);\n\n    this.interactableSubscription = this.interactService\n      .getInteractableState(this.interactableId, this.registryId)\n      .subscribe();\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    if ((changes.resizeConfig || changes.resizeDisabled) && this.interactable) {\n      this.interactable.resizable({...this.resizeConfig, enabled: !this.resizeDisabled,});\n    }\n    if (changes.width || changes.height) {\n      this.alignDimensionsWithInputs(this.width, this.height);\n    }\n  }\n\n  ngOnDestroy() {\n    this.interactableSubscription.unsubscribe();\n    this.interactService.destroyInteractable(this.interactableId, this.registryId);\n  }\n\n  resizeListener(event: ResizeEvent) {\n    const deltaX = event.deltaRect.left;\n    const deltaY = event.deltaRect.top;\n    const { width, height } = event.rect;\n    this.interactService.updateSize(\n      this.interactableId,\n      this.registryId,\n      {deltaX, deltaY, width, height},\n      this.el.nativeElement\n    );\n  }\n  /**\n   *  hook elements into interacts resize event listeners\n   *  we spread the configs so that the consuming component only overwrites the\n   *  pieces that it explicitly indicates\n   * @param resizeConfig\n   * @param nativeElement\n   */\n  initiateResizeEvents(resizeConfig: Partial<Interact.OrBoolean<ResizableOptions>>, nativeElement: any) {\n    // TODO: This should try and get interactable from tft_draggable if it exists\n    const interactable = this.draggable_dir?.interactable || interact(nativeElement);\n    return interactable.resizable({...resizeConfig, enabled: !this.resizeDisabled})\n      .on('resizestart', (event: NgResizeEvent) => { this.resizeStart.emit(this.mapResizeEvent(event))})\n      .on('resizemove',  (event: NgResizeEvent) => {\n        if (this.enableResizeDefault) {\n          this.resizeListener(event)\n        }\n        const mappedEvent = this.mapResizeEvent(event);\n        this.resizeMove.emit(mappedEvent)\n      })\n      .on('resizeinertiastart', (event: NgResizeEvent) => this.resizeInertiaStart.emit(this.mapResizeEvent(event)))\n      .on('resizeend', (event: NgResizeEvent) => this.resizeEnd.emit(this.mapResizeEvent(event)));\n  }\n\n  mapResizeEvent(event: NgResizeEvent ): TftResizeEvent {\n    const target  = event.target as TftDragElement;\n    const relatedTarget = this.draggable_dir?.dropzone_dir?.el.nativeElement\n    const positionInDropTarget = target && relatedTarget\n      ? this.interactService.calculatePositionInElement(relatedTarget, target)\n      : null;\n    return {\n      interactEvent: event,\n      resizeRef: this,\n      // should I remove this?\n      dragRef: this.draggable_dir,\n      dragOrigin: this.dropzone_dir,\n      dropTarget: this.el.nativeElement.dropTarget,\n      positionInDropTarget\n    }\n  }\n\n  alignDimensionsWithInputs(width: number, height: number) {\n    this.interactService.updateSize(\n      this.interactableId,\n      this.registryId,\n      {deltaX: 0, deltaY: 0, width, height},\n      this.el.nativeElement\n    );\n  }\n\n  addResizePropertiesToElement(nativeElement: TftDragElement) {\n    this.renderer.setProperty(nativeElement, 'resizeRef', this);\n  }\n}\n"]}
+{"version":3,"file":"resizable.directive.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/resizable.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import { Directive, OnInit, OnDestroy, ElementRef, Input, Optional, SkipSelf, Output, EventEmitter, OnChanges, SimpleChanges, Renderer2, Inject} from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport interact from 'interactjs';\nimport { InteractService } from '../services/interact.service';\nimport { ResizableOptions, ResizeEvent, Interactable } from '@interactjs/types/index';\nimport { Subscription } from 'rxjs';\nimport { DraggableDirective } from './draggable.directive';\nimport { DropzoneDirective } from './dropzone.directive';\nimport { DragRootDirective } from './drag-root.directive';\nimport { AccountForScaleDirective } from './account-for-scale.directive';\nimport { NgResizeEvent, TftResizeEvent, DEFAULT_REGISTRY_ID, TftDragElement } from '../models';\n\n/** @dynamic */\n@Directive({\n  selector: '[tftResizable]',\n  // eslint-disable-next-line @angular-eslint/no-host-metadata-property\n  host: {\n    // prevents touch events from colliding with with mouse events\n    // on touch screen\n    '[style.touchAction]': 'this.resizeDisabled ? \"auto\" : \"none\"',\n    // default to absolute here to accommodate likely use cases\n    // consuming component can easily over ride with position input\n    '[style.position]': 'position',\n    // follows interactjs suggested practices\n    '[style.boxSizing]': '\"border-box\"',\n\n  }\n})\nexport class ResizableDirective implements OnInit, OnDestroy, OnChanges {\n\n  @Input() enableResizeDefault = true;\n  // TODO: should this be an input with default or should consuming user set display in styles each time\n  @Input() position = 'absolute';\n  @Input() resizeConfig: Partial<Interact.OrBoolean<ResizableOptions>>;\n  @Input() interactableId: string;\n\n  @Input() width: number;\n  @Input() height: number;\n  @Input() resizeDisabled = false;\n\n  @Output() resizeStart = new EventEmitter<TftResizeEvent>();\n  @Output() resizeMove = new EventEmitter<TftResizeEvent>();\n  @Output() resizeInertiaStart = new EventEmitter<TftResizeEvent>();\n  @Output() resizeEnd = new EventEmitter<TftResizeEvent>();\n\n  defaultConfig: Partial<Interact.OrBoolean<ResizableOptions>> = {\n    edges: { left: true, right: true, bottom: true, top: true }\n  };\n  registryId: string;\n  interactable: Interactable;\n  // The\n  dragRootEl: HTMLElement;\n\n  private interactableSubscription: Subscription;\n  get scale() {\n    return this.account_for_scale_dir?.scale || this.drag_root_dir?.account_for_scale_dir.scale;\n  }\n\n  constructor(\n    public el: ElementRef,\n    @Inject(DOCUMENT) private _document: Document,\n    private interactService: InteractService,\n    private renderer: Renderer2,\n    @Optional() private drag_root_dir?: DragRootDirective,\n    @Optional() public account_for_scale_dir?: AccountForScaleDirective,\n    @Optional() private draggable_dir?: DraggableDirective,\n    @Optional() @SkipSelf() private dropzone_dir?: DropzoneDirective\n  ) {\n    this.dragRootEl = (drag_root_dir?.el?.nativeElement as HTMLElement) || this._document.body;\n  }\n\n  ngOnInit() {\n    this.addResizePropertiesToElement(this.el.nativeElement);\n\n    // we check for a dropzone, we use its id as the registry id if there is on\n    // otherwise, we use DEFAULT_REGISTRY_ID as a registry id. This allows us to keep our interactable\n    // drag state organized by dropzones.\n    this.registryId = this.dropzone_dir?.dropzoneId || DEFAULT_REGISTRY_ID;\n\n    this.interactableId = this.draggable_dir?.interactableId || this.interactService.addDraggableToRegistry(this.registryId, this.interactableId);\n\n    this.interactable = this.initiateResizeEvents(\n      {...this.defaultConfig, ...this.resizeConfig },\n      this.el.nativeElement\n    );\n\n    this.alignDimensionsWithInputs(this.width, this.height);\n\n    this.interactableSubscription = this.interactService\n      .getInteractableState(this.interactableId, this.registryId)\n      .subscribe();\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    if ((changes.resizeConfig || changes.resizeDisabled) && this.interactable) {\n      this.interactable.resizable({...this.resizeConfig, enabled: !this.resizeDisabled,});\n    }\n    if (changes.width || changes.height) {\n      this.alignDimensionsWithInputs(this.width, this.height);\n    }\n  }\n\n  ngOnDestroy() {\n    this.interactableSubscription.unsubscribe();\n    this.interactService.destroyInteractable(this.interactableId, this.registryId);\n  }\n\n  resizeListener(event: ResizeEvent) {\n    const scale = this.scale;\n    let deltaX: number;\n    let deltaY: number;\n    let height: number;\n    let width: number;\n    if (scale) {\n       deltaX = event.deltaRect.left/scale;\n       deltaY = event.deltaRect.top/scale;\n       height = event.rect.height/scale;\n       width = event.rect.width/scale;\n    } else {\n       deltaX = event.deltaRect.left;\n       deltaY = event.deltaRect.top;\n       width = event.rect.width;\n       height = event.rect.height;\n    }\n\n    this.interactService.updateSize(\n      this.interactableId,\n      this.registryId,\n      {deltaX, deltaY, width, height},\n      this.el.nativeElement\n    );\n  }\n  /**\n   *  hook elements into interacts resize event listeners\n   *  we spread the configs so that the consuming component only overwrites the\n   *  pieces that it explicitly indicates\n   * @param resizeConfig\n   * @param nativeElement\n   */\n  initiateResizeEvents(resizeConfig: Partial<Interact.OrBoolean<ResizableOptions>>, nativeElement: any) {\n    // TODO: This should try and get interactable from tft_draggable if it exists\n    const interactable = this.draggable_dir?.interactable || interact(nativeElement);\n    return interactable.resizable({...resizeConfig, enabled: !this.resizeDisabled})\n      .on('resizestart', (event: NgResizeEvent) => { this.resizeStart.emit(this.mapResizeEvent(event))})\n      .on('resizemove',  (event: NgResizeEvent) => {\n        if (this.enableResizeDefault) {\n          this.resizeListener(event)\n        }\n        const mappedEvent = this.mapResizeEvent(event);\n        this.resizeMove.emit(mappedEvent)\n      })\n      .on('resizeinertiastart', (event: NgResizeEvent) => this.resizeInertiaStart.emit(this.mapResizeEvent(event)))\n      .on('resizeend', (event: NgResizeEvent) => this.resizeEnd.emit(this.mapResizeEvent(event)));\n  }\n\n  mapResizeEvent(event: NgResizeEvent ): TftResizeEvent {\n    const target  = event.target as TftDragElement;\n    const relatedTarget = this.draggable_dir?.dropzone_dir?.el.nativeElement;\n    const scale = this.account_for_scale_dir?.scale || this.drag_root_dir?.account_for_scale_dir?.scale || 1;\n    const positionInDropTarget = target && relatedTarget\n      ? this.interactService.calculatePositionInElement(relatedTarget, target, scale)\n      : null;\n    return {\n      interactEvent: event,\n      resizeRef: this,\n      dragRef: this.draggable_dir,\n      dragOrigin: this.dropzone_dir,\n      dropTarget: this.el.nativeElement.dropTarget,\n      positionInDropTarget\n    }\n  }\n\n  alignDimensionsWithInputs(width: number, height: number) {\n    this.interactService.updateSize(\n      this.interactableId,\n      this.registryId,\n      {deltaX: 0, deltaY: 0, width, height},\n      this.el.nativeElement\n    );\n  }\n\n  addResizePropertiesToElement(nativeElement: TftDragElement) {\n    this.renderer.setProperty(nativeElement, 'resizeRef', this);\n  }\n}\n"]}

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

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"ResizableDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":13,"character":1},"arguments":[{"selector":"[tftResizable]","host":{"[style.touchAction]":"this.resizeDisabled ? \"auto\" : \"none\"","[style.position]":"position","[style.boxSizing]":"\"border-box\"","$quoted$":["[style.touchAction]","[style.position]","[style.boxSizing]"]}}]}],"members":{"enableResizeDefault":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"resizeConfig":[{"__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}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"resizeDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"resizeStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":40,"character":3}}]}],"resizeMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":41,"character":3}}]}],"resizeInertiaStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":42,"character":3}}]}],"resizeEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":43,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":57,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":57,"character":12}]}],null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":60,"character":5}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":61,"character":5}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":62,"character":5}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":63,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":63,"character":17}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":56,"character":15},{"__symbolic":"error","message":"Could not resolve type","line":57,"character":41,"context":{"typeName":"Document"}},{"__symbolic":"reference","module":"../services/interact.service","name":"InteractService","line":58,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":59,"character":22},{"__symbolic":"reference","module":"./drag-root.directive","name":"DragRootDirective","line":60,"character":32},{"__symbolic":"reference","module":"./account-for-scale.directive","name":"AccountForScaleDirective","line":61,"character":47},{"__symbolic":"reference","module":"./draggable.directive","name":"DraggableDirective","line":62,"character":40},{"__symbolic":"reference","module":"./dropzone.directive","name":"DropzoneDirective","line":63,"character":51}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"resizeListener":[{"__symbolic":"method"}],"initiateResizeEvents":[{"__symbolic":"method"}],"mapResizeEvent":[{"__symbolic":"method"}],"alignDimensionsWithInputs":[{"__symbolic":"method"}],"addResizePropertiesToElement":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"ResizableDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":13,"character":1},"arguments":[{"selector":"[tftResizable]","host":{"[style.touchAction]":"this.resizeDisabled ? \"auto\" : \"none\"","[style.position]":"position","[style.boxSizing]":"\"border-box\"","$quoted$":["[style.touchAction]","[style.position]","[style.boxSizing]"]}}]}],"members":{"enableResizeDefault":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"resizeConfig":[{"__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}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"resizeDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"resizeStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":40,"character":3}}]}],"resizeMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":41,"character":3}}]}],"resizeInertiaStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":42,"character":3}}]}],"resizeEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":43,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":60,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":60,"character":12}]}],null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":63,"character":5}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":64,"character":5}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":65,"character":5}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":66,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":66,"character":17}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":59,"character":15},{"__symbolic":"error","message":"Could not resolve type","line":60,"character":41,"context":{"typeName":"Document"}},{"__symbolic":"reference","module":"../services/interact.service","name":"InteractService","line":61,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":62,"character":22},{"__symbolic":"reference","module":"./drag-root.directive","name":"DragRootDirective","line":63,"character":40},{"__symbolic":"reference","module":"./account-for-scale.directive","name":"AccountForScaleDirective","line":64,"character":47},{"__symbolic":"reference","module":"./draggable.directive","name":"DraggableDirective","line":65,"character":40},{"__symbolic":"reference","module":"./dropzone.directive","name":"DropzoneDirective","line":66,"character":51}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"resizeListener":[{"__symbolic":"method"}],"initiateResizeEvents":[{"__symbolic":"method"}],"mapResizeEvent":[{"__symbolic":"method"}],"alignDimensionsWithInputs":[{"__symbolic":"method"}],"addResizePropertiesToElement":[{"__symbolic":"method"}]}}}}]

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

@@ -32,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] = {};
@@ -42,6 +42,11 @@ export class InteractService {
     }
     destroyInteractable(interactableId, registryId = DEFAULT_REGISTRY_ID) {
         if (this.dragRegistrySystem[registryId][interactableId]) {
+            // unsubscribe from all the subscriptions if they're subscriptions
+            for (const propName in this.dragRegistrySystem[registryId][interactableId]) {
+                const prop = this.dragRegistrySystem[registryId][interactableId][propName];
+                prop === null || prop === void 0 ? void 0 : prop.unsubscribe();
+            }
             delete this.dragRegistrySystem[registryId][interactableId];
         }
     }
@@ -133,21 +138,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 { 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}${this.cssUnit}`);
-            this.renderer.setStyle(target, 'height', `${height}${this.cssUnit}`);
-        }
+        this.renderer.setStyle(target, 'width', `${width}${this.cssUnit}`);
+        this.renderer.setStyle(target, 'height', `${height}${this.cssUnit}`);
     }
     /**
      * Uses renderer to set position of angular component
@@ -156,20 +150,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 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 { 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}${this.cssUnit}`);
-            this.renderer.setStyle(position.targetElement, 'top', `${y}${this.cssUnit}`);
-        }
+        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

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, 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"]}
+{"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    if(this.dragRegistrySystem[registryId][interactableId]) {\n      // unsubscribe from all the subscriptions if they're subscriptions\n      for (const propName in this.dragRegistrySystem[registryId][interactableId])  {\n        const prop = this.dragRegistrySystem[registryId][interactableId][propName];\n        prop?.unsubscribe();\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"]}