@antv/x6
Version:
JavaScript diagramming library that uses SVG and HTML for rendering.
123 lines • 4.2 kB
JavaScript
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;
};
import { Dom } from '../util';
import { ModifierKey } from '../types';
import { Base } from './base';
export class ScrollerManager extends Base {
get widgetOptions() {
return this.options.scroller;
}
get pannable() {
return this.widgetOptions && this.widgetOptions.pannable === true;
}
init() {
this.widget = this.graph.hook.createScroller();
this.startListening();
this.updateClassName();
if (this.widget) {
this.widget.center();
}
}
startListening() {
this.graph.on('blank:mousedown', this.preparePanning, this);
this.graph.on('node:unhandled:mousedown', this.preparePanning, this);
this.graph.on('edge:unhandled:mousedown', this.preparePanning, this);
}
stopListening() {
this.graph.off('blank:mousedown', this.preparePanning, this);
this.graph.off('node:unhandled:mousedown', this.preparePanning, this);
this.graph.off('edge:unhandled:mousedown', this.preparePanning, this);
}
preparePanning({ e }) {
if (this.widget) {
if (this.allowPanning(e, true) ||
(this.allowPanning(e) && !this.graph.selection.allowRubberband(e, true))) {
this.updateClassName(true);
this.widget.startPanning(e);
this.widget.once('pan:stop', () => this.updateClassName(false));
}
}
}
allowPanning(e, strict) {
return (this.widget &&
this.pannable &&
ModifierKey.isMatch(e, this.widgetOptions.modifiers, strict) &&
this.graph.hook.allowPanning(e));
}
updateClassName(isPanning) {
if (this.widget == null) {
return;
}
const container = this.widget.container;
const panning = this.view.prefixClassName('graph-scroller-panning');
const pannable = this.view.prefixClassName('graph-scroller-pannable');
if (this.pannable) {
if (isPanning) {
Dom.addClass(container, panning);
Dom.removeClass(container, pannable);
}
else {
Dom.removeClass(container, panning);
Dom.addClass(container, pannable);
}
}
else {
Dom.removeClass(container, panning);
Dom.removeClass(container, pannable);
}
}
enablePanning() {
if (!this.pannable) {
this.widgetOptions.pannable = true;
this.updateClassName();
// if (
// ModifierKey.equals(
// this.graph.options.scroller.modifiers,
// this.graph.options.selecting.modifiers,
// )
// ) {
// this.graph.selection.disableRubberband()
// }
}
}
disablePanning() {
if (this.pannable) {
this.widgetOptions.pannable = false;
this.updateClassName();
}
}
lock() {
if (this.widget) {
this.widget.lock();
}
}
unlock() {
if (this.widget) {
this.widget.unlock();
}
}
update() {
if (this.widget) {
this.widget.update();
}
}
resize(width, height) {
if (this.widget) {
this.widget.resize(width, height);
}
}
dispose() {
if (this.widget) {
this.widget.dispose();
}
this.stopListening();
}
}
__decorate([
Base.dispose()
], ScrollerManager.prototype, "dispose", null);
//# sourceMappingURL=scroller.js.map