scichart 3.1.348 → 3.2.0-beta

package/Charting3D/ChartModifiers/OrbitModifier3D.js

@@ -16,9 +16,8 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OrbitModifier3D = void 0;
-var Point_1 = require("../../Core/Point");
 var ChartModifierType_1 = require("../../types/ChartModifierType");
-var ChartModifierBase3D_1 = require("./ChartModifierBase3D");
+var PinchZoomModifier3D_1 = require("./PinchZoomModifier3D");
 /**
  * @summary The {@link OrbitModifier3D} provides behavior to orbit around a target point on a 3D {@link SciChart3DSurface}
  * within SciChart - High Performance {@link https://www.scichart.com/javascript-chart-features | JavaScript 3D Charts}
@@ -35,56 +34,93 @@ var ChartModifierBase3D_1 = require("./ChartModifierBase3D");
 var OrbitModifier3D = /** @class */ (function (_super) {
     __extends(OrbitModifier3D, _super);
     function OrbitModifier3D(options) {
-        var _this = _super.call(this, options) || this;
+        var _this = this;
+        var _a;
+        _this = _super.call(this, options) || this;
         /**
          * @inheritDoc
          */
         _this.type = ChartModifierType_1.EChart3DModifierType.Orbit;
+        /**
+         * Sets whether to enable pinch zoom behavior of {@link SciChartSurface} on touchscreen devices
+         */
+        _this.enableZoom = false;
+        _this.enableZoom = (_a = options === null || options === void 0 ? void 0 : options.enableZoom) !== null && _a !== void 0 ? _a : _this.enableZoom;
         return _this;
     }
     /**
      * @inheritDoc
      */
     OrbitModifier3D.prototype.modifierMouseDown = function (args) {
+        if (!this.isAttached) {
+            throw new Error("Should not call OrbitModifier3D.modifierMouseDown if not attached");
+        }
+        if (this.executeOn !== args.button) {
+            return;
+        }
         _super.prototype.modifierMouseDown.call(this, args);
-        // if (!this.isAttached) {
-        //     throw new Error("Should not call RubberBandXyZoomModifier.modifierMouseDown if not attached");
-        // }
-        var _a = args.mousePoint, x = _a.x, y = _a.y;
-        this.pointStart = new Point_1.Point(x, y);
-        this.isDragging = true;
-        args.handled = true;
+        this.activePointerEvents.set(args.pointerId, args);
+        // this.parentSurface.setZoomState(EZoomState.UserZooming);
     };
     /**
      * @inheritDoc
      */
     OrbitModifier3D.prototype.modifierMouseMove = function (args) {
-        _super.prototype.modifierMouseMove.call(this, args);
-        if (!this.isDragging) {
+        this.updatePointerInfo(args);
+        if (!this.previousPoint) {
             return;
         }
+        // use pinch zoom if enabled and triggered
+        if (this.enableZoom && _super.prototype.getIsActionAllowed.call(this, args)) {
+            _super.prototype.performModifierAction.call(this, args);
+        }
+        // execute rotation if action was triggered
+        var isActionAllowed = this.getIsActionAllowed(args);
+        if (isActionAllowed) {
+            this.performModifierAction(args);
+        }
+    };
+    /**
+     * @inheritDoc
+     */
+    OrbitModifier3D.prototype.modifierMouseUp = function (args) {
+        _super.prototype.modifierMouseUp.call(this, args);
+        // delegate drag and pan handling to the next active pointer in order of event occurrence
+        if (this.activePointerEvents.size > 0) {
+            var nextActivePointerEvent = this.activePointerEvents.values().next().value;
+            args.target.setPointerCapture(nextActivePointerEvent.pointerId);
+        }
+    };
+    OrbitModifier3D.prototype.toJSON = function () {
+        var json = _super.prototype.toJSON.call(this);
+        var options = {
+            enableZoom: this.enableZoom
+        };
+        Object.assign(json.options, options);
+        return json;
+    };
+    OrbitModifier3D.prototype.performModifierAction = function (args) {
         var camera = this.parentSurface.camera;
         if (!camera) {
             return;
         }
         var degreesPerPixel = 0.2;
-        var _a = args.mousePoint, x = _a.x, y = _a.y;
-        var deltaPoint = new Point_1.Point(this.pointStart.x - x, this.pointStart.y - y);
-        var deltaYaw = deltaPoint.x * degreesPerPixel;
-        var deltaPitch = deltaPoint.y * degreesPerPixel;
+        var currentPoint = args.mousePoint;
+        var xDelta = this.previousPoint.x - currentPoint.x;
+        var yDelta = this.previousPoint.y - currentPoint.y;
+        var deltaYaw = xDelta * degreesPerPixel;
+        var deltaPitch = yDelta * degreesPerPixel;
         camera.orbitalYaw += deltaYaw;
         camera.orbitalPitch -= deltaPitch;
-        this.pointStart = new Point_1.Point(x, y);
-        args.handled = true;
     };
-    /**
-     * @inheritDoc
-     */
-    OrbitModifier3D.prototype.modifierMouseUp = function (args) {
-        _super.prototype.modifierMouseUp.call(this, args);
-        this.isDragging = false;
-        this.pointStart = undefined;
+    OrbitModifier3D.prototype.getIsActionAllowed = function (args) {
+        // allow drag and pan only for the first active pointer in order of event occurrence
+        var capturedPointerEvent = this.activePointerEvents.values().next().value;
+        if (capturedPointerEvent.pointerId !== args.pointerId || this.activePointerEvents.size > 1) {
+            return false;
+        }
+        return true;
     };
     return OrbitModifier3D;
-}(ChartModifierBase3D_1.ChartModifierBase3D));
+}(PinchZoomModifier3D_1.PinchZoomModifier3D));
 exports.OrbitModifier3D = OrbitModifier3D;

