Skip to content

Commit 19d3e8b

Browse files
committed
refactor(LightRaysDemo): remove unnecessary key-based re-rendering and utilize preview color component
1 parent 4b5cd3d commit 19d3e8b

File tree

1 file changed

+17
-48
lines changed

1 file changed

+17
-48
lines changed

src/demo/Backgrounds/LightRaysDemo.vue

Lines changed: 17 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<template #preview>
44
<div class="h-[600px] overflow-hidden demo-container relative">
55
<LightRays
6-
:key="rerenderKey"
76
:rays-origin="raysOrigin"
87
:rays-color="raysColor"
98
:rays-speed="raysSpeed"
@@ -23,21 +22,15 @@
2322
</div>
2423

2524
<Customize>
26-
<div class="flex items-center mb-4">
27-
<span class="text-sm mr-2">Rays Color</span>
28-
<input
29-
type="color"
30-
:value="raysColor"
31-
@input="updateRaysColor"
32-
class="w-12 h-8 border border-gray-300 rounded cursor-pointer"
33-
/>
34-
</div>
25+
<PreviewColor
26+
title="Rays Color"
27+
v-model="raysColor"
28+
/>
3529

3630
<PreviewSelect
3731
title="Rays Origin"
3832
v-model="raysOrigin"
3933
:options="raysOriginOptions"
40-
@update:model-value="forceRerender"
4134
/>
4235

4336
<PreviewSlider
@@ -46,7 +39,6 @@
4639
:min="0.1"
4740
:max="3"
4841
:step="0.1"
49-
@update:model-value="forceRerender"
5042
/>
5143

5244
<PreviewSlider
@@ -55,7 +47,6 @@
5547
:min="0.1"
5648
:max="2"
5749
:step="0.1"
58-
@update:model-value="forceRerender"
5950
/>
6051

6152
<PreviewSlider
@@ -64,7 +55,6 @@
6455
:min="0.5"
6556
:max="3"
6657
:step="0.1"
67-
@update:model-value="forceRerender"
6858
/>
6959

7060
<PreviewSlider
@@ -73,7 +63,6 @@
7363
:min="0.5"
7464
:max="2"
7565
:step="0.1"
76-
@update:model-value="forceRerender"
7766
/>
7867

7968
<PreviewSlider
@@ -82,7 +71,6 @@
8271
:min="0"
8372
:max="2"
8473
:step="0.1"
85-
@update:model-value="forceRerender"
8674
/>
8775

8876
<PreviewSlider
@@ -91,7 +79,6 @@
9179
:min="0"
9280
:max="1"
9381
:step="0.1"
94-
@update:model-value="forceRerender"
9582
/>
9683

9784
<PreviewSlider
@@ -100,7 +87,6 @@
10087
:min="0"
10188
:max="0.5"
10289
:step="0.01"
103-
@update:model-value="forceRerender"
10490
/>
10591

10692
<PreviewSlider
@@ -109,10 +95,9 @@
10995
:min="0"
11096
:max="1"
11197
:step="0.1"
112-
@update:model-value="forceRerender"
11398
/>
11499

115-
<PreviewSwitch title="Pulsating" v-model="pulsating" @update:model-value="forceRerender" />
100+
<PreviewSwitch title="Pulsating" v-model="pulsating" />
116101
</Customize>
117102

118103
<PropTable :data="propData" />
@@ -140,11 +125,11 @@ import Customize from '@/components/common/Customize.vue';
140125
import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
141126
import PreviewSlider from '@/components/common/PreviewSlider.vue';
142127
import PreviewSelect from '@/components/common/PreviewSelect.vue';
128+
import PreviewColor from '@/components/common/PreviewColor.vue';
143129
import BackgroundContent from '@/components/common/BackgroundContent.vue';
144130
import LightRays, { type RaysOrigin } from '../../content/Backgrounds/LightRays/LightRays.vue';
145131
import { lightRays } from '@/constants/code/Backgrounds/lightRaysCode';
146132
147-
const rerenderKey = ref(0);
148133
const raysOrigin = ref<RaysOrigin>('top-center');
149134
const raysColor = ref('#ffffff');
150135
const raysSpeed = ref(1);
@@ -168,16 +153,6 @@ const raysOriginOptions = [
168153
{ value: 'bottom-right', label: 'Bottom Right' }
169154
];
170155
171-
const forceRerender = () => {
172-
rerenderKey.value += 1;
173-
};
174-
175-
const updateRaysColor = (event: Event) => {
176-
const target = event.target as HTMLInputElement;
177-
raysColor.value = target.value;
178-
forceRerender();
179-
};
180-
181156
const propData = [
182157
{
183158
name: 'raysOrigin',
@@ -202,61 +177,55 @@ const propData = [
202177
name: 'lightSpread',
203178
type: 'number',
204179
default: '0.5',
205-
description: 'How wide the light rays spread. Lower values = tighter rays, higher values = wider spread'
180+
description: 'Controls how wide the light rays spread'
206181
},
207182
{
208183
name: 'rayLength',
209184
type: 'number',
210-
default: '1.0',
211-
description: 'Maximum length/reach of the rays'
185+
default: '3.0',
186+
description: 'Length of the light rays'
212187
},
213188
{
214189
name: 'pulsating',
215190
type: 'boolean',
216191
default: 'false',
217-
description: 'Enable pulsing animation effect'
192+
description: 'Whether the rays should pulsate'
218193
},
219194
{
220195
name: 'fadeDistance',
221196
type: 'number',
222197
default: '1.0',
223-
description: 'How far rays fade out from origin'
198+
description: 'Distance at which the rays fade out'
224199
},
225200
{
226201
name: 'saturation',
227202
type: 'number',
228203
default: '1.0',
229-
description: 'Color saturation level (0-1)'
204+
description: 'Color saturation of the rays'
230205
},
231206
{
232207
name: 'followMouse',
233208
type: 'boolean',
234209
default: 'false',
235-
description: 'Make rays rotate towards the mouse cursor'
210+
description: 'Whether the rays should follow the mouse cursor'
236211
},
237212
{
238213
name: 'mouseInfluence',
239214
type: 'number',
240-
default: '0.5',
241-
description: 'How much mouse affects rays (0-1)'
215+
default: '0.1',
216+
description: 'How much the mouse movement affects the rays'
242217
},
243218
{
244219
name: 'noiseAmount',
245220
type: 'number',
246221
default: '0.0',
247-
description: 'Add noise/grain to rays (0-1)'
222+
description: 'Amount of noise/distortion in the rays'
248223
},
249224
{
250225
name: 'distortion',
251226
type: 'number',
252227
default: '0.0',
253-
description: 'Apply wave distortion to rays'
254-
},
255-
{
256-
name: 'className',
257-
type: 'string',
258-
default: '""',
259-
description: 'Additional CSS classes to apply to the container'
228+
description: 'Amount of wave distortion in the rays'
260229
}
261230
];
262231
</script>

0 commit comments

Comments
 (0)