@amcharts/amcharts4
Version:
amCharts 4
567 lines (566 loc) • 17.9 kB
TypeScript
/**
* [[AMElement]] represents any SVG element and related functionality.
*/
/**
* ============================================================================
* IMPORTS
* ============================================================================
* @hidden
*/
import { IRectangle } from "../defs/IRectangle";
import { IDisposer } from "../utils/Disposer";
import { IPoint } from "../defs/IPoint";
import * as $type from "../utils/Type";
/**
* ============================================================================
* REQUISITES
* ============================================================================
* @hidden
*/
/**
* Defines available SVG attributes.
*/
export declare type SVGAttribute = "accent-height" | "accumulate" | "additive" | "alignment-baseline" | "allowReorder" | "alphabetic" | "amplitude" | "arabic-form" | "aria-checked" | "aria-describedby" | "aria-hidden" | "aria-label" | "aria-labelledby" | "aria-live" | "aria-controls" | "aria-orientation" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baseline-shift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "cap-height" | "class" | "clip" | "clipPathUnits" | "clip-path" | "clip-rule" | "color" | "color-interpolation" | "color-interpolation-filters" | "color-profile" | "color-rendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominant-baseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enable-background" | "end" | "exponent" | "externalResourcesRequired" | "fill" | "fill-opacity" | "fill-rule" | "filter" | "filterRes" | "filterUnits" | "flood-color" | "flood-opacity" | "focusable" | "font-family" | "font-size" | "font-size-adjust" | "font-stretch" | "font-style" | "font-variant" | "font-weight" | "format" | "from" | "fx" | "fy" | "g1" | "g2" | "glyph-name" | "glyph-orientation-horizontal" | "glyph-orientation-vertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "hanging" | "height" | "href" | "horiz-adv-x" | "horiz-origin-x" | "id" | "ideographic" | "image-rendering" | "in" | "in2" | "intercept" | "k" | "k1" | "k2" | "k3" | "k4" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lang" | "lengthAdjust" | "letter-spacing" | "lighting-color" | "limitingConeAngle" | "local" | "marker-end" | "marker-mid" | "marker-start" | "markerHeight" | "markerUnits" | "markerWidth" | "mask" | "maskContentUnits" | "maskUnits" | "mathematical" | "max" | "media" | "method" | "min" | "mode" | "name" | "numOctaves" | "offset" | "onabort" | "onactivate" | "onbegin" | "onclick" | "onend" | "onerror" | "onfocusin" | "onfocusout" | "onload" | "onmousedown" | "onmousemove" | "onmouseout" | "onmouseover" | "onmouseup" | "onrepeat" | "onresize" | "onscroll" | "onunload" | "onzoom" | "opacity" | "operator" | "order" | "orient" | "orientation" | "origin" | "overflow" | "overline-position" | "overline-thickness" | "panose-1" | "paint-order" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointer-events" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "rendering-intent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "role" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shape-rendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stop-color" | "stop-opacity" | "strikethrough-position" | "strikethrough-thickness" | "string" | "stroke" | "stroke-dasharray" | "stroke-dashoffset" | "stroke-linecap" | "stroke-linejoin" | "stroke-miterlimit" | "stroke-opacity" | "stroke-width" | "style" | "surfaceScale" | "systemLanguage" | "tabindex" | "tableValues" | "target" | "targetX" | "targetY" | "text-anchor" | "text-decoration" | "text-rendering" | "textLength" | "to" | "transform" | "type" | "u1" | "u2" | "underline-position" | "underline-thickness" | "unicode" | "unicode-bidi" | "unicode-range" | "units-per-em" | "v-alphabetic" | "v-hanging" | "v-ideographic" | "v-mathematical" | "values" | "version" | "vert-adv-y" | "vert-origin-x" | "vert-origin-y" | "viewBox" | "viewTarget" | "visibility" | "width" | "widths" | "word-spacing" | "writing-mode" | "x" | "x-height" | "x1" | "x2" | "xChannelSelector" | "xlink:actuate" | "xlink:arcrole" | "xlink:href" | "xlink:role" | "xlink:show" | "xlink:title" | "xlink:type" | "xml:base" | "xml:lang" | "xml:space" | "y" | "y1" | "y2" | "yChannelSelector" | "z" | "zoomAndPan";
/**
* Represents an interface for SVG attributes.
*
* This is a collection of all properties that an SVG element can have.
*/
export interface ISVGAttribute {
"accent-height"?: any;
"accumulate"?: any;
"additive"?: any;
"alignment-baseline"?: any;
"allowReorder"?: any;
"alphabetic"?: any;
"amplitude"?: any;
"arabic-form"?: any;
"aria-checked"?: any;
"aria-describedby"?: any;
"aria-hidden"?: any;
"aria-label"?: any;
"aria-labelledby"?: any;
"aria-live"?: any;
"aria-controls"?: any;
"aria-orientation"?: any;
"aria-valuemax"?: any;
"aria-valuemin"?: any;
"aria-valuenow"?: any;
"aria-valuetext"?: any;
"ascent"?: any;
"attributeName"?: any;
"attributeType"?: any;
"autoReverse"?: any;
"azimuth"?: any;
"baseFrequency"?: any;
"baseline-shift"?: any;
"baseProfile"?: any;
"bbox"?: any;
"begin"?: any;
"bias"?: any;
"by"?: any;
"calcMode"?: any;
"cap-height"?: any;
"class"?: any;
"clip"?: any;
"clipPathUnits"?: any;
"clip-path"?: any;
"clip-rule"?: any;
"color"?: any;
"color-interpolation"?: any;
"color-interpolation-filters"?: any;
"color-profile"?: any;
"color-rendering"?: any;
"contentScriptType"?: any;
"contentStyleType"?: any;
"cursor"?: any;
"cx"?: any;
"cy"?: any;
"d"?: any;
"decelerate"?: any;
"descent"?: any;
"diffuseConstant"?: any;
"direction"?: any;
"display"?: any;
"divisor"?: any;
"dominant-baseline"?: any;
"dur"?: any;
"dx"?: any;
"dy"?: any;
"edgeMode"?: any;
"elevation"?: any;
"enable-background"?: any;
"end"?: any;
"exponent"?: any;
"externalResourcesRequired"?: any;
"fill"?: any;
"fill-opacity"?: any;
"fill-rule"?: any;
"filter"?: any;
"filterRes"?: any;
"filterUnits"?: any;
"flood-color"?: any;
"flood-opacity"?: any;
"focusable"?: any;
"font-family"?: any;
"font-size"?: any;
"font-size-adjust"?: any;
"font-stretch"?: any;
"font-style"?: any;
"font-variant"?: any;
"font-weight"?: any;
"format"?: any;
"from"?: any;
"fx"?: any;
"fy"?: any;
"g1"?: any;
"g2"?: any;
"glyph-name"?: any;
"glyph-orientation-horizontal"?: any;
"glyph-orientation-vertical"?: any;
"glyphRef"?: any;
"gradientTransform"?: any;
"gradientUnits"?: any;
"hanging"?: any;
"height"?: any;
"href"?: any;
"horiz-adv-x"?: any;
"horiz-origin-x"?: any;
"id"?: any;
"ideographic"?: any;
"image-rendering"?: any;
"in"?: any;
"in2"?: any;
"intercept"?: any;
"k"?: any;
"k1"?: any;
"k2"?: any;
"k3"?: any;
"k4"?: any;
"kernelMatrix"?: any;
"kernelUnitLength"?: any;
"kerning"?: any;
"keyPoints"?: any;
"keySplines"?: any;
"keyTimes"?: any;
"lang"?: any;
"lengthAdjust"?: any;
"letter-spacing"?: any;
"lighting-color"?: any;
"limitingConeAngle"?: any;
"local"?: any;
"marker-end"?: any;
"marker-mid"?: any;
"marker-start"?: any;
"markerHeight"?: any;
"markerUnits"?: any;
"markerWidth"?: any;
"mask"?: any;
"maskContentUnits"?: any;
"maskUnits"?: any;
"mathematical"?: any;
"max"?: any;
"media"?: any;
"method"?: any;
"min"?: any;
"mode"?: any;
"name"?: any;
"numOctaves"?: any;
"offset"?: any;
"onabort"?: any;
"onactivate"?: any;
"onbegin"?: any;
"onclick"?: any;
"onend"?: any;
"onerror"?: any;
"onfocusin"?: any;
"onfocusout"?: any;
"onload"?: any;
"onmousedown"?: any;
"onmousemove"?: any;
"onmouseout"?: any;
"onmouseover"?: any;
"onmouseup"?: any;
"onrepeat"?: any;
"onresize"?: any;
"onscroll"?: any;
"onunload"?: any;
"onzoom"?: any;
"opacity"?: any;
"operator"?: any;
"order"?: any;
"orient"?: any;
"orientation"?: any;
"origin"?: any;
"overflow"?: any;
"overline-position"?: any;
"overline-thickness"?: any;
"panose-1"?: any;
"paint-order"?: any;
"path"?: any;
"pathLength"?: any;
"patternContentUnits"?: any;
"patternTransform"?: any;
"patternUnits"?: any;
"pointer-events"?: any;
"points"?: any;
"pointsAtX"?: any;
"pointsAtY"?: any;
"pointsAtZ"?: any;
"preserveAlpha"?: any;
"preserveAspectRatio"?: any;
"primitiveUnits"?: any;
"r"?: any;
"radius"?: any;
"refX"?: any;
"refY"?: any;
"rendering-intent"?: any;
"repeatCount"?: any;
"repeatDur"?: any;
"requiredExtensions"?: any;
"requiredFeatures"?: any;
"restart"?: any;
"result"?: any;
"role"?: any;
"rotate"?: any;
"rx"?: any;
"ry"?: any;
"scale"?: any;
"seed"?: any;
"shape-rendering"?: any;
"slope"?: any;
"spacing"?: any;
"specularConstant"?: any;
"specularExponent"?: any;
"speed"?: any;
"spreadMethod"?: any;
"startOffset"?: any;
"stdDeviation"?: any;
"stemh"?: any;
"stemv"?: any;
"stitchTiles"?: any;
"stop-color"?: any;
"stop-opacity"?: any;
"strikethrough-position"?: any;
"strikethrough-thickness"?: any;
"string"?: any;
"stroke"?: any;
"stroke-dasharray"?: any;
"stroke-dashoffset"?: any;
"stroke-linecap"?: any;
"stroke-linejoin"?: any;
"stroke-miterlimit"?: any;
"stroke-opacity"?: any;
"stroke-width"?: any;
"style"?: any;
"surfaceScale"?: any;
"systemLanguage"?: any;
"tabindex"?: any;
"tableValues"?: any;
"target"?: any;
"targetX"?: any;
"targetY"?: any;
"text-anchor"?: any;
"text-decoration"?: any;
"text-rendering"?: any;
"textLength"?: any;
"to"?: any;
"transform"?: any;
"type"?: any;
"u1"?: any;
"u2"?: any;
"underline-position"?: any;
"underline-thickness"?: any;
"unicode"?: any;
"unicode-bidi"?: any;
"unicode-range"?: any;
"units-per-em"?: any;
"v-alphabetic"?: any;
"v-hanging"?: any;
"v-ideographic"?: any;
"v-mathematical"?: any;
"values"?: any;
"version"?: any;
"vert-adv-y"?: any;
"vert-origin-x"?: any;
"vert-origin-y"?: any;
"viewBox"?: any;
"viewTarget"?: any;
"visibility"?: any;
"width"?: any;
"widths"?: any;
"word-spacing"?: any;
"writing-mode"?: any;
"x"?: any;
"x-height"?: any;
"x1"?: any;
"x2"?: any;
"xChannelSelector"?: any;
"xlink:actuate"?: any;
"xlink:arcrole"?: any;
"xlink:href"?: any;
"xlink:role"?: any;
"xlink:show"?: any;
"xlink:title"?: any;
"xlink:type"?: any;
"xml:base"?: any;
"xml:lang"?: any;
"xml:space"?: any;
"y"?: any;
"y1"?: any;
"y2"?: any;
"yChannelSelector"?: any;
"z"?: any;
"zoomAndPan"?: any;
}
/**
* ============================================================================
* MAIN CLASS
* ============================================================================
* @hidden
*/
/**
* A base class for all SVG elements. Provides low-level DOM functionality.
*
* All visual elements extend this class.
*/
export declare class AMElement implements IDisposer {
/**
* Indicates if the element was already disposed.
*/
protected _isDisposed: boolean;
/**
* An SVG node of the element.
*/
node: SVGSVGElement;
/**
* Current X coordinate.
*/
private _x;
/**
* Current Y coordinate.
*/
private _y;
/**
*
*/
private _rotationY;
/**
*
*/
private _rotationX;
/**
* Current rotation.
*/
private _rotation;
/**
* Current scale.
*/
private _scale;
/**
* current value of transfrom string
*/
private _transformString;
/**
* Constructor creates a new element or uses the one that was passed in.
*
* @param element Element reference node type
*/
constructor(element: string | SVGSVGElement);
/**
* Removes element's node from DOM.
*/
removeNode(): void;
/**
* Returns `transform` attribute of the element.
*
* @ignore Exclude from docs
* @return Transform attribute value
*/
readonly transformString: $type.Optional<string>;
/**
* Appply position, rotation and scale properties via elemen's `transform`
* property
*
* @ignore Exclude from docs
*/
transform(): void;
/**
* Returns bounding box of the element.
*
* ATTENTION: Bounding box calculations are extremely costly so should be
* used sparingly and cached whenever possible.
*
* @return Bounding rectangle
*/
getBBox(): IRectangle;
/**
* Moves the element to new coordinates.
*
* @param x Target X
* @param y Target Y
*/
moveTo(point: IPoint): void;
/**
* Element's SVG contents.
*
* @param value Contents
*/
/**
* Returns element's contents as SVG markup.
*
* @return Contents
*/
content: string;
/**
* Text contents of the SVG element.
*
* @param value Text contents
*/
/**
* @return Text contents
*/
textContent: string;
/**
* Element's X position in pixels.
*
* @param value X coordinate (px)
*/
/**
* @return X coordinate (px)
*/
x: number;
/**
* Element's Y position in pixels.
*
* @param value Y coordinate (px)
*/
/**
* @return Y coordinate (px)
*/
y: number;
/**
* Element's rotation in degrees.
*
* @param value Rotation
*/
/**
* @return Rotation
*/
rotation: number;
/**
* @ignore
*/
/**
* @ignore
*/
rotationX: number;
/**
* @ignore
*/
/**
* @ignore
*/
rotationY: number;
/**
* Element's scale where 1 is original size.
*
* Setting to 0.5 will reduce element's size by 50%, 2 will make element
* twice as large, etc.
*
* @param value Scale
*/
/**
* @return Scale
*/
scale: number;
/**
* Removes an attribute from element.
*
* @param attribute Attribute to remove
*/
removeAttr(attribute: string): void;
/**
* Sets a set of attributes on a element.
*
* @param attributes An object with attribute names (key) and values
* @return The same element
*/
attr(attributes: ISVGAttribute): AMElement;
/**
* Returns a value of a node attribute.
*
* @param attribute Attribute name
* @return Attribute value
*/
getAttr(attribute: string): string | null;
/**
* Sets a single attribute of the element's node using namesspace.
*
* @param ns Namespace
* @param attribute Attribute
* @param value Value
* @return The same element
*/
attrNS(ns: string, attribute: string, value: string): AMElement;
/**
* Returns a namespaced attribute value from node.
*
* @param ns Namespace
* @param attribute Attribute
* @return Attribute value
*/
getAttrNS(ns: string, attribute: string): string;
/**
* Removes `style` attribute from node.
*
* @param attribute Attribute to remove
*/
removeStyle(attribute: string): void;
/**
* Returns style attribute value.
*
* @param attribute Style attribute value
* @return Attribute value
*/
getStyle(attribute: string): string;
/**
* Adds style attributes to element's node.
*
* @param attributes Object containing attribute: value pairs
* @return The same element
*/
addStyle(attributes: Object): AMElement;
/**
* Adds a class to element.
*
* @param name Class name
*/
addClass(name: string): void;
/**
* Removes a class from element.
*
* @param name Class name
*/
removeClass(name: string): void;
/**
* Sets a class name on element.
*
* @param name Class name
*/
setClass(name: string): void;
/**
* Removes all element's child nodes, basically leaving it empty.
*/
removeChildNodes(): void;
/**
* Was this element already been disposed?
*
* @return Disposed?
*/
isDisposed(): boolean;
/**
* Disposes element.
*/
dispose(): void;
}