threepipe
Version:
A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.
144 lines • 6.22 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { serialize, timeout } from 'ts-browser-helpers';
import { AViewerPluginSync } from '../../viewer';
import { uiButton, uiConfig, uiFolderContainer, uiInput } from 'uiconfig.js';
import { CanvasSnapshot } from '../../utils/canvas-snapshot';
import { ProgressivePlugin } from '../pipeline/ProgressivePlugin';
let CanvasSnapshotPlugin = class CanvasSnapshotPlugin extends AViewerPluginSync {
constructor() {
super();
this.enabled = true;
this.filename = 'snapshot.png';
/**
* Only for {@link downloadSnapshot} and functions using that
*/
this.defaultOptions = {
waitForProgressive: true,
displayPixelRatio: window.devicePixelRatio,
scale: 1,
timeout: 0,
quality: 0.9,
};
this.downloadSnapshot = this.downloadSnapshot.bind(this);
}
/**
* Returns a File object with screenshot of the viewer canvas
* @param filename default is {@link CanvasSnapshotPlugin.filename}
* @param options waitForProgressive: wait for progressive rendering to finish, default: true
*/
async getFile(filename, options = { waitForProgressive: true }) {
options.getDataUrl = false;
return await this._getFile(filename || this.filename, options);
}
/**
* Returns a data url of the screenshot of the viewer canvas
* @param options waitForProgressive: wait for progressive rendering to finish, default: true
*/
async getDataUrl(options = {}) {
options.getDataUrl = true;
return await this._getFile('', options) ?? '';
}
async _getFile(filename, options = {}) {
const viewer = this._viewer;
const canvas = this._viewer?.canvas;
if (!viewer || !canvas)
return undefined;
const dpr = viewer.renderManager.renderScale;
if (options.displayPixelRatio !== undefined && options.displayPixelRatio !== dpr) {
viewer.renderManager.renderScale = options.displayPixelRatio;
}
if (options.timeout)
await timeout(options.timeout);
const progressive = viewer.getPlugin(ProgressivePlugin);
if (options.waitForProgressive !== false && progressive) {
// todo: disable interactions and all so that frameCount is not affected
await new Promise((res) => {
const listener = () => {
if (!progressive.isConverged(true))
return;
viewer.removeEventListener('postFrame', listener);
res();
};
viewer.addEventListener('postFrame', listener);
});
}
else
await viewer.doOnce('postFrame');
options.displayPixelRatio = 1;
const rect = options.rect;
if (rect && viewer.renderManager.renderScale !== 1) {
options.rect = {
...rect,
x: rect.x * viewer.renderManager.renderScale,
y: rect.y * viewer.renderManager.renderScale,
width: rect.width * viewer.renderManager.renderScale,
height: rect.height * viewer.renderManager.renderScale,
};
}
const file = await CanvasSnapshot.GetFile(canvas, filename, options);
options.rect = rect;
options.displayPixelRatio = viewer.renderManager.renderScale;
viewer.renderManager.renderScale = dpr;
return file;
}
// @uiButton('Download .png', {sendArgs: false})
async downloadSnapshot(filename, options = { waitForProgressive: true }) {
if (!this._viewer)
return;
if (!options.mimeType && !filename)
this.filename = this.filename.split('.').slice(0, -1).join('.') + '.png';
const file = await this.getFile(filename, { ...this.defaultOptions, ...options });
if (file)
await this._viewer.exportBlob(file, file.name);
}
async _downloadPng() {
this.filename = this.filename.split('.').slice(0, -1).join('.') + '.png';
return this.downloadSnapshot(undefined, { mimeType: 'image/png' });
}
async _downloadJpeg() {
this.filename = this.filename.split('.').slice(0, -1).join('.') + '.jpeg';
return this.downloadSnapshot(undefined, { mimeType: 'image/jpeg' });
}
async _downloadWebp() {
this.filename = this.filename.split('.').slice(0, -1).join('.') + '.webp';
return this.downloadSnapshot(undefined, { mimeType: 'image/webp' });
}
};
CanvasSnapshotPlugin.PluginType = 'CanvasSnapshotPlugin';
__decorate([
uiInput('Filename'),
serialize()
], CanvasSnapshotPlugin.prototype, "filename", void 0);
__decorate([
uiConfig(),
serialize()
], CanvasSnapshotPlugin.prototype, "defaultOptions", void 0);
__decorate([
uiButton('Download .png')
], CanvasSnapshotPlugin.prototype, "_downloadPng", null);
__decorate([
uiButton('Download .jpeg')
], CanvasSnapshotPlugin.prototype, "_downloadJpeg", null);
__decorate([
uiButton('Download .webp')
], CanvasSnapshotPlugin.prototype, "_downloadWebp", null);
CanvasSnapshotPlugin = __decorate([
uiFolderContainer('Canvas Snapshot (Image Export)')
], CanvasSnapshotPlugin);
export { CanvasSnapshotPlugin };
/**
* @deprecated - use {@link CanvasSnapshotPlugin}
*/
export class CanvasSnipperPlugin extends CanvasSnapshotPlugin {
constructor() {
super();
console.warn('CanvasSnipperPlugin is deprecated, use CanvasSnapshotPlugin');
}
}
CanvasSnipperPlugin.PluginType = 'CanvasSnipper';
//# sourceMappingURL=CanvasSnapshotPlugin.js.map