feat: spring bones

src/components/ItemEditorPage/CenterPanel/CenterPanel.container.tsx

@@ -15,7 +15,8 @@ import {
   setSkinColor,
   fetchBaseWearablesRequest,
   setWearablePreviewController,
-  setItems
+  setItems,
+  pushSpringBoneParams
 } from 'modules/editor/actions'
 import {
   getEmote,
@@ -124,6 +125,9 @@ const CenterPanelContainer: React.FC<CenterPanelContainerProps> = () => {
         params?: Parameters<typeof fetchCollectionItemsRequest>[1]
       ) => {
         dispatch(fetchCollectionItemsRequest(id, params))
+      },
+      onPushSpringBoneParams: () => {
+        dispatch(pushSpringBoneParams())
       }
     }),
     [dispatch]

src/components/ItemEditorPage/CenterPanel/CenterPanel.tsx

@@ -263,12 +263,15 @@ export default class CenterPanel extends React.PureComponent<Props, State> {
   }
 
   handleWearablePreviewLoad = () => {
-    const { wearableController, onSetWearablePreviewController } = this.props
+    const { wearableController, onSetWearablePreviewController, onPushSpringBoneParams } = this.props
 
     if (!wearableController) {
       onSetWearablePreviewController(WearablePreview.createController('wearable-editor'))
     }
 
+    // Push current spring bone params to the freshly loaded controller via saga
+    onPushSpringBoneParams()
+
     this.setState({ isLoading: false })
 
     // Run validation once the preview has loaded (item data is ready)
@@ -278,14 +281,16 @@ export default class CenterPanel extends React.PureComponent<Props, State> {
   }
 
   handlePlayEmote = () => {
-    const { wearableController, isPlayingEmote, visibleItems, onSetAvatarAnimation, onSetItems } = this.props
+    const { wearableController, isPlayingEmote, visibleItems, onSetAvatarAnimation, onSetItems, onPushSpringBoneParams } = this.props
     const newVisibleItems = visibleItems.filter(item => item.type !== ItemType.EMOTE)
 
     if (isPlayingEmote) {
       onSetAvatarAnimation(PreviewEmote.IDLE)
       onSetItems(newVisibleItems)
     } else {
       wearableController?.emote.play() as void
+      // Push spring bone params immediately on emote play start via saga
+      onPushSpringBoneParams()
     }
   }
 
@@ -467,6 +472,8 @@ export default class CenterPanel extends React.PureComponent<Props, State> {
           profile="default"
           bodyShape={bodyShape}
           emote={emote}
+          // TODO: remove baseUrl before merging.
+          baseUrl="https://wearable-preview-git-feat-babylon-spring-bones-decentraland1.vercel.app"
           zoom={zoom}
           skin={toHex(skinColor)}
           eyes={toHex(eyeColor)}

src/components/ItemEditorPage/CenterPanel/CenterPanel.types.ts

@@ -46,6 +46,7 @@ export type Props = {
   onFetchCollectionItems: ActionFunction<typeof fetchCollectionItemsRequest>
   onSetWearablePreviewController: (controller: Parameters<typeof setWearablePreviewController>[0]) => void
   onSetItems: (items: Parameters<typeof setItems>[0]) => void
+  onPushSpringBoneParams: () => void
 }
 
 export type CenterPanelContainerProps = Record<string, never>

src/components/ItemEditorPage/RightPanel/RightPanel.container.tsx

@@ -11,6 +11,9 @@ import { useGetSelectedItemIdFromCurrentUrl } from 'modules/location/hooks'
 import { getCollection, hasViewAndEditRights } from 'modules/collection/selectors'
 import { isWalletCommitteeMember } from 'modules/committee/selectors'
 import { getIsCampaignEnabled, getIsVrmOptOutEnabled, getIsWearableUtilityEnabled } from 'modules/features/selectors'
+import { getBodyShape, getBones, getSpringBoneParams, hasSpringBoneChanges as hasSpringBoneChangesSelector } from 'modules/editor/selectors'
+import { setSpringBoneParam, addSpringBoneParams, deleteSpringBoneParams, resetSpringBoneParams } from 'modules/editor/actions'
+import { SpringBoneParams } from 'modules/editor/types'
 import { RightPanelContainerProps } from './RightPanel.types'
 import RightPanel from './RightPanel'
 
@@ -45,6 +48,10 @@ const RightPanelContainer: React.FC<RightPanelContainerProps> = () => {
   })
 
   const itemStatus = useMemo(() => (selectedItemId ? statusByItemId[selectedItemId] : null), [selectedItemId, statusByItemId])
+  const selectedBodyShape = useSelector((state: RootState) => getBodyShape(state))
+  const bones = useSelector((state: RootState) => getBones(state))
+  const springBoneParams = useSelector((state: RootState) => getSpringBoneParams(state))
+  const hasSpringBoneChanges = useSelector((state: RootState) => hasSpringBoneChangesSelector(state))
   const onSaveItem: ActionFunction<typeof saveItemRequest> = useCallback(
     (item, contents) => dispatch(saveItemRequest(item, contents)),
     [dispatch]
@@ -53,6 +60,23 @@ const RightPanelContainer: React.FC<RightPanelContainerProps> = () => {
   const onDeleteItem: ActionFunction<typeof deleteItemRequest> = useCallback(item => dispatch(deleteItemRequest(item)), [dispatch])
   const onOpenModal: ActionFunction<typeof openModal> = useCallback((name, metadata) => dispatch(openModal(name, metadata)), [dispatch])
   const onDownload: ActionFunction<typeof downloadItemRequest> = useCallback(itemId => dispatch(downloadItemRequest(itemId)), [dispatch])
+  const onSpringBoneParamChange: ActionFunction<typeof setSpringBoneParam> = useCallback(
+    (boneName: string, field: keyof SpringBoneParams, value: SpringBoneParams[typeof field]) =>
+      dispatch(setSpringBoneParam(boneName, field, value)),
+    [dispatch]
+  )
+  const onAddSpringBoneParams: ActionFunction<typeof addSpringBoneParams> = useCallback(
+    (boneName: string) => dispatch(addSpringBoneParams(boneName)),
+    [dispatch]
+  )
+  const onDeleteSpringBoneParams: ActionFunction<typeof deleteSpringBoneParams> = useCallback(
+    (boneName: string) => dispatch(deleteSpringBoneParams(boneName)),
+    [dispatch]
+  )
+  const onResetSpringBoneParams: ActionFunction<typeof resetSpringBoneParams> = useCallback(
+    () => dispatch(resetSpringBoneParams()),
+    [dispatch]
+  )
 
   return (
     <RightPanel
@@ -71,10 +95,18 @@ const RightPanelContainer: React.FC<RightPanelContainerProps> = () => {
       campaignName={campaignName}
       isVrmOptOutEnabled={isVrmOptOutEnabled}
       isWearableUtilityEnabled={isWearableUtilityEnabled}
+      selectedBodyShape={selectedBodyShape}
+      bones={bones}
+      springBoneParams={springBoneParams}
       onSaveItem={onSaveItem}
       onDeleteItem={onDeleteItem}
       onOpenModal={onOpenModal}
       onDownload={onDownload}
+      onSpringBoneParamChange={onSpringBoneParamChange}
+      onAddSpringBoneParams={onAddSpringBoneParams}
+      onDeleteSpringBoneParams={onDeleteSpringBoneParams}
+      hasSpringBoneChanges={hasSpringBoneChanges}
+      onResetSpringBoneParams={onResetSpringBoneParams}
     />
   )
 }

src/components/ItemEditorPage/RightPanel/RightPanel.css

@@ -29,6 +29,7 @@
   overflow-y: auto;
   max-height: calc(100vh - 135px);
   flex: 1;
+  padding-bottom: 48px; /* Space for floating Help button */
 }
 
 .dcl.text-area {

src/components/ItemEditorPage/RightPanel/RightPanel.tsx

@@ -68,6 +68,7 @@ import Input from './Input'
 import Select from './Select'
 import MultiSelect from './MultiSelect'
 import Tags from './Tags'
+import SpringBonesSection from './SpringBonesSection'
 import { Props, State } from './RightPanel.types'
 import './RightPanel.css'
 
@@ -412,8 +413,9 @@ export default class RightPanel extends React.PureComponent<Props, State> {
   }
 
   handleOnSaveItem = async () => {
-    const { selectedItem, itemStatus, onSaveItem } = this.props
-    const { name, description, utility, rarity, contents, data, isDirty } = this.state
+    const { selectedItem, itemStatus, onSaveItem, hasSpringBoneChanges } = this.props
+    const { name, description, utility, rarity, contents, data, isDirty: isItemDirty } = this.state
+    const isDirty = isItemDirty || hasSpringBoneChanges
 
     if (isDirty && selectedItem) {
       let itemData = data
@@ -463,6 +465,12 @@ export default class RightPanel extends React.PureComponent<Props, State> {
     }
   }
 
+  handleResetButtonClick = () => {
+    const { onResetSpringBoneParams } = this.props
+    this.handleOnResetItem()
+    onResetSpringBoneParams()
+  }
+
   handleOpenThumbnailDialog = () => {
     const { selectedItem, onOpenModal } = this.props
 
@@ -746,9 +754,17 @@ export default class RightPanel extends React.PureComponent<Props, State> {
       isCampaignEnabled,
       isVrmOptOutEnabled,
       campaignName,
-      campaignTag
+      campaignTag,
+      selectedBodyShape,
+      bones,
+      springBoneParams,
+      onSpringBoneParamChange,
+      onAddSpringBoneParams,
+      onDeleteSpringBoneParams,
+      hasSpringBoneChanges
     } = this.props
-    const { name, description, utility, rarity, data, isDirty, hasItem } = this.state
+    const { name, description, utility, rarity, data, isDirty: isItemDirty, hasItem } = this.state
+    const isDirty = isItemDirty || hasSpringBoneChanges
     const rarities = Rarity.getRarities()
     const playModes = getEmotePlayModes()
 
@@ -1109,9 +1125,19 @@ export default class RightPanel extends React.PureComponent<Props, State> {
                         </div>
                       </Collapsable>
                     )}
+                    {item?.type === ItemType.WEARABLE && (
+                      <SpringBonesSection
+                        key={`${item?.id}-${selectedBodyShape}`} // Reset the component state when changing the item or body shape
+                        bones={bones}
+                        springBoneParams={springBoneParams}
+                        onParamChange={onSpringBoneParamChange}
+                        onAddSpringBoneParams={onAddSpringBoneParams}
+                        onDeleteSpringBoneParams={onDeleteSpringBoneParams}
+                      />
+                    )}
                     <div className="edit-buttons-container">
                       <div className="edit-buttons">
-                        <Button secondary onClick={this.handleOnResetItem} disabled={!isDirty || isLoading} loading={isLoading}>
+                        <Button secondary onClick={this.handleResetButtonClick} disabled={!isDirty || isLoading} loading={isLoading}>
                           {t('global.revert')}
                         </Button>
                         <NetworkButton

src/components/ItemEditorPage/RightPanel/RightPanel.types.ts

@@ -1,5 +1,5 @@
 import { Dispatch } from 'redux'
-import { Rarity } from '@dcl/schemas'
+import { BodyShape, Rarity } from '@dcl/schemas'
 import {
   deleteItemRequest,
   DeleteItemRequestAction,
@@ -10,6 +10,14 @@ import {
 } from 'modules/item/actions'
 import { Item, SyncStatus, WearableData, EmoteData } from 'modules/item/types'
 import { Collection } from 'modules/collection/types'
+import {
+  SetSpringBoneParamAction,
+  AddSpringBoneParamsAction,
+  DeleteSpringBoneParamsAction,
+  ResetSpringBoneParamsAction,
+  resetSpringBoneParams
+} from 'modules/editor/actions'
+import { BoneNode, SpringBoneParams } from 'modules/editor/types'
 import { openModal, OpenModalAction } from 'decentraland-dapps/dist/modules/modal/actions'
 
 export type Props = {
@@ -32,6 +40,14 @@ export type Props = {
   onDeleteItem: ActionFunction<typeof deleteItemRequest>
   onOpenModal: ActionFunction<typeof openModal>
   onDownload: ActionFunction<typeof downloadItemRequest>
+  selectedBodyShape: BodyShape
+  bones: BoneNode[]
+  springBoneParams: Record<string, SpringBoneParams>
+  onSpringBoneParamChange: (boneName: string, field: keyof SpringBoneParams, value: SpringBoneParams[typeof field]) => void
+  onAddSpringBoneParams: (boneName: string) => void
+  onDeleteSpringBoneParams: (boneName: string) => void
+  hasSpringBoneChanges: boolean
+  onResetSpringBoneParams: ActionFunction<typeof resetSpringBoneParams>
 }
 
 export type State = {
@@ -64,9 +80,32 @@ export type MapStateProps = Pick<
   | 'campaignName'
   | 'isVrmOptOutEnabled'
   | 'isWearableUtilityEnabled'
+  | 'selectedBodyShape'
+  | 'bones'
+  | 'springBoneParams'
+  | 'hasSpringBoneChanges'
+>
+export type MapDispatchProps = Pick<
+  Props,
+  | 'onSaveItem'
+  | 'onDeleteItem'
+  | 'onOpenModal'
+  | 'onDownload'
+  | 'onSpringBoneParamChange'
+  | 'onAddSpringBoneParams'
+  | 'onDeleteSpringBoneParams'
+  | 'onResetSpringBoneParams'
+>
+export type MapDispatch = Dispatch<
+  | SaveItemRequestAction
+  | DeleteItemRequestAction
+  | OpenModalAction
+  | DownloadItemRequestAction
+  | SetSpringBoneParamAction
+  | AddSpringBoneParamsAction
+  | DeleteSpringBoneParamsAction
+  | ResetSpringBoneParamsAction
 >
-export type MapDispatchProps = Pick<Props, 'onSaveItem' | 'onDeleteItem' | 'onOpenModal' | 'onDownload'>
-export type MapDispatch = Dispatch<SaveItemRequestAction | DeleteItemRequestAction | OpenModalAction | DownloadItemRequestAction>
 
 // New type for the functional component container
 export type RightPanelContainerProps = Omit<Props, keyof MapStateProps | keyof MapDispatchProps>