想必家都做過 DoTO list

今天來做一個 3D 的 DoTO list 來作為場景模型管理器吧？

import React from 'react'

export default function ListItem(props) {
  const { name, position, done } = props.todo
  return (
    <li style={{ textDecoration: done ? 'line-through' : '' }}>
      {name}
      {position.x}
      {position.y}
      {position.z}
      {!done ? <button onClick={props.completed}>Completed</button> : ''}
      <button onClick={props.remove}>Remove</button>
    </li>
  )
}

import React from 'react'

export default function Form(props) {
  return (
    <form onSubmit={props.onSubmit} style={{ paddingLeft: 40, marginTop: 16 }}>
      <input type="text" value={props.value} onChange={props.onChange} placeholder="Ex.: meeting at 4:20" />
      <input type="number" value={props.value_x} onChange={props.onChange_x} placeholder="x:0" />
      <input type="number" value={props.value_y} onChange={props.onChange_y} placeholder="y:0" />
      <input type="number" value={props.value_z} onChange={props.onChange_z} placeholder="z:0" />
      <input type="text" value={props.value_gltf} onChange={props.onChange_gltf} placeholder="url" />
      <button type="submit">Add ToDo</button>
    </form>
  )
}

新增ＵＩ

<div style={{ position: 'absolute', top: 40, left: 40 /*display: 'none' */ }}>
        <Fragment>
          <button
            onClick={() => {
              const newArr = todos.slice()
              newArr.splice(0, 0, tasks_B[0])
              setTodos(newArr)
            }}>
            Add B1
          </button>
          <button
            onClick={() => {
              const newArr = todos.slice()
              newArr.splice(0, 0, tasks_B[1])
              setTodos(newArr)
            }}>
            Add B2
          </button>
          <button
            onClick={() => {
              const newArr = todos.slice()
              newArr.splice(0, 0, tasks_B[2])
              setTodos(newArr)
            }}>
            Add B3
          </button>

          <Form
            onSubmit={_handleSubmit}
            value={inputValue}
            value_x={inputValue_x}
            value_y={inputValue_y}
            value_z={inputValue_z}
            value_gltf={inputValue_gltf}
            onChange={(e) => setInputValue(e.target.value)}
            onChange_x={(e) => setInputValue_x(e.target.value_x)}
            onChange_y={(e) => setInputValue_y(e.target.value_y)}
            onChange_z={(e) => setInputValue_z(e.target.value_z)}
            onChange_gltf={(e) => setInputValue_gltf(e.target.value_gltf)}
          />
          <ul>
            {todos.map((todo, index, position) => (
              <ListItem
                key={index}
                todo={todo}
                position={position}
                remove={() => _handleBntClick({ type: 'remove', index })}
                completed={() => _handleBntClick({ type: 'completed', index })}
              />
            ))}
          </ul>
        </Fragment>
      </div>