From 56e4dc60a6ce9dd4165ebd9be752a01509dcefc0 Mon Sep 17 00:00:00 2001 From: jiricekcz <36630605+jiricekcz@users.noreply.github.com> Date: Mon, 4 Jan 2021 23:18:26 +0100 Subject: [PATCH 01/17] basics and Polygon doc --- final/geometry.d.ts | 270 ++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 246 insertions(+), 24 deletions(-) diff --git a/final/geometry.d.ts b/final/geometry.d.ts index 5f2b82a..ab0f54c 100644 --- a/final/geometry.d.ts +++ b/final/geometry.d.ts @@ -1,32 +1,235 @@ import * as canvasio from "./index.js" -declare namespace Geomtery { +/** + * The Geomtery namespace contains all the classes you can use to draw geometrical shapes onto a canvas using the canvasio library. + */ +declare namespace Geometry { + /** + * GeometryObject is an universal type for all object extending the Geometry.Base class. They can all be drawn onto a canvas. + */ declare type GeometryObject = Point | Line | Ray | Segment | Circle | Polygon | Triangle; - declare class Base { + /** + * The base class for all Geometry objects. + */ + declare abstract class Base { + /** + * Base constructor + */ constructor(); + /** + * This function calculates intersect with another Geometry object. For the Base class it does nothing, extending class overwrite this method. + * @param object The object to calculate the intersect with. + * @example + * const point1 = new Geometry.Point(0,0); + * const point2 = new Geometry.Point(100,100); + * const line = new Geometry.Line(point1, point2); + * + * console.log(line.getIntersect(point1)); // Expected output is point1 + * console.log(line.getIntersect(new Geometry.Point(50,100))); // Expected output is null + */ getIntersect(object: GeometryObject): GeometryObject | Array | null; + /** + * This function calculates whether or not this Geometry object intersects with another Geometry object. For the Base class it does nothing, extending class overwrite this method. + * @param object The object to determine the intersection with + * @example + * const line = new Geometry.Line( + * new Geometry.Point(0,0), + * new Geometry.Point(100,100) + * ); + * const segment = new Geometry.Segment( + * new Geometry.Point(100,0), + * new Geometry.Point(0,100) + * ); + * + * console.log(segment.intersect(line)); // Expected output is true + */ intersects(object: GeometryObject): boolean; } - + /** + * The Geometry.Polygon class represents any polygon. This class can be extended to a more exact shape. + */ declare class Polygon extends Base { + /** + * Polygon constructor + * @param points The points used to construct the polygon + * @example + * const polygon = new Geometry.Polygon([ + * new Geometry.Point(-100, 0), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, 0), + * new Geometry.Point(100,100), + * new Geometry.Point(0, 200), + * new Geometry.Point(-100, 100) + * ]); // Creates a six-sided polygon + */ constructor(points: Array); + /** + * Verices of the polygon. + */ vertices: Array; + /** + * Edges of the polygon. + */ edges: Array; + /** + * Function that converts the polygon to a readable string. + * @example + * const polygon = new Geometry.Polygon([ + * new Geometry.Point(-100, 0), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, 0), + * ]); + * + * console.log(polygon.toString()); // Expected output is Polygon: ([-100, 0], [0, -100], [100, 0]) + */ toString(): string; - intersects(object: Point): boolean; - intersects(object: Ray): boolean; - intersects(object: Segment): boolean; - intersects(object: Line): boolean; - intersects(object: Circle): boolean; - intersects(object: Polygon): boolean; - intersects(object: Triangle): boolean; - getIntersect(object: Point): Point | null; - getIntersect(object: Ray): Array | Segment | Point | null; - getIntersect(object: Segment): Array | Segment | Point | null; - getIntersect(object: Line): Array | Segment | Point | null; - getIntersect(object: Circle): Array | Point | null; - getIntersect(object: Polygon): Polygon | Array | Segment | Point | null; - getIntersect(object: Triangle): Polygon | Triangle | Array | Segment | Point | null; + /** + * This function determines whether or not this polygon intersects a point. + * @param point The point + * @example + * const polygon = new Geometry.Polygon([ + * new Geometry.Point(-100, 0), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, 0), + * ]); + * + * console.log(polygon.intersects(new Geometry.Point(0, 0))); // Expected output is true + * console.log(polygon.intersects(new Geometry.Point(0, -50))); // Expected output is false + */ + intersects(point: Point): boolean; + /** + * This function determines whether or not this polygon intersects a ray. + * @param ray The ray + * @example + * const polygon = new Geometry.Polygon([ + * new Geometry.Point(-100, 0), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, 0), + * ]); + * + * console.log(polygon.intersects(new Geometry.Ray( + * new Geometry.Point(100,100), + * new Geometry.Point(-100,-100) + * ))); // Expected output is true + * console.log(polygon.intersects(new Geometry.Ray( + * new Geometry.Point(200, 200), + * new Geometry.Point(300, 300) + * ))); // Expected output is false + */ + intersects(ray: Ray): boolean; + /** + * This function determines whether or not this polygon intersects a segment. + * @param segment The segment + * @example + * const polygon = new Geometry.Polygon([ + * new Geometry.Point(-100, 0), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, 0), + * ]); + * + * console.log(polygon.intersects(new Geometry.Segment( + * new Geometry.Point(100,100), + * new Geometry.Point(-100,-100) + * ))); // Expected output is true + * console.log(polygon.intersects(new Geometry.Segment( + * new Geometry.Point(200, 200), + * new Geometry.Point(300, 300) + * ))); // Expected output is false + */ + intersects(segment: Segment): boolean; + /** + * This function determines whether or not this polygon intersects a line. + * @param line The line + * @example + * const polygon = new Geometry.Polygon([ + * new Geometry.Point(-100, 0), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, 0), + * ]); + * + * console.log(polygon.intersects(new Geometry.Line( + * new Geometry.Point(100,100), + * new Geometry.Point(-100,-100) + * ))); // Expected output is true + * console.log(polygon.intersects(new Geometry.Line( + * new Geometry.Point(200, 200), + * new Geometry.Point(300, 200) + * ))); // Expected output is false + */ + intersects(line: Line): boolean; + /** + * This function determines whether or not this polygon intersects a circle. + * @param circle The circle + * @example + * const polygon = new Geometry.Polygon([ + * new Geometry.Point(-100, 0), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, 0), + * ]); + * + * console.log(polygon.intersects(new Geometry.Circle( + * new Geometry.Point(100,100), + * 150 + * ))); // Expected output is true + * console.log(polygon.intersects(new Geometry.Circle( + * new Geometry.Point(200, 200), + * 10 + * ))); // Expected output is false + */ + intersects(circle: Circle): boolean; + /** + * This function determines whether or not this polygon intersects a polygon. + * @param polygon The polygon + * @example + * const polygon = new Geometry.Polygon([ + * new Geometry.Point(-100, 0), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, 0), + * ]); + * + * console.log(polygon.intersects(new Geometry.Polygon([ + * new Geometry.Point(0,100), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, -100), + * new Geometry.Point(100, 100) + * )])); // Expected output is true + * console.log(polygon.intersects(new Geometry.Polygon([ + * new Geometry.Point(200, 200), + * new Geometry.Point(300, 200) + * new Geometry.Point(300, 300) + * )])); // Expected output is false + */ + intersects(polygon: Polygon): boolean; + /** + * This function determines whether or not this polygon intersects a triangle. + * @param triangle The triangle + * @example + * const polygon = new Geometry.Polygon([ + * new Geometry.Point(-100, 0), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, 0), + * ]); + * + * console.log(polygon.intersects(new Geometry.Triangle( + * new Geometry.Point(0,100), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, -100), + * new Geometry.Point(100, 100) + * ))); // Expected output is true + * console.log(polygon.intersects(new Geometry.Triangle( + * new Geometry.Point(200, 200), + * new Geometry.Point(300, 200) + * new Geometry.Point(300, 300) + * ))); // Expected output is false + */ + intersects(triangle: Triangle): boolean; + getIntersect(point: Point): Point | null; + getIntersect(ray: Ray): Array | Segment | Point | null; + getIntersect(segment: Segment): Array | Segment | Point | null; + getIntersect(line: Line): Array | Segment | Point | null; + getIntersect(circle: Circle): Array | Point | null; + getIntersect(polygon: Polygon): Polygon | Array | Segment | Point | null; + getIntersect(triangle: Triangle): Polygon | Triangle | Array | Segment | Point | null; } declare class Line extends Base { @@ -200,7 +403,14 @@ declare namespace Geomtery { getIntersect(object: Polygon): Polygon | Triangle | Array | Segment | Point | null; getIntersect(object: Triangle): Triangle | Array | Segment | Point | null; } + /** + * The Geometry.Drawer object manages the interaction between the Geometry library and the canvasio library. It is used to draw geometry objects onto the canvas. This class is in usual cases only used internaly + */ declare class Drawer { + /** + * Drawer constructor + * @param canvas The canvas this Drawer draws on + */ constructor(canvas: canvasio.Canvas); canvas: canvasio.Canvas; draw(segment: Segment): void; @@ -210,17 +420,29 @@ declare namespace Geomtery { draw(circle: Circle): void; draw(point: Point): void; draw(triangle: Triangle): void; - #drawPoint(point: Point): void; - #drawLine(line: Line): void; - #drawRay(ray: Ray): void; - #drawSegment(segment: Segment): void; - #drawCircle(circle: Circle): void; - #drawPolygon(polygon: Polygon): void; + protected #drawPoint(point: Point): void; + protected #drawLine(line: Line): void; + protected #drawRay(ray: Ray): void; + protected #drawSegment(segment: Segment): void; + protected #drawCircle(circle: Circle): void; + protected #drawPolygon(polygon: Polygon): void; } } +/** + * A specific array of numbers, that has exactly two elements. This array represents a point. PointArrayForm[0] is the x coordinate of the point and PointArrayForm[1] is the y coordinate of the point. + */ declare interface PointArrayForm extends Array { + /** + * The x coordinate of the point this array represents + */ 0: number; + /** + * The y coordinate of the point this array represents + */ 1: number; + /** + * Length of this array will be by definition 2. + */ length: 2; } -export = Geomtery; \ No newline at end of file +export = Geometry; \ No newline at end of file From 02ed1f1b708eabe604f766cbcb6ddd781604a585 Mon Sep 17 00:00:00 2001 From: jiricekcz <36630605+jiricekcz@users.noreply.github.com> Date: Mon, 4 Jan 2021 23:35:34 +0100 Subject: [PATCH 02/17] drawer doc --- final/geometry.d.ts | 119 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 118 insertions(+), 1 deletion(-) diff --git a/final/geometry.d.ts b/final/geometry.d.ts index ab0f54c..c84038d 100644 --- a/final/geometry.d.ts +++ b/final/geometry.d.ts @@ -349,7 +349,7 @@ declare namespace Geometry { getIntersect(object: Line): Segment | Point | null; getIntersect(object: Circle): [Point, Point] | Point | null; getIntersect(object: Polygon): Array | Segment | Point | null; - getIntersect(object: Triangle): [Point, Point] | Segment | Point | null; + getIntersect(object: Triangle): [Point, Point] | Segment | Point | null; } declare class Circle extends Base { @@ -412,19 +412,136 @@ declare namespace Geometry { * @param canvas The canvas this Drawer draws on */ constructor(canvas: canvasio.Canvas); + /** + * The canvasio canvas element this drawe uses to draw onto the canvas. + */ canvas: canvasio.Canvas; + /** + * This overload of the function Drawer.draw() draws a segment onto the canvas. This function is not intended for direct use by the user. Make sure you know, what you are doing when using this function. + * @param segment The segment + * @example + * // NOTE: This function is not the preferred way to draw Geometry objects. User canvasio.Canvas.draw() instead. + * const canvas = new canvasio.Canvas({ preset: "fullscreen"}); + * const segment = new Geometry.Segment( + * new Geometry.Point(0, 0), + * new Geometry.Point(10, 10) + * ); + * const drawer = new Geometry.Drawer(canvas); + * drawer.draw(segment); // Draws the segment onto the canvas. + */ draw(segment: Segment): void; + /** + * This overload of the function Drawer.draw() draws a line onto the canvas. This function is not intended for direct use by the user. Make sure you know, what you are doing when using this function. + * @param line The line + * @example + * // NOTE: This function is not the preferred way to draw Geometry objects. User canvasio.Canvas.draw() instead. + * const canvas = new canvasio.Canvas({ preset: "fullscreen"}); + * const line = new Geometry.Line( + * new Geometry.Point(0, 0), + * new Geometry.Point(10, 10) + * ); + * const drawer = new Geometry.Drawer(canvas); + * drawer.draw(line); // Draws the line onto the canvas. + */ draw(line: Line): void; + /** + * This overload of the function Drawer.draw() draws a ray onto the canvas. This function is not intended for direct use by the user. Make sure you know, what you are doing when using this function. + * @param ray The ray + * @example + * // NOTE: This function is not the preferred way to draw Geometry objects. User canvasio.Canvas.draw() instead. + * const canvas = new canvasio.Canvas({ preset: "fullscreen"}); + * const ray = new Geometry.Ray( + * new Geometry.Point(0, 0), + * new Geometry.Point(10, 10) + * ); + * const drawer = new Geometry.Drawer(canvas); + * drawer.draw(ray); // Draws the ray onto the canvas. + */ draw(ray: Ray): void; + /** + * This overload of the function Drawer.draw() draws a polygon onto the canvas. This function is not intended for direct use by the user. Make sure you know, what you are doing when using this function. + * @param polygon The polygon + * @example + * // NOTE: This function is not the preferred way to draw Geometry objects. User canvasio.Canvas.draw() instead. + * const canvas = new canvasio.Canvas({ preset: "fullscreen"}); + * const polygon = new Geometry.Polygon([ + * new Geometry.Point(0, 0), + * new Geometry.Point(10, 10), + * new Geometry.Point(-10,-20), + * ]); + * const drawer = new Geometry.Drawer(canvas); + * drawer.draw(polygon); // Draws the polygon onto the canvas. + */ draw(polygon: Polygon): void; + /** + * This overload of the function Drawer.draw() draws a circle onto the canvas. This function is not intended for direct use by the user. Make sure you know, what you are doing when using this function. + * @param circle The circle + * @example + * // NOTE: This function is not the preferred way to draw Geometry objects. User canvasio.Canvas.draw() instead. + * const canvas = new canvasio.Canvas({ preset: "fullscreen"}); + * const circle = new Geometry.Circle( + * new Geometry.Point(0, 0), + * 100 + * ); + * const drawer = new Geometry.Drawer(canvas); + * drawer.draw(circle); // Draws the circle onto the canvas. + */ draw(circle: Circle): void; + /** + * This overload of the function Drawer.draw() draws a point onto the canvas. This function is not intended for direct use by the user. Make sure you know, what you are doing when using this function. + * @param point The point + * @example + * // NOTE: This function is not the preferred way to draw Geometry objects. User canvasio.Canvas.draw() instead. + * const canvas = new canvasio.Canvas({ preset: "fullscreen"}); + * const point = new Geometry.Point(100, 100); + * const drawer = new Geometry.Drawer(canvas); + * drawer.draw(point); // Draws the point onto the canvas. + */ draw(point: Point): void; + /** + * This overload of the function Drawer.draw() draws a triangle onto the canvas. This function is not intended for direct use by the user. Make sure you know, what you are doing when using this function. + * @param triangle The triangle + * @example + * // NOTE: This function is not the preferred way to draw Geometry objects. User canvasio.Canvas.draw() instead. + * const canvas = new canvasio.Canvas({ preset: "fullscreen"}); + * const triangle = new Geometry.Triangle( + * new Geometry.Point(0, 0), + * new Geometry.Point(10, 10), + * new Geometry.Point(-10,-20), + * ); + * const drawer = new Geometry.Drawer(canvas); + * drawer.draw(triangle); // Draws the triangle onto the canvas. + */ draw(triangle: Triangle): void; + /** + * This function directly draws a point onto the canvas. + * @param point The point + */ protected #drawPoint(point: Point): void; + /** + * This function directly draws a line onto the canvas. + * @param line The line + */ protected #drawLine(line: Line): void; + /** + * This function directly draws a ray onto the canvas. + * @param ray The ray + */ protected #drawRay(ray: Ray): void; + /** + * This function directly draws a segment onto the canvas. + * @param segment The segment + */ protected #drawSegment(segment: Segment): void; + /** + * This function directly draws a circle onto the canvas. + * @param circle The circle + */ protected #drawCircle(circle: Circle): void; + /** + * This function directly draws any polygon onto the canvas. + * @param polygon The polygon + */ protected #drawPolygon(polygon: Polygon): void; } } From 504a78b85a6c8ccec820965c7edfe095368bea24 Mon Sep 17 00:00:00 2001 From: jiricekcz <36630605+jiricekcz@users.noreply.github.com> Date: Mon, 4 Jan 2021 23:38:28 +0100 Subject: [PATCH 03/17] move from final --- src/geometry.d.ts | 389 +++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 364 insertions(+), 25 deletions(-) diff --git a/src/geometry.d.ts b/src/geometry.d.ts index 5f2b82a..c84038d 100644 --- a/src/geometry.d.ts +++ b/src/geometry.d.ts @@ -1,32 +1,235 @@ import * as canvasio from "./index.js" -declare namespace Geomtery { +/** + * The Geomtery namespace contains all the classes you can use to draw geometrical shapes onto a canvas using the canvasio library. + */ +declare namespace Geometry { + /** + * GeometryObject is an universal type for all object extending the Geometry.Base class. They can all be drawn onto a canvas. + */ declare type GeometryObject = Point | Line | Ray | Segment | Circle | Polygon | Triangle; - declare class Base { + /** + * The base class for all Geometry objects. + */ + declare abstract class Base { + /** + * Base constructor + */ constructor(); + /** + * This function calculates intersect with another Geometry object. For the Base class it does nothing, extending class overwrite this method. + * @param object The object to calculate the intersect with. + * @example + * const point1 = new Geometry.Point(0,0); + * const point2 = new Geometry.Point(100,100); + * const line = new Geometry.Line(point1, point2); + * + * console.log(line.getIntersect(point1)); // Expected output is point1 + * console.log(line.getIntersect(new Geometry.Point(50,100))); // Expected output is null + */ getIntersect(object: GeometryObject): GeometryObject | Array | null; + /** + * This function calculates whether or not this Geometry object intersects with another Geometry object. For the Base class it does nothing, extending class overwrite this method. + * @param object The object to determine the intersection with + * @example + * const line = new Geometry.Line( + * new Geometry.Point(0,0), + * new Geometry.Point(100,100) + * ); + * const segment = new Geometry.Segment( + * new Geometry.Point(100,0), + * new Geometry.Point(0,100) + * ); + * + * console.log(segment.intersect(line)); // Expected output is true + */ intersects(object: GeometryObject): boolean; } - + /** + * The Geometry.Polygon class represents any polygon. This class can be extended to a more exact shape. + */ declare class Polygon extends Base { + /** + * Polygon constructor + * @param points The points used to construct the polygon + * @example + * const polygon = new Geometry.Polygon([ + * new Geometry.Point(-100, 0), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, 0), + * new Geometry.Point(100,100), + * new Geometry.Point(0, 200), + * new Geometry.Point(-100, 100) + * ]); // Creates a six-sided polygon + */ constructor(points: Array); + /** + * Verices of the polygon. + */ vertices: Array; + /** + * Edges of the polygon. + */ edges: Array; + /** + * Function that converts the polygon to a readable string. + * @example + * const polygon = new Geometry.Polygon([ + * new Geometry.Point(-100, 0), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, 0), + * ]); + * + * console.log(polygon.toString()); // Expected output is Polygon: ([-100, 0], [0, -100], [100, 0]) + */ toString(): string; - intersects(object: Point): boolean; - intersects(object: Ray): boolean; - intersects(object: Segment): boolean; - intersects(object: Line): boolean; - intersects(object: Circle): boolean; - intersects(object: Polygon): boolean; - intersects(object: Triangle): boolean; - getIntersect(object: Point): Point | null; - getIntersect(object: Ray): Array | Segment | Point | null; - getIntersect(object: Segment): Array | Segment | Point | null; - getIntersect(object: Line): Array | Segment | Point | null; - getIntersect(object: Circle): Array | Point | null; - getIntersect(object: Polygon): Polygon | Array | Segment | Point | null; - getIntersect(object: Triangle): Polygon | Triangle | Array | Segment | Point | null; + /** + * This function determines whether or not this polygon intersects a point. + * @param point The point + * @example + * const polygon = new Geometry.Polygon([ + * new Geometry.Point(-100, 0), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, 0), + * ]); + * + * console.log(polygon.intersects(new Geometry.Point(0, 0))); // Expected output is true + * console.log(polygon.intersects(new Geometry.Point(0, -50))); // Expected output is false + */ + intersects(point: Point): boolean; + /** + * This function determines whether or not this polygon intersects a ray. + * @param ray The ray + * @example + * const polygon = new Geometry.Polygon([ + * new Geometry.Point(-100, 0), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, 0), + * ]); + * + * console.log(polygon.intersects(new Geometry.Ray( + * new Geometry.Point(100,100), + * new Geometry.Point(-100,-100) + * ))); // Expected output is true + * console.log(polygon.intersects(new Geometry.Ray( + * new Geometry.Point(200, 200), + * new Geometry.Point(300, 300) + * ))); // Expected output is false + */ + intersects(ray: Ray): boolean; + /** + * This function determines whether or not this polygon intersects a segment. + * @param segment The segment + * @example + * const polygon = new Geometry.Polygon([ + * new Geometry.Point(-100, 0), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, 0), + * ]); + * + * console.log(polygon.intersects(new Geometry.Segment( + * new Geometry.Point(100,100), + * new Geometry.Point(-100,-100) + * ))); // Expected output is true + * console.log(polygon.intersects(new Geometry.Segment( + * new Geometry.Point(200, 200), + * new Geometry.Point(300, 300) + * ))); // Expected output is false + */ + intersects(segment: Segment): boolean; + /** + * This function determines whether or not this polygon intersects a line. + * @param line The line + * @example + * const polygon = new Geometry.Polygon([ + * new Geometry.Point(-100, 0), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, 0), + * ]); + * + * console.log(polygon.intersects(new Geometry.Line( + * new Geometry.Point(100,100), + * new Geometry.Point(-100,-100) + * ))); // Expected output is true + * console.log(polygon.intersects(new Geometry.Line( + * new Geometry.Point(200, 200), + * new Geometry.Point(300, 200) + * ))); // Expected output is false + */ + intersects(line: Line): boolean; + /** + * This function determines whether or not this polygon intersects a circle. + * @param circle The circle + * @example + * const polygon = new Geometry.Polygon([ + * new Geometry.Point(-100, 0), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, 0), + * ]); + * + * console.log(polygon.intersects(new Geometry.Circle( + * new Geometry.Point(100,100), + * 150 + * ))); // Expected output is true + * console.log(polygon.intersects(new Geometry.Circle( + * new Geometry.Point(200, 200), + * 10 + * ))); // Expected output is false + */ + intersects(circle: Circle): boolean; + /** + * This function determines whether or not this polygon intersects a polygon. + * @param polygon The polygon + * @example + * const polygon = new Geometry.Polygon([ + * new Geometry.Point(-100, 0), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, 0), + * ]); + * + * console.log(polygon.intersects(new Geometry.Polygon([ + * new Geometry.Point(0,100), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, -100), + * new Geometry.Point(100, 100) + * )])); // Expected output is true + * console.log(polygon.intersects(new Geometry.Polygon([ + * new Geometry.Point(200, 200), + * new Geometry.Point(300, 200) + * new Geometry.Point(300, 300) + * )])); // Expected output is false + */ + intersects(polygon: Polygon): boolean; + /** + * This function determines whether or not this polygon intersects a triangle. + * @param triangle The triangle + * @example + * const polygon = new Geometry.Polygon([ + * new Geometry.Point(-100, 0), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, 0), + * ]); + * + * console.log(polygon.intersects(new Geometry.Triangle( + * new Geometry.Point(0,100), + * new Geometry.Point(0,-100), + * new Geometry.Point(100, -100), + * new Geometry.Point(100, 100) + * ))); // Expected output is true + * console.log(polygon.intersects(new Geometry.Triangle( + * new Geometry.Point(200, 200), + * new Geometry.Point(300, 200) + * new Geometry.Point(300, 300) + * ))); // Expected output is false + */ + intersects(triangle: Triangle): boolean; + getIntersect(point: Point): Point | null; + getIntersect(ray: Ray): Array | Segment | Point | null; + getIntersect(segment: Segment): Array | Segment | Point | null; + getIntersect(line: Line): Array | Segment | Point | null; + getIntersect(circle: Circle): Array | Point | null; + getIntersect(polygon: Polygon): Polygon | Array | Segment | Point | null; + getIntersect(triangle: Triangle): Polygon | Triangle | Array | Segment | Point | null; } declare class Line extends Base { @@ -146,7 +349,7 @@ declare namespace Geomtery { getIntersect(object: Line): Segment | Point | null; getIntersect(object: Circle): [Point, Point] | Point | null; getIntersect(object: Polygon): Array | Segment | Point | null; - getIntersect(object: Triangle): [Point, Point] | Segment | Point | null; + getIntersect(object: Triangle): [Point, Point] | Segment | Point | null; } declare class Circle extends Base { @@ -200,27 +403,163 @@ declare namespace Geomtery { getIntersect(object: Polygon): Polygon | Triangle | Array | Segment | Point | null; getIntersect(object: Triangle): Triangle | Array | Segment | Point | null; } + /** + * The Geometry.Drawer object manages the interaction between the Geometry library and the canvasio library. It is used to draw geometry objects onto the canvas. This class is in usual cases only used internaly + */ declare class Drawer { + /** + * Drawer constructor + * @param canvas The canvas this Drawer draws on + */ constructor(canvas: canvasio.Canvas); + /** + * The canvasio canvas element this drawe uses to draw onto the canvas. + */ canvas: canvasio.Canvas; + /** + * This overload of the function Drawer.draw() draws a segment onto the canvas. This function is not intended for direct use by the user. Make sure you know, what you are doing when using this function. + * @param segment The segment + * @example + * // NOTE: This function is not the preferred way to draw Geometry objects. User canvasio.Canvas.draw() instead. + * const canvas = new canvasio.Canvas({ preset: "fullscreen"}); + * const segment = new Geometry.Segment( + * new Geometry.Point(0, 0), + * new Geometry.Point(10, 10) + * ); + * const drawer = new Geometry.Drawer(canvas); + * drawer.draw(segment); // Draws the segment onto the canvas. + */ draw(segment: Segment): void; + /** + * This overload of the function Drawer.draw() draws a line onto the canvas. This function is not intended for direct use by the user. Make sure you know, what you are doing when using this function. + * @param line The line + * @example + * // NOTE: This function is not the preferred way to draw Geometry objects. User canvasio.Canvas.draw() instead. + * const canvas = new canvasio.Canvas({ preset: "fullscreen"}); + * const line = new Geometry.Line( + * new Geometry.Point(0, 0), + * new Geometry.Point(10, 10) + * ); + * const drawer = new Geometry.Drawer(canvas); + * drawer.draw(line); // Draws the line onto the canvas. + */ draw(line: Line): void; + /** + * This overload of the function Drawer.draw() draws a ray onto the canvas. This function is not intended for direct use by the user. Make sure you know, what you are doing when using this function. + * @param ray The ray + * @example + * // NOTE: This function is not the preferred way to draw Geometry objects. User canvasio.Canvas.draw() instead. + * const canvas = new canvasio.Canvas({ preset: "fullscreen"}); + * const ray = new Geometry.Ray( + * new Geometry.Point(0, 0), + * new Geometry.Point(10, 10) + * ); + * const drawer = new Geometry.Drawer(canvas); + * drawer.draw(ray); // Draws the ray onto the canvas. + */ draw(ray: Ray): void; + /** + * This overload of the function Drawer.draw() draws a polygon onto the canvas. This function is not intended for direct use by the user. Make sure you know, what you are doing when using this function. + * @param polygon The polygon + * @example + * // NOTE: This function is not the preferred way to draw Geometry objects. User canvasio.Canvas.draw() instead. + * const canvas = new canvasio.Canvas({ preset: "fullscreen"}); + * const polygon = new Geometry.Polygon([ + * new Geometry.Point(0, 0), + * new Geometry.Point(10, 10), + * new Geometry.Point(-10,-20), + * ]); + * const drawer = new Geometry.Drawer(canvas); + * drawer.draw(polygon); // Draws the polygon onto the canvas. + */ draw(polygon: Polygon): void; + /** + * This overload of the function Drawer.draw() draws a circle onto the canvas. This function is not intended for direct use by the user. Make sure you know, what you are doing when using this function. + * @param circle The circle + * @example + * // NOTE: This function is not the preferred way to draw Geometry objects. User canvasio.Canvas.draw() instead. + * const canvas = new canvasio.Canvas({ preset: "fullscreen"}); + * const circle = new Geometry.Circle( + * new Geometry.Point(0, 0), + * 100 + * ); + * const drawer = new Geometry.Drawer(canvas); + * drawer.draw(circle); // Draws the circle onto the canvas. + */ draw(circle: Circle): void; + /** + * This overload of the function Drawer.draw() draws a point onto the canvas. This function is not intended for direct use by the user. Make sure you know, what you are doing when using this function. + * @param point The point + * @example + * // NOTE: This function is not the preferred way to draw Geometry objects. User canvasio.Canvas.draw() instead. + * const canvas = new canvasio.Canvas({ preset: "fullscreen"}); + * const point = new Geometry.Point(100, 100); + * const drawer = new Geometry.Drawer(canvas); + * drawer.draw(point); // Draws the point onto the canvas. + */ draw(point: Point): void; + /** + * This overload of the function Drawer.draw() draws a triangle onto the canvas. This function is not intended for direct use by the user. Make sure you know, what you are doing when using this function. + * @param triangle The triangle + * @example + * // NOTE: This function is not the preferred way to draw Geometry objects. User canvasio.Canvas.draw() instead. + * const canvas = new canvasio.Canvas({ preset: "fullscreen"}); + * const triangle = new Geometry.Triangle( + * new Geometry.Point(0, 0), + * new Geometry.Point(10, 10), + * new Geometry.Point(-10,-20), + * ); + * const drawer = new Geometry.Drawer(canvas); + * drawer.draw(triangle); // Draws the triangle onto the canvas. + */ draw(triangle: Triangle): void; - #drawPoint(point: Point): void; - #drawLine(line: Line): void; - #drawRay(ray: Ray): void; - #drawSegment(segment: Segment): void; - #drawCircle(circle: Circle): void; - #drawPolygon(polygon: Polygon): void; + /** + * This function directly draws a point onto the canvas. + * @param point The point + */ + protected #drawPoint(point: Point): void; + /** + * This function directly draws a line onto the canvas. + * @param line The line + */ + protected #drawLine(line: Line): void; + /** + * This function directly draws a ray onto the canvas. + * @param ray The ray + */ + protected #drawRay(ray: Ray): void; + /** + * This function directly draws a segment onto the canvas. + * @param segment The segment + */ + protected #drawSegment(segment: Segment): void; + /** + * This function directly draws a circle onto the canvas. + * @param circle The circle + */ + protected #drawCircle(circle: Circle): void; + /** + * This function directly draws any polygon onto the canvas. + * @param polygon The polygon + */ + protected #drawPolygon(polygon: Polygon): void; } } +/** + * A specific array of numbers, that has exactly two elements. This array represents a point. PointArrayForm[0] is the x coordinate of the point and PointArrayForm[1] is the y coordinate of the point. + */ declare interface PointArrayForm extends Array { + /** + * The x coordinate of the point this array represents + */ 0: number; + /** + * The y coordinate of the point this array represents + */ 1: number; + /** + * Length of this array will be by definition 2. + */ length: 2; } -export = Geomtery; \ No newline at end of file +export = Geometry; \ No newline at end of file From 59daf8da9ea180b7b739e7f0797019d192dc09f3 Mon Sep 17 00:00:00 2001 From: jiricekcz <36630605+jiricekcz@users.noreply.github.com> Date: Tue, 5 Jan 2021 14:31:46 +0100 Subject: [PATCH 04/17] constants doc --- src/constants.d.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/constants.d.ts b/src/constants.d.ts index bff3a65..7afe47c 100644 --- a/src/constants.d.ts +++ b/src/constants.d.ts @@ -1,6 +1,18 @@ +/** + * The namespace Constants include all constants this library uses when performing calculations + */ declare namespace Constants { + /** + * Number of decimal places the library rounds to when saving or comparing a coordinate or a distance + */ const decimalRoundCoordinate: number; + /** + * Number of decimal places the library rounds to when saving or comparing an angle in radians + */ const decimalRoundAngle: number; + /** + * A very large number used in drawing lines. If lines don't draw properly, try increasing this constant + */ const lineLengthMultiplier: number; } export = Constants; \ No newline at end of file From 9eae7b14c1a24e602e9e20c0b049a54c4e49cdd8 Mon Sep 17 00:00:00 2001 From: jiricekcz <36630605+jiricekcz@users.noreply.github.com> Date: Tue, 5 Jan 2021 15:27:13 +0100 Subject: [PATCH 05/17] doc --- src/geometry.d.ts | 33 ++++----- src/index.d.ts | 178 +++++++++++++++++++++++++++++++++++++--------- 2 files changed, 161 insertions(+), 50 deletions(-) diff --git a/src/geometry.d.ts b/src/geometry.d.ts index c84038d..d60c964 100644 --- a/src/geometry.d.ts +++ b/src/geometry.d.ts @@ -544,22 +544,23 @@ declare namespace Geometry { */ protected #drawPolygon(polygon: Polygon): void; } -} -/** - * A specific array of numbers, that has exactly two elements. This array represents a point. PointArrayForm[0] is the x coordinate of the point and PointArrayForm[1] is the y coordinate of the point. - */ -declare interface PointArrayForm extends Array { - /** - * The x coordinate of the point this array represents - */ - 0: number; - /** - * The y coordinate of the point this array represents - */ - 1: number; /** - * Length of this array will be by definition 2. - */ - length: 2; + * A specific array of numbers, that has exactly two elements. This array represents a point. PointArrayForm[0] is the x coordinate of the point and PointArrayForm[1] is the y coordinate of the point. + */ + declare interface PointArrayForm extends Array { + /** + * The x coordinate of the point this array represents + */ + 0: number; + /** + * The y coordinate of the point this array represents + */ + 1: number; + /** + * Length of this array will be by definition 2. + */ + length: 2; + } } + export = Geometry; \ No newline at end of file diff --git a/src/index.d.ts b/src/index.d.ts index 191dde9..9c7ddc2 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -1,15 +1,124 @@ +/** + * The canvasio namespace is the default namespace for all the canvas functionalities provided by the canvasio library. + */ declare namespace canvasio { + /** + * Class canvasio.Canvas is the main Canvas class. This class includes all the functionalities of the canvasio library. + */ declare class Canvas { + /** + * The preferred way to create a canvas is the canvasio.Canvas constructor. You can either create the canvas by specifying the options or you can overwrite these options with a preset. + * @param options Options for the canvas creation + * @example + * //Create a canvas with options + * const canvas = new canvasio.Canvas({ + * width: 100, // Sets the width of the canvas to 100 pixels + * height: 100, // Sets the height of the canvas to 100 pixels + * container: document.body // Sets the html parent node to document.body + * }); + * @example + * //Create a canvas with a preset + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); // Creates a fullscreen canvas + */ constructor(options?: CanvasConstructorOptions); - canvas: HTMLElement; + /** + * The HTML Element of the canvas. + */ + canvas: HTMLCanvasElement; + /** + * The CanvasRenderingContext2D context of this canvas. + */ context: CanvasRenderingContext2D; + /** + * Filters currently applied to the canvas. + */ filters: FilterManager; + /** + * Draws a line (a segment) from point A to point B + * @param A Point A + * @param B Point B + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen"}); + * + * canvas.drawLine({ x: 10, y: 20 }, { x: 100, y: 200 }); // Draws a line from [10, 20] to [100, 200] + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineTo + */ drawLine(A: Point, B: Point): void; + /** + * Draws a line (a segment) from point A to point B + * @param ax X of point A + * @param ay Y of point A + * @param bx X of point B + * @param by Y of point B + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.drawLine(10, 20, 100, 200); // Draws a line from [10, 20] to [100, 200] + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineTo + */ drawLine(ax: number, ay: number, bx: number, by: number): void; - transform(options: CanvasConstructorOptions): void; + /** + * Transforms the canvas. Can be used if you need a translation, scale and rotation. All options of the transformation are optional. + * @param options The options for the transformation + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.transform({ + * x: 100, // Moves the zero point of the canvas by 100 pixels on the x axis + * scaleY: 1.5, // Scales the Y axis 1.5 times + * rotation: Math.PI / 2 // Rotates the canvas 90 degrees clockwise + * }); + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate + */ + transform(options: CanvasTransformOptions): void; + /** + * Resets the transform properties of the canvas. + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.scale(2, 2); // Scales the canvas by 2 on both axis + * canvas.drawLine({ x: 10, y: 10 }, { x: 20, y: 20 }); // Draws a line with the scale + * + * canvas.transform(); // Resets the transform + * canvas.drawLine({ x: 10, y: 10 }, { x: 20, y: 20 }); // Draws a line without any transformations + * + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform + */ transform(): void; + /** + * Moves the zero point of the canvas by the parameters provided + * @param x Move of the zero point on the X axis + * @param y Move of the zero point on the Y axis + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.translate(200, 200); // Moves the zero point by 200 pixels along both axis + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate + */ translate(x: number = 0, y: number = 0): void; + /** + * Scales the axis of the canvas + * @param x Scale on the X axis + * @param y Scale on the Y axis + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.scale(2, 2); // Scales the canvas 2 times along both axis + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale + */ scale(x: number = 1, y: number = 1): void; + /** + * Rotates the canvas clockwise. + * @param angle The angle of the rotation in radians + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.rotate(Math.PI / 4); // Rotates the canvas by 45 degrees clockwise. + * canvas.rotate(-(Math.PI / 4)); // Rotates the canvas by 45 degrees counter-clockwise. + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate + */ rotate(angle: number): void; getTransform(): DOMMatrix2DInit; setTransform(transform: DOMMatrix2DInit): void; @@ -152,38 +261,39 @@ declare namespace canvasio { fill(): void; draw(): void; } + declare interface dropShadowValues extends Array { + 0: number; + 1: number; + 2: number; + 3: string; + length: 4; + } + declare interface GeometryObject { + + } + declare interface Rectangle { + x: number; + y: number; + width: number; + height: number; + } + declare interface Point { + x: number; + y: number; + } + declare interface CanvasConstructorOptions { + width?: number, + height?: number, + container?: HTMLElement, + preset?: "fullscreen" | "small" | "math" + } + declare interface CanvasTransformOptions { + x?: number; + y?: number; + xScale?: number; + yScale?: number; + rotation?: number; + } } -declare interface dropShadowValues extends Array { - 0: number; - 1: number; - 2: number; - 3: string; - length: 4; -} -declare interface GeometryObject { -} -declare interface Rectangle { - x: number; - y: number; - width: number; - height: number; -} -declare interface Point { - x: number; - y: number; -} -declare interface CanvasConstructorOptions { - width?: number, - height?: number, - container?: HTMLElement, - preset?: "fullscreen" | "small" | "math" -} -declare interface CanvasTransformeOptions { - x?: number; - y?: number; - xScale?: number; - yScale?: number; - rotation?: number; -} export = canvasio; \ No newline at end of file From aa66b71f43963e5345e9676f60bc946150e49c1f Mon Sep 17 00:00:00 2001 From: jiricekcz <36630605+jiricekcz@users.noreply.github.com> Date: Tue, 5 Jan 2021 16:08:04 +0100 Subject: [PATCH 06/17] index doc --- src/index.d.ts | 132 +++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 127 insertions(+), 5 deletions(-) diff --git a/src/index.d.ts b/src/index.d.ts index 9c7ddc2..a76cad4 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -120,19 +120,141 @@ declare namespace canvasio { * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate */ rotate(angle: number): void; + /** + * Retruns the current transform matrix being applied to the canvas. + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * var matrix = canvas.getTransform(); // Saves the current transform matrix + * // Do something here + * canvas.setTransform(matrix); // Load the saved transform matrix + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getTransform + */ getTransform(): DOMMatrix2DInit; + /** + * Replaces the default transform matrix with a given matrix. + * @param transform The transform matrix to apply + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * var matrix = canvas.getTransform(); // Saves the current transform matrix + * // Do something here + * canvas.setTransform(matrix); // Load the saved transform matrix + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform + */ setTransform(transform: DOMMatrix2DInit): void; + /** + * Clears the canvas. + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.drawLine({ x: 10, y: 10 }, { x: 20, y: 20 }); // Draws a line + * + * canvas.clear(); // Clears the canvas + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect + */ clear(): void; + /** + * Draws a simple gird hightlighting the X and Y axis. Used mostly for debugging. + * @param width Width of one column of the grid + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * canvas.transform({ + * x: 1000, + * y: 500, + * rotation: Math.PI / 4 + * }); // Transforms the canvas + * + * canvas.drawGrid(50); // Draws a rotated and translated grid + */ drawGrid(width: number = 50): void; - rect(x : number, y : number, width: number, height: number): void; + /** + * Draws a rectangle onto the canvas. + * @param x The x coordinate of the upper left corner of the rectangle + * @param y The y coordinate of the upper left corner of the rectangle + * @param width Width of the rectangle + * @param height Height of the rectangle + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.rect(100, 100, 200, 100); // Draws the outline of a rectangle from point [100, 100] to point [300, 200] + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeRect + */ + rect(x: number, y: number, width: number, height: number): void; + /** + * Draws a rectangle onto the canvas. + * @param rectangle The rectangle to draw + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.rect({ + * x: 100, + * y: 100, + * width: 200, + * height: 100 + * }); // Draws the outline of a rectangle from point [100, 100] to point [300, 200] + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeRect + */ rect(rectangle: Rectangle): void; - fillRect(x : number, y : number, width: number, height: number): void; + /** + * Fills a rectangle on the canvas. + * @param x The x coordinate of the upper left corner of the rectangle + * @param y The y coordinate of the upper left corner of the rectangle + * @param width Width of the rectangle + * @param height Height of the rectangle + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.fillRect(100, 100, 200, 100); // Fills a rectangle from point [100, 100] to point [300, 200] + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect + */ + fillRect(x: number, y: number, width: number, height: number): void; + /** + * Fills a rectangle on the canvas. + * @param rectangle The rectangle to fill + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.fillRect({ + * x: 100, + * y: 100, + * width: 200, + * height: 100 + * }); // Fills a rectangle from point [100, 100] to point [300, 200] + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect + */ fillRect(rectangle: Rectangle): void; - clearRect(x : number, y : number, width: number, height: number): void; + /** + * Clears a rectangle on the canvas. + * @param x The x coordinate of the upper left corner of the rectangle + * @param y The y coordinate of the upper left corner of the rectangle + * @param width Width of the rectangle + * @param height Height of the rectangle + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.clearRect(100, 100, 200, 100); // Clears a rectangle from point [100, 100] to point [300, 200] + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect + */ + clearRect(x: number, y: number, width: number, height: number): void; + /** + * Clears a rectangle on the canvas. + * @param rectangle The rectangle to clear + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.clearRect({ + * x: 100, + * y: 100, + * width: 200, + * height: 100 + * }); // Clears a rectangle from point [100, 100] to point [300, 200] + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect + */ clearRect(rectangle: Rectangle): void; save(): void; load(): void; - text(text: string, x: number, y: number, maxWidth?: number): void; + text(text: string, x: number, y: number, maxWidth?: number): void; textOutline(text: string, x: number, y: number, maxWidth?: number): void; setLineWidth(width: number): void; setLineCap(cap: "butt" | "round" | "square" = "butt"): void; @@ -269,7 +391,7 @@ declare namespace canvasio { length: 4; } declare interface GeometryObject { - + } declare interface Rectangle { x: number; From 34cf3895a8bcc9c8e11f14f299b293dd60a4e28a Mon Sep 17 00:00:00 2001 From: jiricekcz <36630605+jiricekcz@users.noreply.github.com> Date: Tue, 5 Jan 2021 21:16:25 +0100 Subject: [PATCH 07/17] doc --- src/index.d.ts | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/src/index.d.ts b/src/index.d.ts index a76cad4..d1f1aa1 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -252,7 +252,35 @@ declare namespace canvasio { * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect */ clearRect(rectangle: Rectangle): void; + /** + * Saves the current canvas configuration into the configuration stack. + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.setFill("#f0f"); // Sets fill color to #f0f + * canvas.save(); // Saves the current canvas configuration + * // Here the fill is #f0f + * canvas.setFill("#00f") // Sets fill color to #00f + * // Here the fill is #00f + * canvas.load() // Loads the last canvas configuration saved + * // Here the fill is #f0f + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save + */ save(): void; + /** + * Loads the last canvas configuration saved to the stack. + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.setFill("#f0f"); // Sets fill color to #f0f + * canvas.save(); // Saves the current canvas configuration + * // Here the fill is #f0f + * canvas.setFill("#00f") // Sets fill color to #00f + * // Here the fill is #00f + * canvas.load() // Loads the last canvas configuration saved + * // Here the fill is #f0f + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/restore + */ load(): void; text(text: string, x: number, y: number, maxWidth?: number): void; textOutline(text: string, x: number, y: number, maxWidth?: number): void; From 0a82630da6311d1b22835249b1310c8aaa1431fa Mon Sep 17 00:00:00 2001 From: jiricekcz <36630605+jiricekcz@users.noreply.github.com> Date: Wed, 6 Jan 2021 13:38:58 +0100 Subject: [PATCH 08/17] doc --- src/index.d.ts | 97 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 97 insertions(+) diff --git a/src/index.d.ts b/src/index.d.ts index d1f1aa1..ea70897 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -282,15 +282,112 @@ declare namespace canvasio { * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/restore */ load(): void; + /** + * Writes a text onto the canvas with optional text wrapping. + * @param text The text + * @param x The X coordinate of the upper left corner of the text box + * @param y The Y coordinate of the upper left corner of the text box + * @param maxWidth Max width for text wrapping + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.text("Hello world!", 300, 100); // Writes a Hello world! text onto the canvas. + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillText + */ text(text: string, x: number, y: number, maxWidth?: number): void; + /** + * Writes an outline of a text onto the canvas with optional text wrapping. + * @param text The text + * @param x The X coordinate of the upper left corner of the text box + * @param y The Y coordinate of the upper left corner of the text box + * @param maxWidth Max width for text wrapping + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.textOutline("Hello world!", 300, 100); // Writes a Hello world! text outline onto the canvas. + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeText + */ textOutline(text: string, x: number, y: number, maxWidth?: number): void; + /** + * Sets the width of a line. Line width is scaled according the scale matrix. + * @param width The width of the line + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.setLineWidth(2); // Sets the line width to 2 + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth + */ setLineWidth(width: number): void; + /** + * Sets the default line cap. + * @param cap The cap type + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.setLineCap("round"); // Sets the line cap to round. + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap + */ setLineCap(cap: "butt" | "round" | "square" = "butt"): void; + /** + * Sets the default line join for all lines + * @param join The deafult join of two or more lines + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.setLineJoin("bevel"); // Sets the line join to bevel. + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin + */ setLineJoin(join: "round" | "bevel" | "miter" = "miter"): void; + /** + * Sets the miter limit ratio." + * @param limit The new miter limit ratio + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.setMiterLimit(10); // Sets the miter limit ratio to 10 + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/miterLimit + */ setMiterLimit(limit: number): void; + /** + * Sets the line dash pattern for all lines drawn + * @param dashArray The line dash patter + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.setLineDash([10, 20, 40, 20]); // All lines drawn will be solid for 10 blank for 20 solid for the next 40 and then 10 blank again + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash + */ setLineDash(dashArray: Array): void; + /** + * Sets the line dash pattern for all lines drawn + * @param lineDashPattern The line dash patter + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * const lineDash = new canvasio.LineDashPattern([10, 20, 40, 20]); + * canvas.setLineDash(lineDash); // All lines drawn will be solid for 10 blank for 20 solid for the next 40 and then 10 blank again + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash + */ setLineDash(lineDashPattern: LineDashPattern): void; + /** + * Sets a simple dash pattern with only one repeating patter + * @param lineWidth Width of the line in the dash + * @param spacing Spacing between the line dashes + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.setLineDash(10, 10); // Sets the line to dash each 10 + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash + */ setLineDash(lineWidth: number, spacing: number): void; + /** + * Gets the current line dash + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * var lineDash = canvas.getLineDash(); // Saves the current line dash pattern + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getLineDash + */ getLineDash(): LineDashPattern; setLineDashOffset(offset: number): void; setFont(font: string): void; From 527f260e929a06112529fde15df5507d1bd25335 Mon Sep 17 00:00:00 2001 From: jiricekcz <36630605+jiricekcz@users.noreply.github.com> Date: Wed, 6 Jan 2021 16:32:56 +0100 Subject: [PATCH 09/17] doc --- src/index.d.ts | 141 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 141 insertions(+) diff --git a/src/index.d.ts b/src/index.d.ts index ea70897..861d5de 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -389,15 +389,156 @@ declare namespace canvasio { * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getLineDash */ getLineDash(): LineDashPattern; + /** + * Sets the offset of line dash patter set by the canvasio.Canvas.setLineDash() function. + * @param offset The offset of the line dash patter + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.setLineDash([10, 10]); // Sets a dashed line pattern + * canvas.setLineDashOffset(5); // The line dash pattern will be now offset by 5 + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset + */ setLineDashOffset(offset: number): void; + /** + * Sets the font of the text drawn onto the canvas. + * @param font CSS line font style + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.setFont("bold italic large serif"); // Set the font weight to bold, the font-style to italic, the font size to large, and the font family to serif. + * canvas.text("Hello world", 100, 100); // Writes a hello world text to the canvas. + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font + * @uses https://developer.mozilla.org/en-US/docs/Web/CSS/font + */ setFont(font: string): void; + /** + * Sets the text alignment for text drawn onto the canvas. + * @param align Text align style + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.setTextAlign("center"); // Sets text alignment to center. + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign + */ setTextAlign(align: "start" | "end" | "left" | "right" | "center" = "start"): void; + /** + * Sets the baseline of text drawn onto the canvas. Baseline defines how will the text be drawn. For specific baselines refer to the link below. + * @param baseline The text baseline + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.setTextBaseline("middle"); // The baseline of text will now be in the middle of the text + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline + */ setTextBaseline(baseline: "top" | "hanging" | "middle" | "alphabetic" | "ideographic" | "bottom" = "alphabetic"): void; + /** + * Changes the text direction. Warning: This feature is experimental. Please refer to the link below for more information. + * @param direction The text direction + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.setDirection("rtl"); // Sets the text direction to rtl + * canvas.text("Hi!", 100, 100); // Canvas will now draw the text "!Hi" + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/direction + */ setDirection(direction: "ltr" | "rtl" | "inherit" = "inherit"): void; + /** + * Sets the fill for drawing content onto the canvas + * @param style CSS like fill value + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.setFill("rgb(255, 0, 127)"); // Set the fill to rgb(255, 0, 127) + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle + * @uses https://developer.mozilla.org/en-US/docs/Web/CSS/color_value + */ setFill(style: string): void; + /** + * Sets the fill as a gradient. For more information about gradients refer to the links below. + * @param gradient The gradient + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient + */ + setFill(gradient: CanvasGradient): void; + /** + * Sets the fill as a patern. For more information about canvas patterns refer to the links below + * @param pattern The pattern + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern + */ + setFill(pattern: CanvasPattern): void; + /** + * Sets the stroke for drawing content onto the canvas + * @param style CSS like stroke value + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.setStroke("rgb(255, 0, 127)"); // Set the stroke to rgb(255, 0, 127) + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle + * @uses https://developer.mozilla.org/en-US/docs/Web/CSS/color_value + */ setStroke(style: string): void; + /** + * Sets the Stroke as a gradient. For more information about gradients refer to the links below. + * @param gradient The gradient + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient + */ + setStroke(gradient: CanvasGradient): void; + /** + * Sets the Stroke as a patern. For more information about canvas patterns refer to the links below + * @param pattern The pattern + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern + */ + setStroke(pattern: CanvasPattern): void; + /** + * Sets the blur for shadow effects. + * @param level The level of the blur for the shadows + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.setShadowBlur(10); // Sets the shadow blur + * canvas.setShadowColor("blue"); // Sets the shadow color + * canvas.fillRect({ + * x: 100, + * y: 100, + * width: 200, + * height: 100 + * }); // Fills a rectangle + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowBlur + */ setShadowBlur(level: number): void; + /** + * Sets the color for shadow effects. + * @param color CSS like color + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.setShadowBlur(10); // Sets the shadow blur + * canvas.setShadowColor("blue"); // Sets the shadow color + * canvas.fillRect({ + * x: 100, + * y: 100, + * width: 200, + * height: 100 + * }); // Fills a rectangle + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowColor + * @uses https://developer.mozilla.org/en-US/docs/Web/CSS/color_value + */ setShadowColor(color: string): void; + /** + * Sets the offset of shadows + * @param x Offset of the shadow on the x axis + * @param y Offset of the shadow on the y axis + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.setShadowOffset(10, 10); // Sets the shadow offset for drawing to 10 in both directions + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetX + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetX + */ setShadowOffset(x: number, y: number): void; setGlobalAlpha(alpha: number): void; setGlobalCompositeOperation(operation: "source-over" | "source-in" | "source-out" | "source-atop" | "destination-over" | "destination-in" | "destination-out" | "destination-atop" | "lighter" | "copy" | "xor" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity"): void; From f2e8195b76e973461e3572aa3d447751e13f865d Mon Sep 17 00:00:00 2001 From: jiricekcz <36630605+jiricekcz@users.noreply.github.com> Date: Wed, 6 Jan 2021 22:01:57 +0100 Subject: [PATCH 10/17] doc canvasio.Canvas --- src/index.d.ts | 196 ++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 192 insertions(+), 4 deletions(-) diff --git a/src/index.d.ts b/src/index.d.ts index 861d5de..760af7a 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -540,22 +540,210 @@ declare namespace canvasio { * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetX */ setShadowOffset(x: number, y: number): void; + /** + * Sets the gobal alpha value used when drawing onto the canvas, where 0 is completely transparent and 1 is fully opaque + * @param alpha The new global alpha value + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.setGlobalAlpha(0.5); // Sets the alpha to 0.5 + * canvas.drawLine({ x: 10, y: 10 }, { x: 20, y: 20 }); // Draws a line with global alpha value + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalAlpha + */ setGlobalAlpha(alpha: number): void; + /** + * Sets the operation used when two or more objects intersect. For detailed description about specific operations, see the link below. + * @param operation The operation name + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.setGlobalCompositeOperation("xor"); // Sets the operation to xor + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation + */ setGlobalCompositeOperation(operation: "source-over" | "source-in" | "source-out" | "source-atop" | "destination-over" | "destination-in" | "destination-out" | "destination-atop" | "lighter" | "copy" | "xor" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity"): void; + /** + * Draws an Image onto the canvas. + * @param image The image to draw + * @param x The X coordinate of the upper left corner of the image + * @param y The Y coordinate of the upper left corner of the image + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * var image = canvasio.Image.fromUrl("./assets/icon.png"); // Loads the image from ./assets/icon.png + * canvas.drawImage(image, 100, 100); // Draws the image + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage + */ drawImage(image: Image, x: number, y: number); + /** + * Extracts image data from a region described by a rectangle. + * @param rectangle The region + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * var imageData = canvas.getImageData({ + * x: 100, + * y: 100, + * width: 200, + * height: 100 + * }); // Gets the image data + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData + */ getImageData(rectangle: Rectangle): ImageData; + /** + * Applies a filter, that will be used when drawing objects. Warning: This feature is experimental. Please refer to the link below for more information. + * @param filter The filter + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * var filter = new canvasio.Filter.Blur(2); // Creates a blur filter + * canvas.applyFilter(filter); // Applies the filter + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter + */ applyFilter(filter: Filter.Blur | Filter.Brightness | Filter.Contrast | Filter.DropShadow | Filter.Grayscale | Filter.HueRotate | Filter.Invert | Filter.Opacity | Filter.Saturation | Filter.Sepia | Filter.Url): void; + /** + * Returns all the filters currently applied to the canvas. Warning: This feature is experimental. Please refer to the link below for more information. + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * var filter = new canvasio.Filter.Blur(2); // Creates a blur filter + * canvas.applyFilter(filter); // Applies the filter + * + * console.log(canvas.getAllFilters()); // Logs the FilterManager object with all the filters - [canvasio.Filter.Blur] + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter + */ getAllFilters(): FilterManager; + /** + * Removes a filter. Warning: This feature is experimental. Please refer to the link below for more information. + * @param filter The filter object + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * var filter = new canvasio.Filter.Blur(2); // Creates a blur filter + * canvas.applyFilter(filter); // Applies the filter + * + * canvas.removeFilter(filter); // Removes the filter + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter + */ removeFilter(filter: Filter.Blur | Filter.Brightness | Filter.Contrast | Filter.DropShadow | Filter.Grayscale | Filter.HueRotate | Filter.Invert | Filter.Opacity | Filter.Saturation | Filter.Sepia | Filter.Url): void; + /** + * Removes a filter with the index of it. Warning: This feature is experimental. Please refer to the link below for more information. + * @param filterId The id of the filter + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * var filter = new canvasio.Filter.Blur(2); // Creates a blur filter + * canvas.applyFilter(filter); // Applies the filter + * + * canvas.removeFilter(0); // Removes the first filter + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter + */ + removeFilter(filterId: number): void; + /** + * Removes all filters. Warning: This feature is experimental. Please refer to the link below for more information. + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * var filter = new canvasio.Filter.Blur(2); // Creates a blur filter + * canvas.applyFilter(filter); // Applies the filter + * + * canvas.clearFilters(); // Clears all filters + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter + */ clearFilters(): void; + /** + * Sets the image smoothing mode. + * @param imageSmoothingMode The image smoothing mode + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.setImageSmooth("disabled"); // Disables all image smoothing + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality + */ setImageSmooth(imageSmoothingMode: "disabled" | "low" | "medium" | "high"): void; + /** + * Creates a path. + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * var path = canvas.createPath(); // Creates the canvasio.Path object + */ createPath(): Path; + /** + * Draws a circle onto the canvas + * @param x The X coordinate of the center of the circle + * @param y The Y coordinate of the center of the circle + * @param radius The radius of the circle + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.drawCircle(100, 100, 50); // Draws a circle from [100, 100] with the radius 50 + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/stroke + */ drawCircle(x: number, y: number, radius: number): void; + /** + * Fills a circle on the canvas + * @param x The X coordinate of the center of the circle + * @param y The Y coordinate of the center of the circle + * @param radius The radius of the circle + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.fillCircle(100, 100, 50); // Fills a circle from [100, 100] with the radius 50 + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fill + */ fillCircle(x: number, y: number, radius: number): void; - async redrawWithFilter(filter: Filter.Blur | Filter.Brightness | Filter.Contrast | Filter.DropShadow | Filter.Grayscale | Filter.HueRotate | Filter.Invert | Filter.Opacity | Filter.Saturation | Filter.Sepia | Filter.Url): Promise; - draw(...object: GeometryObject): void; - draw(...object: GeometryObject[]): void; - draw(...object: GeometryObject | GeometryObject[]): void; + /** + * Redraws everything on the canvas with a filter. Works like applying a filter to a photo. Warning: This feature is experimental. Please refer to the link below for more information. + * @param filter Filter to redraw the canvas with + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * + * canvas.drawGrid(50); // Draws a grid + * + * var filter = new canvasio.Filter.Blur(2); // Creates a blur filter + * canvas.redrawWithFilter(filter); // Redraws the canvas with the blur filter + * @uses https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter + */ + redrawWithFilter(filter: Filter.Blur | Filter.Brightness | Filter.Contrast | Filter.DropShadow | Filter.Grayscale | Filter.HueRotate | Filter.Invert | Filter.Opacity | Filter.Saturation | Filter.Sepia | Filter.Url): void; + /** + * Draws an object from the Geometry library + * @param object The objects to draw onto the canvas + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * const point = new Geometry.Point(100, 100); + * const point2 = new Geometry.Point(200, 200); + * const line = new Geometry.Line(point, point2); + * + * canvas.draw(point, point2, line); // Draws the three objects + */ + draw(...object: Array): void; + /** + * Draws an object from the Geometry library + * @param object The objects to draw onto the canvas + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * const point = new Geometry.Point(100, 100); + * const point2 = new Geometry.Point(200, 200); + * const line = new Geometry.Line(point, point2); + * + * canvas.draw([point, point2, line]); // Draws the three objects + */ + draw(...object: Array>): void; + /** + * Draws an object from the Geometry library + * @param object The objects to draw onto the canvas + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * const point = new Geometry.Point(100, 100); + * const point2 = new Geometry.Point(200, 200); + * const line = new Geometry.Line(point, point2); + * + * canvas.draw(point, point2, line, line.getIntersect(point)); // Draws the three objects and the intersection + */ + draw(...object: Array>): void; } declare class FilterManager extends Array { constructor(); From f4c27f4e4110d5418dd0cbe0d63253c178e22936 Mon Sep 17 00:00:00 2001 From: jiricekcz <36630605+jiricekcz@users.noreply.github.com> Date: Wed, 6 Jan 2021 22:05:42 +0100 Subject: [PATCH 11/17] canvasio.FilterManger doc --- src/index.d.ts | 29 +++++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/src/index.d.ts b/src/index.d.ts index 760af7a..34a071f 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -745,11 +745,36 @@ declare namespace canvasio { */ draw(...object: Array>): void; } + /** + * The class managing filters for the canvasio.Canvas + */ declare class FilterManager extends Array { + /** + * FilterManager constructor + */ constructor(); - add(filter: Filter): void; - remove(filter: Filter): void; + /** + * Adds a filter to the list of filters + * @param filter Filter to add + */ + add(filter: Filter.Blur | Filter.Brightness | Filter.Contrast | Filter.DropShadow | Filter.Grayscale | Filter.HueRotate | Filter.Invert | Filter.Opacity | Filter.Saturation | Filter.Sepia | Filter.Url): void; + /** + * Removes a filter from the list + * @param filter Filter to remove + */ + remove(filter: Filter.Blur | Filter.Brightness | Filter.Contrast | Filter.DropShadow | Filter.Grayscale | Filter.HueRotate | Filter.Invert | Filter.Opacity | Filter.Saturation | Filter.Sepia | Filter.Url): void; + /** + * Removes a filter from the list by its index + * @param filterId The index of the filter + */ + remove(filterId: number): void; + /** + * Clears all the filters + */ clear(): void; + /** + * Converts the filter manager to a string + */ toString(): string; } declare namespace Filter { From 540004d7350b9d3208a7a4389fe1c223a5921ca7 Mon Sep 17 00:00:00 2001 From: jiricekcz <36630605+jiricekcz@users.noreply.github.com> Date: Wed, 6 Jan 2021 22:07:37 +0100 Subject: [PATCH 12/17] canvasio.round doc --- src/index.d.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/index.d.ts b/src/index.d.ts index 34a071f..a6ddd42 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -843,6 +843,13 @@ declare namespace canvasio { type: "sepia"; } } + /** + * Rounds a number with the library's rounding constants + * @param x Number to round + * @param type Rounding type + * @example + * canvasio.round(1 / 3, "coordinate"); // Rounds the 1 / 3 in the coordinate mode + */ declare function round(x: number, type: "coordinate" | "angle" = "coordinate"): number; declare class Image { constructor(image: HTMLImageElement | SVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas); From b4b346b91827fb5b363e3b9b9569bc720f0461d8 Mon Sep 17 00:00:00 2001 From: jiricekcz <36630605+jiricekcz@users.noreply.github.com> Date: Wed, 6 Jan 2021 22:16:22 +0100 Subject: [PATCH 13/17] canvasio.Image doc --- src/index.d.ts | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/src/index.d.ts b/src/index.d.ts index a6ddd42..0cfb1ea 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -851,13 +851,59 @@ declare namespace canvasio { * canvasio.round(1 / 3, "coordinate"); // Rounds the 1 / 3 in the coordinate mode */ declare function round(x: number, type: "coordinate" | "angle" = "coordinate"): number; + /** + * The canvasio.Image class represents and image you can draw onto a canvas using the canvasio.Canvas.drawImage() function + */ declare class Image { + /** + * @param image The image source + * @example + * const image = new canvasio.Image(document.getElementById("myImage")); + */ constructor(image: HTMLImageElement | SVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas); + /** + * The image source object + */ image: HTMLImageElement | SVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas; + /** + * Gets an image from a url source + * @param url The url of the image + * @example + * const image = canvasio.Image.fromUrl("./assets/icon.png"); // Loads the image form ./assets/icon.png + */ static fromUrl(url: string): Image; + /** + * Creates an image form the ImageData object + * @param imageData The image data + */ static fromImageData(imageData: ImageData): Image; + /** + * Resizes the image. This function can deform the image + * @param width The new width of the image + * @param height The new height of the image + * @example + * const image = canvasio.Image.fromUrl("./assets/icon.png"); // Loads the image form ./assets/icon.png + * + * image.resize(128, 128); // Resizes the image to 128x128 pixels + */ resize(width: number, height: number): void; + /** + * Crops the image + * @param rectangle The rectangle represents the new crop area + * @example + * const image = canvasio.Image.fromUrl("./assets/icon.png"); // Loads the image + * + * image.crop({ + * x: 0, + * y: 0, + * width: 128, + * height: 128 + * }); // Crops the image to 128x128 pixels + */ crop(rectangle: Rectangle): void; + /** + * Gets the method used to draw this image onto the canvas. This method is not intended for direct use. + */ getDrawType(): "normal" | "resize" | "crop"; } declare class LineDashPattern extends Array { From 1c79bbe2663beaf457032962e423727c1119ae38 Mon Sep 17 00:00:00 2001 From: jiricekcz <36630605+jiricekcz@users.noreply.github.com> Date: Wed, 6 Jan 2021 22:27:08 +0100 Subject: [PATCH 14/17] doc --- src/index.d.ts | 89 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 89 insertions(+) diff --git a/src/index.d.ts b/src/index.d.ts index 0cfb1ea..b0a1040 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -906,13 +906,42 @@ declare namespace canvasio { */ getDrawType(): "normal" | "resize" | "crop"; } + /** + * A simple class representing a line dash pattern + */ declare class LineDashPattern extends Array { constructor(pattern: Array) } + /** + * Class representing a path, that can be directly drawn onto the canvas + */ declare class Path extends Path2D { + /** + * + * @param canvas The canvas to which the path should be drawn to + */ constructor(canvas: Canvas); + /** + * The canvas + */ canvas: Canvas; + /** + * Fills the path + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * const path = canvas.createPath(); // Creates the path + * // Do something with the path + * path.fill(); // Fills the path + */ fill(): void; + /** + * Draws the path + * @example + * const canvas = new canvasio.Canvas({ preset: "fullscreen" }); + * const path = canvas.createPath(); // Creates the path + * // Do something with the path + * path.draw(); // Draws the path + */ draw(): void; } declare interface dropShadowValues extends Array { @@ -922,30 +951,90 @@ declare namespace canvasio { 3: string; length: 4; } + /** + * Universal interface for any object from the Geometry library + */ declare interface GeometryObject { } + /** + * Interface for a rectangle + */ declare interface Rectangle { + /** + * The X coordinate of the upper left corner of the rectangle + */ x: number; + /** + * The Y coordinate of the upper left corner of the rectangle + */ y: number; + /** + * Width of the rectangle + */ width: number; + /** + * Height of the rectangle + */ height: number; } + /** + * Interface for a point + */ declare interface Point { + /** + * The X coordinate of the point + */ x: number; + /** + * The Y coordinate of the point + */ y: number; } + /** + * Options for the constructor of the canvasio.Canvas class + */ declare interface CanvasConstructorOptions { + /** + * Width of the canvas + */ width?: number, + /** + * Height of the canvas + */ height?: number, + /** + * The parent HTML element of the canvas + */ container?: HTMLElement, + /** + * Preset used when creating a canvas. If a preset is specified, all other options will be ignored. + */ preset?: "fullscreen" | "small" | "math" } + /** + * Options for the transformation of a canvas. + */ declare interface CanvasTransformOptions { + /** + * The amount by which the zero point should be moved on the X axis + */ x?: number; + /** + * The amount by which the zero point should be moved on the Y axis + */ y?: number; + /** + * The scale factor for the X axis + */ xScale?: number; + /** + * The scale factor for the Y axis + */ yScale?: number; + /** + * The rotation amount + */ rotation?: number; } } From f7ec3edcad44d49f9e662ee39d6f4debd630a517 Mon Sep 17 00:00:00 2001 From: jiricekcz <36630605+jiricekcz@users.noreply.github.com> Date: Wed, 6 Jan 2021 23:14:19 +0100 Subject: [PATCH 15/17] index.d.ts finished --- src/index.d.ts | 128 ++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 127 insertions(+), 1 deletion(-) diff --git a/src/index.d.ts b/src/index.d.ts index b0a1040..a9b9dce 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -777,34 +777,106 @@ declare namespace canvasio { */ toString(): string; } + /** + * Namespace conatining all the filters + */ declare namespace Filter { + /** + * The base filter extended by other filters + */ declare class Base { + /** + * + * @param type The type of the filter + * @param value The value of the filter + */ constructor(type: string, value: number); + /** + * Type of the filter + */ type: "url" | "blur" | "brightness" | "contrast" | "dropShadow" | "Grayscale" | "hue-rotate" | "invert" | "opacity" | "saturate" | "sepia"; + /** + * The value of the filter + */ value: number; + /** + * Unit the filter uses + */ unit: string; + /** + * Converts the filter to a string + */ + toString(): string; } + /** + * A filter that modifies the blur + */ declare class Blur extends Base { + /** + * + * @param radius Radius of the blur + * @example + * var filter = new canvasio.Filter.Blur(2); // Creates a blur filter + */ constructor(radius: number); unit: "px"; type: "blur"; } + /** + * An SVG filter from a url + */ declare class Url extends Base { + /** + * + * @param url The url of the filter + * @example + * var filter = new canvasio.Filter.Url("./filter/filter1.svg"); // Creates the url filter + */ constructor(url: string); - unit: "px"; + unit: ""; type: "url"; } + /** + * A filter that modifies the brightness + */ declare class Brightness extends Base { + /** + * + * @param intensity The intensity of the brightness filter + * @example + * var filter = new canvasio.Filter.Brightness(0.5); // Creates a brightness filter with intensity 50 % + */ constructor(intensity: number); unit: "%"; type: "brightness"; } + /** + * A filter that modifies the contrast + */ declare class Contrast extends Base { + /** + * + * @param intensity Intensity of the contrast filter + * @example + * var filter = new canvasio.Filter.Contrast(0.5); // Create a contrast filter with intensity 50 % + */ constructor(intensity: number); unit: "%"; type: "contrast"; } + /** + * Filter that modifies the drop of shadow + */ declare class DropShadow extends Base { + /** + * + * @param xOffset The offset of the shadow on the x axis + * @param yOffset The offset of the shadow on the y axis + * @param blurRadius The blur radius of the shadow + * @param color The color of the shadow + * @example + * var filter = new canvasio.Filter.DropShadow(10, 10, 2, "#fff"); // Create a drop shadow filter + */ constructor(xOffset: number, yOffset: number, blurRadius: number, color: string); value: undefined; type: "drop-shadow"; @@ -812,32 +884,86 @@ declare namespace canvasio { units: ["px", "px", "", ""]; toString(): string; } + /** + * Filter that turns the canvas grayscale + */ declare class Grayscale extends Base { + /** + * + * @param intensity The intensity of the grayscale filter + * @example + * var filter = new canvasio.Filter.Grayscale(1); // Create a grayscale filter + */ constructor(intensity: number); unit: "%"; type: "grayscale"; } + /** + * Filter that rotates the hue value of all colors by an angle + */ declare class HueRotate extends Base { + /** + * + * @param angle The angle of rotation in radians + * @example + * var filter = new canvasio.Filter.HueRotate(Math.PI / 2); // Rotates the hue by 90 degrees + */ constructor(angle: number); unit: "deg"; type: "hue-rotate"; } + /** + * Filter that inverts + */ declare class Invert extends Base { + /** + * + * @param intensity The intensity of the invert filter + * @example + * var filter = new canvasio.Filter.Invert(0.5); // Create an invert filter with intensity 50 % + */ constructor(intensity: number); unit: "%"; type: "invert"; } + /** + * Opacity filter. Similar to canvasio.Canvas.setGlobalAlpha() + */ declare class Opacity extends Base { + /** + * + * @param intensity The intensity of the opacity filter + * @example + * var filter = new canvasio.Filter.Opacity(0.5); // Create an opacity filter with intensity 50 %, thus all objects will be drawn half transparent. + */ constructor(intensity: number); unit: "%"; type: "opacity"; } + /** + * Saturaion filter + */ declare class Saturation extends Base { + /** + * + * @param intensity The intensity of the saturation change + * @example + * var filter = new canvasio.Filter.Saturation(0.5); // Create a saturation filter with intensity 50 % + */ constructor(intensity: number); unit: "%"; type: "saturation"; } + /** + * Filter that does the sepia effect + */ declare class Sepia extends Base { + /** + * + * @param intensity Intensity of the sepia effect + * @example + * var filter = new canvasio.Filter.Sepia(0.5); // Create a filter with the sepia effect of intensity 50 % + */ constructor(intensity: number); unit: "%"; type: "sepia"; From 9954363cf6b4aca42d90283e83fabebbc1b4b0dc Mon Sep 17 00:00:00 2001 From: jiricekcz <36630605+jiricekcz@users.noreply.github.com> Date: Wed, 6 Jan 2021 23:15:51 +0100 Subject: [PATCH 16/17] delete tooltips for intersect functions --- src/geometry.d.ts | 135 +--------------------------------------------- 1 file changed, 1 insertion(+), 134 deletions(-) diff --git a/src/geometry.d.ts b/src/geometry.d.ts index d60c964..f9fee3d 100644 --- a/src/geometry.d.ts +++ b/src/geometry.d.ts @@ -82,146 +82,13 @@ declare namespace Geometry { * console.log(polygon.toString()); // Expected output is Polygon: ([-100, 0], [0, -100], [100, 0]) */ toString(): string; - - /** - * This function determines whether or not this polygon intersects a point. - * @param point The point - * @example - * const polygon = new Geometry.Polygon([ - * new Geometry.Point(-100, 0), - * new Geometry.Point(0,-100), - * new Geometry.Point(100, 0), - * ]); - * - * console.log(polygon.intersects(new Geometry.Point(0, 0))); // Expected output is true - * console.log(polygon.intersects(new Geometry.Point(0, -50))); // Expected output is false - */ + intersects(point: Point): boolean; - /** - * This function determines whether or not this polygon intersects a ray. - * @param ray The ray - * @example - * const polygon = new Geometry.Polygon([ - * new Geometry.Point(-100, 0), - * new Geometry.Point(0,-100), - * new Geometry.Point(100, 0), - * ]); - * - * console.log(polygon.intersects(new Geometry.Ray( - * new Geometry.Point(100,100), - * new Geometry.Point(-100,-100) - * ))); // Expected output is true - * console.log(polygon.intersects(new Geometry.Ray( - * new Geometry.Point(200, 200), - * new Geometry.Point(300, 300) - * ))); // Expected output is false - */ intersects(ray: Ray): boolean; - /** - * This function determines whether or not this polygon intersects a segment. - * @param segment The segment - * @example - * const polygon = new Geometry.Polygon([ - * new Geometry.Point(-100, 0), - * new Geometry.Point(0,-100), - * new Geometry.Point(100, 0), - * ]); - * - * console.log(polygon.intersects(new Geometry.Segment( - * new Geometry.Point(100,100), - * new Geometry.Point(-100,-100) - * ))); // Expected output is true - * console.log(polygon.intersects(new Geometry.Segment( - * new Geometry.Point(200, 200), - * new Geometry.Point(300, 300) - * ))); // Expected output is false - */ intersects(segment: Segment): boolean; - /** - * This function determines whether or not this polygon intersects a line. - * @param line The line - * @example - * const polygon = new Geometry.Polygon([ - * new Geometry.Point(-100, 0), - * new Geometry.Point(0,-100), - * new Geometry.Point(100, 0), - * ]); - * - * console.log(polygon.intersects(new Geometry.Line( - * new Geometry.Point(100,100), - * new Geometry.Point(-100,-100) - * ))); // Expected output is true - * console.log(polygon.intersects(new Geometry.Line( - * new Geometry.Point(200, 200), - * new Geometry.Point(300, 200) - * ))); // Expected output is false - */ intersects(line: Line): boolean; - /** - * This function determines whether or not this polygon intersects a circle. - * @param circle The circle - * @example - * const polygon = new Geometry.Polygon([ - * new Geometry.Point(-100, 0), - * new Geometry.Point(0,-100), - * new Geometry.Point(100, 0), - * ]); - * - * console.log(polygon.intersects(new Geometry.Circle( - * new Geometry.Point(100,100), - * 150 - * ))); // Expected output is true - * console.log(polygon.intersects(new Geometry.Circle( - * new Geometry.Point(200, 200), - * 10 - * ))); // Expected output is false - */ intersects(circle: Circle): boolean; - /** - * This function determines whether or not this polygon intersects a polygon. - * @param polygon The polygon - * @example - * const polygon = new Geometry.Polygon([ - * new Geometry.Point(-100, 0), - * new Geometry.Point(0,-100), - * new Geometry.Point(100, 0), - * ]); - * - * console.log(polygon.intersects(new Geometry.Polygon([ - * new Geometry.Point(0,100), - * new Geometry.Point(0,-100), - * new Geometry.Point(100, -100), - * new Geometry.Point(100, 100) - * )])); // Expected output is true - * console.log(polygon.intersects(new Geometry.Polygon([ - * new Geometry.Point(200, 200), - * new Geometry.Point(300, 200) - * new Geometry.Point(300, 300) - * )])); // Expected output is false - */ intersects(polygon: Polygon): boolean; - /** - * This function determines whether or not this polygon intersects a triangle. - * @param triangle The triangle - * @example - * const polygon = new Geometry.Polygon([ - * new Geometry.Point(-100, 0), - * new Geometry.Point(0,-100), - * new Geometry.Point(100, 0), - * ]); - * - * console.log(polygon.intersects(new Geometry.Triangle( - * new Geometry.Point(0,100), - * new Geometry.Point(0,-100), - * new Geometry.Point(100, -100), - * new Geometry.Point(100, 100) - * ))); // Expected output is true - * console.log(polygon.intersects(new Geometry.Triangle( - * new Geometry.Point(200, 200), - * new Geometry.Point(300, 200) - * new Geometry.Point(300, 300) - * ))); // Expected output is false - */ intersects(triangle: Triangle): boolean; getIntersect(point: Point): Point | null; getIntersect(ray: Ray): Array | Segment | Point | null; From 24b93f49cee91a04317fd3dffce6cbd31daeaaff Mon Sep 17 00:00:00 2001 From: jiricekcz <36630605+jiricekcz@users.noreply.github.com> Date: Wed, 6 Jan 2021 23:50:54 +0100 Subject: [PATCH 17/17] doc --- src/geometry.d.ts | 438 ++++++++++++++++++++++++++++++++++++---------- src/geometry.js | 6 +- 2 files changed, 346 insertions(+), 98 deletions(-) diff --git a/src/geometry.d.ts b/src/geometry.d.ts index f9fee3d..6f44d29 100644 --- a/src/geometry.d.ts +++ b/src/geometry.d.ts @@ -82,7 +82,7 @@ declare namespace Geometry { * console.log(polygon.toString()); // Expected output is Polygon: ([-100, 0], [0, -100], [100, 0]) */ toString(): string; - + intersects(point: Point): boolean; intersects(ray: Ray): boolean; intersects(segment: Segment): boolean; @@ -98,177 +98,425 @@ declare namespace Geometry { getIntersect(polygon: Polygon): Polygon | Array | Segment | Point | null; getIntersect(triangle: Triangle): Polygon | Triangle | Array | Segment | Point | null; } - + /** + * The Geometry.Line class represents a line + */ declare class Line extends Base { + /** + * Constructs a line from two points + * @param point1 One point of the line + * @param point2 Second point of the line + * @example + * var line = new Geometry.Line( + * new Geometry.Point(100, 0), + * new Geometry.Point(0, 100) + * ); // Creates a line + */ constructor(point1: Point, point2: Point); + /** + * One of the points that define the line + */ a: Point; + /** + * One of the points that define the line + */ b: Point; + /** + * Returns the y coordinate of this line in point with a given x coordinate + * @param x The x value + */ y(x: number): number; + /** + * Returns the x coordinate of this line in point with a given y coordinate + * @param y The y value + */ x(y: number): number; + /** + * Returns the polynomial expression of this line + */ getLinePolynom(): Polynom; + /** + * Returns the string representation of this line + */ toString(): string; + /** + * Creates a perpendicular line, o which a point lays + * @param point Point that lays on the perpendicular line + */ getPerpendicular(point: Point): Line; + /** + * Creates a parallel line, o which a point lays + * @param point Point that lays on the parallel line + */ getParallel(point: Point): Line; + /** + * Calculates the distance between a point and this line + * @param point The point + */ distance(point: Point): number; - intersects(object: Point): boolean; - intersects(object: Ray): boolean; - intersects(object: Segment): boolean; - intersects(object: Line): boolean; - intersects(object: Circle): boolean; - intersects(object: Polygon): boolean; - intersects(object: Triangle): boolean; - getIntersect(object: Point): Point | null; - getIntersect(object: Ray): Ray | Point | null; - getIntersect(object: Segment): Segment | Point | null; - getIntersect(object: Line): Line | Point | null; - getIntersect(object: Circle): [Point, Point] | Point | null; - getIntersect(object: Polygon): Array | Segment | Point | null; - getIntersect(object: Triangle): [Point, Point] | Segment | Point | null; + intersects(point: Point): boolean; + intersects(ray: Ray): boolean; + intersects(segment: Segment): boolean; + intersects(line: Line): boolean; + intersects(circle: Circle): boolean; + intersects(polygon: Polygon): boolean; + intersects(triangle: Triangle): boolean; + getIntersect(point: Point): Point | null; + getIntersect(ray: Ray): Ray | Point | null; + getIntersect(segment: Segment): Segment | Point | null; + getIntersect(line: Line): Line | Point | null; + getIntersect(circle: Circle): [Point, Point] | Point | null; + getIntersect(polygon: Polygon): Array | Segment | Point | null; + getIntersect(triangle: Triangle): [Point, Point] | Segment | Point | null; } - + /** + * The Geometry.Point class represents a point + */ declare class Point extends Base { + /** + * Creates a point from the x and y coordinates + * @param x The X coordinate + * @param y The Y coordinate + * @example + * var point = new Geometry.Point(0, 0); // Create a point + */ constructor(x: number, y: number); + /** + * The X coordinate + */ x: number; + /** + * The Y coordinate + */ y: number; + /** + * Returns the distance from the zero point [0, 0] + */ absolute(): number; + /** + * Returns a string representation of this point in the form [x, y] + */ toString(): string; + /** + * Returns an array representation of this point in the form [x, y] + */ toArray(): PointArrayForm; + /** + * Returns the distance between this point and another point + * @param point The second point + */ distance(point: Point): number; + /** + * Returns the distance between this point and a line + * @param line The line + */ distance(line: Line): number; + /** + * Reflects this point about another point and returns the new reflected point + * @param point Point to reflect about + */ reflectAbout(point: Point): Point; + /** + * Reflects this point about a line and returns the new reflected point + * @param line Line to reflect about + */ reflectAbout(line: Line): Point; + /** + * Creates a point from a string representation of it + * @param string Point in a string form [x, y] + */ static fromString(string: string): Point; - intersects(object: Point): boolean; - intersects(object: Ray): boolean; - intersects(object: Segment): boolean; - intersects(object: Line): boolean; - intersects(object: Circle): boolean; - intersects(object: Polygon): boolean; - intersects(object: Triangle): boolean; - getIntersect(object: Point): Point | null; - getIntersect(object: Ray): Point | null; - getIntersect(object: Segment): Point | null; - getIntersect(object: Line): Point | null; - getIntersect(object: Circle): Point | null; - getIntersect(object: Polygon): Point | null; - getIntersect(object: Triangle): Point | null; + intersects(point: Point): boolean; + intersects(ray: Ray): boolean; + intersects(segment: Segment): boolean; + intersects(line: Line): boolean; + intersects(circle: Circle): boolean; + intersects(polygon: Polygon): boolean; + intersects(triangle: Triangle): boolean; + getIntersect(point: Point): Point | null; + getIntersect(ray: Ray): Point | null; + getIntersect(segment: Segment): Point | null; + getIntersect(line: Line): Point | null; + getIntersect(circle: Circle): Point | null; + getIntersect(polygon: Polygon): Point | null; + getIntersect(triangle: Triangle): Point | null; } - + /** + * The Geometry.Polynom class represents a polynom + */ declare class Polynom { - constructor(...coefficients: number); + /** + * Creates a polynom from its coefficients + * @param coefficients the coefficients of the polynom + * @example + * var polynom = new Geometry.Polynom(1, 0, 0); // Creates the x^2 polynom + */ + constructor(...coefficients: Array); + /** + * The degree of this polynom + */ degree: number; + /** + * Array of coefficients of the polynom + */ coefficients: Array; + /** + * Returns the value of this polynom at a given point + * @param x The x value + */ valueAt(x: number): number; - getAbsoluleCoefficient(): number; + /** + * Returns the absolute coefficient of this polynom + */ + getAbsoluteCoefficient(): number; + /** + * Returns the linear coefficient of this polynom + */ getLinearCoefficient(): number; + /** + * Returns the quadratic coefficient of this polynom + */ getQuadraticCoefficient(): number; - getQuadraticCoefficient(): number; + /** + * Returns the cubic coefficient of this polynom + */ + getCubicCoefficient(): number; } - + /** + * The Geometry.Ray class represents a ray + */ declare class Ray extends Base { + /** + * Creates a ray from two points + * @param endPoint The end point of the ray + * @param point2 Another point describing the rays direction + * @example + * var ray = new Ray( + * new Geometry.Point(0, 0), + * new Geometry.Point(100, 100) + * ); // Creates a ray from the zero point in the direction of the [100, 100] point + */ constructor(endPoint: Point, point2: Point); + /** + * The end point of the ray + */ a: Point; + /** + * The secondary point of the ray + */ b: Point; + /** + * Returns the Y coordinate of a point that lays on this ray with the x coordinate specified + * @param x The X value + */ y(x: number): number; + /** + * Returns the X coordinate of a point that lies on this ray with the y coordinate specified + * @param y The Y value + */ x(y: number): number; + /** + * Returns a line this segment lays on + */ getLine(): Line; + /** + * Returns a string representation of this ray + */ toString(): string; - intersects(object: Point): boolean; - intersects(object: Ray): boolean; - intersects(object: Segment): boolean; - intersects(object: Line): boolean; - intersects(object: Circle): boolean; - intersects(object: Polygon): boolean; - intersects(object: Triangle): boolean; - getIntersect(object: Point): Point | null; - getIntersect(object: Ray): Ray | Segment | Point | null; - getIntersect(object: Segment): Segment | Point | null; - getIntersect(object: Line): Ray | Point | null; - getIntersect(object: Circle): [Point, Point] | Point | null; - getIntersect(object: Polygon): Array | Segment | Point | null; - getIntersect(object: Triangle): [Point, Point] | Segment | Point | null; + intersects(point: Point): boolean; + intersects(ray: Ray): boolean; + intersects(segment: Segment): boolean; + intersects(line: Line): boolean; + intersects(circle: Circle): boolean; + intersects(polygon: Polygon): boolean; + intersects(triangle: Triangle): boolean; + getIntersect(point: Point): Point | null; + getIntersect(ray: Ray): Ray | Segment | Point | null; + getIntersect(segment: Segment): Segment | Point | null; + getIntersect(line: Line): Ray | Point | null; + getIntersect(circle: Circle): [Point, Point] | Point | null; + getIntersect(polygon: Polygon): Array | Segment | Point | null; + getIntersect(triangle: Triangle): [Point, Point] | Segment | Point | null; } - + /** + * The Geometry.Segment class represents a segment + */ declare class Segment extends Base { + /** + * Creates a segment from two points + * @param point1 One end of the segment + * @param point2 Second end of the segment + * @example + * var segment = new Geometry.Segment( + * new Geometry.Point(0, 0), + * new Geometry.Point(100, 100) + * ); // Creates a segment between two points + */ constructor(point1: Point, point2: Point); + /** + * One of the point of the segment + */ a: Point; + /** + * One of the point of the segment + */ b: Point; + /** + * Returns the Y coordinate of a point that lays on this segment with the x coordinate specified + * @param x The X value + */ y(x: number): number; + /** + * Returns the X coordinate of a point that lies on this segment with the y coordinate specified + * @param y The Y value + */ x(y: number): number; + /** + * Returns a string representation of this segment + */ toStings(): string; + /** + * Returns a line this segment lays on + */ getLine(): Line; + /** + * Returns the length of this segment + */ length(): number; + /** + * Joins this segment with another segment and returns the resulting segment + * @param segment Another segment + */ join(segment: Segment): Segment; - intersects(object: Point): boolean; - intersects(object: Ray): boolean; - intersects(object: Segment): boolean; - intersects(object: Line): boolean; - intersects(object: Circle): boolean; - intersects(object: Polygon): boolean; - intersects(object: Triangle): boolean; - getIntersect(object: Point): Point | null; - getIntersect(object: Ray): Segment | Point | nulll; - getIntersect(object: Segment): Segment | Point | null; - getIntersect(object: Line): Segment | Point | null; - getIntersect(object: Circle): [Point, Point] | Point | null; - getIntersect(object: Polygon): Array | Segment | Point | null; - getIntersect(object: Triangle): [Point, Point] | Segment | Point | null; + intersects(point: Point): boolean; + intersects(ray: Ray): boolean; + intersects(segment: Segment): boolean; + intersects(line: Line): boolean; + intersects(circle: Circle): boolean; + intersects(polygon: Polygon): boolean; + intersects(triangle: Triangle): boolean; + getIntersect(point: Point): Point | null; + getIntersect(ray: Ray): Segment | Point | nulll; + getIntersect(segment: Segment): Segment | Point | null; + getIntersect(line: Line): Segment | Point | null; + getIntersect(circle: Circle): [Point, Point] | Point | null; + getIntersect(polygon: Polygon): Array | Segment | Point | null; + getIntersect(triangle: Triangle): [Point, Point] | Segment | Point | null; } - + /** + * The Geometry.Circle class represents a circle + */ declare class Circle extends Base { + /** + * Creates a circle from a center point and a radius + * @param center Center point of the circle + * @param radius Radius of the circle + * @example + * var circle = new Geometry.Circle(new Geometry.Point(0, 0), 100); // Creates a circle with radius 100 + */ constructor(center: Point, radius: number); + /** + * The radius of the circle + */ r: number; + /** + * The center point of the circle + */ center: Point; + /** + * The circumference of the circle + */ length(): number; + /** + * Returns a string representation of this circle + */ toStings(): string; - intersects(object: Point): boolean; - intersects(object: Ray): boolean; - intersects(object: Segment): boolean; - intersects(object: Line): boolean; - intersects(object: Circle): boolean; - intersects(object: Polygon): boolean; - intersects(object: Triangle): boolean; - getIntersect(object: Point): Point | null; - getIntersect(object: Ray): [Point, Point] | Point | null; - getIntersect(object: Segment): [Point, Point] | Point | null; - getIntersect(object: Line): [Point, Point] | Point | nulll; - getIntersect(object: Circle): Circle | [Point, Point] | Point | null; - getIntersect(object: Polygon): [Point, Point] | Point | null - getIntersect(object: Triangle): [Point, Point] | Point | null; + intersects(point: Point): boolean; + intersects(ray: Ray): boolean; + intersects(segment: Segment): boolean; + intersects(line: Line): boolean; + intersects(circle: Circle): boolean; + intersects(polygon: Polygon): boolean; + intersects(triangle: Triangle): boolean; + getIntersect(point: Point): Point | null; + getIntersect(ray: Ray): [Point, Point] | Point | null; + getIntersect(segment: Segment): [Point, Point] | Point | null; + getIntersect(line: Line): [Point, Point] | Point | nulll; + getIntersect(circle: Circle): Circle | [Point, Point] | Point | null; + getIntersect(polygon: Polygon): [Point, Point] | Point | null + getIntersect(triangle: Triangle): [Point, Point] | Point | null; } - + /** + * The Geometry.Triangle class represents a Triangle + */ declare class Triangle extends Base { + /** + * Creates a triangle from three points. + * @param a One vertex of the Triangle + * @param b Second vertex of the Triangle + * @param c Third vertex of the Triangle + */ constructor(a: Point, b: Point, c: Point); + /** + * One vertex of the Triangle + */ A: Point; + /** + * One vertex of the Triangle + */ B: Point; + /** + * One vertex of the Triangle + */ C: Point; + /** + * One edge of the Triangle + */ a: Segment; + /** + * One edge of the Triangle + */ b: Segment; + /** + * One edge of the Triangle + */ c: Segment; + /** + * Returns the size of the angle BAC + */ getAlpha(): number; + /** + * Returns the size of the angle CBA + */ getBeta(): number; + /** + * Returns the size of the angle ACB + */ getGamma(): number; + /** + * Returns a string representation of this Triangle + */ toString(): string; - intersects(object: Point): boolean; - intersects(object: Ray): boolean; - intersects(object: Segment): boolean; - intersects(object: Line): boolean; - intersects(object: Circle): boolean; - intersects(object: Polygon): boolean; - intersects(object: Triangle): boolean; - getIntersect(object: Point): Point | null; - getIntersect(object: Ray): [Point, Point] | Segment | Point | null; - getIntersect(object: Segment): [Point, Point] | Segment | Point | null; - getIntersect(object: Line): [Point, Point] | Segment | Point | null; - getIntersect(object: Circle): Array | Point | null; - getIntersect(object: Polygon): Polygon | Triangle | Array | Segment | Point | null; - getIntersect(object: Triangle): Triangle | Array | Segment | Point | null; + intersects(point: Point): boolean; + intersects(ray: Ray): boolean; + intersects(segment: Segment): boolean; + intersects(line: Line): boolean; + intersects(circle: Circle): boolean; + intersects(polygon: Polygon): boolean; + intersects(triangle: Triangle): boolean; + getIntersect(point: Point): Point | null; + getIntersect(ray: Ray): [Point, Point] | Segment | Point | null; + getIntersect(segment: Segment): [Point, Point] | Segment | Point | null; + getIntersect(line: Line): [Point, Point] | Segment | Point | null; + getIntersect(circle: Circle): Array | Point | null; + getIntersect(polygon: Polygon): Polygon | Triangle | Array | Segment | Point | null; + getIntersect(triangle: Triangle): Triangle | Array | Segment | Point | null; } /** * The Geometry.Drawer object manages the interaction between the Geometry library and the canvasio library. It is used to draw geometry objects onto the canvas. This class is in usual cases only used internaly diff --git a/src/geometry.js b/src/geometry.js index 73c46ee..782d90b 100644 --- a/src/geometry.js +++ b/src/geometry.js @@ -91,9 +91,9 @@ const intersectFunctions = { } if (line2.a.x == line2.b.x) return new Point(line2.a.x, line.y(line2.a.x)); var a1 = line.getLinePolynom().getLinearCoefficient(); - var b1 = line.getLinePolynom().getAbsoluleCoefficient(); + var b1 = line.getLinePolynom().getAbsoluteCoefficient(); var a2 = line2.getLinePolynom().getLinearCoefficient(); - var b2 = line2.getLinePolynom().getAbsoluleCoefficient(); + var b2 = line2.getLinePolynom().getAbsoluteCoefficient(); if (a1 === a2) { if (b1 === b2) { return line; @@ -841,7 +841,7 @@ export class Polynom { * @description Gets the absolute coefficient of this polynom * @returns {Number} */ - getAbsoluleCoefficient() { + getAbsoluteCoefficient() { return this.coefficients[0]; } /**