Why my code doesn't work, just getter/setter, cause ui cannot listen the state change

[liuhuapiaoyuan]

Summary

Why my code doesn't work, just getter/setter, cause ui cannot listen the state change

import { Slider } from '@nextui-org/react'
import React, { useContext, useEffect, useRef, useState } from 'react'
import { twMerge } from 'tailwind-merge'
import { proxy, ref, useSnapshot } from 'valtio'
import { Drawer } from './lib/drawer'
import { WhiteboardStateContext } from './lib/model'

export type DrawContentProps = {
  className?: string
  style?: React.CSSProperties
}
export class WhiteboardState {
  /**
   * 尝试代理drawer
   */
  draw?: Drawer
  counter: number = 0

  constructor(data?: Partial<WhiteboardState>) {
    this.brushWidth = data?.brushWidth ?? 5
    this.brushColor = data?.brushColor ?? 'black'
    this.selectedShape = data?.selectedShape ?? 'null'
    this.draw = data?.draw
  }

  get brushWidth() {
    return this.draw?.brushWidth ?? 0
  }
  set brushWidth(width: number) {
    console.log('WhiteboardState', 'brushWidth', width, this.counter)
    if (this.draw) {
      this.draw.brushWidth = width
    }
  }
  get brushColor() {
    return this.draw?.brushColor ?? 'black'
  }
  set brushColor(brushColor: string) {
    if (this.draw) {
      this.draw.brushColor = brushColor
    }
  }
  get selectedShape() {
    return this.draw?.selectedShape ?? ''
  }
  set selectedShape(selectedShape: string) {
    if (this.draw) {
      this.draw.selectedShape = selectedShape
    }
  }
}

function PenSlider() {
  const model = useContext(WhiteboardStateContext)
  const state = useSnapshot(model)
  return (
    <Slider
      value={state.brushWidth}
      onChange={e => {
        model.brushWidth = e as number
      }}
    />
  )
}

function DrawContent(props: { draw: Drawer }) {
  const { draw } = props
  const state = useRef(proxy(new WhiteboardState({ draw: ref(draw) }))).current
  return (
    <WhiteboardStateContext.Provider value={state}>
      <>
        <div className='absolute left-0 top-0 h-full flex items-center'>
          <PenSlider />
        </div>
      </>
    </WhiteboardStateContext.Provider>
  )
}

export default function Whiteboard(props: DrawContentProps) {
  const { className, style } = props
  const canvansRef = React.useRef<HTMLCanvasElement>(null)
  const containerRef = React.useRef<HTMLDivElement>(null)
  const [draw, setDraw] = useState<Drawer>()

  useEffect(() => {
    if (!canvansRef.current || !containerRef.current) return
    const canvas = new Drawer(canvansRef.current, containerRef.current)
    setDraw(canvas)
    return () => {
      canvas.destroy()
      setDraw(undefined)
    }
  }, [canvansRef])

  return (
    <div
      ref={containerRef}
      className={twMerge('w-full relative h-full', className)}
      style={style}
    >
      <canvas ref={canvansRef} />
      {draw && <DrawContent draw={draw} />}
    </div>
  )
}

[dai-shi]

Can you create a minimal reproduction with stackblitz or something?

[dai-shi]

yeah, good point.

[liuhuapiaoyuan]

yeah, good point.

Any ideas?You can imagine a complex 3D Comer, a Figure Comer, that needs to be in the UI, what a common situation.

[liuhuapiaoyuan]

I think the ref mechanism is good,I'm also free to use the getter / setter

[dai-shi]

I think it's easier to create a method to update width.

[liuhuapiaoyuan]

Well, thank you very much.