package/Charting3D/ChartModifiers/PinchZoomModifier3D.d.ts

@@ -0,0 +1,81 @@
+import { ModifierMouseArgs } from "../../Charting/ChartModifiers/ModifierMouseArgs";
+import { EChart3DModifierType } from "../../types/ChartModifierType";
+import { ChartModifierBase3D, IChartModifierBase3DOptions } from "./ChartModifierBase3D";
+import { Point } from "../../Core/Point";
+/**
+ * Optional parameters passed to the constructor of {@link PinchZoomModifier3D} to configure it
+ */
+export interface IPinchZoomModifier3DOptions extends IChartModifierBase3DOptions {
+    /**
+     * Defines the sensitivity of zooming
+     */
+    growFactor?: number;
+}
+/**
+ * @summary The {@link PinchZoomModifier3D} provides pinch zooming behavior on a 3D {@link SciChart3DSurface}
+ * within SciChart - High Performance {@link https://www.scichart.com/javascript-chart-features | JavaScript 3D Charts}
+ * @description
+ *
+ * To apply the {@link PinchZoomModifier3D} to a {@link SciChart3DSurface} and add pinch zoom behavior,
+ * use the following code:
+ *
+ * ```ts
+ * const sciChartS3Durface: SciChart3DSurface;
+ * sciChart3DSurface.chartModifiers.add(new PinchZoomModifier3D());
+ * ```
+ *
+ * @remarks The speed of zoom can be modified via the {@link PinchZoomModifier3D.mouseWheelSensitivity} property.
+ */
+export declare class PinchZoomModifier3D extends ChartModifierBase3D {
+    readonly type: EChart3DModifierType;
+    /**
+     * Defines the sensitivity of zooming
+     */
+    growFactor: number;
+    /**
+     * touch points X coordinates difference
+     */
+    protected previousHorizontalTouchPointsDistance: number;
+    /**
+     * touch points Y coordinates difference
+     */
+    protected previousVerticalTouchPointsDistance: number;
+    /**
+     * Creates an instance of the {@link MouseWheelZoomModifier3D}
+     * @param options optional parameters of type {@link IMouseWheelZoomModifier3DOptions} used to configure the modifier
+     */
+    constructor(options?: IPinchZoomModifier3DOptions);
+    /**
+     * @inheritDoc
+     */
+    modifierMouseDown(args: ModifierMouseArgs): void;
+    /**
+     * @inheritDoc
+     */
+    modifierMouseMove(args: ModifierMouseArgs): void;
+    /**
+     * @inheritDoc
+     */
+    modifierMouseUp(args: ModifierMouseArgs): void;
+    /**
+     * @inheritDoc
+     */
+    toJSON(): {
+        type: string;
+        options: Required<Omit<IChartModifierBase3DOptions, never>>;
+    };
+    /**
+     * Performs the zoom operation around the mouse point
+     * @param mousePoint The X,Y location of the mouse at the time of the zoom
+     * @param horizontalDistance horizontal distance between points
+     * @param verticalDistance vertical distance between points
+     */
+    protected performZoom(mousePoint: Point, horizontalDistance: number, verticalDistance: number): void;
+    /**
+     * Handles pointer event becoming inactive
+     * @param args pointer event properties
+     */
+    protected removeFromActiveTouchEvents(args: ModifierMouseArgs): void;
+    protected performModifierAction(args: ModifierMouseArgs): void;
+    protected getIsActionAllowed(args: ModifierMouseArgs): boolean;
+}

