molstar 3.31.2 → 3.31.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +202 -202
  3. package/build/viewer/embedded.html +52 -52
  4. package/build/viewer/index.html +115 -115
  5. package/build/viewer/molstar.js +1 -1
  6. package/lib/apps/docking-viewer/index.html +36 -36
  7. package/lib/apps/viewer/embedded.html +52 -52
  8. package/lib/apps/viewer/index.html +115 -115
  9. package/lib/commonjs/extensions/meshes/mesh-extension.d.ts +4 -2
  10. package/lib/commonjs/extensions/meshes/mesh-streaming/behavior.d.ts +2 -0
  11. package/lib/commonjs/mol-canvas3d/canvas3d.js +2 -1
  12. package/lib/commonjs/mol-geo/geometry/cylinders/cylinders.d.ts +1 -1
  13. package/lib/commonjs/mol-geo/geometry/lines/lines.d.ts +0 -1
  14. package/lib/commonjs/mol-geo/geometry/points/points.d.ts +1 -1
  15. package/lib/commonjs/mol-gl/shader/cylinders.vert.d.ts +2 -2
  16. package/lib/commonjs/mol-gl/shader/cylinders.vert.js +2 -2
  17. package/lib/commonjs/mol-gl/shader/spheres.vert.d.ts +2 -2
  18. package/lib/commonjs/mol-gl/shader/spheres.vert.js +2 -2
  19. package/lib/commonjs/mol-math/linear-algebra/matrix/principal-axes.js +1 -1
  20. package/lib/commonjs/mol-plugin/behavior/dynamic/volume-streaming/model.d.ts +2 -3
  21. package/lib/commonjs/mol-plugin/context.js +1 -0
  22. package/lib/commonjs/mol-repr/structure/visual/bond-inter-unit-cylinder.js +2 -1
  23. package/lib/commonjs/mol-repr/structure/visual/bond-intra-unit-cylinder.js +2 -1
  24. package/lib/commonjs/mol-repr/structure/visual/util/link.d.ts +1 -0
  25. package/lib/commonjs/mol-repr/structure/visual/util/link.js +27 -9
  26. package/lib/commonjs/mol-script/language/builder.d.ts +1 -0
  27. package/lib/commonjs/mol-util/data-source.js +2 -1
  28. package/lib/examples/alpha-orbitals/index.html +72 -72
  29. package/lib/examples/basic-wrapper/index.html +137 -137
  30. package/lib/examples/lighting/index.html +88 -88
  31. package/lib/examples/proteopedia-wrapper/index.html +236 -236
  32. package/lib/extensions/meshes/mesh-extension.d.ts +4 -2
  33. package/lib/extensions/meshes/mesh-streaming/behavior.d.ts +2 -0
  34. package/lib/mol-canvas3d/canvas3d.js +2 -1
  35. package/lib/mol-geo/geometry/cylinders/cylinders.d.ts +1 -1
  36. package/lib/mol-geo/geometry/lines/lines.d.ts +0 -1
  37. package/lib/mol-geo/geometry/points/points.d.ts +1 -1
  38. package/lib/mol-gl/shader/cylinders.vert.d.ts +2 -2
  39. package/lib/mol-gl/shader/cylinders.vert.js +2 -2
  40. package/lib/mol-gl/shader/spheres.vert.d.ts +2 -2
  41. package/lib/mol-gl/shader/spheres.vert.js +2 -2
  42. package/lib/mol-math/linear-algebra/matrix/principal-axes.js +1 -1
  43. package/lib/mol-plugin/behavior/dynamic/volume-streaming/model.d.ts +2 -3
  44. package/lib/mol-plugin/context.js +1 -0
  45. package/lib/mol-plugin/version.js +2 -2
  46. package/lib/mol-plugin-ui/skin/base/base.scss +32 -32
  47. package/lib/mol-plugin-ui/skin/base/components/controls-base.scss +333 -333
  48. package/lib/mol-plugin-ui/skin/base/components/controls.scss +418 -418
  49. package/lib/mol-plugin-ui/skin/base/components/help.scss +27 -27
  50. package/lib/mol-plugin-ui/skin/base/components/line-graph.scss +67 -67
  51. package/lib/mol-plugin-ui/skin/base/components/log.scss +100 -100
  52. package/lib/mol-plugin-ui/skin/base/components/misc.scss +663 -663
  53. package/lib/mol-plugin-ui/skin/base/components/sequence.scss +125 -125
  54. package/lib/mol-plugin-ui/skin/base/components/slider.scss +165 -165
  55. package/lib/mol-plugin-ui/skin/base/components/tasks.scss +99 -99
  56. package/lib/mol-plugin-ui/skin/base/components/toast.scss +83 -83
  57. package/lib/mol-plugin-ui/skin/base/components/transformer.scss +163 -163
  58. package/lib/mol-plugin-ui/skin/base/components/viewport.scss +137 -137
  59. package/lib/mol-plugin-ui/skin/base/layout/common.scss +71 -71
  60. package/lib/mol-plugin-ui/skin/base/layout/controls-landscape.scss +89 -89
  61. package/lib/mol-plugin-ui/skin/base/layout/controls-outside.scss +98 -98
  62. package/lib/mol-plugin-ui/skin/base/layout/controls-portrait.scss +108 -108
  63. package/lib/mol-plugin-ui/skin/base/layout.scss +40 -40
  64. package/lib/mol-plugin-ui/skin/base/logo.scss +12 -12
  65. package/lib/mol-plugin-ui/skin/base/normalize.scss +209 -209
  66. package/lib/mol-plugin-ui/skin/base/ui.scss +40 -40
  67. package/lib/mol-plugin-ui/skin/base/variables.scss +88 -88
  68. package/lib/mol-plugin-ui/skin/blue.scss +1 -1
  69. package/lib/mol-plugin-ui/skin/colors/blue.scss +23 -23
  70. package/lib/mol-plugin-ui/skin/colors/dark.scss +23 -23
  71. package/lib/mol-plugin-ui/skin/colors/light.scss +29 -29
  72. package/lib/mol-plugin-ui/skin/dark.scss +1 -1
  73. package/lib/mol-plugin-ui/skin/light.scss +1 -1
  74. package/lib/mol-repr/structure/visual/bond-inter-unit-cylinder.js +2 -1
  75. package/lib/mol-repr/structure/visual/bond-intra-unit-cylinder.js +2 -1
  76. package/lib/mol-repr/structure/visual/util/link.d.ts +1 -0
  77. package/lib/mol-repr/structure/visual/util/link.js +27 -9
  78. package/lib/mol-script/language/builder.d.ts +1 -0
  79. package/lib/mol-util/data-source.js +2 -1
  80. package/package.json +178 -177
