@tft/interact 21.0.6 → 21.1.1
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/README.md +317 -22
- package/fesm2022/tft-interact.mjs +361 -365
- package/fesm2022/tft-interact.mjs.map +1 -1
- package/package.json +1 -1
- package/types/tft-interact.d.ts +159 -107
package/types/tft-interact.d.ts
CHANGED
|
@@ -1,50 +1,49 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import { OnInit,
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { OnInit, ElementRef, TemplateRef, InjectionToken, OnDestroy, AfterViewInit, PipeTransform, ModuleWithProviders, EmbeddedViewRef } from '@angular/core';
|
|
3
3
|
import * as _interactjs_core_Interactable from '@interactjs/core/Interactable';
|
|
4
|
+
import * as _interactjs_types_index from '@interactjs/types/index';
|
|
4
5
|
import { DropzoneOptions, Interactable, DraggableOptions, ResizableOptions, ResizeEvent, GesturableOptions } from '@interactjs/types/index';
|
|
5
6
|
import { Observable, Subject, BehaviorSubject } from 'rxjs';
|
|
6
7
|
import { Point, DropEvent, Interactable as Interactable$1, DragEvent, ResizeEvent as ResizeEvent$1, GestureEvent } from '@interactjs/types';
|
|
7
|
-
import * as i11 from '@angular/common';
|
|
8
8
|
|
|
9
9
|
type PositionOption = 'relative' | 'absolute' | 'fixed' | 'static' | 'sticky' | 'unset' | 'inherit' | 'initial' | 'revert';
|
|
10
|
-
declare class DropzoneDirective implements OnInit
|
|
10
|
+
declare class DropzoneDirective implements OnInit {
|
|
11
11
|
el: ElementRef<any>;
|
|
12
12
|
private renderer;
|
|
13
13
|
private interactService;
|
|
14
14
|
private account_for_scale_dir;
|
|
15
|
-
dropzoneId: string
|
|
16
|
-
dropzoneConfig: DropzoneOptions
|
|
17
|
-
dropzoneData: any
|
|
18
|
-
position: PositionOption
|
|
19
|
-
dropActivate:
|
|
20
|
-
dragEnter:
|
|
21
|
-
dragLeave:
|
|
22
|
-
dragDrop:
|
|
15
|
+
dropzoneId: _angular_core.InputSignal<string>;
|
|
16
|
+
dropzoneConfig: _angular_core.InputSignal<DropzoneOptions>;
|
|
17
|
+
dropzoneData: _angular_core.InputSignal<any>;
|
|
18
|
+
position: _angular_core.InputSignal<PositionOption>;
|
|
19
|
+
dropActivate: _angular_core.OutputEmitterRef<TftDropEvent>;
|
|
20
|
+
dragEnter: _angular_core.OutputEmitterRef<TftDropEvent>;
|
|
21
|
+
dragLeave: _angular_core.OutputEmitterRef<TftDropEvent>;
|
|
22
|
+
dragDrop: _angular_core.OutputEmitterRef<TftDropEvent>;
|
|
23
23
|
dropzone: Interactable;
|
|
24
|
-
|
|
24
|
+
/** The actual registered ID — may differ from the dropzoneId input if none was provided. Drives [id] host binding. */
|
|
25
|
+
_registeredId: _angular_core.WritableSignal<string>;
|
|
26
|
+
scale: _angular_core.Signal<number>;
|
|
25
27
|
ngOnInit(): void;
|
|
26
|
-
|
|
28
|
+
constructor();
|
|
27
29
|
/**
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
* @param dropzoneConfig the interact configuration to use when connecting
|
|
31
|
-
*/
|
|
30
|
+
* Connects element to interact's dropzone events and returns a reference to the interactable
|
|
31
|
+
*/
|
|
32
32
|
connectDropzoneEvents(nativeElement: any, dropzoneConfig: DropzoneOptions): _interactjs_core_Interactable.Interactable;
|
|
33
33
|
/**
|
|
34
34
|
* Maps the drop event emitted by interact to something a little easier to use
|
|
35
|
-
* @param event the drop event emitted by interact, extended with extra fields we added to
|
|
36
35
|
*/
|
|
37
36
|
mapDropzoneEvent(event: NgDropEvent): TftDropEvent;
|
|
38
|
-
static ɵfac:
|
|
39
|
-
static ɵdir:
|
|
37
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropzoneDirective, never>;
|
|
38
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DropzoneDirective, "[tftDropzone]", never, { "dropzoneId": { "alias": "dropzoneId"; "required": false; "isSignal": true; }; "dropzoneConfig": { "alias": "dropzoneConfig"; "required": false; "isSignal": true; }; "dropzoneData": { "alias": "dropzoneData"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, { "dropActivate": "dropActivate"; "dragEnter": "dragEnter"; "dragLeave": "dragLeave"; "dragDrop": "dragDrop"; }, never, never, true, never>;
|
|
40
39
|
}
|
|
41
40
|
|
|
42
41
|
declare const TFT_DRAG_PREVIEW: InjectionToken<DragPreviewDirective<any>>;
|
|
43
42
|
declare class DragPreviewDirective<T = any> {
|
|
44
43
|
templateRef: TemplateRef<T>;
|
|
45
|
-
dragData: T
|
|
46
|
-
static ɵfac:
|
|
47
|
-
static ɵdir:
|
|
44
|
+
dragData: _angular_core.InputSignal<T>;
|
|
45
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DragPreviewDirective<any>, never>;
|
|
46
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DragPreviewDirective<any>, "ng-template[tftDragPreview]", never, { "dragData": { "alias": "dragData"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
48
47
|
}
|
|
49
48
|
|
|
50
49
|
/**
|
|
@@ -55,9 +54,9 @@ declare class DragPreviewDirective<T = any> {
|
|
|
55
54
|
*/
|
|
56
55
|
declare class AccountForScaleDirective {
|
|
57
56
|
el: ElementRef<any>;
|
|
58
|
-
scale: number
|
|
59
|
-
static ɵfac:
|
|
60
|
-
static ɵdir:
|
|
57
|
+
scale: _angular_core.InputSignal<number>;
|
|
58
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccountForScaleDirective, never>;
|
|
59
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AccountForScaleDirective, "[tftAccountForScale]", never, { "scale": { "alias": "scale"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
61
60
|
}
|
|
62
61
|
|
|
63
62
|
/**
|
|
@@ -68,43 +67,34 @@ declare class AccountForScaleDirective {
|
|
|
68
67
|
declare class DragRootDirective {
|
|
69
68
|
el: ElementRef<any>;
|
|
70
69
|
account_for_scale_dir?: AccountForScaleDirective;
|
|
71
|
-
static ɵfac:
|
|
72
|
-
static ɵdir:
|
|
70
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DragRootDirective, never>;
|
|
71
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DragRootDirective, "[tftDragRoot]", ["tftDragRoot"], {}, {}, never, never, true, never>;
|
|
73
72
|
}
|
|
74
73
|
|
|
75
74
|
interface ScrollObject {
|
|
76
75
|
scrollTop: number;
|
|
77
76
|
scrollLeft: number;
|
|
78
77
|
}
|
|
79
|
-
/**
|
|
80
|
-
* Use to apply scale to the element and tell the drag and resize directives to account for the scale when
|
|
81
|
-
* @example <div tftAccountForScale [scale]="2.5"> <div tftDraggable> </div> </div>
|
|
82
|
-
* @note if `dragRoot` is used this directive should be used on the same element to ensure that the drag
|
|
83
|
-
* element accounts for scale
|
|
84
|
-
*/
|
|
85
78
|
declare class AutoScrollDirective {
|
|
86
79
|
el: ElementRef<any>;
|
|
87
|
-
|
|
88
|
-
* Limit minimum time between scroll events in milliseconds
|
|
89
|
-
*/
|
|
90
|
-
autoScrollConfig: {
|
|
80
|
+
autoScrollConfig: _angular_core.InputSignal<{
|
|
91
81
|
margin: number;
|
|
92
82
|
distance: number;
|
|
93
83
|
interval: number;
|
|
94
84
|
speed: number;
|
|
95
85
|
enabled: boolean;
|
|
96
|
-
}
|
|
86
|
+
}>;
|
|
97
87
|
private scrollSubject;
|
|
98
88
|
readonly scrollObserver: Observable<ScrollObject>;
|
|
99
89
|
readonly scrollDeltaObserver: Subject<ScrollObject>;
|
|
100
90
|
scroll(scrollEvent: Event): void;
|
|
101
91
|
constructor();
|
|
102
|
-
static ɵfac:
|
|
103
|
-
static ɵdir:
|
|
92
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AutoScrollDirective, never>;
|
|
93
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AutoScrollDirective, "[tftAutoScroll]", never, { "autoScrollConfig": { "alias": "autoScrollConfig"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
104
94
|
}
|
|
105
95
|
|
|
106
96
|
/** @dynamic */
|
|
107
|
-
declare class DraggableDirective<D = any> implements OnInit,
|
|
97
|
+
declare class DraggableDirective<D = any> implements OnInit, OnDestroy, AfterViewInit {
|
|
108
98
|
el: ElementRef<any>;
|
|
109
99
|
private interactService;
|
|
110
100
|
private renderer;
|
|
@@ -114,32 +104,33 @@ declare class DraggableDirective<D = any> implements OnInit, OnChanges, OnDestro
|
|
|
114
104
|
dropzone_dir?: DropzoneDirective;
|
|
115
105
|
drag_root_dir?: DragRootDirective;
|
|
116
106
|
auto_scroll_dir?: AutoScrollDirective;
|
|
117
|
-
x: number
|
|
118
|
-
y: number
|
|
119
|
-
|
|
107
|
+
x: _angular_core.InputSignal<number>;
|
|
108
|
+
y: _angular_core.InputSignal<number>;
|
|
109
|
+
/** zIndex while dragging */
|
|
110
|
+
dragZIndex: _angular_core.InputSignal<number>;
|
|
120
111
|
/** zIndex while at rest */
|
|
121
|
-
zIndex: number
|
|
112
|
+
zIndex: _angular_core.InputSignal<number>;
|
|
122
113
|
interactableId: string;
|
|
123
|
-
dragData: D
|
|
124
|
-
enableDragDefault: boolean
|
|
114
|
+
dragData: _angular_core.InputSignal<D>;
|
|
115
|
+
enableDragDefault: _angular_core.InputSignal<boolean>;
|
|
125
116
|
/**
|
|
126
117
|
* @deprecated replaced by 'dragDisabled' property, please migrate before v13
|
|
127
118
|
*/
|
|
128
|
-
disabled: boolean
|
|
129
|
-
dragDisabled: boolean
|
|
130
|
-
dragConfig: Partial<
|
|
131
|
-
showPlaceholder: boolean
|
|
119
|
+
disabled: _angular_core.InputSignal<boolean>;
|
|
120
|
+
dragDisabled: _angular_core.InputSignal<boolean>;
|
|
121
|
+
dragConfig: _angular_core.InputSignal<Partial<_interactjs_types_index.OrBoolean<DraggableOptions>>>;
|
|
122
|
+
showPlaceholder: _angular_core.InputSignal<boolean>;
|
|
132
123
|
/**
|
|
133
124
|
* The element we want to prepend the drag element to.
|
|
134
125
|
* Use `tftDragRoot` directive on a parent element to set custom root element
|
|
135
126
|
* @default document.body
|
|
136
127
|
*/
|
|
137
|
-
dragRoot: DragRootDirective
|
|
128
|
+
dragRoot: _angular_core.InputSignal<DragRootDirective>;
|
|
138
129
|
private dragRootEl;
|
|
139
|
-
dragStart:
|
|
140
|
-
dragMove:
|
|
141
|
-
dragInertiaStart:
|
|
142
|
-
dragEnd:
|
|
130
|
+
dragStart: _angular_core.OutputEmitterRef<TftDragEvent>;
|
|
131
|
+
dragMove: _angular_core.OutputEmitterRef<TftDragEvent>;
|
|
132
|
+
dragInertiaStart: _angular_core.OutputEmitterRef<TftDragEvent>;
|
|
133
|
+
dragEnd: _angular_core.OutputEmitterRef<TftDragEvent>;
|
|
143
134
|
_previewTemplate: DragPreviewDirective;
|
|
144
135
|
interactableState: Observable<TftCoords>;
|
|
145
136
|
interactable: Interactable;
|
|
@@ -147,9 +138,9 @@ declare class DraggableDirective<D = any> implements OnInit, OnChanges, OnDestro
|
|
|
147
138
|
private interactableSubscription;
|
|
148
139
|
private scrollEventsSubscription;
|
|
149
140
|
previewRef: TftDragElement;
|
|
150
|
-
|
|
141
|
+
scale: _angular_core.Signal<number>;
|
|
142
|
+
constructor();
|
|
151
143
|
ngOnInit(): void;
|
|
152
|
-
ngOnChanges(changes: SimpleChanges): void;
|
|
153
144
|
setDragConfig(): void;
|
|
154
145
|
ngAfterViewInit(): void;
|
|
155
146
|
ngOnDestroy(): void;
|
|
@@ -163,12 +154,12 @@ declare class DraggableDirective<D = any> implements OnInit, OnChanges, OnDestro
|
|
|
163
154
|
isNumeric(num: number): boolean;
|
|
164
155
|
initiateDragEvents(dragConfig: Partial<Interact.OrBoolean<DraggableOptions>>, nativeElement: HTMLElement): _interactjs_core_Interactable.Interactable;
|
|
165
156
|
subscribeToScrollEvents(): void;
|
|
166
|
-
static ɵfac:
|
|
167
|
-
static ɵdir:
|
|
157
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DraggableDirective<any>, never>;
|
|
158
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DraggableDirective<any>, "[tftDraggable]", never, { "x": { "alias": "x"; "required": false; "isSignal": true; }; "y": { "alias": "y"; "required": false; "isSignal": true; }; "dragZIndex": { "alias": "dragZIndex"; "required": false; "isSignal": true; }; "zIndex": { "alias": "zIndex"; "required": false; "isSignal": true; }; "dragData": { "alias": "dragData"; "required": false; "isSignal": true; }; "enableDragDefault": { "alias": "enableDragDefault"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "dragDisabled": { "alias": "dragDisabled"; "required": false; "isSignal": true; }; "dragConfig": { "alias": "dragConfig"; "required": false; "isSignal": true; }; "showPlaceholder": { "alias": "showPlaceholder"; "required": false; "isSignal": true; }; "dragRoot": { "alias": "dragRoot"; "required": false; "isSignal": true; }; }, { "dragStart": "dragStart"; "dragMove": "dragMove"; "dragInertiaStart": "dragInertiaStart"; "dragEnd": "dragEnd"; }, ["_previewTemplate"], never, true, never>;
|
|
168
159
|
}
|
|
169
160
|
|
|
170
161
|
/** @dynamic */
|
|
171
|
-
declare class ResizableDirective implements OnInit, OnDestroy
|
|
162
|
+
declare class ResizableDirective implements OnInit, OnDestroy {
|
|
172
163
|
el: ElementRef<any>;
|
|
173
164
|
private _document;
|
|
174
165
|
private interactService;
|
|
@@ -178,73 +169,129 @@ declare class ResizableDirective implements OnInit, OnDestroy, OnChanges {
|
|
|
178
169
|
private draggable_dir;
|
|
179
170
|
private dropzone_dir;
|
|
180
171
|
auto_scroll_dir?: AutoScrollDirective;
|
|
181
|
-
enableResizeDefault: boolean
|
|
182
|
-
position: string
|
|
183
|
-
resizeConfig: Partial<
|
|
184
|
-
interactableId: string
|
|
185
|
-
width: number
|
|
186
|
-
height: number
|
|
187
|
-
resizeDisabled: boolean
|
|
188
|
-
resizeStart:
|
|
189
|
-
resizeMove:
|
|
190
|
-
resizeInertiaStart:
|
|
191
|
-
resizeEnd:
|
|
172
|
+
enableResizeDefault: _angular_core.InputSignal<boolean>;
|
|
173
|
+
position: _angular_core.InputSignal<string>;
|
|
174
|
+
resizeConfig: _angular_core.InputSignal<Partial<_interactjs_types_index.OrBoolean<ResizableOptions>>>;
|
|
175
|
+
interactableId: _angular_core.InputSignal<string>;
|
|
176
|
+
width: _angular_core.InputSignal<number>;
|
|
177
|
+
height: _angular_core.InputSignal<number>;
|
|
178
|
+
resizeDisabled: _angular_core.InputSignal<boolean>;
|
|
179
|
+
resizeStart: _angular_core.OutputEmitterRef<TftResizeEvent>;
|
|
180
|
+
resizeMove: _angular_core.OutputEmitterRef<TftResizeEvent>;
|
|
181
|
+
resizeInertiaStart: _angular_core.OutputEmitterRef<TftResizeEvent>;
|
|
182
|
+
resizeEnd: _angular_core.OutputEmitterRef<TftResizeEvent>;
|
|
192
183
|
defaultConfig: Partial<Interact.OrBoolean<ResizableOptions>>;
|
|
193
184
|
registryId: string;
|
|
194
185
|
interactable: Interactable;
|
|
195
186
|
dragRootEl: HTMLElement;
|
|
187
|
+
_interactableId: string;
|
|
196
188
|
private activeEdges;
|
|
197
189
|
private interactableSubscription;
|
|
198
190
|
private scrollEventsSubscription;
|
|
199
|
-
|
|
191
|
+
scale: _angular_core.Signal<number>;
|
|
200
192
|
constructor();
|
|
201
193
|
ngOnInit(): void;
|
|
202
|
-
ngOnChanges(changes: SimpleChanges): void;
|
|
203
194
|
ngOnDestroy(): void;
|
|
204
195
|
resizeListener(event: ResizeEvent): void;
|
|
205
|
-
/**
|
|
206
|
-
* hook elements into interacts resize event listeners
|
|
207
|
-
* we spread the configs so that the consuming component only overwrites the
|
|
208
|
-
* pieces that it explicitly indicates
|
|
209
|
-
* @param resizeConfig
|
|
210
|
-
* @param nativeElement
|
|
211
|
-
*/
|
|
212
196
|
initiateResizeEvents(resizeConfig: Partial<Interact.OrBoolean<ResizableOptions>>, nativeElement: TftDragElement): _interactjs_core_Interactable.Interactable;
|
|
213
197
|
mapResizeEvent(event: NgResizeEvent): TftResizeEvent;
|
|
214
198
|
alignDimensionsWithInputs(width: number, height: number): void;
|
|
215
199
|
addResizePropertiesToElement(nativeElement: TftDragElement): void;
|
|
216
200
|
subscribeToScrollEvents(): void;
|
|
217
|
-
static ɵfac:
|
|
218
|
-
static ɵdir:
|
|
201
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ResizableDirective, never>;
|
|
202
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ResizableDirective, "[tftResizable]", never, { "enableResizeDefault": { "alias": "enableResizeDefault"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "resizeConfig": { "alias": "resizeConfig"; "required": false; "isSignal": true; }; "interactableId": { "alias": "interactableId"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "resizeDisabled": { "alias": "resizeDisabled"; "required": false; "isSignal": true; }; }, { "resizeStart": "resizeStart"; "resizeMove": "resizeMove"; "resizeInertiaStart": "resizeInertiaStart"; "resizeEnd": "resizeEnd"; }, never, never, true, never>;
|
|
219
203
|
}
|
|
220
204
|
|
|
221
205
|
/** @dynamic */
|
|
222
|
-
declare class GesturableDirective<D = any> implements OnInit
|
|
206
|
+
declare class GesturableDirective<D = any> implements OnInit {
|
|
223
207
|
el: ElementRef<any>;
|
|
224
208
|
private draggable_dir;
|
|
225
|
-
gesturableId: string
|
|
226
|
-
gestureDisabled: boolean
|
|
227
|
-
gestureConfig: Partial<
|
|
228
|
-
gestureStart:
|
|
229
|
-
gestureMove:
|
|
230
|
-
gestureEnd:
|
|
209
|
+
gesturableId: _angular_core.InputSignal<string>;
|
|
210
|
+
gestureDisabled: _angular_core.InputSignal<boolean>;
|
|
211
|
+
gestureConfig: _angular_core.InputSignal<Partial<_interactjs_types_index.OrBoolean<DraggableOptions>>>;
|
|
212
|
+
gestureStart: _angular_core.OutputEmitterRef<TftGestureEvent>;
|
|
213
|
+
gestureMove: _angular_core.OutputEmitterRef<TftGestureEvent>;
|
|
214
|
+
gestureEnd: _angular_core.OutputEmitterRef<TftGestureEvent>;
|
|
231
215
|
interactableState: Observable<TftCoords>;
|
|
232
216
|
interactable: Interactable;
|
|
217
|
+
constructor();
|
|
233
218
|
ngOnInit(): void;
|
|
234
|
-
ngOnChanges(changes: SimpleChanges): void;
|
|
235
219
|
setGestureConfig(): void;
|
|
236
220
|
initiateGestureEvents(gestureConfig: Partial<Interact.OrBoolean<GesturableOptions>>, nativeElement: HTMLElement): _interactjs_core_Interactable.Interactable;
|
|
237
|
-
static ɵfac:
|
|
238
|
-
static ɵdir:
|
|
221
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GesturableDirective<any>, never>;
|
|
222
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GesturableDirective<any>, "[tftGesturable]", never, { "gesturableId": { "alias": "gesturableId"; "required": false; "isSignal": true; }; "gestureDisabled": { "alias": "gestureDisabled"; "required": false; "isSignal": true; }; "gestureConfig": { "alias": "gestureConfig"; "required": false; "isSignal": true; }; }, { "gestureStart": "gestureStart"; "gestureMove": "gestureMove"; "gestureEnd": "gestureEnd"; }, never, never, true, never>;
|
|
239
223
|
}
|
|
240
224
|
|
|
241
225
|
declare class ApplyScaleDirective {
|
|
242
226
|
el: ElementRef<any>;
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
227
|
+
scale: _angular_core.InputSignal<number>;
|
|
228
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ApplyScaleDirective, never>;
|
|
229
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ApplyScaleDirective, "[tftApplyScale]", never, { "scale": { "alias": "scale"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
interface LassoRect {
|
|
233
|
+
left: number;
|
|
234
|
+
right: number;
|
|
235
|
+
top: number;
|
|
236
|
+
bottom: number;
|
|
237
|
+
}
|
|
238
|
+
/**
|
|
239
|
+
* Directive that handles lasso (drag-to-select) interaction geometry.
|
|
240
|
+
* Manages mouse tracking, the visual selection rectangle, and click suppression.
|
|
241
|
+
* Domain-specific hit-testing (what got selected) is the consumer's responsibility:
|
|
242
|
+
* listen to `(lassoCommit)` with the viewport-space bounding rect and query your own elements.
|
|
243
|
+
*
|
|
244
|
+
* Usage:
|
|
245
|
+
* ```html
|
|
246
|
+
* <div tftLasso #lasso="tftLasso" [scale]="scale"
|
|
247
|
+
* (lassoStart)="onStart()" (lassoCommit)="onCommit($event)">
|
|
248
|
+
* @if (lasso.lassoDisplayRect(); as r) {
|
|
249
|
+
* <div class="lasso-rect" [style.left.px]="r.x" [style.top.px]="r.y"
|
|
250
|
+
* [style.width.px]="r.w" [style.height.px]="r.h"></div>
|
|
251
|
+
* }
|
|
252
|
+
* </div>
|
|
253
|
+
* ```
|
|
254
|
+
*/
|
|
255
|
+
declare class LassoDirective {
|
|
256
|
+
private host;
|
|
257
|
+
/** Scale factor applied to the host element — used to convert viewport px to container-local px. */
|
|
258
|
+
scale: _angular_core.InputSignal<number>;
|
|
259
|
+
/** When true, lasso interaction is disabled. */
|
|
260
|
+
lassoDisabled: _angular_core.InputSignal<boolean>;
|
|
261
|
+
/** Emitted on pointerdown (before any drag). Use to clear previous selection state. */
|
|
262
|
+
lassoStart: _angular_core.OutputEmitterRef<void>;
|
|
263
|
+
/**
|
|
264
|
+
* Emitted on pointerup when the drag exceeded the 5 px threshold.
|
|
265
|
+
* Rect is in viewport (clientX/Y) space — pass directly to getBoundingClientRect comparisons.
|
|
266
|
+
*/
|
|
267
|
+
lassoCommit: _angular_core.OutputEmitterRef<LassoRect>;
|
|
268
|
+
private _startVP;
|
|
269
|
+
private _currentVP;
|
|
270
|
+
private _startLocal;
|
|
271
|
+
private _currentLocal;
|
|
272
|
+
private _suppressNextClick;
|
|
273
|
+
private _activePointerId;
|
|
274
|
+
/** True while a lasso drag is in progress. */
|
|
275
|
+
isLassoing: _angular_core.WritableSignal<boolean>;
|
|
276
|
+
/**
|
|
277
|
+
* Rectangle in container-local CSS pixels (pre-divided by scale) — bind directly to
|
|
278
|
+
* [style.left.px], [style.top.px], [style.width.px], [style.height.px].
|
|
279
|
+
* Null when no drag is in progress.
|
|
280
|
+
*/
|
|
281
|
+
lassoDisplayRect: _angular_core.Signal<{
|
|
282
|
+
x: number;
|
|
283
|
+
y: number;
|
|
284
|
+
w: number;
|
|
285
|
+
h: number;
|
|
286
|
+
}>;
|
|
287
|
+
private toLocal;
|
|
288
|
+
onPointerDown(e: PointerEvent): void;
|
|
289
|
+
onPointerMove(e: PointerEvent): void;
|
|
290
|
+
onPointerUp(e: PointerEvent): void;
|
|
291
|
+
/** Suppresses the click event that fires immediately after a real lasso drag ends. */
|
|
292
|
+
onClick(e: MouseEvent): void;
|
|
293
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LassoDirective, never>;
|
|
294
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<LassoDirective, "[tftLasso]", ["tftLasso"], { "scale": { "alias": "scale"; "required": false; "isSignal": true; }; "lassoDisabled": { "alias": "lassoDisabled"; "required": false; "isSignal": true; }; }, { "lassoStart": "lassoStart"; "lassoCommit": "lassoCommit"; }, never, never, true, never>;
|
|
248
295
|
}
|
|
249
296
|
|
|
250
297
|
type CssDimensionUnit = 'px' | 'em';
|
|
@@ -391,15 +438,20 @@ declare class ArrayOfNPipe implements PipeTransform {
|
|
|
391
438
|
* @param max the max length of the array (useful for limiting rendering in ngFor loop)
|
|
392
439
|
*/
|
|
393
440
|
transform(n: number, max: number): any;
|
|
394
|
-
static ɵfac:
|
|
395
|
-
static ɵpipe:
|
|
441
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ArrayOfNPipe, never>;
|
|
442
|
+
static ɵpipe: _angular_core.ɵɵPipeDeclaration<ArrayOfNPipe, "arrayOfN", true>;
|
|
396
443
|
}
|
|
397
444
|
|
|
445
|
+
/**
|
|
446
|
+
* @deprecated All directives are now standalone. Import them directly instead of using InteractModule.
|
|
447
|
+
* InteractModule will be removed in the next major version.
|
|
448
|
+
* `InteractModule.forRoot()` is still supported for providing InteractService configuration.
|
|
449
|
+
*/
|
|
398
450
|
declare class InteractModule {
|
|
399
451
|
static forRoot(config: InteractRootConfig): ModuleWithProviders<InteractModule>;
|
|
400
|
-
static ɵfac:
|
|
401
|
-
static ɵmod:
|
|
402
|
-
static ɵinj:
|
|
452
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<InteractModule, never>;
|
|
453
|
+
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<InteractModule, never, [typeof DraggableDirective, typeof ResizableDirective, typeof DropzoneDirective, typeof GesturableDirective, typeof DragRootDirective, typeof AutoScrollDirective, typeof AccountForScaleDirective, typeof ApplyScaleDirective, typeof DragPreviewDirective, typeof LassoDirective, typeof ArrayOfNPipe], [typeof DraggableDirective, typeof ResizableDirective, typeof DropzoneDirective, typeof GesturableDirective, typeof DragRootDirective, typeof AutoScrollDirective, typeof AccountForScaleDirective, typeof ApplyScaleDirective, typeof DragPreviewDirective, typeof LassoDirective, typeof ArrayOfNPipe]>;
|
|
454
|
+
static ɵinj: _angular_core.ɵɵInjectorDeclaration<InteractModule>;
|
|
403
455
|
}
|
|
404
456
|
|
|
405
457
|
/** Gets the closest ancestor of an element that matches a selector. */
|
|
@@ -414,5 +466,5 @@ declare function cloneElement(element: HTMLElement): HTMLElement;
|
|
|
414
466
|
*/
|
|
415
467
|
declare function getRootNode(viewRef: EmbeddedViewRef<any>, _document: Document): HTMLElement;
|
|
416
468
|
|
|
417
|
-
export { AccountForScaleDirective, ApplyScaleDirective, ArrayOfNPipe, AutoScrollDirective, DEFAULT_REGISTRY_ID, DragPreviewDirective, DragRootDirective, DraggableDirective, DropzoneDirective, GesturableDirective, INTERACT_ROOT_CONFIG, InteractModule, ResizableDirective, TFT_DRAG_PREVIEW, cloneElement, defaultDelta, defaultPosition, defaultSize, getClosestMatchingAncestor, getRootNode };
|
|
418
|
-
export type { CssDimensionUnit, Delta, InteractRootConfig, InteractableRegistry, InteractableSystem, NgDragEvent, NgDropEvent, NgResizeEvent, Position, PositionOption, Size, TftCoords, TftDragElement, TftDragEvent, TftDropEvent, TftGestureEvent, TftInteractableEvent, TftResizeElement, TftResizeEvent };
|
|
469
|
+
export { AccountForScaleDirective, ApplyScaleDirective, ArrayOfNPipe, AutoScrollDirective, DEFAULT_REGISTRY_ID, DragPreviewDirective, DragRootDirective, DraggableDirective, DropzoneDirective, GesturableDirective, INTERACT_ROOT_CONFIG, InteractModule, LassoDirective, ResizableDirective, TFT_DRAG_PREVIEW, cloneElement, defaultDelta, defaultPosition, defaultSize, getClosestMatchingAncestor, getRootNode };
|
|
470
|
+
export type { CssDimensionUnit, Delta, InteractRootConfig, InteractableRegistry, InteractableSystem, LassoRect, NgDragEvent, NgDropEvent, NgResizeEvent, Position, PositionOption, Size, TftCoords, TftDragElement, TftDragEvent, TftDropEvent, TftGestureEvent, TftInteractableEvent, TftResizeElement, TftResizeEvent };
|