starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-09-09 16:05:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve objectviewer performance

Browse Source
This commit is contained in:
Ruben Fiszel
2025-03-05 15:30:00 +01:00
parent a16cab0923
commit 2444f4f23e
3 changed files with 112 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/common/button/AnimatedButton.svelte
+18 -83
View File
@@ -1,6 +1,5 @@
<script lang="ts">
import { twMerge } from 'tailwind-merge'
import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
import AnimatedButtonInner from './AnimatedButtonInner.svelte'
export let marginWidth = '2px'
export let animationDuration = '2s'
export let baseRadius = '4px'
@@ -8,86 +7,22 @@
export let wrapperClasses = ''
export let ringColor = 'transparent'
export let darkMode = false
const gradientColors = {
light: ['#d6e5ff', '#0073ff', '#5aa2fa', '#0272fa', '#d6e5ff'],
dark: ['#0469db', '#15498a', '#031ea3', '#0073ff', '#0469db']
}
let clientWidth = 0
let clientHeight = 0
$: circleRadius = Math.ceil(
Math.sqrt(clientWidth * clientWidth + clientHeight * clientHeight) / 2
)
$: gradientString = `from 0deg, ${gradientColors[darkMode ? 'dark' : 'light'].join(', ')}`
</script>
<DarkModeObserver bind:darkMode />
<div
class={twMerge('gradient-button', wrapperClasses)}
style="--margin-width: {marginWidth}; --animation-duration: {animationDuration}; --base-radius: {baseRadius}; --circle-radius: {circleRadius}; --ring-color: {ringColor}; --gradient: {gradientString}"
class:animate
bind:clientWidth
bind:clientHeight
>
<slot />
</div>
<style>
.gradient-button {
position: relative;
font-size: inherit;
border: none;
border-radius: calc(var(--base-radius) + var(--margin-width, 2px));
color: currentColor;
background: inherit;
z-index: 1;
overflow: hidden;
padding: var(--margin-width, 1px);
}
/* Circular gradient */
.gradient-button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(var(--circle-radius, 300px) * 2px);
height: calc(var(--circle-radius, 300px) * 2px);
background: var(--ring-color, transparent);
border-radius: 50%;
z-index: -1;
animation: none;
}
.gradient-button.animate::before {
background: conic-gradient(var(--gradient));
animation: rotate var(--animation-duration, 2s) linear infinite;
}
/* inner background */
.gradient-button::after {
content: '';
position: absolute;
top: var(--margin-width, 2px);
right: var(--margin-width, 2px);
bottom: var(--margin-width, 2px);
left: var(--margin-width, 2px);
background: inherit;
border-radius: var(--base-radius);
z-index: -1;
}
@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>
{#if animate}
<AnimatedButtonInner
{marginWidth}
{animationDuration}
{baseRadius}
{animate}
{wrapperClasses}
{ringColor}
{darkMode}
>
<slot />
</AnimatedButtonInner>
{:else}
<div class={wrapperClasses}>
<slot />
</div>
{/if}
frontend/src/lib/components/common/button/AnimatedButtonInner.svelte
+93
View File
@@ -0,0 +1,93 @@
<script lang="ts">
import { twMerge } from 'tailwind-merge'
import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
export let marginWidth = '2px'
export let animationDuration = '2s'
export let baseRadius = '4px'
export let animate = true
export let wrapperClasses = ''
export let ringColor = 'transparent'
export let darkMode = false
const gradientColors = {
light: ['#d6e5ff', '#0073ff', '#5aa2fa', '#0272fa', '#d6e5ff'],
dark: ['#0469db', '#15498a', '#031ea3', '#0073ff', '#0469db']
}
let clientWidth = 0
let clientHeight = 0
$: circleRadius = Math.ceil(
Math.sqrt(clientWidth * clientWidth + clientHeight * clientHeight) / 2
)
$: gradientString = `from 0deg, ${gradientColors[darkMode ? 'dark' : 'light'].join(', ')}`
</script>
<DarkModeObserver bind:darkMode />
<div
class={twMerge('gradient-button', wrapperClasses)}
style="--margin-width: {marginWidth}; --animation-duration: {animationDuration}; --base-radius: {baseRadius}; --circle-radius: {circleRadius}; --ring-color: {ringColor}; --gradient: {gradientString}"
class:animate
bind:clientWidth
bind:clientHeight
>
<slot />
</div>
<style>
.gradient-button {
position: relative;
font-size: inherit;
border: none;
border-radius: calc(var(--base-radius) + var(--margin-width, 2px));
color: currentColor;
background: inherit;
z-index: 1;
overflow: hidden;
padding: var(--margin-width, 1px);
}
/* Circular gradient */
.gradient-button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(var(--circle-radius, 300px) * 2px);
height: calc(var(--circle-radius, 300px) * 2px);
background: var(--ring-color, transparent);
border-radius: 50%;
z-index: -1;
animation: none;
}
.gradient-button.animate::before {
background: conic-gradient(var(--gradient));
animation: rotate var(--animation-duration, 2s) linear infinite;
}
/* inner background */
.gradient-button::after {
content: '';
position: absolute;
top: var(--margin-width, 2px);
right: var(--margin-width, 2px);
bottom: var(--margin-width, 2px);
left: var(--margin-width, 2px);
background: inherit;
border-radius: var(--base-radius);
z-index: -1;
}
@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>
frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
+1
View File
@@ -134,6 +134,7 @@
{#if getTypeAsString(json[key]) === 'object'}
<svelte:self
{connecting}
json={json[key]}
level={level + 1}
currentPath={computeFullKey(key, rawKey)}