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