fix: various small fixes

This commit is contained in:
2025-10-19 18:22:01 +03:00
parent 1e291be7b5
commit 8fd5e00e3d
4 changed files with 42 additions and 15 deletions

View File

@@ -165,8 +165,8 @@
<span class="view-label">Fit:</span> <span class="view-label">Fit:</span>
<div class="view-toggle-group"> <div class="view-toggle-group">
<button class="btn btn-toggle active" id="preview-fit-default" title="Display at original spec dimensions">Original</button> <button class="btn btn-toggle active" id="preview-fit-default" title="Display at original spec dimensions">Original</button>
<button class="btn btn-toggle" id="preview-fit-width" title="Scale to fit preview pane width">Width</button> <button class="btn btn-toggle" id="preview-fit-width" title="Scale to fit preview pane width (⚠️ for faceted specs, applies to each facet)">Width</button>
<button class="btn btn-toggle" id="preview-fit-full" title="Scale to fit entire preview pane">Full</button> <button class="btn btn-toggle" id="preview-fit-full" title="Scale to fit entire preview pane (⚠️ for faceted specs, applies to each facet)">Full</button>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -116,7 +116,7 @@ document.addEventListener('DOMContentLoaded', function () {
}); });
// Toggle panel buttons // Toggle panel buttons
document.querySelectorAll('.toggle-btn').forEach(button => { document.querySelectorAll('[id^="toggle-"][id$="-panel"]').forEach(button => {
button.addEventListener('click', function () { button.addEventListener('click', function () {
const panelId = this.id.replace('toggle-', ''); const panelId = this.id.replace('toggle-', '');
togglePanel(panelId); togglePanel(panelId);

View File

@@ -8,20 +8,46 @@ function applyPreviewFitMode(spec, fitMode) {
// Clone to avoid mutation // Clone to avoid mutation
const modifiedSpec = JSON.parse(JSON.stringify(spec)); const modifiedSpec = JSON.parse(JSON.stringify(spec));
if (fitMode === 'width') { if (fitMode === 'width' || fitMode === 'full') {
// Fit to width - get preview pane width
const previewPane = document.getElementById('vega-preview'); const previewPane = document.getElementById('vega-preview');
if (previewPane) { if (previewPane) {
const containerWidth = previewPane.offsetWidth; const containerWidth = previewPane.offsetWidth - 10; // 10px padding for scroll
modifiedSpec.width = containerWidth - 10; // 10px padding for scroll const containerHeight = previewPane.offsetHeight - 10; // 10px padding
// Keep original aspect ratio by not setting height
} // Apply dimensions recursively to handle nested specs
} else if (fitMode === 'full') { function applyDimensions(s) {
// Fit to full pane - get both dimensions if (!s || typeof s !== 'object') return;
const previewPane = document.getElementById('vega-preview');
if (previewPane) { // Set dimensions at current level if this is a unit spec or has width/height
modifiedSpec.width = previewPane.offsetWidth - 10; // 10px padding if (fitMode === 'width') {
modifiedSpec.height = previewPane.offsetHeight - 10; // 10px padding s.width = containerWidth;
delete s.height; // Remove height to preserve aspect ratio
} else if (fitMode === 'full') {
s.width = containerWidth;
s.height = containerHeight;
}
// Recursively apply to nested specs
// For facet specs
if (s.spec) {
applyDimensions(s.spec);
}
// For layer, concat, hconcat, vconcat
if (Array.isArray(s.layer)) {
s.layer.forEach(applyDimensions);
}
if (Array.isArray(s.concat)) {
s.concat.forEach(applyDimensions);
}
if (Array.isArray(s.hconcat)) {
s.hconcat.forEach(applyDimensions);
}
if (Array.isArray(s.vconcat)) {
s.vconcat.forEach(applyDimensions);
}
}
applyDimensions(modifiedSpec);
} }
} }
// 'default' mode leaves original dimensions untouched // 'default' mode leaves original dimensions untouched

View File

@@ -815,6 +815,7 @@ function duplicateSnippet(snippetId) {
const newSnippet = createSnippet(duplicateSpec, duplicateName); const newSnippet = createSnippet(duplicateSpec, duplicateName);
newSnippet.comment = originalSnippet.comment; newSnippet.comment = originalSnippet.comment;
newSnippet.tags = [...originalSnippet.tags]; newSnippet.tags = [...originalSnippet.tags];
newSnippet.datasetRefs = extractDatasetRefs(duplicateSpec);
SnippetStorage.saveSnippet(newSnippet); SnippetStorage.saveSnippet(newSnippet);