oleh/astrolabe-nvc
1
0
Fork 0
mirror of https://github.com/olehomelchenko/astrolabe-nvc.git synced 2025-12-21 13:12:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add preview fit mode for height and utilize Vega-Lite's 'container' keyword for dynamic sizing.

Browse Source
This commit is contained in:
Oleh Omelchenko
2025-12-09 23:28:36 +02:00
parent 00ccdd27d5
commit 3f6c3b69a6
3 changed files with 53 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@@ -233,6 +233,10 @@
@click="$store.preview.fitMode = 'width'; setPreviewFitMode('width')"
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" :class="{ 'active': $store.preview.fitMode === 'height' }"
@click="$store.preview.fitMode = 'height'; setPreviewFitMode('height')"
id="preview-fit-height"
title="Scale to fit preview pane height (⚠️ for faceted specs, applies to each facet)">Height</button>
<button class="btn btn-toggle" :class="{ 'active': $store.preview.fitMode === 'full' }"
@click="$store.preview.fitMode = 'full'; setPreviewFitMode('full')"
id="preview-fit-full"
@@ -308,12 +312,13 @@
</div>
<div class="dataset-detail-header">Name</div>
<input type="text" id="dataset-detail-name" class="input"
placeholder="Dataset name..." :value="dataset?.name" @input="handleNameChange" />
<input type="text" id="dataset-detail-name" class="input" placeholder="Dataset name..."
:value="dataset?.name" @input="handleNameChange" />
<div class="dataset-detail-header">Comment</div>
<textarea id="dataset-detail-comment" class="input textarea"
placeholder="Add a comment..." rows="3" :value="dataset?.comment" @input="handleCommentChange"></textarea>
placeholder="Add a comment..." rows="3" :value="dataset?.comment"
@input="handleCommentChange"></textarea>
<div class="dataset-detail-header-row">
<span class="dataset-detail-header">Overview</span>
@@ -344,7 +349,8 @@
<div class="columns-list">
<template x-for="col in dataset?.columnTypes" :key="col.name">
<div class="column-item">
<span class="column-type-icon" x-html="getTypeIcon(col.type)"></span>
<span class="column-type-icon"
x-html="getTypeIcon(col.type)"></span>
<span class="column-name" x-text="col.name"></span>
<span class="column-type" x-text="col.type"></span>
</div>
@@ -361,7 +367,8 @@
</div>
<div class="stat-item">
<span class="stat-label">Modified:</span>
<span id="dataset-detail-modified" x-text="formatDate(dataset?.modified)">-</span>
<span id="dataset-detail-modified"
x-text="formatDate(dataset?.modified)">-</span>
</div>
</div>
</div>
@@ -372,8 +379,7 @@
<div class="preview-toggle-group" x-show="showPreviewToggle">
<button class="btn btn-toggle small"
:class="{ 'active': $store.datasets.previewMode === 'raw' }"
@click="setPreviewMode('raw')"
title="Show raw data preview">Raw</button>
@click="setPreviewMode('raw')" title="Show raw data preview">Raw</button>
<button class="btn btn-toggle small"
:class="{ 'active': $store.datasets.previewMode === 'table' }"
@click="setPreviewMode('table')"

2
src/js/config.js
View File

@@ -190,7 +190,7 @@ document.addEventListener('alpine:init', () => {
// Preview panel fit mode store
Alpine.store('preview', {
fitMode: 'default' // 'default' | 'width' | 'full'
fitMode: 'default' // 'default' | 'width' | 'height' | 'full'
});
});

25
src/js/editor.js
View File

@@ -1,31 +1,29 @@
// Track preview fit mode
let previewFitMode = 'default'; // 'default', 'width', or 'full'
let previewFitMode = 'default'; // 'default', 'width', 'height', or 'full'
// Apply fit mode to spec dimensions
// Apply fit mode to spec dimensions using Vega-Lite's "container" keyword
function applyPreviewFitMode(spec, fitMode) {
if (!spec || typeof spec !== 'object') return spec;
// Clone to avoid mutation
const modifiedSpec = JSON.parse(JSON.stringify(spec));
if (fitMode === 'width' || fitMode === 'full') {
const previewPane = document.getElementById('vega-preview');
if (previewPane) {
const containerWidth = previewPane.offsetWidth - 10; // 10px padding for scroll
const containerHeight = previewPane.offsetHeight - 10; // 10px padding
// Apply dimensions recursively to handle nested specs
function applyDimensions(s) {
if (!s || typeof s !== 'object') return;
// Set dimensions at current level if this is a unit spec or has width/height
// Apply dimensions based on fit mode
if (fitMode === 'width') {
s.width = containerWidth;
s.width = 'container';
delete s.height; // Remove height to preserve aspect ratio
} else if (fitMode === 'height') {
s.height = 'container';
delete s.width; // Remove width to preserve aspect ratio
} else if (fitMode === 'full') {
s.width = containerWidth;
s.height = containerHeight;
s.width = 'container';
s.height = 'container';
}
// 'default' mode leaves original dimensions untouched
// Recursively apply to nested specs
// For facet specs
@@ -47,10 +45,9 @@ function applyPreviewFitMode(spec, fitMode) {
}
}
if (fitMode !== 'default') {
applyDimensions(modifiedSpec);
}
}
// 'default' mode leaves original dimensions untouched
return modifiedSpec;
}