Pre loader

resizing the heatmap, breaks the scalable SVG annotation

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0
0

Hi,

I have implemented a scalable annotation which will pann and zoom with a heatmap,
see code below,

class ScalableAnnotation extends CustomAnnotation {
    constructor(...args) {
        super(...args)
        this.zoomFactor
        this.initialWidth
        this.initialHeight
        this.initialDiff
        this.initialCircleRadius
        this.diff
    }
    update(xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
        super.update(xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans);
        if (!this.initialDiff) {
            this.initialDiff = xCalc.visibleMax - xCalc.visibleMin;
            this.initialCircleRadius = Number.parseFloat(d3.select(this.svg).selectAll('circle').attr('r'))
            this.initialCircleStrokeWidth = Number.parseFloat(d3.select(this.svg).selectAll('circle').style('stroke-width'))
            this.initialLineStrokeWidth = Number.parseFloat(d3.select(this.svg).selectAll('polygon').style('stroke-width'))
            this.initialWidth = Number.parseFloat(this.svg.getAttribute("width"));
            this.initialHeight = Number.parseFloat(this.svg.getAttribute("height"));
            this.zoomFactor = 1
        } else {
            this.diff = xCalc.visibleMax - xCalc.visibleMin;
            if (this.diff !== this.initialDiff) {
                this.zoomFactor = this.initialDiff / this.diff
                const width = this.initialWidth * this.zoomFactor;
                const height = this.initialHeight * this.zoomFactor;
                d3.select(this.svg).selectAll('circle').attr('r', (this.initialCircleRadius / this.zoomFactor) + 0.01)
                d3.select(this.svg).selectAll('circle').style('stroke-width', (this.initialCircleStrokeWidth / this.zoomFactor) + 0.003)
                d3.select(this.svg).selectAll('polygon').style('stroke-width', (this.initialLineStrokeWidth / this.zoomFactor) + 0.01)
                this.setSvgAttribute("width", width);
                this.setSvgAttribute("height", height);
                let borderX1 = this.getX1Coordinate(xCalc, yCalc) + this.xCoordShift;
                let borderY1 = this.getY1Coordinate(xCalc, yCalc) + this.yCoordShift;
                this.setAnnotationBorders(
                    borderX1,
                    borderX1 + width,
                    borderY1,
                    borderY1 + height
                );
                this.updateAdornerInner();
            }
        }
    }
}

This works fantastic when zooming in and zooming out or panning see video below,

Bur when we resize the heatmap, the annotations do not scan with the heatmap. see video below,

Any suggestion on how to deal with this scenario?

Thanks,

Pramod

Version
5.3.333
  • Jim Risen
    Hello, I guess we need a working example to check this. Could you provide one? And, are you able to reproduce the issues on the basic setup here: https://codepen.io/jim-risen/pen/LYoGwWX
  • Jim Risen
    Actually disregard that. We see the issue now, and going to try making some improvementsto the ScalableAnnotation.
  • You must to post comments
0
0

Thank you! looking forward to the improvements.

Best,

Pramod

  • You must to post comments
0
0

Here is an updated version of the ScalableAnnotation.

Please check and let us know if that works correctly.

class ScalableAnnotation extends CustomAnnotation {
  private initialXDiff: number;
  private initialYDiff: number;

public update(
    xCalc: CoordinateCalculatorBase,
    yCalc: CoordinateCalculatorBase,
    xCoordSvgTrans: number,
    yCoordSvgTrans: number
): void {
    super.update(xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans);
    const borders = this.getAnnotationBorders();

    if (this.initialXDiff === undefined && this.initialYDiff === undefined) {
        const initialX2 = this.getValue(borders.x2, xCalc, ECoordinateMode.Pixel);
        const initialY2 = this.getValue(borders.y2, yCalc, ECoordinateMode.Pixel);
        this.initialXDiff = initialX2 - this.x1;
        this.initialYDiff = initialY2 - this.y1;
    } else {
        const actualX2 = this.getValue(borders.x2, xCalc, ECoordinateMode.Pixel);
        const actualY2 = this.getValue(borders.y2, yCalc, ECoordinateMode.Pixel);
        const currentXDiff = actualX2 - this.x1;
        const currentYDiff = actualY2 - this.y1;

        if (this.initialXDiff !== currentXDiff || this.initialYDiff !== currentYDiff) {
            const x1Coordinate = this.getX1Coordinate(xCalc, yCalc);
            const y1Coordinate = this.getY1Coordinate(xCalc, yCalc);
            const x2Coordinate = this.getCoordinate(this.x1 + this.initialXDiff, xCalc, this.xCoordinateMode);
            const y2Coordinate = this.getCoordinate(this.y1 + this.initialYDiff, yCalc, this.yCoordinateMode);

            const width = Math.abs(x2Coordinate - x1Coordinate);
            const height = Math.abs(y2Coordinate - y1Coordinate);

            this.setSvgAttribute("width", width);
            this.setSvgAttribute("height", height);

            const borderX1 = x1Coordinate + this.xCoordShift;
            const borderY1 = y1Coordinate + this.yCoordShift;
            const borderX2 = borderX1 + width;
            const borderY2 = borderY1 + height;
            this.setAnnotationBorders(borderX1, borderX2, borderY1, borderY2);
            this.updateAdornerInner();
        }
    }
  }
}

Also you can check it here:
Example on CodePen

  • You must to post comments
0
0

apologies for late response… trying it now, I will get back to you shortly

Pramod

  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.