@antv/x6
Version:
JavaScript diagramming library that uses SVG and HTML for rendering.
222 lines • 7.96 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 __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Knob = void 0;
var common_1 = require("../common");
var util_1 = require("../../util");
var Knob = /** @class */ (function (_super) {
__extends(Knob, _super);
function Knob() {
return _super !== null && _super.apply(this, arguments) || this;
}
Object.defineProperty(Knob.prototype, "node", {
get: function () {
return this.cell;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Knob.prototype, "metadata", {
get: function () {
return this.cell.prop('knob');
},
enumerable: false,
configurable: true
});
Knob.prototype.init = function (options) {
this.options = __assign({}, options);
this.render();
this.startListening();
};
Knob.prototype.startListening = function () {
this.delegateEvents({
mousedown: 'onMouseDown',
touchstart: 'onMouseDown',
});
this.model.on('*', this.update, this);
this.graph.on('scale', this.update, this);
this.graph.on('translate', this.update, this);
this.model.on('reseted', this.remove, this);
this.node.on('removed', this.remove, this);
this.view.on('node:resize', this.onTransform, this);
this.view.on('node:rotate', this.onTransform, this);
this.view.on('node:resized', this.onTransformed, this);
this.view.on('node:rotated', this.onTransformed, this);
_super.prototype.startListening.call(this);
};
Knob.prototype.stopListening = function () {
this.undelegateEvents();
this.model.off('*', this.update, this);
this.graph.off('scale', this.update, this);
this.graph.off('translate', this.update, this);
this.model.off('reseted', this.remove, this);
this.node.off('removed', this.remove, this);
this.view.off('node:resize', this.onTransform, this);
this.view.off('node:rotate', this.onTransform, this);
this.view.off('node:resized', this.onTransformed, this);
this.view.off('node:rotated', this.onTransformed, this);
_super.prototype.stopListening.call(this);
};
Knob.prototype.render = function () {
this.container = document.createElement('div');
util_1.Dom.addClass(this.container, this.prefixClassName('widget-knob'));
if (this.options.className) {
util_1.Dom.addClass(this.container, this.options.className);
}
this.view.addClass(Private.KNOB);
this.graph.container.appendChild(this.container);
this.update();
return this;
};
Knob.prototype.remove = function () {
this.view.removeClass(Private.KNOB);
return _super.prototype.remove.call(this);
};
Knob.prototype.update = function () {
if (this.metadata && this.metadata.update) {
this.metadata.update.call(this.graph, {
knob: this,
cell: this.cell,
node: this.node,
});
}
};
Knob.prototype.onTransform = function () {
this.container.style.display = 'none';
};
Knob.prototype.onTransformed = function () {
this.container.style.display = '';
};
Knob.prototype.notify = function (name, evt) {
if (this.view) {
var e = this.view.normalizeEvent(evt);
var localPoint = this.graph.snapToGrid(e.clientX, e.clientY);
this.view.notify("cell:" + name, {
e: e,
view: this.view,
node: this.node,
cell: this.cell,
x: localPoint.x,
y: localPoint.y,
});
if (this.cell.isNode()) {
this.view.notify("node:" + name, {
e: e,
view: this.view,
node: this.node,
cell: this.cell,
x: localPoint.x,
y: localPoint.y,
});
}
else if (this.cell.isEdge()) {
this.view.notify("edge:" + name, {
e: e,
view: this.view,
edge: this.cell,
cell: this.cell,
x: localPoint.x,
y: localPoint.y,
});
}
}
};
Knob.prototype.onMouseDown = function (e) {
e.stopPropagation();
this.setEventData(e, {
knobbing: false,
});
this.graph.view.undelegateEvents();
this.delegateDocumentEvents(Private.documentEvents, e.data);
if (this.metadata && this.metadata.onMouseDown) {
this.metadata.onMouseDown.call(this.graph, {
e: e,
data: this.getEventData(e),
knob: this,
cell: this.cell,
node: this.node,
});
}
this.notify('knob', e);
};
Knob.prototype.onMouseMove = function (e) {
var data = this.getEventData(e);
var view = this.graph.findViewByCell(this.node);
if (!data.knobbing) {
data.knobbing = true;
if (view) {
view.addClass(Private.KNOBBING);
}
this.model.startBatch('knob', { cid: this.cid });
}
if (this.metadata && this.metadata.onMouseMove) {
this.metadata.onMouseMove.call(this.graph, {
e: e,
data: data,
knob: this,
cell: this.cell,
node: this.node,
});
}
this.notify('knobbing', e);
};
Knob.prototype.onMouseUp = function (e) {
this.undelegateDocumentEvents();
this.graph.view.delegateEvents();
var data = this.getEventData(e);
var view = this.graph.findViewByCell(this.node);
if (data.knobbing) {
if (view) {
view.removeClass(Private.KNOBBING);
}
if (this.metadata && this.metadata.onMouseUp) {
this.metadata.onMouseUp.call(this.graph, {
e: e,
data: data,
knob: this,
cell: this.cell,
node: this.node,
});
}
this.model.stopBatch('knob', { cid: this.cid });
this.notify('knobbed', e);
}
};
return Knob;
}(common_1.Widget));
exports.Knob = Knob;
var Private;
(function (Private) {
Private.KNOB = 'has-widget-knob';
Private.KNOBBING = 'node-knobbing';
Private.documentEvents = {
mousemove: 'onMouseMove',
touchmove: 'onMouseMove',
mouseup: 'onMouseUp',
touchend: 'onMouseUp',
};
})(Private || (Private = {}));
//# sourceMappingURL=index.js.map