X6 provides a comprehensive collection of utility modules for DOM manipulation, mathematical calculations, platform detection, and data processing. These utilities form the foundation for X6's cross-browser compatibility and provide helpful functions for building diagram applications.
Comprehensive DOM manipulation and measurement utilities for cross-browser compatibility.
namespace Dom {
// Element creation and manipulation
function createElement(tagName: string, attrs?: KeyValue, ns?: string): Element;
function createSVGElement(tagName: string, attrs?: KeyValue): SVGElement;
function empty(elem: Element): Element;
function remove(elem: Element): Element;
function append(parent: Element, child: Element | string): Element;
function prepend(parent: Element, child: Element | string): Element;
// Attribute management
function attr(elem: Element, name: string): string | null;
function attr(elem: Element, name: string, value: any): Element;
function attr(elem: Element, attrs: KeyValue): Element;
function removeAttr(elem: Element, name: string): Element;
// CSS class management
function addClass(elem: Element, className: string): Element;
function removeClass(elem: Element, className: string): Element;
function toggleClass(elem: Element, className: string, stateVal?: boolean): Element;
function hasClass(elem: Element, className: string): boolean;
// CSS style management
function css(elem: Element, name: string): string;
function css(elem: Element, name: string, value: any): Element;
function css(elem: Element, styles: KeyValue): Element;
// Element measurements
function getBBox(elem: Element): Rectangle;
function getComputedStyle(elem: Element): CSSStyleDeclaration;
function offset(elem: Element): { left: number; top: number };
function scrollLeft(elem: Element): number;
function scrollTop(elem: Element): number;
// Element queries
function find(elem: Element, selector: string): Element[];
function findOne(elem: Element, selector: string): Element | null;
function closest(elem: Element, selector: string): Element | null;
function contains(parent: Element, child: Element): boolean;
// Event handling
function addEventListener(elem: Element, type: string, listener: EventListener): void;
function removeEventListener(elem: Element, type: string, listener: EventListener): void;
function createEvent(type: string, data?: KeyValue): Event;
// Transform utilities
function matrix(elem: Element): DOMMatrix;
function transform(elem: Element, transform: string): Element;
function translate(elem: Element, dx: number, dy: number): Element;
function rotate(elem: Element, angle: number, cx?: number, cy?: number): Element;
function scale(elem: Element, sx: number, sy: number): Element;
// Text utilities
function text(elem: Element): string;
function text(elem: Element, content: string): Element;
function html(elem: Element): string;
function html(elem: Element, content: string): Element;
// Path utilities
function createPath(pathData: string): SVGPathElement;
function normalizePath(path: string): string;
function parsePath(path: string): PathSegment[];
function getPathLength(path: SVGPathElement): number;
function getPointAtLength(path: SVGPathElement, length: number): SVGPoint;
}SVG vector manipulation and mathematical operations for 2D graphics.
namespace Vector {
// Vector creation
function create(x: number, y: number): Vector;
function fromString(str: string): Vector;
function fromAngle(angle: number, length?: number): Vector;
function random(min?: number, max?: number): Vector;
// Vector operations
function add(v1: Vector, v2: Vector): Vector;
function subtract(v1: Vector, v2: Vector): Vector;
function multiply(vector: Vector, scalar: number): Vector;
function divide(vector: Vector, scalar: number): Vector;
function dot(v1: Vector, v2: Vector): number;
function cross(v1: Vector, v2: Vector): number;
// Vector properties
function length(vector: Vector): number;
function magnitude(vector: Vector): number;
function angle(vector: Vector): number;
function normalize(vector: Vector): Vector;
function rotate(vector: Vector, angle: number): Vector;
// Vector utilities
function distance(v1: Vector, v2: Vector): number;
function bearing(v1: Vector, v2: Vector): number;
function lerp(v1: Vector, v2: Vector, t: number): Vector;
function equals(v1: Vector, v2: Vector, epsilon?: number): boolean;
function clone(vector: Vector): Vector;
function toString(vector: Vector): string;
// Geometric calculations
function closestPointOnLine(point: Vector, lineStart: Vector, lineEnd: Vector): Vector;
function intersection(line1: [Vector, Vector], line2: [Vector, Vector]): Vector | null;
function isCollinear(v1: Vector, v2: Vector, v3: Vector): boolean;
function isCounterclockwise(v1: Vector, v2: Vector, v3: Vector): boolean;
}
interface Vector {
x: number;
y: number;
}Browser and environment detection utilities for feature support and compatibility.
namespace Platform {
// Browser detection
const IS_CHROME: boolean;
const IS_FIREFOX: boolean;
const IS_SAFARI: boolean;
const IS_EDGE: boolean;
const IS_IE: boolean;
const IS_OPERA: boolean;
// Operating system detection
const IS_MAC: boolean;
const IS_WINDOWS: boolean;
const IS_LINUX: boolean;
const IS_IOS: boolean;
const IS_ANDROID: boolean;
// Device type detection
const IS_MOBILE: boolean;
const IS_TABLET: boolean;
const IS_DESKTOP: boolean;
const IS_TOUCH_DEVICE: boolean;
// Feature detection
const SUPPORT_CSS3_TRANSITION: boolean;
const SUPPORT_CSS3_TRANSFORM: boolean;
const SUPPORT_FOREIGN_OBJECT: boolean;
const SUPPORT_PASSIVE_EVENT: boolean;
// Version information
function getBrowserVersion(): string;
function getOSVersion(): string;
// Feature testing
function test(feature: string): boolean;
function hasSupport(feature: string): boolean;
}Extended object manipulation utilities beyond native JavaScript methods.
namespace ObjectExt {
// Deep operations
function clone<T>(obj: T): T;
function cloneDeep<T>(obj: T): T;
function merge<T>(...objects: Partial<T>[]): T;
function mergeDeep<T>(...objects: Partial<T>[]): T;
// Property access
function get(obj: any, path: string | string[], defaultValue?: any): any;
function set(obj: any, path: string | string[], value: any): void;
function has(obj: any, path: string | string[]): boolean;
function unset(obj: any, path: string | string[]): boolean;
// Object queries
function keys(obj: any): string[];
function values(obj: any): any[];
function entries(obj: any): [string, any][];
function isEmpty(obj: any): boolean;
function isEqual(obj1: any, obj2: any): boolean;
function isPlainObject(obj: any): boolean;
// Functional utilities
function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K>;
function omit<T, K extends keyof T>(obj: T, keys: K[]): Omit<T, K>;
function defaults<T>(obj: T, ...sources: Partial<T>[]): T;
function assignIn<T>(target: T, ...sources: Partial<T>[]): T;
// Transformation
function mapKeys(obj: any, iteratee: (value: any, key: string) => string): any;
function mapValues(obj: any, iteratee: (value: any, key: string) => any): any;
function invert(obj: any): any;
function invertBy(obj: any, iteratee?: Function): any;
}Extended array manipulation utilities with functional programming support.
namespace ArrayExt {
// Array creation
function range(start: number, end?: number, step?: number): number[];
function times(n: number, iteratee?: (index: number) => any): any[];
function fill<T>(array: T[], value: T, start?: number, end?: number): T[];
// Array queries
function first<T>(array: T[]): T | undefined;
function last<T>(array: T[]): T | undefined;
function nth<T>(array: T[], index: number): T | undefined;
function indexOf<T>(array: T[], value: T, fromIndex?: number): number;
function includes<T>(array: T[], value: T, fromIndex?: number): boolean;
// Array manipulation
function insert<T>(array: T[], index: number, ...items: T[]): T[];
function remove<T>(array: T[], value: T): T[];
function removeAt<T>(array: T[], index: number): T[];
function move<T>(array: T[], from: number, to: number): T[];
function shuffle<T>(array: T[]): T[];
// Functional operations
function uniq<T>(array: T[]): T[];
function uniqBy<T>(array: T[], iteratee: (item: T) => any): T[];
function difference<T>(array: T[], ...others: T[][]): T[];
function intersection<T>(...arrays: T[][]): T[];
function union<T>(...arrays: T[][]): T[];
// Array partitioning
function chunk<T>(array: T[], size: number): T[][];
function partition<T>(array: T[], predicate: (item: T) => boolean): [T[], T[]];
function groupBy<T>(array: T[], iteratee: (item: T) => any): { [key: string]: T[] };
// Array testing
function isArray(value: any): value is any[];
function isEmpty<T>(array: T[]): boolean;
function every<T>(array: T[], predicate: (item: T) => boolean): boolean;
function some<T>(array: T[], predicate: (item: T) => boolean): boolean;
}Extended string manipulation utilities for text processing and formatting.
namespace StringExt {
// Case transformations
function camelCase(str: string): string;
function kebabCase(str: string): string;
function snakeCase(str: string): string;
function pascalCase(str: string): string;
function startCase(str: string): string;
function upperCase(str: string): string;
function lowerCase(str: string): string;
// String queries
function startsWith(str: string, target: string, position?: number): boolean;
function endsWith(str: string, target: string, length?: number): boolean;
function includes(str: string, target: string, position?: number): boolean;
function isEmpty(str: string): boolean;
function isBlank(str: string): boolean;
// String manipulation
function trim(str: string, chars?: string): string;
function trimStart(str: string, chars?: string): string;
function trimEnd(str: string, chars?: string): string;
function pad(str: string, length: number, chars?: string): string;
function padStart(str: string, length: number, chars?: string): string;
function padEnd(str: string, length: number, chars?: string): string;
// String formatting
function truncate(str: string, options?: { length?: number; omission?: string }): string;
function repeat(str: string, n: number): string;
function replace(str: string, pattern: string | RegExp, replacement: string): string;
function split(str: string, separator?: string | RegExp, limit?: number): string[];
// String utilities
function random(length?: number, chars?: string): string;
function hashCode(str: string): number;
function escapeHtml(str: string): string;
function unescapeHtml(str: string): string;
function template(str: string, data: KeyValue): string;
}Extended number utilities for mathematical operations and formatting.
namespace NumberExt {
// Number validation
function isNumber(value: any): value is number;
function isInteger(value: any): value is number;
function isFinite(value: any): value is number;
function isNaN(value: any): boolean;
function isSafeInteger(value: any): value is number;
// Number utilities
function random(min?: number, max?: number): number;
function clamp(number: number, min: number, max: number): number;
function inRange(number: number, min: number, max: number): boolean;
function round(number: number, precision?: number): number;
function floor(number: number, precision?: number): number;
function ceil(number: number, precision?: number): number;
// Number formatting
function toFixed(number: number, digits: number): string;
function toPrecision(number: number, precision: number): string;
function toExponential(number: number, fractionDigits?: number): string;
function format(number: number, pattern: string): string;
// Mathematical operations
function add(augend: number, addend: number): number;
function subtract(minuend: number, subtrahend: number): number;
function multiply(multiplier: number, multiplicand: number): number;
function divide(dividend: number, divisor: number): number;
function mean(numbers: number[]): number;
function sum(numbers: number[]): number;
function max(numbers: number[]): number;
function min(numbers: number[]): number;
}Animation and timing utilities for smooth visual transitions.
namespace Animation {
// Timing functions
function requestAnimationFrame(callback: FrameRequestCallback): number;
function cancelAnimationFrame(handle: number): void;
// Easing functions
const Easing: {
linear(t: number): number;
easeIn(t: number): number;
easeOut(t: number): number;
easeInOut(t: number): number;
bounce(t: number): number;
elastic(t: number): number;
};
// Animation control
class Timeline {
constructor(options?: TimelineOptions);
// Timeline control
play(): this;
pause(): this;
stop(): this;
restart(): this;
reverse(): this;
// Timeline configuration
duration(ms: number): this;
delay(ms: number): this;
loop(count?: number): this;
yoyo(enabled?: boolean): this;
// Animation callbacks
onStart(callback: () => void): this;
onUpdate(callback: (progress: number) => void): this;
onComplete(callback: () => void): this;
}
// Interpolation
function interpolate(from: number, to: number, progress: number): number;
function interpolateArray(from: number[], to: number[], progress: number): number[];
function interpolateObject(from: KeyValue, to: KeyValue, progress: number): KeyValue;
}
interface TimelineOptions {
duration?: number;
delay?: number;
easing?: (t: number) => number;
loop?: number | boolean;
yoyo?: boolean;
autoplay?: boolean;
}DOM Manipulation:
import { Dom } from "@antv/x6";
// Create and style elements
const rect = Dom.createSVGElement('rect', {
width: 100,
height: 50,
fill: 'blue'
});
// Add CSS classes
Dom.addClass(rect, 'selected');
Dom.css(rect, { opacity: 0.8 });
// Measure elements
const bbox = Dom.getBBox(rect);
console.log(`Width: ${bbox.width}, Height: ${bbox.height}`);Object Utilities:
import { ObjectExt } from "@antv/x6";
// Deep operations
const original = { a: { b: { c: 1 } } };
const cloned = ObjectExt.cloneDeep(original);
// Property access
const value = ObjectExt.get(original, 'a.b.c'); // 1
ObjectExt.set(original, 'a.b.d', 2);
// Object manipulation
const picked = ObjectExt.pick(original, ['a']);
const merged = ObjectExt.merge({ x: 1 }, { y: 2 }); // { x: 1, y: 2 }Platform Detection:
import { Platform } from "@antv/x6";
// Conditional features based on browser
if (Platform.IS_CHROME) {
// Chrome-specific optimizations
}
if (Platform.IS_TOUCH_DEVICE) {
// Touch-specific event handling
}
if (Platform.SUPPORT_CSS3_TRANSFORM) {
// Use CSS transforms
} else {
// Fallback to absolute positioning
}These utilities provide a solid foundation for building cross-platform, feature-rich diagram applications with X6.