package/Charting3D/ChartModifiers/PinchZoomModifier3D.js

@@ -0,0 +1,164 @@
+"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 __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PinchZoomModifier3D = void 0;
+var ChartModifierType_1 = require("../../types/ChartModifierType");
+var CameraController_1 = require("../CameraController");
+var ChartModifierBase3D_1 = require("./ChartModifierBase3D");
+/**
+ * @summary The {@link PinchZoomModifier3D} provides pinch zooming behavior on a 3D {@link SciChart3DSurface}
+ * within SciChart - High Performance {@link https://www.scichart.com/javascript-chart-features | JavaScript 3D Charts}
+ * @description
+ *
+ * To apply the {@link PinchZoomModifier3D} to a {@link SciChart3DSurface} and add pinch zoom behavior,
+ * use the following code:
+ *
+ * ```ts
+ * const sciChartS3Durface: SciChart3DSurface;
+ * sciChart3DSurface.chartModifiers.add(new PinchZoomModifier3D());
+ * ```
+ *
+ * @remarks The speed of zoom can be modified via the {@link PinchZoomModifier3D.mouseWheelSensitivity} property.
+ */
+var PinchZoomModifier3D = /** @class */ (function (_super) {
+    __extends(PinchZoomModifier3D, _super);
+    /**
+     * Creates an instance of the {@link MouseWheelZoomModifier3D}
+     * @param options optional parameters of type {@link IMouseWheelZoomModifier3DOptions} used to configure the modifier
+     */
+    function PinchZoomModifier3D(options) {
+        var _this = this;
+        var _a;
+        _this = _super.call(this, options) || this;
+        /**
+         * Defines the sensitivity of zooming
+         */
+        _this.growFactor = 0.5;
+        _this.type = ChartModifierType_1.EChart3DModifierType.PinchZoom;
+        _this.growFactor = (_a = options === null || options === void 0 ? void 0 : options.growFactor) !== null && _a !== void 0 ? _a : _this.growFactor;
+        return _this;
+    }
+    /**
+     * @inheritDoc
+     */
+    PinchZoomModifier3D.prototype.modifierMouseDown = function (args) {
+        _super.prototype.modifierMouseDown.call(this, args);
+        if (!this.isAttached) {
+            throw new Error("Should not call PinchZoomModifier3D.modifierMouseDown if not attached");
+        }
+        var isTouchEvent = args.pointerType === "touch" || args.pointerType === "pen";
+        if (isTouchEvent) {
+            this.activePointerEvents.set(args.pointerId, args);
+        }
+    };
+    /**
+     * @inheritDoc
+     */
+    PinchZoomModifier3D.prototype.modifierMouseMove = function (args) {
+        var _a;
+        _super.prototype.modifierMouseMove.call(this, args);
+        var lastPoint = (_a = this.activePointerEvents.get(args.pointerId)) === null || _a === void 0 ? void 0 : _a.mousePoint;
+        // update saved pointer coordinates
+        if (this.activePointerEvents.has(args.pointerId)) {
+            this.activePointerEvents.set(args.pointerId, args);
+        }
+        var isActionAllowed = this.getIsActionAllowed(args);
+        if (isActionAllowed) {
+            // this.parentSurface.setZoomState(EZoomState.UserZooming);
+            this.performModifierAction(args);
+        }
+    };
+    /**
+     * @inheritDoc
+     */
+    PinchZoomModifier3D.prototype.modifierMouseUp = function (args) {
+        _super.prototype.modifierMouseUp.call(this, args);
+        this.removeFromActiveTouchEvents(args);
+    };
+    /**
+     * @inheritDoc
+     */
+    PinchZoomModifier3D.prototype.toJSON = function () {
+        var json = _super.prototype.toJSON.call(this);
+        var options = {
+            growFactor: this.growFactor
+        };
+        Object.assign(json.options, options);
+        return json;
+    };
+    /**
+     * Performs the zoom operation around the mouse point
+     * @param mousePoint The X,Y location of the mouse at the time of the zoom
+     * @param horizontalDistance horizontal distance between points
+     * @param verticalDistance vertical distance between points
+     */
+    PinchZoomModifier3D.prototype.performZoom = function (mousePoint, horizontalDistance, verticalDistance) {
+        var scs = this.parentSurface;
+        if (!scs) {
+            return;
+        }
+        var camera = scs.camera;
+        if (!camera) {
+            return;
+        }
+        var currentTotalDistance = Math.sqrt(Math.pow(horizontalDistance, 2) + Math.pow(verticalDistance, 2));
+        var prevTotalDistance = Math.sqrt(Math.pow(this.previousHorizontalTouchPointsDistance, 2) + Math.pow(this.previousVerticalTouchPointsDistance, 2));
+        var radius = camera.radius;
+        var delta = (prevTotalDistance - currentTotalDistance) * this.growFactor;
+        var zoomFactor = (radius + delta) / radius;
+        if (camera.projectionMode === CameraController_1.ECameraProjectionMode.Perspective) {
+            camera.radius *= zoomFactor;
+        }
+        else {
+            camera.orthoWidth *= zoomFactor;
+            camera.orthoHeight *= zoomFactor;
+        }
+    };
+    /**
+     * Handles pointer event becoming inactive
+     * @param args pointer event properties
+     */
+    PinchZoomModifier3D.prototype.removeFromActiveTouchEvents = function (args) {
+        // Remove this event from the target's cache
+        this.activePointerEvents.delete(args.pointerId);
+        // reset distance values
+        if (this.activePointerEvents.size < 2) {
+            this.previousHorizontalTouchPointsDistance = undefined;
+            this.previousVerticalTouchPointsDistance = undefined;
+        }
+    };
+    PinchZoomModifier3D.prototype.performModifierAction = function (args) {
+        var _a = Array.from(this.activePointerEvents.values()), firstTouchPoint = _a[0].mousePoint, secondTouchPoint = _a[1].mousePoint;
+        // Calculate projections of distance between the touch points
+        var currentHorizontalTouchPointsDistance = Math.abs(firstTouchPoint.x - secondTouchPoint.x);
+        var currentVerticalTouchPointsDistance = Math.abs(firstTouchPoint.y - secondTouchPoint.y);
+        if (this.previousHorizontalTouchPointsDistance !== undefined &&
+            this.previousVerticalTouchPointsDistance !== undefined) {
+            this.performZoom(args.mousePoint, currentHorizontalTouchPointsDistance, currentVerticalTouchPointsDistance);
+        }
+        // Cache the distance for the next move event
+        this.previousHorizontalTouchPointsDistance = currentHorizontalTouchPointsDistance;
+        this.previousVerticalTouchPointsDistance = currentVerticalTouchPointsDistance;
+    };
+    PinchZoomModifier3D.prototype.getIsActionAllowed = function (args) {
+        var isTouchEvent = args.pointerType === "touch" || args.pointerType === "pen";
+        // check for pinch gestures if there are multiple active touches
+        return isTouchEvent && this.activePointerEvents.size >= 2;
+    };
+    return PinchZoomModifier3D;
+}(ChartModifierBase3D_1.ChartModifierBase3D));
+exports.PinchZoomModifier3D = PinchZoomModifier3D;

