@tft/interact 12.5.2 → 14.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (102) hide show
  1. package/esm2020/index.mjs +6 -0
  2. package/esm2020/lib/directives/account-for-scale.directive.mjs +26 -0
  3. package/esm2020/lib/directives/apply-scale.directive.mjs +28 -0
  4. package/esm2020/lib/directives/auto-scroll.directive.mjs +56 -0
  5. package/esm2020/lib/directives/drag-preview.directive.mjs +20 -0
  6. package/esm2020/lib/directives/drag-root.directive.mjs +32 -0
  7. package/esm2020/lib/directives/draggable.directive.mjs +320 -0
  8. package/esm2020/lib/directives/dropzone.directive.mjs +114 -0
  9. package/esm2020/lib/directives/gesturable.directive.mjs +82 -0
  10. package/esm2020/lib/directives/index.mjs +10 -0
  11. package/esm2020/lib/directives/resizable.directive.mjs +228 -0
  12. package/esm2020/lib/interact.module.mjs +66 -0
  13. package/esm2020/lib/models/index.mjs +2 -0
  14. package/esm2020/lib/models/interact.mjs +28 -0
  15. package/esm2020/lib/pipes/array-of-n.pipe.mjs +22 -0
  16. package/esm2020/lib/pipes/index.mjs +2 -0
  17. package/esm2020/lib/services/interact.service.mjs +197 -0
  18. package/esm2020/lib/utils/helpers.mjs +35 -0
  19. package/esm2020/lib/utils/index.mjs +2 -0
  20. package/esm2020/tft-interact.mjs +5 -0
  21. package/fesm2015/{tft-interact.js → tft-interact.mjs} +464 -267
  22. package/fesm2015/tft-interact.mjs.map +1 -0
  23. package/fesm2020/tft-interact.mjs +1192 -0
  24. package/fesm2020/tft-interact.mjs.map +1 -0
  25. package/lib/directives/account-for-scale.directive.d.ts +3 -0
  26. package/lib/directives/apply-scale.directive.d.ts +3 -0
  27. package/lib/directives/auto-scroll.directive.d.ts +34 -0
  28. package/lib/directives/drag-preview.directive.d.ts +3 -0
  29. package/lib/directives/drag-root.directive.d.ts +3 -0
  30. package/lib/directives/draggable.directive.d.ts +8 -1
  31. package/lib/directives/dropzone.directive.d.ts +5 -0
  32. package/lib/directives/gesturable.directive.d.ts +3 -0
  33. package/lib/directives/index.d.ts +1 -0
  34. package/lib/directives/resizable.directive.d.ts +10 -2
  35. package/lib/interact.module.d.ts +15 -0
  36. package/lib/pipes/array-of-n.pipe.d.ts +3 -0
  37. package/lib/services/interact.service.d.ts +3 -0
  38. package/package.json +24 -11
  39. package/tft-interact-14.0.0.tgz +0 -0
  40. package/bundles/tft-interact.umd.js +0 -1419
  41. package/bundles/tft-interact.umd.js.map +0 -1
  42. package/esm2015/index.js +0 -6
  43. package/esm2015/index.js.map +0 -1
  44. package/esm2015/index.metadata.json +0 -1
  45. package/esm2015/lib/directives/account-for-scale.directive.js +0 -26
  46. package/esm2015/lib/directives/account-for-scale.directive.js.map +0 -1
  47. package/esm2015/lib/directives/account-for-scale.directive.metadata.json +0 -1
  48. package/esm2015/lib/directives/apply-scale.directive.js +0 -26
  49. package/esm2015/lib/directives/apply-scale.directive.js.map +0 -1
  50. package/esm2015/lib/directives/apply-scale.directive.metadata.json +0 -1
  51. package/esm2015/lib/directives/drag-preview.directive.js +0 -20
  52. package/esm2015/lib/directives/drag-preview.directive.js.map +0 -1
  53. package/esm2015/lib/directives/drag-preview.directive.metadata.json +0 -1
  54. package/esm2015/lib/directives/drag-root.directive.js +0 -27
  55. package/esm2015/lib/directives/drag-root.directive.js.map +0 -1
  56. package/esm2015/lib/directives/drag-root.directive.metadata.json +0 -1
  57. package/esm2015/lib/directives/draggable.directive.js +0 -265
  58. package/esm2015/lib/directives/draggable.directive.js.map +0 -1
  59. package/esm2015/lib/directives/draggable.directive.metadata.json +0 -1
  60. package/esm2015/lib/directives/dropzone.directive.js +0 -103
  61. package/esm2015/lib/directives/dropzone.directive.js.map +0 -1
  62. package/esm2015/lib/directives/dropzone.directive.metadata.json +0 -1
  63. package/esm2015/lib/directives/gesturable.directive.js +0 -77
  64. package/esm2015/lib/directives/gesturable.directive.js.map +0 -1
  65. package/esm2015/lib/directives/gesturable.directive.metadata.json +0 -1
  66. package/esm2015/lib/directives/index.js +0 -9
  67. package/esm2015/lib/directives/index.js.map +0 -1
  68. package/esm2015/lib/directives/index.metadata.json +0 -1
  69. package/esm2015/lib/directives/resizable.directive.js +0 -175
  70. package/esm2015/lib/directives/resizable.directive.js.map +0 -1
  71. package/esm2015/lib/directives/resizable.directive.metadata.json +0 -1
  72. package/esm2015/lib/interact.module.js +0 -42
  73. package/esm2015/lib/interact.module.js.map +0 -1
  74. package/esm2015/lib/interact.module.metadata.json +0 -1
  75. package/esm2015/lib/models/index.js +0 -2
  76. package/esm2015/lib/models/index.js.map +0 -1
  77. package/esm2015/lib/models/index.metadata.json +0 -1
  78. package/esm2015/lib/models/interact.js +0 -28
  79. package/esm2015/lib/models/interact.js.map +0 -1
  80. package/esm2015/lib/models/interact.metadata.json +0 -1
  81. package/esm2015/lib/pipes/array-of-n.pipe.js +0 -18
  82. package/esm2015/lib/pipes/array-of-n.pipe.js.map +0 -1
  83. package/esm2015/lib/pipes/array-of-n.pipe.metadata.json +0 -1
  84. package/esm2015/lib/pipes/index.js +0 -2
  85. package/esm2015/lib/pipes/index.js.map +0 -1
  86. package/esm2015/lib/pipes/index.metadata.json +0 -1
  87. package/esm2015/lib/services/interact.service.js +0 -196
  88. package/esm2015/lib/services/interact.service.js.map +0 -1
  89. package/esm2015/lib/services/interact.service.metadata.json +0 -1
  90. package/esm2015/lib/utils/helpers.js +0 -35
  91. package/esm2015/lib/utils/helpers.js.map +0 -1
  92. package/esm2015/lib/utils/helpers.metadata.json +0 -1
  93. package/esm2015/lib/utils/index.js +0 -2
  94. package/esm2015/lib/utils/index.js.map +0 -1
  95. package/esm2015/lib/utils/index.metadata.json +0 -1
  96. package/esm2015/tft-interact.js +0 -7
  97. package/esm2015/tft-interact.js.map +0 -1
  98. package/esm2015/tft-interact.metadata.json +0 -1
  99. package/fesm2015/tft-interact.js.map +0 -1
  100. package/tft-interact-12.5.2.tgz +0 -0
  101. package/tft-interact.d.ts +0 -6
  102. package/tft-interact.metadata.json +0 -1
