From 2e8a5710e8094fdced8129be063bb46af4b8c607 Mon Sep 17 00:00:00 2001 From: Bela Bohlender Date: Tue, 11 Jun 2024 15:07:29 +0200 Subject: [PATCH] feat: setStyle merge with exsisting styles by default --- docs/advanced/performance.md | 2 +- .../components-and-properties.md | 28 +++++++++---------- packages/react/src/ref.ts | 5 ++-- packages/uikit/src/vanilla/container.ts | 4 +-- packages/uikit/src/vanilla/content.ts | 4 +-- packages/uikit/src/vanilla/custom.ts | 4 +-- packages/uikit/src/vanilla/fullscreen.ts | 4 +-- packages/uikit/src/vanilla/icon.ts | 4 +-- packages/uikit/src/vanilla/image.ts | 4 +-- packages/uikit/src/vanilla/input.ts | 4 +-- packages/uikit/src/vanilla/root.ts | 4 +-- packages/uikit/src/vanilla/svg.ts | 4 +-- packages/uikit/src/vanilla/text.ts | 4 +-- 13 files changed, 38 insertions(+), 37 deletions(-) diff --git a/docs/advanced/performance.md b/docs/advanced/performance.md index 194e41de..c0a5f44d 100644 --- a/docs/advanced/performance.md +++ b/docs/advanced/performance.md @@ -28,7 +28,7 @@ export function AnimateBackground() { } ``` -Setting executing `setStyle(undefined)` resets all changes back to the initial properties provided to the directly to the component. +Setting executing `setStyle(undefined, true)` resets all changes back to the initial properties provided to the directly to the component. ### using signals diff --git a/docs/getting-started/components-and-properties.md b/docs/getting-started/components-and-properties.md index 0f036ded..62e8f6a2 100644 --- a/docs/getting-started/components-and-properties.md +++ b/docs/getting-started/components-and-properties.md @@ -532,17 +532,17 @@ All Components support [all R3F event handlers](https://docs.pmnd.rs/react-three Each component exposes the `ComponentInternals` when using a `ref`. The component internals provide you with access to -| Property | Explanation | -| ------------------- | ---------------------------------------------------------------------------------------------------------- | -| borderInset | a tuple containing the border sizes on all 4 sides `[top, right, bottom, left]` | -| paddingInset | a tuple containing the padding sizes on all 4 sides `[top, right, bottom, left]` | -| center | the offset between from the element's center to its parent's center | -| size | the outer width/height of the element | -| interactionPanel | the mesh added to the scene graph to capture events | -| scrollPosition | the x/y scroll position of the children when the element is scrollable | -| pixelSize | the size of one pixel | -| maxScrollPosition | the maximum x/y scroll position, based on the size of the children | -| isClipped | exploses whether the element is fully clipped by some ancestor | -| setStyle | set the styles of the element (the provided styles have a higher precedence then the element's properties) | -| getStyle | get the object last written to `setStyle` | -| getComputedProperty | read the current value for any property (combines default properties, direct properties, and styles) | +| Property | Explanation | +| ------------------- | --------------------------------------------------------------------------------------------------------------- | +| borderInset | a tuple containing the border sizes on all 4 sides `[top, right, bottom, left]` | +| paddingInset | a tuple containing the padding sizes on all 4 sides `[top, right, bottom, left]` | +| center | the offset between from the element's center to its parent's center | +| size | the outer width/height of the element | +| interactionPanel | the mesh added to the scene graph to capture events | +| scrollPosition | the x/y scroll position of the children when the element is scrollable | +| pixelSize | the size of one pixel | +| maxScrollPosition | the maximum x/y scroll position, based on the size of the children | +| isClipped | exploses whether the element is fully clipped by some ancestor | +| setStyle | modifies the styles of the element (the provided styles have a higher precedence then the element's properties) | +| getStyle | get the current style of the object | +| getComputedProperty | read the current value for any property (combines default properties, direct properties, and styles) | diff --git a/packages/react/src/ref.ts b/packages/react/src/ref.ts index 7d426cf7..15624af7 100644 --- a/packages/react/src/ref.ts +++ b/packages/react/src/ref.ts @@ -54,7 +54,7 @@ export type ComponentInternals = { /** * set the styles of the element (the provided styles have a higher precedence then the element's properties) */ - setStyle(style: T | undefined): void + setStyle(style: T | undefined, replace?: boolean): void /** * get the object last written to `setStyle` */ @@ -91,7 +91,8 @@ export function useComponentInternals( () => { const { scrollPosition, paddingInset, borderInset, relativeCenter, size, maxScrollPosition } = internals return { - setStyle: (style: T | undefined) => (styleSignal.value = style), + setStyle: (style: T | undefined, replace?: boolean) => + (styleSignal.value = replace ? style : ({ ...styleSignal.value, ...style } as T)), getStyle: () => styleSignal.peek(), getComputedProperty: (key: K) => untracked(() => internals.mergedProperties.value.read(key as string, undefined)), diff --git a/packages/uikit/src/vanilla/container.ts b/packages/uikit/src/vanilla/container.ts index e3403d47..b7541ea6 100644 --- a/packages/uikit/src/vanilla/container.ts +++ b/packages/uikit/src/vanilla/container.ts @@ -56,8 +56,8 @@ export class Container extends Parent { return this.styleSignal.peek() } - setStyle(style: ContainerProperties | undefined) { - this.styleSignal.value = style + setStyle(style: ContainerProperties | undefined, replace?: boolean) { + this.styleSignal.value = replace ? style : { ...this.styleSignal.value, ...style } } setProperties(properties: ContainerProperties | undefined) { diff --git a/packages/uikit/src/vanilla/content.ts b/packages/uikit/src/vanilla/content.ts index 4f4f2fd6..9a6b513b 100644 --- a/packages/uikit/src/vanilla/content.ts +++ b/packages/uikit/src/vanilla/content.ts @@ -88,8 +88,8 @@ export class Content extends Object3D) | undefined) { diff --git a/packages/uikit/src/vanilla/svg.ts b/packages/uikit/src/vanilla/svg.ts index db12e415..b5a67d7e 100644 --- a/packages/uikit/src/vanilla/svg.ts +++ b/packages/uikit/src/vanilla/svg.ts @@ -57,8 +57,8 @@ export class Svg extends Parent { return this.styleSignal.peek() } - setStyle(style: SvgProperties | undefined) { - this.styleSignal.value = style + setStyle(style: SvgProperties | undefined, replace?: boolean) { + this.styleSignal.value = replace ? style : { ...this.styleSignal.value, ...style } } setProperties(properties: SvgProperties | undefined) { diff --git a/packages/uikit/src/vanilla/text.ts b/packages/uikit/src/vanilla/text.ts index 0170b1f4..fad7af4e 100644 --- a/packages/uikit/src/vanilla/text.ts +++ b/packages/uikit/src/vanilla/text.ts @@ -66,8 +66,8 @@ export class Text extends Object3D { return this.styleSignal.peek() } - setStyle(style: TextProperties | undefined) { - this.styleSignal.value = style + setStyle(style: TextProperties | undefined, replace?: boolean) { + this.styleSignal.value = replace ? style : { ...this.styleSignal.value, ...style } } setProperties(properties: TextProperties | undefined) {