mirror of
https://github.com/maziggy/bambuddy.git
synced 2026-09-30 11:12:35 +02:00
fix(inventory): hydrate Extra Colours; render Dual Color as bars; punch up Sparkle + checkerboard (#1154)
@maugsburger surfaced four bugs against the original #1154 multi-colour swatch work: 1. Editing an existing spool always opened with the Extra Colours field blank, even when the COLOR preview banner above it was rendering correctly from the saved data. ColorSection seeded its local ``extraColorsDraft`` via ``useState(formData.extra_colors)`` at mount time, but SpoolFormModal opens *before* its own useEffect populates ``formData`` from the spool record — so by the time the saved value landed, the input had already locked onto ''. The user then had to retype the value before saving anything else. 2. Dual Color and Gradient produced the same diagonal blend (``linear-gradient(135deg, A, B)``), so the two variants were visually indistinguishable. The whole point of the Dual Color variant is that the spool has two distinct bars on the reel — a smooth blend defeats it. 3. Sparkle was almost invisible on card-sized swatches. The original 4-dot pattern (each ~1px) read fine on the inline 20×20 swatch but disappeared on the 60-pixel inventory card banners — exactly where the user actually identifies a spool. 4. Checkerboard cell density scaled with the swatch — the same 4-cell pattern was either tiny squares on a small swatch or four huge squares on a card-sized banner. The user couldn't tell a translucent filament from a multi-colour one because the indicator changed shape. Fix: - ``ColorSection.tsx``: ref-guarded ``useEffect`` resyncs the draft whenever the parent's ``formData.extra_colors`` changes via an external update. ``commitExtraColors`` updates the ref before calling ``updateField`` so live user typing is round-tripped without the resync useEffect clobbering it. - ``filamentSwatchHelpers.ts: buildColorLayer``: branch on ``effect_type``. ``dual-color`` and ``tri-color`` produce ``linear-gradient(to right, c1 0 X%, c2 X% Y%, ...)`` with CSS double-position stops (hard line, not blend) and equal-width segments. ``gradient`` keeps the original 135° smooth blend. The ``multicolor`` conic-gradient path is untouched. - ``filamentSwatchHelpers.ts: EFFECT_OVERLAYS.sparkle``: bumped from 4 dots to 13 flecks in mixed sizes (1 / 1.5 / 2 px) and varying opacity (0.65 → 1.0) for a depth-of-field "metal flake" feel. - ``filamentSwatchHelpers.ts: buildFilamentBackground``: now returns ``{ backgroundImage, backgroundSize }`` so per-layer sizes can be applied — painted layers stay ``cover``, the checkerboard gets a fixed 12px tile so cell density is constant regardless of element size. Updated the three existing call sites (``InventoryPage`` group banner + spool card, ``ColorSection`` preview) to spread the style object directly. ``FilamentSwatch.tsx`` composes the same per-layer sizing inline so its output stays in lockstep. Tests: 8 new frontend cases pinning the four fixes — Dual/Tri Color hard-split (3 tests + 1 regression guard that Dual ≠ Gradient for the same stops), Sparkle prominence (≥ 10 distinct radial-gradient layers in the rendered background), checkerboard density (last backgroundSize layer is a fixed pixel value, not ``cover``), 4 hydration cases (fills when formData arrives via parent update, resyncs when the spool changes mid-form, doesn't clobber live user typing, clears when the new spool has no extra_colors). Existing buildFilamentBackground tests updated for the new return-object shape. Full frontend suite: 1610 passed; full backend suite: 3598 passed; no regressions.
This commit is contained in:
maziggy
+1
-1
@@ -12,7 +12,7 @@ All notable changes to Bambuddy will be documented in this file.
|
||||
- **Filament Track Switch (FTS) support — print modal filament dropdown is no longer empty when an X2D / H2D has the FTS accessory installed** ([#1162](https://github.com/maziggy/bambuddy/issues/1162), reported by @mkavalecz) — When the FTS accessory is installed the printer's MQTT changes one nibble of the per-AMS `info` bitmask: bits 8-11 flip from a fixed extruder ID (0x0 / 0x1) to `0xE` ("uninitialized"), because the AMS is no longer wired to a single nozzle — the FTS dynamically routes any slot to either extruder. Bambuddy's MQTT parser already skipped 0xE entries when building `ams_extruder_map` (matching BambuStudio's reading for boot-time transient state), so with the FTS installed the map ended up empty and the print modal's filament dropdown — which filters by `extruderId === nozzle_id` to prevent cross-nozzle assignment ("position of left hotend is abnormal" failures) — filtered out *every* loaded slot. Net effect: empty Filament Mapping dropdown on every dual-nozzle print with the FTS, even when the AMS was fully loaded with the right material. Detection comes from a new MQTT field — `print.device.fila_switch` — which is non-null only when the accessory is installed; it carries the routing topology as two arrays: `in[track] = currently fed slot (-1 = empty)` and `out[track] = extruder this track terminates at`. The fix surfaces this through a new `FilaSwitchState` dataclass on `PrinterState` (`installed`, `in_slots`, `out_extruders`, `stat`, `info`) and the equivalent `FilaSwitchResponse` Pydantic schema on the `GET /printers/{id}/status` route. Frontend (`useFilamentMapping.ts` + `FilamentMapping.tsx`) skips the per-extruder filter when `printerStatus.fila_switch?.installed === true` so any compatible AMS slot can satisfy any nozzle's filament requirement, since the FTS handles the routing. Slots currently fed into a track also get a routing badge in the dropdown — `[L]` or `[R]` — so the user can tell at a glance which slot the FTS is currently routing where (idle slots get no badge: they can be routed to either extruder on demand). The hard "no cross-nozzle assignment" filter on real dual-nozzle printers without the FTS stays untouched (still trips the same way it always has — `fila_switch == null` keeps the existing behaviour). 4 backend tests in `test_bambu_mqtt.py::TestFilamentTrackSwitchDetection` (default-not-installed, detect-from-MQTT-using-the-reporter's-bundle, no-fila_switch-field-stays-not-installed, missing-in-out-arrays-don't-crash) and 2 frontend tests in `useFilamentMapping.test.ts` (FTS-active drops the nozzle filter; explicit `fila_switch: null` keeps the filter applied). Upstream fila_switch payloads with anything other than the documented shape are tolerated — `installed` flips on the *presence* of the field, the routing arrays default to empty lists if missing, and the dropdown skips the badge for slots not currently in `in_slots`.
|
||||
|
||||
### Fixed
|
||||
- **Spool edit form lost the Extra Colours value on reopen, and Dual Color rendered identically to Gradient** ([#1154](https://github.com/maziggy/bambuddy/issues/1154) follow-up, reported by @maugsburger) — Two issues against the multi-colour swatch work that landed for #1154. **(1) Extra Colours input didn't hydrate on edit reopen:** `ColorSection`'s draft buffer was seeded once via `useState(formData.extra_colors)`, but `SpoolFormModal` opens *before* its own `useEffect` populates `formData` from the spool record — so by the time the saved value lands, the input's local state has already been initialised to `''` and never re-syncs. The COLOR preview banner above the input rendered correctly (consumes formData directly), making it obvious the data WAS persisted; only the input was stuck blank, which the user then had to retype to save anything else. Fix: a ref-guarded `useEffect` resyncs `extraColorsDraft` when `formData.extra_colors` changes via an external update (e.g. modal opening with a spool); the ref is updated inside `commitExtraColors` so the user's own typing is round-tripped without the resync clobbering it. **(2) `Dual Color` and `Gradient` produced the same diagonal blend:** `buildColorLayer` in `filamentSwatchHelpers.ts` ran the same `linear-gradient(135deg, ...)` for both effect types, so a "Dual Color" spool was visually indistinguishable from a "Gradient" one. Real dual-colour spools have two distinct bars on the reel — that's the whole point of the variant. Fix: when `effect_type` is `dual-color` or `tri-color`, build the colour layer as `linear-gradient(to right, c1 0% X%, c2 X% Y%, ...)` with CSS double-position stops (so the colour change is a *hard line* rather than a blend region) and equal-width segments across the stops; `gradient` keeps the original 135° smooth blend. The existing `multicolor` conic-gradient path is untouched. 4 frontend tests pin the hard-split contract (Dual Color contains `to right`/double-position stops and never `135deg`; Tri Color renders 3 equal hard-split bars; `gradient` keeps the smooth diagonal; explicit regression guard that Dual Color and Gradient never produce the same CSS string for the same stops); 4 frontend tests pin the hydration contract (input fills when formData arrives via parent update, resyncs when the spool changes mid-form, doesn't clobber live user typing, clears when the new spool has no extra_colors). The minor "Sparkle could be more prominent / checkerboard pattern denser" feedback in the same comment is intentionally deferred — left for a separate cosmetic tuning pass since it's subjective and the user flagged it as finetuning.
|
||||
- **Spool edit form lost the Extra Colours value on reopen, Dual Color rendered identically to Gradient, and the Sparkle / checkerboard visuals were too subtle** ([#1154](https://github.com/maziggy/bambuddy/issues/1154) follow-up, reported by @maugsburger) — Four issues against the multi-colour swatch work that landed for #1154. **(1) Extra Colours input didn't hydrate on edit reopen:** `ColorSection`'s draft buffer was seeded once via `useState(formData.extra_colors)`, but `SpoolFormModal` opens *before* its own `useEffect` populates `formData` from the spool record — so by the time the saved value landed, the input's local state had already been initialised to `''` and never re-synced. The COLOR preview banner above the input rendered correctly (consumes formData directly), making it obvious the data WAS persisted; only the input was stuck blank, which the user then had to retype to save anything else. Fix: a ref-guarded `useEffect` resyncs `extraColorsDraft` when `formData.extra_colors` changes via an external update (e.g. modal opening with a spool); the ref is updated inside `commitExtraColors` so the user's own typing is round-tripped without the resync clobbering it. **(2) `Dual Color` and `Gradient` produced the same diagonal blend:** `buildColorLayer` in `filamentSwatchHelpers.ts` ran the same `linear-gradient(135deg, ...)` for both effect types, so a "Dual Color" spool was visually indistinguishable from a "Gradient" one. Real dual-colour spools have two distinct bars on the reel — that's the whole point of the variant. Fix: when `effect_type` is `dual-color` or `tri-color`, build the colour layer as `linear-gradient(to right, c1 0% X%, c2 X% Y%, ...)` with CSS double-position stops (so the colour change is a *hard line* rather than a blend region) and equal-width segments across the stops; `gradient` keeps the original 135° smooth blend. The existing `multicolor` conic-gradient path is untouched. **(3) Sparkle effect was almost invisible on card-sized swatches:** the original 4-dot pattern (each ~1px) read fine on the small inline swatch but disappeared on the 60-pixel-tall inventory card banners — exactly where the user actually identifies a spool. Bumped to 13 flecks in mixed sizes (1px / 1.5px / 2px) and varying opacity (0.65 → 1.0) to give a depth-of-field "metal flake" feeling, distinct from solid + multi-colour. **(4) Checkerboard cell density scaled with the swatch:** the previous helper put `repeating-conic-gradient(...)` in the `background-image` and the caller applied `background-size: cover`, so the same 4-cell pattern was either tiny squares on a small swatch or four huge squares on a card-sized banner. Made `buildFilamentBackground()` return `{ backgroundImage, backgroundSize }` with per-layer sizes — painted layers stay `cover`, the checkerboard gets a fixed 12px tile so the cell density stays consistent regardless of element size and clearly reads as a transparency indicator rather than a multi-colour stripe. Updated the three existing call sites (`InventoryPage` group banner + spool card, `ColorSection` preview) to spread the returned style object directly. **8 new frontend tests** cover the four fixes: hard-split contract for Dual/Tri Color (3 tests + 1 regression guard that Dual ≠ Gradient for the same stops); Sparkle prominence (≥ 10 distinct radial-gradient layers in the rendered background); checkerboard density (last `backgroundSize` layer is a fixed pixel value, not `cover`); 4 hydration tests pinning the input restore path (fills when formData arrives via parent update, resyncs when the spool changes mid-form, doesn't clobber live user typing, clears when the new spool has no extra_colors).
|
||||
|
||||
- **Pending review card and the resulting archive name disagreed; `.gcode.3mf` filename suffix wasn't fully stripped** ([#1152](https://github.com/maziggy/bambuddy/issues/1152) follow-up, reported by @smandon) — Two distinct holes in the original #1152 fix surfaced when @smandon retested on the daily build. **(1) Suffix stripping was incomplete:** Bambu Studio's "Send to printer" dialog typically writes files like `Plate_1.gcode.3mf` (a sliced gcode payload wrapped in a 3MF container), but the archive's display stem was computed via `Path(name).stem`, which only drops the *last* suffix and left the user staring at `Plate_1.gcode` in the archive UI. **(2) The review card and the archive disagreed on what the print was called:** the pending-uploads panel always rendered the raw FTP filename, while the eventual `PrintArchive.print_name` resolved from the 3MF's embedded title (or, with the toggle on `filename`, the filename stem). Net effect: the user saw `Plate_1.gcode` in the review card and `Some Creator's Title` in the archive grid for the same item, with no toggle that flipped both views in lockstep. Fix has three pieces: a new `resolve_display_stem()` helper in `archive.py` that strips `.gcode.3mf` / `.3mf` / `.gcode` (case-insensitive) so both the archive *and* the review-side normalisation produce the same canonical stem; a new `PendingUpload.metadata_print_name` column populated at FTP-receive time by peeking at the 3MF's embedded title (so `/pending-uploads/` list calls don't have to reopen every 3MF on every render); and a new `PendingUploadResponse.display_name` computed field that mirrors `archive_print`'s exact precedence — `filename` toggle: stripped stem; `metadata` toggle (default): cached title or stripped stem. Frontend's `PendingUploadsPanel` reads `upload.display_name` (with `upload.filename` as a defensive fallback for any pre-migration row), and the raw filename is exposed as a tooltip so users can still inspect what actually arrived over FTP. Migration is one idempotent `ALTER TABLE pending_uploads ADD COLUMN metadata_print_name VARCHAR(255)` (Postgres/SQLite-safe); existing pending rows have NULL there and gracefully fall back to filename-stem behaviour. 14 unit tests pin the stripping rules (`Plate_1.gcode.3mf` → `Plate_1`, mixed case, dots in the middle, edge `.3mf`-only / `.gcode`-only, full-path inputs); 6 integration tests pin the response contract (default toggle uses metadata title when present, falls back to stripped stem when absent, `filename` toggle overrides metadata, `filename` toggle still strips the double suffix, `GET /{id}` exposes the same field, whitespace-only metadata behaves like absent); 3 frontend tests pin the review card's render path (resolved name shown, fallback to filename when display_name is empty, raw filename available via tooltip).
|
||||
|
||||
|
||||
@@ -133,7 +133,7 @@ describe('dual-color / tri-color hard-split bars (#1154 follow-up)', () => {
|
||||
extraColors: '7f3696,006ec9',
|
||||
effectType: 'dual-color',
|
||||
});
|
||||
const lower = bg.toLowerCase();
|
||||
const lower = bg.backgroundImage.toLowerCase();
|
||||
// Hard split direction — ``to right`` (or ``90deg``), never ``135deg``.
|
||||
expect(lower).toContain('to right');
|
||||
expect(lower).not.toContain('135deg');
|
||||
@@ -151,7 +151,7 @@ describe('dual-color / tri-color hard-split bars (#1154 follow-up)', () => {
|
||||
extraColors: 'ff0000,00ff00,0000ff',
|
||||
effectType: 'tri-color',
|
||||
});
|
||||
const lower = bg.toLowerCase();
|
||||
const lower = bg.backgroundImage.toLowerCase();
|
||||
expect(lower).toContain('to right');
|
||||
// Each third gets its own contiguous segment.
|
||||
expect(lower).toMatch(/#ff0000\s+0\.000%\s+33\.333%/);
|
||||
@@ -164,7 +164,7 @@ describe('dual-color / tri-color hard-split bars (#1154 follow-up)', () => {
|
||||
extraColors: '7f3696,006ec9',
|
||||
effectType: 'gradient',
|
||||
});
|
||||
const lower = bg.toLowerCase();
|
||||
const lower = bg.backgroundImage.toLowerCase();
|
||||
// Original visual preserved for non-dual / non-tri stops.
|
||||
expect(lower).toContain('135deg');
|
||||
expect(lower).not.toContain('to right');
|
||||
@@ -187,27 +187,58 @@ describe('dual-color / tri-color hard-split bars (#1154 follow-up)', () => {
|
||||
extraColors: '7f3696,006ec9',
|
||||
effectType: 'gradient',
|
||||
});
|
||||
expect(dual).not.toBe(grad);
|
||||
expect(dual.backgroundImage).not.toBe(grad.backgroundImage);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Sparkle prominence + checkerboard density (#1154 follow-up cosmetic)', () => {
|
||||
it('renders Sparkle with at least 10 distinct dots so it reads on card-sized swatches', () => {
|
||||
// The original Sparkle pattern was 4 dots — too subtle on a 200×60px
|
||||
// banner. The fix bumps it to 13 mixed-size flecks. Pin the contract
|
||||
// at "at least 10" so future tweaks have headroom without the test
|
||||
// breaking on every adjustment.
|
||||
render(<FilamentSwatch rgba="ff0000ff" effectType="sparkle" />);
|
||||
const el = screen.getByTestId('filament-swatch');
|
||||
const radialCount = (el.style.backgroundImage.match(/radial-gradient/g) ?? []).length;
|
||||
expect(radialCount).toBeGreaterThanOrEqual(10);
|
||||
});
|
||||
|
||||
it('uses fixed-pixel checkerboard tile so cell density is independent of swatch size', () => {
|
||||
// Without per-layer background-size, ``cover`` stretched the conic
|
||||
// gradient over the whole element and a card-sized banner only showed
|
||||
// 4 huge cells. Verify the checker layer carries an explicit pixel
|
||||
// tile size.
|
||||
const bg = buildFilamentBackground({ rgba: 'ff0000ff' });
|
||||
const sizes = bg.backgroundSize.split(',').map((s) => s.trim());
|
||||
// Last layer is the checker; should be a fixed pixel tile, not 'cover'.
|
||||
expect(sizes[sizes.length - 1]).toMatch(/^\d+px(\s+\d+px)?$/);
|
||||
expect(sizes[sizes.length - 1]).not.toContain('cover');
|
||||
});
|
||||
});
|
||||
|
||||
describe('buildFilamentBackground', () => {
|
||||
it('emits the same layered background string the component renders', () => {
|
||||
it('emits a CSS-style object with layered images and per-layer sizes', () => {
|
||||
const bg = buildFilamentBackground({
|
||||
rgba: 'ff0000ff',
|
||||
extraColors: 'aabbcc,ddeeff',
|
||||
effectType: 'matte',
|
||||
});
|
||||
// Effect overlay → colour layer → checkerboard, in that order.
|
||||
expect(bg).toMatch(/linear-gradient/);
|
||||
expect(bg).toMatch(/repeating-conic-gradient/);
|
||||
expect(bg.toLowerCase()).toContain('#aabbcc');
|
||||
expect(bg.toLowerCase()).toContain('#ddeeff');
|
||||
expect(bg.backgroundImage).toMatch(/linear-gradient/);
|
||||
expect(bg.backgroundImage).toMatch(/repeating-conic-gradient/);
|
||||
expect(bg.backgroundImage.toLowerCase()).toContain('#aabbcc');
|
||||
expect(bg.backgroundImage.toLowerCase()).toContain('#ddeeff');
|
||||
// Per-layer sizes — three comma-separated values (effect/colour/checker)
|
||||
// in the same order. The checker has a fixed pixel tile so the cell
|
||||
// density doesn't scale with the element (#1154 follow-up).
|
||||
const sizeParts = bg.backgroundSize.split(',').map((s) => s.trim());
|
||||
expect(sizeParts).toHaveLength(3);
|
||||
expect(sizeParts[2]).toMatch(/\d+px/);
|
||||
});
|
||||
|
||||
it('returns a usable solid background when only rgba is provided', () => {
|
||||
const bg = buildFilamentBackground({ rgba: '00ff00ff' });
|
||||
expect(bg.toLowerCase()).toContain('#00ff00ff');
|
||||
expect(bg).toMatch(/repeating-conic-gradient/);
|
||||
expect(bg.backgroundImage.toLowerCase()).toContain('#00ff00ff');
|
||||
expect(bg.backgroundImage).toMatch(/repeating-conic-gradient/);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import {
|
||||
CHECKERBOARD_BG,
|
||||
CHECKERBOARD_TILE_SIZE,
|
||||
EFFECT_OVERLAYS,
|
||||
buildColorLayer,
|
||||
parseStops,
|
||||
@@ -52,11 +53,16 @@ export function FilamentSwatch({
|
||||
const effectLayer = effectKey ? EFFECT_OVERLAYS[effectKey] ?? null : null;
|
||||
|
||||
// Layer order (top → bottom): effect overlay → colour layer → checkerboard.
|
||||
// Set as `background-image` (not the `background` shorthand) so the value
|
||||
// remains a pure list-of-images that browsers and test runners parse cleanly.
|
||||
const backgroundImage = [effectLayer, colorLayer, CHECKERBOARD_BG]
|
||||
.filter((layer): layer is string => Boolean(layer))
|
||||
.join(', ');
|
||||
// Per-layer background-size: 'cover' on the painted layers, fixed tile on
|
||||
// the checkerboard so its cell density doesn't scale with element size
|
||||
// (a card-sized swatch with `cover` checker would render only 4 huge
|
||||
// cells; #1154 follow-up).
|
||||
const layers: { image: string; size: string }[] = [];
|
||||
if (effectLayer) layers.push({ image: effectLayer, size: 'cover' });
|
||||
layers.push({ image: colorLayer, size: 'cover' });
|
||||
layers.push({ image: CHECKERBOARD_BG, size: CHECKERBOARD_TILE_SIZE });
|
||||
const backgroundImage = layers.map((l) => l.image).join(', ');
|
||||
const backgroundSize = layers.map((l) => l.size).join(', ');
|
||||
|
||||
const shapeClass =
|
||||
shape === 'circle' ? 'rounded-full' : shape === 'pill' ? 'rounded-full' : 'rounded';
|
||||
@@ -74,7 +80,7 @@ export function FilamentSwatch({
|
||||
<span
|
||||
data-testid="filament-swatch"
|
||||
className={`${className} ${shapeClass} border border-black/20 inline-block flex-shrink-0`}
|
||||
style={{ backgroundImage, backgroundSize: 'cover', ...style }}
|
||||
style={{ backgroundImage, backgroundSize, ...style }}
|
||||
title={computedTitle}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -68,8 +68,16 @@ export const FILAMENT_EFFECT_OPTIONS: ReadonlyArray<{
|
||||
// Checkerboard pattern shown beneath the colour layer so alpha < FF is
|
||||
// actually visible to the user. Kept as a pure gradient (no position/size)
|
||||
// so the value parses cleanly inside `background-image:` everywhere.
|
||||
//
|
||||
// Density is controlled by ``CHECKERBOARD_TILE_SIZE`` applied as
|
||||
// ``background-size`` on this layer specifically — without that,
|
||||
// ``backgroundSize: 'cover'`` would stretch the gradient to the whole
|
||||
// element and a card-sized swatch would only show 4 huge cells (#1154
|
||||
// follow-up reporter feedback). Per-layer sizing is supported by every
|
||||
// modern browser via comma-separated ``background-size``.
|
||||
export const CHECKERBOARD_BG =
|
||||
'repeating-conic-gradient(#cbcbcb 0% 25%, #f5f5f5 0% 50%)';
|
||||
export const CHECKERBOARD_TILE_SIZE = '12px 12px';
|
||||
|
||||
/** Optional CSS overlay layer for variants that have a visual treatment.
|
||||
* Variants without an entry are categorical labels only — they don't paint
|
||||
@@ -77,12 +85,24 @@ export const CHECKERBOARD_BG =
|
||||
* effect is to switch the colour layer to a conic-gradient (see
|
||||
* `buildColorLayer`), not to add an overlay layer. */
|
||||
export const EFFECT_OVERLAYS: Partial<Record<FilamentEffect, string>> = {
|
||||
// Sparkle: fine bright dots scattered across the swatch.
|
||||
// Sparkle: bright flecks scattered across the swatch. The original 4-dot
|
||||
// pattern was too subtle on card-sized swatches (#1154 follow-up); 13
|
||||
// dots in mixed sizes (1px / 1.5px / 2px) and opacities give depth and
|
||||
// make the variant clearly distinguishable from solid + multicolor.
|
||||
sparkle:
|
||||
'radial-gradient(circle at 30% 20%, rgba(255,255,255,0.85) 0 1px, transparent 1.5px), ' +
|
||||
'radial-gradient(circle at 70% 60%, rgba(255,255,255,0.7) 0 1px, transparent 1.5px), ' +
|
||||
'radial-gradient(circle at 45% 75%, rgba(255,255,255,0.6) 0 1px, transparent 1.5px), ' +
|
||||
'radial-gradient(circle at 80% 30%, rgba(255,255,255,0.5) 0 1px, transparent 1.5px)',
|
||||
'radial-gradient(circle at 12% 18%, rgba(255,255,255,0.95) 0 1.5px, transparent 2px), ' +
|
||||
'radial-gradient(circle at 28% 42%, rgba(255,255,255,0.85) 0 1px, transparent 1.5px), ' +
|
||||
'radial-gradient(circle at 38% 78%, rgba(255,255,255,0.95) 0 1.5px, transparent 2px), ' +
|
||||
'radial-gradient(circle at 52% 12%, rgba(255,255,255,0.80) 0 1px, transparent 1.5px), ' +
|
||||
'radial-gradient(circle at 58% 55%, rgba(255,255,255,1) 0 2px, transparent 2.5px), ' +
|
||||
'radial-gradient(circle at 68% 28%, rgba(255,255,255,0.75) 0 1px, transparent 1.5px), ' +
|
||||
'radial-gradient(circle at 75% 88%, rgba(255,255,255,0.85) 0 1px, transparent 1.5px), ' +
|
||||
'radial-gradient(circle at 82% 48%, rgba(255,255,255,0.95) 0 1.5px, transparent 2px), ' +
|
||||
'radial-gradient(circle at 88% 18%, rgba(255,255,255,0.80) 0 1px, transparent 1.5px), ' +
|
||||
'radial-gradient(circle at 92% 70%, rgba(255,255,255,0.85) 0 1px, transparent 1.5px), ' +
|
||||
'radial-gradient(circle at 18% 62%, rgba(255,255,255,0.75) 0 1px, transparent 1.5px), ' +
|
||||
'radial-gradient(circle at 45% 32%, rgba(255,255,255,0.65) 0 0.8px, transparent 1.2px), ' +
|
||||
'radial-gradient(circle at 65% 72%, rgba(255,255,255,0.65) 0 0.8px, transparent 1.2px)',
|
||||
// Wood: subtle horizontal banding to mimic grain.
|
||||
wood:
|
||||
'repeating-linear-gradient(90deg, ' +
|
||||
@@ -176,14 +196,18 @@ export function buildColorLayer(
|
||||
|
||||
/** Public helper: produce a CSS background-image value (list of layered
|
||||
* <image>s) for a filament, for callers that want to paint a banner or
|
||||
* large area instead of using the swatch element. Pair with
|
||||
* `background-size: cover` and the swatch logic stays consistent. */
|
||||
* large area instead of using the swatch element. Returns a
|
||||
* ``CSSProperties``-compatible object with ``backgroundImage`` and
|
||||
* ``backgroundSize`` so the checkerboard underlayer keeps a fixed tile
|
||||
* density regardless of element size — without per-layer sizing, a
|
||||
* card-sized banner only shows 4 huge checker cells.
|
||||
*/
|
||||
export function buildFilamentBackground(opts: {
|
||||
rgba?: string | null;
|
||||
extraColors?: string | null;
|
||||
effectType?: FilamentEffect | string | null;
|
||||
subtype?: string | null;
|
||||
}): string {
|
||||
}): { backgroundImage: string; backgroundSize: string } {
|
||||
const stops = parseStops(opts.extraColors);
|
||||
const colorLayer = buildColorLayer(opts.rgba, stops, opts.subtype, opts.effectType);
|
||||
const effectKey =
|
||||
@@ -191,7 +215,18 @@ export function buildFilamentBackground(opts: {
|
||||
? (opts.effectType as FilamentEffect)
|
||||
: null;
|
||||
const effectLayer = effectKey ? EFFECT_OVERLAYS[effectKey] ?? null : null;
|
||||
return [effectLayer, colorLayer, CHECKERBOARD_BG]
|
||||
.filter((layer): layer is string => Boolean(layer))
|
||||
.join(', ');
|
||||
|
||||
// Layer order (top → bottom): effect overlay → colour layer → checkerboard.
|
||||
// Per-layer background-size: 'cover' on the painted layers (so they fill
|
||||
// the element) and the fixed tile size on the checkerboard so the cell
|
||||
// count scales with the element rather than the element scaling the cells.
|
||||
const layers: { image: string; size: string }[] = [];
|
||||
if (effectLayer) layers.push({ image: effectLayer, size: 'cover' });
|
||||
layers.push({ image: colorLayer, size: 'cover' });
|
||||
layers.push({ image: CHECKERBOARD_BG, size: CHECKERBOARD_TILE_SIZE });
|
||||
|
||||
return {
|
||||
backgroundImage: layers.map((l) => l.image).join(', '),
|
||||
backgroundSize: layers.map((l) => l.size).join(', '),
|
||||
};
|
||||
}
|
||||
|
||||
@@ -216,7 +216,7 @@ export function ColorSection({
|
||||
{/* Color preview banner — shows gradient + effect overlay. */}
|
||||
<div
|
||||
className="h-10 rounded-lg border border-bambu-dark-tertiary"
|
||||
style={{ backgroundImage: previewBackground, backgroundSize: 'cover' }}
|
||||
style={previewBackground}
|
||||
data-testid="color-preview-banner"
|
||||
/>
|
||||
|
||||
|
||||
@@ -1295,7 +1295,7 @@ function InventoryPage() {
|
||||
{pagedItems.map((item) => {
|
||||
if (item.type === 'group') {
|
||||
const { key, spools: groupSpools, representative: rep } = item;
|
||||
const groupBannerImage = buildFilamentBackground({
|
||||
const groupBannerStyle = buildFilamentBackground({
|
||||
rgba: rep.rgba,
|
||||
extraColors: rep.extra_colors,
|
||||
effectType: rep.effect_type,
|
||||
@@ -1309,7 +1309,7 @@ function InventoryPage() {
|
||||
className="bg-bambu-dark-secondary rounded-lg overflow-hidden border border-bambu-green/30 hover:border-bambu-green transition-colors cursor-pointer"
|
||||
onClick={() => toggleGroupExpand(key)}
|
||||
>
|
||||
<div className="h-10 flex items-center px-4 gap-3" style={{ backgroundImage: groupBannerImage, backgroundSize: 'cover' }}>
|
||||
<div className="h-10 flex items-center px-4 gap-3" style={groupBannerStyle}>
|
||||
<span className="bg-white/90 text-gray-800 px-3 py-0.5 rounded-full text-sm font-medium">
|
||||
{resolveSpoolColorName(rep.color_name, rep.rgba) || '-'}
|
||||
</span>
|
||||
@@ -1677,7 +1677,7 @@ function SpoolCard({
|
||||
onClick: () => void;
|
||||
t: (key: string, opts?: Record<string, unknown>) => string;
|
||||
}) {
|
||||
const bannerImage = buildFilamentBackground({
|
||||
const bannerStyle = buildFilamentBackground({
|
||||
rgba: spool.rgba,
|
||||
extraColors: spool.extra_colors,
|
||||
effectType: spool.effect_type,
|
||||
@@ -1688,7 +1688,7 @@ function SpoolCard({
|
||||
className={`bg-bambu-dark-secondary rounded-lg overflow-hidden border border-bambu-dark-tertiary hover:border-bambu-green transition-colors cursor-pointer ${spool.archived_at ? 'opacity-50' : ''}`}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div className="h-14 flex items-center justify-center" style={{ backgroundImage: bannerImage, backgroundSize: 'cover' }}>
|
||||
<div className="h-14 flex items-center justify-center" style={bannerStyle}>
|
||||
<span className="bg-white/90 text-gray-800 px-3 py-0.5 rounded-full text-sm font-medium">
|
||||
{resolveSpoolColorName(spool.color_name, spool.rgba) || '-'}
|
||||
</span>
|
||||
|
||||
File diff suppressed because one or more lines are too long
+1
-1
@@ -26,7 +26,7 @@
|
||||
|
||||
<!-- Splash screens for iOS -->
|
||||
<link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
|
||||
<script type="module" crossorigin src="/assets/index-DUxwTpts.js"></script>
|
||||
<script type="module" crossorigin src="/assets/index-Ct29kBC5.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-7GmlJb0k.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Reference in New Issue
Block a user