chartist 0.11.4 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE-WTFPL +5 -5
- package/README.md +142 -32
- package/dist/axes/AutoScaleAxis.d.ts +12 -0
- package/dist/axes/AutoScaleAxis.d.ts.map +1 -0
- package/dist/axes/Axis.d.ts +40 -0
- package/dist/axes/Axis.d.ts.map +1 -0
- package/dist/axes/FixedScaleAxis.d.ts +11 -0
- package/dist/axes/FixedScaleAxis.d.ts.map +1 -0
- package/dist/axes/StepAxis.d.ts +9 -0
- package/dist/axes/StepAxis.d.ts.map +1 -0
- package/dist/axes/index.d.ts +6 -0
- package/dist/axes/index.d.ts.map +1 -0
- package/dist/axes/types.d.ts +5 -0
- package/dist/axes/types.d.ts.map +1 -0
- package/dist/charts/BarChart/BarChart.d.ts +46 -0
- package/dist/charts/BarChart/BarChart.d.ts.map +1 -0
- package/dist/charts/BarChart/BarChart.types.d.ts +40 -0
- package/dist/charts/BarChart/BarChart.types.d.ts.map +1 -0
- package/dist/charts/BarChart/index.d.ts +3 -0
- package/dist/charts/BarChart/index.d.ts.map +1 -0
- package/dist/charts/BaseChart.d.ts +47 -0
- package/dist/charts/BaseChart.d.ts.map +1 -0
- package/dist/charts/LineChart/LineChart.d.ts +92 -0
- package/dist/charts/LineChart/LineChart.d.ts.map +1 -0
- package/dist/charts/LineChart/LineChart.types.d.ts +53 -0
- package/dist/charts/LineChart/LineChart.types.d.ts.map +1 -0
- package/dist/charts/LineChart/index.d.ts +3 -0
- package/dist/charts/LineChart/index.d.ts.map +1 -0
- package/dist/charts/PieChart/PieChart.d.ts +82 -0
- package/dist/charts/PieChart/PieChart.d.ts.map +1 -0
- package/dist/charts/PieChart/PieChart.types.d.ts +53 -0
- package/dist/charts/PieChart/PieChart.types.d.ts.map +1 -0
- package/dist/charts/PieChart/index.d.ts +3 -0
- package/dist/charts/PieChart/index.d.ts.map +1 -0
- package/dist/charts/index.d.ts +6 -0
- package/dist/charts/index.d.ts.map +1 -0
- package/dist/charts/types.d.ts +11 -0
- package/dist/charts/types.d.ts.map +1 -0
- package/dist/core/constants.d.ts +13 -0
- package/dist/core/constants.d.ts.map +1 -0
- package/dist/core/creation.d.ts +61 -0
- package/dist/core/creation.d.ts.map +1 -0
- package/dist/core/data/bounds.d.ts +14 -0
- package/dist/core/data/bounds.d.ts.map +1 -0
- package/dist/core/data/data.d.ts +23 -0
- package/dist/core/data/data.d.ts.map +1 -0
- package/dist/core/data/highLow.d.ts +13 -0
- package/dist/core/data/highLow.d.ts.map +1 -0
- package/dist/core/data/index.d.ts +7 -0
- package/dist/core/data/index.d.ts.map +1 -0
- package/dist/core/data/normalize.d.ts +11 -0
- package/dist/core/data/normalize.d.ts.map +1 -0
- package/dist/core/data/segments.d.ts +29 -0
- package/dist/core/data/segments.d.ts.map +1 -0
- package/dist/core/data/serialize.d.ts +12 -0
- package/dist/core/data/serialize.d.ts.map +1 -0
- package/dist/core/index.d.ts +8 -0
- package/dist/core/index.d.ts.map +1 -0
- package/dist/core/lang.d.ts +23 -0
- package/dist/core/lang.d.ts.map +1 -0
- package/dist/core/math.d.ts +42 -0
- package/dist/core/math.d.ts.map +1 -0
- package/dist/core/optionsProvider.d.ts +14 -0
- package/dist/core/optionsProvider.d.ts.map +1 -0
- package/dist/core/types.d.ts +204 -0
- package/dist/core/types.d.ts.map +1 -0
- package/dist/event/EventEmitter.d.ts +27 -0
- package/dist/event/EventEmitter.d.ts.map +1 -0
- package/dist/event/index.d.ts +2 -0
- package/dist/event/index.d.ts.map +1 -0
- package/dist/index.cjs +3557 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.css +2 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +3497 -0
- package/dist/index.js.map +1 -0
- package/dist/index.umd.js +2 -0
- package/dist/index.umd.js.map +1 -0
- package/dist/interpolation/cardinal.d.ts +28 -0
- package/dist/interpolation/cardinal.d.ts.map +1 -0
- package/dist/interpolation/index.d.ts +6 -0
- package/dist/interpolation/index.d.ts.map +1 -0
- package/dist/interpolation/monotoneCubic.d.ts +28 -0
- package/dist/interpolation/monotoneCubic.d.ts.map +1 -0
- package/dist/interpolation/none.d.ts +20 -0
- package/dist/interpolation/none.d.ts.map +1 -0
- package/dist/interpolation/simple.d.ts +28 -0
- package/dist/interpolation/simple.d.ts.map +1 -0
- package/dist/interpolation/step.d.ts +24 -0
- package/dist/interpolation/step.d.ts.map +1 -0
- package/dist/svg/Svg.d.ts +201 -0
- package/dist/svg/Svg.d.ts.map +1 -0
- package/dist/svg/SvgList.d.ts +31 -0
- package/dist/svg/SvgList.d.ts.map +1 -0
- package/dist/svg/SvgPath.d.ts +125 -0
- package/dist/svg/SvgPath.d.ts.map +1 -0
- package/dist/svg/animation.d.ts +37 -0
- package/dist/svg/animation.d.ts.map +1 -0
- package/dist/svg/index.d.ts +6 -0
- package/dist/svg/index.d.ts.map +1 -0
- package/dist/svg/types.d.ts +54 -0
- package/dist/svg/types.d.ts.map +1 -0
- package/dist/utils/extend.d.ts +10 -0
- package/dist/utils/extend.d.ts.map +1 -0
- package/dist/utils/functional.d.ts +30 -0
- package/dist/utils/functional.d.ts.map +1 -0
- package/dist/utils/index.d.ts +5 -0
- package/dist/utils/index.d.ts.map +1 -0
- package/dist/utils/types.d.ts +7 -0
- package/dist/utils/types.d.ts.map +1 -0
- package/dist/utils/utils.d.ts +27 -0
- package/dist/utils/utils.d.ts.map +1 -0
- package/package.json +36 -76
- package/CHANGELOG.md +0 -232
- package/dist/chartist.css +0 -615
- package/dist/chartist.css.map +0 -10
- package/dist/chartist.js +0 -4516
- package/dist/chartist.min.css +0 -1
- package/dist/chartist.min.js +0 -10
- package/dist/chartist.min.js.map +0 -1
- package/dist/scss/chartist.scss +0 -241
- package/dist/scss/settings/_chartist-settings.scss +0 -88
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { SegmentData } from '../core';
|
|
2
|
+
import { SvgPath } from '../svg';
|
|
3
|
+
export interface CardinalInterpolationOptions {
|
|
4
|
+
tension?: number;
|
|
5
|
+
fillHoles?: boolean;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* Cardinal / Catmull-Rome spline interpolation is the default smoothing function in Chartist. It produces nice results where the splines will always meet the points. It produces some artifacts though when data values are increased or decreased rapidly. The line may not follow a very accurate path and if the line should be accurate this smoothing function does not produce the best results.
|
|
9
|
+
*
|
|
10
|
+
* Cardinal splines can only be created if there are more than two data points. If this is not the case this smoothing will fallback to `Chartist.Smoothing.none`.
|
|
11
|
+
*
|
|
12
|
+
* All smoothing functions within Chartist are factory functions that accept an options parameter. The cardinal interpolation function accepts one configuration parameter `tension`, between 0 and 1, which controls the smoothing intensity.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* const chart = new LineChart('.ct-chart', {
|
|
16
|
+
* labels: [1, 2, 3, 4, 5],
|
|
17
|
+
* series: [[1, 2, 8, 1, 7]]
|
|
18
|
+
* }, {
|
|
19
|
+
* lineSmooth: Interpolation.cardinal({
|
|
20
|
+
* tension: 1,
|
|
21
|
+
* fillHoles: false
|
|
22
|
+
* })
|
|
23
|
+
* });
|
|
24
|
+
*
|
|
25
|
+
* @param options The options of the cardinal factory function.
|
|
26
|
+
*/
|
|
27
|
+
export declare function cardinal(options?: CardinalInterpolationOptions): (pathCoordinates: number[], valueData: SegmentData[]) => SvgPath;
|
|
28
|
+
//# sourceMappingURL=cardinal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cardinal.d.ts","sourceRoot":"","sources":["../../src/interpolation/cardinal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGjC,MAAM,WAAW,4BAA4B;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,QAAQ,CAAC,OAAO,CAAC,EAAE,4BAA4B,qBAW1C,MAAM,EAAE,aACd,WAAW,EAAE,KACvB,OAAO,CAsFX"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/interpolation/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { SegmentData } from '../core';
|
|
2
|
+
import { SvgPath } from '../svg';
|
|
3
|
+
export interface MonotoneCubicInterpolationOptions {
|
|
4
|
+
fillHoles?: boolean;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Monotone Cubic spline interpolation produces a smooth curve which preserves monotonicity. Unlike cardinal splines, the curve will not extend beyond the range of y-values of the original data points.
|
|
8
|
+
*
|
|
9
|
+
* Monotone Cubic splines can only be created if there are more than two data points. If this is not the case this smoothing will fallback to `Chartist.Smoothing.none`.
|
|
10
|
+
*
|
|
11
|
+
* The x-values of subsequent points must be increasing to fit a Monotone Cubic spline. If this condition is not met for a pair of adjacent points, then there will be a break in the curve between those data points.
|
|
12
|
+
*
|
|
13
|
+
* All smoothing functions within Chartist are factory functions that accept an options parameter.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* const chart = new LineChart('.ct-chart', {
|
|
17
|
+
* labels: [1, 2, 3, 4, 5],
|
|
18
|
+
* series: [[1, 2, 8, 1, 7]]
|
|
19
|
+
* }, {
|
|
20
|
+
* lineSmooth: Interpolation.monotoneCubic({
|
|
21
|
+
* fillHoles: false
|
|
22
|
+
* })
|
|
23
|
+
* });
|
|
24
|
+
*
|
|
25
|
+
* @param options The options of the monotoneCubic factory function.
|
|
26
|
+
*/
|
|
27
|
+
export declare function monotoneCubic(options?: MonotoneCubicInterpolationOptions): (pathCoordinates: number[], valueData: SegmentData[]) => SvgPath;
|
|
28
|
+
//# sourceMappingURL=monotoneCubic.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"monotoneCubic.d.ts","sourceRoot":"","sources":["../../src/interpolation/monotoneCubic.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGjC,MAAM,WAAW,iCAAiC;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,iCAAiC,qBAOpD,MAAM,EAAE,aACd,WAAW,EAAE,KACvB,OAAO,CAgGX"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { SegmentData } from '../core';
|
|
2
|
+
import { SvgPath } from '../svg';
|
|
3
|
+
export interface NoneInterpolationOptions {
|
|
4
|
+
fillHoles?: boolean;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* This interpolation function does not smooth the path and the result is only containing lines and no curves.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* const chart = new LineChart('.ct-chart', {
|
|
11
|
+
* labels: [1, 2, 3, 4, 5],
|
|
12
|
+
* series: [[1, 2, 8, 1, 7]]
|
|
13
|
+
* }, {
|
|
14
|
+
* lineSmooth: Interpolation.none({
|
|
15
|
+
* fillHoles: false
|
|
16
|
+
* })
|
|
17
|
+
* });
|
|
18
|
+
*/
|
|
19
|
+
export declare function none(options?: NoneInterpolationOptions): (pathCoordinates: number[], valueData: SegmentData[]) => SvgPath;
|
|
20
|
+
//# sourceMappingURL=none.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"none.d.ts","sourceRoot":"","sources":["../../src/interpolation/none.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEjC,MAAM,WAAW,wBAAwB;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,OAAO,CAAC,EAAE,wBAAwB,qBAOlC,MAAM,EAAE,aACd,WAAW,EAAE,aAyB3B"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { SegmentData } from '../core/types';
|
|
2
|
+
import { SvgPath } from '../svg';
|
|
3
|
+
export interface SimpleInteractionOptions {
|
|
4
|
+
divisor?: number;
|
|
5
|
+
fillHoles?: boolean;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* Simple smoothing creates horizontal handles that are positioned with a fraction of the length between two data points. You can use the divisor option to specify the amount of smoothing.
|
|
9
|
+
*
|
|
10
|
+
* Simple smoothing can be used instead of `Chartist.Smoothing.cardinal` if you'd like to get rid of the artifacts it produces sometimes. Simple smoothing produces less flowing lines but is accurate by hitting the points and it also doesn't swing below or above the given data point.
|
|
11
|
+
*
|
|
12
|
+
* All smoothing functions within Chartist are factory functions that accept an options parameter. The simple interpolation function accepts one configuration parameter `divisor`, between 1 and ∞, which controls the smoothing characteristics.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* const chart = new LineChart('.ct-chart', {
|
|
16
|
+
* labels: [1, 2, 3, 4, 5],
|
|
17
|
+
* series: [[1, 2, 8, 1, 7]]
|
|
18
|
+
* }, {
|
|
19
|
+
* lineSmooth: Interpolation.simple({
|
|
20
|
+
* divisor: 2,
|
|
21
|
+
* fillHoles: false
|
|
22
|
+
* })
|
|
23
|
+
* });
|
|
24
|
+
*
|
|
25
|
+
* @param options The options of the simple interpolation factory function.
|
|
26
|
+
*/
|
|
27
|
+
export declare function simple(options?: SimpleInteractionOptions): (pathCoordinates: number[], valueData: SegmentData[]) => SvgPath;
|
|
28
|
+
//# sourceMappingURL=simple.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"simple.d.ts","sourceRoot":"","sources":["../../src/interpolation/simple.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEjC,MAAM,WAAW,wBAAwB;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,MAAM,CAAC,OAAO,CAAC,EAAE,wBAAwB,qBAUpC,MAAM,EAAE,aACd,WAAW,EAAE,aAwC3B"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { SegmentData } from '../core';
|
|
2
|
+
import { SvgPath } from '../svg';
|
|
3
|
+
export interface StepInterpolationOptions {
|
|
4
|
+
postpone?: boolean;
|
|
5
|
+
fillHoles?: boolean;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* Step interpolation will cause the line chart to move in steps rather than diagonal or smoothed lines. This interpolation will create additional points that will also be drawn when the `showPoint` option is enabled.
|
|
9
|
+
*
|
|
10
|
+
* All smoothing functions within Chartist are factory functions that accept an options parameter. The step interpolation function accepts one configuration parameter `postpone`, that can be `true` or `false`. The default value is `true` and will cause the step to occur where the value actually changes. If a different behaviour is needed where the step is shifted to the left and happens before the actual value, this option can be set to `false`.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* var chart = new Chartist.Line('.ct-chart', {
|
|
14
|
+
* labels: [1, 2, 3, 4, 5],
|
|
15
|
+
* series: [[1, 2, 8, 1, 7]]
|
|
16
|
+
* }, {
|
|
17
|
+
* lineSmooth: Interpolation.step({
|
|
18
|
+
* postpone: true,
|
|
19
|
+
* fillHoles: false
|
|
20
|
+
* })
|
|
21
|
+
* });
|
|
22
|
+
*/
|
|
23
|
+
export declare function step(options?: StepInterpolationOptions): (pathCoordinates: number[], valueData: SegmentData[]) => SvgPath;
|
|
24
|
+
//# sourceMappingURL=step.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../src/interpolation/step.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEjC,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAAC,OAAO,CAAC,EAAE,wBAAwB,qBAQlC,MAAM,EAAE,aACd,WAAW,EAAE,aAwC3B"}
|
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
import type { EventEmitter } from '../event';
|
|
2
|
+
import type { Attributes, AnimationDefinition } from './types';
|
|
3
|
+
import { SvgList } from './SvgList';
|
|
4
|
+
/**
|
|
5
|
+
* Svg creates a new SVG object wrapper with a starting element. You can use the wrapper to fluently create sub-elements and modify them.
|
|
6
|
+
*/
|
|
7
|
+
export declare class Svg {
|
|
8
|
+
/**
|
|
9
|
+
* @todo Only there for chartist <1 compatibility. Remove after deprecation warining.
|
|
10
|
+
* @deprecated Use the animation module export `easings` directly.
|
|
11
|
+
*/
|
|
12
|
+
static readonly Easing: {
|
|
13
|
+
easeInSine: number[];
|
|
14
|
+
easeOutSine: number[];
|
|
15
|
+
easeInOutSine: number[];
|
|
16
|
+
easeInQuad: number[];
|
|
17
|
+
easeOutQuad: number[];
|
|
18
|
+
easeInOutQuad: number[];
|
|
19
|
+
easeInCubic: number[];
|
|
20
|
+
easeOutCubic: number[];
|
|
21
|
+
easeInOutCubic: number[];
|
|
22
|
+
easeInQuart: number[];
|
|
23
|
+
easeOutQuart: number[];
|
|
24
|
+
easeInOutQuart: number[];
|
|
25
|
+
easeInQuint: number[];
|
|
26
|
+
easeOutQuint: number[];
|
|
27
|
+
easeInOutQuint: number[];
|
|
28
|
+
easeInExpo: number[];
|
|
29
|
+
easeOutExpo: number[];
|
|
30
|
+
easeInOutExpo: number[];
|
|
31
|
+
easeInCirc: number[];
|
|
32
|
+
easeOutCirc: number[];
|
|
33
|
+
easeInOutCirc: number[];
|
|
34
|
+
easeInBack: number[];
|
|
35
|
+
easeOutBack: number[];
|
|
36
|
+
easeInOutBack: number[];
|
|
37
|
+
};
|
|
38
|
+
private _node;
|
|
39
|
+
/**
|
|
40
|
+
* @param name The name of the SVG element to create or an SVG dom element which should be wrapped into Svg
|
|
41
|
+
* @param attributes An object with properties that will be added as attributes to the SVG element that is created. Attributes with undefined values will not be added.
|
|
42
|
+
* @param className This class or class list will be added to the SVG element
|
|
43
|
+
* @param parent The parent SVG wrapper object where this newly created wrapper and it's element will be attached to as child
|
|
44
|
+
* @param insertFirst If this param is set to true in conjunction with a parent element the newly created element will be added as first child element in the parent element
|
|
45
|
+
*/
|
|
46
|
+
constructor(name: string | Element, attributes?: Attributes, className?: string, parent?: Svg, insertFirst?: boolean);
|
|
47
|
+
/**
|
|
48
|
+
* Set attributes on the current SVG element of the wrapper you're currently working on.
|
|
49
|
+
* @param attributes An object with properties that will be added as attributes to the SVG element that is created. Attributes with undefined values will not be added. If this parameter is a String then the function is used as a getter and will return the attribute value.
|
|
50
|
+
* @param ns If specified, the attribute will be obtained using getAttributeNs. In order to write namepsaced attributes you can use the namespace:attribute notation within the attributes object.
|
|
51
|
+
* @return The current wrapper object will be returned so it can be used for chaining or the attribute value if used as getter function.
|
|
52
|
+
*/
|
|
53
|
+
attr(attributes: string, ns?: string): string | null;
|
|
54
|
+
attr(attributes: Attributes): this;
|
|
55
|
+
/**
|
|
56
|
+
* Create a new SVG element whose wrapper object will be selected for further operations. This way you can also create nested groups easily.
|
|
57
|
+
* @param name The name of the SVG element that should be created as child element of the currently selected element wrapper
|
|
58
|
+
* @param attributes An object with properties that will be added as attributes to the SVG element that is created. Attributes with undefined values will not be added.
|
|
59
|
+
* @param className This class or class list will be added to the SVG element
|
|
60
|
+
* @param insertFirst If this param is set to true in conjunction with a parent element the newly created element will be added as first child element in the parent element
|
|
61
|
+
* @return Returns a Svg wrapper object that can be used to modify the containing SVG data
|
|
62
|
+
*/
|
|
63
|
+
elem(name: string, attributes?: Attributes, className?: string, insertFirst?: boolean): Svg;
|
|
64
|
+
/**
|
|
65
|
+
* Returns the parent Chartist.SVG wrapper object
|
|
66
|
+
* @return Returns a Svg wrapper around the parent node of the current node. If the parent node is not existing or it's not an SVG node then this function will return null.
|
|
67
|
+
*/
|
|
68
|
+
parent(): Svg | null;
|
|
69
|
+
/**
|
|
70
|
+
* This method returns a Svg wrapper around the root SVG element of the current tree.
|
|
71
|
+
* @return The root SVG element wrapped in a Svg element
|
|
72
|
+
*/
|
|
73
|
+
root(): Svg;
|
|
74
|
+
/**
|
|
75
|
+
* Find the first child SVG element of the current element that matches a CSS selector. The returned object is a Svg wrapper.
|
|
76
|
+
* @param selector A CSS selector that is used to query for child SVG elements
|
|
77
|
+
* @return The SVG wrapper for the element found or null if no element was found
|
|
78
|
+
*/
|
|
79
|
+
querySelector(selector: string): Svg | null;
|
|
80
|
+
/**
|
|
81
|
+
* Find the all child SVG elements of the current element that match a CSS selector. The returned object is a Svg.List wrapper.
|
|
82
|
+
* @param selector A CSS selector that is used to query for child SVG elements
|
|
83
|
+
* @return The SVG wrapper list for the element found or null if no element was found
|
|
84
|
+
*/
|
|
85
|
+
querySelectorAll(selector: string): SvgList;
|
|
86
|
+
/**
|
|
87
|
+
* Returns the underlying SVG node for the current element.
|
|
88
|
+
*/
|
|
89
|
+
getNode(): Element;
|
|
90
|
+
/**
|
|
91
|
+
* This method creates a foreignObject (see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject) that allows to embed HTML content into a SVG graphic. With the help of foreignObjects you can enable the usage of regular HTML elements inside of SVG where they are subject for SVG positioning and transformation but the Browser will use the HTML rendering capabilities for the containing DOM.
|
|
92
|
+
* @param content The DOM Node, or HTML string that will be converted to a DOM Node, that is then placed into and wrapped by the foreignObject
|
|
93
|
+
* @param attributes An object with properties that will be added as attributes to the foreignObject element that is created. Attributes with undefined values will not be added.
|
|
94
|
+
* @param className This class or class list will be added to the SVG element
|
|
95
|
+
* @param insertFirst Specifies if the foreignObject should be inserted as first child
|
|
96
|
+
* @return New wrapper object that wraps the foreignObject element
|
|
97
|
+
*/
|
|
98
|
+
foreignObject(content: string | Node, attributes?: Attributes, className?: string, insertFirst?: boolean): Svg;
|
|
99
|
+
/**
|
|
100
|
+
* This method adds a new text element to the current Svg wrapper.
|
|
101
|
+
* @param t The text that should be added to the text element that is created
|
|
102
|
+
* @return The same wrapper object that was used to add the newly created element
|
|
103
|
+
*/
|
|
104
|
+
text(t: string): this;
|
|
105
|
+
/**
|
|
106
|
+
* This method will clear all child nodes of the current wrapper object.
|
|
107
|
+
* @return The same wrapper object that got emptied
|
|
108
|
+
*/
|
|
109
|
+
empty(): this;
|
|
110
|
+
/**
|
|
111
|
+
* This method will cause the current wrapper to remove itself from its parent wrapper. Use this method if you'd like to get rid of an element in a given DOM structure.
|
|
112
|
+
* @return The parent wrapper object of the element that got removed
|
|
113
|
+
*/
|
|
114
|
+
remove(): Svg | null;
|
|
115
|
+
/**
|
|
116
|
+
* This method will replace the element with a new element that can be created outside of the current DOM.
|
|
117
|
+
* @param newElement The new Svg object that will be used to replace the current wrapper object
|
|
118
|
+
* @return The wrapper of the new element
|
|
119
|
+
*/
|
|
120
|
+
replace(newElement: Svg): Svg;
|
|
121
|
+
/**
|
|
122
|
+
* This method will append an element to the current element as a child.
|
|
123
|
+
* @param element The Svg element that should be added as a child
|
|
124
|
+
* @param insertFirst Specifies if the element should be inserted as first child
|
|
125
|
+
* @return The wrapper of the appended object
|
|
126
|
+
*/
|
|
127
|
+
append(element: Svg, insertFirst?: boolean): this;
|
|
128
|
+
/**
|
|
129
|
+
* Returns an array of class names that are attached to the current wrapper element. This method can not be chained further.
|
|
130
|
+
* @return A list of classes or an empty array if there are no classes on the current element
|
|
131
|
+
*/
|
|
132
|
+
classes(): string[];
|
|
133
|
+
/**
|
|
134
|
+
* Adds one or a space separated list of classes to the current element and ensures the classes are only existing once.
|
|
135
|
+
* @param names A white space separated list of class names
|
|
136
|
+
* @return The wrapper of the current element
|
|
137
|
+
*/
|
|
138
|
+
addClass(names: string): this;
|
|
139
|
+
/**
|
|
140
|
+
* Removes one or a space separated list of classes from the current element.
|
|
141
|
+
* @param names A white space separated list of class names
|
|
142
|
+
* @return The wrapper of the current element
|
|
143
|
+
*/
|
|
144
|
+
removeClass(names: string): this;
|
|
145
|
+
/**
|
|
146
|
+
* Removes all classes from the current element.
|
|
147
|
+
* @return The wrapper of the current element
|
|
148
|
+
*/
|
|
149
|
+
removeAllClasses(): this;
|
|
150
|
+
/**
|
|
151
|
+
* Get element height using `getBoundingClientRect`
|
|
152
|
+
* @return The elements height in pixels
|
|
153
|
+
*/
|
|
154
|
+
height(): number;
|
|
155
|
+
/**
|
|
156
|
+
* Get element width using `getBoundingClientRect`
|
|
157
|
+
* @return The elements width in pixels
|
|
158
|
+
*/
|
|
159
|
+
width(): number;
|
|
160
|
+
/**
|
|
161
|
+
* The animate function lets you animate the current element with SMIL animations. You can add animations for multiple attributes at the same time by using an animation definition object. This object should contain SMIL animation attributes. Please refer to http://www.w3.org/TR/SVG/animate.html for a detailed specification about the available animation attributes. Additionally an easing property can be passed in the animation definition object. This can be a string with a name of an easing function in `Svg.Easing` or an array with four numbers specifying a cubic Bézier curve.
|
|
162
|
+
* **An animations object could look like this:**
|
|
163
|
+
* ```javascript
|
|
164
|
+
* element.animate({
|
|
165
|
+
* opacity: {
|
|
166
|
+
* dur: 1000,
|
|
167
|
+
* from: 0,
|
|
168
|
+
* to: 1
|
|
169
|
+
* },
|
|
170
|
+
* x1: {
|
|
171
|
+
* dur: '1000ms',
|
|
172
|
+
* from: 100,
|
|
173
|
+
* to: 200,
|
|
174
|
+
* easing: 'easeOutQuart'
|
|
175
|
+
* },
|
|
176
|
+
* y1: {
|
|
177
|
+
* dur: '2s',
|
|
178
|
+
* from: 0,
|
|
179
|
+
* to: 100
|
|
180
|
+
* }
|
|
181
|
+
* });
|
|
182
|
+
* ```
|
|
183
|
+
* **Automatic unit conversion**
|
|
184
|
+
* For the `dur` and the `begin` animate attribute you can also omit a unit by passing a number. The number will automatically be converted to milli seconds.
|
|
185
|
+
* **Guided mode**
|
|
186
|
+
* The default behavior of SMIL animations with offset using the `begin` attribute is that the attribute will keep it's original value until the animation starts. Mostly this behavior is not desired as you'd like to have your element attributes already initialized with the animation `from` value even before the animation starts. Also if you don't specify `fill="freeze"` on an animate element or if you delete the animation after it's done (which is done in guided mode) the attribute will switch back to the initial value. This behavior is also not desired when performing simple one-time animations. For one-time animations you'd want to trigger animations immediately instead of relative to the document begin time. That's why in guided mode Svg will also use the `begin` property to schedule a timeout and manually start the animation after the timeout. If you're using multiple SMIL definition objects for an attribute (in an array), guided mode will be disabled for this attribute, even if you explicitly enabled it.
|
|
187
|
+
* If guided mode is enabled the following behavior is added:
|
|
188
|
+
* - Before the animation starts (even when delayed with `begin`) the animated attribute will be set already to the `from` value of the animation
|
|
189
|
+
* - `begin` is explicitly set to `indefinite` so it can be started manually without relying on document begin time (creation)
|
|
190
|
+
* - The animate element will be forced to use `fill="freeze"`
|
|
191
|
+
* - The animation will be triggered with `beginElement()` in a timeout where `begin` of the definition object is interpreted in milli seconds. If no `begin` was specified the timeout is triggered immediately.
|
|
192
|
+
* - After the animation the element attribute value will be set to the `to` value of the animation
|
|
193
|
+
* - The animate element is deleted from the DOM
|
|
194
|
+
* @param animations An animations object where the property keys are the attributes you'd like to animate. The properties should be objects again that contain the SMIL animation attributes (usually begin, dur, from, and to). The property begin and dur is auto converted (see Automatic unit conversion). You can also schedule multiple animations for the same attribute by passing an Array of SMIL definition objects. Attributes that contain an array of SMIL definition objects will not be executed in guided mode.
|
|
195
|
+
* @param guided Specify if guided mode should be activated for this animation (see Guided mode). If not otherwise specified, guided mode will be activated.
|
|
196
|
+
* @param eventEmitter If specified, this event emitter will be notified when an animation starts or ends.
|
|
197
|
+
* @return The current element where the animation was added
|
|
198
|
+
*/
|
|
199
|
+
animate(animations: Record<string, AnimationDefinition | AnimationDefinition[]>, guided?: boolean, eventEmitter?: EventEmitter): this;
|
|
200
|
+
}
|
|
201
|
+
//# sourceMappingURL=Svg.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Svg.d.ts","sourceRoot":"","sources":["../../src/svg/Svg.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC;;GAEG;AACH,qBAAa,GAAG;IACd;;;OAGG;IACH,MAAM,CAAC,QAAQ,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;MAAW;IAEjC,OAAO,CAAC,KAAK,CAAU;IAEvB;;;;;;OAMG;gBAED,IAAI,EAAE,MAAM,GAAG,OAAO,EACtB,UAAU,CAAC,EAAE,UAAU,EACvB,SAAS,CAAC,EAAE,MAAM,EAClB,MAAM,CAAC,EAAE,GAAG,EACZ,WAAW,UAAQ;IAiCrB;;;;;OAKG;IACH,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IACpD,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI;IA+BlC;;;;;;;OAOG;IACH,IAAI,CACF,IAAI,EAAE,MAAM,EACZ,UAAU,CAAC,EAAE,UAAU,EACvB,SAAS,CAAC,EAAE,MAAM,EAClB,WAAW,UAAQ;IAKrB;;;OAGG;IACH,MAAM;IAMN;;;OAGG;IACH,IAAI;IAcJ;;;;OAIG;IACH,aAAa,CAAC,QAAQ,EAAE,MAAM;IAK9B;;;;OAIG;IACH,gBAAgB,CAAC,QAAQ,EAAE,MAAM;IAKjC;;OAEG;IACH,OAAO;IAIP;;;;;;;OAOG;IACH,aAAa,CACX,OAAO,EAAE,MAAM,GAAG,IAAI,EACtB,UAAU,CAAC,EAAE,UAAU,EACvB,SAAS,CAAC,EAAE,MAAM,EAClB,WAAW,UAAQ;IAiCrB;;;;OAIG;IACH,IAAI,CAAC,CAAC,EAAE,MAAM;IAKd;;;OAGG;IACH,KAAK;IAQL;;;OAGG;IACH,MAAM;IAKN;;;;OAIG;IACH,OAAO,CAAC,UAAU,EAAE,GAAG;IAKvB;;;;;OAKG;IACH,MAAM,CAAC,OAAO,EAAE,GAAG,EAAE,WAAW,UAAQ;IAUxC;;;OAGG;IACH,OAAO;IAMP;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM;IActB;;;;OAIG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM;IAazB;;;OAGG;IACH,gBAAgB;IAKhB;;;OAGG;IACH,MAAM;IAIN;;;OAGG;IACH,KAAK;IAIL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAsCG;IACH,OAAO,CACL,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,GAAG,mBAAmB,EAAE,CAAC,EACvE,MAAM,UAAO,EACb,YAAY,CAAC,EAAE,YAAY;CA6B9B"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { Svg } from './Svg';
|
|
2
|
+
declare type SvgMethods = Exclude<keyof Svg, 'constructor' | 'parent' | 'querySelector' | 'querySelectorAll' | 'replace' | 'append' | 'classes' | 'height' | 'width'>;
|
|
3
|
+
declare type SvgListMethods = {
|
|
4
|
+
[method in SvgMethods]: (...args: Parameters<Svg[method]>) => SvgList;
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* This helper class is to wrap multiple `Svg` elements into a list where you can call the `Svg` functions on all elements in the list with one call. This is helpful when you'd like to perform calls with `Svg` on multiple elements.
|
|
8
|
+
* An instance of this class is also returned by `Svg.querySelectorAll`.
|
|
9
|
+
*/
|
|
10
|
+
export declare class SvgList implements SvgListMethods {
|
|
11
|
+
private svgElements;
|
|
12
|
+
/**
|
|
13
|
+
* @param nodeList An Array of SVG DOM nodes or a SVG DOM NodeList (as returned by document.querySelectorAll)
|
|
14
|
+
*/
|
|
15
|
+
constructor(nodeList: ArrayLike<Element>);
|
|
16
|
+
private call;
|
|
17
|
+
attr(...args: Parameters<Svg['attr']>): this;
|
|
18
|
+
elem(...args: Parameters<Svg['elem']>): this;
|
|
19
|
+
root(...args: Parameters<Svg['root']>): this;
|
|
20
|
+
getNode(...args: Parameters<Svg['getNode']>): this;
|
|
21
|
+
foreignObject(...args: Parameters<Svg['foreignObject']>): this;
|
|
22
|
+
text(...args: Parameters<Svg['text']>): this;
|
|
23
|
+
empty(...args: Parameters<Svg['empty']>): this;
|
|
24
|
+
remove(...args: Parameters<Svg['remove']>): this;
|
|
25
|
+
addClass(...args: Parameters<Svg['addClass']>): this;
|
|
26
|
+
removeClass(...args: Parameters<Svg['removeClass']>): this;
|
|
27
|
+
removeAllClasses(...args: Parameters<Svg['removeAllClasses']>): this;
|
|
28
|
+
animate(...args: Parameters<Svg['animate']>): this;
|
|
29
|
+
}
|
|
30
|
+
export {};
|
|
31
|
+
//# sourceMappingURL=SvgList.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SvgList.d.ts","sourceRoot":"","sources":["../../src/svg/SvgList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,aAAK,UAAU,GAAG,OAAO,CACvB,MAAM,GAAG,EACP,aAAa,GACb,QAAQ,GACR,eAAe,GACf,kBAAkB,GAClB,SAAS,GACT,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,OAAO,CACV,CAAC;AAEF,aAAK,cAAc,GAAG;KACnB,MAAM,IAAI,UAAU,GAAG,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,KAAK,OAAO;CACtE,CAAC;AAEF;;;GAGG;AACH,qBAAa,OAAQ,YAAW,cAAc;IAC5C,OAAO,CAAC,WAAW,CAAa;IAEhC;;OAEG;gBACS,QAAQ,EAAE,SAAS,CAAC,OAAO,CAAC;IAMxC,OAAO,CAAC,IAAI;IAOZ,IAAI,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAIrC,IAAI,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAIrC,IAAI,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAIrC,OAAO,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAI3C,aAAa,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IAIvD,IAAI,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAIrC,KAAK,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAIvC,MAAM,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAIzC,QAAQ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAI7C,WAAW,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAInD,gBAAgB,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAI7D,OAAO,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;CAG5C"}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import type { SegmentData } from '../core';
|
|
2
|
+
import type { SvgPathOptions, PathCommand, PathParams } from './types';
|
|
3
|
+
export declare class SvgPath {
|
|
4
|
+
private readonly close;
|
|
5
|
+
/**
|
|
6
|
+
* This static function on `SvgPath` is joining multiple paths together into one paths.
|
|
7
|
+
* @param paths A list of paths to be joined together. The order is important.
|
|
8
|
+
* @param close If the newly created path should be a closed path
|
|
9
|
+
* @param options Path options for the newly created path.
|
|
10
|
+
*/
|
|
11
|
+
static join(paths: SvgPath[], close?: boolean, options?: SvgPathOptions): SvgPath;
|
|
12
|
+
pathElements: PathCommand[];
|
|
13
|
+
private pos;
|
|
14
|
+
private options;
|
|
15
|
+
/**
|
|
16
|
+
* Used to construct a new path object.
|
|
17
|
+
* @param close If set to true then this path will be closed when stringified (with a Z at the end)
|
|
18
|
+
* @param options Options object that overrides the default objects. See default options for more details.
|
|
19
|
+
*/
|
|
20
|
+
constructor(close?: boolean, options?: SvgPathOptions);
|
|
21
|
+
/**
|
|
22
|
+
* Gets or sets the current position (cursor) inside of the path. You can move around the cursor freely but limited to 0 or the count of existing elements. All modifications with element functions will insert new elements at the position of this cursor.
|
|
23
|
+
* @param pos If a number is passed then the cursor is set to this position in the path element array.
|
|
24
|
+
* @return If the position parameter was passed then the return value will be the path object for easy call chaining. If no position parameter was passed then the current position is returned.
|
|
25
|
+
*/
|
|
26
|
+
position(pos: number): this;
|
|
27
|
+
position(): number;
|
|
28
|
+
/**
|
|
29
|
+
* Removes elements from the path starting at the current position.
|
|
30
|
+
* @param count Number of path elements that should be removed from the current position.
|
|
31
|
+
* @return The current path object for easy call chaining.
|
|
32
|
+
*/
|
|
33
|
+
remove(count: number): this;
|
|
34
|
+
/**
|
|
35
|
+
* Use this function to add a new move SVG path element.
|
|
36
|
+
* @param x The x coordinate for the move element.
|
|
37
|
+
* @param y The y coordinate for the move element.
|
|
38
|
+
* @param relative If set to true the move element will be created with relative coordinates (lowercase letter)
|
|
39
|
+
* @param data Any data that should be stored with the element object that will be accessible in pathElement
|
|
40
|
+
* @return The current path object for easy call chaining.
|
|
41
|
+
*/
|
|
42
|
+
move(x: number, y: number, relative?: boolean, data?: SegmentData): this;
|
|
43
|
+
/**
|
|
44
|
+
* Use this function to add a new line SVG path element.
|
|
45
|
+
* @param x The x coordinate for the line element.
|
|
46
|
+
* @param y The y coordinate for the line element.
|
|
47
|
+
* @param relative If set to true the line element will be created with relative coordinates (lowercase letter)
|
|
48
|
+
* @param data Any data that should be stored with the element object that will be accessible in pathElement
|
|
49
|
+
* @return The current path object for easy call chaining.
|
|
50
|
+
*/
|
|
51
|
+
line(x: number, y: number, relative?: boolean, data?: SegmentData): this;
|
|
52
|
+
/**
|
|
53
|
+
* Use this function to add a new curve SVG path element.
|
|
54
|
+
* @param x1 The x coordinate for the first control point of the bezier curve.
|
|
55
|
+
* @param y1 The y coordinate for the first control point of the bezier curve.
|
|
56
|
+
* @param x2 The x coordinate for the second control point of the bezier curve.
|
|
57
|
+
* @param y2 The y coordinate for the second control point of the bezier curve.
|
|
58
|
+
* @param x The x coordinate for the target point of the curve element.
|
|
59
|
+
* @param y The y coordinate for the target point of the curve element.
|
|
60
|
+
* @param relative If set to true the curve element will be created with relative coordinates (lowercase letter)
|
|
61
|
+
* @param data Any data that should be stored with the element object that will be accessible in pathElement
|
|
62
|
+
* @return The current path object for easy call chaining.
|
|
63
|
+
*/
|
|
64
|
+
curve(x1: number, y1: number, x2: number, y2: number, x: number, y: number, relative?: boolean, data?: SegmentData): this;
|
|
65
|
+
/**
|
|
66
|
+
* Use this function to add a new non-bezier curve SVG path element.
|
|
67
|
+
* @param rx The radius to be used for the x-axis of the arc.
|
|
68
|
+
* @param ry The radius to be used for the y-axis of the arc.
|
|
69
|
+
* @param xAr Defines the orientation of the arc
|
|
70
|
+
* @param lAf Large arc flag
|
|
71
|
+
* @param sf Sweep flag
|
|
72
|
+
* @param x The x coordinate for the target point of the curve element.
|
|
73
|
+
* @param y The y coordinate for the target point of the curve element.
|
|
74
|
+
* @param relative If set to true the curve element will be created with relative coordinates (lowercase letter)
|
|
75
|
+
* @param data Any data that should be stored with the element object that will be accessible in pathElement
|
|
76
|
+
* @return The current path object for easy call chaining.
|
|
77
|
+
*/
|
|
78
|
+
arc(rx: number, ry: number, xAr: number, lAf: number, sf: number, x: number, y: number, relative?: boolean, data?: SegmentData): this;
|
|
79
|
+
/**
|
|
80
|
+
* Parses an SVG path seen in the d attribute of path elements, and inserts the parsed elements into the existing path object at the current cursor position. Any closing path indicators (Z at the end of the path) will be ignored by the parser as this is provided by the close option in the options of the path object.
|
|
81
|
+
* @param path Any SVG path that contains move (m), line (l) or curve (c) components.
|
|
82
|
+
* @return The current path object for easy call chaining.
|
|
83
|
+
*/
|
|
84
|
+
parse(path: string): this;
|
|
85
|
+
/**
|
|
86
|
+
* This function renders to current SVG path object into a final SVG string that can be used in the d attribute of SVG path elements. It uses the accuracy option to round big decimals. If the close parameter was set in the constructor of this path object then a path closing Z will be appended to the output string.
|
|
87
|
+
*/
|
|
88
|
+
stringify(): string;
|
|
89
|
+
/**
|
|
90
|
+
* Scales all elements in the current SVG path object. There is an individual parameter for each coordinate. Scaling will also be done for control points of curves, affecting the given coordinate.
|
|
91
|
+
* @param x The number which will be used to scale the x, x1 and x2 of all path elements.
|
|
92
|
+
* @param y The number which will be used to scale the y, y1 and y2 of all path elements.
|
|
93
|
+
* @return The current path object for easy call chaining.
|
|
94
|
+
*/
|
|
95
|
+
scale(x: number, y: number): this;
|
|
96
|
+
/**
|
|
97
|
+
* Translates all elements in the current SVG path object. The translation is relative and there is an individual parameter for each coordinate. Translation will also be done for control points of curves, affecting the given coordinate.
|
|
98
|
+
* @param x The number which will be used to translate the x, x1 and x2 of all path elements.
|
|
99
|
+
* @param y The number which will be used to translate the y, y1 and y2 of all path elements.
|
|
100
|
+
* @return The current path object for easy call chaining.
|
|
101
|
+
*/
|
|
102
|
+
translate(x: number, y: number): this;
|
|
103
|
+
/**
|
|
104
|
+
* This function will run over all existing path elements and then loop over their attributes. The callback function will be called for every path element attribute that exists in the current path.
|
|
105
|
+
* The method signature of the callback function looks like this:
|
|
106
|
+
* ```javascript
|
|
107
|
+
* function(pathElement, paramName, pathElementIndex, paramIndex, pathElements)
|
|
108
|
+
* ```
|
|
109
|
+
* If something else than undefined is returned by the callback function, this value will be used to replace the old value. This allows you to build custom transformations of path objects that can't be achieved using the basic transformation functions scale and translate.
|
|
110
|
+
* @param transformFnc The callback function for the transformation. Check the signature in the function description.
|
|
111
|
+
* @return The current path object for easy call chaining.
|
|
112
|
+
*/
|
|
113
|
+
transform(transformFnc: <T extends PathParams = PathParams>(cmd: PathCommand<T>, param: keyof T, cmdIndex: number, paramIndex: number, cmds: PathCommand<T>[]) => number | void): this;
|
|
114
|
+
/**
|
|
115
|
+
* This function clones a whole path object with all its properties. This is a deep clone and path element objects will also be cloned.
|
|
116
|
+
* @param close Optional option to set the new cloned path to closed. If not specified or false, the original path close option will be used.
|
|
117
|
+
*/
|
|
118
|
+
clone(close?: boolean): SvgPath;
|
|
119
|
+
/**
|
|
120
|
+
* Split a Svg.Path object by a specific command in the path chain. The path chain will be split and an array of newly created paths objects will be returned. This is useful if you'd like to split an SVG path by it's move commands, for example, in order to isolate chunks of drawings.
|
|
121
|
+
* @param command The command you'd like to use to split the path
|
|
122
|
+
*/
|
|
123
|
+
splitByCommand(command: string): SvgPath[];
|
|
124
|
+
}
|
|
125
|
+
//# sourceMappingURL=SvgPath.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SvgPath.d.ts","sourceRoot":"","sources":["../../src/svg/SvgPath.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AA8DvE,qBAAa,OAAO;IA2BN,OAAO,CAAC,QAAQ,CAAC,KAAK;IA1BlC;;;;;OAKG;IACH,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,KAAK,UAAQ,EAAE,OAAO,CAAC,EAAE,cAAc;IAWrE,YAAY,EAAE,WAAW,EAAE,CAAM;IACjC,OAAO,CAAC,GAAG,CAAK;IAChB,OAAO,CAAC,OAAO,CAA2B;IAE1C;;;;OAIG;gBAC0B,KAAK,UAAQ,EAAE,OAAO,CAAC,EAAE,cAAc;IAIpE;;;;OAIG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAC3B,QAAQ,IAAI,MAAM;IAUlB;;;;OAIG;IACH,MAAM,CAAC,KAAK,EAAE,MAAM;IAKpB;;;;;;;OAOG;IACH,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,UAAQ,EAAE,IAAI,CAAC,EAAE,WAAW;IAe/D;;;;;;;OAOG;IACH,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,UAAQ,EAAE,IAAI,CAAC,EAAE,WAAW;IAe/D;;;;;;;;;;;OAWG;IACH,KAAK,CACH,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,QAAQ,UAAQ,EAChB,IAAI,CAAC,EAAE,WAAW;IAoBpB;;;;;;;;;;;;OAYG;IACH,GAAG,CACD,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM,EACX,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,QAAQ,UAAQ,EAChB,IAAI,CAAC,EAAE,WAAW;IAqBpB;;;;OAIG;IACH,KAAK,CAAC,IAAI,EAAE,MAAM;IA8ClB;;OAEG;IACH,SAAS;IAoBT;;;;;OAKG;IACH,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAO1B;;;;;OAKG;IACH,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAO9B;;;;;;;;;OASG;IACH,SAAS,CACP,YAAY,EAAE,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,EAC9C,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,EACnB,KAAK,EAAE,MAAM,CAAC,EACd,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,KACnB,MAAM,GAAG,IAAI;IAoBpB;;;OAGG;IACH,KAAK,CAAC,KAAK,UAAQ;IAUnB;;;OAGG;IACH,cAAc,CAAC,OAAO,EAAE,MAAM;CAgB/B"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import type { EventEmitter } from '../event';
|
|
2
|
+
import type { AnimationDefinition } from './types';
|
|
3
|
+
import type { Svg } from './Svg';
|
|
4
|
+
/**
|
|
5
|
+
* This Object contains some standard easing cubic bezier curves.
|
|
6
|
+
* Then can be used with their name in the `Svg.animate`.
|
|
7
|
+
* You can also extend the list and use your own name in the `animate` function.
|
|
8
|
+
* Click the show code button to see the available bezier functions.
|
|
9
|
+
*/
|
|
10
|
+
export declare const easings: {
|
|
11
|
+
easeInSine: number[];
|
|
12
|
+
easeOutSine: number[];
|
|
13
|
+
easeInOutSine: number[];
|
|
14
|
+
easeInQuad: number[];
|
|
15
|
+
easeOutQuad: number[];
|
|
16
|
+
easeInOutQuad: number[];
|
|
17
|
+
easeInCubic: number[];
|
|
18
|
+
easeOutCubic: number[];
|
|
19
|
+
easeInOutCubic: number[];
|
|
20
|
+
easeInQuart: number[];
|
|
21
|
+
easeOutQuart: number[];
|
|
22
|
+
easeInOutQuart: number[];
|
|
23
|
+
easeInQuint: number[];
|
|
24
|
+
easeOutQuint: number[];
|
|
25
|
+
easeInOutQuint: number[];
|
|
26
|
+
easeInExpo: number[];
|
|
27
|
+
easeOutExpo: number[];
|
|
28
|
+
easeInOutExpo: number[];
|
|
29
|
+
easeInCirc: number[];
|
|
30
|
+
easeOutCirc: number[];
|
|
31
|
+
easeInOutCirc: number[];
|
|
32
|
+
easeInBack: number[];
|
|
33
|
+
easeOutBack: number[];
|
|
34
|
+
easeInOutBack: number[];
|
|
35
|
+
};
|
|
36
|
+
export declare function createAnimation(element: Svg, attribute: string, animationDefinition: AnimationDefinition, createGuided?: boolean, eventEmitter?: EventEmitter): void;
|
|
37
|
+
//# sourceMappingURL=animation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../src/svg/animation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,OAAO,KAAK,EAAc,mBAAmB,EAAkB,MAAM,SAAS,CAAC;AAC/E,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC;;;;;GAKG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;CAyBnB,CAAC;AAEF,wBAAgB,eAAe,CAC7B,OAAO,EAAE,GAAG,EACZ,SAAS,EAAE,MAAM,EACjB,mBAAmB,EAAE,mBAAmB,EACxC,YAAY,UAAQ,EACpB,YAAY,CAAC,EAAE,YAAY,QA0F5B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svg/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC"}
|