Skip to content

Commit af29b95

Browse files
kwokcbkwokcb
committed
Rework loadmaterial logic.
1 parent 3df5773 commit af29b95

3 files changed

Lines changed: 70 additions & 51 deletions

File tree

‎javascript/JsPolyHaven/index.html‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,18 @@ <h5 class="modal-title" id="materialModalLabel">Material Details</h5>
198198
</div>
199199
</div>
200200
</div>
201-
<div id="contentPreview" class="mt-1"></div>
201+
<div class="text-center py-1">
202+
<button style="font-size: 11px;" class="btn btn-primary" id="loadContentBtn">
203+
<i class="bi bi-eye me-2"></i>Show Content
204+
</button>
205+
</div>
206+
<div id="contentPreview" class="mt-1" style="display:none;">
207+
<div class="mt-2 mb-2">
208+
<b>Textures</b>
209+
<div id="textureGallery" class="row g-2"></div>
210+
</div>
211+
<textarea id="mtlxEditor"></textarea>
212+
</div>
202213
<!-- <textarea id="mtlxEditor" style="display:none;"></textarea> -->
203214
</div>
204215
</div>

‎javascript/JsPolyHaven/jsPolyHavenLoader.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -295,7 +295,8 @@ class JsPolyHavenAPILoader {
295295
`Downloaded: ${new Date().toISOString()}\n\n` +
296296
`Contains the following files:\n` +
297297
`- ${material.id}.mtlx\n` +
298-
(material.thumb_url ? `\n- ${material.id}_thumbnail.png` : '')
298+
(material.thumb_url ? `- ${material.id}_thumbnail.png\n` : '') +
299+
(texturePaths.length > 0 ? texturePaths.map(t => `- ${t}`).join('\n') + '\n' : '')
299300
);
300301

301302
// Generate the ZIP file

‎javascript/JsPolyHaven/main.js‎

Lines changed: 56 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,12 @@ document.addEventListener('DOMContentLoaded', function () {
7575
// Initialize CodeMirror when modal opens
7676
const materialModalElement = document.getElementById('materialModal');
7777
materialModalElement.addEventListener('shown.bs.modal', function () {
78-
if (codeMirrorEditor) return;
78+
if (codeMirrorEditor)
79+
{
80+
// Clear content
81+
codeMirrorEditor.setValue('');
82+
return;
83+
}
7984

8085
let editor = document.getElementById('mtlxEditor')
8186
if (editor)
@@ -86,6 +91,16 @@ document.addEventListener('DOMContentLoaded', function () {
8691
readOnly: true,
8792
lineWrapping: true
8893
});
94+
95+
let textureGallery = document.getElementById('textureGallery');
96+
if (textureGallery) {
97+
// clear
98+
console.info('Texture gallery container cleared !!!!!!!!');
99+
textureGallery.innerHTML = '';
100+
}
101+
else {
102+
console.info('Texture gallery container not found !!!!!!!!');
103+
}
89104
});
90105

91106
let viewer = document.getElementById('viewer');
@@ -100,6 +115,11 @@ document.addEventListener('DOMContentLoaded', function () {
100115
for (const key in materialPackageCache) {
101116
delete materialPackageCache[key];
102117
}
118+
119+
let contentPreview = document.getElementById('contentPreview');
120+
if (contentPreview) {
121+
contentPreview.style.display = 'none';
122+
}
103123
});
104124
});
105125

@@ -199,22 +219,24 @@ async function previewMaterial() {
199219
// Convert Blob to ArrayBuffer
200220
const arrayBuffer = await zipBlob.arrayBuffer();
201221

222+
// Show viewer immediately, before posting message
223+
viewer.style.display = 'block';
224+
202225
// Post the ArrayBuffer to the target window (e.g., iframe or parent)
203226
console.log('Posting preview data to viewer page...');
204227
if (viewer && viewer.contentWindow) {
205228
viewer.contentWindow.postMessage(arrayBuffer, targetURL);
206229
}
207230

208-
// Wait for viewer-ready message.
231+
// Wait for viewer-ready message after posting
209232
await waitForViewerReady(viewer);
210233

211-
viewer.style.display = 'block';
212-
213234
} catch (error) {
214235
console.error('Error preparing preview:', error);
215236
alert(`Failed to prepare preview: ${error.message}`);
237+
} finally {
238+
previewButton.innerHTML = previousHTML;
216239
}
217-
previewButton.innerHTML = previousHTML;
218240

219241
}
220242

@@ -331,48 +353,30 @@ async function loadMaterialContent(materialId) {
331353
return;
332354
}
333355

