feat: ✨ passive event

examples/x6-example-features/src/pages/connector/multi.tsx

@@ -13,6 +13,7 @@ export default class Example extends React.Component {
   componentDidMount() {
     const graph = new Graph({
       container: this.container,
+      mousewheel: true,
       grid: true,
       width: 1000,
       height: 600,

packages/x6/src/graph/mousewheel.ts

@@ -1,5 +1,4 @@
 import JQuery from 'jquery'
-import 'jquery-mousewheel'
 import { Dom, Platform } from '../util'
 import { ModifierKey } from '../types'
 import { Disposable, IDisablable } from '../common'

packages/x6/src/util/index.ts

@@ -1,4 +1,5 @@
 import $ from 'jquery'
+import './polyfill'
 
 export * from './lang'
 export * from './array'

packages/x6/src/util/platform/index.ts

@@ -54,7 +54,9 @@ export namespace Platform {
       },
     })
     const div = document.createElement('div')
-    div.addEventListener('click', () => {}, options)
+    if (div.addEventListener) {
+      div.addEventListener('click', () => {}, options)
+    }
   } catch (err) {}
 
   /**

packages/x6/src/util/polyfill/index.ts

@@ -0,0 +1,25 @@
+import JQuery from 'jquery'
+import 'jquery-mousewheel'
+import { Platform } from '../platform'
+
+if (Platform.SUPPORT_PASSIVE) {
+  JQuery.event.special.touchstart = {
+    setup(data, ns, handle) {
+      this.addEventListener('touchstart', handle as any, {
+        passive: true,
+      })
+    },
+  }
+
+  const hook = JQuery.event.special.mousewheel as any
+  const setup = hook.setup
+
+  hook.setup = function (this: EventTarget) {
+    const addEventListener = this.addEventListener
+    this.addEventListener = (name: string, handler: any) => {
+      addEventListener.call(this, name, handler, { passive: true })
+    }
+    setup.call(this)
+    this.addEventListener = addEventListener
+  }
+}