@antv/x6
Version:
JavaScript diagramming library that uses SVG and HTML for rendering.
181 lines • 8.08 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MouseWheel = void 0;
var jquery_1 = __importDefault(require("jquery"));
var types_1 = require("../types");
var util_1 = require("../util");
var common_1 = require("../common");
var MouseWheel = /** @class */ (function (_super) {
__extends(MouseWheel, _super);
function MouseWheel(options) {
var _this = _super.call(this) || this;
_this.options = options;
_this.cumulatedFactor = 1;
var scroller = _this.graph.scroller.widget;
_this.container = scroller ? scroller.container : _this.graph.container;
_this.target = _this.options.global ? document : _this.container;
_this.eventName = util_1.Platform.isEventSupported('wheel') ? 'wheel' : 'mousewheel';
_this.handler = _this.onMouseWheel.bind(_this);
if (_this.options.enabled) {
_this.enable(true);
}
return _this;
}
Object.defineProperty(MouseWheel.prototype, "graph", {
get: function () {
return this.options.graph;
},
enumerable: false,
configurable: true
});
Object.defineProperty(MouseWheel.prototype, "disabled", {
get: function () {
return this.options.enabled !== true;
},
enumerable: false,
configurable: true
});
MouseWheel.prototype.enable = function (force) {
if (this.disabled || force) {
this.options.enabled = true;
this.graph.options.mousewheel.enabled = true;
if (util_1.Platform.SUPPORT_PASSIVE) {
this.target.addEventListener(this.eventName, this.handler, {
passive: false,
});
}
else {
jquery_1.default(this.target).on('mousewheel', this.handler);
}
}
};
MouseWheel.prototype.disable = function () {
if (!this.disabled) {
this.options.enabled = false;
this.graph.options.mousewheel.enabled = false;
if (util_1.Platform.SUPPORT_PASSIVE) {
this.target.removeEventListener(this.eventName, this.handler);
}
else {
jquery_1.default(this.target).off('mousewheel');
}
}
};
MouseWheel.prototype.onMouseWheel = function (evt) {
var _this = this;
var e = (evt.originalEvent || evt);
var guard = this.options.guard;
if ((guard == null || guard.call(this.graph, e)) &&
types_1.ModifierKey.isMatch(e, this.options.modifiers)) {
evt.preventDefault();
evt.stopPropagation();
if (this.frameId) {
util_1.Dom.cancelAnimationFrame(this.frameId);
this.frameId = null;
}
var factor = this.options.factor || 1.2;
if (this.currentScale == null) {
this.startPos = { x: evt.clientX, y: evt.clientY };
this.currentScale = this.graph.scroller.widget
? this.graph.scroller.widget.zoom()
: this.graph.transform.getScale().sx;
}
var delta = evt.deltaY;
if (delta < 0) {
// zoomin
// ------
// Switches to 1% zoom steps below 15%
if (this.currentScale * this.cumulatedFactor < 0.15) {
this.cumulatedFactor = (this.currentScale + 0.01) / this.currentScale;
}
else {
// Uses to 5% zoom steps for better grid rendering in
// webkit and to avoid rounding errors for zoom steps
this.cumulatedFactor *= factor;
}
}
else {
// zoomout
// -------
// Switches to 1% zoom steps below 15%
if (this.currentScale * this.cumulatedFactor <= 0.15) {
this.cumulatedFactor = (this.currentScale - 0.01) / this.currentScale;
}
else {
// Uses to 5% zoom steps for better grid rendering in
// webkit and to avoid rounding errors for zoom steps
this.cumulatedFactor /= factor;
}
}
this.cumulatedFactor =
Math.round(this.currentScale * this.cumulatedFactor * 20) /
20 /
this.currentScale;
this.cumulatedFactor = Math.max(0.01, Math.min(this.currentScale * this.cumulatedFactor, 160) /
this.currentScale);
this.frameId = util_1.Dom.requestAnimationFrame(function () {
var scroller = _this.graph.scroller.widget;
var currentScale = _this.currentScale;
var targetScale = _this.graph.transform.clampScale(currentScale * _this.cumulatedFactor);
var minScale = _this.options.minScale || Number.MIN_SAFE_INTEGER;
var maxScale = _this.options.maxScale || Number.MAX_SAFE_INTEGER;
targetScale = util_1.NumberExt.clamp(targetScale, minScale, maxScale);
if (targetScale !== currentScale) {
if (scroller) {
if (_this.options.zoomAtMousePosition) {
var origin_1 = _this.graph.coord.clientToLocalPoint(_this.startPos);
scroller.zoom(targetScale, {
absolute: true,
center: origin_1.clone(),
});
}
else {
scroller.zoom(targetScale, { absolute: true });
}
}
else {
if (_this.options.zoomAtMousePosition) {
var origin_2 = _this.graph.coord.clientToLocalPoint(_this.startPos);
_this.graph.translate(origin_2.x * (1 - targetScale), origin_2.y * (1 - targetScale));
}
_this.graph.scale(targetScale, targetScale);
}
}
_this.frameId = null;
_this.currentScale = null;
_this.cumulatedFactor = 1;
});
}
};
MouseWheel.prototype.dispose = function () {
this.disable();
};
__decorate([
common_1.Disposable.dispose()
], MouseWheel.prototype, "dispose", null);
return MouseWheel;
}(common_1.Disposable));
exports.MouseWheel = MouseWheel;
//# sourceMappingURL=mousewheel.js.map