@@ -1,265 +0,0 @@
1
- import { Directive, ElementRef, Input, Output, EventEmitter, Optional, SkipSelf, Renderer2, ContentChild, ViewContainerRef, Inject } from '@angular/core';
2
- import { DOCUMENT } from '@angular/common';
3
- import interact from 'interactjs';
4
- import { InteractService } from '../services/interact.service';
5
- import { DropzoneDirective } from './dropzone.directive';
6
- import { DEFAULT_REGISTRY_ID } from '../models';
7
- import { DragPreviewDirective } from './drag-preview.directive';
8
- import { getRootNode } from '../utils';
9
- import { DragRootDirective } from './drag-root.directive';
10
- import { AccountForScaleDirective } from './account-for-scale.directive';
11
- /** @dynamic */
12
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
13
- export class DraggableDirective {
14
- constructor(el, interactService, renderer, _viewContainerRef, _document, account_for_scale_dir, dropzone_dir, drag_root_dir) {
15
- this.el = el;
16
- this.interactService = interactService;
17
- this.renderer = renderer;
18
- this._viewContainerRef = _viewContainerRef;
19
- this._document = _document;
20
- this.account_for_scale_dir = account_for_scale_dir;
21
- this.dropzone_dir = dropzone_dir;
22
- this.drag_root_dir = drag_root_dir;
23
- /* zIndex while dragging*/
24
- this.dragZIndex = 10000;
25
- this.enableDragDefault = true;
26
- /**
27
- * @deprecated replaced by 'dragDisabled' property, please migrate before v13
28
- */
29
- this.disabled = false;
30
- this.dragDisabled = false;
31
- this.showPlaceholder = false;
32
- // pipes all interact events to event emitters
33
- this.dragStart = new EventEmitter();
34
- this.dragMove = new EventEmitter();
35
- this.dragInertiaStart = new EventEmitter();
36
- this.dragEnd = new EventEmitter();
37
- }
38
- // check all the different places for scale
39
- get scale() {
40
- var _a, _b, _c, _d;
41
- return ((_a = this.account_for_scale_dir) === null || _a === void 0 ? void 0 : _a.scale) || ((_b = this.drag_root_dir) === null || _b === void 0 ? void 0 : _b.account_for_scale_dir.scale) || ((_d = (_c = this.dragRoot) === null || _c === void 0 ? void 0 : _c.account_for_scale_dir) === null || _d === void 0 ? void 0 : _d.scale);
42
- }
43
- ngOnInit() {
44
- var _a, _b, _c, _d, _e;
45
- this.interactable = this.initiateDragEvents(this.dragConfig, this.el.nativeElement);
46
- this.dragRootEl = (((_b = (_a = this.dragRoot) === null || _a === void 0 ? void 0 : _a.el) === null || _b === void 0 ? void 0 : _b.nativeElement) || ((_d = (_c = this.drag_root_dir) === null || _c === void 0 ? void 0 : _c.el) === null || _d === void 0 ? void 0 : _d.nativeElement)) || this._document.body;
47
- // register with parent dropzone if it exists, otherwise use default
48
- // this gives us a place on the registry to store our drag items that don't have a dropzone
49
- this.registryId = ((_e = this.dropzone_dir) === null || _e === void 0 ? void 0 : _e.dropzoneId) || DEFAULT_REGISTRY_ID;
50
- // add draggable to directory and store its id
51
- this.interactableId = this.interactService.addDraggableToRegistry(this.registryId, this.interactableId);
52
- this.alignPositionWithInputs(this.x, this.y);
53
- // cache subscription to interactable state so we can unsubscribe onDestroy
54
- this.interactableState = this.interactService
55
- .getInteractableState(this.interactableId, this.registryId);
56
- // keep our cached position values in line with our drag state
57
- this.interactableSubscription = this.interactableState.subscribe((state) => {
58
- this.y = state.y;
59
- this.x = state.x;
60
- });
61
- this.setDragConfig();
62
- }
63
- // TODO: watch config here as well and update interactable
64
- ngOnChanges(changes) {
65
- // we do this here instead of using a setter on the input so that it
66
- // will only run once when there is a change to x and y
67
- if (changes.y || changes.x) {
68
- this.alignPositionWithInputs(this.x, this.y);
69
- }
70
- if (changes.dragConfig || changes.disabled || changes.dragDisabled) {
71
- if (!this.interactable)
72
- return;
73
- this.setDragConfig();
74
- }
75
- /**
76
- * @deprecated remove this in v13
77
- */
78
- if (changes.disabled) {
79
- 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`);
80
- }
81
- }
82
- setDragConfig() {
83
- const enabled = !(this.disabled || this.dragDisabled);
84
- const dragConfig = Object.assign(Object.assign({}, this.dragConfig), { enabled });
85
- this.interactable.draggable(dragConfig);
86
- }
87
- ngAfterViewInit() {
88
- this.addDragPropertiesToElement(this.el.nativeElement);
89
- if (!this.dropzone_dir) {
90
- this.previewRef = this.el.nativeElement;
91
- }
92
- }
93
- ngOnDestroy() {
94
- // clean up state and subscriptions related to destroyed component
95
- this.interactableSubscription.unsubscribe();
96
- this.interactService.destroyInteractable(this.interactableId, this.registryId);
97
- }
98
- dragMoveListener(event, element) {
99
- const { dx, dy } = event;
100
- const scale = this.scale;
101
- const deltaX = scale ? dx / scale : dx;
102
- const deltaY = scale ? dy / scale : dy;
103
- this.interactService.updateDeltas(this.interactableId, this.registryId, { deltaX, deltaY }, element);
104
- }
105
- setDragStyles(dragElement) {
106
- this.renderer.setStyle(dragElement, 'touchAction', 'none');
107
- this.renderer.setStyle(dragElement, 'zIndex', this.dragZIndex);
108
- this.renderer.setStyle(dragElement, 'position', 'absolute');
109
- }
110
- addDragPropertiesToElement(nativeElement) {
111
- this.renderer.setProperty(nativeElement, 'dropTarget', this.dropzone_dir || null);
112
- this.renderer.setProperty(nativeElement, 'dragOrigin', this.dropzone_dir || null);
113
- this.renderer.setProperty(nativeElement, 'dragRef', this);
114
- }
115
- mapDragEvent(event) {
116
- var _a;
117
- const { target, dropzone } = event;
118
- const dropzoneElement = (dropzone === null || dropzone === void 0 ? void 0 : dropzone.target) || ((_a = target.dropTarget) === null || _a === void 0 ? void 0 : _a.el.nativeElement);
119
- const scale = this.scale;
120
- const positionInDropTarget = target && dropzoneElement
121
- ? this.interactService.calculatePositionInElement(dropzoneElement, this.previewRef, scale)
122
- : null;
123
- return {
124
- interactEvent: event,
125
- dragRef: this,
126
- dragOrigin: target.dragOrigin,
127
- dropTarget: target.dropTarget,
128
- positionInDropTarget
129
- };
130
- }
131
- setPosition(x, y) {
132
- this.interactService.updatePosition(this.interactableId, this.registryId, { x, y }, this.el.nativeElement);
133
- }
134
- alignPositionWithInputs(x, y) {
135
- // short circuit if positions aren't numbers or if they haven't changed
136
- if (!this.isValidPosition(x, y))
137
- return;
138
- this.interactService.updatePosition(this.interactableId, this.registryId, { x, y }, this.el.nativeElement);
139
- }
140
- isValidPosition(x, y) {
141
- return this.isNumeric(x) && this.isNumeric(y);
142
- }
143
- // We use use this instead of isNaN here to try and help performance
144
- // We should be able to reliably restrict to numbers or falsey values
145
- isNumeric(num) {
146
- return typeof num === 'number' && !isNaN(num);
147
- }
148
- initiateDragEvents(dragConfig, nativeElement) {
149
- return interact(nativeElement).draggable(Object.assign(Object.assign({}, dragConfig), { enabled: !(this.disabled || this.dragDisabled) }))
150
- .on('dragstart', (event) => {
151
- var _a, _b, _c;
152
- const interaction = event.interaction;
153
- // check if we should append drag element to body
154
- if (this.enableDragDefault
155
- && interaction.pointerIsDown
156
- // TODO: probably don't need following condition checks anymore remove by 2022
157
- // && !!this.dropzone_dir
158
- // && !interaction.interacting()
159
- ) {
160
- if (this._previewTemplate) {
161
- const viewRef = this._viewContainerRef.createEmbeddedView(this._previewTemplate.templateRef);
162
- this.previewRef = getRootNode(viewRef, this._document);
163
- }
164
- else {
165
- this.previewRef = cloneElement(this.el.nativeElement);
166
- }
167
- this.addDragPropertiesToElement(this.previewRef);
168
- this.setDragStyles(this.previewRef);
169
- this.dragRootEl.prepend(this.previewRef);
170
- const scale = ((_a = this.account_for_scale_dir) === null || _a === void 0 ? void 0 : _a.scale) || ((_c = (_b = this.dragRoot) === null || _b === void 0 ? void 0 : _b.account_for_scale_dir) === null || _c === void 0 ? void 0 : _c.scale) || 1;
171
- const { x, y } = this.interactService.calculatePositionInElement(this.dragRootEl, nativeElement, scale);
172
- this.interactService.updatePosition(this.interactableId, this.registryId, { x, y }, this.previewRef);
173
- if (!this.showPlaceholder) {
174
- this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
175
- }
176
- }
177
- this.dragStart.emit(this.mapDragEvent(event));
178
- })
179
- .on('dragmove', (event) => {
180
- if (this.enableDragDefault) {
181
- const dragElement = this.dropzone_dir && this.previewRef || nativeElement;
182
- this.dragMoveListener(event, dragElement);
183
- }
184
- const mappedEvent = this.mapDragEvent(event);
185
- this.dragMove.emit(mappedEvent);
186
- })
187
- .on('draginertiastart', (event) => {
188
- this.dragInertiaStart.emit(this.mapDragEvent(event));
189
- })
190
- .on('dragend', (event) => {
191
- const mappedEvent = this.mapDragEvent(event);
192
- if (!!this.dropzone_dir && this.dropzone_dir === event.target.dropTarget) {
193
- const { x, y } = mappedEvent.positionInDropTarget;
194
- this.setPosition(x, y);
195
- }
196
- this.renderer.setStyle(this.el.nativeElement, 'display', '');
197
- this.dragEnd.emit(mappedEvent);
198
- if (this.el.nativeElement !== this.previewRef) {
199
- // we do this in a timeout, so that we don't remove before the dropzone can get the boundingElementRect
200
- setTimeout(() => {
201
- this.dragRootEl.removeChild(this.previewRef);
202
- });
203
- }
204
- });
205
- }
206
- }
207
- DraggableDirective.decorators = [
208
- { type: Directive, args: [{
209
- selector: '[tftDraggable]',
210
- // eslint-disable-next-line @angular-eslint/no-host-metadata-property
211
- host: {
212
- '[style.touchAction]': 'this.dragDisabled ? "auto" : "none"',
213
- '[style.position]': '"absolute"',
214
- '[id]': 'interactableId',
215
- }
216
- },] }
217
- ];
218
- DraggableDirective.ctorParameters = () => [
219
- { type: ElementRef },
220
- { type: InteractService },
221
- { type: Renderer2 },
222
- { type: ViewContainerRef },
223
- { type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
224
- { type: AccountForScaleDirective, decorators: [{ type: Optional }] },
225
- { type: DropzoneDirective, decorators: [{ type: Optional }, { type: SkipSelf }] },
226
- { type: DragRootDirective, decorators: [{ type: Optional }, { type: SkipSelf }] }
227
- ];
228
- DraggableDirective.propDecorators = {
229
- x: [{ type: Input }],
230
- y: [{ type: Input }],
231
- dragZIndex: [{ type: Input }],
232
- zIndex: [{ type: Input }],
233
- interactableId: [{ type: Input }],
234
- dragData: [{ type: Input }],
235
- enableDragDefault: [{ type: Input }],
236
- disabled: [{ type: Input }],
237
- dragDisabled: [{ type: Input }],
238
- dragConfig: [{ type: Input }],
239
- showPlaceholder: [{ type: Input }],
240
- dragRoot: [{ type: Input }],
241
- dragStart: [{ type: Output }],
242
- dragMove: [{ type: Output }],
243
- dragInertiaStart: [{ type: Output }],
244
- dragEnd: [{ type: Output }],
245
- _previewTemplate: [{ type: ContentChild, args: [DragPreviewDirective,] }]
246
- };
247
- /**
248
- * Component utils
249
- */
250
- // create a clone of the component passed in and add it to the root component
251
- function cloneElement(element) {
252
- const clone = element.cloneNode(true);
253
- clone.removeAttribute('id');
254
- return clone;
255
- }
256
- function getPreviewInsertionPoint(documentRef) {
257
- // We can't use the body if the user is in fullscreen mode,
258
- // because the preview will render under the fullscreen element.
259
- return documentRef.fullscreenElement ||
260
- documentRef.webkitFullscreenElement ||
261
- documentRef.mozFullScreenElement ||
262
- documentRef.msFullscreenElement ||
263
- documentRef.body;
264
- }
265
- //# sourceMappingURL=draggable.directive.js.map
@@ -1 +0,0 @@
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 +0,0 @@
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":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"}]}}}}]
@@ -1,103 +0,0 @@
1
- import { Directive, ElementRef, Input, Output, EventEmitter, Renderer2, Optional } from '@angular/core';
2
- import interact from 'interactjs';
3
- import { InteractService } from '../services/interact.service';
4
- import { AccountForScaleDirective } from './account-for-scale.directive';
5
- export class DropzoneDirective {
6
- constructor(el, renderer, interactService, account_for_scale_dir) {
7
- this.el = el;
8
- this.renderer = renderer;
9
- this.interactService = interactService;
10
- this.account_for_scale_dir = account_for_scale_dir;
11
- this.dropzoneConfig = {};
12
- // proxies to pass interact events through to consumer of directive
13
- this.dropActivate = new EventEmitter();
14
- this.dragEnter = new EventEmitter();
15
- this.dragLeave = new EventEmitter();
16
- this.dragDrop = new EventEmitter();
17
- }
18
- get scale() {
19
- var _a;
20
- return (_a = this.account_for_scale_dir) === null || _a === void 0 ? void 0 : _a.scale;
21
- }
22
- ngOnInit() {
23
- // connects
24
- this.dropzone = this.connectDropzoneEvents(this.el.nativeElement, this.dropzoneConfig);
25
- this.dropzoneId = this.interactService.addRegistryToSystem(this.dropzoneId);
26
- }
27
- ngOnChanges(changes) {
28
- if (!changes.dropzoneConfig || !this.dropzone)
29
- return;
30
- // this.dropzone.unset();
31
- // this.dropzone = this.connectDropzoneEvents(this.el.nativeElement, this.dropzoneConfig)
32
- this.dropzone.dropzone(this.dropzoneConfig);
33
- }
34
- /**
35
- * Connects element to interacts dropzone events and returns a reference to the interactable
36
- * @param nativeElement the element to tie drop events to
37
- * @param dropzoneConfig the interact configuration to use when connecting
38
- */
39
- connectDropzoneEvents(nativeElement, dropzoneConfig) {
40
- return interact(nativeElement).dropzone(dropzoneConfig)
41
- // TODO: investigate when this fires in different scenarios
42
- .on('dropactivate', (event) => {
43
- this.dropActivate.emit(this.mapDropzoneEvent(event));
44
- })
45
- .on('dragenter', (event) => {
46
- this.renderer.setProperty(event.relatedTarget, 'dropTarget', this);
47
- this.dragEnter.emit(this.mapDropzoneEvent(event));
48
- })
49
- .on('dragleave', (event) => {
50
- if (event.relatedTarget.dropTarget === this) {
51
- this.renderer.setProperty(event.relatedTarget, 'dropTarget', null);
52
- }
53
- this.dragLeave.emit(this.mapDropzoneEvent(event));
54
- })
55
- .on('drop', (event) => {
56
- this.dragDrop.emit(this.mapDropzoneEvent(event));
57
- });
58
- }
59
- /**
60
- * Maps the drop event emitted by interact to something a little easier to use
61
- * @param event the drop event emitted by interact, extended with extra fields we added to
62
- */
63
- mapDropzoneEvent(event) {
64
- var _a, _b;
65
- const zoneElement = event.target;
66
- const dragElement = (_b = (_a = event.relatedTarget) === null || _a === void 0 ? void 0 : _a.dragRef) === null || _b === void 0 ? void 0 : _b.previewRef;
67
- const scale = this.scale;
68
- const positionInDropTarget = zoneElement && dragElement
69
- ? this.interactService.calculatePositionInElement(zoneElement, dragElement, scale)
70
- : null;
71
- return {
72
- interactEvent: event,
73
- dragRef: dragElement.dragRef,
74
- dragOrigin: dragElement.dragOrigin,
75
- dropTarget: event.relatedTarget.dropTarget,
76
- positionInDropTarget
77
- };
78
- }
79
- }
80
- DropzoneDirective.decorators = [
81
- { type: Directive, args: [{
82
- selector: '[tftDropzone]',
83
- host: {
84
- '[id]': 'dropzoneId',
85
- }
86
- },] }
87
- ];
88
- DropzoneDirective.ctorParameters = () => [
89
- { type: ElementRef },
90
- { type: Renderer2 },
91
- { type: InteractService },
92
- { type: AccountForScaleDirective, decorators: [{ type: Optional }] }
93
- ];
94
- DropzoneDirective.propDecorators = {
95
- dropzoneId: [{ type: Input }],
96
- dropzoneConfig: [{ type: Input }],
97
- dropzoneData: [{ type: Input }],
98
- dropActivate: [{ type: Output }],
99
- dragEnter: [{ type: Output }],
100
- dragLeave: [{ type: Output }],
101
- dragDrop: [{ type: Output }]
102
- };
103
- //# sourceMappingURL=dropzone.directive.js.map
@@ -1 +0,0 @@
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\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 +0,0 @@
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":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"}]}}}}]
@@ -1,77 +0,0 @@
1
- import { Directive, ElementRef, Input, Output, EventEmitter, Optional } from '@angular/core';
2
- import interact from 'interactjs';
3
- import { DraggableDirective } from '../directives';
4
- /** @dynamic */
5
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
6
- export class GesturableDirective {
7
- constructor(el, draggable_dir) {
8
- this.el = el;
9
- this.draggable_dir = draggable_dir;
10
- this.gestureDisabled = false;
11
- // pipes all interact events to event emitters
12
- this.gestureStart = new EventEmitter();
13
- this.gestureMove = new EventEmitter();
14
- this.gestureEnd = new EventEmitter();
15
- }
16
- ngOnInit() {
17
- var _a;
18
- this.gesturableId = ((_a = this.draggable_dir) === null || _a === void 0 ? void 0 : _a.interactableId) || 'id';
19
- this.interactable = this.initiateGestureEvents(this.gestureConfig, this.el.nativeElement);
20
- this.setGestureConfig();
21
- }
22
- // TODO: watch config here as well and update interactable
23
- ngOnChanges(changes) {
24
- // we do this here instead of using a setter on the input so that it
25
- // will only run once when there is a change to x and y
26
- if (changes.gestureConfig || changes.gestureDisabled) {
27
- if (!this.interactable)
28
- return;
29
- this.setGestureConfig();
30
- }
31
- }
32
- setGestureConfig() {
33
- const enabled = !this.gestureDisabled;
34
- const gestureConfig = Object.assign(Object.assign({}, this.gestureConfig), { enabled });
35
- this.interactable.gesturable(gestureConfig);
36
- }
37
- initiateGestureEvents(gestureConfig, nativeElement) {
38
- var _a;
39
- const defaultConfig = {
40
- enabled: !this.gestureDisabled,
41
- };
42
- const interactable = ((_a = this.draggable_dir) === null || _a === void 0 ? void 0 : _a.interactable) || interact(nativeElement);
43
- return interactable.gesturable(Object.assign(Object.assign({}, defaultConfig), gestureConfig))
44
- .on('gesturestart', (event) => {
45
- this.gestureStart.emit({ gestureRef: this, interactEvent: event });
46
- })
47
- .on('gesturemove', (event) => {
48
- this.gestureMove.emit({ gestureRef: this, interactEvent: event });
49
- })
50
- .on('gestureend', (event) => {
51
- this.gestureEnd.emit({ gestureRef: this, interactEvent: event });
52
- });
53
- }
54
- }
55
- GesturableDirective.decorators = [
56
- { type: Directive, args: [{
57
- selector: '[tftGesturable]',
58
- // eslint-disable-next-line @angular-eslint/no-host-metadata-property
59
- host: {
60
- // '[style.touchAction]': 'this.gestureDisabled ? "auto" : "none"',
61
- '[id]': 'gesturableId',
62
- }
63
- },] }
64
- ];
65
- GesturableDirective.ctorParameters = () => [
66
- { type: ElementRef },
67
- { type: DraggableDirective, decorators: [{ type: Optional }] }
68
- ];
69
- GesturableDirective.propDecorators = {
70
- gesturableId: [{ type: Input }],
71
- gestureDisabled: [{ type: Input }],
72
- gestureConfig: [{ type: Input }],
73
- gestureStart: [{ type: Output }],
74
- gestureMove: [{ type: Output }],
75
- gestureEnd: [{ type: Output }]
76
- };
77
- //# sourceMappingURL=gesturable.directive.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"gesturable.directive.js","sourceRoot":"","sources":["../../../../../../libs/interact/src/lib/directives/gesturable.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import { Directive, ElementRef, Input, OnInit, Output,\n EventEmitter, Optional, SimpleChanges, OnChanges } from '@angular/core';\nimport interact from 'interactjs';\nimport { DraggableOptions, GesturableOptions, Interactable, GestureEvent } from '@interactjs/types/index';\nimport { Observable } from 'rxjs';\nimport { TftCoords, TftGestureEvent } from '../models';\nimport { DraggableDirective } from '../directives';\n\n/** @dynamic */\n@Directive({\n selector: '[tftGesturable]',\n // eslint-disable-next-line @angular-eslint/no-host-metadata-property\n host: {\n // '[style.touchAction]': 'this.gestureDisabled ? \"auto\" : \"none\"',\n '[id]': 'gesturableId',\n }\n})\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport class GesturableDirective<D = any> implements OnInit, OnChanges {\n\n @Input() gesturableId: string;\n @Input() gestureDisabled = false;\n @Input() gestureConfig: Partial<Interact.OrBoolean<DraggableOptions>>;\n // pipes all interact events to event emitters\n @Output() gestureStart = new EventEmitter<TftGestureEvent>();\n @Output() gestureMove = new EventEmitter<TftGestureEvent>();\n @Output() gestureEnd = new EventEmitter<TftGestureEvent>();\n\n interactableState: Observable<TftCoords>;\n interactable: Interactable;\n\n constructor(\n public el: ElementRef,\n @Optional() private draggable_dir?: DraggableDirective,\n ) { }\n\n ngOnInit() {\n this.gesturableId = this.draggable_dir?.interactableId || 'id';\n this.interactable = this.initiateGestureEvents(this.gestureConfig, this.el.nativeElement);\n this.setGestureConfig();\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.gestureConfig || changes.gestureDisabled) {\n if(!this.interactable) return;\n this.setGestureConfig();\n }\n }\n\n setGestureConfig() {\n const enabled = !this.gestureDisabled;\n const gestureConfig = {...this.gestureConfig, enabled};\n this.interactable.gesturable(gestureConfig);\n }\n\n initiateGestureEvents(gestureConfig: Partial<Interact.OrBoolean<GesturableOptions>>, nativeElement: HTMLElement) {\n\n const defaultConfig: GesturableOptions = {\n enabled: !this.gestureDisabled,\n };\n const interactable = this.draggable_dir?.interactable || interact(nativeElement);\n\n return interactable.gesturable({...defaultConfig, ...gestureConfig})\n .on('gesturestart', (event: GestureEvent) => {\n this.gestureStart.emit({gestureRef: this, interactEvent: event})\n })\n .on('gesturemove', (event: GestureEvent) => {\n this.gestureMove.emit({gestureRef: this, interactEvent: event})\n })\n .on('gestureend', (event: GestureEvent) => {\n this.gestureEnd.emit({gestureRef: this, interactEvent: event})\n })\n }\n}\n"]}
@@ -1 +0,0 @@
1
- [{"__symbolic":"module","version":4,"metadata":{"GesturableDirective":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":9,"character":1},"arguments":[{"selector":"[tftGesturable]","host":{"[id]":"gesturableId","$quoted$":["[id]"]}}]}],"members":{"gesturableId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"gestureDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"gestureConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"gestureStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":3}}]}],"gestureMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":3}}]}],"gestureEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":33,"character":5}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":32,"character":15},{"__symbolic":"reference","module":"../directives","name":"DraggableDirective","line":33,"character":40}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"setGestureConfig":[{"__symbolic":"method"}],"initiateGestureEvents":[{"__symbolic":"method"}]}}}}]
@@ -1,9 +0,0 @@
1
- export * from './draggable.directive';
2
- export * from './dropzone.directive';
3
- export * from './resizable.directive';
4
- export * from './drag-preview.directive';
5
- export * from './gesturable.directive';
6
- export * from './drag-root.directive';
7
- export * from './account-for-scale.directive';
8
- export * from './apply-scale.directive';
9
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
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 +0,0 @@
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"}]}]