package/Charting3D/ChartModifiers/TooltipModifier3D.d.ts

@@ -0,0 +1,87 @@
+import { ModifierMouseArgs } from "../../Charting/ChartModifiers/ModifierMouseArgs";
+import { EChart3DModifierType } from "../../types/ChartModifierType";
+import { TooltipSvgAnnotation3D, TTooltip3DDataTemplate, TTooltip3DSvgTemplate } from "../Visuals/Annotations/TooltipSvgAnnotation3D";
+import { IRenderableSeries3D } from "../Visuals/RenderableSeries/BaseRenderableSeries3D";
+import { ChartModifierBase3D, IChartModifierBase3DOptions } from "./ChartModifierBase3D";
+/**
+ * Optional parameters passed to the constructor of {@link TooltipModifier3D} to configure it
+ */
+export interface ITooltipModifier3DOptions extends IChartModifierBase3DOptions {
+    crosshairStroke?: string;
+    crosshairStrokeThickness?: number;
+    isCrosshairVisible?: boolean;
+    showTooltip?: boolean;
+    tooltipTitle?: string;
+    tooltipSvgTemplate?: TTooltip3DSvgTemplate;
+    tooltipContainerBackground?: string;
+    tooltipTextStroke?: string;
+    tooltipLegendTemplate?: TTooltip3DSvgTemplate;
+    tooltipLegendOffsetX?: number;
+    tooltipLegendOffsetY?: number;
+    placementDivId?: string;
+    tooltipDataTemplate?: TTooltip3DDataTemplate;
+}
+export declare class TooltipModifier3D extends ChartModifierBase3D {
+    /**
+     * @inheritDoc
+     */
+    readonly type = EChart3DModifierType.Tooltip;
+    /**
+     * Gets or sets whether we should display the tooltip. Default is true
+     */
+    showTooltip: boolean;
+    tooltipTitle?: string;
+    protected includedSeriesMap: Map<IRenderableSeries3D, boolean>;
+    protected tooltipAnnotation: TooltipSvgAnnotation3D;
+    private crosshairEntity;
+    private crosshairStrokeProperty;
+    private crosshairStrokeThicknessProperty;
+    private isCrosshairVisibleProperty;
+    private tooltipSvgTemplateProperty?;
+    private tooltipLegendTemplateProperty?;
+    private tooltipContainerBackgroundProperty?;
+    private tooltipTextStrokeProperty?;
+    private tooltipLegendOffsetXProperty?;
+    private tooltipLegendOffsetYProperty?;
+    private placementDivIdProperty?;
+    private tooltipDataTemplateProperty?;
+    constructor(options?: ITooltipModifier3DOptions);
+    includeSeries(series: IRenderableSeries3D, isIncluded: boolean): void;
+    getIncludedSeries(): IRenderableSeries3D[];
+    get isCrosshairVisible(): boolean;
+    set isCrosshairVisible(isVisible: boolean);
+    get crosshairStroke(): string;
+    set crosshairStroke(stroke: string);
+    get crosshairStrokeThickness(): number;
+    set crosshairStrokeThickness(strokeThickness: number);
+    get tooltipSvgTemplate(): TTooltip3DSvgTemplate;
+    set tooltipSvgTemplate(value: TTooltip3DSvgTemplate);
+    get tooltipLegendTemplate(): TTooltip3DSvgTemplate;
+    set tooltipLegendTemplate(value: TTooltip3DSvgTemplate);
+    get tooltipDataTemplate(): TTooltip3DDataTemplate;
+    set tooltipDataTemplate(value: TTooltip3DDataTemplate);
+    get tooltipContainerBackground(): string;
+    set tooltipContainerBackground(value: string);
+    get tooltipLegendOffsetX(): number;
+    set tooltipLegendOffsetX(value: number);
+    get tooltipLegendOffsetY(): number;
+    set tooltipLegendOffsetY(value: number);
+    get tooltipTextStroke(): string;
+    set tooltipTextStroke(value: string);
+    /**
+     * Gets or sets the parent div element reference or id for the Tooltip
+     */
+    get placementDivId(): string;
+    /**
+     * Gets or sets the parent div element reference or id for the Tooltip
+     */
+    set placementDivId(value: string);
+    /** @inheritDoc */
+    onAttach(): void;
+    /** @inheritDoc */
+    onDetach(): void;
+    /** @inheritDoc */
+    modifierMouseMove(args: ModifierMouseArgs): void;
+}
+/** Relocate the tooltip so that it is always within the seriesViewRect */
+export declare const adjustTooltipPosition3D: (width: number, height: number, svgAnnotation: TooltipSvgAnnotation3D) => void;