| 394 | } |
| 395 | |
| 396 | setupDetecting() { |
| 397 | const doc = this.contentDocument! |
| 398 | const { detecting, dragon } = this.designer |
| 399 | const hover = (e: MouseEvent) => { |
| 400 | if (!detecting.enable || this.designMode !== 'design') { |
| 401 | return |
| 402 | } |
| 403 | const nodeInstance = this.getNodeInstanceFromElement(e.target as Element) |
| 404 | if (nodeInstance?.node) { |
| 405 | const { node } = nodeInstance |
| 406 | detecting.capture(node) |
| 407 | } else { |
| 408 | detecting.capture(null) |
| 409 | } |
| 410 | if (dragon.dragging) { |
| 411 | e.stopPropagation() |
| 412 | } |
| 413 | } |
| 414 | const leave = () => { |
| 415 | this.project.currentDocument && detecting.leave(this.project.currentDocument) |
| 416 | } |
| 417 | |
| 418 | doc.addEventListener('mouseover', hover, true) |
| 419 | doc.addEventListener('mouseleave', leave, false) |
| 420 | |
| 421 | // TODO: refactor this line, contains click, mousedown, mousemove |
| 422 | doc.addEventListener( |
| 423 | 'mousemove', |
| 424 | (e: Event) => { |
| 425 | if (dragon.dragging) { |
| 426 | e.stopPropagation() |
| 427 | } |
| 428 | }, |
| 429 | true, |
| 430 | ) |
| 431 | } |
| 432 | |
| 433 | @action |
| 434 | setInstance(docId: string, id: string, instances: ComponentInstance[] | null) { |