scichart
Version:
Fast WebGL JavaScript Charting Library and Framework
196 lines (195 loc) • 6.92 kB
TypeScript
import { Rect } from "../../../Core/Rect";
import { BrushCache } from "../../Drawing/BrushCache";
import { Pen2DCache } from "../../Drawing/Pen2DCache";
import { WebGlRenderContext2D } from "../../Drawing/WebGlRenderContext2D";
import { CoordinateCalculatorBase } from "../../Numerics/CoordinateCalculators/CoordinateCalculatorBase";
import { SciChartSurface } from "../SciChartSurface";
import { EAnnotationType } from "./IAnnotation";
import { LineAnnotation, ILineAnnotationOptions } from "./LineAnnotation";
/**
* Enumeration of possible positions for the arrow head inside a {@link LineArrowAnnotation}
*/
export declare enum EArrowHeadPosition {
/**
* The arrowhead will be at `x2y2`
* Default value
*/
End = "End",
/**
* The arrowhead will be at `x1y1`
*/
Start = "Start",
/**
* One arrowhead will be at `x1y1` and another at `x2y2`
*/
StartEnd = "StartEnd"
}
/**
* Configuration for the arrowhead style
*/
export interface IArrowStyle {
/** The length (height) of the arrow head in pixels
* Default `10`
*/
headLength?: number;
/** The width of the arrow head in pixels
* Default `8`
*/
headWidth?: number;
/**
* The depth of the arrow head **relative** to the `arrowStyle.headLength` property.
*
* @note If `1`, the arrowhead will be an isosceles triangle
* @note If `0.5`, the arrowhead will have sharp wings
* @note If `0`, the arrow will not have a base nor a fill
*
* Default `0`
*/
headDepth?: number;
/** The fill color of the arrow head.
* @note If `arrowStyle.headDepth = 0`, this property will be ignored
*
* Default `transparent`
*/
fill?: string;
/** The stroke color of the arrow head
* Default `#FFFFFF`
*/
stroke?: string;
/** The stroke thickness of the arrow head in pixels
* Default `1`
*/
strokeThickness?: number;
}
/**
* The type of the onArrowHeadSizeChanged callback function
*/
export declare type TArrowheadSizeChangedCallback = (args: {
headLength: number;
headWidth: number;
headDepth: number;
angle: number;
x1: number;
y1: number;
x2: number;
y2: number;
}) => {
headLength?: number;
headWidth?: number;
headDepth?: number;
} | void;
/**
* Options passed to the constructor of a {@link LineArrowAnnotation}, used to configure it at instantiation time
*/
export interface ILineArrowAnnotationOptions extends ILineAnnotationOptions {
/** Configuration for the arrowhead style. See {@link IArrowStyle} for all properties */
arrowStyle?: IArrowStyle;
/** Position of the arrowhead(s) */
arrowHeadPosition?: EArrowHeadPosition;
/** Whether the arrowhead's size should be calculated relatively to zoom level of the chart or not
*
* @note If `true`, the arrowhead's width and height will scale along with the line annotation as you zoom the chart
*
* Default `false`
*/
isArrowHeadScalable?: boolean;
/**
* Optional callback that allows customization of arrowhead parameters before drawing
* @param args Object containing current arrowhead size parameters and line coordinates
* @returns Modified parameters or void to use default values
*/
onArrowHeadSizeChanged?: TArrowheadSizeChangedCallback | string;
}
/**
* @summary The {@link LineArrowAnnotation} provides an {@link LineAnnotation} which draws 1 or 2 arrow heads at
* x1y1, x2y2 coordinates over the {@link SciChartSurface}
* @description
* To add a {@link LineArrowAnnotation} to a {@link SciChartSurface}, use the following code:
* ```ts
* const sciChartSurface: SciChartSurface;
* const lineArrowAnnotation = new LineArrowAnnotation({
* x1: 1, y1: 3, x2: 2, y2: 4,
* stroke: "#FFFFFF",
* arrowHeadPosition: EArrowHeadPosition.End,
* arrowStyle: {
* headLength: 10,
* headWidth: 8,
* headDepth: 0.8,
* fill: "#000000",
* stroke: "#FFFFFF",
* strokeThickness: 2,
* },
* arrowHeadPosition: EArrowHeadPosition.End,
* isArrowHeadScalable: true
* });
* sciChartSurface.annotations.add(lineArrowAnnotation);
* ```
* @remarks Uses the fast WebGL/WebAssembly {@link WebGL2RenderingContext} for rendering
*/
export declare class LineArrowAnnotation extends LineAnnotation {
/** @inheritDoc */
readonly type: EAnnotationType;
protected arrowheadFillBrushCache: BrushCache;
protected arrowheadStrokePenCache: Pen2DCache;
private storedXRange;
private storedYRange;
private arrowStyleProperty;
private arrowHeadPositionProperty;
private isArrowHeadScalableProperty;
private onArrowHeadSizeChangedCallback?;
/**
* Creates a proxy for the arrow style object to trigger updates when properties change
*/
private getArrowStyleProxy;
/**
* Creates an instance of a LineArrowAnnotation
* @param options Optional parameters of type {@link ILineArrowAnnotationOptions} which configure the annotation upon construction
*/
constructor(options?: ILineArrowAnnotationOptions);
/**
* Gets the arrow style configuration
*/
get arrowStyle(): IArrowStyle;
/**
* Sets the arrow style configuration
*/
set arrowStyle(value: IArrowStyle);
/**
* Gets the position of the arrow head
*/
get arrowHeadPosition(): EArrowHeadPosition;
/**
* Sets the position of the arrow head
*/
set arrowHeadPosition(value: EArrowHeadPosition);
/**
* Gets whether the arrow head's sizes should be calculated relatively to the line length or not
*/
get isArrowHeadScalable(): boolean;
/**
* Sets whether the arrow head's sizes should be calculated relatively to the line length or not
*/
set isArrowHeadScalable(value: boolean);
/** @inheritDoc */
onAttach(scs: SciChartSurface): void;
/**
* Updates the fill brush and stroke pen for the arrowhead based on the current arrow style
*/
private updateArrowheadBrushes;
/** @inheritDoc */
delete(): void;
/** @inheritDoc */
drawWithContext(renderContext: WebGlRenderContext2D, xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, seriesViewRect: Rect, surfaceViewRect: Rect, chartViewRect: Rect): void;
private drawLine;
/**
* Used internally to draw the arrow head at the specified coordinates
*/
private drawArrowHead;
/** @inheritDoc */
protected notifyPropertyChanged(propertyName: string): void;
/** @inheritDoc */
toJSON(): {
type: EAnnotationType;
options: Required<Omit<import("./AnnotationBase").IAnnotationBaseOptions, never>>;
};
}