@tft/interact 12.5.2 → 12.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/tft-interact.umd.js +137 -30
- package/bundles/tft-interact.umd.js.map +1 -1
- package/esm2015/lib/directives/account-for-scale.directive.ngfactory.js.map +1 -0
- package/esm2015/lib/directives/apply-scale.directive.ngfactory.js.map +1 -0
- package/esm2015/lib/directives/auto-scroll.directive.js +54 -0
- package/esm2015/lib/directives/auto-scroll.directive.js.map +1 -0
- package/esm2015/lib/directives/auto-scroll.directive.metadata.json +1 -0
- package/esm2015/lib/directives/auto-scroll.directive.ngfactory.js.map +1 -0
- package/esm2015/lib/directives/drag-preview.directive.ngfactory.js.map +1 -0
- package/esm2015/lib/directives/drag-root.directive.ngfactory.js.map +1 -0
- package/esm2015/lib/directives/draggable.directive.js +24 -3
- package/esm2015/lib/directives/draggable.directive.js.map +1 -1
- package/esm2015/lib/directives/draggable.directive.metadata.json +1 -1
- package/esm2015/lib/directives/draggable.directive.ngfactory.js.map +1 -0
- package/esm2015/lib/directives/dropzone.directive.js +4 -2
- package/esm2015/lib/directives/dropzone.directive.js.map +1 -1
- package/esm2015/lib/directives/dropzone.directive.metadata.json +1 -1
- package/esm2015/lib/directives/dropzone.directive.ngfactory.js.map +1 -0
- package/esm2015/lib/directives/gesturable.directive.ngfactory.js.map +1 -0
- package/esm2015/lib/directives/index.js +1 -0
- package/esm2015/lib/directives/index.js.map +1 -1
- package/esm2015/lib/directives/index.metadata.json +1 -1
- package/esm2015/lib/directives/resizable.directive.js +48 -22
- package/esm2015/lib/directives/resizable.directive.js.map +1 -1
- package/esm2015/lib/directives/resizable.directive.metadata.json +1 -1
- package/esm2015/lib/directives/resizable.directive.ngfactory.js.map +1 -0
- package/esm2015/lib/interact.module.js +2 -1
- package/esm2015/lib/interact.module.js.map +1 -1
- package/esm2015/lib/interact.module.metadata.json +1 -1
- package/esm2015/lib/interact.module.ngfactory.js.map +1 -0
- package/esm2015/lib/pipes/array-of-n.pipe.ngfactory.js.map +1 -0
- package/esm2015/lib/services/interact.service.ngfactory.js.map +1 -0
- package/esm2015/tft-interact.js +2 -2
- package/esm2015/tft-interact.js.map +1 -1
- package/esm2015/tft-interact.metadata.json +1 -1
- package/fesm2015/tft-interact.js +129 -30
- package/fesm2015/tft-interact.js.map +1 -1
- package/lib/directives/auto-scroll.directive.d.ts +31 -0
- package/lib/directives/draggable.directive.d.ts +5 -1
- package/lib/directives/dropzone.directive.d.ts +2 -0
- package/lib/directives/index.d.ts +1 -0
- package/lib/directives/resizable.directive.d.ts +7 -2
- package/package.json +1 -1
- package/tft-interact-12.5.3.tgz +0 -0
- package/tft-interact.d.ts +2 -2
- package/tft-interact.metadata.json +1 -1
- package/tft-interact-12.5.2.tgz +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"auto-scroll.directive.ngfactory.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/auto-scroll.directive.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drag-preview.directive.ngfactory.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/drag-preview.directive.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drag-root.directive.ngfactory.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/drag-root.directive.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n"]}
|
|
@@ -8,10 +8,11 @@ import { DragPreviewDirective } from './drag-preview.directive';
|
|
|
8
8
|
import { getRootNode } from '../utils';
|
|
9
9
|
import { DragRootDirective } from './drag-root.directive';
|
|
10
10
|
import { AccountForScaleDirective } from './account-for-scale.directive';
|
|
11
|
+
import { AutoScrollDirective } from './auto-scroll.directive';
|
|
11
12
|
/** @dynamic */
|
|
12
13
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
13
14
|
export class DraggableDirective {
|
|
14
|
-
constructor(el, interactService, renderer, _viewContainerRef, _document, account_for_scale_dir, dropzone_dir, drag_root_dir) {
|
|
15
|
+
constructor(el, interactService, renderer, _viewContainerRef, _document, account_for_scale_dir, dropzone_dir, drag_root_dir, auto_scroll_dir) {
|
|
15
16
|
this.el = el;
|
|
16
17
|
this.interactService = interactService;
|
|
17
18
|
this.renderer = renderer;
|
|
@@ -20,6 +21,7 @@ export class DraggableDirective {
|
|
|
20
21
|
this.account_for_scale_dir = account_for_scale_dir;
|
|
21
22
|
this.dropzone_dir = dropzone_dir;
|
|
22
23
|
this.drag_root_dir = drag_root_dir;
|
|
24
|
+
this.auto_scroll_dir = auto_scroll_dir;
|
|
23
25
|
/* zIndex while dragging*/
|
|
24
26
|
this.dragZIndex = 10000;
|
|
25
27
|
this.enableDragDefault = true;
|
|
@@ -146,7 +148,10 @@ export class DraggableDirective {
|
|
|
146
148
|
return typeof num === 'number' && !isNaN(num);
|
|
147
149
|
}
|
|
148
150
|
initiateDragEvents(dragConfig, nativeElement) {
|
|
149
|
-
|
|
151
|
+
const defaultDragConfig = Object.assign(Object.assign(Object.assign({}, dragConfig), { enabled: !(this.disabled || this.dragDisabled) }), (this.auto_scroll_dir && {
|
|
152
|
+
autoScroll: Object.assign(Object.assign({}, this.auto_scroll_dir.autoScrollConfig), { container: this.auto_scroll_dir.el.nativeElement })
|
|
153
|
+
}));
|
|
154
|
+
return interact(nativeElement).draggable(defaultDragConfig)
|
|
150
155
|
.on('dragstart', (event) => {
|
|
151
156
|
var _a, _b, _c;
|
|
152
157
|
const interaction = event.interaction;
|
|
@@ -174,6 +179,10 @@ export class DraggableDirective {
|
|
|
174
179
|
this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
|
|
175
180
|
}
|
|
176
181
|
}
|
|
182
|
+
// subscribe to scroll events if they are there, by only subscribing on dragstart we avoid wasting subscriptions on interactables that aren't be dragged
|
|
183
|
+
if (this.auto_scroll_dir) {
|
|
184
|
+
this.subscribeToScrollEvents();
|
|
185
|
+
}
|
|
177
186
|
this.dragStart.emit(this.mapDragEvent(event));
|
|
178
187
|
})
|
|
179
188
|
.on('dragmove', (event) => {
|
|
@@ -195,6 +204,10 @@ export class DraggableDirective {
|
|
|
195
204
|
}
|
|
196
205
|
this.renderer.setStyle(this.el.nativeElement, 'display', '');
|
|
197
206
|
this.dragEnd.emit(mappedEvent);
|
|
207
|
+
// unsubscribe from scroll events if subscribed
|
|
208
|
+
if (this.auto_scroll_dir) {
|
|
209
|
+
this.scrollEventsSubscription.unsubscribe();
|
|
210
|
+
}
|
|
198
211
|
if (this.el.nativeElement !== this.previewRef) {
|
|
199
212
|
// we do this in a timeout, so that we don't remove before the dropzone can get the boundingElementRect
|
|
200
213
|
setTimeout(() => {
|
|
@@ -203,6 +216,13 @@ export class DraggableDirective {
|
|
|
203
216
|
}
|
|
204
217
|
});
|
|
205
218
|
}
|
|
219
|
+
subscribeToScrollEvents() {
|
|
220
|
+
this.scrollEventsSubscription = this.auto_scroll_dir.scrollDeltaObserver.subscribe(({ scrollLeft, scrollTop }) => {
|
|
221
|
+
const deltaX = this.scale ? scrollLeft / this.scale : scrollLeft;
|
|
222
|
+
const deltaY = this.scale ? scrollTop / this.scale : scrollTop;
|
|
223
|
+
this.interactService.updateDeltas(this.interactableId, this.registryId, { deltaX, deltaY }, this.previewRef);
|
|
224
|
+
});
|
|
225
|
+
}
|
|
206
226
|
}
|
|
207
227
|
DraggableDirective.decorators = [
|
|
208
228
|
{ type: Directive, args: [{
|
|
@@ -223,7 +243,8 @@ DraggableDirective.ctorParameters = () => [
|
|
|
223
243
|
{ type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
|
|
224
244
|
{ type: AccountForScaleDirective, decorators: [{ type: Optional }] },
|
|
225
245
|
{ type: DropzoneDirective, decorators: [{ type: Optional }, { type: SkipSelf }] },
|
|
226
|
-
{ type: DragRootDirective, decorators: [{ type: Optional }, { type: SkipSelf }] }
|
|
246
|
+
{ type: DragRootDirective, decorators: [{ type: Optional }, { type: SkipSelf }] },
|
|
247
|
+
{ type: AutoScrollDirective, decorators: [{ type: Optional }, { type: SkipSelf }] }
|
|
227
248
|
];
|
|
228
249
|
DraggableDirective.propDecorators = {
|
|
229
250
|
x: [{ type: Input }],
|
|
@@ -1 +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 // 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"]}
|
|
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';\nimport { AutoScrollDirective } from './auto-scroll.directive';\n\n/** @dynamic */\n@Directive({\n selector: '[tftDraggable]',\n // eslint-disable-next-line @angular-eslint/no-host-metadata-property\n host: {\n '[style.touchAction]': 'this.dragDisabled ? \"auto\" : \"none\"',\n '[style.position]': '\"absolute\"',\n '[id]': 'interactableId',\n }\n})\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport class DraggableDirective<D = any> implements OnInit, OnChanges, OnDestroy, AfterViewInit {\n\n\n @Input() x: number;\n @Input() y: number;\n /* zIndex while dragging*/\n @Input() dragZIndex = 10000;\n /** zIndex while at rest */\n @Input() zIndex: number\n @Input() interactableId: string;\n @Input() dragData: D;\n @Input() enableDragDefault = true;\n /**\n * @deprecated replaced by 'dragDisabled' property, please migrate before v13\n */\n @Input() disabled = false;\n @Input() dragDisabled = false;\n @Input() dragConfig: Partial<Interact.OrBoolean<DraggableOptions>>;\n @Input() showPlaceholder = false;\n\n /**\n * The element we want to prepend the drag element to.\n * Use `tftDragRoot` directive on a parent element to set custom root element\n * @default document.body\n */\n @Input() dragRoot: DragRootDirective; // HTMLElement;\n\n private dragRootEl: HTMLElement;\n // pipes all interact events to event emitters\n @Output() dragStart = new EventEmitter<TftDragEvent>();\n @Output() dragMove = new EventEmitter<TftDragEvent>();\n @Output() dragInertiaStart = new EventEmitter<TftDragEvent>();\n @Output() dragEnd = new EventEmitter<TftDragEvent>();\n\n @ContentChild(DragPreviewDirective) _previewTemplate: DragPreviewDirective;\n // dragPreview: Interact.Element;\n interactableState: Observable<TftCoords>;\n interactable: Interactable;\n private registryId: string;\n private interactableSubscription: Subscription;\n private scrollEventsSubscription: Subscription;\n\n // cache holding element to use as drag preview (the element the user sees being dragged around)\n previewRef: TftDragElement;\n // check all the different places for scale\n get scale(): number {\n return this.account_for_scale_dir?.scale || this.drag_root_dir?.account_for_scale_dir.scale || this.dragRoot?.account_for_scale_dir?.scale;\n }\n\n constructor(\n public el: ElementRef,\n private interactService: InteractService,\n private renderer: Renderer2,\n private _viewContainerRef: ViewContainerRef,\n @Inject(DOCUMENT) private _document: Document,\n @Optional() public account_for_scale_dir?: AccountForScaleDirective,\n @Optional() @SkipSelf() public dropzone_dir?: DropzoneDirective,\n @Optional() @SkipSelf() public drag_root_dir?: DragRootDirective,\n @Optional() @SkipSelf() public auto_scroll_dir?: AutoScrollDirective\n ) { }\n\n ngOnInit() {\n this.interactable = this.initiateDragEvents(this.dragConfig, this.el.nativeElement);\n this.dragRootEl = (this.dragRoot?.el?.nativeElement || this.drag_root_dir?.el?.nativeElement) as HTMLElement || this._document.body;\n // register with parent dropzone if it exists, otherwise use default\n // this gives us a place on the registry to store our drag items that don't have a dropzone\n this.registryId = this.dropzone_dir?.dropzoneId || DEFAULT_REGISTRY_ID;\n // add draggable to directory and store its id\n this.interactableId = this.interactService.addDraggableToRegistry(this.registryId, this.interactableId);\n this.alignPositionWithInputs(this.x, this.y);\n // cache subscription to interactable state so we can unsubscribe onDestroy\n this.interactableState = this.interactService\n .getInteractableState(this.interactableId, this.registryId);\n // keep our cached position values in line with our drag state\n this.interactableSubscription = this.interactableState.subscribe((state) => {\n this.y = state.y;\n this.x = state.x;\n });\n this.setDragConfig();\n }\n\n // TODO: watch config here as well and update interactable\n ngOnChanges(changes: SimpleChanges) {\n // we do this here instead of using a setter on the input so that it\n // will only run once when there is a change to x and y\n if(changes.y || changes.x) {\n this.alignPositionWithInputs(this.x, this.y);\n }\n if(changes.dragConfig || changes.disabled || changes.dragDisabled) {\n if(!this.interactable) return;\n this.setDragConfig();\n }\n /**\n * @deprecated remove this in v13\n */\n if (changes.disabled) {\n console.warn(`It looks like your using the 'disabled' input on a tftDraggable directive, it has been deprecated and is replaced with 'dragDisabled', please migrate by v13`)\n }\n }\n\n setDragConfig() {\n const enabled = !(this.disabled || this.dragDisabled)\n const dragConfig = {...this.dragConfig, enabled};\n this.interactable.draggable(dragConfig);\n }\n\n ngAfterViewInit() {\n this.addDragPropertiesToElement(this.el.nativeElement);\n if (!this.dropzone_dir) {\n this.previewRef = this.el.nativeElement;\n }\n }\n\n ngOnDestroy() {\n // clean up state and subscriptions related to destroyed component\n this.interactableSubscription.unsubscribe();\n this.interactService.destroyInteractable(this.interactableId, this.registryId);\n }\n\n dragMoveListener(event: NgDragEvent, element: Interact.Element) {\n const { dx, dy } = event;\n const scale = this.scale;\n const deltaX = scale ? dx / scale : dx;\n const deltaY = scale ? dy / scale : dy;\n\n this.interactService.updateDeltas(\n this.interactableId,\n this.registryId,\n {deltaX, deltaY},\n element\n );\n }\n\n setDragStyles(dragElement: HTMLElement) {\n this.renderer.setStyle(dragElement, 'touchAction', 'none')\n this.renderer.setStyle(dragElement, 'zIndex', this.dragZIndex)\n this.renderer.setStyle(dragElement, 'position', 'absolute')\n }\n\n addDragPropertiesToElement(nativeElement: TftDragElement) {\n this.renderer.setProperty(nativeElement, 'dropTarget', this.dropzone_dir || null);\n this.renderer.setProperty(nativeElement, 'dragOrigin', this.dropzone_dir || null);\n this.renderer.setProperty(nativeElement, 'dragRef', this);\n }\n\n mapDragEvent(event: NgDragEvent): TftDragEvent {\n const { target, dropzone } = event;\n const dropzoneElement = dropzone?.target || target.dropTarget?.el.nativeElement;\n const scale = this.scale;\n const positionInDropTarget = target && dropzoneElement\n ? this.interactService.calculatePositionInElement(dropzoneElement, this.previewRef, scale)\n : null;\n return {\n interactEvent: event,\n dragRef: this,\n dragOrigin: target.dragOrigin,\n dropTarget: target.dropTarget,\n positionInDropTarget\n }\n }\n\n setPosition(x: number, y: number) {\n this.interactService.updatePosition(\n this.interactableId,\n this.registryId,\n {x, y},\n this.el.nativeElement\n );\n }\n\n alignPositionWithInputs(x: number, y: number) {\n // short circuit if positions aren't numbers or if they haven't changed\n if(!this.isValidPosition(x, y)) return;\n this.interactService.updatePosition(\n this.interactableId,\n this.registryId,\n {x, y},\n this.el.nativeElement\n );\n }\n\n isValidPosition(x: number, y: number) {\n return this.isNumeric(x) && this.isNumeric(y);\n }\n // We use use this instead of isNaN here to try and help performance\n // We should be able to reliably restrict to numbers or falsey values\n isNumeric(num: number) {\n return typeof num === 'number' && !isNaN(num);\n }\n\n initiateDragEvents(dragConfig: Partial<Interact.OrBoolean<DraggableOptions>>, nativeElement: HTMLElement) {\n const defaultDragConfig = {\n ...dragConfig,\n enabled: !(this.disabled || this.dragDisabled),\n ...(this.auto_scroll_dir && {\n autoScroll:\n {\n ...this.auto_scroll_dir.autoScrollConfig,\n container: this.auto_scroll_dir.el.nativeElement as HTMLElement\n }\n }\n )\n };\n return interact(nativeElement).draggable(defaultDragConfig)\n .on('dragstart', (event: NgDragEvent) => {\n const interaction = event.interaction;\n // check if we should append drag element to body\n if ( this.enableDragDefault\n && interaction.pointerIsDown\n // TODO: probably don't need following condition checks anymore remove by 2022\n // && !!this.dropzone_dir\n // && !interaction.interacting()\n ) {\n if (this._previewTemplate) {\n const viewRef = this._viewContainerRef.createEmbeddedView(this._previewTemplate.templateRef);\n this.previewRef = getRootNode(viewRef, this._document);\n } else {\n this.previewRef = cloneElement(this.el.nativeElement);\n }\n this.addDragPropertiesToElement(this.previewRef);\n this.setDragStyles(this.previewRef)\n\n this.dragRootEl.prepend(this.previewRef);\n const scale = this.account_for_scale_dir?.scale || this.dragRoot?.account_for_scale_dir?.scale || 1;\n const {x, y} = this.interactService.calculatePositionInElement(this.dragRootEl, nativeElement, scale);\n this.interactService.updatePosition(this.interactableId, this.registryId, {x, y}, this.previewRef);\n if (!this.showPlaceholder) {\n this.renderer.setStyle(this.el.nativeElement, 'display', 'none');\n }\n }\n // subscribe to scroll events if they are there, by only subscribing on dragstart we avoid wasting subscriptions on interactables that aren't be dragged\n if (this.auto_scroll_dir) {\n this.subscribeToScrollEvents();\n }\n this.dragStart.emit(this.mapDragEvent(event));\n })\n .on('dragmove', (event: NgDragEvent) => {\n if (this.enableDragDefault) {\n const dragElement = this.dropzone_dir && this.previewRef || nativeElement\n this.dragMoveListener(event, dragElement);\n }\n const mappedEvent = this.mapDragEvent(event);\n this.dragMove.emit(mappedEvent);\n })\n .on('draginertiastart', (event: NgDragEvent) => {\n this.dragInertiaStart.emit(this.mapDragEvent(event))\n })\n .on('dragend', (event: NgDragEvent) => {\n const mappedEvent = this.mapDragEvent(event)\n if(!!this.dropzone_dir && this.dropzone_dir === event.target.dropTarget) {\n const { x, y} = mappedEvent.positionInDropTarget;\n this.setPosition(x, y);\n }\n this.renderer.setStyle(this.el.nativeElement, 'display', '');\n this.dragEnd.emit(mappedEvent);\n // unsubscribe from scroll events if subscribed\n if (this.auto_scroll_dir) {\n this.scrollEventsSubscription.unsubscribe();\n }\n if ( this.el.nativeElement !== this.previewRef) {\n // we do this in a timeout, so that we don't remove before the dropzone can get the boundingElementRect\n setTimeout(() => {\n this.dragRootEl.removeChild(this.previewRef);\n })\n }\n });\n }\n\n subscribeToScrollEvents() {\n this.scrollEventsSubscription = this.auto_scroll_dir.scrollDeltaObserver.subscribe(({scrollLeft, scrollTop}) => {\n const deltaX = this.scale ? scrollLeft / this.scale : scrollLeft;\n const deltaY = this.scale ? scrollTop / this.scale : scrollTop;\n\n this.interactService.updateDeltas(\n this.interactableId,\n this.registryId,\n {deltaX, deltaY},\n this.previewRef\n );\n });\n\n }\n}\n\n/**\n * Component utils\n */\n// create a clone of the component passed in and add it to the root component\nfunction cloneElement(element: HTMLElement) {\n const clone = element.cloneNode(true) as HTMLElement;\n clone.removeAttribute('id');\n return clone;\n}\nfunction getPreviewInsertionPoint(documentRef: any): HTMLElement {\n // We can't use the body if the user is in fullscreen mode,\n // because the preview will render under the fullscreen element.\n return documentRef.fullscreenElement ||\n documentRef.webkitFullscreenElement ||\n documentRef.mozFullScreenElement ||\n documentRef.msFullscreenElement ||\n documentRef.body;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"DraggableDirective":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"DraggableDirective":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":16,"character":1},"arguments":[{"selector":"[tftDraggable]","host":{"[style.touchAction]":"this.dragDisabled ? \"auto\" : \"none\"","[style.position]":"\"absolute\"","[id]":"interactableId","$quoted$":["[style.touchAction]","[style.position]","[id]"]}}]}],"members":{"x":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"y":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"dragZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"zIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"interactableId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"dragData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"enableDragDefault":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"dragDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"dragConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"showPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"dragRoot":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3}}]}],"dragStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":3}}]}],"dragMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":3}}]}],"dragInertiaStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":57,"character":3}}]}],"dragEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":58,"character":3}}]}],"_previewTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":60,"character":3},"arguments":[{"__symbolic":"reference","module":"./drag-preview.directive","name":"DragPreviewDirective","line":60,"character":16}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":80,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":80,"character":12}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":81,"character":5}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":82,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":82,"character":17}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":83,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":83,"character":17}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":84,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":84,"character":17}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":76,"character":15},{"__symbolic":"reference","module":"../services/interact.service","name":"InteractService","line":77,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":78,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":79,"character":31},{"__symbolic":"error","message":"Could not resolve type","line":80,"character":41,"context":{"typeName":"Document"}},{"__symbolic":"reference","module":"./account-for-scale.directive","name":"AccountForScaleDirective","line":81,"character":47},{"__symbolic":"reference","module":"./dropzone.directive","name":"DropzoneDirective","line":82,"character":50},{"__symbolic":"reference","module":"./drag-root.directive","name":"DragRootDirective","line":83,"character":51},{"__symbolic":"reference","module":"./auto-scroll.directive","name":"AutoScrollDirective","line":84,"character":53}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"setDragConfig":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"dragMoveListener":[{"__symbolic":"method"}],"setDragStyles":[{"__symbolic":"method"}],"addDragPropertiesToElement":[{"__symbolic":"method"}],"mapDragEvent":[{"__symbolic":"method"}],"setPosition":[{"__symbolic":"method"}],"alignPositionWithInputs":[{"__symbolic":"method"}],"isValidPosition":[{"__symbolic":"method"}],"isNumeric":[{"__symbolic":"method"}],"initiateDragEvents":[{"__symbolic":"method"}],"subscribeToScrollEvents":[{"__symbolic":"method"}]}}}}]
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"draggable.directive.ngfactory.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/draggable.directive.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Directive, ElementRef, Input, Output, EventEmitter, Renderer2, Optional } from '@angular/core';
|
|
1
|
+
import { Directive, ElementRef, Input, Output, EventEmitter, Renderer2, Optional, HostBinding } from '@angular/core';
|
|
2
2
|
import interact from 'interactjs';
|
|
3
3
|
import { InteractService } from '../services/interact.service';
|
|
4
4
|
import { AccountForScaleDirective } from './account-for-scale.directive';
|
|
@@ -9,6 +9,7 @@ export class DropzoneDirective {
|
|
|
9
9
|
this.interactService = interactService;
|
|
10
10
|
this.account_for_scale_dir = account_for_scale_dir;
|
|
11
11
|
this.dropzoneConfig = {};
|
|
12
|
+
this.position = 'relative';
|
|
12
13
|
// proxies to pass interact events through to consumer of directive
|
|
13
14
|
this.dropActivate = new EventEmitter();
|
|
14
15
|
this.dragEnter = new EventEmitter();
|
|
@@ -81,7 +82,7 @@ DropzoneDirective.decorators = [
|
|
|
81
82
|
{ type: Directive, args: [{
|
|
82
83
|
selector: '[tftDropzone]',
|
|
83
84
|
host: {
|
|
84
|
-
'[id]': 'dropzoneId'
|
|
85
|
+
'[id]': 'dropzoneId'
|
|
85
86
|
}
|
|
86
87
|
},] }
|
|
87
88
|
];
|
|
@@ -95,6 +96,7 @@ DropzoneDirective.propDecorators = {
|
|
|
95
96
|
dropzoneId: [{ type: Input }],
|
|
96
97
|
dropzoneConfig: [{ type: Input }],
|
|
97
98
|
dropzoneData: [{ type: Input }],
|
|
99
|
+
position: [{ type: Input }, { type: HostBinding, args: ['style.position',] }],
|
|
98
100
|
dropActivate: [{ type: Output }],
|
|
99
101
|
dragEnter: [{ type: Output }],
|
|
100
102
|
dragLeave: [{ type: Output }],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropzone.directive.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/dropzone.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAU,MAAM,EAAE,YAAY,EAA4B,SAAS,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;
|
|
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, HostBinding } 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\nexport type PositionOption = 'relative' | 'absolute' | 'fixed' | 'static' | 'sticky' | 'unset' | 'inherit' | 'initial' | 'revert'\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\n @Input()\n @HostBinding('style.position') position: PositionOption = 'relative';\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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"DropzoneDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"PositionOption":{"__symbolic":"interface"},"DropzoneDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":8,"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":16,"character":3}}]}],"dropzoneConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"dropzoneData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":22,"character":3},"arguments":["style.position"]}]}],"dropActivate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":3}}]}],"dragEnter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":3}}]}],"dragLeave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":3}}]}],"dragDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":27,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":38,"character":5}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":35,"character":15},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":36,"character":22},{"__symbolic":"reference","module":"../services/interact.service","name":"InteractService","line":37,"character":29},{"__symbolic":"reference","module":"./account-for-scale.directive","name":"AccountForScaleDirective","line":38,"character":48}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"connectDropzoneEvents":[{"__symbolic":"method"}],"mapDropzoneEvent":[{"__symbolic":"method"}]}}}}]
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dropzone.directive.ngfactory.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/dropzone.directive.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"gesturable.directive.ngfactory.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/gesturable.directive.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './draggable.directive';\nexport * from './dropzone.directive';\nexport * from './resizable.directive';\nexport * from './drag-preview.directive';\nexport * from './gesturable.directive';\nexport * from './drag-root.directive';\nexport * from './account-for-scale.directive';\nexport * from './apply-scale.directive';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './draggable.directive';\nexport * from './dropzone.directive';\nexport * from './resizable.directive';\nexport * from './drag-preview.directive';\nexport * from './gesturable.directive';\nexport * from './drag-root.directive';\nexport * from './account-for-scale.directive';\nexport * from './apply-scale.directive';\nexport * from './auto-scroll.directive';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./draggable.directive"},{"from":"./dropzone.directive"},{"from":"./resizable.directive"},{"from":"./drag-preview.directive"},{"from":"./gesturable.directive"},{"from":"./drag-root.directive"},{"from":"./account-for-scale.directive"},{"from":"./apply-scale.directive"}]}]
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./draggable.directive"},{"from":"./dropzone.directive"},{"from":"./resizable.directive"},{"from":"./drag-preview.directive"},{"from":"./gesturable.directive"},{"from":"./drag-root.directive"},{"from":"./account-for-scale.directive"},{"from":"./apply-scale.directive"},{"from":"./auto-scroll.directive"}]}]
|
|
@@ -7,9 +7,10 @@ import { DropzoneDirective } from './dropzone.directive';
|
|
|
7
7
|
import { DragRootDirective } from './drag-root.directive';
|
|
8
8
|
import { AccountForScaleDirective } from './account-for-scale.directive';
|
|
9
9
|
import { DEFAULT_REGISTRY_ID } from '../models';
|
|
10
|
+
import { AutoScrollDirective } from './auto-scroll.directive';
|
|
10
11
|
/** @dynamic */
|
|
11
12
|
export class ResizableDirective {
|
|
12
|
-
constructor(el, _document, interactService, renderer, drag_root_dir, account_for_scale_dir, draggable_dir, dropzone_dir) {
|
|
13
|
+
constructor(el, _document, interactService, renderer, drag_root_dir, account_for_scale_dir, draggable_dir, dropzone_dir, auto_scroll_dir) {
|
|
13
14
|
var _a;
|
|
14
15
|
this.el = el;
|
|
15
16
|
this._document = _document;
|
|
@@ -19,6 +20,7 @@ export class ResizableDirective {
|
|
|
19
20
|
this.account_for_scale_dir = account_for_scale_dir;
|
|
20
21
|
this.draggable_dir = draggable_dir;
|
|
21
22
|
this.dropzone_dir = dropzone_dir;
|
|
23
|
+
this.auto_scroll_dir = auto_scroll_dir;
|
|
22
24
|
this.enableResizeDefault = true;
|
|
23
25
|
// TODO: should this be an input with default or should consuming user set display in styles each time
|
|
24
26
|
this.position = 'absolute';
|
|
@@ -30,6 +32,7 @@ export class ResizableDirective {
|
|
|
30
32
|
this.defaultConfig = {
|
|
31
33
|
edges: { left: true, right: true, bottom: true, top: true }
|
|
32
34
|
};
|
|
35
|
+
this.activeEdges = { left: false, right: false, top: false, bottom: false };
|
|
33
36
|
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;
|
|
34
37
|
}
|
|
35
38
|
get scale() {
|
|
@@ -63,23 +66,16 @@ export class ResizableDirective {
|
|
|
63
66
|
this.interactService.destroyInteractable(this.interactableId, this.registryId);
|
|
64
67
|
}
|
|
65
68
|
resizeListener(event) {
|
|
69
|
+
const element = this.el.nativeElement;
|
|
66
70
|
const scale = this.scale;
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
width = event.rect.width / scale;
|
|
76
|
-
}
|
|
77
|
-
else {
|
|
78
|
-
deltaX = event.deltaRect.left;
|
|
79
|
-
deltaY = event.deltaRect.top;
|
|
80
|
-
width = event.rect.width;
|
|
81
|
-
height = event.rect.height;
|
|
82
|
-
}
|
|
71
|
+
const { deltaRect } = event;
|
|
72
|
+
const deltaX = deltaRect.left / scale;
|
|
73
|
+
const deltaY = deltaRect.top / scale;
|
|
74
|
+
// We get the width and height directly from the native element because
|
|
75
|
+
// the event dimension can get out of sync when resizing with autoScroll
|
|
76
|
+
const rect = element.getBoundingClientRect();
|
|
77
|
+
const width = (rect.width + deltaRect.width) / scale;
|
|
78
|
+
const height = (rect.height + deltaRect.height) / scale;
|
|
83
79
|
this.interactService.updateSize(this.interactableId, this.registryId, { deltaX, deltaY, width, height }, this.el.nativeElement);
|
|
84
80
|
}
|
|
85
81
|
/**
|
|
@@ -92,9 +88,18 @@ export class ResizableDirective {
|
|
|
92
88
|
initiateResizeEvents(resizeConfig, nativeElement) {
|
|
93
89
|
var _a;
|
|
94
90
|
// TODO: This should try and get interactable from tft_draggable if it exists
|
|
91
|
+
const defaultResizeConfig = Object.assign(Object.assign(Object.assign({}, resizeConfig), { enabled: !this.resizeDisabled }), (this.auto_scroll_dir && {
|
|
92
|
+
autoScroll: Object.assign(Object.assign({}, this.auto_scroll_dir.autoScrollConfig), { container: this.auto_scroll_dir.el.nativeElement })
|
|
93
|
+
}));
|
|
95
94
|
const interactable = ((_a = this.draggable_dir) === null || _a === void 0 ? void 0 : _a.interactable) || interact(nativeElement);
|
|
96
|
-
return interactable.resizable(
|
|
97
|
-
.on('resizestart', (event) => {
|
|
95
|
+
return interactable.resizable(defaultResizeConfig)
|
|
96
|
+
.on('resizestart', (event) => {
|
|
97
|
+
this.activeEdges = event.edges;
|
|
98
|
+
if (this.auto_scroll_dir) {
|
|
99
|
+
this.subscribeToScrollEvents();
|
|
100
|
+
}
|
|
101
|
+
this.resizeStart.emit(this.mapResizeEvent(event));
|
|
102
|
+
})
|
|
98
103
|
.on('resizemove', (event) => {
|
|
99
104
|
if (this.enableResizeDefault) {
|
|
100
105
|
this.resizeListener(event);
|
|
@@ -103,11 +108,17 @@ export class ResizableDirective {
|
|
|
103
108
|
this.resizeMove.emit(mappedEvent);
|
|
104
109
|
})
|
|
105
110
|
.on('resizeinertiastart', (event) => this.resizeInertiaStart.emit(this.mapResizeEvent(event)))
|
|
106
|
-
.on('resizeend', (event) =>
|
|
111
|
+
.on('resizeend', (event) => {
|
|
112
|
+
if (this.auto_scroll_dir) {
|
|
113
|
+
this.scrollEventsSubscription.unsubscribe();
|
|
114
|
+
}
|
|
115
|
+
this.activeEdges = { left: false, right: false, top: false, bottom: false };
|
|
116
|
+
this.resizeEnd.emit(this.mapResizeEvent(event));
|
|
117
|
+
});
|
|
107
118
|
}
|
|
108
119
|
mapResizeEvent(event) {
|
|
109
120
|
var _a, _b;
|
|
110
|
-
const target =
|
|
121
|
+
const target = this.el.nativeElement;
|
|
111
122
|
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;
|
|
112
123
|
const scale = this.scale;
|
|
113
124
|
const positionInDropTarget = target && relatedTarget
|
|
@@ -132,6 +143,20 @@ export class ResizableDirective {
|
|
|
132
143
|
addResizePropertiesToElement(nativeElement) {
|
|
133
144
|
this.renderer.setProperty(nativeElement, 'resizeRef', this);
|
|
134
145
|
}
|
|
146
|
+
subscribeToScrollEvents() {
|
|
147
|
+
this.scrollEventsSubscription = this.auto_scroll_dir.scrollDeltaObserver.subscribe(({ scrollLeft, scrollTop }) => {
|
|
148
|
+
const scale = this.scale;
|
|
149
|
+
const target = this.el.nativeElement;
|
|
150
|
+
const { width: prevWidth, height: prevHeight } = target.getBoundingClientRect();
|
|
151
|
+
const deltaHeight = scrollTop * (this.activeEdges.top ? -1 : this.activeEdges.bottom ? 1 : 0);
|
|
152
|
+
const deltaWidth = scrollLeft * (this.activeEdges.left ? -1 : this.activeEdges.right ? 1 : 0);
|
|
153
|
+
const height = (prevHeight + deltaHeight) / scale;
|
|
154
|
+
const width = (prevWidth + deltaWidth) / scale;
|
|
155
|
+
const deltaX = this.activeEdges.left ? (scrollLeft / scale) : 0;
|
|
156
|
+
const deltaY = this.activeEdges.top ? (scrollTop / scale) : 0;
|
|
157
|
+
this.interactService.updateSize(this.interactableId, this.registryId, { deltaX, deltaY, width, height }, this.el.nativeElement);
|
|
158
|
+
});
|
|
159
|
+
}
|
|
135
160
|
}
|
|
136
161
|
ResizableDirective.decorators = [
|
|
137
162
|
{ type: Directive, args: [{
|
|
@@ -157,7 +182,8 @@ ResizableDirective.ctorParameters = () => [
|
|
|
157
182
|
{ type: DragRootDirective, decorators: [{ type: Optional }] },
|
|
158
183
|
{ type: AccountForScaleDirective, decorators: [{ type: Optional }] },
|
|
159
184
|
{ type: DraggableDirective, decorators: [{ type: Optional }] },
|
|
160
|
-
{ type: DropzoneDirective, decorators: [{ type: Optional }, { type: SkipSelf }] }
|
|
185
|
+
{ type: DropzoneDirective, decorators: [{ type: Optional }, { type: SkipSelf }] },
|
|
186
|
+
{ type: AutoScrollDirective, decorators: [{ type: Optional }, { type: SkipSelf }] }
|
|
161
187
|
];
|
|
162
188
|
ResizableDirective.propDecorators = {
|
|
163
189
|
enableResizeDefault: [{ type: Input }],
|
|
@@ -1 +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 dragRootEl: HTMLElement;\n\n private interactableSubscription: Subscription;\n get scale(): number {\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.scale;\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 size: {\n width: target.clientWidth / scale,\n height: target.clientHeight / scale\n }\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"]}
|
|
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';\nimport { AutoScrollDirective } from './auto-scroll.directive';\n\ninterface ActiveEdges {\n top: boolean;\n bottom: boolean;\n left: boolean;\n right: boolean;\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 activeEdges: ActiveEdges = {left: false, right: false, top: false, bottom: false}\n private interactableSubscription: Subscription;\n private scrollEventsSubscription: Subscription;\n\n get scale(): number {\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 @Optional() @SkipSelf() public auto_scroll_dir?: AutoScrollDirective\n\n\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 element: TftDragElement = this.el.nativeElement;\n const scale = this.scale;\n const {deltaRect} = event;\n const deltaX = deltaRect.left/scale;\n const deltaY = deltaRect.top/scale;\n // We get the width and height directly from the native element because\n // the event dimension can get out of sync when resizing with autoScroll\n const rect = element.getBoundingClientRect();\n const width = (rect.width + deltaRect.width)/scale;\n const height = (rect.height + deltaRect.height)/scale;\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: TftDragElement) {\n // TODO: This should try and get interactable from tft_draggable if it exists\n const defaultResizeConfig = {\n ...resizeConfig,\n enabled: !this.resizeDisabled,\n ...(this.auto_scroll_dir && {\n autoScroll: {\n ...this.auto_scroll_dir.autoScrollConfig,\n container: this.auto_scroll_dir.el.nativeElement as HTMLElement\n }\n })\n };\n const interactable = this.draggable_dir?.interactable || interact(nativeElement);\n return interactable.resizable(defaultResizeConfig)\n .on('resizestart', (event: NgResizeEvent) => {\n this.activeEdges = event.edges as ActiveEdges;\n if (this.auto_scroll_dir) {\n this.subscribeToScrollEvents();\n }\n this.resizeStart.emit(this.mapResizeEvent(event))\n })\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) => {\n if (this.auto_scroll_dir) {\n this.scrollEventsSubscription.unsubscribe();\n }\n this.activeEdges = {left: false, right: false, top: false, bottom: false}\n\n this.resizeEnd.emit(this.mapResizeEvent(event));\n });\n }\n\n mapResizeEvent(event: NgResizeEvent ): TftResizeEvent {\n const target = this.el.nativeElement as TftDragElement;\n const relatedTarget = this.draggable_dir?.dropzone_dir?.el.nativeElement;\n const scale = this.scale;\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 size: {\n width: target.clientWidth / scale,\n height: target.clientHeight / scale\n }\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 subscribeToScrollEvents() {\n this.scrollEventsSubscription = this.auto_scroll_dir.scrollDeltaObserver.subscribe(({scrollLeft, scrollTop}) => {\n const scale = this.scale;\n const target = this.el.nativeElement as HTMLElement;\n const {width: prevWidth, height: prevHeight} = target.getBoundingClientRect();\n\n const deltaHeight = scrollTop * (this.activeEdges.top ? -1 : this.activeEdges.bottom ? 1 : 0);\n const deltaWidth = scrollLeft * (this.activeEdges.left ? -1 : this.activeEdges.right ? 1 : 0);\n\n const height = (prevHeight + deltaHeight) / scale;\n const width = (prevWidth + deltaWidth) / scale;\n const deltaX = this.activeEdges.left ? (scrollLeft / scale) : 0;\n const deltaY = this.activeEdges.top ? (scrollTop / scale) : 0;\n this.interactService.updateSize(\n this.interactableId,\n this.registryId,\n {deltaX, deltaY, width, height},\n this.el.nativeElement as HTMLElement\n );\n });\n }\n}\n"]}
|