356+
// Show content preview section
357+
let contentPreview = document.getElementById('contentPreview');
358+
contentPreview.style.display = 'block';
359+
334360
const loadBtn = document.getElementById('loadContentBtn');
335361
const originalText = loadBtn.innerHTML;
336362
loadBtn.innerHTML = '<i class="bi bi-arrow-clockwise spin me-2"></i>Loading...';
337363
loadBtn.disabled = true;
338364

365+
//const previewContainer = document.getElementById('contentPreview');
366+
367+
const resolution = document.getElementById('materialResolution').value;
368+
const cacheKey = `${materialId}_${resolution}`;
369+
let contentData = materialContentCache[cacheKey];
370+
339371
try {
340-
const resolution = document.getElementById('materialResolution').value;
341-
const cacheKey = `${materialId}_${resolution}`;
342-
let contentData = materialContentCache[cacheKey];
343-
if (!contentData) {
372+
if (!contentData)
373+
{
344374
contentData = await polyHavenAPI.getMaterialContent(materialId, resolution);
345375
materialContentCache[cacheKey] = contentData;
346376
}
347-
377+
348378
// Create preview content
349-
const previewContainer = document.getElementById('contentPreview');
350379
let mtlxContent = contentData.mtlxContent || '';
351-
previewContainer.innerHTML = `
352-
<div class="mt-4">
353-
<b>Content</b>
354-
<div class="mt-2">
355-
<b>Textures</b>
356-
<div id="textureGallery" class="row g-2"></div>
357-
</div>
358-
<textarea id="mtlxEditor">${mtlxContent}</textarea>
359-
</div>
360-
`;
361-
362-
// Initialize CodeMirror
363-
if (codeMirrorEditor) {
364-
codeMirrorEditor.toTextArea();
365-
}
366-
let editor = document.getElementById('mtlxEditor');
367-
if (editor) {
368-
codeMirrorEditor = CodeMirror.fromTextArea(editor, {
369-
mode: 'xml',
370-
theme: 'material',
371-
lineNumbers: true,
372-
readOnly: true,
373-
lineWrapping: true
374-
});
375-
}
376380

377381
// Load texture gallery
378382
const textureFiles = contentData.textureFiles;
@@ -400,7 +404,7 @@ async function loadMaterialContent(materialId) {
400404

401405
card.innerHTML = `
402406
<div class="card h-100">
403-
<div class="ratio ratio-1x1 bg-light">
407+
<div class="ratio ratio-1x1">
404408
<img src="${textureUrl}"
405409
class="card-img-top object-fit-contain p-2"
406410
alt="${textureName}"
@@ -434,20 +438,23 @@ async function loadMaterialContent(materialId) {
434438
}
435439
}
436440

437-
console.log('Setting MaterialX content in CodeMirror editor:', mtlxContent);
441+
//console.log('Setting MaterialX content in CodeMirror editor:', mtlxContent);
438442
codeMirrorEditor.setValue(mtlxContent);
439443
}
440444

445+
loadBtn.innerHTML = originalText;
446+
loadBtn.disabled = false;
447+
441448
} catch (error) {
442449
console.error('Error loading content:', error);
443-
document.getElementById('contentPreview').innerHTML += `
450+
previewContainer.innerHTML += `
444451
<div class="alert alert-danger mt-3">
445452
Failed to load content: ${error.message}
446453
</div>
447454
`;
448-
} finally {
449455
loadBtn.innerHTML = originalText;
450456
loadBtn.disabled = false;
457+
return;
451458
}
452459
}
453460

@@ -481,15 +488,6 @@ async function showMaterialDetails(material) {
481488
categoriesContainer.innerHTML = '<span class="badge bg-dark">Categories</span> ' + categoriesList
482489

483490

484-
// Reset content preview section
485-
document.getElementById('contentPreview').innerHTML = `
486-
<div class="text-center py-1">
487-
<button style="font-size: 11px;" class="btn btn-primary" id="loadContentBtn">
488-
<i class="bi bi-eye me-2"></i>Show Content
489-
</button>
490-
</div>
491-
`;
492-
493491
// Set up content loader button
494492
document.getElementById('loadContentBtn').addEventListener('click', async () => {
495493
await loadMaterialContent(material.id);
@@ -498,6 +496,15 @@ async function showMaterialDetails(material) {
498496
// Force 1K for downloads
499497
document.getElementById('materialResolution').value = '1k';
500498

499+
// Clear texture gallery and editor content
500+
const galleryContainer = document.getElementById('textureGallery');
501+
if (galleryContainer) {
502+
galleryContainer.innerHTML = '';
503+
}
504+
if (codeMirrorEditor) {
505+
codeMirrorEditor.setValue('');
506+
}
507+
501508
// Show modal
502509
materialModal.show();
503510
}

0 commit comments

Comments
 (0)
⚡