@zoompinch/core 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/helpers.d.ts +18 -0
- package/dist/index.d.ts +1 -0
- package/dist/zoompinch.d.ts +83 -0
- package/package.json +3 -2
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export declare function radiansToDegrees(radians: number): number;
|
|
2
|
+
export declare function degreeToRadians(degrees: number): number;
|
|
3
|
+
export declare function clamp(value: number, min: number, max: number): number;
|
|
4
|
+
export declare function getAngleBetweenTwoPoints(p1: [number, number], p2: [number, number]): number;
|
|
5
|
+
export declare function rotatePoint(point: [number, number], center: [number, number], angleInRadians: number): [number, number];
|
|
6
|
+
export declare function angleToVector(angle: number): [number, number];
|
|
7
|
+
export declare function getVectorBetweenTwoPoints(p1: [number, number], p2: [number, number]): [number, number];
|
|
8
|
+
export declare function rotateVector(vector: [number, number], angle: number): [number, number];
|
|
9
|
+
export declare function moveAlongVector(startPoint: [number, number], vector: [number, number], length: number): [number, number];
|
|
10
|
+
export declare function round(value: number, decimals: number): number;
|
|
11
|
+
export declare function detectTrackpad(event: WheelEvent): boolean;
|
|
12
|
+
export declare function isMultipleOf(n: number, multiples: number[]): number;
|
|
13
|
+
export declare function getUntransformedRect(rect: DOMRect, tx: number, ty: number, scale: number, rotate: number): {
|
|
14
|
+
x: number;
|
|
15
|
+
y: number;
|
|
16
|
+
width: number;
|
|
17
|
+
height: number;
|
|
18
|
+
};
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './zoompinch';
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
export type Offset = {
|
|
2
|
+
top: number;
|
|
3
|
+
right: number;
|
|
4
|
+
bottom: number;
|
|
5
|
+
left: number;
|
|
6
|
+
};
|
|
7
|
+
export type Bounds = {
|
|
8
|
+
x: number;
|
|
9
|
+
y: number;
|
|
10
|
+
width: number;
|
|
11
|
+
height: number;
|
|
12
|
+
};
|
|
13
|
+
export type Transform = {
|
|
14
|
+
translateX: number;
|
|
15
|
+
translateY: number;
|
|
16
|
+
scale: number;
|
|
17
|
+
radians: number;
|
|
18
|
+
};
|
|
19
|
+
export declare class Zoompinch extends EventTarget {
|
|
20
|
+
element: HTMLElement;
|
|
21
|
+
offset: Offset;
|
|
22
|
+
translateX: number;
|
|
23
|
+
translateY: number;
|
|
24
|
+
scale: number;
|
|
25
|
+
rotate: number;
|
|
26
|
+
minScale: number;
|
|
27
|
+
maxScale: number;
|
|
28
|
+
wrapperBounds: Bounds;
|
|
29
|
+
canvasBounds: Bounds;
|
|
30
|
+
constructor(element: HTMLElement, offset: Offset, translateX: number, translateY: number, scale: number, rotate: number, minScale?: number, maxScale?: number);
|
|
31
|
+
get canvasElement(): HTMLElement;
|
|
32
|
+
get wrapperInnerX(): number;
|
|
33
|
+
get wrapperInnerY(): number;
|
|
34
|
+
get wrapperInnerWidth(): number;
|
|
35
|
+
get wrapperInnerHeight(): number;
|
|
36
|
+
get wrapperInnerRatio(): number;
|
|
37
|
+
get canvasNaturalRatio(): number;
|
|
38
|
+
get naturalScale(): number;
|
|
39
|
+
private gestureStartRadians;
|
|
40
|
+
handleGesturestart(event: UIEvent): void;
|
|
41
|
+
handleGesturechange(event: UIEvent): void;
|
|
42
|
+
handleGestureend(event: UIEvent): void;
|
|
43
|
+
private dragStart;
|
|
44
|
+
private dragStartFrozenX;
|
|
45
|
+
private dragStartFrozenY;
|
|
46
|
+
handleMousedown(event: MouseEvent): void;
|
|
47
|
+
handleMouseup(event: MouseEvent): void;
|
|
48
|
+
handleMousemove(event: MouseEvent): void;
|
|
49
|
+
handleWheel(event: WheelEvent): void;
|
|
50
|
+
private touchStarts;
|
|
51
|
+
private touchStartTranslateX;
|
|
52
|
+
private touchStartTranslateY;
|
|
53
|
+
freezeTouches(touches: TouchList): {
|
|
54
|
+
client: [number, number];
|
|
55
|
+
canvasRel: [number, number];
|
|
56
|
+
}[];
|
|
57
|
+
handleTouchstart(event: TouchEvent): void;
|
|
58
|
+
handleTouchmove(event: TouchEvent): void;
|
|
59
|
+
handleTouchend(event: TouchEvent): void;
|
|
60
|
+
private calcProjectionTranslate;
|
|
61
|
+
applyTransform(newScale: number, wrapperInnerCoords: [number, number], canvasAnchorCoords: [number, number]): void;
|
|
62
|
+
private composeRelPoint;
|
|
63
|
+
composePoint(x: number, y: number): [number, number];
|
|
64
|
+
private getAnchorOffset;
|
|
65
|
+
private getCanvasCoordsRel;
|
|
66
|
+
private clientCoordsToWrapperCoords;
|
|
67
|
+
private relativeWrapperCoordinatesFromClientCoords;
|
|
68
|
+
private normalizeMatrixCoordinates;
|
|
69
|
+
normalizeClientCoords(clientX: number, clientY: number): [number, number];
|
|
70
|
+
rotateCanvas(x: number, y: number, radians: number): void;
|
|
71
|
+
centeredTransform: {
|
|
72
|
+
translateX: number;
|
|
73
|
+
translateY: number;
|
|
74
|
+
scale: number;
|
|
75
|
+
radians: number;
|
|
76
|
+
};
|
|
77
|
+
get renderinScale(): number;
|
|
78
|
+
get renderingTranslateX(): number;
|
|
79
|
+
get renderingTranslateY(): number;
|
|
80
|
+
get renderingRotate(): number;
|
|
81
|
+
update(): void;
|
|
82
|
+
destroy(): void;
|
|
83
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zoompinch/core",
|
|
3
|
-
"
|
|
3
|
+
"description": "Pinch-and-zoom experience that's feels native and communicates the transform reactively and lets you project any layer on top of the transformed canvas",
|
|
4
|
+
"version": "0.0.3",
|
|
4
5
|
"private": false,
|
|
5
6
|
"type": "module",
|
|
6
7
|
"main": "./dist/zoompinch-core.umd.js",
|
|
@@ -15,7 +16,7 @@
|
|
|
15
16
|
},
|
|
16
17
|
"files": ["dist"],
|
|
17
18
|
"scripts": {
|
|
18
|
-
"build": "vite build",
|
|
19
|
+
"build": "vite build && tsc --emitDeclarationOnly",
|
|
19
20
|
"dev": "vite"
|
|
20
21
|
},
|
|
21
22
|
"devDependencies": {
|