Skip to content

Commit

Permalink
Use bitmap sizes instead of element ones when constructing a screenshot
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nipheris
Nipheris committed Dec 8, 2021
1 parent a9ddb05 commit ecb4e40
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 76 deletions.
141 changes: 71 additions & 70 deletions src/gui/chart-widget.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { size } from 'fancy-canvas';

import { ensureDefined, ensureNotNull } from '../helpers/assertions';
import { drawScaled } from '../helpers/canvas-helpers';
import { Delegate } from '../helpers/delegate';
import { IDestroyable } from '../helpers/idestroyable';
import { ISubscription } from '../helpers/isubscription';
Expand Down Expand Up @@ -234,89 +233,91 @@ export class ChartWidget implements IDestroyable {
})
);
const ctx = getContext2D(targetCanvas);
drawScaled(ctx, pixelRatio, pixelRatio, () => {
let targetX = 0;
let targetY = 0;

const firstPane = this._paneWidgets[0];

const drawPriceAxises = (position: 'left' | 'right') => {
for (let paneIndex = 0; paneIndex < this._paneWidgets.length; paneIndex++) {
const paneWidget = this._paneWidgets[paneIndex];
const paneWidgetHeight = paneWidget.getSize().height;
const priceAxisWidget = ensureNotNull(position === 'left' ? paneWidget.leftPriceAxisWidget() : paneWidget.rightPriceAxisWidget());
const image = priceAxisWidget.getImage();
if (image.width > 0 && image.height > 0) {
ctx.drawImage(image, targetX, targetY, priceAxisWidget.getWidth(), paneWidgetHeight);
}
targetY += paneWidgetHeight;
// if (paneIndex < this._paneWidgets.length - 1) {
// const separator = this._paneSeparators[paneIndex];
// const separatorSize = separator.getSize();
// const separatorImage = separator.getImage();
// if (separatorImage.width > 0 && separatorImage.height > 0) {
// ctx.drawImage(separatorImage, targetX, targetY, separatorSize.w, separatorSize.h);
// }
// targetY += separatorSize.h;
// }
}
};
// draw left price scale if exists
if (this._isLeftAxisVisible()) {
drawPriceAxises('left');
targetX = ensureNotNull(firstPane.leftPriceAxisWidget()).getWidth();
}
targetY = 0;

let targetX = 0;
let targetY = 0;

const firstPane = this._paneWidgets[0];

const drawPriceAxises = (position: 'left' | 'right') => {
for (let paneIndex = 0; paneIndex < this._paneWidgets.length; paneIndex++) {
const paneWidget = this._paneWidgets[paneIndex];
const paneWidgetSize = paneWidget.getSize();
const image = paneWidget.getImage();
const priceAxisWidget = ensureNotNull(position === 'left' ? paneWidget.leftPriceAxisWidget() : paneWidget.rightPriceAxisWidget());
const image = priceAxisWidget.getImage();
if (image.width > 0 && image.height > 0) {
ctx.drawImage(image, targetX, targetY, paneWidgetSize.width, paneWidgetSize.height);
ctx.drawImage(image, targetX, targetY);
}
targetY += paneWidgetSize.height;
targetY += image.height;
// if (paneIndex < this._paneWidgets.length - 1) {
// const separator = this._paneSeparators[paneIndex];
// const separatorSize = separator.getSize();
// const separatorImage = separator.getImage();
// if (separatorImage.width > 0 && separatorImage.height > 0) {
// ctx.drawImage(separatorImage, targetX, targetY, separatorSize.w, separatorSize.h);
// }
// targetY += separatorSize.h;
// targetY += separatorImage.height;
// }
}
targetX += firstPane.getSize().width;
if (this._isRightAxisVisible()) {
targetY = 0;
drawPriceAxises('right');
};

// draw left price scale if exists
if (this._isLeftAxisVisible()) {
drawPriceAxises('left');
targetX = ensureNotNull(firstPane.leftPriceAxisWidget()).getImage().width;
}
targetY = 0;
for (let paneIndex = 0; paneIndex < this._paneWidgets.length; paneIndex++) {
const paneWidget = this._paneWidgets[paneIndex];
const image = paneWidget.getImage();
if (image.width > 0 && image.height > 0) {
ctx.drawImage(image, targetX, targetY);
}
const drawStub = (position: 'left' | 'right') => {
const stub = ensureNotNull(position === 'left' ? this._timeAxisWidget.leftStub() : this._timeAxisWidget.rightStub());
const stubSize = stub.getSize();
const stubImage = stub.getImage();
if (stubImage.width > 0 && stubImage.height > 0) {
ctx.drawImage(stubImage, targetX, targetY, stubSize.width, stubSize.height);
}
};
// draw time scale
if (this._options.timeScale.visible) {
targetX = 0;
if (this._isLeftAxisVisible()) {
drawStub('left');
targetX = ensureNotNull(firstPane.leftPriceAxisWidget()).getWidth();
}
const timeAxisSize = this._timeAxisWidget.getSize();
const timeAxisImage = this._timeAxisWidget.getImage();
if (timeAxisImage.width > 0 && timeAxisImage.height > 0) {
ctx.drawImage(timeAxisImage, targetX, targetY, timeAxisSize.width, timeAxisSize.height);
}
if (this._isRightAxisVisible()) {
targetX += firstPane.getSize().width;
drawStub('right');
ctx.restore();
}
targetY += image.height;
// if (paneIndex < this._paneWidgets.length - 1) {
// const separator = this._paneSeparators[paneIndex];
// const separatorImage = separator.getImage();
// if (separatorImage.width > 0 && separatorImage.height > 0) {
// ctx.drawImage(separatorImage, targetX, targetY, separatorSize.w, separatorSize.h);
// }
// targetY += separatorImage.height;
// }
}
targetX += firstPane.getImage().width;

// draw right price scale if exists
if (this._isRightAxisVisible()) {
targetY = 0;
drawPriceAxises('right');
}

const drawStub = (position: 'left' | 'right') => {
const stub = ensureNotNull(position === 'left' ? this._timeAxisWidget.leftStub() : this._timeAxisWidget.rightStub());
const stubImage = stub.getImage();
if (stubImage.width > 0 && stubImage.height > 0) {
ctx.drawImage(stubImage, targetX, targetY);
}
};

// draw time scale and stubs
if (this._options.timeScale.visible) {
targetX = 0;

if (this._isLeftAxisVisible()) {
drawStub('left');
targetX = ensureNotNull(firstPane.leftPriceAxisWidget()).getImage().width;
}
});

const timeAxisImage = this._timeAxisWidget.getImage();
if (timeAxisImage.width > 0 && timeAxisImage.height > 0) {
ctx.drawImage(timeAxisImage, targetX, targetY);
}
targetX += timeAxisImage.width;

if (this._isRightAxisVisible()) {
drawStub('right');
ctx.restore();
}
}

return targetCanvas;
}

Expand Down
16 changes: 10 additions & 6 deletions tests/e2e/graphics/test-cases/take-screenshot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,12 +96,16 @@ function runTestCase(container) {
chart.resize(600, 240, true);

window.requestAnimationFrame(() => {
const screenshot = chart.takeScreenshot();
screenshot.style.position = 'absolute';
screenshot.style.top = '260px';
window.requestAnimationFrame(() => {
const screenshot = chart.takeScreenshot();
screenshot.style.position = 'absolute';
screenshot.style.top = '260px';
screenshot.style.width = '600px';
screenshot.style.height = '240px';

const parent = container.parentNode;
parent.style.backgroundColor = 'yellow';
parent.appendChild(screenshot);
const parent = container.parentNode;
parent.style.backgroundColor = 'yellow';
parent.appendChild(screenshot);
});
});
}

0 comments on commit ecb4e40

Please sign in to comment.