@uibcdf/molsysviewer 0.0.2 → 0.5.3

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 (3) hide show
  1. package/dist/viewer.js +37 -4
  2. package/dist/viewer.js.map +2 -2
  3. package/package.json +7 -2
package/dist/viewer.js CHANGED
@@ -144078,6 +144078,7 @@ var bootPopup = async (loadedModule) => {
144078
144078
  }
144079
144079
  };
144080
144080
  const container = document.getElementById("molsysviewer-pop");
144081
+ const loading = document.getElementById("molsysviewer-loading");
144081
144082
  let isUserInteracting = false;
144082
144083
  let wheelTimeout = null;
144083
144084
  container?.addEventListener("pointerdown", () => {
@@ -144096,6 +144097,22 @@ var bootPopup = async (loadedModule) => {
144096
144097
  isUserInteracting = false;
144097
144098
  }, 200);
144098
144099
  }, { passive: true });
144100
+ const revealViewer = () => {
144101
+ if (container) {
144102
+ container.style.opacity = "1";
144103
+ }
144104
+ if (loading) {
144105
+ loading.style.opacity = "0";
144106
+ loading.style.pointerEvents = "none";
144107
+ window.setTimeout(() => {
144108
+ try {
144109
+ loading.remove();
144110
+ } catch (e) {
144111
+ }
144112
+ }, 300);
144113
+ }
144114
+ };
144115
+ const revealTimer = window.setTimeout(revealViewer, 2500);
144099
144116
  const popControllerPromise = (async () => {
144100
144117
  await new Promise((r) => setTimeout(r, 100));
144101
144118
  const ctrl2 = await MolSysViewerController2.create(container, (msg) => {
@@ -144157,6 +144174,8 @@ var bootPopup = async (loadedModule) => {
144157
144174
  if (data.isSwingActive) await ctrl2.toggleSwing(true);
144158
144175
  if (data.isDarkMode) await ctrl2.toggleBackground("dark");
144159
144176
  if (data.autohide !== void 0) updateAutohide(!!data.autohide);
144177
+ window.clearTimeout(revealTimer);
144178
+ revealViewer();
144160
144179
  break;
144161
144180
  case "molsysviewer-sync-autohide":
144162
144181
  updateAutohide(!!data.enabled);
@@ -144376,6 +144395,16 @@ var PopupHostManager = class {
144376
144395
  this.close();
144377
144396
  return;
144378
144397
  }
144398
+ let resolvedModuleUrl = null;
144399
+ if (this.viewerModuleUrl) {
144400
+ try {
144401
+ resolvedModuleUrl = new URL(this.viewerModuleUrl, window.location.href).href;
144402
+ fetch(resolvedModuleUrl, { cache: "force-cache" }).catch(() => {
144403
+ });
144404
+ } catch (e) {
144405
+ resolvedModuleUrl = null;
144406
+ }
144407
+ }
144379
144408
  this.popoutWin = window.open("", "_blank", "width=960,height=720");
144380
144409
  if (!this.popoutWin) return;
144381
144410
  this.isReady = false;
@@ -144388,8 +144417,11 @@ var PopupHostManager = class {
144388
144417
  <meta charset="UTF-8" />
144389
144418
  <title>MolSysViewer Popout</title>
144390
144419
  <style>
144391
- html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #111; }
144392
- #molsysviewer-pop { position: relative; width: 100%; height: 100%; min-height: 400px; }
144420
+ html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #f5f6f8; }
144421
+ #molsysviewer-pop { position: relative; width: 100%; height: 100%; min-height: 400px; opacity: 0; transition: opacity 240ms ease; }
144422
+ #molsysviewer-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #2b2f36; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; letter-spacing: 0.2px; }
144423
+ #molsysviewer-loading .spinner { width: 28px; height: 28px; border-radius: 999px; border: 3px solid rgba(0,0,0,0.12); border-top-color: rgba(0,0,0,0.45); animation: molsysviewer-spin 0.9s linear infinite; }
144424
+ @keyframes molsysviewer-spin { to { transform: rotate(360deg); } }
144393
144425
  /* ... (styles kept same as before for brevity, assuming user wants robust logic) ... */
144394
144426
  .molsysviewer-controls, .molsysviewer-controls * { user-select: none; -webkit-user-select: none; -moz-user-select: none; }
144395
144427
  .molsysviewer-traj-input::-webkit-inner-spin-button,
@@ -144399,8 +144431,10 @@ var PopupHostManager = class {
144399
144431
  .molsysviewer-slider::-webkit-slider-runnable-track { background: rgba(200,200,200,0.35) !important; height: 16px; border-radius: 999px; }
144400
144432
  .molsysviewer-slider::-webkit-slider-thumb { -webkit-appearance: none !important; width: 16px; height: 16px; border-radius: 50% !important; background: rgba(0,0,0,0.5) !important; margin-top: 0px; }
144401
144433
  </style>
144434
+ ${resolvedModuleUrl ? `<link rel="modulepreload" href="${resolvedModuleUrl}">` : ""}
144402
144435
  </head>
144403
144436
  <body>
144437
+ <div id="molsysviewer-loading"><div class="spinner"></div><div>Loading viewer\u2026</div></div>
144404
144438
  <div id="molsysviewer-pop"></div>
144405
144439
  </body>
144406
144440
  </html>
@@ -144410,11 +144444,10 @@ var PopupHostManager = class {
144410
144444
  const scriptEl = doc.createElement("script");
144411
144445
  scriptEl.type = "module";
144412
144446
  if (this.viewerModuleUrl) {
144413
- const resolved = new URL(this.viewerModuleUrl, window.location.href).href;
144414
144447
  scriptEl.textContent = `
144415
144448
  (async () => {
144416
144449
  try {
144417
- const module = await import("${resolved}");
144450
+ const module = await import("${resolvedModuleUrl ?? ""}");
144418
144451
  const boot = module.bootPopup || (module.default && module.default.bootPopup);
144419
144452
  if (boot) {
144420
144453
  boot(module);