@antv/g - npm Package Compare versions

Comparing version 3.4.0-beta.1 to 3.4.0-beta.2

lib/canvas.js

 var Util = require('./util/index');
 
-var Event = require('./core/event');
+var Event = require('./core/mixin/event');
 
@@ -5,0 +5,0 @@ var Group = require('./core/group');

lib/core/element.js

@@ -9,3 +9,3 @@ var Util = require('../util/index');
 
-var EventEmitter = require('./mixin/event');
+var EventEmitter = require('./event-emitter');
 
@@ -17,4 +17,3 @@ var Element = function Element(cfg) {
     visible: true,
-    destroyed: false,
-    _events: {}
+    destroyed: false
   }; // 配置存放地
@@ -21,0 +20,0 @@

lib/core/mixin/event.js

@@ -1,121 +0,149 @@
-var Util = require('../../util/common');
+var Util = require('../../util/index');
 
 var Event = require('../../event');
 
-var PROPOGATE_EVENTS = ['click', 'mousedown', 'mouseup', 'dblclick', 'contextmenu', 'mouseout', 'mouseover', 'mousemove', 'dragstart', 'drag', 'dragend', 'dragenter', 'dragleave', 'drop'];
-var slice = Array.prototype.slice;
+var EVENTS = ['click', 'mousedown', 'mouseup', 'dblclick', 'contextmenu', 'mouseenter', 'mouseout', 'mouseover', 'mousemove', 'mouseleave'];
+var preShape = null;
+var mousedown = null;
+var dragging = null;
+module.exports = {
+  registerEvent: function registerEvent() {
+    var self = this;
+    var el = this.get('el');
+    Util.each(EVENTS, function (evt) {
+      el.addEventListener(evt, function (e) {
+        self._triggerEvent(evt, e);
+      }, false);
+    }); // special cases
 
-function indexOfCallback(events, callback) {
-  var i = events.length;
+    el.addEventListener('touchstart', function (e) {
+      if (!Util.isEmpty(e.touches)) {
+        self._triggerEvent('touchstart', e.touches[0]);
+      }
+    }, false);
+    el.addEventListener('touchmove', function (e) {
+      if (!Util.isEmpty(e.touches)) {
+        self._triggerEvent('touchmove', e.touches[0]);
+      }
+    }, false);
+    el.addEventListener('touchend', function (e) {
+      if (!Util.isEmpty(e.changedTouches)) {
+        self._triggerEvent('touchend', e.changedTouches[0]);
+      }
+    }, false);
+  },
+  _getEmitter: function _getEmitter(element, event) {
+    if (element) {
+      if (Util.isEmpty(element._getEvents())) {
+        var parent = element.get('parent');
 
-  while (i--) {
-    if (events[i].callback === callback) {
-      return i;
+        if (parent && !event.propagationStopped) {
+          return this._getEmitter(parent, event);
+        }
+      } else {
+        return element;
+      }
     }
-  }
+  },
+  _getEventObj: function _getEventObj(type, e, point, target) {
+    var event = new Event(type, e, true, true);
+    event.x = point.x;
+    event.y = point.y;
+    event.clientX = e.clientX;
+    event.clientY = e.clientY;
+    event.currentTarget = target;
+    event.target = target;
+    return event;
+  },
+  _triggerEvent: function _triggerEvent(type, e) {
+    var point = this.getPointByClient(e.clientX, e.clientY);
+    var shape = this.getShape(point.x, point.y, e);
+    var el = this.get('el'); // svg原生事件取不到dragover, dragout, drop等事件的对象。这边需要走数学拾取。
 
-  return -1;
-}
+    if (dragging && this.getRenderer() === 'svg') {
+      shape = this.getShape(point.x, point.y);
+    }
 
-module.exports = {
-  on: function on(evt, callback, one) {
-    var self = this;
+    if (type === 'mousemove') {
+      if (preShape && preShape !== shape) {
+        this._emitEvent('mouseout', e, point, preShape);
 
-    if (!Util.isFunction(callback)) {
-      throw new TypeError('listener should be a function');
-    }
+        this._emitEvent('mouseleave', e, point, preShape);
 
-    if (!self._cfg._events) {
-      self._cfg._events = {};
-    }
+        if (dragging) {
+          this._emitEvent('dragleave', e, point, preShape);
+        }
 
-    if (!self._cfg._events[evt]) {
-      self._cfg._events[evt] = [];
-    }
+        if (!preShape.destroyed && !preShape.removed) {
+          el.style.cursor = preShape.attr('cursor') || 'default';
+        }
+      } // 拖拽过程中不会触发mousemove事件
 
-    self._cfg._events[evt].push({
-      callback: callback,
-      one: one
-    });
 
-    return this;
-  },
-  one: function one(evt, callback) {
-    this.on(evt, callback, true);
-    return this;
-  },
-  emit: function emit(evt) {
-    if (this.removed || this.destroyed) {
-      return;
-    }
+      if (dragging) {
+        this._emitEvent('drag', e, point, dragging);
+      }
 
-    var events = this._cfg._events[evt];
+      if (shape) {
+        if (!dragging) {
+          if (mousedown === shape) {
+            dragging = shape;
+            mousedown = null;
 
-    if (Util.isEmpty(events)) {
-      return;
-    }
+            this._emitEvent('dragstart', e, point, shape);
+          } else {
+            this._emitEvent('mousemove', e, point, shape);
+          }
+        }
 
-    var args = arguments;
-    var arg = slice.call(args, 1);
-    var length = events.length;
+        if (preShape !== shape) {
+          this._emitEvent('mouseenter', e, point, shape);
 
-    for (var i = 0; i < length;) {
-      events[i].callback.apply(this, arg);
+          this._emitEvent('mouseover', e, point, shape);
 
-      if (events[i].one) {
-        events.splice(i, 1);
-        length--;
+          if (dragging) {
+            this._emitEvent('dragenter', e, point, shape);
+          }
+        }
       } else {
-        i++;
+        var canvasmousemove = this._getEventObj('mousemove', e, point, this);
+
+        this.emit('mousemove', canvasmousemove);
       }
-    }
 
-    if (args.length >= 2 && args[1] instanceof Event && args[1].propagationStopped) {
-      return;
-    }
+      preShape = shape;
+    } else {
+      this._emitEvent(type, e, point, shape || this);
 
-    if (PROPOGATE_EVENTS.indexOf(evt) >= 0) {
-      var shape = this._cfg.parent;
-
-      while (shape && !shape.removed && !shape.destroyed) {
-        shape.emit.apply(shape, args);
-        shape = shape._cfg.parent;
+      if (!dragging && type === 'mousedown') {
+        mousedown = shape;
       }
-    }
-  },
-  trigger: function trigger() {
-    this.emit.apply(this, arguments);
-  },
-  off: function off(evt, callback) {
-    var events = this._cfg._events;
 
-    if (arguments.length === 0) {
-      this._cfg._events = {};
-      return this;
-    }
+      if (type === 'mouseup') {
+        mousedown = null;
 
-    if (events[evt]) {
-      var index = indexOfCallback(events[evt], callback);
+        if (dragging) {
+          dragging._cfg.capture = true;
 
-      if (index >= 0) {
-        events[evt].splice(index, 1);
-      }
+          this._emitEvent('dragend', e, point, dragging);
 
-      if (events[evt].length === 0) {
-        delete events[evt];
+          dragging = null;
+
+          this._emitEvent('drop', e, point, shape || this);
+        }
       }
     }
+
+    if (shape && !shape.destroyed) {
+      el.style.cursor = shape.attr('cursor') || 'default';
+    }
   },
-  removeEvent: function removeEvent(evt) {
-    if (typeof evt === 'undefined') {
-      this._cfg._events = {};
-    } else {
-      delete this._cfg._events[evt];
-    }
+  _emitEvent: function _emitEvent(type, evt, point, shape) {
+    var event = this._getEventObj(type, evt, point, shape);
 
-    return this;
-  },
-  _getEvents: function _getEvents() {
-    return this._cfg._events || {};
+    var emitShape = this._getEmitter(shape, evt);
+
+    emitShape && emitShape.emit(type, event);
+    return emitShape;
   }
 };

lib/index.js

@@ -21,4 +21,5 @@ module.exports = {
   Event: require('./event'),
+  EventEmitter: require('./core/event-emitter'),
   // version, etc.
-  version: '3.4.0-beta.1'
+  version: '3.4.0-beta.2'
 };

package.json

 {
   "name": "@antv/g",
-  "version": "3.4.0-beta.1",
+  "version": "3.4.0-beta.2",
   "description": "A canvas library which providing 2d draw for G2.",
@@ -5,0 +5,0 @@ "keywords": [

src/canvas.js

 const Util = require('./util/index');
-const Event = require('./core/event');
+const Event = require('./core/mixin/event');
 const Group = require('./core/group');
@@ -4,0 +4,0 @@ const Timeline = require('./core/mixin/timeline');

src/core/element.js

@@ -5,3 +5,3 @@ const Util = require('../util/index');
 const Animate = require('./mixin/animation');
-const EventEmitter = require('./mixin/event');
+const EventEmitter = require('./event-emitter');
 
@@ -13,4 +13,3 @@ const Element = function(cfg) {
     visible: true,
-    destroyed: false,
-    _events: {}
+    destroyed: false
   }; // 配置存放地
@@ -17,0 +16,0 @@

src/core/mixin/event.js

@@ -1,5 +0,4 @@
-const Util = require('../../util/common');
+const Util = require('../../util/index');
 const Event = require('../../event');
-
-const PROPOGATE_EVENTS = [
+const EVENTS = [
   'click',
@@ -10,104 +9,134 @@ 'mousedown',
   'contextmenu',
+  'mouseenter',
   'mouseout',
   'mouseover',
   'mousemove',
-  'dragstart',
-  'drag',
-  'dragend',
-  'dragenter',
-  'dragleave',
-  'drop'
+  'mouseleave'
 ];
-const slice = Array.prototype.slice;
 
-function indexOfCallback(events, callback) {
-  let i = events.length;
-  while (i--) {
-    if (events[i].callback === callback) {
-      return i;
-    }
-  }
-  return -1;
-}
+let preShape = null;
+let mousedown = null;
+let dragging = null;
 
 module.exports = {
-  on(evt, callback, one) {
+  registerEvent() {
     const self = this;
-    if (!Util.isFunction(callback)) {
-      throw new TypeError('listener should be a function');
-    }
-    if (!self._cfg._events) {
-      self._cfg._events = {};
-    }
-    if (!self._cfg._events[evt]) {
-      self._cfg._events[evt] = [];
-    }
-    self._cfg._events[evt].push({ callback, one });
-    return this;
+    const el = this.get('el');
+
+    Util.each(EVENTS, evt => {
+      el.addEventListener(evt, e => {
+        self._triggerEvent(evt, e);
+      }, false);
+    });
+    // special cases
+    el.addEventListener('touchstart', e => {
+      if (!Util.isEmpty(e.touches)) {
+        self._triggerEvent('touchstart', e.touches[0]);
+      }
+    }, false);
+
+    el.addEventListener('touchmove', e => {
+      if (!Util.isEmpty(e.touches)) {
+        self._triggerEvent('touchmove', e.touches[0]);
+      }
+    }, false);
+
+    el.addEventListener('touchend', e => {
+      if (!Util.isEmpty(e.changedTouches)) {
+        self._triggerEvent('touchend', e.changedTouches[0]);
+      }
+    }, false);
   },
-  one(evt, callback) {
-    this.on(evt, callback, true);
-    return this;
-  },
-  emit(evt) {
-    if (this.removed || this.destroyed) {
-      return;
-    }
-    const events = this._cfg._events[evt];
-    if (Util.isEmpty(events)) {
-      return;
-    }
-    const args = arguments;
-    const arg = slice.call(args, 1);
-    let length = events.length;
-    for (let i = 0; i < length;) {
-      events[i].callback.apply(this, arg);
-      if (events[i].one) {
-        events.splice(i, 1);
-        length--;
+  _getEmitter(element, event) {
+    if (element) {
+      if (Util.isEmpty(element._getEvents())) {
+        const parent = element.get('parent');
+        if (parent && !event.propagationStopped) {
+          return this._getEmitter(parent, event);
+        }
       } else {
-        i++;
+        return element;
       }
     }
-    if (args.length >= 2 && args[1] instanceof Event && args[1].propagationStopped) {
-      return;
-    }
-    if (PROPOGATE_EVENTS.indexOf(evt) >= 0) {
-      let shape = this._cfg.parent;
-      while (shape && !shape.removed && !shape.destroyed) {
-        shape.emit.apply(shape, args);
-        shape = shape._cfg.parent;
-      }
-    }
   },
-  trigger() {
-    this.emit.apply(this, arguments);
+  _getEventObj(type, e, point, target) {
+    const event = new Event(type, e, true, true);
+    event.x = point.x;
+    event.y = point.y;
+    event.clientX = e.clientX;
+    event.clientY = e.clientY;
+    event.currentTarget = target;
+    event.target = target;
+    return event;
   },
-  off(evt, callback) {
-    const events = this._cfg._events;
-    if (arguments.length === 0) {
-      this._cfg._events = {};
-      return this;
+  _triggerEvent(type, e) {
+    const point = this.getPointByClient(e.clientX, e.clientY);
+    let shape = this.getShape(point.x, point.y, e);
+    const el = this.get('el');
+    // svg原生事件取不到dragover, dragout, drop等事件的对象。这边需要走数学拾取。
+    if (dragging && this.getRenderer() === 'svg') {
+      shape = this.getShape(point.x, point.y);
     }
-    if (events[evt]) {
-      const index = indexOfCallback(events[evt], callback);
-      if (index >= 0) {
-        events[evt].splice(index, 1);
+    if (type === 'mousemove') {
+      if (preShape && preShape !== shape) {
+        this._emitEvent('mouseout', e, point, preShape);
+        this._emitEvent('mouseleave', e, point, preShape);
+        if (dragging) {
+          this._emitEvent('dragleave', e, point, preShape);
+        }
+        if (!preShape.destroyed && !preShape.removed) {
+          el.style.cursor = preShape.attr('cursor') || 'default';
+        }
       }
-      if (events[evt].length === 0) {
-        delete events[evt];
+      // 拖拽过程中不会触发mousemove事件
+      if (dragging) {
+        this._emitEvent('drag', e, point, dragging);
       }
-    }
-  },
-  removeEvent(evt) {
-    if (typeof evt === 'undefined') {
-      this._cfg._events = {};
+      if (shape) {
+        if (!dragging) {
+          if (mousedown === shape) {
+            dragging = shape;
+            mousedown = null;
+            this._emitEvent('dragstart', e, point, shape);
+          } else {
+            this._emitEvent('mousemove', e, point, shape);
+          }
+        }
+        if (preShape !== shape) {
+          this._emitEvent('mouseenter', e, point, shape);
+          this._emitEvent('mouseover', e, point, shape);
+          if (dragging) {
+            this._emitEvent('dragenter', e, point, shape);
+          }
+        }
+      } else {
+        const canvasmousemove = this._getEventObj('mousemove', e, point, this);
+        this.emit('mousemove', canvasmousemove);
+      }
+      preShape = shape;
     } else {
-      delete this._cfg._events[evt];
+      this._emitEvent(type, e, point, shape || this);
+      if (!dragging && type === 'mousedown') {
+        mousedown = shape;
+      }
+      if (type === 'mouseup') {
+        mousedown = null;
+        if (dragging) {
+          dragging._cfg.capture = true;
+          this._emitEvent('dragend', e, point, dragging);
+          dragging = null;
+          this._emitEvent('drop', e, point, shape || this);
+        }
+      }
     }
-    return this;
+    if (shape && !shape.destroyed) {
+      el.style.cursor = shape.attr('cursor') || 'default';
+    }
   },
-  _getEvents() {
-    return this._cfg._events || {};
+  _emitEvent(type, evt, point, shape) {
+    const event = this._getEventObj(type, evt, point, shape);
+    const emitShape = this._getEmitter(shape, evt);
+    emitShape && emitShape.emit(type, event);
+    return emitShape;
   }
 };

src/index.js

@@ -21,4 +21,5 @@ module.exports = {
   Event: require('./event'),
+  EventEmitter: require('./core/event-emitter'),
   // version, etc.
-  version: '3.4.0-beta.1'
+  version: '3.4.0-beta.2'
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

1035522

decreased by-0.05%

Number of package files

129

decreased by-0.77%

Lines of code

27562

decreased by-0.37%

No dependency changes