@@ -358,6 +358,7 @@ var PluginContext = /** @class */ (function () {
358
358
  s.unsubscribe();
359
359
  }
360
360
  this.subs = [];
361
+ this.animationLoop.stop();
361
362
  this.commands.dispose();
362
363
  (_a = this.canvas3d) === null || _a === void 0 ? void 0 : _a.dispose();
363
364
  (_b = this.canvas3dContext) === null || _b === void 0 ? void 0 : _b.dispose(options);
@@ -186,7 +186,8 @@ function InterUnitBondCylinderImpostorVisual(materialId) {
186
186
  getLoci: bond_1.getInterBondLoci,
187
187
  eachLocation: bond_1.eachInterBond,
188
188
  setUpdateState: function (state, newProps, currentProps, newTheme, currentTheme, newStructure, currentStructure) {
189
- state.createGeometry = (newProps.sizeAspectRatio !== currentProps.sizeAspectRatio ||
189
+ state.createGeometry = (newProps.sizeFactor !== currentProps.sizeFactor ||
190
+ newProps.sizeAspectRatio !== currentProps.sizeAspectRatio ||
190
191
  newProps.linkScale !== currentProps.linkScale ||
191
192
  newProps.linkSpacing !== currentProps.linkSpacing ||
192
193
  newProps.ignoreHydrogens !== currentProps.ignoreHydrogens ||
@@ -207,7 +207,8 @@ function IntraUnitBondCylinderImpostorVisual(materialId) {
207
207
  getLoci: bond_1.getIntraBondLoci,
208
208
  eachLocation: bond_1.eachIntraBond,
209
209
  setUpdateState: function (state, newProps, currentProps, newTheme, currentTheme, newStructureGroup, currentStructureGroup) {
210
- state.createGeometry = (newProps.sizeAspectRatio !== currentProps.sizeAspectRatio ||
210
+ state.createGeometry = (newProps.sizeFactor !== currentProps.sizeFactor ||
211
+ newProps.sizeAspectRatio !== currentProps.sizeAspectRatio ||
211
212
  newProps.linkScale !== currentProps.linkScale ||
212
213
  newProps.linkSpacing !== currentProps.linkSpacing ||
213
214
  newProps.ignoreHydrogens !== currentProps.ignoreHydrogens ||
@@ -2,6 +2,7 @@
2
2
  * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
3
3
  *
4
4
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
5
+ * @author Zhenyu Zhang <jump2cn@gmail.com>
5
6
  */
6
7
  import { Vec3 } from '../../../../mol-math/linear-algebra';
7
8
  import { ParamDefinition as PD } from '../../../../mol-util/param-definition';
@@ -3,6 +3,7 @@
3
3
  * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
4
4
  *
5
5
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
6
+ * @author Zhenyu Zhang <jump2cn@gmail.com>
6
7
  */
7
8
  Object.defineProperty(exports, "__esModule", { value: true });
8
9
  exports.createLinkLines = exports.createLinkCylinderImpostors = exports.createLinkCylinderMesh = exports.calculateShiftDir = exports.DefaultLinkLineProps = exports.LinkLineParams = exports.DefaultLinkCylinderProps = exports.LinkCylinderParams = void 0;
@@ -24,7 +25,7 @@ exports.LinkCylinderParams = {
24
25
  aromaticScale: param_definition_1.ParamDefinition.Numeric(0.3, { min: 0, max: 1, step: 0.01 }),
25
26
  aromaticSpacing: param_definition_1.ParamDefinition.Numeric(1.5, { min: 0, max: 3, step: 0.01 }),
26
27
  aromaticDashCount: param_definition_1.ParamDefinition.Numeric(2, { min: 2, max: 6, step: 2 }),
27
- dashCount: param_definition_1.ParamDefinition.Numeric(4, { min: 2, max: 10, step: 2 }),
28
+ dashCount: param_definition_1.ParamDefinition.Numeric(4, { min: 0, max: 10, step: 2 }),
28
29
  dashScale: param_definition_1.ParamDefinition.Numeric(0.8, { min: 0, max: 2, step: 0.1 }),
29
30
  dashCap: param_definition_1.ParamDefinition.Boolean(true),
30
31
  stubCap: param_definition_1.ParamDefinition.Boolean(true),
@@ -35,7 +36,7 @@ exports.LinkLineParams = {
35
36
  linkScale: param_definition_1.ParamDefinition.Numeric(0.5, { min: 0, max: 1, step: 0.1 }),
36
37
  linkSpacing: param_definition_1.ParamDefinition.Numeric(0.1, { min: 0, max: 2, step: 0.01 }),
37
38
  aromaticDashCount: param_definition_1.ParamDefinition.Numeric(2, { min: 2, max: 6, step: 2 }),
38
- dashCount: param_definition_1.ParamDefinition.Numeric(4, { min: 2, max: 10, step: 2 }),
39
+ dashCount: param_definition_1.ParamDefinition.Numeric(4, { min: 0, max: 10, step: 2 }),
39
40
  };
40
41
  exports.DefaultLinkLineProps = param_definition_1.ParamDefinition.getDefaultValues(exports.LinkLineParams);
41
42
  var tmpV12 = (0, linear_algebra_1.Vec3)();
@@ -121,7 +122,12 @@ function createLinkCylinderMesh(ctx, linkBuilder, props, mesh) {
121
122
  else if (linkStyle === 1 /* LinkStyle.Dashed */) {
122
123
  cylinderProps.radiusTop = cylinderProps.radiusBottom = linkRadius * dashScale;
123
124
  cylinderProps.topCap = cylinderProps.bottomCap = dashCap;
124
- (0, cylinder_1.addFixedCountDashedCylinder)(builderState, va, vb, 0.5, segmentCount, cylinderProps);
125
+ if (segmentCount > 1) {
126
+ (0, cylinder_1.addFixedCountDashedCylinder)(builderState, va, vb, 0.5, segmentCount, cylinderProps);
127
+ }
128
+ else {
129
+ (0, cylinder_1.addCylinder)(builderState, va, vb, 0.5, cylinderProps);
130
+ }
125
131
  }
126
132
  else if (linkStyle === 2 /* LinkStyle.Double */ || linkStyle === 3 /* LinkStyle.OffsetDouble */ || linkStyle === 4 /* LinkStyle.Triple */ || linkStyle === 5 /* LinkStyle.OffsetTriple */ || linkStyle === 7 /* LinkStyle.Aromatic */ || linkStyle === 8 /* LinkStyle.MirroredAromatic */) {
127
133
  var order = (linkStyle === 2 /* LinkStyle.Double */ || linkStyle === 3 /* LinkStyle.OffsetDouble */) ? 2 :
@@ -242,9 +248,15 @@ function createLinkCylinderImpostors(ctx, linkBuilder, props, cylinders) {
242
248
  builder.add(va[0], va[1], va[2], vm[0], vm[1], vm[2], 1, linkCap, linkStub, edgeIndex);
243
249
  }
244
250
  else if (linkStyle === 1 /* LinkStyle.Dashed */) {
245
- v3scale(tmpV12, v3sub(tmpV12, vb, va), lengthScale);
246
- v3sub(vb, vb, tmpV12);
247
- builder.addFixedCountDashes(va, vb, segmentCount, dashScale, dashCap, dashCap, edgeIndex);
251
+ if (segmentCount > 1) {
252
+ v3scale(tmpV12, v3sub(tmpV12, vb, va), lengthScale);
253
+ v3sub(vb, vb, tmpV12);
254
+ builder.addFixedCountDashes(va, vb, segmentCount, dashScale, dashCap, dashCap, edgeIndex);
255
+ }
256
+ else {
257
+ v3scale(vm, v3add(vm, va, vb), 0.5);
258
+ builder.add(va[0], va[1], va[2], vm[0], vm[1], vm[2], dashScale, dashCap, dashCap, edgeIndex);
259
+ }
248
260
  }
249
261
  else if (linkStyle === 2 /* LinkStyle.Double */ || linkStyle === 3 /* LinkStyle.OffsetDouble */ || linkStyle === 4 /* LinkStyle.Triple */ || linkStyle === 5 /* LinkStyle.OffsetTriple */ || linkStyle === 7 /* LinkStyle.Aromatic */ || linkStyle === 8 /* LinkStyle.MirroredAromatic */) {
250
262
  var order = (linkStyle === 2 /* LinkStyle.Double */ || linkStyle === 3 /* LinkStyle.OffsetDouble */) ? 2 :
@@ -347,9 +359,15 @@ function createLinkLines(ctx, linkBuilder, props, lines) {
347
359
  builder.add(va[0], va[1], va[2], vm[0], vm[1], vm[2], edgeIndex);
348
360
  }
349
361
  else if (linkStyle === 1 /* LinkStyle.Dashed */) {
350
- v3scale(tmpV12, v3sub(tmpV12, vb, va), lengthScale);
351
- v3sub(vb, vb, tmpV12);
352
- builder.addFixedCountDashes(va, vb, segmentCount, edgeIndex);
362
+ if (segmentCount > 1) {
363
+ v3scale(tmpV12, v3sub(tmpV12, vb, va), lengthScale);
364
+ v3sub(vb, vb, tmpV12);
365
+ builder.addFixedCountDashes(va, vb, segmentCount, edgeIndex);
366
+ }
367
+ else {
368
+ v3scale(vm, v3add(vm, va, vb), 0.5);
369
+ builder.add(va[0], va[1], va[2], vm[0], vm[1], vm[2], edgeIndex);
370
+ }
353
371
  }
354
372
  else if (linkStyle === 2 /* LinkStyle.Double */ || linkStyle === 3 /* LinkStyle.OffsetDouble */ || linkStyle === 4 /* LinkStyle.Triple */ || linkStyle === 5 /* LinkStyle.OffsetTriple */ || linkStyle === 7 /* LinkStyle.Aromatic */ || linkStyle === 8 /* LinkStyle.MirroredAromatic */) {
355
373
  var order = linkStyle === 2 /* LinkStyle.Double */ || linkStyle === 3 /* LinkStyle.OffsetDouble */ ? 2 :
@@ -10,6 +10,7 @@ export declare namespace MolScriptBuilder {
10
10
  '@header': string;
11
11
  type: {
12
12
  '@header': string;
13
+ /** atom macromolecular property set */
13
14
  bool: MSymbol<import("./symbol").Arguments<import("./symbol").Arguments.PropTypes<{
14
15
  0: import("./symbol").Argument<import("./type").Type.AnyValue>;
15
16
  }>>, import("./type").Type.OneOf<boolean>>;
@@ -350,7 +350,8 @@ var _fs = undefined;
350
350
  function getFS() {
351
351
  if (_fs)
352
352
  return _fs;
353
- _fs = require('fs');
353
+ var req = require; // To fool webpack
354
+ _fs = req('fs');
354
355
  return _fs;
355
356
  }
356
357
  /** Alternative implementation of ajaxGetInternal (because xhr2 does not support file:// protocol) */
@@ -1,73 +1,73 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
6
- <title>Mol* Alpha Orbitals Example</title>
7
- <style>
8
- * {
9
- margin: 0;
10
- padding: 0;
11
- box-sizing: border-box;
12
- }
13
- #app {
14
- position: absolute;
15
- left: 0;
16
- top: 0;
17
- bottom: 0;
18
- right: 0;
19
- }
20
- #controls {
21
- position: absolute;
22
- left: 8px;
23
- top: 8px;
24
- width: 300px;
25
- }
26
- #sponsor {
27
- position: absolute;
28
- left: 8px;
29
- bottom: 8px;
30
- font-family: "Helvetica Neue", "Segoe UI", Helvetica, "Source Sans Pro", Arial, sans-serif;
31
- font-size: 12px;
32
- text-align: center;
33
- }
34
- #sponsor svg {
35
- fill: #128EA4;
36
- width: 100px;
37
- }
38
- #sponsor a {
39
- text-decoration: none;
40
- color: #128EA4;
41
- }
42
- </style>
43
- <link rel="stylesheet" type="text/css" href="molstar.css" />
44
- <script type="text/javascript" src="./index.js"></script>
45
- </head>
46
- <body>
47
- <div id="app"></div>
48
- <div id='controls'></div>
49
- <div id='sponsor'>
50
- <a href='https://www.entos.ai/envision' target="_blank" rel="noopener">
51
- <svg class="makeStyles-root-46" viewBox="0 0 190 36" xmlns="http://www.w3.org/2000/svg"><path d="M32.2591 28.6707C32.2591 32.3914 29.2421 35.407 25.5214 35.407C22.0752 35.407 19.2338 32.8206 18.8325 29.4831V29.4775C18.8143 29.3312 18.8018 29.1835 18.7934 29.0344C18.7934 29.0316 18.7921 29.0274 18.7921 29.0246V29.0177C18.7865 28.902 18.7837 28.7864 18.7837 28.6707C18.7837 26.2557 20.0532 24.1389 21.9609 22.9503C21.9623 22.9489 21.9651 22.9489 21.9665 22.9475C22.0933 22.8666 22.2243 22.7914 22.3581 22.7203C22.3581 22.7203 22.3595 22.7203 22.3595 22.7189C23.3029 22.2173 24.3787 21.933 25.5214 21.933C29.2421 21.933 32.2591 24.9486 32.2591 28.6707Z"></path><path d="M25.5214 14.0692C29.2421 14.0692 32.2591 11.0522 32.2591 7.33146C32.2591 3.61074 29.2421 0.59375 25.5214 0.59375C22.0529 0.59375 19.1962 3.21637 18.8255 6.58592C18.8185 6.67092 18.8116 6.75454 18.8018 6.83815C18.7893 7.00119 18.7837 7.16563 18.7837 7.33146C18.7837 9.73669 20.0434 11.8465 21.94 13.038C22.0891 13.116 22.2355 13.201 22.3776 13.2916C22.3783 13.2923 22.379 13.2926 22.3797 13.293C22.3804 13.2933 22.3811 13.2937 22.3818 13.2944C23.3196 13.7891 24.3871 14.0692 25.5214 14.0692Z"></path><path d="M19.3645 12.4113C20.2926 12.4113 21.1694 12.638 21.94 13.038C20.0434 11.8465 18.7837 9.73669 18.7837 7.33146C18.7837 7.16563 18.7893 7.00119 18.8018 6.83815C18.4688 9.76455 16.1385 12.0866 13.2065 12.4044C13.8545 13.1193 14.3785 13.9484 14.745 14.857C15.7497 13.3798 17.4443 12.4113 19.3645 12.4113Z"></path><path d="M14.7312 21.1249V21.1236C14.1279 20.2331 13.7767 19.1587 13.7767 18.0007V17.9728C13.7767 15.3084 12.2285 13.0035 9.9835 11.911C9.98141 11.9103 9.97967 11.9096 9.97793 11.9089C9.97619 11.9082 9.97444 11.9075 9.97235 11.9068C9.96817 11.904 9.96538 11.9026 9.9612 11.9012C9.95981 11.9012 9.95981 11.8998 9.95981 11.8998C9.9417 11.8915 9.92394 11.8831 9.90618 11.8747C9.8884 11.8664 9.87063 11.858 9.85251 11.8497C9.82046 11.8343 9.78701 11.819 9.75357 11.8051L9.74521 11.8009C8.91745 11.4372 8.0019 11.2351 7.03898 11.2351C3.31826 11.2351 0.30127 14.2521 0.30127 17.9728C0.30127 21.6935 3.31826 24.7105 7.03898 24.7105C7.98797 24.7105 8.89098 24.514 9.71037 24.1601C9.71246 24.1594 9.7142 24.1583 9.71594 24.1573C9.71768 24.1562 9.71943 24.1552 9.72152 24.1545C9.8107 24.1169 9.8985 24.0765 9.9849 24.0333L9.98629 24.0319C10.7625 23.6919 11.6181 23.5037 12.5197 23.5037C12.7524 23.5037 12.9824 23.5163 13.2081 23.54C13.2082 23.5399 13.2081 23.54 13.2081 23.54C15.0168 23.7365 16.5971 24.695 17.6185 26.0885C17.9195 25.1688 18.3752 24.3201 18.9563 23.5732C17.1964 23.4464 15.6635 22.5058 14.7312 21.1249Z"></path><g clip-path="url(#clip0)"><path d="M106.391 18.0021C106.391 11.3724 101.039 6 94.4389 6H88.4585C81.8581 6 76.5061 11.3724 76.5061 18.0021V30.0042H81.2845V18.0021C81.2845 14.0268 84.4941 10.8008 88.4585 10.8008H94.4347C98.395 10.8008 101.609 14.0226 101.609 18.0021V30.0042H106.391V18.0021Z"></path><path d="M149.432 6H142.258C135.653 6 130.301 11.3724 130.301 18.0021C130.301 24.6319 135.653 30.0042 142.258 30.0042H149.432C156.036 30.0042 161.388 24.6319 161.388 18.0021C161.388 11.3724 156.032 6 149.432 6ZM149.432 25.1992H142.258C138.297 25.1992 135.084 21.9774 135.084 17.9979C135.084 14.0183 138.293 10.7966 142.258 10.7966H149.432C153.392 10.7966 156.606 14.0183 156.606 17.9979C156.606 21.9774 153.392 25.1992 149.432 25.1992Z"></path><path d="M74.1151 25.1992H58.5736C55.4526 25.1992 52.804 23.1924 51.8171 20.3983H74.1151V17.9979C74.1151 17.1808 74.1868 16.3807 74.3175 15.5975H51.8171C52.804 12.8033 55.4526 10.7966 58.5736 10.7966H76.0383C77.1475 8.87458 78.6911 7.22773 80.5299 6H58.5736C51.969 6 46.6169 11.3724 46.6169 18.0021C46.6169 24.6276 51.969 30 58.5736 30H74.1151V25.1992Z"></path><path d="M120.74 6H115.958H102.369C104.212 7.22773 105.751 8.87458 106.861 10.8008H115.958V30H120.74V10.8008H129.838C130.947 8.87458 132.486 7.22773 134.329 6H120.74Z"></path><path d="M182.906 15.6017H169.756C168.436 15.6017 167.365 14.5264 167.365 13.2013C167.365 11.8762 168.436 10.8008 169.756 10.8008H188.882V6H169.756C165.796 6 162.582 9.22173 162.582 13.2013C162.582 17.1808 165.791 20.4025 169.756 20.4025H182.906C184.226 20.4025 185.297 21.4779 185.297 22.803C185.297 24.1281 184.226 25.2034 182.906 25.2034H161.852C160.743 27.1297 159.199 28.7765 157.361 30.0042H182.906C186.866 30.0042 190.08 26.7825 190.08 22.803C190.08 18.8234 186.866 15.6017 182.906 15.6017Z"></path></g><defs><clipPath id="clip0"><rect width="190" height="24" fill="white" transform="translate(0 6)"></rect></clipPath></defs></svg>
52
- <div>
53
- Entos Envision
54
- </div>
55
- </a>
56
- </div>
57
- <script>
58
- function getParam(name, regex) {
59
- var r = new RegExp(name + '=' + '(' + regex + ')[&]?', 'i');
60
- return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || '');
61
- }
62
-
63
- var debugMode = getParam('debug-mode', '[^&]+').trim() === '1';
64
- if (debugMode) AlphaOrbitalsExample.setDebugMode(debugMode);
65
-
66
- var timingMode = getParam('timing-mode', '[^&]+').trim() === '1';
67
- if (timingMode) AlphaOrbitalsExample.setTimingMode(timingMode);
68
-
69
- AlphaOrbitalsExample.init('app')
70
- </script>
71
- <!-- __MOLSTAR_ANALYTICS__ -->
72
- </body>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
6
+ <title>Mol* Alpha Orbitals Example</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+ #app {
14
+ position: absolute;
15
+ left: 0;
16
+ top: 0;
17
+ bottom: 0;
18
+ right: 0;
19
+ }
20
+ #controls {
21
+ position: absolute;
22
+ left: 8px;
23
+ top: 8px;
24
+ width: 300px;
25
+ }
26
+ #sponsor {
27
+ position: absolute;
28
+ left: 8px;
29
+ bottom: 8px;
30
+ font-family: "Helvetica Neue", "Segoe UI", Helvetica, "Source Sans Pro", Arial, sans-serif;
31
+ font-size: 12px;
32
+ text-align: center;
33
+ }
34
+ #sponsor svg {
35
+ fill: #128EA4;
36
+ width: 100px;
37
+ }
38
+ #sponsor a {
39
+ text-decoration: none;
40
+ color: #128EA4;
41
+ }
42
+ </style>
43
+ <link rel="stylesheet" type="text/css" href="molstar.css" />
44
+ <script type="text/javascript" src="./index.js"></script>
45
+ </head>
46
+ <body>
47
+ <div id="app"></div>
48
+ <div id='controls'></div>
49
+ <div id='sponsor'>
50
+ <a href='https://www.entos.ai/envision' target="_blank" rel="noopener">
51
+ <svg class="makeStyles-root-46" viewBox="0 0 190 36" xmlns="http://www.w3.org/2000/svg"><path d="M32.2591 28.6707C32.2591 32.3914 29.2421 35.407 25.5214 35.407C22.0752 35.407 19.2338 32.8206 18.8325 29.4831V29.4775C18.8143 29.3312 18.8018 29.1835 18.7934 29.0344C18.7934 29.0316 18.7921 29.0274 18.7921 29.0246V29.0177C18.7865 28.902 18.7837 28.7864 18.7837 28.6707C18.7837 26.2557 20.0532 24.1389 21.9609 22.9503C21.9623 22.9489 21.9651 22.9489 21.9665 22.9475C22.0933 22.8666 22.2243 22.7914 22.3581 22.7203C22.3581 22.7203 22.3595 22.7203 22.3595 22.7189C23.3029 22.2173 24.3787 21.933 25.5214 21.933C29.2421 21.933 32.2591 24.9486 32.2591 28.6707Z"></path><path d="M25.5214 14.0692C29.2421 14.0692 32.2591 11.0522 32.2591 7.33146C32.2591 3.61074 29.2421 0.59375 25.5214 0.59375C22.0529 0.59375 19.1962 3.21637 18.8255 6.58592C18.8185 6.67092 18.8116 6.75454 18.8018 6.83815C18.7893 7.00119 18.7837 7.16563 18.7837 7.33146C18.7837 9.73669 20.0434 11.8465 21.94 13.038C22.0891 13.116 22.2355 13.201 22.3776 13.2916C22.3783 13.2923 22.379 13.2926 22.3797 13.293C22.3804 13.2933 22.3811 13.2937 22.3818 13.2944C23.3196 13.7891 24.3871 14.0692 25.5214 14.0692Z"></path><path d="M19.3645 12.4113C20.2926 12.4113 21.1694 12.638 21.94 13.038C20.0434 11.8465 18.7837 9.73669 18.7837 7.33146C18.7837 7.16563 18.7893 7.00119 18.8018 6.83815C18.4688 9.76455 16.1385 12.0866 13.2065 12.4044C13.8545 13.1193 14.3785 13.9484 14.745 14.857C15.7497 13.3798 17.4443 12.4113 19.3645 12.4113Z"></path><path d="M14.7312 21.1249V21.1236C14.1279 20.2331 13.7767 19.1587 13.7767 18.0007V17.9728C13.7767 15.3084 12.2285 13.0035 9.9835 11.911C9.98141 11.9103 9.97967 11.9096 9.97793 11.9089C9.97619 11.9082 9.97444 11.9075 9.97235 11.9068C9.96817 11.904 9.96538 11.9026 9.9612 11.9012C9.95981 11.9012 9.95981 11.8998 9.95981 11.8998C9.9417 11.8915 9.92394 11.8831 9.90618 11.8747C9.8884 11.8664 9.87063 11.858 9.85251 11.8497C9.82046 11.8343 9.78701 11.819 9.75357 11.8051L9.74521 11.8009C8.91745 11.4372 8.0019 11.2351 7.03898 11.2351C3.31826 11.2351 0.30127 14.2521 0.30127 17.9728C0.30127 21.6935 3.31826 24.7105 7.03898 24.7105C7.98797 24.7105 8.89098 24.514 9.71037 24.1601C9.71246 24.1594 9.7142 24.1583 9.71594 24.1573C9.71768 24.1562 9.71943 24.1552 9.72152 24.1545C9.8107 24.1169 9.8985 24.0765 9.9849 24.0333L9.98629 24.0319C10.7625 23.6919 11.6181 23.5037 12.5197 23.5037C12.7524 23.5037 12.9824 23.5163 13.2081 23.54C13.2082 23.5399 13.2081 23.54 13.2081 23.54C15.0168 23.7365 16.5971 24.695 17.6185 26.0885C17.9195 25.1688 18.3752 24.3201 18.9563 23.5732C17.1964 23.4464 15.6635 22.5058 14.7312 21.1249Z"></path><g clip-path="url(#clip0)"><path d="M106.391 18.0021C106.391 11.3724 101.039 6 94.4389 6H88.4585C81.8581 6 76.5061 11.3724 76.5061 18.0021V30.0042H81.2845V18.0021C81.2845 14.0268 84.4941 10.8008 88.4585 10.8008H94.4347C98.395 10.8008 101.609 14.0226 101.609 18.0021V30.0042H106.391V18.0021Z"></path><path d="M149.432 6H142.258C135.653 6 130.301 11.3724 130.301 18.0021C130.301 24.6319 135.653 30.0042 142.258 30.0042H149.432C156.036 30.0042 161.388 24.6319 161.388 18.0021C161.388 11.3724 156.032 6 149.432 6ZM149.432 25.1992H142.258C138.297 25.1992 135.084 21.9774 135.084 17.9979C135.084 14.0183 138.293 10.7966 142.258 10.7966H149.432C153.392 10.7966 156.606 14.0183 156.606 17.9979C156.606 21.9774 153.392 25.1992 149.432 25.1992Z"></path><path d="M74.1151 25.1992H58.5736C55.4526 25.1992 52.804 23.1924 51.8171 20.3983H74.1151V17.9979C74.1151 17.1808 74.1868 16.3807 74.3175 15.5975H51.8171C52.804 12.8033 55.4526 10.7966 58.5736 10.7966H76.0383C77.1475 8.87458 78.6911 7.22773 80.5299 6H58.5736C51.969 6 46.6169 11.3724 46.6169 18.0021C46.6169 24.6276 51.969 30 58.5736 30H74.1151V25.1992Z"></path><path d="M120.74 6H115.958H102.369C104.212 7.22773 105.751 8.87458 106.861 10.8008H115.958V30H120.74V10.8008H129.838C130.947 8.87458 132.486 7.22773 134.329 6H120.74Z"></path><path d="M182.906 15.6017H169.756C168.436 15.6017 167.365 14.5264 167.365 13.2013C167.365 11.8762 168.436 10.8008 169.756 10.8008H188.882V6H169.756C165.796 6 162.582 9.22173 162.582 13.2013C162.582 17.1808 165.791 20.4025 169.756 20.4025H182.906C184.226 20.4025 185.297 21.4779 185.297 22.803C185.297 24.1281 184.226 25.2034 182.906 25.2034H161.852C160.743 27.1297 159.199 28.7765 157.361 30.0042H182.906C186.866 30.0042 190.08 26.7825 190.08 22.803C190.08 18.8234 186.866 15.6017 182.906 15.6017Z"></path></g><defs><clipPath id="clip0"><rect width="190" height="24" fill="white" transform="translate(0 6)"></rect></clipPath></defs></svg>
52
+ <div>
53
+ Entos Envision
54
+ </div>
55
+ </a>
56
+ </div>
57
+ <script>
58
+ function getParam(name, regex) {
59
+ var r = new RegExp(name + '=' + '(' + regex + ')[&]?', 'i');
60
+ return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || '');
61
+ }
62
+
63
+ var debugMode = getParam('debug-mode', '[^&]+').trim() === '1';
64
+ if (debugMode) AlphaOrbitalsExample.setDebugMode(debugMode);
65
+
66
+ var timingMode = getParam('timing-mode', '[^&]+').trim() === '1';
67
+ if (timingMode) AlphaOrbitalsExample.setTimingMode(timingMode);
68
+
69
+ AlphaOrbitalsExample.init('app')
70
+ </script>
71
+ <!-- __MOLSTAR_ANALYTICS__ -->
72
+ </body>
73
73
  </html>
@@ -1,138 +1,138 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
6
- <title>Mol* Plugin Wrapper</title>
7
- <style>
8
- * {
9
- margin: 0;
10
- padding: 0;
11
- box-sizing: border-box;
12
- }
13
- #app {
14
- position: absolute;
15
- left: 160px;
16
- top: 100px;
17
- width: 600px;
18
- height: 600px;
19
- border: 1px solid #ccc;
20
- }
21
-
22
- #controls {
23
- position: absolute;
24
- width: 130px;
25
- top: 10px;
26
- left: 10px;
27
- }
28
-
29
- #controls > button {
30
- display: block;
31
- width: 100%;
32
- text-align: left;
33
- }
34
-
35
- #controls > hr {
36
- margin: 5px 0;
37
- }
38
-
39
- #controls > input, #controls > select {
40
- width: 100%;
41
- display: block;
42
- }
43
- </style>
44
- <link rel="stylesheet" type="text/css" href="molstar.css" />
45
- <script type="text/javascript" src="./index.js"></script>
46
- </head>
47
- <body>
48
- <div id='controls'>
49
- <h3>Source</h3>
50
- <input type='text' id='url' placeholder='url' />
51
- <input type='text' id='assemblyId' placeholder='assembly id' />
52
- <select id='format'>
53
- <option value='mmcif' selected>mmCIF</option>
54
- <option value='pdb'>PDB</option>
55
- </select>
56
- </div>
57
- <div id="app"></div>
58
- <script>
59
- function $(id) { return document.getElementById(id); }
60
-
61
- var pdbId = '1grm', assemblyId= '1';
62
- var url = 'https://www.ebi.ac.uk/pdbe/static/entry/' + pdbId + '_updated.cif';
63
- var format = 'mmcif';
64
-
65
- $('url').value = url;
66
- $('url').onchange = function (e) { url = e.target.value; }
67
- $('assemblyId').value = assemblyId;
68
- $('assemblyId').onchange = function (e) { assemblyId = e.target.value; }
69
- $('format').value = format;
70
- $('format').onchange = function (e) { format = e.target.value; }
71
-
72
- BasicMolStarWrapper.init('app' /** or document.getElementById('app') */).then(() => {
73
- BasicMolStarWrapper.setBackground(0xffffff);
74
- });
75
-
76
- addControl('Load Asym Unit', () => BasicMolStarWrapper.load({ url: url, format: format }));
77
- addControl('Load Assembly', () => BasicMolStarWrapper.load({ url: url, format: format, assemblyId: assemblyId }));
78
-
79
- addSeparator();
80
-
81
- addHeader('Camera');
82
- addControl('Toggle Spin', () => BasicMolStarWrapper.toggleSpin());
83
-
84
- addSeparator();
85
-
86
- addHeader('Animation');
87
-
88
- // adjust this number to make the animation faster or slower
89
- // requires to "restart" the animation if changed
90
- BasicMolStarWrapper.animate.modelIndex.targetFps = 30;
91
-
92
- addControl('Play To End', () => BasicMolStarWrapper.animate.modelIndex.onceForward());
93
- addControl('Play To Start', () => BasicMolStarWrapper.animate.modelIndex.onceBackward());
94
- addControl('Play Palindrome', () => BasicMolStarWrapper.animate.modelIndex.palindrome());
95
- addControl('Play Loop', () => BasicMolStarWrapper.animate.modelIndex.loop());
96
- addControl('Stop', () => BasicMolStarWrapper.animate.modelIndex.stop());
97
-
98
- addHeader('Misc');
99
-
100
- addControl('Apply Stripes', () => BasicMolStarWrapper.coloring.applyStripes());
101
- addControl('Apply Custom Theme', () => BasicMolStarWrapper.coloring.applyCustomTheme());
102
- addControl('Default Coloring', () => BasicMolStarWrapper.coloring.applyDefault());
103
-
104
- addHeader('Interactivity');
105
- addControl('Highlight seq_id=7', () => BasicMolStarWrapper.interactivity.highlightOn());
106
- addControl('Clear Highlight', () => BasicMolStarWrapper.interactivity.clearHighlight());
107
-
108
- addHeader('Tests');
109
-
110
- addControl('Static Superposition', () => BasicMolStarWrapper.tests.staticSuperposition());
111
- addControl('Dynamic Superposition', () => BasicMolStarWrapper.tests.dynamicSuperposition());
112
- addControl('Validation Tooltip', () => BasicMolStarWrapper.tests.toggleValidationTooltip());
113
-
114
- addControl('Show Toasts', () => BasicMolStarWrapper.tests.showToasts());
115
- addControl('Hide Toasts', () => BasicMolStarWrapper.tests.hideToasts());
116
-
117
- ////////////////////////////////////////////////////////
118
-
119
- function addControl(label, action) {
120
- var btn = document.createElement('button');
121
- btn.onclick = action;
122
- btn.innerText = label;
123
- $('controls').appendChild(btn);
124
- }
125
-
126
- function addSeparator() {
127
- var hr = document.createElement('hr');
128
- $('controls').appendChild(hr);
129
- }
130
-
131
- function addHeader(header) {
132
- var h = document.createElement('h3');
133
- h.innerText = header;
134
- $('controls').appendChild(h);
135
- }
136
- </script>
137
- </body>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
6
+ <title>Mol* Plugin Wrapper</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+ #app {
14
+ position: absolute;
15
+ left: 160px;
16
+ top: 100px;
17
+ width: 600px;
18
+ height: 600px;
19
+ border: 1px solid #ccc;
20
+ }
21
+
22
+ #controls {
23
+ position: absolute;
24
+ width: 130px;
25
+ top: 10px;
26
+ left: 10px;
27
+ }
28
+
29
+ #controls > button {
30
+ display: block;
31
+ width: 100%;
32
+ text-align: left;
33
+ }
34
+
35
+ #controls > hr {
36
+ margin: 5px 0;
37
+ }
38
+
39
+ #controls > input, #controls > select {
40
+ width: 100%;
41
+ display: block;
42
+ }
43
+ </style>
44
+ <link rel="stylesheet" type="text/css" href="molstar.css" />
45
+ <script type="text/javascript" src="./index.js"></script>
46
+ </head>
47
+ <body>
48
+ <div id='controls'>
49
+ <h3>Source</h3>
50
+ <input type='text' id='url' placeholder='url' />
51
+ <input type='text' id='assemblyId' placeholder='assembly id' />
52
+ <select id='format'>
53
+ <option value='mmcif' selected>mmCIF</option>
54
+ <option value='pdb'>PDB</option>
55
+ </select>
56
+ </div>
57
+ <div id="app"></div>
58
+ <script>
59
+ function $(id) { return document.getElementById(id); }
60
+
61
+ var pdbId = '1grm', assemblyId= '1';
62
+ var url = 'https://www.ebi.ac.uk/pdbe/static/entry/' + pdbId + '_updated.cif';
63
+ var format = 'mmcif';
64
+
65
+ $('url').value = url;
66
+ $('url').onchange = function (e) { url = e.target.value; }
67
+ $('assemblyId').value = assemblyId;
68
+ $('assemblyId').onchange = function (e) { assemblyId = e.target.value; }
69
+ $('format').value = format;
70
+ $('format').onchange = function (e) { format = e.target.value; }
71
+
72
+ BasicMolStarWrapper.init('app' /** or document.getElementById('app') */).then(() => {
73
+ BasicMolStarWrapper.setBackground(0xffffff);
74
+ });
75
+
76
+ addControl('Load Asym Unit', () => BasicMolStarWrapper.load({ url: url, format: format }));
77
+ addControl('Load Assembly', () => BasicMolStarWrapper.load({ url: url, format: format, assemblyId: assemblyId }));
78
+
79
+ addSeparator();
80
+
81
+ addHeader('Camera');
82
+ addControl('Toggle Spin', () => BasicMolStarWrapper.toggleSpin());
83
+
84
+ addSeparator();
85
+
86
+ addHeader('Animation');
87
+
88
+ // adjust this number to make the animation faster or slower
89
+ // requires to "restart" the animation if changed
90
+ BasicMolStarWrapper.animate.modelIndex.targetFps = 30;
91
+
92
+ addControl('Play To End', () => BasicMolStarWrapper.animate.modelIndex.onceForward());
93
+ addControl('Play To Start', () => BasicMolStarWrapper.animate.modelIndex.onceBackward());
94
+ addControl('Play Palindrome', () => BasicMolStarWrapper.animate.modelIndex.palindrome());
95
+ addControl('Play Loop', () => BasicMolStarWrapper.animate.modelIndex.loop());
96
+ addControl('Stop', () => BasicMolStarWrapper.animate.modelIndex.stop());
97
+
98
+ addHeader('Misc');
99
+
100
+ addControl('Apply Stripes', () => BasicMolStarWrapper.coloring.applyStripes());
101
+ addControl('Apply Custom Theme', () => BasicMolStarWrapper.coloring.applyCustomTheme());
102
+ addControl('Default Coloring', () => BasicMolStarWrapper.coloring.applyDefault());
103
+
104
+ addHeader('Interactivity');
105
+ addControl('Highlight seq_id=7', () => BasicMolStarWrapper.interactivity.highlightOn());
106
+ addControl('Clear Highlight', () => BasicMolStarWrapper.interactivity.clearHighlight());
107
+
108
+ addHeader('Tests');
109
+
110
+ addControl('Static Superposition', () => BasicMolStarWrapper.tests.staticSuperposition());
111
+ addControl('Dynamic Superposition', () => BasicMolStarWrapper.tests.dynamicSuperposition());
112
+ addControl('Validation Tooltip', () => BasicMolStarWrapper.tests.toggleValidationTooltip());
113
+
114
+ addControl('Show Toasts', () => BasicMolStarWrapper.tests.showToasts());
115
+ addControl('Hide Toasts', () => BasicMolStarWrapper.tests.hideToasts());
116
+
117
+ ////////////////////////////////////////////////////////
118
+
119
+ function addControl(label, action) {
120
+ var btn = document.createElement('button');
121
+ btn.onclick = action;
122
+ btn.innerText = label;
123
+ $('controls').appendChild(btn);
124
+ }
125
+
126
+ function addSeparator() {
127
+ var hr = document.createElement('hr');
128
+ $('controls').appendChild(hr);
129
+ }
130
+
131
+ function addHeader(header) {
132
+ var h = document.createElement('h3');
133
+ h.innerText = header;
134
+ $('controls').appendChild(h);
135
+ }
136
+ </script>
137
+ </body>
138
138
  </html>