From 8e1b5fa77c16772a8aed0059998571b2b1b4602a Mon Sep 17 00:00:00 2001 From: root Date: Thu, 1 Jan 2026 18:07:30 +0100 Subject: [PATCH] [FEAT] Bg select fix --- src/components/SpriteCanvas.vue | 25 +++++++++++++++---------- src/components/SpritePreview.vue | 6 +++++- src/composables/useBackgroundStyles.ts | 4 ++-- src/composables/useGridMetrics.ts | 8 ++++---- src/views/HomeView.vue | 2 +- 5 files changed, 27 insertions(+), 18 deletions(-) diff --git a/src/components/SpriteCanvas.vue b/src/components/SpriteCanvas.vue index 9cdd509..5b483d2 100644 --- a/src/components/SpriteCanvas.vue +++ b/src/components/SpriteCanvas.vue @@ -3,7 +3,7 @@
-

Copy Sprite to Frame

+

Copy sprite to frame

- +
- + @@ -349,7 +349,12 @@ }; // Use the new useBackgroundStyles composable for consistent background styling - const { backgroundColor: cellBackgroundColor, backgroundImage: cellBackgroundImage, backgroundSize: cellBackgroundSize, backgroundPosition: cellBackgroundPosition } = useBackgroundStyles({ + const { + backgroundColor: cellBackgroundColor, + backgroundImage: cellBackgroundImage, + backgroundSize: cellBackgroundSize, + backgroundPosition: cellBackgroundPosition, + } = useBackgroundStyles({ backgroundColor: toRef(settingsStore, 'backgroundColor'), checkerboardEnabled: toRef(settingsStore, 'checkerboardEnabled'), darkMode: toRef(settingsStore, 'darkMode'), diff --git a/src/components/SpritePreview.vue b/src/components/SpritePreview.vue index 67e52da..87157c8 100644 --- a/src/components/SpritePreview.vue +++ b/src/components/SpritePreview.vue @@ -447,7 +447,11 @@ })); // Use the new useBackgroundStyles composable for consistent background styling - const { backgroundImage: previewBackgroundImage, backgroundSize: previewBackgroundSize, backgroundPosition: previewBackgroundPosition } = useBackgroundStyles({ + const { + backgroundImage: previewBackgroundImage, + backgroundSize: previewBackgroundSize, + backgroundPosition: previewBackgroundPosition, + } = useBackgroundStyles({ backgroundColor: toRef(settingsStore, 'backgroundColor'), checkerboardEnabled: toRef(settingsStore, 'checkerboardEnabled'), darkMode: toRef(settingsStore, 'darkMode'), diff --git a/src/composables/useBackgroundStyles.ts b/src/composables/useBackgroundStyles.ts index 2337c81..3886763 100644 --- a/src/composables/useBackgroundStyles.ts +++ b/src/composables/useBackgroundStyles.ts @@ -20,8 +20,8 @@ export interface BackgroundStyles { export function useBackgroundStyles(options: BackgroundStylesOptions) { // Helper to get reactive values const getBackgroundColor = () => (typeof options.backgroundColor === 'string' ? options.backgroundColor : options.backgroundColor.value); - const getCheckerboardEnabled = () => (typeof options.checkerboardEnabled === 'boolean' ? options.checkerboardEnabled : options.checkerboardEnabled?.value ?? true); - const getDarkMode = () => (typeof options.darkMode === 'boolean' ? options.darkMode : options.darkMode?.value ?? false); + const getCheckerboardEnabled = () => (typeof options.checkerboardEnabled === 'boolean' ? options.checkerboardEnabled : (options.checkerboardEnabled?.value ?? true)); + const getDarkMode = () => (typeof options.darkMode === 'boolean' ? options.darkMode : (options.darkMode?.value ?? false)); /** * Get the background color. diff --git a/src/composables/useGridMetrics.ts b/src/composables/useGridMetrics.ts index 046be66..e1dfeb1 100644 --- a/src/composables/useGridMetrics.ts +++ b/src/composables/useGridMetrics.ts @@ -40,10 +40,10 @@ export function useGridMetrics(options: GridMetricsOptions = {}) { // Helper to get reactive values const getLayers = () => (options.layers ? (Array.isArray(options.layers) ? options.layers : options.layers.value) : null); const getSprites = () => (options.sprites ? (Array.isArray(options.sprites) ? options.sprites : options.sprites.value) : []); - const getNegativeSpacingEnabled = () => (typeof options.negativeSpacingEnabled === 'boolean' ? options.negativeSpacingEnabled : options.negativeSpacingEnabled?.value ?? false); - const getManualCellSizeEnabled = () => (typeof options.manualCellSizeEnabled === 'boolean' ? options.manualCellSizeEnabled : options.manualCellSizeEnabled?.value ?? false); - const getManualCellWidth = () => (typeof options.manualCellWidth === 'number' ? options.manualCellWidth : options.manualCellWidth?.value ?? 64); - const getManualCellHeight = () => (typeof options.manualCellHeight === 'number' ? options.manualCellHeight : options.manualCellHeight?.value ?? 64); + const getNegativeSpacingEnabled = () => (typeof options.negativeSpacingEnabled === 'boolean' ? options.negativeSpacingEnabled : (options.negativeSpacingEnabled?.value ?? false)); + const getManualCellSizeEnabled = () => (typeof options.manualCellSizeEnabled === 'boolean' ? options.manualCellSizeEnabled : (options.manualCellSizeEnabled?.value ?? false)); + const getManualCellWidth = () => (typeof options.manualCellWidth === 'number' ? options.manualCellWidth : (options.manualCellWidth?.value ?? 64)); + const getManualCellHeight = () => (typeof options.manualCellHeight === 'number' ? options.manualCellHeight : (options.manualCellHeight?.value ?? 64)); /** * Calculate cell dimensions including negative spacing. diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index d8c2bd9..a9ae9de 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -355,7 +355,7 @@
Bg
-