awv3

gist.js

import { useStore, api } from '@awv3/session'
import { useMesh } from '@awv3/core'

// Store
const [useState, api] = create(set => {
  connections: {

  },
  create: (url) => {
    const id = guid()
    const client = new Client(url, id, api)
    set(state => connections[id] = client)
  }
})

// Reactive
function App() {
  const actions = useStore(state => state.actions)
  return (
    <button onClick={() => actions.create("localhost://box.of1")} >create connection</button>
    <Connections />
  )
}

function Connections() {
  const connections = useStore(state => state.connections)
  return connections.map(connection => <ConnectionTab id={connection.id} />)
}

function ConnectionTab(props) {
  const connection = useStore(state => state.connections[props.id])
  return null
}

function useGeom(id) {
  const [data, set] = useState({})
  const promise = parser(id)
  useEffect(() => {
    promise.then(([vertices, uv]) => set(vertices)
  }, [id])
  return data
}

const Solid({ id }) {
  const actions = useStore(state => state.actions)
  const selContext = useStore(state => state.selectionContext)
  const callback = e => actions.hover(e)
  const [selected] = useState(false)
  const [hovered] = useState(false)
  
  useEffect(() => {
    actions.update(id, selected, hovered)
  }, [selected, hovered])

  useEffect(() => {
    return () => {
      // removed ...
      actions.unselect()
    }
  }, [])

  // Fetch geometry
  const { vertices, indicies, normals } = useGeom(id)

  return (
    <mesh>
      <lines onHover={selContext.lines && callback} />
      <meshes />
    </mesh>
  )
}

const Product = ({ id }) => {
  const solids = useStore(state => state.connections[props.id].tree[...])



  return type === '' || type === 'AllObjects' ? null : (
    <group name={name}>
      {solids.map(solid => <primitive key={solid} object={connection.primitives[solid]} />)}
    </group>
  )
}

function Sketcher({ id }) {
  const feature = useStore(state => state.features[id])
}

// Vanilla javascript
api.subscribe(callback => ...)