You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
4.0 KiB
125 lines
4.0 KiB
import { print } from '../../utils/print';
|
|
import { Shortcut } from '../../utils/shortcut';
|
|
import { BasePlugin } from '../base-plugin';
|
|
/**
|
|
* <zh/> 全屏
|
|
*
|
|
* <en/> Full screen
|
|
*/
|
|
export class Fullscreen extends BasePlugin {
|
|
constructor(context, options) {
|
|
super(context, Object.assign({}, Fullscreen.defaultOptions, options));
|
|
this.$el = this.context.canvas.getContainer();
|
|
this.graphSize = [0, 0];
|
|
this.onFullscreenChange = () => {
|
|
var _a, _b, _c, _d;
|
|
const isFull = !!document.fullscreenElement;
|
|
if (this.options.autoFit)
|
|
this.setGraphSize(isFull);
|
|
if (isFull) {
|
|
(_b = (_a = this.options).onEnter) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
}
|
|
else {
|
|
(_d = (_c = this.options).onExit) === null || _d === void 0 ? void 0 : _d.call(_c);
|
|
}
|
|
};
|
|
this.shortcut = new Shortcut(context.graph);
|
|
this.bindEvents();
|
|
this.style = document.createElement('style');
|
|
document.head.appendChild(this.style);
|
|
this.style.innerHTML = `
|
|
:not(:root):fullscreen::backdrop {
|
|
background: transparent;
|
|
}
|
|
`;
|
|
}
|
|
bindEvents() {
|
|
this.unbindEvents();
|
|
this.shortcut.unbindAll();
|
|
const { request = [], exit = [] } = this.options.trigger;
|
|
this.shortcut.bind(request, this.request);
|
|
this.shortcut.bind(exit, this.exit);
|
|
const events = ['webkitfullscreenchange', 'mozfullscreenchange', 'fullscreenchange', 'MSFullscreenChange'];
|
|
events.forEach((eventName) => {
|
|
document.addEventListener(eventName, this.onFullscreenChange, false);
|
|
});
|
|
}
|
|
unbindEvents() {
|
|
this.shortcut.unbindAll();
|
|
const events = ['webkitfullscreenchange', 'mozfullscreenchange', 'fullscreenchange', 'MSFullscreenChange'];
|
|
events.forEach((eventName) => {
|
|
document.removeEventListener(eventName, this.onFullscreenChange, false);
|
|
});
|
|
}
|
|
setGraphSize(fullScreen = true) {
|
|
var _a, _b;
|
|
let width, height;
|
|
if (fullScreen) {
|
|
width = ((_a = globalThis.screen) === null || _a === void 0 ? void 0 : _a.width) || 0;
|
|
height = ((_b = globalThis.screen) === null || _b === void 0 ? void 0 : _b.height) || 0;
|
|
this.graphSize = this.context.graph.getSize();
|
|
}
|
|
else {
|
|
[width, height] = this.graphSize;
|
|
}
|
|
this.context.graph.setSize(width, height);
|
|
this.context.graph.render();
|
|
}
|
|
/**
|
|
* <zh/> 请求全屏
|
|
*
|
|
* <en/> Request full screen
|
|
*/
|
|
request() {
|
|
if (document.fullscreenElement || !isFullscreenEnabled())
|
|
return;
|
|
this.$el.requestFullscreen().catch((err) => {
|
|
print.warn(`Error attempting to enable full-screen: ${err.message} (${err.name})`);
|
|
});
|
|
}
|
|
/**
|
|
* <zh/> 退出全屏
|
|
*
|
|
* <en/> Exit full screen
|
|
*/
|
|
exit() {
|
|
if (!document.fullscreenElement)
|
|
return;
|
|
document.exitFullscreen();
|
|
}
|
|
/**
|
|
* <zh/> 更新配置
|
|
*
|
|
* <en/> Update options
|
|
* @param options - <zh/> 配置项 | <en/> Options
|
|
* @internal
|
|
*/
|
|
update(options) {
|
|
this.unbindEvents();
|
|
super.update(options);
|
|
this.bindEvents();
|
|
}
|
|
destroy() {
|
|
this.exit();
|
|
this.style.remove();
|
|
super.destroy();
|
|
}
|
|
}
|
|
Fullscreen.defaultOptions = {
|
|
trigger: {},
|
|
autoFit: true,
|
|
};
|
|
/**
|
|
* <zh/> 判断是否支持全屏
|
|
*
|
|
* <en/> Determine whether full screen is enabled
|
|
* @returns <zh/> 是否支持全屏 | <en/> Whether full screen is enabled
|
|
*/
|
|
function isFullscreenEnabled() {
|
|
return (document.fullscreenEnabled ||
|
|
// <zh/> 使用 Reflect 语法规避 ts 检查 | <en/> use Reflect to avoid ts checking
|
|
Reflect.get(document, 'webkitFullscreenEnabled') ||
|
|
Reflect.get(document, 'mozFullscreenEnabled') ||
|
|
Reflect.get(document, 'msFullscreenEnabled'));
|
|
}
|
|
//# sourceMappingURL=index.js.map
|