@tft/interact 17.0.0 → 21.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/fesm2022/tft-interact.mjs +58 -48
- package/fesm2022/tft-interact.mjs.map +1 -1
- package/package.json +5 -7
- package/tft-interact-21.0.0.tgz +0 -0
- package/types/tft-interact.d.ts +506 -0
- package/esm2022/index.mjs +0 -6
- package/esm2022/lib/directives/account-for-scale.directive.mjs +0 -26
- package/esm2022/lib/directives/apply-scale.directive.mjs +0 -28
- package/esm2022/lib/directives/auto-scroll.directive.mjs +0 -56
- package/esm2022/lib/directives/drag-preview.directive.mjs +0 -20
- package/esm2022/lib/directives/drag-root.directive.mjs +0 -32
- package/esm2022/lib/directives/draggable.directive.mjs +0 -320
- package/esm2022/lib/directives/dropzone.directive.mjs +0 -114
- package/esm2022/lib/directives/gesturable.directive.mjs +0 -82
- package/esm2022/lib/directives/index.mjs +0 -10
- package/esm2022/lib/directives/resizable.directive.mjs +0 -228
- package/esm2022/lib/interact.module.mjs +0 -66
- package/esm2022/lib/models/index.mjs +0 -2
- package/esm2022/lib/models/interact.mjs +0 -28
- package/esm2022/lib/pipes/array-of-n.pipe.mjs +0 -22
- package/esm2022/lib/pipes/index.mjs +0 -2
- package/esm2022/lib/services/interact.service.mjs +0 -197
- package/esm2022/lib/utils/helpers.mjs +0 -35
- package/esm2022/lib/utils/index.mjs +0 -2
- package/esm2022/tft-interact.mjs +0 -5
- package/index.d.ts +0 -5
- package/lib/directives/account-for-scale.directive.d.ts +0 -15
- package/lib/directives/apply-scale.directive.d.ts +0 -11
- package/lib/directives/auto-scroll.directive.d.ts +0 -34
- package/lib/directives/drag-preview.directive.d.ts +0 -10
- package/lib/directives/drag-root.directive.d.ts +0 -15
- package/lib/directives/draggable.directive.d.ts +0 -76
- package/lib/directives/dropzone.directive.d.ts +0 -40
- package/lib/directives/gesturable.directive.d.ts +0 -27
- package/lib/directives/index.d.ts +0 -9
- package/lib/directives/resizable.directive.d.ts +0 -61
- package/lib/interact.module.d.ts +0 -20
- package/lib/models/index.d.ts +0 -1
- package/lib/models/interact.d.ts +0 -140
- package/lib/pipes/array-of-n.pipe.d.ts +0 -12
- package/lib/pipes/index.d.ts +0 -1
- package/lib/services/interact.service.d.ts +0 -83
- package/lib/utils/helpers.d.ts +0 -12
- package/lib/utils/index.d.ts +0 -1
- package/tft-interact-17.0.0.tgz +0 -0
package/lib/models/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './interact';
|
package/lib/models/interact.d.ts
DELETED
|
@@ -1,140 +0,0 @@
|
|
|
1
|
-
import { DropzoneDirective, DraggableDirective, GesturableDirective, ResizableDirective } from '../directives';
|
|
2
|
-
import { Point, DragEvent, ResizeEvent, Interactable, DropEvent, GestureEvent } from '@interactjs/types';
|
|
3
|
-
import { BehaviorSubject, Observable } from 'rxjs';
|
|
4
|
-
import { InjectionToken } from '@angular/core';
|
|
5
|
-
export type CssDimensionUnit = 'px' | 'em';
|
|
6
|
-
export interface InteractRootConfig {
|
|
7
|
-
cssDimensionUnit: CssDimensionUnit;
|
|
8
|
-
}
|
|
9
|
-
export declare const INTERACT_ROOT_CONFIG: InjectionToken<InteractRootConfig>;
|
|
10
|
-
export declare const DEFAULT_REGISTRY_ID = "DEFAULT";
|
|
11
|
-
/**
|
|
12
|
-
* Default initial value for Delta BehaviorSubject
|
|
13
|
-
*/
|
|
14
|
-
export declare const defaultDelta: Delta;
|
|
15
|
-
/**
|
|
16
|
-
* Default initial value for Size BehaviorSubject
|
|
17
|
-
*/
|
|
18
|
-
export declare const defaultSize: Size;
|
|
19
|
-
/**
|
|
20
|
-
* Default initial value for Position BehaviorSubject
|
|
21
|
-
*/
|
|
22
|
-
export declare const defaultPosition: Position;
|
|
23
|
-
/**
|
|
24
|
-
* The shape of the state/events/behavior system for each dropzone
|
|
25
|
-
* and the DEFAULT_REGISTRY_ID system (for drop components initialized outside
|
|
26
|
-
* of a dropzone).
|
|
27
|
-
*/
|
|
28
|
-
export interface InteractableSystem {
|
|
29
|
-
deltas$: BehaviorSubject<Delta>;
|
|
30
|
-
position$: BehaviorSubject<Position>;
|
|
31
|
-
size$: BehaviorSubject<Size & Delta>;
|
|
32
|
-
interactable$: Observable<TftCoords>;
|
|
33
|
-
}
|
|
34
|
-
/**
|
|
35
|
-
* The key map of InteractableSystems. One for the drag components
|
|
36
|
-
* that originated outside of a dropzone, plus one for each dropzone.
|
|
37
|
-
*/
|
|
38
|
-
export interface InteractableRegistry {
|
|
39
|
-
[key: string]: InteractableSystem;
|
|
40
|
-
}
|
|
41
|
-
/**
|
|
42
|
-
* HTMLElement with helpful drag directives attached to facilitate moving drag data between dropzones
|
|
43
|
-
*/
|
|
44
|
-
export type TftDragElement = HTMLElement & {
|
|
45
|
-
dragRef?: DraggableDirective;
|
|
46
|
-
dragOrigin?: DropzoneDirective;
|
|
47
|
-
dropTarget?: DropzoneDirective;
|
|
48
|
-
};
|
|
49
|
-
/**
|
|
50
|
-
* HTMLElement with helpful drag directives attached to facilitate moving drag data between dropzones
|
|
51
|
-
*/
|
|
52
|
-
export type TftResizeElement = HTMLElement & {
|
|
53
|
-
resizeRef?: ResizableDirective;
|
|
54
|
-
};
|
|
55
|
-
/**
|
|
56
|
-
* Extends the interact drop events by adding reference to the dropped components drag
|
|
57
|
-
* directive to the html element. This gives the dropzone access to things like data
|
|
58
|
-
* and parent dropzone of the dropped component.
|
|
59
|
-
*/
|
|
60
|
-
export type NgDropEvent = DropEvent & {
|
|
61
|
-
draggable: Interactable & {
|
|
62
|
-
target: TftDragElement;
|
|
63
|
-
};
|
|
64
|
-
relatedTarget: TftDragElement;
|
|
65
|
-
};
|
|
66
|
-
/**
|
|
67
|
-
* Extends the interact resize events by adding a reference to the dragRef
|
|
68
|
-
* directive to the html element.
|
|
69
|
-
*/
|
|
70
|
-
export type NgResizeEvent = ResizeEvent & {
|
|
71
|
-
draggable: Interactable & {
|
|
72
|
-
target: TftDragElement;
|
|
73
|
-
};
|
|
74
|
-
};
|
|
75
|
-
/**
|
|
76
|
-
* We extend the interact DragEvent a little here, adding to the target element references for:
|
|
77
|
-
* - the component we are dragging (dragRef)
|
|
78
|
-
* - the dropzone component where the drag component originated (dragOrigin)
|
|
79
|
-
* - the dropzone component that it was dropped in (dropTarget)
|
|
80
|
-
* This helps us to pass references to directive classes as events like dragenter and drag exit happens.
|
|
81
|
-
* We use these references to emit a (mostly) consistent event across drag, drop, resize event.
|
|
82
|
-
*/
|
|
83
|
-
export type NgDragEvent = DragEvent & {
|
|
84
|
-
dropzone: {
|
|
85
|
-
target: HTMLElement;
|
|
86
|
-
};
|
|
87
|
-
target: TftDragElement;
|
|
88
|
-
};
|
|
89
|
-
/**
|
|
90
|
-
* Event emitted when resizing, dragging, dropping
|
|
91
|
-
*/
|
|
92
|
-
export interface TftInteractableEvent {
|
|
93
|
-
dragRef: DraggableDirective;
|
|
94
|
-
dragOrigin?: DropzoneDirective;
|
|
95
|
-
dropTarget?: DropzoneDirective;
|
|
96
|
-
positionInDropTarget: Point;
|
|
97
|
-
}
|
|
98
|
-
/**
|
|
99
|
-
* Event emitted on drop
|
|
100
|
-
*/
|
|
101
|
-
export interface TftDropEvent extends TftInteractableEvent {
|
|
102
|
-
interactEvent: NgDropEvent;
|
|
103
|
-
}
|
|
104
|
-
/**
|
|
105
|
-
* Event emitted on drag
|
|
106
|
-
*/
|
|
107
|
-
export interface TftDragEvent extends TftInteractableEvent {
|
|
108
|
-
interactEvent: NgDragEvent;
|
|
109
|
-
}
|
|
110
|
-
/**
|
|
111
|
-
* Event emitted on resize
|
|
112
|
-
*/
|
|
113
|
-
export interface TftResizeEvent extends TftInteractableEvent {
|
|
114
|
-
interactEvent: ResizeEvent;
|
|
115
|
-
resizeRef: ResizableDirective;
|
|
116
|
-
size: {
|
|
117
|
-
width: number;
|
|
118
|
-
height: number;
|
|
119
|
-
};
|
|
120
|
-
}
|
|
121
|
-
export type TftCoords = Delta & Position & Size;
|
|
122
|
-
export interface Delta {
|
|
123
|
-
deltaX: number | null;
|
|
124
|
-
deltaY: number | null;
|
|
125
|
-
targetElement: TftDragElement | null;
|
|
126
|
-
}
|
|
127
|
-
export interface Position {
|
|
128
|
-
x: number | null;
|
|
129
|
-
y: number | null;
|
|
130
|
-
targetElement: TftDragElement | null;
|
|
131
|
-
}
|
|
132
|
-
export interface Size {
|
|
133
|
-
width: number | null;
|
|
134
|
-
height: number | null;
|
|
135
|
-
targetElement: TftResizeElement | null;
|
|
136
|
-
}
|
|
137
|
-
export interface TftGestureEvent {
|
|
138
|
-
gestureRef: GesturableDirective;
|
|
139
|
-
interactEvent: GestureEvent;
|
|
140
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { PipeTransform } from '@angular/core';
|
|
2
|
-
import * as i0 from "@angular/core";
|
|
3
|
-
export declare class ArrayOfNPipe implements PipeTransform {
|
|
4
|
-
/**
|
|
5
|
-
*
|
|
6
|
-
* @param n the number to make an array of
|
|
7
|
-
* @param max the max length of the array (useful for limiting rendering in ngFor loop)
|
|
8
|
-
*/
|
|
9
|
-
transform(n: number, max: number): any;
|
|
10
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<ArrayOfNPipe, never>;
|
|
11
|
-
static ɵpipe: i0.ɵɵPipeDeclaration<ArrayOfNPipe, "arrayOfN", false>;
|
|
12
|
-
}
|
package/lib/pipes/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './array-of-n.pipe';
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
import { RendererFactory2, NgZone } from '@angular/core';
|
|
2
|
-
import { BehaviorSubject, Observable } from 'rxjs';
|
|
3
|
-
import { TftCoords, Delta, Size, Position, InteractableRegistry, TftDragElement, TftResizeElement } from '../models';
|
|
4
|
-
import * as i0 from "@angular/core";
|
|
5
|
-
export declare class InteractService {
|
|
6
|
-
private rendererFactory;
|
|
7
|
-
private ngZone;
|
|
8
|
-
rootConfig: any;
|
|
9
|
-
private _interactableIndex;
|
|
10
|
-
private _dropzoneIndex;
|
|
11
|
-
private renderer;
|
|
12
|
-
readonly dragRegistrySystem: {
|
|
13
|
-
[key: string]: InteractableRegistry;
|
|
14
|
-
};
|
|
15
|
-
private cssUnit;
|
|
16
|
-
constructor(rendererFactory: RendererFactory2, ngZone: NgZone, rootConfig: any);
|
|
17
|
-
addDeltaToPosition(delta: Delta, position: Position): {
|
|
18
|
-
x: number;
|
|
19
|
-
y: number;
|
|
20
|
-
targetElement: TftDragElement;
|
|
21
|
-
};
|
|
22
|
-
addRegistryToSystem(customRegistryId?: string | null): string;
|
|
23
|
-
addDraggableToRegistry(customRegistryId?: any, interactableId?: string | null): string;
|
|
24
|
-
destroyInteractable(interactableId: string, registryId?: string): void;
|
|
25
|
-
subscribeToInteractable(interactableId: string, registryId?: string): import("../models").InteractableSystem;
|
|
26
|
-
createInteractableState(initialPosition: Position, initialSize: Size, initialDelta: Delta): {
|
|
27
|
-
deltas$: BehaviorSubject<Delta>;
|
|
28
|
-
position$: BehaviorSubject<Position>;
|
|
29
|
-
size$: BehaviorSubject<{
|
|
30
|
-
deltaX: number;
|
|
31
|
-
deltaY: number;
|
|
32
|
-
targetElement: TftDragElement;
|
|
33
|
-
width: number;
|
|
34
|
-
height: number;
|
|
35
|
-
}>;
|
|
36
|
-
interactable$: Observable<TftCoords>;
|
|
37
|
-
};
|
|
38
|
-
createInteractableId(customInteractableId?: string | null): string;
|
|
39
|
-
createDropzoneId(index: number): string;
|
|
40
|
-
getInteractableState(interactableId: string, registryId?: string): Observable<TftCoords>;
|
|
41
|
-
updateDeltas(interactId: string, registryId: string, { deltaX, deltaY }: {
|
|
42
|
-
deltaX: any;
|
|
43
|
-
deltaY: any;
|
|
44
|
-
}, targetElement: any): void;
|
|
45
|
-
updatePosition(interactId: string, registryId: string, { x, y }: {
|
|
46
|
-
x: number;
|
|
47
|
-
y: number;
|
|
48
|
-
}, targetElement: any): void;
|
|
49
|
-
updateSize(interactId: string, registryId: string, { deltaX, deltaY, width, height }: {
|
|
50
|
-
deltaX: any;
|
|
51
|
-
deltaY: any;
|
|
52
|
-
width: any;
|
|
53
|
-
height: any;
|
|
54
|
-
}, targetElement: any): void;
|
|
55
|
-
interactableExistOnRegistry(interactId: string, registryId?: string): boolean;
|
|
56
|
-
/**
|
|
57
|
-
* Uses renderer to set width and height of angular component
|
|
58
|
-
* @param width the desired width of component
|
|
59
|
-
* @param height the desired height of component
|
|
60
|
-
* @param target the element to transform
|
|
61
|
-
*/
|
|
62
|
-
setElementSize(width: number, height: number, target: TftResizeElement): void;
|
|
63
|
-
/**
|
|
64
|
-
* Uses renderer to set position of angular component
|
|
65
|
-
* @param x position on x axis
|
|
66
|
-
* @param y position on y axis
|
|
67
|
-
* @param target the element to transform
|
|
68
|
-
*/
|
|
69
|
-
setElementTransform(x: number, y: number, position: Position): void;
|
|
70
|
-
/**
|
|
71
|
-
* Generates a translate string for the x and y arguments passed to
|
|
72
|
-
* be passed to css transform
|
|
73
|
-
* @param x the position along the x axis
|
|
74
|
-
* @param y the position along the y axis
|
|
75
|
-
*/
|
|
76
|
-
createTransformString(x: number, y: number): string;
|
|
77
|
-
calculatePositionInElement(zoneElement: Interact.Element, dragElement: TftDragElement, scale?: number): {
|
|
78
|
-
x: number;
|
|
79
|
-
y: number;
|
|
80
|
-
};
|
|
81
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<InteractService, [null, null, { optional: true; }]>;
|
|
82
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<InteractService>;
|
|
83
|
-
}
|
package/lib/utils/helpers.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { EmbeddedViewRef } from '@angular/core';
|
|
2
|
-
/** Gets the closest ancestor of an element that matches a selector. */
|
|
3
|
-
export declare function getClosestMatchingAncestor(element: HTMLElement, selector: string): HTMLElement;
|
|
4
|
-
/**
|
|
5
|
-
* Create a copy of the HTML Element
|
|
6
|
-
*/
|
|
7
|
-
export declare function cloneElement(element: HTMLElement): HTMLElement;
|
|
8
|
-
/**
|
|
9
|
-
* Gets the root HTML element of an embedded view.
|
|
10
|
-
* If the root is not an HTML element it gets wrapped in one.
|
|
11
|
-
*/
|
|
12
|
-
export declare function getRootNode(viewRef: EmbeddedViewRef<any>, _document: Document): HTMLElement;
|
package/lib/utils/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './helpers';
|
package/tft-interact-17.0.0.tgz
DELETED
|
Binary file
|