diff --git a/CHANGELOG.md b/CHANGELOG.md index bf8e8b5b579fe94da77e66a2d126c35257f42fdc..5cef38d6f9c31c589e0dd89fa3ba0abbb53f3c11 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ Note that since we don't clearly distinguish between a public and private interf ## [Unreleased] +- Make `PluginContext.initContainer` checkered canvas background optional + ## [v3.23.0] - 2022-10-19 - Add `PluginContext.initContainer/mount/unmount` methods; these should make it easier to reuse a plugin context with both custom and built-in UI diff --git a/src/mol-plugin-ui/viewport/canvas.tsx b/src/mol-plugin-ui/viewport/canvas.tsx index c8b29ebf5b6b476e8094655bbf5f62855571961e..c75331955ad7f77ba1c285d5d2edbac84708c2b1 100644 --- a/src/mol-plugin-ui/viewport/canvas.tsx +++ b/src/mol-plugin-ui/viewport/canvas.tsx @@ -38,7 +38,7 @@ export class ViewportCanvas extends PluginUIComponent<ViewportCanvasParams, View }; componentDidMount() { - if (!this.container.current || !this.plugin.mount(this.container.current!)) { + if (!this.container.current || !this.plugin.mount(this.container.current!, { checkeredCanvasBackground: true })) { this.setState({ noWebGl: true }); return; } diff --git a/src/mol-plugin/context.ts b/src/mol-plugin/context.ts index 37b7b598df8a8f4ead895e590921c18ec5a2f148..fd315a57e306cd784e6d3286fafd8fcf2e26a1a6 100644 --- a/src/mol-plugin/context.ts +++ b/src/mol-plugin/context.ts @@ -193,7 +193,7 @@ export class PluginContext { */ readonly customState: unknown = Object.create(null); - initContainer(canvas3dContext?: Canvas3DContext) { + initContainer(options?: { canvas3dContext?: Canvas3DContext, checkeredCanvasBackground?: boolean }) { if (this.canvasContainer) return true; const container = document.createElement('div'); @@ -209,27 +209,33 @@ export class PluginContext { '-webkit-touch-callout': 'none', 'touch-action': 'manipulation', }); - let canvas = canvas3dContext?.canvas; + let canvas = options?.canvas3dContext?.canvas; if (!canvas) { canvas = document.createElement('canvas'); - Object.assign(canvas.style, { - 'background-image': 'linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%, lightgrey), linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%, lightgrey)', - 'background-size': '60px 60px', - 'background-position': '0 0, 30px 30px' - }); + if (options?.checkeredCanvasBackground) { + Object.assign(canvas.style, { + 'background-image': 'linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%, lightgrey), linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%, lightgrey)', + 'background-size': '60px 60px', + 'background-position': '0 0, 30px 30px' + }); + } container.appendChild(canvas); } - if (!this.initViewer(canvas, container, canvas3dContext)) { + if (!this.initViewer(canvas, container, options?.canvas3dContext)) { return false; } this.canvasContainer = container; return true; } - mount(target: HTMLElement) { + /** + * Mount the plugin into the target element (assumes the target has "relative"-like positioninig). + * If initContainer wasn't called separately before, initOptions will be passed to it. + */ + mount(target: HTMLElement, initOptions?: { canvas3dContext?: Canvas3DContext, checkeredCanvasBackground?: boolean }) { if (this.disposed) throw new Error('Cannot mount a disposed context'); - if (!this.initContainer()) return false; + if (!this.initContainer(initOptions)) return false; if (this.canvasContainer!.parentElement !== target) { this.canvasContainer!.parentElement?.removeChild(this.canvasContainer!);