Merge values from collector function into Node

Is your feature request related to a problem? Please describe.

I want to use a value returned from useNode’s hook collector function in a canDrag rule, but since it’s available only in the hook’s returned object, I am forced to declare and run the calculations at multiple places.

Describe the solution you’d like

The values returned from useNode’s hook collector function are useful even outside of the components scope. It would be handy if they were merged into the Node itself.

const Hero = ({ title, ...rest }) => {
  const { connectors: { connect, drag }, setProp, tainted } = useNode(node => ({
    tainted: node.data.props.newTitle && title !== node.data.props.newTitle }
  }));
  return (
    <div>
      <h2>Edit me!</h2>
      <p contentEditable={true} onKeyUp={(e) => {
        setProp(props => {
          props.newTitle = e.target.innerText;
        })
      }}>{title}</p>
      <p style={{color: tainted ? 'black' : 'green'}}>{rest.newTitle}</p>
      <button ref={ref => connect(drag(ref))}>{tainted ? 'Drag me?' : "Don't touchme!"}</button>
    </div>
  )
}
Hero.craft = {
  defaultProps: {
    title: 'Sphinx of black quartz judge my vow!'
  },
  rules: {
    canDrag: node => node.data.someFittingPropertyName.tainted
  }
}

Additional context

At first I thought that node.data.custom might contain it, but it’s always empty.

[prevwong]

This is similar to the Container and Card component in the Basic Tutorial.

const Hero = ({title}) => {
  // i 
  const { isSelected } = useNode((node) => ({ isSelected: node.events.selected }));
  return (
    <TextWrapper title={title}  heroIsSelected={isSelected} />
  )
}

const TextWrapper = ({title, heroIsSelected}) => {
   const { isSelected } = useNode((node) => ({ isSelected: node.events.selected }));
   
   // ii, Since TextWrapper is still under the same Node context as Hero, 
   // we have access to exact same Node as Hero
   const test = heroIsSelected == isSelected; // true

   return (
     ...
   )
}

Let’s say our TextWrapper component were to specify a slightly different collector function:

useNode(node => ({ isSelected: node.events.selected && node.events.dragged}))

Now, based on your proposal, if we were to save the collected values to the Node itself, the collected values in TextComponent will override the ones made by Hero

[prevwong]

Merging the collected values into the Node would not be ideal, since child components would share the same Node context, thus they would also be able to use the useNode hook and their collected values will be merged into the Node as well.

Instead, you could consider using custom values which is something like state values but for the Node itself. (I just realized I forgot to document how to use this, so thank you again! 🤣 🙈 )

Basically, like this:

const Hero = () => {
  // 1. get the custom value from the collector
  const { tainted, id  } = useNode(node => ({ 
   tainted: node.data.custom.tainted
  });

 // 2. get the setCustom action from the useEditor
 // p.s. I will probably add this action into the useNode() in one of the next releases 
 // so you don't have to get it from the useEditor() next time
  const { actions: {setCustom} } = useEditor();

 return (
  <a onClick={() => setCustom(id, custom => custom.tainted = !custom.tainted )}>
     Toggle Tainted 
   </a>
 );
}

Hero.craft = {
  custom : { 
    tainted: false
  },
 rules: {
    canDrag: (node) => !node.data.custom.tainted
 }
}