@lazarljubenovic/vis-ng/core/core.umd.js

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('vis'), require('rxjs')) :
  typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', 'vis', 'rxjs'], factory) :
  (factory((global.vis-ng = global.vis-ng || {}),global.ng.core,global.ng.common,global.vis,global.rxjs));
}(this, (function (exports,_angular_core,_angular_common,vis,rxjs) { 'use strict';

class VisNetworkService {
    constructor() {
    }
    get network() {
        return this._network;
    }
    getVisNode(nodeId) {
        return this.nodes.get(nodeId);
    }
    /**
     * Attach vis event to the current _network.
     * @param eventName
     * @param callback
     */
    attachEvent(eventName, callback) {
        this._network.on(eventName, callback);
    }
    addNode(node) {
        this.nodes.add(node);
    }
    updateNode(node) {
        this.nodes.update(node);
    }
    removeNode(nodeId) {
        this.nodes.remove(nodeId);
    }
    addEdge(edge) {
        this.edges.add(edge);
    }
    updateEdge(edge) {
        this.edges.update(edge);
    }
    removeEdge(edgeId) {
        this.edges.remove(edgeId);
    }
    onChange(newState) {
        this._network.setOptions(newState.options);
        const diffNodes = this.diff(this.nodes.get(), newState.nodes);
        const diffEdges = this.diff(this.edges.get(), newState.edges);
        diffNodes.added.forEach(n => this.nodes.add(n));
        diffNodes.changed.forEach(n => this.nodes.update(n));
        diffNodes.deleted.forEach(n => this.nodes.remove({ id: n }));
        diffEdges.added.forEach(e => this.edges.add(e));
        diffEdges.changed.forEach(e => this.edges.update(e));
        diffEdges.deleted.forEach(e => this.edges.remove({ id: e }));
        this.network.setOptions(newState.options);
    }
    diff(oldValue, newValue) {
        let diffResult = { added: [], deleted: [], changed: [] };
        diffResult.deleted = oldValue
            .filter(oldV => newValue.map(e => e.id).indexOf(oldV.id) == -1)
            .map(oldV => oldV.id);
        diffResult.added = newValue.filter(newV => oldValue.map(e => e.id).indexOf(newV.id) == -1);
        diffResult.changed = newValue.filter(newV => {
            let el = oldValue.find(oldV => oldV.id == newV.id);
            return el ? Object.keys(el).some(key => newV[key] != el[key]) : false;
        });
        return diffResult;
    }
    initDraw() {
        let data = {
            nodes: this.nodes,
            edges: this.edges
        };
        let options = this.options;
        this._network = new vis.Network(this.container.nativeElement, data, options);
    }
    initializeGraph(container, nodes, edges, options) {
        this.container = container;
        this.nodes = new vis.DataSet(nodes);
        this.edges = new vis.DataSet(edges);
        this.options = options;
        this.initDraw();
    }
    destroy() {
        if (this._network) {
            this._network.destroy();
        }
    }
    getPositions() {
        let map = new Map();
        const positions = this.network.getPositions();
        Object.keys(positions).forEach(nodeId => {
            map.set(nodeId, positions[nodeId]);
        });
        return map;
    }
    setPositions(positions) {
        positions.forEach((position, nodeId) => {
            this.network.moveNode(nodeId, position.x, position.y);
        });
    }
}
VisNetworkService.decorators = [
    { type: _angular_core.Injectable },
];
/** @nocollapse */
VisNetworkService.ctorParameters = [];

class VisNetworkNodeDirective {
    constructor(service) {
        this.service = service;
        this.select = new _angular_core.EventEmitter();
    }
    set options(options) {
        this._options = options;
        setTimeout(() => this.service.updateNode(this.toObject()));
    }
    get options() {
        return this._options;
    }
    onSelectNode(arg) {
        if (arg.nodes.indexOf(this.id) != -1) {
            this.select.emit(arg);
        }
    }
    toObject() {
        return Object.assign({
            id: this.id,
            label: this.label,
        }, this.options);
    }
    ngOnInit() {
        // We must wait a tick for network to be created in the service.
        setTimeout(() => {
            this.service.attachEvent('selectNode', arg => this.onSelectNode(arg));
        });
    }
}
VisNetworkNodeDirective.decorators = [
    { type: _angular_core.Directive, args: [{ selector: 'vis-network-node' },] },
];
/** @nocollapse */
VisNetworkNodeDirective.ctorParameters = [
    { type: VisNetworkService, },
];
VisNetworkNodeDirective.propDecorators = {
    'id': [{ type: _angular_core.Input },],
    'label': [{ type: _angular_core.Input },],
    'options': [{ type: _angular_core.Input },],
    'select': [{ type: _angular_core.Output },],
};

class VisNetworkEdgeDirective {
    constructor(service) {
        this.service = service;
    }
    set options(options) {
        this._options = options;
        setTimeout(() => this.service.updateEdge(this.toObject()));
    }
    get options() {
        return this._options;
    }
    toObject() {
        return Object.assign({
            id: this.id,
            from: this.from,
            to: this.to,
            name: this.name,
            label: this.label,
        }, this.options);
    }
    ngOnInit() {
    }
}
VisNetworkEdgeDirective.decorators = [
    { type: _angular_core.Directive, args: [{ selector: 'vis-network-edge' },] },
];
/** @nocollapse */
VisNetworkEdgeDirective.ctorParameters = [
    { type: VisNetworkService, },
];
VisNetworkEdgeDirective.propDecorators = {
    'id': [{ type: _angular_core.Input },],
    'from': [{ type: _angular_core.Input },],
    'to': [{ type: _angular_core.Input },],
    'name': [{ type: _angular_core.Input },],
    'label': [{ type: _angular_core.Input },],
    'options': [{ type: _angular_core.Input },],
};

var __decorate = (undefined && undefined.__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 __metadata = (undefined && undefined.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
function VisNgEvent(eventString) {
    return function (target, key) {
        if (eventString == null) {
            if (key.startsWith('graph')) {
                eventString = key.slice('graph'.length);
                eventString = eventString[0].toLowerCase() + eventString.slice(1);
            }
        }
        if (!target['_events']) {
            target['_events'] = new Map();
        }
        target['_events'].set(key, eventString);
    };
}
class VisNetworkComponent {
    constructor(service) {
        this.service = service;
        this.nodes$ = new rxjs.Subject();
        this.edges$ = new rxjs.Subject();
        this.options$ = new rxjs.Subject();
        // region Events
        // Events triggered by human interaction, selection, dragging, etc.
        this.graphClick = new _angular_core.EventEmitter();
        this.graphDoubleClick = new _angular_core.EventEmitter();
        this.graphRightClick = new _angular_core.EventEmitter();
        this.graphHold = new _angular_core.EventEmitter();
        this.graphRelease = new _angular_core.EventEmitter();
        this.graphSelect = new _angular_core.EventEmitter();
        this.graphSelectNode = new _angular_core.EventEmitter();
        this.graphSelectEdge = new _angular_core.EventEmitter();
        this.graphDeselectNode = new _angular_core.EventEmitter();
        this.graphDeselectEdge = new _angular_core.EventEmitter();
        this.graphDragStart = new _angular_core.EventEmitter();
        this.graphDragging = new _angular_core.EventEmitter();
        this.graphDragEnd = new _angular_core.EventEmitter();
        this.graphHoverNode = new _angular_core.EventEmitter();
        this.graphBlurNode = new _angular_core.EventEmitter();
        this.graphHoverEdge = new _angular_core.EventEmitter();
        this.graphBlurEdge = new _angular_core.EventEmitter();
        this.graphZoom = new _angular_core.EventEmitter();
        this.graphHidePopup = new _angular_core.EventEmitter();
        // Events triggered the physics simulation. Can be used to trigger GUI updates.
        this.graphStartStabilizing = new _angular_core.EventEmitter();
        this.graphStabilizationProgress = new _angular_core.EventEmitter();
        this.graphStabilizationIterationsDone = new _angular_core.EventEmitter();
        this.graphStabilized = new _angular_core.EventEmitter();
        // Events triggered by the canvas.
        this.graphResize = new _angular_core.EventEmitter();
        // Events triggered by the rendering module. Can be used to draw custom elements on the canvas.
        this.graphInitRedraw = new _angular_core.EventEmitter();
        this.graphBeforeDrawing = new _angular_core.EventEmitter();
        this.graphAfterDrawing = new _angular_core.EventEmitter();
        // Event triggered by the view module.
        this.graphAnimationFinished = new _angular_core.EventEmitter();
        // Event triggered by the configuration module.
        this.graphConfigChange = new _angular_core.EventEmitter();
        this.changes$ = rxjs.Observable.combineLatest(this.nodes$, this.edges$, this.options$)
            .map(values => {
            return {
                nodes: values[0],
                edges: values[1],
                options: values[2],
            };
        })
            .filter(values => values.options !== null)
            .map(values => {
            const nodes = values.nodes.map(node => node.toObject());
            const edges = values.edges.map(edge => edge.toObject());
            const options = values.options;
            return { nodes, edges, options };
        });
        this._subscriptions = [];
        let sub = this.changes$.take(1).subscribe(values => {
            this.service.initializeGraph(this.graphElement, values.nodes, values.edges, values.options);
        });
        this._subscriptions.push(sub);
        sub = this.changes$.skip(1).subscribe(values => {
            this.service.onChange({
                nodes: values.nodes,
                edges: values.edges,
                options: values.options
            });
        });
        this._subscriptions.push(sub);
    }
    set nodes(nodes) {
        this.nodes$.next(nodes);
    }
    set edges(edges) {
        this.edges$.next(edges);
    }
    set options(options) {
        this.options$.next(options);
    }
    get rawNetworkInstance() {
        return this.service.network;
    }
    get rawNodes() {
        return this.service.network.body.data.nodes._data;
    }
    get rawEdges() {
        return this.service.network.body.data.edges._data;
    }
    getPositions(param) {
        return this.service.network.getPositions(param);
    }
    storePositions(param) {
        this.service.network.storePositions(param);
    }
    ngOnInit() {
        // We must wait a tick for network to be created in the service.
        setTimeout(() => {
            this._events.forEach((eventString, propertyName) => {
                this.service.attachEvent(eventString, arg => {
                    this[propertyName].emit(arg);
                });
            });
        });
    }
    ngOnDestroy() {
        this._subscriptions.forEach(s => s.unsubscribe());
        this.service.destroy();
    }
}
VisNetworkComponent.decorators = [
    { type: _angular_core.Component, args: [{
                selector: 'vis-network',
                template: `
<div class="graph" #graph></div>
`,
                styles: [`
:host {
  display: block;
  width: 100%;
  height: 100%;
}

.graph {
  width: 100%;
  height: 100%;
}`]
            },] },
];
/** @nocollapse */
VisNetworkComponent.ctorParameters = [
    { type: VisNetworkService, },
];
VisNetworkComponent.propDecorators = {
    'nodes': [{ type: _angular_core.ContentChildren, args: [VisNetworkNodeDirective,] },],
    'edges': [{ type: _angular_core.ContentChildren, args: [VisNetworkEdgeDirective,] },],
    'options': [{ type: _angular_core.Input },],
    'graphClick': [{ type: _angular_core.Output },],
    'graphDoubleClick': [{ type: _angular_core.Output },],
    'graphRightClick': [{ type: _angular_core.Output },],
    'graphHold': [{ type: _angular_core.Output },],
    'graphRelease': [{ type: _angular_core.Output },],
    'graphSelect': [{ type: _angular_core.Output },],
    'graphSelectNode': [{ type: _angular_core.Output },],
    'graphSelectEdge': [{ type: _angular_core.Output },],
    'graphDeselectNode': [{ type: _angular_core.Output },],
    'graphDeselectEdge': [{ type: _angular_core.Output },],
    'graphDragStart': [{ type: _angular_core.Output },],
    'graphDragging': [{ type: _angular_core.Output },],
    'graphDragEnd': [{ type: _angular_core.Output },],
    'graphHoverNode': [{ type: _angular_core.Output },],
    'graphBlurNode': [{ type: _angular_core.Output },],
    'graphHoverEdge': [{ type: _angular_core.Output },],
    'graphBlurEdge': [{ type: _angular_core.Output },],
    'graphZoom': [{ type: _angular_core.Output },],
    'graphShowPopup': [{ type: _angular_core.Output },],
    'graphHidePopup': [{ type: _angular_core.Output },],
    'graphStartStabilizing': [{ type: _angular_core.Output },],
    'graphStabilizationProgress': [{ type: _angular_core.Output },],
    'graphStabilizationIterationsDone': [{ type: _angular_core.Output },],
    'graphStabilized': [{ type: _angular_core.Output },],
    'graphResize': [{ type: _angular_core.Output },],
    'graphInitRedraw': [{ type: _angular_core.Output },],
    'graphBeforeDrawing': [{ type: _angular_core.Output },],
    'graphAfterDrawing': [{ type: _angular_core.Output },],
    'graphAnimationFinished': [{ type: _angular_core.Output },],
    'graphConfigChange': [{ type: _angular_core.Output },],
    'graphElement': [{ type: _angular_core.ViewChild, args: ['graph',] },],
};
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphClick", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphDoubleClick", void 0);
__decorate([
    VisNgEvent('oncontext'), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphRightClick", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphHold", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphRelease", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphSelect", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphSelectNode", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphSelectEdge", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphDeselectNode", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphDeselectEdge", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphDragStart", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphDragging", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphDragEnd", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphHoverNode", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphBlurNode", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphHoverEdge", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphBlurEdge", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphZoom", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphShowPopup", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphHidePopup", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphStartStabilizing", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphStabilizationProgress", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphStabilizationIterationsDone", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphStabilized", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphResize", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphInitRedraw", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphBeforeDrawing", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphAfterDrawing", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphAnimationFinished", void 0);
__decorate([
    VisNgEvent(), 
    __metadata('design:type', Object)
], VisNetworkComponent.prototype, "graphConfigChange", void 0);

class VisNetworkModule {
    static forRoot() {
        return {
            ngModule: VisNetworkModule,
            providers: [
                VisNetworkService,
            ],
        };
    }
}
VisNetworkModule.decorators = [
    { type: _angular_core.NgModule, args: [{
                imports: [
                    _angular_common.CommonModule,
                ],
                //providers: [
                //VisNetworkService,
                //],
                declarations: [
                    VisNetworkComponent,
                    VisNetworkNodeDirective,
                    VisNetworkEdgeDirective,
                ],
                exports: [
                    VisNetworkComponent,
                    VisNetworkNodeDirective,
                    VisNetworkEdgeDirective,
                ],
            },] },
];
/** @nocollapse */
VisNetworkModule.ctorParameters = [];

exports.VisNetworkService = VisNetworkService;
exports.VisNetworkModule = VisNetworkModule;

Object.defineProperty(exports, '__esModule', { value: true });

})));
//# sourceMappingURL=core.umd.js.map