@maxgraph/core
Version:
maxGraph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.
336 lines (335 loc) • 13.4 kB
TypeScript
import AbstractCanvas2D from './AbstractCanvas2D.js';
import { DirectionValue, TextDirectionValue } from '../../types.js';
/**
* @category Serialization
*/
declare class XmlCanvas2D extends AbstractCanvas2D {
constructor(root: Element);
/**
* Reference to the container for the SVG content.
*/
root: Element;
/**
* Specifies if text output should be enabled.
* @default true
*/
textEnabled: boolean;
/**
* Specifies if the output should be compressed by removing redundant calls.
* @default true
*/
compressed: boolean;
/**
* Writes the rendering defaults to {@link root}:
*/
writeDefaults(): void;
/**
* Returns a formatted number with 2 decimal places.
*/
format(value: string | number): number;
/**
* Creates the given element using the owner document of {@link root}.
*/
createElement(name: string): Element;
/**
* Saves the drawing state.
*/
save(): void;
/**
* Restores the drawing state.
*/
restore(): void;
/**
* Scales the output.
*
* @param scale Number that represents the scale where 1 is equal to 100%.
*/
scale(value: number): void;
/**
* Translates the output.
*
* @param dx Number that specifies the horizontal translation.
* @param dy Number that specifies the vertical translation.
*/
translate(dx: number, dy: number): void;
/**
* Rotates and/or flips the output around a given center. (Note: Due to
* limitations in VML, the rotation cannot be concatenated.)
*
* @param theta Number that represents the angle of the rotation (in degrees).
* @param flipH Boolean indicating if the output should be flipped horizontally.
* @param flipV Boolean indicating if the output should be flipped vertically.
* @param cx Number that represents the x-coordinate of the rotation center.
* @param cy Number that represents the y-coordinate of the rotation center.
*/
rotate(theta: number, flipH: boolean, flipV: boolean, cx: number, cy: number): void;
/**
* Sets the current alpha.
*
* @param value Number that represents the new alpha. Possible values are between
* 1 (opaque) and 0 (transparent).
*/
setAlpha(value: number): void;
/**
* Sets the current fill alpha.
*
* @param value Number that represents the new fill alpha. Possible values are between
* 1 (opaque) and 0 (transparent).
*/
setFillAlpha(value: number): void;
/**
* Sets the current stroke alpha.
*
* @param value Number that represents the new stroke alpha. Possible values are between
* 1 (opaque) and 0 (transparent).
*/
setStrokeAlpha(value: number): void;
/**
* Sets the current fill color.
*
* @param value Hexadecimal representation of the color or 'none'.
*/
setFillColor(value?: string | null): void;
/**
* Sets the gradient. Note that the coordinates may be ignored by some implementations.
*
* @param color1 Hexadecimal representation of the start color.
* @param color2 Hexadecimal representation of the end color.
* @param x X-coordinate of the gradient region.
* @param y y-coordinate of the gradient region.
* @param w Width of the gradient region.
* @param h Height of the gradient region.
* @param direction One of {@link Constants#DIRECTION_NORTH}, {@link Constants#DIRECTION_EAST},
* {@link Constants#DIRECTION_SOUTH} or {@link Constants#DIRECTION_WEST}.
* @param alpha1 Optional alpha of the start color. Default is 1. Possible values
* are between 1 (opaque) and 0 (transparent).
* @param alpha2 Optional alpha of the end color. Default is 1. Possible values
* are between 1 (opaque) and 0 (transparent).
*/
setGradient(color1: string | null, color2: string | null, x: number, y: number, w: number, h: number, direction: DirectionValue, alpha1?: number, alpha2?: number): void;
/**
* Sets the current stroke color.
*
* @param value Hexadecimal representation of the color or 'none'.
*/
setStrokeColor(value?: string | null): void;
/**
* Sets the current stroke width.
*
* @param value Numeric representation of the stroke width.
*/
setStrokeWidth(value: number): void;
/**
* Enables or disables dashed lines.
*
* @param value Boolean that specifies if dashed lines should be enabled.
* @param value Boolean that specifies if the stroke width should be ignored
* for the dash pattern.
* @default false
*/
setDashed(value: boolean, fixDash: boolean): void;
/**
* Sets the current dash pattern.
* @default '3 3'
*
* @param value String that represents the dash pattern, which is a sequence of
* numbers defining the length of the dashes and the length of the spaces
* between the dashes. The lengths are relative to the line width - a length
* of 1 is equals to the line width.
*/
setDashPattern(value: string): void;
/**
* Sets the line cap.
* @default 'flat' which corresponds to 'butt' in SVG
*
* @param value String that represents the line cap. Possible values are flat, round
* and square.
*/
setLineCap(value: string): void;
/**
* Sets the line join.
* @default 'miter'
*
* @param value String that represents the line join. Possible values are miter,
* round and bevel.
*/
setLineJoin(value: string): void;
/**
* Sets the miter limit.
* @default 10
*
* @param value Number that represents the miter limit.
*/
setMiterLimit(value: number): void;
/**
* Sets the current font color.
* @default '#000000'
*
* @param value Hexadecimal representation of the color or 'none'.
*/
setFontColor(value?: string | null): void;
/**
* Sets the current font background color.
*
* @param value Hexadecimal representation of the color or 'none'.
*/
setFontBackgroundColor(value?: string | null): void;
/**
* Sets the current font border color.
*
* @param value Hexadecimal representation of the color or 'none'.
*/
setFontBorderColor(value?: string | null): void;
/**
* Sets the current font size.
* @default {@link mxConstants.DEFAULT_FONTSIZE}
*
* @param value Numeric representation of the font size.
*/
setFontSize(value: number): void;
/**
* Sets the current font family.
* @default {@link mxConstants.DEFAULT_FONTFAMILY}
*
* @param value String representation of the font family. This handles the same
* values as the CSS font-family property.
*/
setFontFamily(value: string): void;
/**
* Sets the current font style.
*
* @param value Numeric representation of the font family. This is the sum of the
* font styles from {@link mxConstants}.
*/
setFontStyle(value?: number | null): void;
/**
* Enables or disables shadows.
*
* @param value Boolean that specifies if shadows should be enabled.
*/
setShadow(value: boolean): void;
setShadowColor(value?: string | null): void;
setShadowAlpha(value: number): void;
setShadowOffset(dx: number, dy: number): void;
/**
* Puts a rectangle into the drawing buffer.
*
* @param x Number that represents the x-coordinate of the rectangle.
* @param y Number that represents the y-coordinate of the rectangle.
* @param w Number that represents the width of the rectangle.
* @param h Number that represents the height of the rectangle.
*/
rect(x: number, y: number, w: number, h: number): void;
/**
* Puts a rounded rectangle into the drawing buffer.
*
* @param x Number that represents the x-coordinate of the rectangle.
* @param y Number that represents the y-coordinate of the rectangle.
* @param w Number that represents the width of the rectangle.
* @param h Number that represents the height of the rectangle.
* @param dx Number that represents the horizontal rounding.
* @param dy Number that represents the vertical rounding.
*/
roundrect(x: number, y: number, w: number, h: number, dx: number, dy: number): void;
/**
* Puts an ellipse into the drawing buffer.
*
* @param x Number that represents the x-coordinate of the ellipse.
* @param y Number that represents the y-coordinate of the ellipse.
* @param w Number that represents the width of the ellipse.
* @param h Number that represents the height of the ellipse.
*/
ellipse(x: number, y: number, w: number, h: number): void;
/**
* Paints an image.
*
* @param x Number that represents the x-coordinate of the image.
* @param y Number that represents the y-coordinate of the image.
* @param w Number that represents the width of the image.
* @param h Number that represents the height of the image.
* @param src String that specifies the URL of the image.
* @param aspect Boolean indicating if the aspect of the image should be preserved.
* @param flipH Boolean indicating if the image should be flipped horizontally.
* @param flipV Boolean indicating if the image should be flipped vertically.
*/
image(x: number, y: number, w: number, h: number, src: string, aspect?: boolean, flipH?: boolean, flipV?: boolean): void;
updateText(): void;
/**
* Starts a new path and puts it into the drawing buffer.
*/
begin(): void;
end(): void;
/**
* Moves the current path the given point.
*
* @param x Number that represents the x-coordinate of the point.
* @param y Number that represents the y-coordinate of the point.
*/
moveTo(x: number, y: number): void;
/**
* Draws a line to the given coordinates.
*
* @param x Number that represents the x-coordinate of the endpoint.
* @param y Number that represents the y-coordinate of the endpoint.
*/
lineTo(x: number, y: number): void;
/**
* Adds a quadratic curve to the current path.
*
* @param x1 Number that represents the x-coordinate of the control point.
* @param y1 Number that represents the y-coordinate of the control point.
* @param x2 Number that represents the x-coordinate of the endpoint.
* @param y2 Number that represents the y-coordinate of the endpoint.
*/
quadTo(x1: number, y1: number, x2: number, y2: number): void;
/**
* Adds a bezier curve to the current path.
*
* @param x1 Number that represents the x-coordinate of the first control point.
* @param y1 Number that represents the y-coordinate of the first control point.
* @param x2 Number that represents the x-coordinate of the second control point.
* @param y2 Number that represents the y-coordinate of the second control point.
* @param x3 Number that represents the x-coordinate of the endpoint.
* @param y3 Number that represents the y-coordinate of the endpoint.
*/
curveTo(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): void;
/**
* Closes the current path.
*/
close(): void;
/**
* Paints the given text. Possible values for format are empty string for
* plain text and html for HTML markup. Background and border color as well
* as clipping is not available in plain text labels for VML. HTML labels
* are not available as part of shapes with no foreignObject support in SVG
* (eg. IE9, IE10).
*
* @param x Number that represents the x-coordinate of the text.
* @param y Number that represents the y-coordinate of the text.
* @param w Number that represents the available width for the text or 0 for automatic width.
* @param h Number that represents the available height for the text or 0 for automatic height.
* @param str String that specifies the text to be painted.
* @param align String that represents the horizontal alignment.
* @param valign String that represents the vertical alignment.
* @param wrap Boolean that specifies if word-wrapping is enabled. Requires w > 0.
* @param format Empty string for plain text or 'html' for HTML markup.
* @param overflow Specifies the overflow behaviour of the label. Requires w > 0 and/or h > 0.
* @param clip Boolean that specifies if the label should be clipped. Requires w > 0 and/or h > 0.
* @param rotation Number that specifies the angle of the rotation around the anchor point of the text.
* @param dir Optional string that specifies the text direction. Possible values are rtl and ltr.
*/
text(x: number, y: number, w: number, h: number, str: string | HTMLElement, align?: string | null, valign?: string | null, wrap?: boolean | null, format?: string | null, overflow?: string | null, clip?: boolean | null, rotation?: number | null, dir?: TextDirectionValue | null): void;
/**
* Paints the outline of the current drawing buffer.
*/
stroke(): void;
/**
* Fills the current drawing buffer.
*/
fill(): void;
/**
* Fills the current drawing buffer and its outline.
*/
fillAndStroke(): void;
}
export default XmlCanvas2D;