refactor: scroll delegate & resize delegate by evtd

package.json

@@ -81,6 +81,7 @@
     "async-validator": "^1.11.5",
     "css-render": "^0.11.1",
     "date-fns": "^2.9.0",
+    "evtd": "^0.0.1-alpha.0",
     "highlight.js": "^9.18.1",
     "lodash-es": "^4.17.15",
     "treemate": "^0.1.9",

src/_base/index.js

@@ -1,3 +1,2 @@
-export { default as WindowResizeObserver } from './window-resize-observer'
 export { default as Teleport } from './teleport'
 export { default as LazyTeleport } from './lazy-teleport'

src/_base/window-resize-observer/index.js

@@ -1 +0,0 @@
-export { default } from './src/WindowResizeObserver.js'

src/_base/window-resize-observer/src/WindowResizeObserver.js

@@ -1,28 +0,0 @@
-import resizeDelegate from '../../../_utils/delegate/resizeDelegate'
-
-export default {
-  name: 'WindowResizeObserver',
-  props: {
-    onResize: {
-      type: Function,
-      default: undefined
-    }
-  },
-  mounted () {
-    resizeDelegate.registerHandler(this.handleResize)
-  },
-  beforeUnmount () {
-    resizeDelegate.unregisterHandler(this.handleResize)
-  },
-  methods: {
-    handleResize () {
-      const {
-        onResize
-      } = this
-      if (onResize) onResize()
-    }
-  },
-  render () {
-    return null
-  }
-}

src/_mixins/placeable/index.js

@@ -1,6 +1,5 @@
 import { nextTick } from 'vue'
-import scrollDelegate from '../../_utils/delegate/scrollDelegate'
-import resizeDelegate from '../../_utils/delegate/resizeDelegate'
+import { on, off } from 'evtd'
 import getScrollParent from '../../_utils/dom/get-scroll-parent'
 import { warn } from '../../_utils/naive/warn'
 import {
@@ -275,7 +274,7 @@ export default {
       el.setAttribute('n-suggested-transform-origin', transformOrigin)
     },
     __addResizeListener () {
-      resizeDelegate.registerHandler(this.__placeableSyncPosition)
+      on('resize', window, this.__placeableSyncPosition)
     },
     __addScrollListeners () {
       let currentElement = this.__getTrackedElement()
@@ -285,15 +284,15 @@ export default {
         this.__placeableScrollListeners.push([currentElement, this.__placeableSyncPosition])
       }
       for (const [el, handler] of this.__placeableScrollListeners) {
-        scrollDelegate.registerHandler(el, handler)
+        on('scroll', el, handler, true)
       }
     },
     __removeResizeListener () {
-      resizeDelegate.unregisterHandler(this.__placeableSyncPosition)
+      off('resize', window, this.__placeableSyncPosition)
     },
     __removeScrollListeners () {
       for (const [el, handler] of this.__placeableScrollListeners) {
-        scrollDelegate.unregisterHandler(el, handler)
+        off('scroll', el, handler, true)
       }
       this.__placeableScrollListeners = []
     }

src/_utils/delegate/resizeDelegate.js

@@ -1,48 +0,0 @@
-class ResizeDelegate {
-  constructor () {
-    if (__DEV__) {
-      console.debug('[ResizeDelegate]: Ctor called')
-    }
-    this.handlers = []
-    this.handleResize = this.handleResize.bind(this)
-  }
-
-  handleResize (e) {
-    const handlers = this.handlers
-    if (handlers.length) {
-      for (const handler of handlers) {
-        handler(e)
-      }
-    }
-  }
-
-  unregisterHandler (handler) {
-    const handlers = this.handlers
-    if (handlers.length) {
-      // console.debug(handler)
-      const handlerIndex = handlers.findIndex(h => handler === h)
-      // console.debug(handlerIndex)
-      if (~handlerIndex) {
-        handlers.splice(handlerIndex, 1)
-      }
-    }
-    if (!handlers.length) {
-      if (__DEV__) {
-        console.debug('[ResizeDelegate]: remove resize handler from window')
-      }
-      window.removeEventListener('resize', this.handleResize, true)
-    }
-  }
-
-  registerHandler (handler) {
-    if (!this.handlers.length) {
-      if (__DEV__) {
-        console.debug('[ResizeDelegate]: add resize handler to window')
-      }
-      window.addEventListener('resize', this.handleResize, true)
-    }
-    this.handlers.push(handler)
-  }
-}
-
-export default new ResizeDelegate()

src/_utils/delegate/scrollDelegate.js

@@ -1,59 +0,0 @@
-class ScrollDelegate {
-  constructor () {
-    if (__DEV__) {
-      console.debug('[ScrollDelegate]: Ctor called')
-    }
-    this.handlers = new Map()
-    this.handlerCount = 0
-    this.handleScroll = this.handleScroll.bind(this)
-  }
-
-  handleScroll (e) {
-    const handlers = this.handlers.get(e.target)
-    if (handlers) {
-      for (const handler of handlers) {
-        handler(e)
-      }
-    }
-  }
-
-  unregisterHandler (el, handler) {
-    const handlers = this.handlers.get(el)
-    if (handlers) {
-      // console.debug(handler)
-      const handlerIndex = handlers.findIndex(h => handler === h)
-      // console.debug(handlerIndex)
-      if (~handlerIndex) {
-        handlers.splice(handlerIndex, 1)
-        --this.handlerCount
-      }
-      if (!handlers.length) {
-        this.handlers.delete(el)
-      }
-    }
-    if (!this.handlerCount) {
-      if (__DEV__) {
-        console.debug('[ScrollDelegate]: remove handler from window')
-      }
-      window.removeEventListener('scroll', this.handleScroll, true)
-      this.handlers = new Map()
-    }
-  }
-
-  registerHandler (el, handler) {
-    if (!this.handlerCount) {
-      if (__DEV__) {
-        console.debug('[ScrollDelegate]: add handler to window')
-      }
-      window.addEventListener('scroll', this.handleScroll, true)
-    }
-    ++this.handlerCount
-    if (this.handlers.get(el)) {
-      this.handlers.get(el).push(handler)
-    } else {
-      this.handlers.set(el, [handler])
-    }
-  }
-}
-
-export default new ScrollDelegate()