diff --git a/package-lock.json b/package-lock.json index 775ec4ebf..06e362b43 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "license": "Apache-2.0", "dependencies": { "@actions/core": "^1.10.0", - "@dcl/protocol": "1.0.0-9254639032.commit-05cd554", + "@dcl/protocol": "https://sdk-team-cdn.decentraland.org/@dcl/protocol/branch//dcl-protocol-1.0.0-9370950471.commit-b469ec0.tgz", "@dcl/quickjs-emscripten": "^0.21.0-3680274614.commit-1808aa1", "@dcl/ts-proto": "1.153.0", "@types/fs-extra": "^9.0.12", @@ -577,9 +577,10 @@ } }, "node_modules/@dcl/protocol": { - "version": "1.0.0-9254639032.commit-05cd554", - "resolved": "https://registry.npmjs.org/@dcl/protocol/-/protocol-1.0.0-9254639032.commit-05cd554.tgz", - "integrity": "sha512-wtEikKlb+7oWzYKK+54+OaH9ZlsgGZSsenfp6uY0uW9iPjK/1bQlA+q+jzDzKXKaWnr9rr1Qy1UvGYhms52WmA==", + "version": "1.0.0-9370950471.commit-b469ec0", + "resolved": "https://sdk-team-cdn.decentraland.org/@dcl/protocol/branch//dcl-protocol-1.0.0-9370950471.commit-b469ec0.tgz", + "integrity": "sha512-XH9IGHJW3bvxOccWmQYA1AK6rJMahRSc+KuLzZfP9H6rtwMhlMkpKHHisjMa0ruAcRiedXkrMlJRm7ygLx2dxA==", + "license": "Apache-2.0", "dependencies": { "@dcl/ts-proto": "1.154.0" } @@ -8232,9 +8233,8 @@ } }, "@dcl/protocol": { - "version": "1.0.0-9254639032.commit-05cd554", - "resolved": "https://registry.npmjs.org/@dcl/protocol/-/protocol-1.0.0-9254639032.commit-05cd554.tgz", - "integrity": "sha512-wtEikKlb+7oWzYKK+54+OaH9ZlsgGZSsenfp6uY0uW9iPjK/1bQlA+q+jzDzKXKaWnr9rr1Qy1UvGYhms52WmA==", + "version": "https://sdk-team-cdn.decentraland.org/@dcl/protocol/branch//dcl-protocol-1.0.0-9370950471.commit-b469ec0.tgz", + "integrity": "sha512-XH9IGHJW3bvxOccWmQYA1AK6rJMahRSc+KuLzZfP9H6rtwMhlMkpKHHisjMa0ruAcRiedXkrMlJRm7ygLx2dxA==", "requires": { "@dcl/ts-proto": "1.154.0" }, diff --git a/package.json b/package.json index d2ee6e8b3..84979f658 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "bugs": "https://github.com/decentraland/js-sdk-toolchain/issues", "dependencies": { "@actions/core": "^1.10.0", - "@dcl/protocol": "1.0.0-9254639032.commit-05cd554", + "@dcl/protocol": "https://sdk-team-cdn.decentraland.org/@dcl/protocol/branch//dcl-protocol-1.0.0-9370950471.commit-b469ec0.tgz", "@dcl/quickjs-emscripten": "^0.21.0-3680274614.commit-1808aa1", "@dcl/ts-proto": "1.153.0", "@types/fs-extra": "^9.0.12", diff --git a/packages/@dcl/playground-assets/etc/playground-assets.api.md b/packages/@dcl/playground-assets/etc/playground-assets.api.md index 4c84f48f6..bbdb32bb0 100644 --- a/packages/@dcl/playground-assets/etc/playground-assets.api.md +++ b/packages/@dcl/playground-assets/etc/playground-assets.api.md @@ -671,6 +671,7 @@ export const componentDefinitionByName: { "core::UiDropdownResult": LwwComponentGetter>; "core::UiInput": LwwComponentGetter>; "core::UiInputResult": LwwComponentGetter>; + "core::UiScrollResult": LwwComponentGetter>; "core::UiText": LwwComponentGetter>; "core::UiTransform": LwwComponentGetter>; "core::VideoEvent": GSetComponentGetter>; @@ -2995,6 +2996,20 @@ export namespace PBUiInputResult { export function encode(message: PBUiInputResult, writer?: _m0.Writer): _m0.Writer; } +// @public (undocumented) +export interface PBUiScrollResult { + // (undocumented) + value: PBVector2 | undefined; +} + +// @public (undocumented) +export namespace PBUiScrollResult { + // (undocumented) + export function decode(input: _m0.Reader | Uint8Array, length?: number): PBUiScrollResult; + // (undocumented) + export function encode(message: PBUiScrollResult, writer?: _m0.Writer): _m0.Writer; +} + // @public (undocumented) export interface PBUiText { color?: PBColor4 | undefined; @@ -3021,6 +3036,7 @@ export interface PBUiTransform { alignItems?: YGAlign | undefined; alignSelf: YGAlign; display: YGDisplay; + elementId?: string | undefined; // (undocumented) flexBasis: number; flexBasisUnit: YGUnit; @@ -3089,6 +3105,8 @@ export interface PBUiTransform { positionType: YGPositionType; // (undocumented) rightOf: number; + scrollPosition?: ScrollPositionValue | undefined; + scrollVisible?: ShowScrollBar | undefined; // (undocumented) width: number; widthUnit: YGUnit; @@ -3741,6 +3759,41 @@ export namespace Schemas { }) => void; } +// @public (undocumented) +export interface ScrollPositionValue { + // (undocumented) + value?: { + $case: "position"; + position: PBVector2; + } | { + $case: "reference"; + reference: string; + } | undefined; +} + +// @public (undocumented) +export namespace ScrollPositionValue { + // (undocumented) + export function decode(input: _m0.Reader | Uint8Array, length?: number): ScrollPositionValue; + // (undocumented) + export function encode(message: ScrollPositionValue, writer?: _m0.Writer): _m0.Writer; +} + +// @public +export type ScrollVisibleType = 'horizontal' | 'vertical' | 'both' | 'hidden'; + +// @public (undocumented) +export const enum ShowScrollBar { + // (undocumented) + SSB_BOTH = 0, + // (undocumented) + SSB_HIDDEN = 3, + // (undocumented) + SSB_ONLY_HORIZONTAL = 2, + // (undocumented) + SSB_ONLY_VERTICAL = 1 +} + // @public (undocumented) export interface Spec { // (undocumented) @@ -4101,6 +4154,9 @@ export interface UiLabelProps { // @public export type uint32 = number; +// @public (undocumented) +export const UiScrollResult: LastWriteWinElementSetComponentDefinition; + // @public (undocumented) export const UiText: LastWriteWinElementSetComponentDefinition; @@ -4120,6 +4176,7 @@ export interface UiTransformProps { alignItems?: AlignType; alignSelf?: AlignType; display?: DisplayType; + elementId?: string; flex?: number; flexBasis?: number; flexDirection?: FlexDirectionType; @@ -4139,6 +4196,8 @@ export interface UiTransformProps { pointerFilter?: PointerFilterType; position?: Partial | PositionShorthand; positionType?: PositionType; + scrollPosition?: PBVector2 | string; + scrollVisible?: ScrollVisibleType; width?: PositionUnit | 'auto'; } diff --git a/packages/@dcl/react-ecs/src/components/uiTransform/index.ts b/packages/@dcl/react-ecs/src/components/uiTransform/index.ts index e334731c5..f92457239 100644 --- a/packages/@dcl/react-ecs/src/components/uiTransform/index.ts +++ b/packages/@dcl/react-ecs/src/components/uiTransform/index.ts @@ -1,3 +1,15 @@ +import { + PointerFilterMode, + YGAlign, + YGDisplay, + YGFlexDirection, + YGJustify, + YGOverflow, + YGPositionType, + YGUnit +} from '@dcl/ecs' +import { PBUiTransform } from '@dcl/ecs/dist/components' +import { UiTransformProps } from './types' import { getAlign, getDisplay, @@ -7,21 +19,11 @@ import { getOverflow, getPointerFilter, getPositionType, + getScrollPosition, + getScrollVisible, parsePosition, parseSize } from './utils' -import { UiTransformProps } from './types' -import { - PointerFilterMode, - YGAlign, - YGDisplay, - YGFlexDirection, - YGJustify, - YGOverflow, - YGPositionType, - YGUnit -} from '@dcl/ecs' -import { PBUiTransform } from '@dcl/ecs/dist/components' /** * @internal @@ -85,8 +87,21 @@ const defaultUiTransform: PBUiTransform = { */ /* @__PURE__ */ export function parseUiTransform(props: UiTransformProps = {}): PBUiTransform { - const { height, minHeight, maxHeight, width, minWidth, maxWidth, alignItems, alignContent, flexWrap, ...otherProps } = - props + const { + scrollPosition, + scrollVisible, + height, + minHeight, + maxHeight, + width, + minWidth, + maxWidth, + alignItems, + alignContent, + flexWrap, + ...otherProps + } = props + return { ...defaultUiTransform, ...otherProps, @@ -109,6 +124,8 @@ export function parseUiTransform(props: UiTransformProps = {}): PBUiTransform { // Optional values ...(alignContent && getAlign('alignContent', alignContent)), ...(alignItems && getAlign('alignItems', alignItems)), - ...(flexWrap && getFlexWrap(flexWrap)) + ...(flexWrap && getFlexWrap(flexWrap)), + ...(scrollPosition && getScrollPosition(scrollPosition)), + ...(scrollVisible && getScrollVisible(scrollVisible)) } } diff --git a/packages/@dcl/react-ecs/src/components/uiTransform/types.ts b/packages/@dcl/react-ecs/src/components/uiTransform/types.ts index f2211850e..b746a518f 100644 --- a/packages/@dcl/react-ecs/src/components/uiTransform/types.ts +++ b/packages/@dcl/react-ecs/src/components/uiTransform/types.ts @@ -1,3 +1,4 @@ +import { Vector2 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/vectors.gen' import { ScaleUnit } from '../types' /** @@ -83,6 +84,12 @@ export type PositionType = 'absolute' | 'relative' */ export type PointerFilterType = 'none' | 'block' +/** + * @public + * The scroll-visible determines if the scrollbars are shown when the scroll overflow is enabled + */ +export type ScrollVisibleType = 'horizontal' | 'vertical' | 'both' | 'hidden' + /** * Layout props to position things in the canvas * @public @@ -136,4 +143,10 @@ export interface UiTransformProps { pointerFilter?: PointerFilterType /** The opacity property sets the opacity level for an element, it's accumulated across children @defaultValue 1 */ opacity?: number + /** A reference value to identify the element, default empty */ + elementId?: string + /** default position=(0,0) if it aplies, a vector or a reference-id */ + scrollPosition?: Vector2 | string + /** default ShowScrollBar.SSB_BOTH */ + scrollVisible?: ScrollVisibleType } diff --git a/packages/@dcl/react-ecs/src/components/uiTransform/utils.ts b/packages/@dcl/react-ecs/src/components/uiTransform/utils.ts index 76ff0ce0f..d4b01c496 100644 --- a/packages/@dcl/react-ecs/src/components/uiTransform/utils.ts +++ b/packages/@dcl/react-ecs/src/components/uiTransform/utils.ts @@ -7,7 +7,9 @@ import { YGPositionType, YGUnit, YGWrap, - PointerFilterMode + PointerFilterMode, + PBUiTransform, + ShowScrollBar } from '@dcl/ecs' import { AlignType, @@ -20,10 +22,12 @@ import { PositionType, PositionUnit, PositionShorthand, - PointerFilterType + PointerFilterType, + ScrollVisibleType } from './types' import { calcOnViewport } from '../utils' import { ScaleUnit } from '../types' +import { Vector2 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/vectors.gen' function capitalize(value: T): Capitalize { return `${value[0].toUpperCase()}${value.slice(1, value.length)}` as Capitalize @@ -265,3 +269,43 @@ const parsePointerFilter: Readonly> none: PointerFilterMode.PFM_NONE, block: PointerFilterMode.PFM_BLOCK } + +/** + * @internal + */ +export function getScrollPosition(scrollPosition: string | Vector2): Pick { + if (typeof scrollPosition === 'string') { + return { + scrollPosition: { + value: { + $case: 'reference', + reference: scrollPosition + } + } + } + } else { + return { + scrollPosition: { + value: { + $case: 'position', + position: scrollPosition + } + } + } + } +} + +const parseScrollVisible: Record = { + both: ShowScrollBar.SSB_BOTH, + hidden: ShowScrollBar.SSB_HIDDEN, + horizontal: ShowScrollBar.SSB_ONLY_HORIZONTAL, + vertical: ShowScrollBar.SSB_ONLY_VERTICAL +} + +/** + * @internal + */ + +export function getScrollVisible(scrollVisible: ScrollVisibleType): Pick { + return { scrollVisible: parseScrollVisible[scrollVisible] } +} diff --git a/packages/@dcl/react-ecs/src/reconciler/index.ts b/packages/@dcl/react-ecs/src/reconciler/index.ts index 488d5f6f8..5368711bf 100644 --- a/packages/@dcl/react-ecs/src/reconciler/index.ts +++ b/packages/@dcl/react-ecs/src/reconciler/index.ts @@ -23,6 +23,7 @@ import { _ChildSet } from './types' import { componentKeys, isNotUndefined, noopConfig, propsChanged } from './utils' +import { Vector2 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/vectors.gen' function getPointerEnum(pointerKey: keyof Listeners): PointerEventType { const pointers: { [key in keyof Required]: PointerEventType } = { @@ -32,7 +33,7 @@ function getPointerEnum(pointerKey: keyof Listeners): PointerEventType { return pointers[pointerKey] } -type OnChangeState = { +type OnChangeState = { onChangeCallback?: (val?: T) => void onSubmitCallback?: (val?: T) => void value?: T @@ -58,6 +59,7 @@ export function createReconciler( const UiInputResult = components.UiInputResult(engine) const UiDropdown = components.UiDropdown(engine) const UiDropdownResult = components.UiDropdownResult(engine) + const UiScrollResult = components.UiScrollResult(engine) // Component ID Helper const getComponentId: { @@ -330,7 +332,10 @@ export function createReconciler( // Maybe this could be something similar to Input system, but since we // are going to use this only here, i prefer to scope it here. - function handleOnChange(componentId: number, resultComponent: typeof UiDropdownResult | typeof UiInputResult) { + function handleOnChange( + componentId: number, + resultComponent: typeof UiDropdownResult | typeof UiInputResult | typeof UiScrollResult + ) { for (const [entity, Result] of engine.getEntitiesWith(resultComponent)) { const entityState = changeEvents.get(entity)?.get(componentId) const isSubmit = !!(Result as any).isSubmit @@ -355,6 +360,8 @@ export function createReconciler( if (changeEvents.size) { handleOnChange(UiInput.componentId, UiInputResult) handleOnChange(UiDropdown.componentId, UiDropdownResult) + // TODO: maybe as componentId could be a virtual id since the scroll input doesn't exist + handleOnChange(UiTransform.componentId, UiScrollResult) } return reconciler.updateContainer(component as any, root, null) }, diff --git a/packages/@dcl/sdk-commands/package-lock.json b/packages/@dcl/sdk-commands/package-lock.json index b09059a53..738d88959 100644 --- a/packages/@dcl/sdk-commands/package-lock.json +++ b/packages/@dcl/sdk-commands/package-lock.json @@ -15,7 +15,7 @@ "@dcl/inspector": "file:../inspector", "@dcl/linker-dapp": "^0.12.0", "@dcl/mini-comms": "1.0.1-20230216163137.commit-a4c75be", - "@dcl/protocol": "1.0.0-9254639032.commit-05cd554", + "@dcl/protocol": "https://sdk-team-cdn.decentraland.org/@dcl/protocol/branch//dcl-protocol-1.0.0-9370950471.commit-b469ec0.tgz", "@dcl/quests-client": "^1.0.3", "@dcl/quests-manager": "^0.1.4", "@dcl/rpc": "^1.1.1", @@ -239,9 +239,10 @@ } }, "node_modules/@dcl/protocol": { - "version": "1.0.0-9254639032.commit-05cd554", - "resolved": "https://registry.npmjs.org/@dcl/protocol/-/protocol-1.0.0-9254639032.commit-05cd554.tgz", - "integrity": "sha512-wtEikKlb+7oWzYKK+54+OaH9ZlsgGZSsenfp6uY0uW9iPjK/1bQlA+q+jzDzKXKaWnr9rr1Qy1UvGYhms52WmA==", + "version": "1.0.0-9370950471.commit-b469ec0", + "resolved": "https://sdk-team-cdn.decentraland.org/@dcl/protocol/branch//dcl-protocol-1.0.0-9370950471.commit-b469ec0.tgz", + "integrity": "sha512-XH9IGHJW3bvxOccWmQYA1AK6rJMahRSc+KuLzZfP9H6rtwMhlMkpKHHisjMa0ruAcRiedXkrMlJRm7ygLx2dxA==", + "license": "Apache-2.0", "dependencies": { "@dcl/ts-proto": "1.154.0" } @@ -3744,9 +3745,8 @@ } }, "@dcl/protocol": { - "version": "1.0.0-9254639032.commit-05cd554", - "resolved": "https://registry.npmjs.org/@dcl/protocol/-/protocol-1.0.0-9254639032.commit-05cd554.tgz", - "integrity": "sha512-wtEikKlb+7oWzYKK+54+OaH9ZlsgGZSsenfp6uY0uW9iPjK/1bQlA+q+jzDzKXKaWnr9rr1Qy1UvGYhms52WmA==", + "version": "https://sdk-team-cdn.decentraland.org/@dcl/protocol/branch//dcl-protocol-1.0.0-9370950471.commit-b469ec0.tgz", + "integrity": "sha512-XH9IGHJW3bvxOccWmQYA1AK6rJMahRSc+KuLzZfP9H6rtwMhlMkpKHHisjMa0ruAcRiedXkrMlJRm7ygLx2dxA==", "requires": { "@dcl/ts-proto": "1.154.0" } diff --git a/packages/@dcl/sdk-commands/package.json b/packages/@dcl/sdk-commands/package.json index 43201cfab..50078f9e4 100644 --- a/packages/@dcl/sdk-commands/package.json +++ b/packages/@dcl/sdk-commands/package.json @@ -13,7 +13,7 @@ "@dcl/inspector": "file:../inspector", "@dcl/linker-dapp": "^0.12.0", "@dcl/mini-comms": "1.0.1-20230216163137.commit-a4c75be", - "@dcl/protocol": "1.0.0-9254639032.commit-05cd554", + "@dcl/protocol": "https://sdk-team-cdn.decentraland.org/@dcl/protocol/branch//dcl-protocol-1.0.0-9370950471.commit-b469ec0.tgz", "@dcl/quests-client": "^1.0.3", "@dcl/quests-manager": "^0.1.4", "@dcl/rpc": "^1.1.1",