From e2b92c15f03d8924fc5372737123d869477e4a7c Mon Sep 17 00:00:00 2001
From: dsehnal <david.sehnal@gmail.com>
Date: Thu, 27 Oct 2022 08:41:01 +0200
Subject: [PATCH] PluginContext.initContainer options
---
CHANGELOG.md | 2 ++
src/mol-plugin-ui/viewport/canvas.tsx | 2 +-
src/mol-plugin/context.ts | 26 ++++++++++++++++----------
3 files changed, 19 insertions(+), 11 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index bf8e8b5b5..5cef38d6f 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 c8b29ebf5..c75331955 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 37b7b598d..fd315a57e 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!);
--
GitLab