new feature: behavior

[hookex]

new feature:

• add behaviors support
• add pointerDragBehavior story

line separator

It seems like that your computer is windows, so default line separator is \r\n.
This is why so much difference of the diff.
Maybe Unix and macOS (\n) is more general.

[brianzinn]

Thanks! Great new feature :) I will update readme with another contribution.
I'll have a look to see if we can use the interfaces Behavior<T> and BehaviorAware<T> - The playground is interesting. I think the drag'n'drop can maybe be done declaratively now 🥇

[brianzinn]

Thanks for finding the reason - I'll fix my line endings to be \n. I was using my mac before and lately I am on windows.

[brianzinn]

@hookex I am working on a new way to do reconciler diffs, so this will work once validateDrag is assigned - it's the drag'n'drop story done declaratively with the behaviors you added! :)

// insipiration demo: https://www.babylonjs.com/demos/dragndrop/dragdrop.js
const GROUND_SIZE = 1000;
const validateDrag = (targetPosition) => {
  let valid = true;
  if(targetPosition.x < -GROUND_SIZE/2){
    targetPosition.x = -GROUND_SIZE/2;
    valid = false;
  }

  if(targetPosition.x > GROUND_SIZE/2){
    targetPosition.x = GROUND_SIZE/2;
    valid = false;
  }

  // TODO: check also y
  return valid;
}

export default storiesOf('Babylon Basic', module)
  .add('Drag and Drop', () => (
    <Engine antialias adaptToDeviceRatio engineOptions={{ preserveDrawingBuffer: true, stencil: true }} canvasId='babylonJS'>
      <Scene clearColor={new Color3(0, 0, 0)}>
        <pointLight name='omni' position={new Vector3(0, 50, 0)} />

        <arcRotateCamera name='camera' alpha={0} beta={0} radius={10} target={Vector3.Zero()} setPosition={[new Vector3(20, 200, 400)]}
          lowerBetaLimit={0.1} upperBetaLimit={(Math.PI / 2) * 0.99} lowerRadiusLimit={150}
        />

        <ground name='ground' width={GROUND_SIZE} height={GROUND_SIZE} subdivisions={1}>
          <standardMaterial name='groundMat' specularColor={Color3.Black()} />
        </ground>

        <sphere name='red' diameter={20} segments={32} position={new Vector3(-100, 10, 0)}>
          <standardMaterial name='redMat' diffuseColor={new Color3(0.4, 0.4, 0.4)} specularColor={new Color3(0.4, 0.4, 0.4)} emissiveColor={Color3.Red()} />
          <pointerDragBehavior dragPlaneNormal={new Vector3(0,1,0)} validateDrag={validateDrag} />
        </sphere>

        <box name='green' size={20} position={new Vector3(0, 11, -100)}>
          <standardMaterial name='greenMat' diffuseColor={new Color3(0.4, 0.4, 0.4)} specularColor={new Color3(0.4, 0.4, 0.4)} emissiveColor={Color3.Green()} />
          <pointerDragBehavior dragPlaneNormal={new Vector3(0,1,0)} validateDrag={validateDrag} />
        </box>

        <box name='blue' size={20} position={new Vector3(100, 11, 0)}>
          <standardMaterial name='greenMat' diffuseColor={new Color3(0.4, 0.4, 0.4)} specularColor={new Color3(0.4, 0.4, 0.4)} emissiveColor={Color3.Blue()} />
          <pointerDragBehavior dragPlaneNormal={new Vector3(0,1,0)} validateDrag={validateDrag} />
        </box>

        <torus name='torus' diameter={30} thickness={10} tesselation={32} position={new Vector3(0, 10, 100)}>
          <standardMaterial name='torusMat' diffuseColor={new Color3(0.4, 0.4, 0.4)} specularColor={new Color3(0.4, 0.4, 0.4)} emissiveColor={Color3.Purple()} />
          <pointerDragBehavior dragPlaneNormal={new Vector3(0,1,0)} validateDrag={validateDrag} />
        </torus>
      </Scene>
    </Engine>
  ))

[hookex]

@brianzinn Great job! :)