/** * Copyright (c) 2020-2021 mol* contributors, licensed under MIT, See LICENSE file for more info. * * @author David Sehnal * @author Alexander Rose */ import * as React from 'react'; import { PluginUIComponent } from '../base'; interface ViewportCanvasState { noWebGl: boolean showLogo: boolean } export interface ViewportCanvasParams { logo?: React.FC, noWebGl?: React.FC, parentClassName?: string, parentStyle?: React.CSSProperties, hostClassName?: string, hostStyle?: React.CSSProperties, } export class ViewportCanvas extends PluginUIComponent { private container = React.createRef(); private canvas = React.createRef(); state: ViewportCanvasState = { noWebGl: false, showLogo: true }; private handleLogo = () => { this.setState({ showLogo: !this.plugin.canvas3d?.reprCount.value }); }; componentDidMount() { if (!this.canvas.current || !this.container.current || !this.plugin.initViewer(this.canvas.current!, this.container.current!)) { this.setState({ noWebGl: true }); return; } this.handleLogo(); this.subscribe(this.plugin.canvas3d!.reprCount, this.handleLogo); } componentWillUnmount() { super.componentWillUnmount(); // TODO viewer cleanup } renderMissing() { if (this.props.noWebGl) { const C = this.props.noWebGl; return ; } return

WebGL does not seem to be available.

This can be caused by an outdated browser, graphics card driver issue, or bad weather. Sometimes, just restarting the browser helps. Also, make sure hardware acceleration is enabled in your browser.

For a list of supported browsers, refer to http://caniuse.com/#feat=webgl.

; } render() { if (this.state.noWebGl) return this.renderMissing(); const Logo = this.props.logo; return
{(this.state.showLogo && Logo) && }
; } }