fix(core): fix event driver conflict

packages/core/src/externals.ts

@@ -1,4 +1,5 @@
 import { isFn, isArr } from '@designable/shared'
+import { untracked } from '@formily/reactive'
 import { DEFAULT_DRIVERS, DEFAULT_EFFECTS, DEFAULT_SHORTCUTS } from './presets'
 import { Engine, TreeNode } from './models'
 import {
@@ -70,10 +71,13 @@ export const createDesigner = (props: IEngineProps<Engine> = {}) => {
   const drivers = props.drivers || []
   const effects = props.effects || []
   const shortcuts = props.shortcuts || []
-  return new Engine({
-    ...props,
-    effects: [...effects, ...DEFAULT_EFFECTS],
-    drivers: [...drivers, ...DEFAULT_DRIVERS],
-    shortcuts: [...shortcuts, ...DEFAULT_SHORTCUTS],
-  })
+  return untracked(
+    () =>
+      new Engine({
+        ...props,
+        effects: [...effects, ...DEFAULT_EFFECTS],
+        drivers: [...drivers, ...DEFAULT_DRIVERS],
+        shortcuts: [...shortcuts, ...DEFAULT_SHORTCUTS],
+      })
+  )
 }

packages/core/src/models/Engine.ts

@@ -84,7 +84,7 @@ export class Engine extends Event {
   }
 
   unmount() {
-    this.detachEvents(window)
+    this.detachEvents()
   }
 
   static defaultProps: IEngineProps<Engine> = {

packages/react/src/containers/Viewport.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { usePrefix, useViewport } from '../hooks'
 import { AuxToolWidget, EmptyWidget } from '../widgets'
+import { Viewport as ViewportType } from '@designable/core'
 import { requestIdle } from '@designable/shared'
 import cls from 'classnames'
 export interface IViewportProps
@@ -16,10 +17,14 @@ export const Viewport: React.FC<IViewportProps> = ({
   const prefix = usePrefix('viewport')
   const viewport = useViewport()
   const ref = useRef<HTMLDivElement>()
+  const viewportRef = useRef<ViewportType>()
   const isFrameRef = useRef(false)
   useEffect(() => {
     const frameElement = ref.current.querySelector('iframe')
     if (!viewport) return
+    if (viewportRef.current && viewportRef.current !== viewport) {
+      viewportRef.current.onUnmount()
+    }
     if (frameElement) {
       frameElement.addEventListener('load', () => {
         viewport.onMount(frameElement, frameElement.contentWindow)
@@ -35,10 +40,12 @@ export const Viewport: React.FC<IViewportProps> = ({
         setLoaded(true)
       })
     }
+    viewportRef.current = viewport
     return () => {
       viewport.onUnmount()
     }
   }, [viewport])
+
   return (
     <div
       {...props}

packages/react/src/widgets/GhostWidget/index.tsx

@@ -22,7 +22,7 @@ export const GhostWidget = observer(() => {
         if (!ref.current) return
         ref.current.style.transform = transform
       }),
-    []
+    [designer, cursor]
   )
   const renderNodes = () => {
     return (

packages/react/src/widgets/OutlineWidget/index.tsx

@@ -4,7 +4,7 @@ import { useTree, usePrefix, useOutline, useWorkbench } from '../../hooks'
 import { observer } from '@formily/reactive-react'
 import { OutlineTreeNode } from './OutlineNode'
 import { Insertion } from './Insertion'
-import { TreeNode } from '@designable/core'
+import { TreeNode, Viewport } from '@designable/core'
 import { NodeContext } from './context'
 
 export interface IOutlineTreeWidgetProps {
@@ -24,16 +24,20 @@ export const OutlineTreeWidget: React.FC<IOutlineTreeWidgetProps> = observer(
     const workspaceId = current?.id
     const tree = useTree(workspaceId)
     const outline = useOutline(workspaceId)
-
+    const outlineRef = useRef<Viewport>()
     useLayoutEffect(() => {
       if (!workspaceId) return
+      if (outlineRef.current && outlineRef.current !== outline) {
+        outlineRef.current.onUnmount()
+      }
       if (ref.current && outline) {
         outline.onMount(ref.current, window)
       }
+      outlineRef.current = outline
       return () => {
         outline.onUnmount()
       }
-    }, [workspaceId])
+    }, [workspaceId, outline])
 
     if (!outline || !workspaceId) return null
     return (

packages/shared/src/event.ts

@@ -181,15 +181,6 @@ export class EventDriver<Engine extends Event = Event, Context = any>
       constructor[EVENTS_ONCE_SYMBOL] = constructor[EVENTS_ONCE_SYMBOL] || {}
       const handler = target[EVENTS_ONCE_SYMBOL][type]
       const container = constructor[EVENTS_ONCE_SYMBOL][type]
-      const removeContainer = () => {
-        if (!container) return
-        container.removeEventListener(
-          type,
-          container[EVENTS_ONCE_SYMBOL][type],
-          options
-        )
-        delete container[EVENTS_ONCE_SYMBOL][type]
-      }
       if (!handler) {
         if (container) {
           if (options.mode === 'onlyChild') {
@@ -232,7 +223,10 @@ export class EventDriver<Engine extends Event = Event, Context = any>
   removeEventListener(type: any, listener: any, options?: any) {
     const target = this.eventTarget(type)
     if (isOnlyMode(options?.mode)) {
+      const constructor = this['constructor']
+      constructor[EVENTS_ONCE_SYMBOL] = constructor[EVENTS_ONCE_SYMBOL] || {}
       target[EVENTS_ONCE_SYMBOL] = target[EVENTS_ONCE_SYMBOL] || {}
+      delete constructor[EVENTS_ONCE_SYMBOL][type]
       delete target[EVENTS_ONCE_SYMBOL][type]
       target.removeEventListener(type, listener, options)
     } else {
@@ -342,14 +336,13 @@ export class Event extends Subscribable<ICustomEvent<any>> {
       return this.attachEvents(container.document, container, context)
     }
     if (container[ATTACHED_SYMBOL]) return
-    this.drivers.map((EventDriver) => {
+    container[ATTACHED_SYMBOL] = this.drivers.map((EventDriver) => {
       const driver = new EventDriver(this, context)
       driver.contentWindow = contentWindow
       driver.container = container
       driver.attach(container)
       return driver
     })
-    container[ATTACHED_SYMBOL] = true
     if (!this.containers.includes(container)) {
       this.containers.push(container)
     }
@@ -366,6 +359,9 @@ export class Event extends Subscribable<ICustomEvent<any>> {
       return this.detachEvents(container.document)
     }
     if (!container[ATTACHED_SYMBOL]) return
+    container[ATTACHED_SYMBOL].forEach((driver) => {
+      driver.detach(container)
+    })
     env.ALL_EVENT_DRIVERS = env.ALL_EVENT_DRIVERS.reduce((drivers, driver) => {
       if (driver.container === container) {
         driver.detach(container)