diff --git a/types/paper/index.d.ts b/types/paper/index.d.ts index 41b958fd50..197707058b 100644 --- a/types/paper/index.d.ts +++ b/types/paper/index.d.ts @@ -3,6 +3,8 @@ // Definitions by: Clark Stevenson // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +type NativeMouseEvent = MouseEvent; + declare module 'paper' { /** @@ -285,7 +287,7 @@ declare module 'paper' { * Transforms a point and returns the result. * @param point - the point to be transformed */ - transform(point: Point): Point; + transform(point: Point): Matrix; /** * Transforms an array of coordinates by this matrix and stores the results into the destination array, which is also returned. @@ -299,7 +301,7 @@ declare module 'paper' { * Inverse transforms a point and returns the result. * @param point - the point to be transformed */ - inverseTransform(point: Point): Point; + inverseTransform(point: Point): Matrix; /** * Attempts to decompose the affine transformation described by this matrix into scaling, rotation and shearing, and returns an object with these properties if it succeeded, null otherwise. @@ -550,6 +552,36 @@ declare module 'paper' { */ abs(): Point; + /* + * Returns a new point + * @param point - The point you want to add with + */ + add(point: Point): Point; + add(point: number[]): Point; + + /* + * Returns a new point + * @param point - The point you want to subtract with + */ + subtract(point: Point): Point; + subtract(point: number[]): Point; + + /* + * Returns the new multiplied point + * @param point - The point you want to multiply with + */ + multiply(point: Point): Point; + multiply(point: number[]): Point; + multiply(point: number): Point; + + /* + * Returns the new divided point + * @param point - The point you want to divide with + */ + divide(point: Point): Point; + divide(point: number[]): Point; + divide(point: number): Point; + } /** * A Rectangle specifies an area that is enclosed by it's top-left point (x, y), its width, and its height. It should not be confused with a rectangular path, it is not an item. @@ -894,6 +926,22 @@ declare module 'paper' { */ abs(): Size; + /* + * Returns the new multiplied size + * @param point - The size you want to multiply with + */ + multiply(point: Size): Size; + multiply(point: number[]): Size; + multiply(point: number): Size; + + /* + * Returns the new divided size + * @param point - The size you want to divide with + */ + divide(point: Size): Size; + divide(point: number[]): Size; + divide(point: number): Size; + } export interface IFrameEvent { @@ -1223,6 +1271,11 @@ declare module 'paper' { */ fillColor: Color | string; + /** + * The fill rule. + */ + fillRule: string; + /** * The color the item is highlighted with when selected. If the item does not specify its own color, the color defined by its layer is used instead. */ @@ -1432,6 +1485,20 @@ declare module 'paper' { */ insertBelow(item: Item): Item; + /** + * Moves this item above the specified item. Returns true if the item + * was moved. + * @param item - the item above which it should be moved + */ + moveAbove(item: Item): boolean; + + /** + * Moves this item below the specified item. Returns true if the item + * was moved. + * @param item - the item below which it should be moved + */ + moveBelow(item: Item): boolean; + /** * Sends this item to the back of all other items within the same parent. */ @@ -1551,7 +1618,7 @@ declare module 'paper' { * Translates (moves) the item by the given offset point. * @param delta - the offset to translate the item by */ - translate(delta: number): Point; + translate(delta: Point): Point; /** * Rotates the item by a given angle around the given point. @@ -1561,6 +1628,11 @@ declare module 'paper' { */ rotate(angle: number, center?: Point): void; + /** + * Gets the current rotation of the item. + */ + getRotation(): number; + /** * Scales the item by the given value from its center point, or optionally from a supplied point. * @param scale - the scale factor @@ -1883,6 +1955,7 @@ declare module 'paper' { * @param position [optional] - the center position at which the raster item is placed */ constructor(source?: HTMLImageElement | HTMLCanvasElement | string, position?: Point); + constructor(config: any); /** * The size of the raster in pixels. @@ -2105,7 +2178,7 @@ declare module 'paper' { * @param handle2 - The second control point handle for the curve * @param to - The end control point of the curve */ - cublicCurveTo(handle1: Point, handle2: Point, to: Point): void; + cubicCurveTo(handle1: Point, handle2: Point, to: Point): void; /** * Adds a quadratic bezier curve to the path, defined by a handle and a to point. @@ -2168,7 +2241,7 @@ declare module 'paper' { * @param handle2 - * @param to - */ - cublicCurveBy(handle1: Point, handle2: Point, to: Point): void; + cubicCurveBy(handle1: Point, handle2: Point, to: Point): void; /** * @@ -2227,118 +2300,11 @@ declare module 'paper' { */ export class Path extends PathItem { - /** - * Creates a linear path item from two points describing a line. - * @param from - the line's starting point - * @param to - the line's ending point - */ - static Line(from: Point, to: Point): Path; - - /** - * Creates a linear path item from the properties described by an object literal. - * @param object - an object literal containing properties describing the path's attributes - */ - static Line(object: any): Path; - - /** - * Creates a circular path item. - * @param center - the center point of the circle - * @param radius - the radius of the circle - */ - static Circle(center: Point, radius: number): Path; - - /** - * Creates a circular path item from the properties described by an object literal. - * @param object - an object literal containing properties describing the path's attributes - */ - static Circle(object: any): Path; - - /** - * Creates a rectangular path item, with optionally rounded corners. - * @param rectangle - the rectangle object describing the geometry of the rectangular path to be created. - * @param radius [optional] - the size of the rounded corners default: null - */ - static Rectangle(rectangle: Rectangle, radius?: number): Path; - - /** - * Creates a rectangular path item from a point and a size object. - * @param point - the rectangle's top-left corner. - * @param size - the rectangle's size. - */ - static Rectangle(point: Point, size: Size): Path; - - /** - * Creates a rectangular path item from the passed points. These do not necessarily need to be the top left and bottom right corners, the constructor figures out how to fit a rectangle between them. - * @param from - the first point defining the rectangle - * @param to - the second point defining the rectangle - */ - static Rectangle(from: Point, to: Point): Path; - - /** - * Creates a rectangular path item from the properties described by an object literal. - * @param object - an object literal containing properties describing the path's attributes - */ - static Rectangle(object: any): Path; - - /** - * Creates an elliptical path item. - * @param rectangle - the rectangle circumscribing the ellipse - */ - static Ellipse(rectangle: Rectangle): Path; - - /** - * Creates an elliptical path item from the properties described by an object literal. - * @param object - an object literal containing properties describing the path's attributes - */ - static Ellipse(object: any): Path; - /** - * Creates a circular arc path item - * @param from - the starting point of the circular arc - * @param through - the point the arc passes through - * @param to - the end point of the arc - */ - static Arc(from: Point, through: Point, to: Point): Path; - - /** - * Creates an circular arc path item from the properties described by an object literal. - * @param object - an object literal containing properties describing the path's attributes - */ - static Arc(object: any): Path; - - /** - * Creates a regular polygon shaped path item. - * @param center - the center point of the polygon - * @param sides - the number of sides of the polygon - * @param radius - the radius of the polygon - */ - static RegularPolygon(center: Point, sides: number, radius: number): Path; - - /** - * Creates a regular polygon shaped path item from the properties described by an object literal. - * @param object - an object literal containing properties describing the path's attributes - */ - static RegularPolygon(object: any): Path; - - /** - * Creates a star shaped path item. The largest of radius1 and radius2 will be the outer radius of the star. The smallest of radius1 and radius2 will be the inner radius. - * @param center - the center point of the star - * @param points - the number of points of the star - * @param radius1 - * @param radius2 - */ - static Star(center: Point, points: number, radius1: number, radius2: number): Path; - - /** - * Creates a star shaped path item from the properties described by an object literal. - * @param object - an object literal containing properties describing the path's attributes - */ - static Star(object: any): Path; - /** * Creates a new path item and places it at the top of the active layer. * @param segments [optional] - An array of segments (or points to be converted to segments) that will be added to the path */ - constructor(segments?: Segment[]| Point[]); + constructor(segments?: Segment[] | Point[]); /** * Creates a new path item from an object description and places it at the top of the active layer. @@ -2574,6 +2540,130 @@ declare module 'paper' { } + module Path { + export class Line extends Path { + /** + * Creates a linear path item from two points describing a line. + * @param from - the line's starting point + * @param to - the line's ending point + */ + constructor(from: Point, to: Point); + + /** + * Creates a linear path item from the properties described by an object literal. + * @param object - an object literal containing properties describing the path's attributes + */ + constructor(object: any); + } + + export class Circle extends Path { + /** + * Creates a circular path item. + * @param center - the center point of the circle + * @param radius - the radius of the circle + */ + constructor(center: Point, radius: number); + + /** + * Creates a circular path item from the properties described by an object literal. + * @param object - an object literal containing properties describing the path's attributes + */ + constructor(object: any); + } + + export class Rectangle extends Path { + /** + * Creates a rectangular path item, with optionally rounded corners. + * @param rectangle - the rectangle object describing the geometry of the rectangular path to be created. + * @param radius [optional] - the size of the rounded corners default: null + */ + constructor(rectangle: Rectangle, radius?: number); + + /** + * Creates a rectangular path item from a point and a size object. + * @param point - the rectangle's top-left corner. + * @param size - the rectangle's size. + */ + constructor(point: Point, size: Size); + + /** + * Creates a rectangular path item from the passed points. These do not necessarily need to be the top left and bottom right corners, the constructor figures out how to fit a rectangle between them. + * @param from - the first point defining the rectangle + * @param to - the second point defining the rectangle + */ + constructor(from: Point, to: Point); + + /** + * Creates a rectangular path item from the properties described by an object literal. + * @param object - an object literal containing properties describing the path's attributes + */ + constructor(object: any); + } + + export class Ellipse extends Path { + /** + * Creates an elliptical path item. + * @param rectangle - the rectangle circumscribing the ellipse + */ + constructor(rectangle: Rectangle); + + /** + * Creates an elliptical path item from the properties described by an object literal. + * @param object - an object literal containing properties describing the path's attributes + */ + constructor(object: any); + } + + export class Arc extends Path { + /** + * Creates a circular arc path item + * @param from - the starting point of the circular arc + * @param through - the point the arc passes through + * @param to - the end point of the arc + */ + constructor(from: Point, through: Point, to: Point); + + /** + * Creates an circular arc path item from the properties described by an object literal. + * @param object - an object literal containing properties describing the path's attributes + */ + constructor(object: any); + } + + export class RegularPolygon extends Path { + /** + * Creates a regular polygon shaped path item. + * @param center - the center point of the polygon + * @param sides - the number of sides of the polygon + * @param radius - the radius of the polygon + */ + constructor(center: Point, sides: number, radius: number); + + /** + * Creates a regular polygon shaped path item from the properties described by an object literal. + * @param object - an object literal containing properties describing the path's attributes + */ + constructor(object: any); + } + + export class Star extends Path { + /** + * Creates a star shaped path item. The largest of radius1 and radius2 will be the outer radius of the star. The smallest of radius1 and radius2 will be the inner radius. + * @param center - the center point of the star + * @param points - the number of points of the star + * @param radius1 + * @param radius2 + */ + constructor(center: Point, points: number, radius1: number, radius2: number); + + /** + * Creates a star shaped path item from the properties described by an object literal. + * @param object - an object literal containing properties describing the path's attributes + */ + constructor(object: any); + } + } + /** * A compound path contains two or more paths, holes are drawn where the paths overlap. All the paths in a compound path take on the style of the backmost path and can be accessed through its item.children list. */ @@ -4005,4 +4095,79 @@ declare module 'paper' { } + /** + * A Javascript MouseEvent wrapper + */ + export class MouseEvent extends Event { + constructor(type: string, event: NativeMouseEvent, point: Point, target: Item, delta: Point) + + /** + * The JavaScript mouse event + */ + event: NativeMouseEvent; + + /** + * The position of the mouse in project coordinates when the event was + * fired. + */ + point: Point; + + /** + * The last event's position of the mouse in project coordinates when + * the event was fired. + */ + lastPoint: Point; + + /** + * + */ + delta: Point; + + /** + * The item that dispatched the event. It is different from + * currentTarget when the event handler is called during the bubbling + * phase of the event. + */ + target: Item; + + /** + * The current target for the event, as the event traverses the scene + * graph. It always refers to the element the event handler has been + * attached to as opposed to target which identifies the element on + * which the event occurred. + */ + currentTarget: Item; + + /** + * Type of mouse event + */ + type: 'mousedown' | 'mouseup' | 'mousedrag' | 'click' | 'doubleclick' | 'mousemove' | 'mouseenter' | 'mouseleave'; + + /** + * The time at which the event was created, in milliseconds since the + * epoch. + */ + timeStamp(): number; + + /** + * Cancels the event if it is cancelable, without stopping further + * propagation of the event. + */ + preventDefault(): void; + + /** + * Prevents further propagation of the current event. + */ + stopPropagation(): void; + + /** + * Cancels the event if it is cancelable, and stops stopping further + * propagation of the event. This is has the same effect as calling + * both stopPropagation() and preventDefault(). + * + * Any handler can also return false to indicate that stop() should be + * called right after. + */ + stop(): void; + } } diff --git a/types/paper/paper-tests.ts b/types/paper/paper-tests.ts index 39d015db87..444ffb8725 100644 --- a/types/paper/paper-tests.ts +++ b/types/paper/paper-tests.ts @@ -5,7 +5,7 @@ var canvas = document.createElement('canvas') paper.setup(canvas); // Circle -var path = paper.Path.Circle({ +var path = new paper.Path.Circle({ center: [80, 50], radius: 35, fillColor: 'red'