Startseite Erkunden Hilfe
Registrieren Anmelden
linjinyu
/
g6
Mirror von https://gitee.com/antvis/g6.git
1
0
Fork 0
Dateien Issues 0 Wiki
Quellcode durchsuchen

fix(event): fix clone event method, add it to util

yilin.qyl vor 6 Jahren
Ursprung
ac15ab88f0
Commit
eacd854efd
4 geänderte Dateien mit 33 neuen und 74 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 0 58
      demos/viewport-fitView.html
  2. 17 8
      src/behavior/drag-canvas.js
  3. 4 6
      src/graph/controller/event.js
  4. 12 2
      src/util/base.js

+ 0 - 58
demos/viewport-fitView.html
Datei anzeigen 

@@ -1,58 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-
 
-<head>
 
-  <meta charset="UTF-8">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
-  <title>视口-自适应</title>
 
-</head>
 
-
 
-<body>
 
-  适应视口：
 
-  <button class="fitView">tl</button>
 
-  <button class="fitView">tc</button>
 
-  <button class="fitView">tr</button>
 
-  <button class="fitView">cc</button>
 
-  <button class="fitView">lc</button>
 
-  <button class="fitView">rc</button>
 
-  <button class="fitView">bl</button>
 
-  <button class="fitView">bc</button>
 
-  <button class="fitView">br</button>
 
-  <button class="fitView">autoZoom</button>
 
-  <div id="mountNode"></div>
 
-  <script src="../build/g6.js"></script>
 
-  <script>
 
-    const data = {
 
-      nodes: [{
 
-        id: 'node1',
 
-        x: 100,
 
-        y: 200
 
-      }, {
 
-        id: 'node2',
 
-        x: 300,
 
-        y: 200
 
-      }],
 
-      edges: [{
 
-        id: 'edge1',
 
-        target: 'node2',
 
-        source: 'node1'
 
-      }]
 
-    };
 
-    const graph = new G6.Graph({
 
-      container: 'mountNode',
 
-      fitView: 'cc',
 
-      height: window.innerHeight,
 
-      fitView: 'cc'
 
-    });
 
-    graph.read(data);
 
-    const buttons = document.getElementsByClassName('fitView');
 
-    for (let index = 0; index < buttons.length; index++) {
 
-      const button = buttons[index];
 
-      button.onclick = () => {
 
-        graph.setFitView(button.innerHTML);
 
-      };
 
-    }
 
-  </script>
 
-</body>
 
-</html>

+ 17 - 8
src/behavior/drag-canvas.js
Datei anzeigen 

@@ -1,3 +1,7 @@
 
+const Util = require('../util');
 
+const abs = Math.abs;
 
+const DRAG_OFFSET = 10;
 
+
 
 module.exports = {
 
   getDefaultCfg() {
 
     return {
 
@@ -34,19 +38,22 @@ module.exports = {
 
     this.graph.paint();
 
   },
 
   onMouseDown(e) {
 
-    if (this.shouldBegin.call(this, e)) {
 
-      this.origin = { x: e.clientX, y: e.clientY };
 
-      this.dragging = false;
 
-    }
 
+    this.origin = { x: e.clientX, y: e.clientY };
 
+    this.dragging = false;
 
   },
 
   onMouseMove(e) {
 
+    e = Util.cloneEvent(e);
 
     const graph = this.graph;
 
     if (!this.origin) { return; }
 
     if (this.origin && !this.dragging) {
 
-      e.type = 'dragstart';
 
-      graph.emit('canvas:dragstart', e);
 
-      this.dragging = true;
 
-      return;
 
+      if (abs(this.origin.x - e.clientX) + abs(this.origin.y - e.clientY) < DRAG_OFFSET) {
 
+        return;
 
+      }
 
+      if (this.shouldBegin.call(this, e)) {
 
+        e.type = 'dragstart';
 
+        graph.emit('canvas:dragstart', e);
 
+        this.dragging = true;
 
+      }
 
     }
 
     if (this.dragging) {
 
       e.type = 'drag';
 
@@ -58,8 +65,10 @@ module.exports = {
 
   },
 
   onMouseUp(e) {
 
     if (!this.dragging) {
 
+      this.origin = null;
 
       return;
 
     }
 
+    e = Util.cloneEvent(e);
 
     const graph = this.graph;
 
     if (this.shouldEnd.call(this, e)) {
 
       this.updateViewport(e);

+ 4 - 6
src/graph/controller/event.js
Datei anzeigen 

@@ -1,5 +1,4 @@
 
 const Util = require('../../util');
 
-const EventObject = require('@antv/g').Event;
 
 
 const EVENTS = [
 
   'click',
 
@@ -32,10 +31,6 @@ function getItemRoot(shape) {
 
   return shape;
 
 }
 
 
-function cloneEvent(e) {
 
-  return new EventObject(e.type, e, true, true);
 
-}
 
-
 
 class Event {
 
   constructor(graph) {
 
     this.graph = graph;
 
@@ -65,8 +60,11 @@ class Event {
 
     const self = this;
 
     const graph = self.graph;
 
     const canvas = graph.get('canvas');
 
+    const pixelRatio = canvas.get('pixelRatio');
 
     const target = e.target;
 
     const eventType = e.type;
 
+    e.x /= pixelRatio;
 
+    e.y /= pixelRatio;
 
     // 事件currentTarget是graph
 
     e.currentTarget = graph;
 
     if (target === canvas) {
 
@@ -114,7 +112,7 @@ class Event {
 
     const item = e.target === canvas ? null : e.item;
 
     const preItem = this.preItem;
 
     // 避免e的type与触发的事件不同
 
-    e = cloneEvent(e);
 
+    e = Util.cloneEvent(e);
 
     // 从前一个item直接移动到当前item，触发前一个item的leave事件
 
     if (preItem && preItem !== item) {
 
       e.item = preItem;

+ 12 - 2
src/util/base.js
Datei anzeigen 

@@ -1,4 +1,4 @@
 
-
 
+const Event = require('@antv/g').Event;
 
 const BaseUtil = {
 
   deepMix: require('@antv/util/lib/deep-mix'),
 
   mix: require('@antv/util/lib/mix'),
 
@@ -23,7 +23,6 @@ const BaseUtil = {
 
   extend: require('@antv/util/lib/extend'),
 
   augment: require('@antv/util/lib/augment'),
 
   remove: require('@antv/util/lib/array/remove'),
 
-
 
   /**
 
    * turn padding into [top, right, bottom, right]
 
    * @param  {Number|Array} padding input padding
 
@@ -44,6 +43,17 @@ const BaseUtil = {
 
       left = !BaseUtil.isNil(padding[3]) ? padding[3] : right;
 
     }
 
     return [ top, right, bottom, left ];
 
+  },
 
+  cloneEvent(e) {
 
+    const event = new Event(e.type, e, true, true);
 
+    event.clientX = e.clientX;
 
+    event.clientY = e.clientY;
 
+    event.x = e.x;
 
+    event.y = e.y;
 
+    event.target = e.target;
 
+    event.currentTarget = e.currentTarget;
 
+    event.item = e.item;
 
+    return event;
 
   }
 
 };