import { EventHandler } from "../../Core/EventHandler"; import { MouseManager } from "../../Core/Mouse/MouseManager"; import { ObservableArray } from "../../Core/ObservableArray"; import { VisibilityObserver } from "../../Core/ObserveVisibility"; import { PropertyChangedEventArgs } from "../../Core/PropertyChangedEventArgs"; import { Rect } from "../../Core/Rect"; import { Thickness } from "../../Core/Thickness"; import { ESurfaceType } from "../../types/SurfaceType"; import { EThemeProviderType } from "../../types/ThemeProviderType"; import { TSciChart } from "../../types/TSciChart"; import { TSciChart3D } from "../../types/TSciChart3D"; import { TSciChartSurfaceCanvases } from "../../types/TSciChartSurfaceCanvases"; import { IChartModifierBase } from "../ChartModifiers/ChartModifierBase"; import { IThemePartial, IThemeProvider } from "../Themes/IThemeProvider"; import { AdornerLayer } from "./Annotations/AdornerLayer"; import { IAnnotation } from "./Annotations/IAnnotation"; import { AxisCore } from "./Axis/AxisCore"; import { ISciChartLoader } from "./loader"; import { TDpiChangedEventArgs } from "./TextureManager/DpiHelper"; import { UpdateSuspender } from "./UpdateSuspender"; import { TLicenseContext } from "../../types/LicenseContext"; import { SciChartSurfaceCore } from "./SciChartSurfaceCore"; import { TSciChartDestination } from "../../types/SurfaceDestination"; import { ISciChartSurfaceNative } from "./ISciChartSurfaceNative"; export declare type TSciChartConfig = { /** * The url where the wasm file is located * * As of v4.0 the .data file is embedded in the wasm file. You may need to remove config in your build process that tries to copy the .data file */ wasmUrl?: string; /** * The url where the no-simd fallback for wasm is located * * This needs to be served when {@link SciChartDefaults.useWasmSimd} is any option other than "Always" and will be loaded as a fallback * for browsers that do not support wasm Simd (Chrome v90 or below - 2021, Safari v16.3 or below - 2023, Firefox v88 or below - 2021). * * if wasmNoSimdUrl is not provided, we will try to calculate it from the provided wasmUrl or other defaults. */ wasmNoSimdUrl?: string; /** Internal testing use only */ testWasm?: TSciChart | TSciChart3D; }; export interface ISurfaceOptionsBase { /** * Allows you to set custom Id for the surface; * @remarks If skipped the Id will be auto-generated */ id?: string; /** * Optional - The theme applied to the {@link SciChartSurfaceBase} on startup * @remarks see {@link IThemeProvider} for properties which can affect SciChart theme. Two default * themes are included out of the box {@link SciChartJSLightTheme} and {@link SciChartJSDarkTheme}. * Custom themes may be created by implementing {@link IThemeProvider} */ theme?: IThemeProvider | ({ type: string | EThemeProviderType; } & IThemePartial); /** * Allows you to customize the loading elements or animation as part of the HTML page / DOM when a {@link SciChartSurface} * or {@link SciChart3DSurface} is loading WebAssembly. * * Set to false for disabling. */ loader?: false | ISciChartLoader | { type: string; options?: any; }; /** * Sets a `touch-action` property to the canvas style. * Useful if touch interactions in browser should be configured. * https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action * * @remarks By default a chart will use `touch-action: none` to prevent the default browser behavior. */ touchAction?: string; /** * Optional - the width aspect ratio of the {@link SciChartSurfaceBase}. By default SciChart will scale to fit the parent Div. * However if height of the div is not provided it will use width/height aspect ratio to calculate the height. The default ratio is 3/2. */ widthAspect?: number; /** * Optional - the height aspect ratio of the {@link SciChartSurfaceBase}. By default SciChart will scale to fit the parent Div. * However if height of the div is not provided it will use width/height aspect ratio to calculate the height. The default ratio is 3/2. */ heightAspect?: number; /** * Optional - the option of disabling / enabling scaling of the {@link SciChartSurfaceBase}. * If false - the {@link SciChartSurfaceBase} will take the height and width of parent div without scaling. */ disableAspect?: boolean; /** * Optional - when true, charts that are out of the viewport will be frozen (pausing rendering). Data updates can resume * Once the chart is in view again, rendering will resume. This can be useful for performance optimization. */ freezeWhenOutOfView?: boolean; /** * The engine has an internal loop based on requestAnimationFrame which triggers a chart draw on any surfaces that have been invalidated. * If you have your own requestAnimationFrame based drawing you wish to synchronise with, you can disable the engine loop by setting this to true. * If you do this you are then responsible for calling webassemblyContext.TSRRequestDraw() which will immediately draw all surfaces belonging to the webassemblyContext that have been invalidated. * Note that 2D and 3D charts, and all charts created using createSingle have separate webassemblyContexts so you must call TSRRequestDraw() on each one. * This setting is applied to the webassembly context when a chart is created, so for SciChartSurface.create this will change the behaviour of all existing charts created using SciChartSurface.create. */ disableEngineLoop?: boolean; } export declare const DebugForDpi: boolean; /** * @summary The base class for a 2D Cartesian {@link SciChartSurface} or 3D Cartesian {@link SciChart3DSurface} within SciChart - * High Performance Realtime {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts} * @remarks * See derived types {@link SciChartSurface} (2D Charts) and {@link SciChart3DSurface} (3D Charts) for more specific instructions on how * to use the SciChartSurface and create a 2D or 3D {@link https://www.scichart.com/javascript-chart-features | JavaScript Chart} */ export declare abstract class SciChartSurfaceBase extends SciChartSurfaceCore implements ISciChartSurfaceNative { /** * Gets or sets the application-wide default theme. See {@link IThemeProvider} for details */ static DEFAULT_THEME: IThemeProvider; /** * The master WebGL canvas * @remarks WARNING: Do not set this property, this is set internally by SciChart when initializing mutliple charts */ static domMasterCanvas: HTMLCanvasElement; /** * Global property defining whether the WebGL render target is anti-aliased or not. This will affect all SciChartSurfaces (2D & 3D) * in the application. * @remarks Defaults to FALSE for crisp gridlines and lines. Individual line series and text labels are * chart parts are automatically anti-aliased */ static AntiAliasWebGlBackbuffer: boolean; /** * Defines a delay of the shared wasmContext auto-dispose if {@link autoDisposeWasmContext} is enabled. */ static wasmContextDisposeTimeout: number; /** * Defines if the shared wasmContext ({@link TSciChart | WebAssembly Context}) should be deleted after all of the surfaces that use it are deleted. */ static autoDisposeWasmContext: boolean; /** * Defines if charts should rerender when the tab becomes active. * @remarks * Enabled by default. Purpose of this behavior is to deal with the issue of canvas data being cleared on an inactive tab . */ static invalidateOnTabVisible: boolean; /** * Deletes the shared wasmContext ({@link TSciChart | WebAssembly Context}) used by the charts instantiated with {@link SciChartSurface.create} or {@link SciChart3DSurface.create}. */ static disposeSharedWasmContext(): void; /** * Sets the runtime license key. Use for full licenses or trials only, not developer licenses. * @param keyCode */ static setRuntimeLicenseKey(keyCode: string): void; /** * Causes SciChart to always use its built in community non-commercial license. This stops it attempting to look for the license wizard * Usage of the community license constitutes acceptance of the terms at https://www.scichart.com/community-licensing/ */ static UseCommunityLicense(): void; /** * Sets the endpoint for validating a runtime license key with the server. Must be a relative path. * @default api/license * @param endpoint */ static setServerLicenseEndpoint(endpoint: string): void; /** * Sets function that will be called by the framework to validate a runtime license from the server, * if you need to add additional handling, such as custom authentication. * The request sent to the server must include the queryString section passed in, which does not come with a leading ? * @param callback */ static setLicenseCallback(callback: (queryString: string) => Promise): void; static resolveOptions(options: ISurfaceOptionsBase): ISurfaceOptionsBase; /** * A propertyChanged EventHandler. See {@link EventHandler} for how to subscribe to and be * notified when a property changes on the {@link SciChartSurfaceBase} */ readonly propertyChanged: EventHandler; /** * An {@link ObservableArray} of {@link IChartModifierBase} derived types. Chart Modifiers provide behavior such as zooming, panning, * tooltips, legends and more in SciChart's High Performance Realtime * {@link https://www.scichart.com/javascript-chart-features | JavaScript Charts}. * You can use our built in modifiers (see derived types of {@link ChartModifierBase}, or create your own for custom interaction behavior. */ readonly chartModifiers: ObservableArray; /** * The {@link HTMLCanvasElement} which is the WebGL canvas that SciChart draws to */ domCanvasWebGL: HTMLCanvasElement; /** * The {@link MouseManager} subscribes to mouse events on the {@link domChartRoot} and routes them to components within SciChart */ mouseManager: MouseManager; /** * The {@link IThemeProvider} provides colors, brushes and theme information for the current {@link SciChartSurfaceBase} */ /** For serialization Only. The name of the onCreated function applied by the builder api */ onCreatedName: string; /** * @summary Gets the collection of {@link IAnnotation} - annotations, markers or shapes drawn over the top of a {@link SciChartSurface} * @description A {@link SciChartSurface} can have zero to many {@link IAnnotation | Annotations}. * * The Annotations are drawn using our WebGL / WebAssembly rendering engine, but some use SVG for maximum configurability. * See derived types of {@link IAnnotation} such as {@link BoxAnnotation}, {@link LineAnnotation} etc... * * Use this collection to add and remove Annotations to the chart. * @remarks * Adding an Annotation to the chart causes it to automatically redraw. Note that annotations do not pariticpate in autoranging, * meaning a chart will zoom to fit data and chart series but not annotations */ readonly annotations: ObservableArray; /** * @summary Gets the collection of {@link IAnnotation} - modifier annotations, markers or shapes drawn over the top of a {@link SciChartSurface} * @description A {@link SciChartSurface} can have zero to many {@link IAnnotation | Annotations}. * * The Annotations are drawn using our WebGL / WebAssembly rendering engine, but some use SVG for maximum configurability. * See derived types of {@link IAnnotation} such as {@link BoxAnnotation}, {@link LineAnnotation} etc... * * Use this collection to add and remove Modifier Annotations to the chart. * @remarks * Adding an Modifier Annotation to the chart causes it to automatically redraw. Note that annotations do not pariticpate in autoranging, * meaning a chart will zoom to fit data and chart series but not annotations */ readonly modifierAnnotations: ObservableArray; adornerLayer: AdornerLayer; abstract isInvalidated: boolean; readonly suspender: UpdateSuspender; /** * An event handler which notifies its subscribers when a chart was requested to redraw initially. */ redrawRequested: EventHandler; /** * An event handler which notifies its subscribers when a layout stage in render process has finished. */ layoutMeasured: EventHandler; /** * An event handler which notifies its subscribers when animations stage in render process has finished. */ genericAnimationsRun: EventHandler; /** * An event handler which notifies its subscribers when a chart was rendered to WebgL Canvas. * @remarks Not applicable to sub-charts */ renderedToWebGl: EventHandler; /** * An event handler which notifies its subscribers when a chart was rendered to a display canvas. * @remarks Not applicable to sub-charts */ renderedToDestination: EventHandler; hasInvalidState: boolean; isWebGLContextActive: boolean; protected themeProviderProperty: IThemeProvider; protected previousThemeProviderProperty: IThemeProvider; protected isInitializedProperty: boolean; protected backgroundProperty: string; protected touchActionProperty: string; protected widthAspect: number; protected heightAspect: number; protected disableAspect: boolean; protected loaderJson: any; protected createSuspended: boolean; protected visibilityObserver: VisibilityObserver; protected cleanupLockToken: () => boolean; private sharedWasmContext; private seriesViewRectProperty; private freezeWhenOutOfViewProperty; /** * Creates an instance of a SciChartSurfaceBase * @param webAssemblyContext The {@link TSciChart | SciChart 2D WebAssembly Context} or {@link TSciChart | SciChart 3D WebAssembly Context} * containing native methods and access to our WebGL2 WebAssembly Rendering Engine * @param canvases A list of {@link TSciChartSurfaceCanvases} to draw to */ protected constructor(webAssemblyContext: TSciChart | TSciChart3D, canvases?: TSciChartSurfaceCanvases); /** * Gets or sets the SciChartSurface Background as an HTML color code */ get background(): string; /** * Gets or sets the SciChartSurface Background as an HTML color code * @remarks Allowable values are colors e.g. 'Red', '#FF00FF', 'rgba(255,0,0,1)'. * Also, main surface background supports gradients 'linear-gradient(45deg, rgb(255,0,0,1), rgb(0,0,255,1))', * or background images e.g. 'url('https://somewebsite.com/someimage.png')'. * Sub-charts, however, support only basic formats. * @param background The HTML color code */ set background(background: string); /** * Gets the Surface Type. See {@link ESurfaceType} for list of values */ abstract get surfaceType(): ESurfaceType; get isCopyCanvasSurface(): HTMLCanvasElement; /** * Gets the Series View {@link Rect}, a rectangle relative to the entire size of the {@link SciChartSurfaceBase} */ get seriesViewRect(): Rect; get viewRect(): Rect; /** Gets the viewRect of the entire chart, e.g. parent surface of a sub-chart */ abstract get chartViewRect(): Rect; get clipRect(): Rect; get otherSurfaces(): SciChartSurfaceBase[]; /** * Used internally - gets isInitialized flag */ get isInitialized(): boolean; /** * @inheritDoc */ get isSuspended(): boolean; /** * @inheritDoc */ resumeUpdates(options?: { force?: boolean; invalidateOnResume?: boolean; }): void; /** * @inheritDoc */ suspendUpdates(): void; /** * @inheritDoc */ applyTheme(themeProvider: IThemeProvider): void; /** * Used internally - gets the previous {@link IThemeProvider} */ get themeProvider(): IThemeProvider; /** * Used internally - gets the previous {@link IThemeProvider} */ get previousThemeProvider(): IThemeProvider; get isPolar(): boolean; /** * When true, charts that are out of the viewport will be frozen (pausing rendering). Data updates can resume * Once the chart is in view again, rendering will resume. This can be useful for performance optimization. */ set freezeWhenOutOfView(freezeWhenOutOfView: boolean); /** * When true, charts that are out of the viewport will be frozen (pausing rendering). Data updates can resume * Once the chart is in view again, rendering will resume. This can be useful for performance optimization. */ get freezeWhenOutOfView(): boolean; /** * @inheritDoc */ delete(clearHtml?: boolean): void; /** * Call invalidateElement() to trigger a redraw of the {@link SciChartSurfaceBase}. SciChart's WebGL WebAssembly rendering * engine will schedule a redraw a the next time the renderer is free. */ abstract invalidateElement(options?: { force?: boolean; svgOnly?: boolean; }): void; abstract getSeriesViewRectPadding(scaled: boolean): Thickness; /** * Gets the main WebGL or 2D canvas */ getMainCanvas(): HTMLCanvasElement; /** * Sets the Series View {@link Rect}, a rectangle relative to the entire size of the {@link SciChartSurfaceBase} * @param seriesViewRect a {@link Rect} which defines the portion of the view for drawing series */ setSeriesViewRect(seriesViewRect: Rect): void; /** * Gets the {@link AxisCore | XAxis} which matches the axisId. Returns undefined if not axis found * @param axisId The AxisId to search for */ abstract getXAxisById(axisId: string): AxisCore | undefined; /** * Gets the default {@link AxisCore | XAxis}, which is the first X axis attached to the surface. */ abstract getDefaultXAxis(): AxisCore | undefined; /** * Gets the {@link AxisCore | YAxis} which matches the axisId. Returns undefined if not axis found * @param axisId The AxisId to search for */ abstract getYAxisById(axisId: string): AxisCore | undefined; /** * Gets the default {@link AxisCore | YAxis}, which is the first Y axis attached to the surface. */ abstract getDefaultYAxis(): AxisCore | undefined; /** * Used internally - sets destinations */ setDestinations(destinations: TSciChartDestination[]): void; /** * Used internally, the flag is set after {@link SciChartSurfaceBase} is initialized */ setIsInitialized(): void; getLicenseContext(): TLicenseContext; /** * Used internally - updates watermark */ abstract updateWatermark(left: number, bottom: number): void; /** * @inheritDoc */ onDpiChanged(args: TDpiChangedEventArgs): void; /** * Creates a promise which resolves when the chart is updated to the next fully rendered state * * @remarks * If the surface is initialized with `createSingle` the promise resolves after the main `render` function is executed. * Otherwise, if it is initialized with `create` - the promise resolves after image data is copied to the 2D canvas. */ nextStateRender(options?: { resumeBefore?: boolean; suspendAfter?: boolean; invalidateOnResume?: boolean; }): Promise; /** * Gets Chart Modifier Groups, is used for sharing events between chart modifiers */ get chartModifierGroups(): string[]; protected clearRootElement(clearHtml: boolean): void; protected applyOptions(options: ISurfaceOptionsBase): void; /** * Detaches a {@link ChartModifierBase2D} from the {@link SciChartSurfaceBase} * @param chartModifier */ protected detachChartModifier(chartModifier: IChartModifierBase): void; /** * Attaches a {@link ChartModifierBase2D} to the {@link SciChartSurfaceBase} * @param chartModifier */ protected attachChartModifier(chartModifier: IChartModifierBase): void; /** * @summary Notifies subscribers of {@link SciChartSurfaceBase.propertyChanged} that a property has changed and the chart requires redrawing * @description SciChart provides fully reactive components, changing any property or changing data will cause the {@link SciChartSurfaceBase} to * redraw where necessary. This method notifies subscribers of the {@link SciChartSurfaceBase.propertyChanged} {@link EventHandler} * that a property has changed. * @param propertyName The name of the property which has changed */ protected notifyPropertyChanged(propertyName: string): void; protected changeMasterCanvasViewportSize(wasmContext: TSciChart | TSciChart3D, pixelWidth: number, pixelHeight: number): void; protected changeWebGLCanvasViewportSize(wasmContext: TSciChart | TSciChart3D, pixelWidth: number, pixelHeight: number): void; /** * Adds or updates clipPath definitions on an SVG canvas * @param svgElement * @param seriesViewRect * @param surfaceViewRect */ setSvgClipPathDefinitions(svgElement: SVGSVGElement, seriesViewRect: Rect, surfaceViewRect: Rect): void; private detachAnnotation; private attachAnnotation; } export declare const createChartDestination: (canvas: HTMLCanvasElement) => { canvas: HTMLCanvasElement; GetHeight(): any; GetWidth(): any; GetID(): any; }; /** @ignore */ export declare const getMasterCanvas: () => HTMLCanvasElement; /** @ignore */ export declare const getLocateFile: (sciChartConfig: TSciChartConfig) => (path: string, prefix: string) => string;