-
+
@@ -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 @@