Hufe921 / canvas-editor

rich text editor by canvas/svg
https://hufe.club/canvas-editor-docs
MIT License
3.47k stars 506 forks source link

鼠标交互样式变化 #739

Closed biubiubiu-max closed 1 month ago

biubiubiu-max commented 1 month ago

What problem does this feature solve?

目前鼠标样式时在canvas上直接添加了cursor:text,但是当鼠标悬浮到checkbox控件元素上鼠标是不能变成pointer点击样式的,期望够获得在配置节点过程中指定鼠标样式。

What does the proposed API look like?

配置节点时候提供对鼠标样式控制。

Hufe921 commented 1 month ago

可以考虑这样实现:

.ce-page-container canvas {
  cursor: inherit !important;
}
  const editorDom = instance.command.getContainer()
  instance.eventBus.on(
    'mousemove',
    debounce(evt => {
      const positionContext = instance.command.getPositionContextByEvent(evt)
      if (
        positionContext?.element?.controlComponent === ControlComponent.CHECKBOX
      ) {
        editorDom.style.cursor = 'pointer'
      } else {
        editorDom.style.cursor = 'text'
      }
    }, 10)
  )

结合实际需求,进行光标设置。注意性能问题