peel.js 1.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/LICENSE +6 -0
- package/README.md +14 -0
- package/dist/peel.d.ts +587 -0
- package/dist/peel.d.ts.map +1 -0
- package/dist/peel.js +1226 -0
- package/dist/peel.js.map +1 -0
- package/package.json +36 -0
- package/src/peel.css +49 -0
- package/src/peel.ts +1434 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
Copyright © Andrew Plummer
|
|
2
|
+
|
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
4
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
5
|
+
|
|
6
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
## Attribution
|
|
2
|
+
This package is based on work by @andrewplummer.
|
|
3
|
+
Original repository: https://github.com/andrewplummer/peel-js
|
|
4
|
+
Licensed under the MIT License.
|
|
5
|
+
|
|
6
|
+
### About
|
|
7
|
+
|
|
8
|
+
Peel.js is a Javascript micro library for creating peeling effects using just HTML5.
|
|
9
|
+
It is supported in browsers that support clip paths and transforms (most evergreen
|
|
10
|
+
browsers, but generally excluding IE).
|
|
11
|
+
|
|
12
|
+
### Docs and examples
|
|
13
|
+
|
|
14
|
+
https://andrewplummer.github.io/peel-js/
|
package/dist/peel.d.ts
ADDED
|
@@ -0,0 +1,587 @@
|
|
|
1
|
+
import type { TupleOf } from "type-fest";
|
|
2
|
+
type Handler = (evt: Event, x: number, y: number) => void;
|
|
3
|
+
declare const shapes: readonly ["circle", "path", "polygon", "rect"];
|
|
4
|
+
type Shapes = {
|
|
5
|
+
[P in typeof shapes[number]]?: unknown;
|
|
6
|
+
};
|
|
7
|
+
export type PeelOptions = typeof Peel.defaultOptions & Shapes;
|
|
8
|
+
/**
|
|
9
|
+
* Four constants representing the corners of the element from which peeling can occur.
|
|
10
|
+
*/
|
|
11
|
+
export declare enum PeelCorners {
|
|
12
|
+
TOP_LEFT = 0,
|
|
13
|
+
TOP_RIGHT = 1,
|
|
14
|
+
BOTTOM_LEFT = 2,
|
|
15
|
+
BOTTOM_RIGHT = 3
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* @inline
|
|
19
|
+
*/
|
|
20
|
+
type PointOption = {
|
|
21
|
+
x: number;
|
|
22
|
+
y: number;
|
|
23
|
+
} | PeelCorners | [number, number];
|
|
24
|
+
/**
|
|
25
|
+
* @inline
|
|
26
|
+
*/
|
|
27
|
+
type PointArgs = Readonly<[PointOption | Point] | [number, number]>;
|
|
28
|
+
/**
|
|
29
|
+
* @inline
|
|
30
|
+
*/
|
|
31
|
+
type Preset = "book" | "calendar";
|
|
32
|
+
/**
|
|
33
|
+
* Main class that controls the peeling effect.
|
|
34
|
+
*/
|
|
35
|
+
export declare class Peel {
|
|
36
|
+
el: HTMLElement;
|
|
37
|
+
options: PeelOptions;
|
|
38
|
+
constraints: Circle[];
|
|
39
|
+
corner: Point;
|
|
40
|
+
path?: LineSegment | BezierCurve;
|
|
41
|
+
dragHandler?: Handler;
|
|
42
|
+
pressHandler?: Handler;
|
|
43
|
+
private _removeDragListeners?;
|
|
44
|
+
timeAlongPath?: number;
|
|
45
|
+
peelLineSegment?: LineSegment;
|
|
46
|
+
peelLineRotation: number;
|
|
47
|
+
width: number;
|
|
48
|
+
height: number;
|
|
49
|
+
elementBox: any;
|
|
50
|
+
flipConstraint?: Circle;
|
|
51
|
+
clippingBox: any;
|
|
52
|
+
topClip: any;
|
|
53
|
+
backClip: any;
|
|
54
|
+
topLayer?: HTMLElement;
|
|
55
|
+
backLayer: HTMLElement;
|
|
56
|
+
bottomLayer?: HTMLElement;
|
|
57
|
+
topShapeClip?: SVGClip;
|
|
58
|
+
backShapeClip?: SVGClip;
|
|
59
|
+
bottomShapeClip?: SVGClip;
|
|
60
|
+
topShadowElement: HTMLElement;
|
|
61
|
+
backShadowElement?: HTMLElement;
|
|
62
|
+
backReflectionElement?: HTMLElement;
|
|
63
|
+
bottomShadowElement?: HTMLElement;
|
|
64
|
+
usesBoxShadow?: boolean;
|
|
65
|
+
center: Point;
|
|
66
|
+
/**
|
|
67
|
+
* The constructor will look for the required elements to make the peel effect
|
|
68
|
+
* in the options, and create them if they do not exist.
|
|
69
|
+
*/
|
|
70
|
+
constructor(el: HTMLElement | string, options?: Partial<PeelOptions>);
|
|
71
|
+
static readonly defaultOptions: {
|
|
72
|
+
/**
|
|
73
|
+
* Sets the corner for the effect to peel back from.
|
|
74
|
+
*
|
|
75
|
+
* @defaults PeelCorners.BOTTOM_RIGHT
|
|
76
|
+
*/
|
|
77
|
+
corner: PointOption;
|
|
78
|
+
/**
|
|
79
|
+
* Threshold above which the top layer (including the backside) layer
|
|
80
|
+
* will begin to fade out. This is calculated based on the visible clipped
|
|
81
|
+
* area of the polygon. If a peel path is set, it will use the progress along
|
|
82
|
+
* the path instead.
|
|
83
|
+
*/
|
|
84
|
+
fadeThreshold: number;
|
|
85
|
+
/**
|
|
86
|
+
* Creates a shadow effect on the top layer of the peel. This may be a box-shadow or drop-shadow (filter) depending on the shape of the clipping.
|
|
87
|
+
*/
|
|
88
|
+
topShadow: boolean;
|
|
89
|
+
topShadowBlur: number;
|
|
90
|
+
topShadowAlpha: number;
|
|
91
|
+
topShadowOffsetX: number;
|
|
92
|
+
topShadowOffsetY: number;
|
|
93
|
+
/**
|
|
94
|
+
* When a complex (non-rectangular) shape is used for the clipping effect, if this option is true another SVG shape will be embedded in the top layer to be used as the drop shadow. This is required for the drop-shadow filter effect but can be turned off here as the drop shadow effect can sometimes produce odd results.
|
|
95
|
+
*/
|
|
96
|
+
topShadowCreatesShape: boolean;
|
|
97
|
+
/**
|
|
98
|
+
* Creates a shiny effect on the back layer of the peel.
|
|
99
|
+
*/
|
|
100
|
+
backReflection: boolean;
|
|
101
|
+
backReflectionSize: number;
|
|
102
|
+
backReflectionOffset: number;
|
|
103
|
+
backReflectionAlpha: number;
|
|
104
|
+
/**
|
|
105
|
+
* When true, the reflection effect will reach its maximum halfway through the peel, then diminish again. If false, it will continue to grow as the peel advances.
|
|
106
|
+
*/
|
|
107
|
+
backReflectionDistribute: boolean;
|
|
108
|
+
/**
|
|
109
|
+
* Creates a shadow effect on the back layer of the peel.
|
|
110
|
+
*/
|
|
111
|
+
backShadow: boolean;
|
|
112
|
+
backShadowSize: number;
|
|
113
|
+
backShadowOffset: number;
|
|
114
|
+
backShadowAlpha: number;
|
|
115
|
+
/**
|
|
116
|
+
* When true, the back shadow effect will reach its maximum halfway through
|
|
117
|
+
* the peel, then diminish again. If false, it will continue to grow as the
|
|
118
|
+
* peel advances. "Book" mode sets this to false so that the effect can still
|
|
119
|
+
* have some depth when the book is "fully open".
|
|
120
|
+
*/
|
|
121
|
+
backShadowDistribute: boolean;
|
|
122
|
+
/**
|
|
123
|
+
* Creates a shadow effect on the bottom layer of the peel.
|
|
124
|
+
*/
|
|
125
|
+
bottomShadow: boolean;
|
|
126
|
+
bottomShadowSize: number;
|
|
127
|
+
bottomShadowOffset: number;
|
|
128
|
+
/**
|
|
129
|
+
* Alpha value (color is black) of the dark shadow on the bottom layer.
|
|
130
|
+
*/
|
|
131
|
+
bottomShadowDarkAlpha: number;
|
|
132
|
+
/**
|
|
133
|
+
* Alpha value (color is black) of the light shadow on the bottom layer.
|
|
134
|
+
*/
|
|
135
|
+
bottomShadowLightAlpha: number;
|
|
136
|
+
/**
|
|
137
|
+
* When true, the bottom shadow effect will reach its maximum halfway through the peel, then diminish again. If false, it will continue to grow as the peel advances. "Book" mode sets this to false so that the effect can still have some depth when the book is "fully open".
|
|
138
|
+
*/
|
|
139
|
+
bottomShadowDistribute: boolean;
|
|
140
|
+
/**
|
|
141
|
+
* If true, the peel effect will be set to its relative corner on initialization.
|
|
142
|
+
*/
|
|
143
|
+
setPeelOnInit: boolean;
|
|
144
|
+
/**
|
|
145
|
+
* Sets the scale of the clipping box around the element. Default is 4, which means 4 times the element size. This allows the effects like box shadow to be seen even when the upper layer falls outsize the element boundaries. Setting this too high may encounter odd effects with clipping.
|
|
146
|
+
*/
|
|
147
|
+
clippingBoxScale: number;
|
|
148
|
+
/**
|
|
149
|
+
* When constraining the peel, the effect will "flip" around the axis of the constraint, which tends to look unnatural. This offset will pull the corner in a few pixels when approaching the axis line, which results in a smoother transition instead of a sudden flip. The value here determines how many pixels the corner is pulled in.
|
|
150
|
+
*/
|
|
151
|
+
flipConstraintOffset: number;
|
|
152
|
+
/**
|
|
153
|
+
* Whether initiating a drag event (by mouse or touch) will call `preventDefault` on the original event.
|
|
154
|
+
*/
|
|
155
|
+
dragPreventsDefault: boolean;
|
|
156
|
+
preset: Preset | undefined;
|
|
157
|
+
};
|
|
158
|
+
applyPreset(preset: Preset): void;
|
|
159
|
+
/**
|
|
160
|
+
* Sets a path along which the peel will follow.
|
|
161
|
+
* Can be a flat line segment or a bezier curve.
|
|
162
|
+
* @param {...number} x/y Points along the path. 4 arguments indicates a
|
|
163
|
+
* linear path along 2 points (p1 to p2), while 8 arguments indicates a
|
|
164
|
+
* bezier curve from p1 to p2 using control points c1 and c2. The first
|
|
165
|
+
* and last two arguments represent p1 and p2, respectively.
|
|
166
|
+
*/
|
|
167
|
+
setPeelPath(...args: TupleOf<4 | 8, number>): void;
|
|
168
|
+
/**
|
|
169
|
+
* Sets a function to be called when the user either presses or drags.
|
|
170
|
+
* @param {Function} fn The function to be called on press. This function will
|
|
171
|
+
* be called with the original event as the first argument, and the x, y
|
|
172
|
+
* coordinates of the event as the 2nd and 3rd arguments, respectively.
|
|
173
|
+
* @param {HTMLElement} el The element to initiate the event.
|
|
174
|
+
* If not passed, this will be the element associated with the Peel
|
|
175
|
+
* instance. Allowing this to be passed lets another element serve as a
|
|
176
|
+
* "hit area" that can be larger than the element itself.
|
|
177
|
+
*/
|
|
178
|
+
handle(event: "drag" | "press", fn: Handler, el?: HTMLElement): void;
|
|
179
|
+
/**
|
|
180
|
+
* Sets up the drag events needed for both drag and press handlers.
|
|
181
|
+
* @returns {Function} A function that can be called to remove the listeners.
|
|
182
|
+
*/
|
|
183
|
+
private setupDragListeners;
|
|
184
|
+
removeDragListeners(): void;
|
|
185
|
+
/**
|
|
186
|
+
* Sets the peel effect to a point in time along a previously
|
|
187
|
+
* specified path. Will throw an error if no path exists.
|
|
188
|
+
* @param {number} n The time value (between 0 and 1).
|
|
189
|
+
*/
|
|
190
|
+
setTimeAlongPath(t: any): void;
|
|
191
|
+
/**
|
|
192
|
+
* Sets the position of the peel effect. This point is the position
|
|
193
|
+
* of the corner that is being peeled back.
|
|
194
|
+
*/
|
|
195
|
+
setPeelPosition(...args: PointArgs): void;
|
|
196
|
+
/**
|
|
197
|
+
* Sets a constraint on the distance of the peel. This can be thought of as a
|
|
198
|
+
* point on the layers that are connected and cannot be torn apart. Typically
|
|
199
|
+
* this only makes sense as a point on the outer edge, such as the left edge
|
|
200
|
+
* of an open book, or the top edge of a calendar. In this case, simply using
|
|
201
|
+
* 2 constraint points (top-left/bottom-left for a book, etc) will create the
|
|
202
|
+
* desired effect. An arbitrary point can also be used with an effect like a
|
|
203
|
+
* thumbtack holding the pages together.
|
|
204
|
+
*/
|
|
205
|
+
addPeelConstraint(...args: PointArgs): void;
|
|
206
|
+
/**
|
|
207
|
+
* Gets the ratio of the area of the clipped top layer to the total area. This
|
|
208
|
+
* is used to calculate a fade threshold.
|
|
209
|
+
* @returns {number} A value between 0 and 1.
|
|
210
|
+
*/
|
|
211
|
+
getAmountClipped(): number;
|
|
212
|
+
/**
|
|
213
|
+
* Gets the area of the clipped top layer.
|
|
214
|
+
* @returns {number}
|
|
215
|
+
*/
|
|
216
|
+
private getTopClipArea;
|
|
217
|
+
/**
|
|
218
|
+
* Determines which of the constraints should be used as the flip constraint
|
|
219
|
+
* by checking which has a y value closes to the corner (because the
|
|
220
|
+
* constraint operates relative to the vertical midline). Only one constraint
|
|
221
|
+
* should be required - changing the order of the constraints can help to
|
|
222
|
+
* achieve the proper effect and more than one will interfere with each other.
|
|
223
|
+
*/
|
|
224
|
+
private calculateFlipConstraint;
|
|
225
|
+
/**
|
|
226
|
+
* Sets the clipping points of the top and back layers based on a line
|
|
227
|
+
* segment that represents the peel line.
|
|
228
|
+
*/
|
|
229
|
+
private setClipping;
|
|
230
|
+
/**
|
|
231
|
+
* Distributes the first point in the given line segment and its intersect
|
|
232
|
+
* with the peel line, if there is one.
|
|
233
|
+
* @param {LineSegment} seg The line segment to check against.
|
|
234
|
+
* @param {Polygon} poly1 The first polygon.
|
|
235
|
+
* @param {Polygon} [poly2] The second polygon.
|
|
236
|
+
*/
|
|
237
|
+
private distributeLineByPeelLine;
|
|
238
|
+
/**
|
|
239
|
+
* Distributes the given point to one of two polygons based on which side of
|
|
240
|
+
* the peel line it falls upon (if it falls directly on the line segment
|
|
241
|
+
* it is added to both).
|
|
242
|
+
* @param {Point} p The point to be distributed.
|
|
243
|
+
* @param {Polygon} poly1 The first polygon.
|
|
244
|
+
* @param {Polygon} [poly2] The second polygon.
|
|
245
|
+
*/
|
|
246
|
+
private distributePointByPeelLine;
|
|
247
|
+
/**
|
|
248
|
+
* Finds or creates a layer in the dom.
|
|
249
|
+
* @param {HTMLElement} parent The parent if the element needs to be created.
|
|
250
|
+
* @param {numer} zIndex The z index of the layer.
|
|
251
|
+
* @returns {HTMLElement}
|
|
252
|
+
*/
|
|
253
|
+
private findOrCreateLayer;
|
|
254
|
+
getPoint(...args: PointArgs): Point;
|
|
255
|
+
/**
|
|
256
|
+
* Returns a corner point based on an id defined in PeelCorners.
|
|
257
|
+
*/
|
|
258
|
+
private getCornerPoint;
|
|
259
|
+
/**
|
|
260
|
+
* Sets up the main layers used for the effect that may include a possible
|
|
261
|
+
* subclip shape.
|
|
262
|
+
*/
|
|
263
|
+
private setupLayers;
|
|
264
|
+
/**
|
|
265
|
+
* Creates an inline SVG element to be used as a layer for a drop shadow filter
|
|
266
|
+
* effect. Note that drop shadow filters currently have some odd quirks in
|
|
267
|
+
* Blink such as blur radius changing depending on rotation, etc.
|
|
268
|
+
* @param {Object} shape A shape describing the SVG element to be used.
|
|
269
|
+
* @param {HTMLElement} parent The parent element where the layer will be added.
|
|
270
|
+
* @returns {SVGElement}
|
|
271
|
+
*/
|
|
272
|
+
private setupDropShadow;
|
|
273
|
+
/**
|
|
274
|
+
* Wraps the passed element in another layer, preserving its z-index. Also
|
|
275
|
+
* add a "shape-layer" class to the layer which now becomes a shape clip.
|
|
276
|
+
*/
|
|
277
|
+
private wrapShapeLayer;
|
|
278
|
+
/**
|
|
279
|
+
* Sets up the dimensions of the element box and clipping box that area used
|
|
280
|
+
* in the effect.
|
|
281
|
+
*/
|
|
282
|
+
private setupDimensions;
|
|
283
|
+
/**
|
|
284
|
+
* Gets a box defined by 4 line segments that is at a scale of the main
|
|
285
|
+
* element.
|
|
286
|
+
* @param {number} scale The scale for the box to be.
|
|
287
|
+
*/
|
|
288
|
+
private getScaledBox;
|
|
289
|
+
/**
|
|
290
|
+
* Returns the peel position adjusted by constraints, if there are any.
|
|
291
|
+
* @param {Point} point The peel position to be constrained.
|
|
292
|
+
* @returns {Point}
|
|
293
|
+
*/
|
|
294
|
+
private getConstrainedPeelPosition;
|
|
295
|
+
/**
|
|
296
|
+
* Returns an offset to "pull" a corner in to prevent the peel effect from
|
|
297
|
+
* suddenly flipping around its axis. This offset is intended to be applied
|
|
298
|
+
* on the Y axis when dragging away from the center.
|
|
299
|
+
* @param {Circle} area The constraint to check against.
|
|
300
|
+
* @param {Point} point The peel position to be constrained.
|
|
301
|
+
*/
|
|
302
|
+
private getFlipConstraintOffset;
|
|
303
|
+
/**
|
|
304
|
+
* Gets the line segment that represents the current peel line.
|
|
305
|
+
* @param {Point} point The position of the peel corner.
|
|
306
|
+
* @returns {LineSegment}
|
|
307
|
+
*/
|
|
308
|
+
private getPeelLineSegment;
|
|
309
|
+
/**
|
|
310
|
+
* Sets the transform of the back layer.
|
|
311
|
+
* @param {Point} pos The position of the peeling corner.
|
|
312
|
+
*/
|
|
313
|
+
private setBackTransform;
|
|
314
|
+
/**
|
|
315
|
+
* Gets the distance of the peel line along an imaginary line that runs
|
|
316
|
+
* between the corners that it "faces". For example, if the peel line
|
|
317
|
+
* is rotated 45 degrees, then it can be considered to be between the top left
|
|
318
|
+
* and bottom right corners. This function will return how far the peel line
|
|
319
|
+
* has advanced along that line.
|
|
320
|
+
* @returns {number} A position >= 0.
|
|
321
|
+
*/
|
|
322
|
+
private getPeelLineDistance;
|
|
323
|
+
/**
|
|
324
|
+
* Sets shadows and fade effects.
|
|
325
|
+
*/
|
|
326
|
+
private setEffects;
|
|
327
|
+
/**
|
|
328
|
+
* Sets the top shadow as either a box-shadow or a drop-shadow filter.
|
|
329
|
+
* @param {number} t Position of the peel line from corner to corner.
|
|
330
|
+
*/
|
|
331
|
+
private setTopShadow;
|
|
332
|
+
/**
|
|
333
|
+
* Gets a number either distributed along a bell curve or increasing linearly.
|
|
334
|
+
* @param {number} n The number to transform.
|
|
335
|
+
* @param {boolean} dist Whether or not to use distribution.
|
|
336
|
+
* @param {number} mult A multiplier for the result.
|
|
337
|
+
* @returns {number}
|
|
338
|
+
*/
|
|
339
|
+
private distributeOrLinear;
|
|
340
|
+
/**
|
|
341
|
+
* Gets a number either distributed exponentially, clamped to a range between
|
|
342
|
+
* 0 and 1, and multiplied by a multiplier.
|
|
343
|
+
* @param {number} n The number to transform.
|
|
344
|
+
* @param {number} exp The exponent to be used.
|
|
345
|
+
* @param {number} mult A multiplier for the result.
|
|
346
|
+
* @returns {number}
|
|
347
|
+
*/
|
|
348
|
+
private exponential;
|
|
349
|
+
/**
|
|
350
|
+
* Sets reflection of the back face as a linear gradient.
|
|
351
|
+
* @param {number} t Position of the peel line from corner to corner.
|
|
352
|
+
*/
|
|
353
|
+
private setBackReflection;
|
|
354
|
+
/**
|
|
355
|
+
* Sets shadow of the back face as a linear gradient.
|
|
356
|
+
* @param {number} t Position of the peel line from corner to corner.
|
|
357
|
+
*/
|
|
358
|
+
private setBackShadow;
|
|
359
|
+
/**
|
|
360
|
+
* Sets the bottom shadow as a linear gradient.
|
|
361
|
+
* @param {number} t Position of the peel line from corner to corner.
|
|
362
|
+
*/
|
|
363
|
+
private setBottomShadow;
|
|
364
|
+
/**
|
|
365
|
+
* Sets the fading effect of the top layer, if a threshold is set.
|
|
366
|
+
*/
|
|
367
|
+
private setFade;
|
|
368
|
+
/**
|
|
369
|
+
* Flips a point along an imaginary vertical midpoint.
|
|
370
|
+
* @param {Array} points The points to be flipped.
|
|
371
|
+
* @returns {Array}
|
|
372
|
+
*/
|
|
373
|
+
private flipPointHorizontally;
|
|
374
|
+
/**
|
|
375
|
+
* Post setup initialization.
|
|
376
|
+
*/
|
|
377
|
+
private init;
|
|
378
|
+
}
|
|
379
|
+
/**
|
|
380
|
+
* Class that clips an HTMLElement by an SVG path.
|
|
381
|
+
*/
|
|
382
|
+
declare class SVGClip {
|
|
383
|
+
el: HTMLElement;
|
|
384
|
+
shape: unknown;
|
|
385
|
+
static defs: any;
|
|
386
|
+
static svg: Element;
|
|
387
|
+
/**
|
|
388
|
+
* @param {HTMLElement} el The element to be clipped.
|
|
389
|
+
* @param {Object} [shape] An object defining the SVG element to use in the new
|
|
390
|
+
* clip path. Defaults to a polygon.
|
|
391
|
+
*/
|
|
392
|
+
constructor(el: any, shape?: unknown);
|
|
393
|
+
/**
|
|
394
|
+
* Sets up the global SVG element and its nested defs object to use for new
|
|
395
|
+
* clip paths.
|
|
396
|
+
* @returns {SVGElement}
|
|
397
|
+
*/
|
|
398
|
+
static getDefs(): any;
|
|
399
|
+
/**
|
|
400
|
+
* Creates a new <clipPath> SVG element and sets the passed html element to be
|
|
401
|
+
* clipped by it.
|
|
402
|
+
* @param {HTMLElement} el The html element to be clipped.
|
|
403
|
+
* @param {Object} obj An object defining the SVG element to be used in the
|
|
404
|
+
* clip path.
|
|
405
|
+
* @returns {SVGElement}
|
|
406
|
+
*/
|
|
407
|
+
static createClipPath(el: HTMLElement, obj: any): any;
|
|
408
|
+
static id: number;
|
|
409
|
+
/**
|
|
410
|
+
* Gets the next svg clipping id.
|
|
411
|
+
*/
|
|
412
|
+
static getId(): string;
|
|
413
|
+
/**
|
|
414
|
+
* Sets the "points" attribute of the clip path shape. This only makes sense
|
|
415
|
+
* for polygon shapes.
|
|
416
|
+
* @param {Array} points The points to be used.
|
|
417
|
+
*/
|
|
418
|
+
setPoints(points: any): void;
|
|
419
|
+
}
|
|
420
|
+
/**
|
|
421
|
+
* A class that represents a circle.
|
|
422
|
+
*/
|
|
423
|
+
declare class Circle {
|
|
424
|
+
center: Point;
|
|
425
|
+
radius: number;
|
|
426
|
+
constructor(center: Point, radius: number);
|
|
427
|
+
/**
|
|
428
|
+
* Determines whether a point is contained within the circle.
|
|
429
|
+
* @param {Point} p The point.
|
|
430
|
+
* @returns {boolean}
|
|
431
|
+
*/
|
|
432
|
+
containsPoint(p: any): boolean;
|
|
433
|
+
/**
|
|
434
|
+
* Determines whether a point is contained within the bounding box of the circle.
|
|
435
|
+
* @param {Point} p The point.
|
|
436
|
+
* @returns {boolean}
|
|
437
|
+
*/
|
|
438
|
+
private boundingRectContainsPoint;
|
|
439
|
+
/**
|
|
440
|
+
* Moves a point outside the circle to the closest point on the circumference.
|
|
441
|
+
* Rotated angle from the center point should be the same.
|
|
442
|
+
* @param {Point} p The point.
|
|
443
|
+
* @returns {boolean}
|
|
444
|
+
*/
|
|
445
|
+
constrainPoint(p: any): any;
|
|
446
|
+
}
|
|
447
|
+
/**
|
|
448
|
+
* A class representing a bezier curve.
|
|
449
|
+
*/
|
|
450
|
+
declare class BezierCurve {
|
|
451
|
+
p1: Point;
|
|
452
|
+
c1: Point;
|
|
453
|
+
c2: Point;
|
|
454
|
+
p2: Point;
|
|
455
|
+
/**
|
|
456
|
+
* @param p1 The starting point.
|
|
457
|
+
* @param c1 The control point of p1.
|
|
458
|
+
* @param c2 The control point of p2.
|
|
459
|
+
* @param p2 The ending point.
|
|
460
|
+
*/
|
|
461
|
+
constructor(p1: Point, c1: Point, c2: Point, p2: Point);
|
|
462
|
+
/**
|
|
463
|
+
* Gets a point along the line segment for a given time.
|
|
464
|
+
* @param {number} t The time along the segment, between 0 and 1.
|
|
465
|
+
* @returns {Point}
|
|
466
|
+
*/
|
|
467
|
+
getPointForTime(t: any): Point;
|
|
468
|
+
}
|
|
469
|
+
/**
|
|
470
|
+
* A class that represents a line segment.
|
|
471
|
+
*/
|
|
472
|
+
declare class LineSegment {
|
|
473
|
+
p1: Point;
|
|
474
|
+
p2: Point;
|
|
475
|
+
vector?: Point;
|
|
476
|
+
constructor(p1: Point, p2: Point);
|
|
477
|
+
static readonly EPSILON = 0.000001;
|
|
478
|
+
/**
|
|
479
|
+
* Gets a point along the line segment for a given time.
|
|
480
|
+
* @param {number} t The time along the segment, between 0 and 1.
|
|
481
|
+
* @returns {Point}
|
|
482
|
+
*/
|
|
483
|
+
getPointForTime(t: any): Point;
|
|
484
|
+
/**
|
|
485
|
+
* Takes a scalar and returns a new scaled line segment.
|
|
486
|
+
* @param {number} n The amount to scale the segment by.
|
|
487
|
+
* @returns {LineSegment}
|
|
488
|
+
*/
|
|
489
|
+
scale(n: any): LineSegment;
|
|
490
|
+
/**
|
|
491
|
+
* The determinant is a number that indicates which side of a line a point
|
|
492
|
+
* falls on. A positive number means that the point falls inside the area
|
|
493
|
+
* "clockwise" of the line, ie. the area that the line would sweep if it were
|
|
494
|
+
* rotated 180 degrees. A negative number would mean the point is in the area
|
|
495
|
+
* the line would sweep if it were rotated counter-clockwise, or -180 degrees.
|
|
496
|
+
* 0 indicates that the point falls exactly on the line.
|
|
497
|
+
* @param {Point} p The point to test against.
|
|
498
|
+
* @returns {number} A signed number.
|
|
499
|
+
*/
|
|
500
|
+
getPointDeterminant(p: any): number;
|
|
501
|
+
/**
|
|
502
|
+
* Calculates the point at which another line segment intersects, if any.
|
|
503
|
+
* @param {LineSegment} seg The second line segment.
|
|
504
|
+
* @returns {Point|null}
|
|
505
|
+
*/
|
|
506
|
+
getIntersectPoint(seg2: any): Point | null;
|
|
507
|
+
/**
|
|
508
|
+
* Returns the angle of the line segment in degrees.
|
|
509
|
+
* @returns {number}
|
|
510
|
+
*/
|
|
511
|
+
getAngle(): number;
|
|
512
|
+
/**
|
|
513
|
+
* Gets the vector that represents the line segment.
|
|
514
|
+
* @returns {Point}
|
|
515
|
+
*/
|
|
516
|
+
private getVector;
|
|
517
|
+
}
|
|
518
|
+
/**
|
|
519
|
+
* A class representing a point or 2D vector.
|
|
520
|
+
*/
|
|
521
|
+
declare class Point {
|
|
522
|
+
readonly x: number;
|
|
523
|
+
readonly y: number;
|
|
524
|
+
constructor(x: number, y: number);
|
|
525
|
+
static readonly DEGREES_IN_RADIANS: number;
|
|
526
|
+
/**
|
|
527
|
+
* Gets degrees in radians.
|
|
528
|
+
* @param {number} deg
|
|
529
|
+
* @returns {number}
|
|
530
|
+
*/
|
|
531
|
+
static degToRad(deg: any): number;
|
|
532
|
+
/**
|
|
533
|
+
* Gets radians in degrees.
|
|
534
|
+
* @param {number} rad
|
|
535
|
+
* @returns {number}
|
|
536
|
+
*/
|
|
537
|
+
static radToDeg(rad: any): number;
|
|
538
|
+
/**
|
|
539
|
+
* Creates a new point given a rotation in degrees and a length.
|
|
540
|
+
* @param {number} deg The rotation of the vector.
|
|
541
|
+
* @param {number} len The length of the vector.
|
|
542
|
+
* @returns {Point}
|
|
543
|
+
*/
|
|
544
|
+
static vector(deg: any, len: any): Point;
|
|
545
|
+
/**
|
|
546
|
+
* Adds a point.
|
|
547
|
+
* @param {Point} p
|
|
548
|
+
* @returns {Point}
|
|
549
|
+
*/
|
|
550
|
+
add(p: any): Point;
|
|
551
|
+
/**
|
|
552
|
+
* Subtracts a point.
|
|
553
|
+
* @param {Point} p
|
|
554
|
+
* @returns {Point}
|
|
555
|
+
*/
|
|
556
|
+
subtract(p: any): Point;
|
|
557
|
+
/**
|
|
558
|
+
* Scales a point by a scalar.
|
|
559
|
+
* @param {number} n
|
|
560
|
+
* @returns {Point}
|
|
561
|
+
*/
|
|
562
|
+
scale(n: any): Point;
|
|
563
|
+
/**
|
|
564
|
+
* Gets the length of the distance to the point.
|
|
565
|
+
* @returns {number}
|
|
566
|
+
*/
|
|
567
|
+
getLength(): number;
|
|
568
|
+
/**
|
|
569
|
+
* Gets the angle of the point in degrees.
|
|
570
|
+
* @returns {number}
|
|
571
|
+
*/
|
|
572
|
+
getAngle(): number;
|
|
573
|
+
/**
|
|
574
|
+
* Returns a new point of the same length with a different angle.
|
|
575
|
+
* @param {number} deg The angle in degrees.
|
|
576
|
+
* @returns {Point}
|
|
577
|
+
*/
|
|
578
|
+
setAngle(deg: any): Point;
|
|
579
|
+
/**
|
|
580
|
+
* Rotates the point.
|
|
581
|
+
* @param {number} deg The amount to rotate by in degrees.
|
|
582
|
+
* @returns {Point}
|
|
583
|
+
*/
|
|
584
|
+
rotate(deg: any): Point;
|
|
585
|
+
}
|
|
586
|
+
export {};
|
|
587
|
+
//# sourceMappingURL=peel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"peel.d.ts","sourceRoot":"","sources":["../src/peel.ts"],"names":[],"mappings":"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"}
|