Mathematical utilities for 2D geometry operations, transformations, and calculations. X6's geometry system provides comprehensive support for points, lines, rectangles, paths, and other geometric operations essential for graph layout and interaction.
2D point representation with transformation and calculation utilities.
/**
* 2D point class with coordinate operations
* @param x - X coordinate (default: 0)
* @param y - Y coordinate (default: 0)
*/
class Point {
constructor(x?: number, y?: number);
// Properties
x: number;
y: number;
// Transformation methods
/**
* Translate point by offset
* @param dx - X offset
* @param dy - Y offset
* @returns This point for chaining
*/
translate(dx: number, dy: number): this;
/**
* Rotate point around origin or specified center
* @param angle - Rotation angle in degrees
* @param origin - Center of rotation (default: origin)
* @returns This point for chaining
*/
rotate(angle: number, origin?: Point): this;
/**
* Scale point from origin or specified center
* @param sx - X scale factor
* @param sy - Y scale factor (default: sx)
* @param origin - Center of scaling (default: origin)
* @returns This point for chaining
*/
scale(sx: number, sy?: number, origin?: Point): this;
/**
* Reflect point across line defined by two points
* @param p1 - First point of reflection line
* @param p2 - Second point of reflection line
* @returns This point for chaining
*/
reflect(p1: Point, p2: Point): this;
// Calculation methods
/**
* Calculate distance to another point
* @param point - Target point
* @returns Distance value
*/
distance(point: Point): number;
/**
* Calculate squared distance (faster than distance)
* @param point - Target point
* @returns Squared distance value
*/
squaredDistance(point: Point): number;
/**
* Calculate Manhattan distance to another point
* @param point - Target point
* @returns Manhattan distance
*/
manhattanDistance(point: Point): number;
/**
* Get magnitude (length from origin)
* @returns Magnitude value
*/
magnitude(): number;
/**
* Calculate angle to another point in degrees
* @param point - Target point
* @returns Angle in degrees
*/
theta(point: Point): number;
/**
* Calculate angle from origin in degrees
* @returns Angle in degrees
*/
angle(): number;
/**
* Calculate bearing to another point
* @param point - Target point
* @returns Bearing in degrees
*/
bearing(point: Point): number;
// Vector operations
/**
* Calculate dot product with another point
* @param point - Other point/vector
* @returns Dot product value
*/
dot(point: Point): number;
/**
* Calculate cross product with another point
* @param point - Other point/vector
* @returns Cross product value
*/
cross(point: Point): number;
/**
* Normalize point to unit vector
* @returns This point for chaining
*/
normalize(): this;
/**
* Move point towards target by specified distance
* @param target - Target point
* @param distance - Distance to move
* @returns This point for chaining
*/
move(target: Point, distance: number): this;
// Utility methods
/**
* Check equality with another point
* @param point - Point to compare
* @param precision - Precision for comparison (default: 3)
* @returns True if points are equal
*/
equals(point: Point, precision?: number): boolean;
/**
* Create copy of this point
* @returns New point instance
*/
clone(): Point;
/**
* Convert to JSON representation
* @returns Point data object
*/
toJSON(): Point.PointData;
/**
* Convert to string representation
* @returns String representation
*/
toString(): string;
// Static utility methods
/**
* Create point from polar coordinates
* @param distance - Distance from origin
* @param angle - Angle in degrees
* @param origin - Origin point (default: 0,0)
* @returns New point instance
*/
static fromPolar(distance: number, angle: number, origin?: Point): Point;
/**
* Create random point within bounds
* @param x1 - Min X coordinate
* @param y1 - Min Y coordinate
* @param x2 - Max X coordinate
* @param y2 - Max Y coordinate
* @returns Random point
*/
static random(x1: number, y1: number, x2: number, y2: number): Point;
}
// Point type interfaces
interface Point.PointLike {
x: number;
y: number;
}
interface Point.PointData {
x: number;
y: number;
}Usage Examples:
import { Point } from "@antv/x6";
// Create and manipulate points
const p1 = new Point(100, 200);
const p2 = new Point(300, 400);
// Transform operations
p1.translate(50, -25); // Move by offset
p1.rotate(45); // Rotate 45 degrees around origin
p1.scale(1.5, 2); // Scale by 1.5x horizontally, 2x vertically
// Calculate distances and angles
const distance = p1.distance(p2);
const angle = p1.theta(p2);
const magnitude = p1.magnitude();
// Vector operations
const dotProduct = p1.dot(p2);
const crossProduct = p1.cross(p2);
// Create point from polar coordinates
const polarPoint = Point.fromPolar(100, 45); // 100 units at 45 degrees
// Chaining operations
const result = new Point(0, 0)
.translate(100, 100)
.rotate(30)
.scale(1.2);Rectangle representation with position, dimensions, and geometric operations.
/**
* Rectangle class with position and dimension operations
* @param x - X coordinate (default: 0)
* @param y - Y coordinate (default: 0)
* @param width - Width (default: 0)
* @param height - Height (default: 0)
*/
class Rectangle {
constructor(x?: number, y?: number, width?: number, height?: number);
// Properties
x: number;
y: number;
width: number;
height: number;
// Computed properties
get center(): Point;
get topLeft(): Point;
get topCenter(): Point;
get topRight(): Point;
get bottomLeft(): Point;
get bottomCenter(): Point;
get bottomRight(): Point;
get leftMiddle(): Point;
get rightMiddle(): Point;
get corner(): Point;
get origin(): Point;
// Geometric operations
/**
* Check if point is inside rectangle
* @param point - Point to test
* @returns True if point is inside
*/
containsPoint(point: Point): boolean;
/**
* Check if rectangle completely contains another rectangle
* @param rect - Rectangle to test
* @returns True if rectangle is contained
*/
containsRect(rect: Rectangle): boolean;
/**
* Check if rectangle intersects with another rectangle
* @param rect - Rectangle to test
* @returns True if rectangles intersect
*/
intersectsWithRect(rect: Rectangle): boolean;
/**
* Get intersection rectangle with another rectangle
* @param rect - Rectangle to intersect with
* @returns Intersection rectangle or null
*/
intersect(rect: Rectangle): Rectangle | null;
/**
* Get union rectangle with another rectangle
* @param rect - Rectangle to union with
* @returns Union rectangle
*/
union(rect: Rectangle): Rectangle;
// Transformation methods
/**
* Move rectangle by offset
* @param dx - X offset
* @param dy - Y offset
* @returns This rectangle for chaining
*/
translate(dx: number, dy: number): this;
/**
* Move rectangle to position
* @param x - New X coordinate
* @param y - New Y coordinate
* @returns This rectangle for chaining
*/
moveTo(x: number, y: number): this;
/**
* Resize rectangle
* @param width - New width
* @param height - New height
* @returns This rectangle for chaining
*/
resize(width: number, height: number): this;
/**
* Inflate rectangle by specified amounts
* @param dx - Horizontal inflation
* @param dy - Vertical inflation (default: dx)
* @returns This rectangle for chaining
*/
inflate(dx: number, dy?: number): this;
/**
* Scale rectangle from center
* @param sx - X scale factor
* @param sy - Y scale factor (default: sx)
* @returns This rectangle for chaining
*/
scale(sx: number, sy?: number): this;
/**
* Rotate rectangle around center
* @param angle - Rotation angle in degrees
* @param origin - Center of rotation (default: rectangle center)
* @returns New rotated rectangle
*/
rotate(angle: number, origin?: Point): Rectangle;
// Utility methods
/**
* Check equality with another rectangle
* @param rect - Rectangle to compare
* @returns True if rectangles are equal
*/
equals(rect: Rectangle): boolean;
/**
* Get rectangle area
* @returns Area value
*/
area(): number;
/**
* Check if rectangle is empty (zero area)
* @returns True if empty
*/
isEmpty(): boolean;
/**
* Round rectangle coordinates to integers
* @returns This rectangle for chaining
*/
round(): this;
/**
* Create copy of rectangle
* @returns New rectangle instance
*/
clone(): Rectangle;
/**
* Convert to JSON representation
* @returns Rectangle data object
*/
toJSON(): Rectangle.RectangleData;
/**
* Convert to string representation
* @returns String representation
*/
toString(): string;
// Static utility methods
/**
* Create rectangle from two points
* @param p1 - First point
* @param p2 - Second point
* @returns New rectangle
*/
static fromPoints(p1: Point, p2: Point): Rectangle;
/**
* Create rectangle that encloses all points
* @param points - Array of points
* @returns Bounding rectangle
*/
static fromPointArray(points: Point[]): Rectangle;
}
// Rectangle type interfaces
interface Rectangle.RectangleLike {
x: number;
y: number;
width: number;
height: number;
}
interface Rectangle.RectangleData {
x: number;
y: number;
width: number;
height: number;
}Usage Examples:
import { Rectangle, Point } from "@antv/x6";
// Create rectangle
const rect = new Rectangle(100, 150, 200, 100);
// Access corner points
const center = rect.center;
const topLeft = rect.topLeft;
const bottomRight = rect.bottomRight;
// Geometric tests
const point = new Point(150, 200);
const isInside = rect.containsPoint(point);
const other = new Rectangle(180, 180, 100, 50);
const intersects = rect.intersectsWithRect(other);
const intersection = rect.intersect(other);
const union = rect.union(other);
// Transformations
rect.translate(50, 25); // Move rectangle
rect.inflate(10, 5); // Expand by 10x5
rect.scale(1.2); // Scale by 20%
// Create from points
const points = [
new Point(50, 50),
new Point(200, 100),
new Point(150, 250)
];
const boundingRect = Rectangle.fromPointArray(points);Line segment representation with intersection and distance calculations.
/**
* Line segment class with geometric operations
* @param start - Start point
* @param end - End point
*/
class Line {
constructor(start: Point, end: Point);
// Properties
start: Point;
end: Point;
// Geometric calculations
/**
* Get line length
* @returns Length value
*/
length(): number;
/**
* Get line angle in degrees
* @returns Angle in degrees
*/
angle(): number;
/**
* Get line slope
* @returns Slope value or Infinity for vertical lines
*/
slope(): number;
/**
* Check if line is vertical
* @returns True if vertical
*/
isVertical(): boolean;
/**
* Check if line is horizontal
* @returns True if horizontal
*/
isHorizontal(): boolean;
// Point operations
/**
* Get point at parameter t (0 = start, 1 = end)
* @param t - Parameter value
* @returns Point on line
*/
pointAt(t: number): Point;
/**
* Get point at specific distance from start
* @param distance - Distance from start
* @returns Point on line
*/
pointAtLength(distance: number): Point;
/**
* Find closest point on line to given point
* @param point - Reference point
* @returns Closest point on line
*/
closestPoint(point: Point): Point;
/**
* Calculate distance from point to line
* @param point - Reference point
* @returns Distance to line
*/
distanceToPoint(point: Point): number;
/**
* Calculate squared distance from point to line
* @param point - Reference point
* @returns Squared distance to line
*/
squaredDistance(point: Point): number;
// Line intersections
/**
* Find intersection with another line
* @param line - Other line
* @returns Intersection point or null
*/
intersect(line: Line): Point | null;
/**
* Find intersection with rectangle
* @param rect - Rectangle to intersect
* @returns Array of intersection points
*/
intersectRect(rect: Rectangle): Point[];
/**
* Check if lines are parallel
* @param line - Other line
* @returns True if parallel
*/
isParallelTo(line: Line): boolean;
/**
* Check if lines are perpendicular
* @param line - Other line
* @returns True if perpendicular
*/
isPerpendicularTo(line: Line): boolean;
// Transformations
/**
* Translate line by offset
* @param dx - X offset
* @param dy - Y offset
* @returns This line for chaining
*/
translate(dx: number, dy: number): this;
/**
* Rotate line around center point
* @param angle - Rotation angle in degrees
* @param origin - Center of rotation (default: line midpoint)
* @returns This line for chaining
*/
rotate(angle: number, origin?: Point): this;
/**
* Scale line from center
* @param sx - X scale factor
* @param sy - Y scale factor (default: sx)
* @param origin - Center of scaling (default: line midpoint)
* @returns This line for chaining
*/
scale(sx: number, sy?: number, origin?: Point): this;
// Utility methods
/**
* Get line midpoint
* @returns Midpoint
*/
midpoint(): Point;
/**
* Get vector representation
* @returns Vector from start to end
*/
vector(): Point;
/**
* Check equality with another line
* @param line - Line to compare
* @returns True if lines are equal
*/
equals(line: Line): boolean;
/**
* Create copy of line
* @returns New line instance
*/
clone(): Line;
/**
* Convert to string representation
* @returns String representation
*/
toString(): string;
}SVG path operations for complex curves and path manipulations.
/**
* SVG path class with curve and path operations
* @param segments - Initial path segments
*/
class Path {
constructor(segments?: Path.Segment[]);
// Path building methods
/**
* Move to point without drawing
* @param x - X coordinate
* @param y - Y coordinate
* @returns This path for chaining
*/
moveTo(x: number, y: number): this;
/**
* Draw line to point
* @param x - X coordinate
* @param y - Y coordinate
* @returns This path for chaining
*/
lineTo(x: number, y: number): this;
/**
* Draw quadratic curve to point
* @param x1 - Control point X
* @param y1 - Control point Y
* @param x - End point X
* @param y - End point Y
* @returns This path for chaining
*/
curveTo(x1: number, y1: number, x: number, y: number): this;
/**
* Draw cubic Bezier curve to point
* @param x1 - First control point X
* @param y1 - First control point Y
* @param x2 - Second control point X
* @param y2 - Second control point Y
* @param x - End point X
* @param y - End point Y
* @returns This path for chaining
*/
cubicCurveTo(x1: number, y1: number, x2: number, y2: number, x: number, y: number): this;
/**
* Draw arc to point
* @param rx - X radius
* @param ry - Y radius
* @param xRotation - X-axis rotation
* @param largeArcFlag - Large arc flag
* @param sweepFlag - Sweep flag
* @param x - End point X
* @param y - End point Y
* @returns This path for chaining
*/
arcTo(rx: number, ry: number, xRotation: number, largeArcFlag: number, sweepFlag: number, x: number, y: number): this;
/**
* Close current path
* @returns This path for chaining
*/
closePath(): this;
// Path operations
/**
* Get path length
* @returns Total path length
*/
length(): number;
/**
* Get point at parameter t (0 = start, 1 = end)
* @param t - Parameter value
* @returns Point on path
*/
pointAt(t: number): Point;
/**
* Get point at specific distance from start
* @param distance - Distance from start
* @returns Point on path
*/
pointAtLength(distance: number): Point;
/**
* Get tangent vector at parameter t
* @param t - Parameter value
* @returns Tangent vector
*/
tangentAt(t: number): Point;
/**
* Get tangent vector at specific distance
* @param distance - Distance from start
* @returns Tangent vector
*/
tangentAtLength(distance: number): Point;
/**
* Find closest point on path to given point
* @param point - Reference point
* @returns Closest point on path
*/
closestPoint(point: Point): Point;
/**
* Get path bounding box
* @returns Bounding rectangle
*/
bbox(): Rectangle;
// Path transformations
/**
* Translate path by offset
* @param dx - X offset
* @param dy - Y offset
* @returns This path for chaining
*/
translate(dx: number, dy: number): this;
/**
* Rotate path around center
* @param angle - Rotation angle in degrees
* @param origin - Center of rotation (default: path center)
* @returns This path for chaining
*/
rotate(angle: number, origin?: Point): this;
/**
* Scale path from center
* @param sx - X scale factor
* @param sy - Y scale factor (default: sx)
* @param origin - Center of scaling (default: path center)
* @returns This path for chaining
*/
scale(sx: number, sy?: number, origin?: Point): this;
// Utility methods
/**
* Get SVG path data string
* @returns SVG path data
*/
serialize(): string;
/**
* Check if path is empty
* @returns True if path has no segments
*/
isEmpty(): boolean;
/**
* Create copy of path
* @returns New path instance
*/
clone(): Path;
/**
* Convert to string representation
* @returns SVG path data string
*/
toString(): string;
// Static utility methods
/**
* Parse SVG path data string
* @param pathData - SVG path data
* @returns New path instance
*/
static parse(pathData: string): Path;
/**
* Create path from points
* @param points - Array of points
* @returns New path instance
*/
static fromPoints(points: Point[]): Path;
}
// Path segment types
interface Path.Segment {
type: 'M' | 'L' | 'C' | 'Q' | 'A' | 'Z';
values: number[];
}Ellipse geometry with arc operations and transformations.
/**
* Ellipse class with geometric operations
* @param center - Center point
* @param a - Semi-major axis
* @param b - Semi-minor axis
*/
class Ellipse {
constructor(center: Point, a: number, b: number);
// Properties
center: Point;
a: number; // Semi-major axis
b: number; // Semi-minor axis
// Geometric calculations
/**
* Check if point is inside ellipse
* @param point - Point to test
* @returns True if point is inside
*/
containsPoint(point: Point): boolean;
/**
* Get point on ellipse at angle
* @param angle - Angle in degrees
* @returns Point on ellipse
*/
pointAt(angle: number): Point;
/**
* Find closest point on ellipse to given point
* @param point - Reference point
* @returns Closest point on ellipse
*/
closestPoint(point: Point): Point;
/**
* Get ellipse bounding box
* @returns Bounding rectangle
*/
bbox(): Rectangle;
/**
* Check intersection with line
* @param line - Line to test
* @returns Array of intersection points
*/
intersectLine(line: Line): Point[];
// Transformations
/**
* Translate ellipse by offset
* @param dx - X offset
* @param dy - Y offset
* @returns This ellipse for chaining
*/
translate(dx: number, dy: number): this;
/**
* Scale ellipse
* @param sx - X scale factor
* @param sy - Y scale factor (default: sx)
* @returns This ellipse for chaining
*/
scale(sx: number, sy?: number): this;
// Utility methods
/**
* Check equality with another ellipse
* @param ellipse - Ellipse to compare
* @returns True if ellipses are equal
*/
equals(ellipse: Ellipse): boolean;
/**
* Create copy of ellipse
* @returns New ellipse instance
*/
clone(): Ellipse;
}Multi-segment line operations for connected line segments.
/**
* Polyline class for multi-segment lines
* @param points - Array of points defining the polyline
*/
class Polyline {
constructor(points: Point[]);
// Properties
points: Point[];
// Geometric calculations
/**
* Get total polyline length
* @returns Total length
*/
length(): number;
/**
* Get point at parameter t (0 = start, 1 = end)
* @param t - Parameter value
* @returns Point on polyline
*/
pointAt(t: number): Point;
/**
* Get point at specific distance from start
* @param distance - Distance from start
* @returns Point on polyline
*/
pointAtLength(distance: number): Point;
/**
* Find closest point on polyline to given point
* @param point - Reference point
* @returns Closest point on polyline
*/
closestPoint(point: Point): Point;
/**
* Get polyline bounding box
* @returns Bounding rectangle
*/
bbox(): Rectangle;
// Transformations
/**
* Translate polyline by offset
* @param dx - X offset
* @param dy - Y offset
* @returns This polyline for chaining
*/
translate(dx: number, dy: number): this;
/**
* Rotate polyline around center
* @param angle - Rotation angle in degrees
* @param origin - Center of rotation (default: polyline center)
* @returns This polyline for chaining
*/
rotate(angle: number, origin?: Point): this;
/**
* Scale polyline from center
* @param sx - X scale factor
* @param sy - Y scale factor (default: sx)
* @param origin - Center of scaling (default: polyline center)
* @returns This polyline for chaining
*/
scale(sx: number, sy?: number, origin?: Point): this;
// Utility methods
/**
* Create copy of polyline
* @returns New polyline instance
*/
clone(): Polyline;
/**
* Convert to SVG points string
* @returns SVG points attribute value
*/
serialize(): string;
}Bezier curve utilities for smooth curve operations.
/**
* Bezier curve class for smooth curve operations
* @param points - Control points defining the curve
*/
class Curve {
constructor(points: Point[]);
// Properties
points: Point[];
// Curve calculations
/**
* Get curve length (approximated)
* @returns Approximate curve length
*/
length(): number;
/**
* Get point at parameter t (0 = start, 1 = end)
* @param t - Parameter value
* @returns Point on curve
*/
pointAt(t: number): Point;
/**
* Get tangent vector at parameter t
* @param t - Parameter value
* @returns Tangent vector
*/
tangentAt(t: number): Point;
/**
* Get curve bounding box
* @returns Bounding rectangle
*/
bbox(): Rectangle;
/**
* Subdivide curve at parameter t
* @param t - Parameter value
* @returns Array of two sub-curves
*/
divide(t: number): [Curve, Curve];
// Utility methods
/**
* Create copy of curve
* @returns New curve instance
*/
clone(): Curve;
/**
* Convert to SVG path data
* @returns SVG path data string
*/
toPath(): string;
}Angle conversion and manipulation utilities.
/**
* Angle utility class
*/
class Angle {
/**
* Convert degrees to radians
* @param degrees - Angle in degrees
* @returns Angle in radians
*/
static toRad(degrees: number): number;
/**
* Convert radians to degrees
* @param radians - Angle in radians
* @returns Angle in degrees
*/
static toDeg(radians: number): number;
/**
* Normalize angle to 0-360 degree range
* @param angle - Angle in degrees
* @returns Normalized angle
*/
static normalize(angle: number): number;
/**
* Get difference between two angles
* @param angle1 - First angle in degrees
* @param angle2 - Second angle in degrees
* @returns Angle difference
*/
static diff(angle1: number, angle2: number): number;
/**
* Check if angle is between two other angles
* @param angle - Angle to test
* @param start - Start angle
* @param end - End angle
* @returns True if angle is in range
*/
static between(angle: number, start: number, end: number): boolean;
}import { Point, Rectangle, Line, Path, Ellipse } from "@antv/x6";
// Complex geometric calculations
const rect = new Rectangle(100, 100, 200, 150);
const center = rect.center;
const ellipse = new Ellipse(center, 100, 75);
// Find intersection points between line and ellipse
const line = new Line(new Point(50, 50), new Point(350, 300));
const intersections = ellipse.intersectLine(line);
// Create smooth path through points
const points = [
new Point(100, 200),
new Point(200, 100),
new Point(300, 200),
new Point(400, 150)
];
const path = new Path()
.moveTo(points[0].x, points[0].y)
.curveTo(points[1].x, points[1].y, points[2].x, points[2].y)
.lineTo(points[3].x, points[3].y);
// Calculate path properties
const pathLength = path.length();
const midPoint = path.pointAt(0.5);
const tangent = path.tangentAt(0.5);
// Transform operations
const transformedRect = rect
.clone()
.translate(50, 25)
.scale(1.2)
.inflate(10);
// Distance calculations
const point1 = new Point(100, 100);
const point2 = new Point(200, 200);
const distance = point1.distance(point2);
const manhattanDist = point1.manhattanDistance(point2);
console.log(`Distance: ${distance}, Manhattan: ${manhattanDist}`);// Core geometry interfaces
interface Point.PointLike {
x: number;
y: number;
}
interface Point.PointData {
x: number;
y: number;
}
interface Rectangle.RectangleLike {
x: number;
y: number;
width: number;
height: number;
}
interface Rectangle.RectangleData {
x: number;
y: number;
width: number;
height: number;
}
// Path segment types
interface Path.Segment {
type: 'M' | 'L' | 'C' | 'Q' | 'A' | 'Z';
values: number[];
}
// Transformation matrix type
interface Matrix {
a: number;
b: number;
c: number;
d: number;
e: number;
f: number;
}