 |
diff --git a/src/api/GramFrameAPI.js b/src/api/GramFrameAPI.js
index a8fe8026..4cf7ca4c 100644
--- a/src/api/GramFrameAPI.js
+++ b/src/api/GramFrameAPI.js
@@ -16,7 +16,7 @@ import {
dispatch,
flushDispatch
} from '../core/state.js'
-import { setImageExpanded, isLandscape } from '../components/ExpandToggle.js'
+import { setImageExpanded, canExpand } from '../components/ExpandToggle.js'
import { isBrowserSupported, showCompatibilityWarning, looksLikeMissingApiError } from '../core/browserCompatibility.js'
import { createErrorIndicator } from '../components/ErrorIndicator.js'
@@ -332,13 +332,13 @@ export function createGramFrameAPI(GramFrame) {
},
/**
- * Programmatically expand or collapse all landscape GramFrame instances.
- * No-op for portrait/square images (mirrors the toggle's landscape gate).
+ * Programmatically expand or collapse every GramFrame instance that has the
+ * expand toggle; a no-op for those that do not (mirrors the toggle's gate).
* @param {boolean} expanded - Desired expand state
*/
setExpandState(expanded) {
this._getInstances().forEach(instance => {
- if (isLandscape(instance)) {
+ if (canExpand(instance)) {
setImageExpanded(instance, expanded)
}
})
diff --git a/src/components/ExpandToggle.js b/src/components/ExpandToggle.js
index e45d40c3..8da5bc45 100644
--- a/src/components/ExpandToggle.js
+++ b/src/components/ExpandToggle.js
@@ -2,8 +2,10 @@
* Expand/collapse toggle control for the spectrogram image.
*
* A small floating button at the top-left of the image region that expands a
- * landscape gram to fill the available space and restores it. Portrait/square
- * images (verniers) receive no toggle. Expand state is in-memory only.
+ * landscape gram to fill the available space and restores it. Under legacy
+ * sizing, portrait/square images (verniers) receive no toggle; the
+ * default `screen` sizing gives every shape one (issue #345). Expand state is
+ * in-memory only.
*
* An audio-sourced gram (spec 168) always gets the toggle: its natural size is
* bins × frames — portrait, and thousands of rows tall — but it is drawn at a
@@ -17,6 +19,7 @@ import { updateSVGLayout } from './svgLayout.js'
import { renderAxes } from '../rendering/axes.js'
import { dispatch } from '../core/state.js'
import { baseRenderSize, isPlayerActive } from '../player/playerView.js'
+import { expandsAnyShape } from './imageSizing.js'
// Small gap left between the expanded image and the viewport bottom (px).
const BOTTOM_GAP = 16
@@ -27,11 +30,22 @@ const BOTTOM_GAP = 16
* @param {GramFrame} instance - GramFrame instance
* @returns {boolean} True if the image is landscape
*/
-export function isLandscape(instance) {
+function isLandscape(instance) {
const { width, height } = baseRenderSize(instance)
return width > 0 && height > 0 && width > height
}
+/**
+ * Whether the instance gets the expand toggle: a landscape gram always does;
+ * under the `native` and `screen` sizings (issue #345) every image gram does, portrait
+ * snippets included, and expands the way a landscape one does.
+ * @param {GramFrame} instance - GramFrame instance
+ * @returns {boolean} True if the image can be expanded
+ */
+export function canExpand(instance) {
+ return isLandscape(instance) || expandsAnyShape(instance)
+}
+
/**
* Compute the render dimensions that fill the available space.
*
@@ -135,12 +149,12 @@ function updateToggleButton(button, expanded) {
}
/**
- * Programmatically set the expand state (no-op for non-landscape images).
+ * Programmatically set the expand state (no-op where `canExpand` says no).
* @param {GramFrame} instance - GramFrame instance
* @param {boolean} expanded - Desired expand state
*/
export function setImageExpanded(instance, expanded) {
- if (!isLandscape(instance)) {
+ if (!canExpand(instance)) {
return
}
instance.state.imageExpanded = !!expanded
@@ -157,23 +171,23 @@ export function setImageExpanded(instance, expanded) {
* @param {GramFrame} instance - GramFrame instance
*/
export function refreshExpandedLayout(instance) {
- if (!instance.state.imageExpanded) {
+ const { imageExpanded, imageDetails } = instance.state
+ if (!imageExpanded) {
return
}
const { width, height } = computeAvailableRenderSize(instance)
- const imageDetails = instance.state.imageDetails
imageDetails.renderWidth = width
imageDetails.renderHeight = height
}
/**
- * Create and mount the expand toggle for a landscape instance. Does nothing for
- * portrait/square images, so no toggle exists in the DOM for verniers.
+ * Create and mount the expand toggle where `canExpand` allows it. Under legacy
+ * sizing that is landscape grams only, so no toggle exists in the DOM for verniers.
* @param {GramFrame} instance - GramFrame instance
- * @returns {HTMLButtonElement|null} The created button, or null if not landscape
+ * @returns {HTMLButtonElement|null} The created button, or null if it cannot expand
*/
export function createExpandToggle(instance) {
- if (!isLandscape(instance)) {
+ if (!canExpand(instance)) {
return null
}
diff --git a/src/components/imageSizing.js b/src/components/imageSizing.js
new file mode 100644
index 00000000..9e3b0e97
--- /dev/null
+++ b/src/components/imageSizing.js
@@ -0,0 +1,142 @@
+/**
+ * How big an image-backed gram is drawn (issue #345).
+ *
+ * `screen` is the default; the `image-sizing` config row can choose another
+ * per gram, `legacy` being the way back to what every gram did before.
+ *
+ * - `legacy`: one image pixel per CSS pixel, with anything wider than 1200 CSS
+ * pixels scaled down to 1200 — whatever room the page actually has.
+ * - `native`: one image pixel per CSS pixel, scaled down (aspect kept) only
+ * when that would not fit the width the component has.
+ * - `screen` (the default): one image pixel per *screen* pixel — the CSS size divided by
+ * `devicePixelRatio` — under the same fit. On a display scaled to 150% a CSS
+ * pixel is 1.5 screen pixels, so `native` draws a small snippet half as big
+ * again as the image itself, its axis labels with it; `screen` does not.
+ *
+ * The chosen size becomes the gram's base size (`naturalWidth/Height`), exactly
+ * as the legacy down-scale always did, so zoom, expand and every coordinate
+ * transform are unchanged. The two fitting strategies refit on resize; legacy
+ * never did and still does not.
+ */
+
+/// |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 | |
| time-start | 0 |
| time-end | 60 |
| freq-start | 0 |
| freq-end | 500 |
| image-sizing | legacy |
| |
| time-start | 0 |
| time-end | 60 |
| freq-start | 0 |
| freq-end | 500 |
| image-sizing | native |
 | |
| time-start | 0 |
| time-end | 60 |
| freq-start | 0 |
| freq-end | 100 |
| image-sizing | legacy |
| |
| time-start | 0 |
| time-end | 60 |
| freq-start | 0 |
| freq-end | 100 |
| image-sizing | native |
| |
| time-start | 0 |
| time-end | 60 |
| freq-start | 0 |
| freq-end | 100 |
| image-sizing | sideways |