scichart
Version:
Fast WebGL JavaScript Charting Library and Framework
937 lines • 108 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SciChartSubSurface = exports.SciChartSurface = exports.sciChartConfig = void 0;
var chartBuilder_1 = require("../../Builder/chartBuilder");
var classFactory_1 = require("../../Builder/classFactory");
var app_1 = require("../../constants/app");
var performanceWarnings_1 = require("../../constants/performanceWarnings");
var EasingFunctions_1 = require("../../Core/Animations/EasingFunctions");
var BuildStamp_1 = require("../../Core/BuildStamp");
var Deleter_1 = require("../../Core/Deleter");
var Dictionary_1 = require("../../Core/Dictionary");
var EventHandler_1 = require("../../Core/EventHandler");
var ObservableArray_1 = require("../../Core/ObservableArray");
var Rect_1 = require("../../Core/Rect");
var Thickness_1 = require("../../Core/Thickness");
var AutoColorMode_1 = require("../../types/AutoColorMode");
var BaseType_1 = require("../../types/BaseType");
var SeriesType_1 = require("../../types/SeriesType");
var Size_1 = require("../../types/Size");
var SvgClippingMode_1 = require("../../types/SvgClippingMode");
var ZoomState_1 = require("../../types/ZoomState");
var parseColor_1 = require("../../utils/parseColor");
var translate_1 = require("../../utils/translate");
var ChartModifierBase_1 = require("../ChartModifiers/ChartModifierBase");
var BatchRenderContext_1 = require("../Drawing/BatchRenderContext");
var BrushCache_1 = require("../Drawing/BrushCache");
var RenderSurface_1 = require("../Drawing/RenderSurface");
var SolidBrushCache_1 = require("../Drawing/SolidBrushCache");
var WebGlRenderContext2D_1 = require("../Drawing/WebGlRenderContext2D");
var LayoutManager_1 = require("../LayoutManager/LayoutManager");
var SciChartRenderer_1 = require("../Services/SciChartRenderer");
var AdornerLayer_1 = require("./Annotations/AdornerLayer");
var AnnotationBase_1 = require("./Annotations/AnnotationBase");
var AxisBase2D_1 = require("./Axis/AxisBase2D");
var AxisCore_1 = require("./Axis/AxisCore");
var createMaster_1 = require("./createMaster");
var createSingle_1 = require("./createSingle");
var createNativeRect_1 = require("./Helpers/createNativeRect");
var drawBorder_1 = require("./Helpers/drawBorder");
var NativeObject_1 = require("./Helpers/NativeObject");
var StackedColumnCollection_1 = require("./RenderableSeries/StackedColumnCollection");
var StackedMountainCollection_1 = require("./RenderableSeries/StackedMountainCollection");
var sciChartInitCommon_1 = require("./sciChartInitCommon");
var SciChartSurfaceBase_1 = require("./SciChartSurfaceBase");
var DpiHelper_1 = require("./TextureManager/DpiHelper");
var UpdateSuspender_1 = require("./UpdateSuspender");
var Point_1 = require("../../Core/Point");
var SciChartDefaults_1 = require("./SciChartDefaults");
var ChartTitleRenderer_1 = require("../Services/ChartTitleRenderer");
var TextStyle_1 = require("../../types/TextStyle");
var TextPosition_1 = require("../../types/TextPosition");
var Globals_1 = require("../../Core/Globals");
var createMaster3d_1 = require("../../Charting3D/Visuals/createMaster3d");
var LayoutMangerType_1 = require("../../types/LayoutMangerType");
var logger_1 = require("../../utils/logger");
var perfomance_1 = require("../../utils/perfomance");
exports.sciChartConfig = {};
/**
* @summary The {@link SciChartSurface} is the root 2D Chart control in SciChart's High Performance Real-time
* {@link https://www.scichart.com/javascript-chart-features | JavaScript Chart Library}
* @description
* To create a chart using SciChart, declare a {@link SciChartSurface} using {@link SciChartSurface.create},
* add X and Y axes to the {@link SciChartSurface.xAxes} {@link SciChartSurface.yAxes} collection.
*
* Next, add a series or chart type by adding a {@link BaseRenderableSeries} to the {@link SciChartSurface.renderableSeries} collection.
*
* You can add annotations and markers using the {@link SciChartSurface.annotations} property, and you can add zoom and pan behaviours,
* tooltips and more by using the {@link SciChartSurface.chartModifiers} property.
*
* To redraw a {@link SciChartSurface} at any time, call {@link SciChartSurface.invalidateElement}, however all properties are reactive and the
* chart will automatically redraw if data or properties change.
* @remarks
* It is possible to have more than one {@link SciChartSurface} on screen at the same time.
* {@link SciChartSurface | SciChartSurfaces} scale to fit the parent DIV where they are hosted. Use CSS to position the DIV.
*/
var SciChartSurface = /** @class */ (function (_super) {
__extends(SciChartSurface, _super);
/**
* Creates an instance of the {@link SciChartSurface}
* @param webAssemblyContext The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and
* access to our WebGL2 Engine and WebAssembly numerical methods
* @param options optional parameters of type {@link ISciChartSurfaceOptions} used to configure the {@link SciChartSurface}
*/
function SciChartSurface(webAssemblyContext, options) {
var _this = this;
var _a, _b, _c, _d, _e;
_this = _super.call(this, webAssemblyContext, options === null || options === void 0 ? void 0 : options.canvases) || this;
/**
* Used internally - the {@link RenderContext2D} for drawing
*/
//public renderContext2D: RenderContext2D;
/**
* An event handler which notifies its subscribers when a render operation starts. Use this
* to update elements of the chart for the current render. Any updates made here will not trigger a subsequent render.
*/
_this.preRender = new EventHandler_1.EventHandler();
_this.preRenderAll = new EventHandler_1.EventHandler();
// TODO make these properties internal only; or add some provider
_this.layersOffset = 0;
_this.stepBetweenLayers = 10;
_this.isSubSurface = false;
/**
* Sets / Gets the clipping mode for SVG Annotations
*/
_this.svgClippingMode = SvgClippingMode_1.ESvgClippingMode.SeriesViewRect;
/**
* Normally, native labels are drawn all at once at the end of the render cycle to improve performance.
* In circumstances where you want to draw over the labels, eg with a subchart, set this true to have them drawn earlier.
*/
_this.renderNativeAxisLabelsImmediately = false;
/** The position of the watermark for trials and community licenses */
_this.watermarkPosition = SciChartDefaults_1.SciChartDefaults.watermarkPosition;
/** Set true to position the watermark relative to the overall canvas, rather than the series area. */
_this.watermarkRelativeToCanvas = false;
_this.animationList = [];
_this.titleStyleProperty = {
fontSize: 60,
fontFamily: "Arial",
color: SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.chartTitleColor,
fontWeight: "normal",
fontStyle: "normal",
lineSpacing: 1.1,
padding: Thickness_1.Thickness.fromString("10 4 10 4"),
multilineAlignment: TextPosition_1.EMultiLineAlignment.Center,
rotation: undefined,
alignment: TextStyle_1.ETextAlignment.Center,
position: TextStyle_1.ETitlePosition.Top,
placeWithinChart: false,
useNativeText: SciChartDefaults_1.SciChartDefaults.useNativeText
};
//function to create a proxy for the object, which traps the setter
_this.getPaddingProxy = function (newPadding) {
return new Proxy(newPadding, {
set: function (target, key, value) {
//@ts-ignore
if (target[key] !== value) {
//@ts-ignore
target[key] = value;
_this.invalidateElement();
}
return true;
}
});
};
_this.paddingProperty = _this.getPaddingProxy(Thickness_1.Thickness.fromNumber(10));
_this.zoomStateProperty = ZoomState_1.EZoomState.AtExtents;
_this.viewportBorderProperty = {
borderBottom: undefined,
borderLeft: undefined,
borderRight: undefined,
borderTop: undefined,
color: "#00000000",
border: undefined
};
_this.canvasBorderProperty = {
borderBottom: undefined,
borderLeft: undefined,
borderRight: undefined,
borderTop: undefined,
color: "#00000000",
border: undefined
};
_this.subChartsProperty = [];
_this.drawSeriesBehindAxisProperty = false;
_this.autoColorModeProperty = AutoColorMode_1.EAutoColorMode.OnAddRemoveSeries;
_this.autoColorRequired = true;
_this.xCoordSvgTrans = 0;
_this.yCoordSvgTrans = 0;
_this.subChartCounter = 0;
var canvasWidth = (_b = (_a = _this.domCanvas2D) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : app_1.DEFAULT_WIDTH;
var canvasHeight = (_d = (_c = _this.domCanvas2D) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : app_1.DEFAULT_HEIGHT;
_this.webAssemblyContext2D = webAssemblyContext;
if (!app_1.IS_TEST_ENV) {
var canvasPixelWidth = canvasWidth / DpiHelper_1.DpiHelper.PIXEL_RATIO;
var canvasPixelHeight = canvasHeight / DpiHelper_1.DpiHelper.PIXEL_RATIO;
if (_this.isCopyCanvasSurface) {
_this.changeMasterCanvasViewportSize(webAssemblyContext, canvasPixelWidth, canvasPixelHeight);
}
else {
_this.changeWebGLCanvasViewportSize(webAssemblyContext, canvasPixelWidth, canvasPixelHeight);
}
}
_this.invalidateElement = _this.invalidateElement.bind(_this);
_this.onRenderSurfaceDraw = _this.onRenderSurfaceDraw.bind(_this);
var viewportSize = _this.domCanvas2D
? new Size_1.Size(canvasWidth, canvasHeight)
: new Size_1.Size(app_1.DEFAULT_WIDTH, app_1.DEFAULT_HEIGHT);
_this.renderSurface = new RenderSurface_1.RenderSurface(webAssemblyContext, viewportSize, (_e = _this.domCanvas2D) === null || _e === void 0 ? void 0 : _e.id);
_this.renderSurface.handleDraw = _this.onRenderSurfaceDraw;
_this.sciChartRenderer = new SciChartRenderer_1.SciChartRenderer(_this);
_this.chartTitleRendererProperty = new ChartTitleRenderer_1.ChartTitleRenderer(_this.webAssemblyContext2D);
_this.layoutManager = new LayoutManager_1.LayoutManager();
// TODO: remove this
//if (this.domCanvas2D) {
// this.renderContext2D = new RenderContext2D(this.domCanvas2D);
//}
// Setup series
_this.detachSeries = _this.detachSeries.bind(_this);
_this.attachSeries = _this.attachSeries.bind(_this);
_this.renderableSeries = new ObservableArray_1.ObservableArray();
_this.renderableSeries.collectionChanged.subscribe(function (args) {
var _a, _b;
(_a = args.getOldItems()) === null || _a === void 0 ? void 0 : _a.forEach(_this.detachSeries);
(_b = args.getNewItems()) === null || _b === void 0 ? void 0 : _b.forEach(_this.attachSeries);
});
// Setup axis
_this.detachAxis = _this.detachAxis.bind(_this);
_this.attachAxis = _this.attachAxis.bind(_this);
_this.xAxes = new ObservableArray_1.ObservableArray();
_this.yAxes = new ObservableArray_1.ObservableArray();
var handler = function (args, isXAxis) {
var _a, _b;
(_a = args.getOldItems()) === null || _a === void 0 ? void 0 : _a.forEach(function (axis) {
axis.visibleRangeChanged.unsubscribeAll();
_this.detachAxis(axis);
});
(_b = args.getNewItems()) === null || _b === void 0 ? void 0 : _b.forEach(function (a) { return _this.attachAxis(a, isXAxis); });
};
_this.xAxes.collectionChanged.subscribe(function (arg) { return handler(arg, true); });
_this.yAxes.collectionChanged.subscribe(function (arg) { return handler(arg, false); });
_this.adornerLayer = new AdornerLayer_1.AdornerLayer(_this);
_this.solidBrushCacheViewportBorder = new SolidBrushCache_1.SolidBrushCache(webAssemblyContext);
_this.solidBrushCacheCanvasBorder = new SolidBrushCache_1.SolidBrushCache(webAssemblyContext);
// Watermark
if (!app_1.IS_TEST_ENV) {
_this.watermarkProperties = new webAssemblyContext.SCRTWaterMarkProperties();
_this.watermarkPropertyPosition = new webAssemblyContext.TSRVector2(0, 0);
_this.watermarkProperties.SetPosition(_this.watermarkPropertyPosition);
_this.watermarkProperties.SetOpacity(0.5);
webAssemblyContext.SCRTSetWaterMarkProperties(_this.watermarkProperties);
}
return _this;
}
/**
* Creates a {@link SciChartSurface} and {@link TSciChart | WebAssembly Context} to occupy the div by element ID in your DOM.
* @remarks This method is async and must be awaited
* @param divElement The Div Element ID or reference where the {@link SciChartSurface} will reside
* @param options Optional - Optional parameters for chart creation. See {@link I2DSurfaceOptions} for more details
*/
SciChartSurface.create = function (divElement, options) {
var mark = perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.InitializationStart, { contextId: options === null || options === void 0 ? void 0 : options.id });
(0, chartBuilder_1.ensureRegistrations)();
options = SciChartSurface.resolveOptions(options);
if (app_1.IS_TEST_ENV) {
return this.createTest(divElement, options);
}
else {
return (0, createMaster_1.createMultichart)(divElement, options).then(function (result) {
var _a;
result.sciChartSurface.applyOptions(options);
perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.InitializationEnd, {
parentContextId: result.sciChartSurface.domCanvas2D.id,
contextId: result.sciChartSurface.id,
relatedId: (_a = mark === null || mark === void 0 ? void 0 : mark.detail) === null || _a === void 0 ? void 0 : _a.relatedId
});
return result;
});
}
};
SciChartSurface.disposeSharedWasmContext = function () {
if (Globals_1.sciChart3DDestinations.length === 0 && Globals_1.sciChartDestinations.length === 0) {
(0, createMaster_1.disposeMultiChart)();
(0, createMaster3d_1.disposeMultiChart3d)();
}
_super.disposeSharedWasmContext.call(this);
};
/**
* Performs a similar operation to {@link SciChartSurface.create} but uses a dedicated WebAssembly context for this chart, and draws directly to the target canvas
* This provides better performance for a single chart, but there is a limit (16) to how many you can have on one page.
* If you need large numbers of charts all updating at the same time, use this, together with {@link addSubChart} to create many charts on one surface.
* @param divElement The Div Element ID or reference where the {@link SciChartSurface} will reside
* @param options - optional parameters for chart creation. See {@link I2DSurfaceOptions} for more details
*/
SciChartSurface.createSingle = function (divElement, options) {
var mark = perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.InitializationStart, { contextId: options === null || options === void 0 ? void 0 : options.id });
(0, chartBuilder_1.ensureRegistrations)();
options = SciChartSurface.resolveOptions(options);
if (app_1.IS_TEST_ENV) {
return this.createTest(divElement, options);
}
else {
return (0, createSingle_1.createSingleInternal)(divElement, options).then(function (result) {
var _a;
result.sciChartSurface.applyOptions(options);
perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.InitializationEnd, {
parentContextId: result.sciChartSurface.domCanvas2D.id,
contextId: result.sciChartSurface.id,
relatedId: (_a = mark === null || mark === void 0 ? void 0 : mark.detail) === null || _a === void 0 ? void 0 : _a.relatedId
});
return result;
});
}
};
/**
* Allows setting of web URL for Wasm and Data files, in the case you are loading SciChart outside of npm/webpack environment.
* Note the version number of data/wasm Urls must match the version number of SciChart.js you are using.
* To use the default CDN, just call SciChart.SciChartSurface.useWasmFromCDN();
* @example
* ```ts
* import { libraryVersion } from "scichart/Core/BuildStamp";
*
* SciChart.SciChartSurface.configure({
* dataUrl: `https://cdn.jsdelivr.net/npm/scichart@${libraryVersion}/_wasm/scichart2d.data`,
* wasmUrl: `https://cdn.jsdelivr.net/npm/scichart@${libraryVersion}/_wasm/scichart2d.wasm`
* });
* ```
* @param config
*/
SciChartSurface.configure = function (config) {
var _a, _b;
exports.sciChartConfig.dataUrl = (_a = config === null || config === void 0 ? void 0 : config.dataUrl) !== null && _a !== void 0 ? _a : undefined;
exports.sciChartConfig.wasmUrl = (_b = config === null || config === void 0 ? void 0 : config.wasmUrl) !== null && _b !== void 0 ? _b : undefined;
};
/**
* Tell SciChart to load the Wasm and Data files from CDN, rather than expecting them to be served by the host server.
* @deprecated the method name breaks [eslint react-hooks/rules-of-hooks](https://legacy.reactjs.org/docs/hooks-rules.html).
* To avoid this error in React, use {@link loadWasmFromCDN} instead.
*
*/
SciChartSurface.useWasmFromCDN = function () {
exports.sciChartConfig.dataUrl = "https://cdn.jsdelivr.net/npm/scichart@".concat(BuildStamp_1.libraryVersion, "/_wasm/scichart2d.data");
exports.sciChartConfig.wasmUrl = "https://cdn.jsdelivr.net/npm/scichart@".concat(BuildStamp_1.libraryVersion, "/_wasm/scichart2d.wasm");
};
/**
* Tell SciChart to load the Wasm and Data files from the local server, rather than from CDN.
* @deprecated the method name breaks [eslint react-hooks/rules-of-hooks](https://legacy.reactjs.org/docs/hooks-rules.html).
* To avoid this error in React, use {@link loadWasmLocal} instead.
*
*/
SciChartSurface.useWasmLocal = function () {
SciChartSurface.configure(undefined);
};
/**
* Tell SciChart to load the Wasm and Data files from CDN, rather than expecting them to be served by the host server.
*/
SciChartSurface.loadWasmFromCDN = function () {
return SciChartSurface.useWasmFromCDN();
};
/**
* Tell SciChart to load the Wasm and Data files from the local server, rather than from CDN.
*/
SciChartSurface.loadWasmLocal = function () {
return SciChartSurface.useWasmLocal();
};
SciChartSurface.isSubSurface = function (surface) {
return surface.isSubSurface;
};
SciChartSurface.createTest = function (divElement, options) {
var _a, _b;
var canvases = sciChartInitCommon_1.default.initCanvas(divElement, (_a = options === null || options === void 0 ? void 0 : options.widthAspect) !== null && _a !== void 0 ? _a : 0, (_b = options === null || options === void 0 ? void 0 : options.heightAspect) !== null && _b !== void 0 ? _b : 0, sciChartInitCommon_1.default.ECanvasType.canvas2D);
var sciChartSurface = new SciChartSurface(exports.sciChartConfig.testWasm, { canvases: canvases });
sciChartSurface.applyTheme(options === null || options === void 0 ? void 0 : options.theme);
sciChartSurface.applyOptions(options);
return new Promise(function (resolve) {
return resolve({ wasmContext: sciChartSurface.webAssemblyContext2D, sciChartSurface: sciChartSurface });
});
};
/**
* Add another chart to an existing surface.
* This is a performance optimization if you need to have multiple charts all updating together, eg because they have synced axes.
* We suggest you use SciChartSurface.createSingle for the parent surface. The parent surface does not have to have any chart elements defined.
* The position property required in the options determines the placement and size of the subchart. Its values are interpreted differently depending on the coordinateMode
* Modifiers using modifierGroup will work across other subcharts on the surface, but not to any other surface.
*/
SciChartSurface.prototype.addSubChart = function (options) {
var _a;
var mark = perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.AddSubSurfaceStart, {
contextId: options === null || options === void 0 ? void 0 : options.id,
parentContextId: this.id,
level: perfomance_1.EPerformanceDebugLevel.Verbose
});
var optionsBase = SciChartSurface.resolveOptions(options);
options = __assign(__assign({}, options), optionsBase);
this.subChartCounter++;
var divElementId = this.domChartRoot.id + "_" + this.subChartCounter.toString();
var chartRoot = this.domChartRoot;
var width = chartRoot.clientWidth;
var height = chartRoot.clientHeight;
// SVG Root Element
var svgRootElement = (0, sciChartInitCommon_1.createSvgLayer)("".concat(divElementId, "_SVG"), width, height);
svgRootElement.style.left = "0";
svgRootElement.style.top = "0";
svgRootElement.style.pointerEvents = "none";
svgRootElement.classList.add(sciChartInitCommon_1.ELayerClass.FRONT_SVG_ROOT);
chartRoot.appendChild(svgRootElement);
// SVG Root Element
var backgroundSvgRootElement = (0, sciChartInitCommon_1.createSvgLayer)("".concat(divElementId, "_BACKGROUND_SVG"), width, height);
backgroundSvgRootElement.style.left = "0";
backgroundSvgRootElement.style.top = "0";
backgroundSvgRootElement.style.pointerEvents = "none";
backgroundSvgRootElement.classList.add(sciChartInitCommon_1.ELayerClass.BACK_SVG_ROOT);
chartRoot.insertBefore(backgroundSvgRootElement, this.getMainCanvas());
// Background Div Root Element
var backgroundDomRoot = document.createElement("div");
backgroundDomRoot.id = "".concat(divElementId, "_background_div");
backgroundDomRoot.classList.add(sciChartInitCommon_1.ELayerClass.DIV_ROOT, sciChartInitCommon_1.ELayerClass.BACK_DIV_ROOT);
backgroundDomRoot.style.left = "0";
backgroundDomRoot.style.top = "0";
backgroundDomRoot.style.position = "absolute";
backgroundDomRoot.style.pointerEvents = "none";
chartRoot.insertBefore(backgroundDomRoot, backgroundSvgRootElement);
var canvases = {
domChartRoot: this.domChartRoot,
domCanvasWebGL: this.domCanvasWebGL,
domCanvas2D: this.domCanvas2D,
domSvgContainer: svgRootElement,
domSvgAdornerLayer: this.domSvgAdornerLayer,
domDivContainer: this.domDivContainer,
domBackgroundSvgContainer: backgroundSvgRootElement,
domSeriesBackground: backgroundDomRoot
};
var subSurface = new SciChartSubSurface(this.webAssemblyContext2D, {
canvases: canvases,
parentSurface: this,
subSurfaceOptions: options
});
if (options === null || options === void 0 ? void 0 : options.theme) {
subSurface.applyTheme(options.theme);
}
// subcharts get mouse events from parent
subSurface.mouseManager.unsubscribe();
this.subChartsProperty.push(subSurface);
this.onAttachSubSurface(subSurface);
subSurface.setIsInitialized();
perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.AddSubSurfaceEnd, {
contextId: subSurface.id,
relatedId: (_a = mark === null || mark === void 0 ? void 0 : mark.detail) === null || _a === void 0 ? void 0 : _a.relatedId,
parentContextId: this.id,
level: perfomance_1.EPerformanceDebugLevel.Verbose
});
return subSurface;
};
/**
* Remove an existing subChart from a parent surface. See {@link addSubChart}
*/
SciChartSurface.prototype.removeSubChart = function (subChart) {
var index = this.subChartsProperty.findIndex(function (s) { return s === subChart; });
if (index > -1) {
this.subChartsProperty.splice(index, 1);
subChart.delete();
}
};
Object.defineProperty(SciChartSurface.prototype, "subCharts", {
/**
* The list of subCharts on this surface. See {@link addSubChart}
*/
get: function () {
return this.subChartsProperty;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SciChartSurface.prototype, "surfaceType", {
/**
* @inheritDoc
*/
get: function () {
return SciChartSurfaceBase_1.ESurfaceType.SciChartSurfaceType;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SciChartSurface.prototype, "layoutManager", {
/**
* Gets or sets the {@link LayoutManager}
*/
get: function () {
return this.layoutManagerProperty;
},
/**
* Used internally - gets or sets the {@link LayoutManager}
*/
set: function (value) {
this.layoutManagerProperty = value;
this.layoutManagerProperty.sciChartSurface = this;
this.invalidateElement();
},
enumerable: false,
configurable: true
});
Object.defineProperty(SciChartSurface.prototype, "chartTitleRenderer", {
/**
* Controls the rendering of {@link SiCharSurface.title}
*/
get: function () {
return this.chartTitleRendererProperty;
},
set: function (value) {
var _a;
(_a = this.chartTitleRendererProperty) === null || _a === void 0 ? void 0 : _a.delete();
this.chartTitleRendererProperty = value;
this.invalidateElement();
},
enumerable: false,
configurable: true
});
Object.defineProperty(SciChartSurface.prototype, "dataLabelLayoutManager", {
/**
* Gets or sets the {@link ISeriesTextLayoutManager} for performing text layout across multiple series
*/
get: function () {
return this.dataLabelLayoutManagerProperty;
},
/**
* Used internally - gets or sets the {@link ISeriesTextLayoutManager} for performing text layout across multiple series
*/
set: function (value) {
this.dataLabelLayoutManagerProperty = value;
this.invalidateElement();
},
enumerable: false,
configurable: true
});
Object.defineProperty(SciChartSurface.prototype, "title", {
/**
* Gets or sets the title for the SciChartSurface
*/
get: function () {
return this.titleProperty;
},
/**
* Gets or sets the title for the SciChartSurface
*/
set: function (value) {
if (this.titleProperty !== value) {
this.titleProperty = value;
this.invalidateElement();
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(SciChartSurface.prototype, "titleStyle", {
/**
* Gets or sets the title text style and placement for the SciChartSurface as {@link TChartTitleStyle}
*/
get: function () {
return this.titleStyleProperty;
},
/**
* Gets or sets the title text style and placement for the SciChartSurface as {@link TChartTitleStyle}
* @remarks if updating, should be set as an object (or partial object) of type {@link TChartTitleStyle},
* instead of directly setting individual properties
*/
set: function (value) {
if (this.titleStyleProperty !== value) {
this.titleStyleProperty = Object.assign({}, this.titleStyleProperty, value);
this.invalidateElement();
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(SciChartSurface.prototype, "padding", {
/**
* Gets or sets the Padding between the SciChartSurface and its inner elements, in order top, right, bottom, left
*/
get: function () {
return this.paddingProperty;
},
set: function (padding) {
if (!Thickness_1.Thickness.areEqual(this.paddingProperty, padding)) {
this.paddingProperty = this.getPaddingProxy(padding);
this.invalidateElement();
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(SciChartSurface.prototype, "adjustedPadding", {
/**
* Gets the adjusted padding between the SciChartSurface and its inner elements, in order top, right, bottom, left
* Defines a resulting padding accordingly to DPI scaling.
*/
get: function () {
return DpiHelper_1.DpiHelper.adjustThickness(this.padding);
},
enumerable: false,
configurable: true
});
Object.defineProperty(SciChartSurface.prototype, "debugRendering", {
/**
* Gets or sets a property whether rendering should be debugged. This will draw rectangles around key boxes and areas on the chart.
* Used internally for development purposes
*/
get: function () {
return this.debugRenderingProperty;
},
/**
* Gets or sets a property whether rendering should be debugged. This will draw rectangles around key boxes and areas on the chart.
* Used internally for development purposes
*/
set: function (debugRendering) {
this.debugRenderingProperty = debugRendering;
this.invalidateElement();
},
enumerable: false,
configurable: true
});
Object.defineProperty(SciChartSurface.prototype, "autoColorMode", {
/**
* Gets or sets the {@link EAutoColorMode} which determines when resolution of AUTO_COLOR should occur
*/
get: function () {
return this.autoColorModeProperty;
},
/**
* Gets or sets the {@link EAutoColorMode} which determines when resolution of AUTO_COLOR should occur
*/
set: function (autoColorMode) {
this.autoColorModeProperty = autoColorMode;
if (autoColorMode !== AutoColorMode_1.EAutoColorMode.Never && !this.autoColorRequired) {
this.autoColorRequired = true;
}
else if (autoColorMode === AutoColorMode_1.EAutoColorMode.Never) {
this.autoColorRequired = false;
}
this.invalidateElement();
},
enumerable: false,
configurable: true
});
Object.defineProperty(SciChartSurface.prototype, "isInvalidated", {
get: function () {
var _a;
return (_a = this.sciChartRenderer) === null || _a === void 0 ? void 0 : _a.isInvalidated;
},
enumerable: false,
configurable: true
});
/**
* @inheritDoc
*/
SciChartSurface.prototype.applyTheme = function (themeProvider) {
// TODO move to base when title is implemented on 3d charts
var previousThemeProvider = this.previousThemeProvider;
if (this.titleStyle.color === previousThemeProvider.chartTitleColor) {
this.titleStyle = { color: themeProvider.chartTitleColor };
}
_super.prototype.applyTheme.call(this, themeProvider);
this.renderableSeries.asArray().forEach(function (rs) { return rs.applyTheme(themeProvider); });
this.xAxes.asArray().forEach(function (axis) { return axis.applyTheme(themeProvider); });
this.yAxes.asArray().forEach(function (axis) { return axis.applyTheme(themeProvider); });
};
/**
* @inheritDoc
*/
SciChartSurface.prototype.changeViewportSize = function (pixelWidth, pixelHeight) {
logger_1.Logger.debug("changeViewportSize");
if (!pixelWidth || !pixelHeight || this.isDeleted) {
return;
}
// Changing the viewportSize
var backBufferWidth = pixelWidth * DpiHelper_1.DpiHelper.PIXEL_RATIO;
var backBufferHeight = pixelHeight * DpiHelper_1.DpiHelper.PIXEL_RATIO;
this.renderSurface.viewportSize = new Size_1.Size(backBufferWidth, backBufferHeight);
if (this.isCopyCanvasSurface) {
this.changeMasterCanvasViewportSize(this.webAssemblyContext2D, pixelWidth, pixelHeight);
if (this.domCanvas2D) {
DpiHelper_1.DpiHelper.setSize(this.domCanvas2D, pixelWidth, pixelHeight);
}
}
else {
this.changeWebGLCanvasViewportSize(this.webAssemblyContext2D, pixelWidth, pixelHeight);
}
// Notice: this.domSvgContainer is updated in SciChartRenderer.resizeAnnotationRootElements() method
if (this.domSvgAdornerLayer) {
this.domSvgAdornerLayer.setAttribute("width", pixelWidth.toString());
this.domSvgAdornerLayer.setAttribute("height", pixelHeight.toString());
}
for (var _i = 0, _a = this.subChartsProperty; _i < _a.length; _i++) {
var chart = _a[_i];
chart.updateSubLayout();
}
// Bypass the isSuspended check, otherwise the chart will go blank if it is resized while suspended
this.invalidateElement({ force: true });
};
/**
* @inheritDoc
*/
SciChartSurface.prototype.invalidateElement = function (options) {
var _a, _b;
logger_1.Logger.debug("Invalidating ".concat((_b = (_a = this.domChartRoot) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.id, ": force=").concat(options === null || options === void 0 ? void 0 : options.force, " isSuspended=").concat(this.isSuspended, " isInitialized=").concat(this.isInitialized, "."));
// When isSuspended (see suspendUpdates() function) ignore drawing
if (!(options === null || options === void 0 ? void 0 : options.force) && (this.isSuspended || this.isDeleted || !this.isInitialized)) {
return;
}
perfomance_1.PerformanceDebugHelper.mark(this.sciChartRenderer.isInvalidated
? perfomance_1.EPerformanceMarkType.Invalidate
: perfomance_1.EPerformanceMarkType.LeadingInvalidate, { contextId: this.id });
if (!this.sciChartRenderer.isInvalidated) {
this.sciChartRenderer.isInvalidated = true;
// console.trace("Invalidating ", this.domChartRoot.id);
var canvasId = this.domCanvas2D ? this.domCanvas2D.id : "undefinedCanvasId";
this.renderSurface.invalidateElement(canvasId);
}
};
// Step_5: Get context and pass drawing to SciChartRenderer
SciChartSurface.prototype.doDrawingLoop = function (context) {
var _a;
if (this.isDeleted)
return;
var mark = perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.DrawingLoopStart, {
contextId: this.id,
level: perfomance_1.EPerformanceDebugLevel.Verbose
});
context = context !== null && context !== void 0 ? context : this.renderSurface.getRenderContext();
this.currentWebGlRenderContextProperty = context;
try {
var sus = new UpdateSuspender_1.UpdateSuspender(this, false); // Don't want to invalidate on resume
try {
if (this.autoColorRequired &&
((this.themeProvider.strokePalette && this.themeProvider.strokePalette.length > 0) ||
(this.themeProvider.fillPalette && this.themeProvider.fillPalette.length > 0))) {
this.resolveAutoColors();
if (this.autoColorMode !== AutoColorMode_1.EAutoColorMode.Always) {
this.autoColorRequired = false;
}
}
this.preRender.raiseEvent(context);
}
catch (err) {
if (err === null || err === void 0 ? void 0 : err.message) {
console.error(err === null || err === void 0 ? void 0 : err.message);
}
console.error(err);
}
finally {
sus.resume();
}
this.sciChartRenderer.render(context);
var isInvalidated = this.isInvalidated;
perfomance_1.PerformanceDebugHelper.mark(isInvalidated ? perfomance_1.EPerformanceMarkType.Rendered : perfomance_1.EPerformanceMarkType.FullStateRendered, { contextId: this.id });
this.rendered.raiseEvent(isInvalidated);
}
catch (err) {
// @ts-ignore
if (err.name === "BindingError") {
console.error(err);
console.warn("Binding errors can occur if a previous chart using the same div id was not deleted correctly, or if you try to share data or series between charts that use different webassembly contexts.");
(0, NativeObject_1.freeCache)(this.webAssemblyContext2D).delete();
}
else if (this.domChartRoot) {
console.error("Error from chart in div ".concat(this.domChartRoot.id, ":"), err);
}
else {
// Surface the error for tests
throw err;
}
}
perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.DrawingLoopEnd, {
contextId: this.id,
relatedId: (_a = mark === null || mark === void 0 ? void 0 : mark.detail) === null || _a === void 0 ? void 0 : _a.relatedId,
level: perfomance_1.EPerformanceDebugLevel.Verbose
});
};
/**
* @inheritDoc
*/
SciChartSurface.prototype.delete = function (clearHtml) {
if (clearHtml === void 0) { clearHtml = true; }
if (this.isDeleted) {
try {
if (process.env.NODE_ENV !== "production") {
console.warn("Trying to delete the surface with ID = \"".concat(this.id, ")\", which has already been deleted!"));
}
}
catch (err) {
console.warn(err);
}
return;
}
for (var _i = 0, _a = this.subChartsProperty; _i < _a.length; _i++) {
var chart = _a[_i];
chart.delete();
}
this.subChartsProperty = [];
if (this.layoutManagerProperty.type === LayoutMangerType_1.ELayoutManagerType.Synchronised) {
if (this.layoutManagerProperty.verticalGroup) {
this.layoutManagerProperty.verticalGroup.removeSurface(this);
}
if (this.layoutManagerProperty.horizontalGroup) {
this.layoutManagerProperty.horizontalGroup.removeSurface(this);
}
}
this.layoutManagerProperty.sciChartSurface = undefined;
this.layoutManagerProperty = undefined;
this.renderableSeries.asArray().forEach(function (rs) { return rs.delete(); });
this.renderableSeries.clear();
this.xAxes.asArray().forEach(function (xAxis) { return xAxis.delete(); });
this.yAxes.asArray().forEach(function (yAxis) { return yAxis.delete(); });
this.solidBrushCacheViewportBorder = (0, Deleter_1.deleteSafe)(this.solidBrushCacheViewportBorder);
this.solidBrushCacheCanvasBorder = (0, Deleter_1.deleteSafe)(this.solidBrushCacheCanvasBorder);
this.watermarkProperties = (0, Deleter_1.deleteSafe)(this.watermarkProperties);
this.watermarkPropertyPosition = (0, Deleter_1.deleteSafe)(this.watermarkPropertyPosition);
this.chartTitleRendererProperty = (0, Deleter_1.deleteSafe)(this.chartTitleRenderer);
this.sciChartRenderer = undefined;
this.renderSurface = undefined;
this.clearRootElement(clearHtml);
_super.prototype.delete.call(this);
};
/**
* @inheritDoc
*/
SciChartSurface.prototype.onDpiChanged = function (args) {
var _a, _b;
perfomance_1.PerformanceDebugHelper.mark(perfomance_1.EPerformanceMarkType.DpiChange, { contextId: this.id });
logger_1.Logger.debug("onDpiChanged");
this.renderableSeries.asArray().forEach(function (rs) { return rs.onDpiChanged(args); });
this.xAxes.asArray().forEach(function (a) { return a.onDpiChanged(); });
this.yAxes.asArray().forEach(function (a) { return a.onDpiChanged(); });
// Force a viewport size change as size-changed may not fire when parent div has width, height
this.changeViewportSize((_a = this.getMainCanvas()) === null || _a === void 0 ? void 0 : _a.clientWidth, (_b = this.getMainCanvas()) === null || _b === void 0 ? void 0 : _b.clientHeight);
_super.prototype.onDpiChanged.call(this, args);
};
/**
* Gets the {@link AxisBase2D | XAxis} which matches the axisId. Returns undefined if not axis found
* @param axisId The AxisId to search for
*/
SciChartSurface.prototype.getXAxisById = function (axisId) {
var axis = this.xAxes.getById(axisId);
if (!axis && axisId === AxisCore_1.AxisCore.DEFAULT_AXIS_ID && this.xAxes.size() > 0) {
axis = this.xAxes.get(0);
}
return axis;
};
/**
* Gets the {@link AxisBase2D | YAxis} which matches the axisId. Returns undefined if not axis found
* @param axisId The AxisId to search for
*/
SciChartSurface.prototype.getYAxisById = function (axisId) {
var axis = this.yAxes.getById(axisId);
if (!axis && axisId === AxisCore_1.AxisCore.DEFAULT_AXIS_ID && this.yAxes.size() > 0) {
axis = this.yAxes.get(0);
}
return axis;
};
/**
* Update accumulated vectors for all stacked collections
*/
SciChartSurface.prototype.updateStackedCollectionAccumulatedVectors = function () {
var stackedCollection = this.renderableSeries.asArray().filter(function (el) { return el.isStacked && "size" in el; });
stackedCollection.forEach(function (el) { return el.updateAccumulatedVectors(); });
};
/**
* @summary Zooms the {@link SciChartSurface} in the X and Y direction to extents of all data (zoom to fit)
* @description
* @param animationDurationMs An optional animation duration. Default value is 0, which means 'no animation'
* @param easingFunction An optional easing function for animations. See {@link TEasingFn} for a list of values
* @param onCompleted the callback function
*/
SciChartSurface.prototype.zoomExtents = function (animationDurationMs, easingFunction, onCompleted) {
if (animationDurationMs === void 0) { animationDurationMs = 0; }
if (easingFunction === void 0) { easingFunction = EasingFunctions_1.easing.outExpo; }
if (onCompleted === void 0) { onCompleted = function () { }; }
this.updateStackedCollectionAccumulatedVectors();
var xSize = this.xAxes === undefined ? 0 : this.xAxes.size();
var ySize = this.yAxes === undefined ? 0 : this.yAxes.size();
if (xSize === 0 || ySize === 0) {
throw new Error("Cannot ZoomExtents when XAxes or YAxes is undefined or empty");
}
// Update the VisibleRange of X Axes
var xRanges = this.zoomExtentsXInternal(animationDurationMs, easingFunction, onCompleted);
// Now ZoomExtents on Y for N Y-axes
this.zoomExtentsYInternal(xRanges, animationDurationMs, easingFunction, onCompleted);
};
/**
* @summary Zooms the {@link SciChartSurface} in the X direction to extents of all data (zoom to fit)
* @description
* @param animationDurationMs An optional animation duration. Default value is 0, which means 'no animation'
* @param easingFunction An optional easing function for animations. See {@link TEasingFn} for a list of values
*/
SciChartSurface.prototype.zoomExtentsX = function (animationDurationMs, easingFunction) {
if (animationDurationMs === void 0) { animationDurationMs = 0; }
if (easingFunction === void 0) { easingFunction = EasingFunctions_1.e