ng2-branchy
Version:
angular2 component for visualizing data that can be naturally represented as a tree
341 lines • 15.6 kB
JavaScript
"use strict";
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 __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
var core_1 = require('@angular/core');
var common_1 = require('@angular/common');
var branchy_types_1 = require('./branchy.types');
var node_editable_directive_1 = require('./editable/node-editable.directive');
var node_menu_component_1 = require('./menu/node-menu.component');
var node_draggable_service_1 = require('./draggable/node-draggable.service');
var node_menu_service_1 = require('./menu/node-menu.service');
var node_draggable_directive_1 = require('./draggable/node-draggable.directive');
var draggable_types_1 = require('./draggable/draggable.types');
var menu_types_1 = require('./menu/menu.types');
var editable_type_1 = require('./editable/editable.type');
var branchy_service_1 = require('./branchy.service');
var event_utils_1 = require('./common/utils/event.utils');
var _ = require('lodash');
var type_utils_1 = require('./common/utils/type.utils');
var TreeComponent = (function () {
function TreeComponent(nodeMenuService, nodeDraggableService, branchyService, element) {
this.nodeMenuService = nodeMenuService;
this.nodeDraggableService = nodeDraggableService;
this.branchyService = branchyService;
this.element = element;
this.nodeRemoved = new core_1.EventEmitter();
this.isSelected = false;
this.isMenuVisible = false;
}
TreeComponent.prototype.ngOnInit = function () {
this.indexInParent = 0;
this.isLeaf = !Array.isArray(this.tree.children);
this.tree._indexInParent = this.indexInParent;
this.setUpNodeSelectedEventHandler();
this.setUpMenuEventHandler();
this.setUpDraggableEventHandler();
};
TreeComponent.prototype.setUpNodeSelectedEventHandler = function () {
var _this = this;
this.branchyService.nodeSelected$
.filter(function (e) { return _this.tree !== e.node; })
.subscribe(function (_) { return _this.isSelected = false; });
};
TreeComponent.prototype.setUpMenuEventHandler = function () {
var _this = this;
this.nodeMenuService.nodeMenuEvents$
.filter(function (e) { return _this.element.nativeElement !== e.sender; })
.filter(function (e) { return e.action === menu_types_1.NodeMenuAction.Close; })
.subscribe(function (_) { return _this.isMenuVisible = false; });
};
TreeComponent.prototype.setUpDraggableEventHandler = function () {
var _this = this;
this.nodeDraggableService.draggableNodeEvents$
.filter(function (e) { return e.action === draggable_types_1.NodeDraggableEventAction.Remove; })
.filter(function (e) { return e.captured.element === _this.element; })
.subscribe(function (e) { return _this.onChildRemoved({ node: e.captured.tree }, _this.parentTree); });
this.nodeDraggableService.draggableNodeEvents$
.filter(function (e) { return e.action !== draggable_types_1.NodeDraggableEventAction.Remove; })
.filter(function (e) { return e.target === _this.element; })
.filter(function (e) { return !_this.hasChild(e.captured.tree); })
.subscribe(function (e) {
if (_this.isSiblingOf(e.captured.tree)) {
return _this.swapWithSibling(e.captured.tree);
}
if (_this.isFolder()) {
return _this.moveNodeToThisTreeAndRemoveFromPreviousOne(e);
}
else {
return _this.moveNodeToParentTreeAndRemoveFromPreviousOne(e);
}
});
};
TreeComponent.prototype.moveNodeToThisTreeAndRemoveFromPreviousOne = function (e) {
this.tree.children.push(e.captured.tree);
this.nodeDraggableService.draggableNodeEvents$.next(_.merge(e, { action: draggable_types_1.NodeDraggableEventAction.Remove }));
this.branchyService.nodeMoved$.next({
node: e.captured.tree,
parent: this.tree
});
};
TreeComponent.prototype.moveNodeToParentTreeAndRemoveFromPreviousOne = function (e) {
this.parentTree.children.splice(this.indexInParent, 0, e.captured.tree);
this.nodeDraggableService.draggableNodeEvents$.next(_.merge(e, { action: draggable_types_1.NodeDraggableEventAction.Remove }));
this.branchyService.nodeMoved$.next({
node: e.captured.tree,
parent: this.parentTree
});
};
TreeComponent.prototype.isEditInProgress = function () {
return this.tree._status === branchy_types_1.TreeStatus.EditInProgress
|| this.tree._status === branchy_types_1.TreeStatus.New;
};
TreeComponent.prototype.isFolder = function () {
return !this.isLeaf;
};
TreeComponent.prototype.hasChild = function (child) {
return _.includes(this.tree.children, child);
};
TreeComponent.prototype.isSiblingOf = function (child) {
return this.parentTree && _.includes(this.parentTree.children, child);
};
TreeComponent.prototype.swapWithSibling = function (sibling) {
var siblingIndex = this.parentTree.children.indexOf(sibling);
var thisTreeIndex = this.parentTree.children.indexOf(this.tree);
this.parentTree.children[siblingIndex] = this.tree;
this.parentTree.children[thisTreeIndex] = sibling;
this.tree._indexInParent = siblingIndex;
sibling._indexInParent = thisTreeIndex;
this.branchyService.nodeMoved$.next({
node: this.tree,
parent: this.parentTree
});
};
TreeComponent.prototype.isNodeExpanded = function () {
return this.tree._foldingType === branchy_types_1.FoldingType.Expanded;
};
TreeComponent.prototype.switchFoldingType = function (e, tree) {
this.handleFoldingType(e.target.parentNode.parentNode, tree);
};
TreeComponent.prototype.getFoldingTypeCssClass = function (node) {
if (!node._foldingType) {
if (node.children) {
node._foldingType = branchy_types_1.FoldingType.Expanded;
}
else {
node._foldingType = branchy_types_1.FoldingType.Leaf;
}
}
return node._foldingType.cssClass;
};
TreeComponent.prototype.getNextFoldingType = function (node) {
if (node._foldingType === branchy_types_1.FoldingType.Expanded) {
return branchy_types_1.FoldingType.Collapsed;
}
return branchy_types_1.FoldingType.Expanded;
};
TreeComponent.prototype.handleFoldingType = function (parent, node) {
if (node._foldingType === branchy_types_1.FoldingType.Leaf) {
return;
}
node._foldingType = this.getNextFoldingType(node);
};
TreeComponent.prototype.onMenuItemSelected = function (e) {
switch (e.nodeMenuItemAction) {
case menu_types_1.NodeMenuItemAction.NewTag:
this.onNewSelected(e);
break;
case menu_types_1.NodeMenuItemAction.NewFolder:
this.onNewSelected(e);
break;
case menu_types_1.NodeMenuItemAction.Rename:
this.onRenameSelected();
break;
case menu_types_1.NodeMenuItemAction.Remove:
this.onRemoveSelected();
break;
default:
throw new Error("Chosen menu item doesn't exist");
}
};
TreeComponent.prototype.onRenameSelected = function () {
this.tree._status = branchy_types_1.TreeStatus.EditInProgress;
this.isMenuVisible = false;
};
TreeComponent.prototype.onRemoveSelected = function () {
this.branchyService.nodeRemoved$.next({
node: this.tree,
parent: this.parentTree
});
this.nodeRemoved.emit({ node: this.tree });
};
TreeComponent.prototype.onNewSelected = function (e) {
if (!this.tree.children || !this.tree.children.push) {
this.tree.children = [];
}
var newNode = { value: '', _status: branchy_types_1.TreeStatus.New };
if (e.nodeMenuItemAction === menu_types_1.NodeMenuItemAction.NewFolder) {
newNode.children = [];
}
this.isLeaf ? this.parentTree.children.push(newNode) : this.tree.children.push(newNode);
this.isMenuVisible = false;
};
TreeComponent.prototype.onChildRemoved = function (e, parent) {
if (parent === void 0) { parent = this.tree; }
var childIndex = _.findIndex(parent.children, function (child) { return child === e.node; });
if (childIndex >= 0) {
parent.children.splice(childIndex, 1);
}
};
TreeComponent.prototype.showMenu = function (e) {
if (event_utils_1.isRightButtonClicked(e)) {
this.isMenuVisible = !this.isMenuVisible;
this.nodeMenuService.nodeMenuEvents$.next({
sender: this.element.nativeElement,
action: menu_types_1.NodeMenuAction.Close
});
}
e.preventDefault();
};
TreeComponent.prototype.applyNewValue = function (e, node) {
if (e.action === editable_type_1.NodeEditableEventAction.Cancel) {
if (type_utils_1.isValueEmpty(e.value)) {
return this.nodeRemoved.emit({ node: this.tree });
}
node._status = branchy_types_1.TreeStatus.Modified;
return;
}
if (type_utils_1.isValueEmpty(e.value)) {
return;
}
var nodeOldValue = node.value;
if (type_utils_1.isRenamable(node.value)) {
node.value = type_utils_1.applyNewValueToRenamable(node.value, e.value);
}
else {
node.value = e.value;
}
if (node._status === branchy_types_1.TreeStatus.New) {
this.branchyService.nodeCreated$.next({ node: node, parent: this.parentTree });
}
if (node._status === branchy_types_1.TreeStatus.EditInProgress) {
this.branchyService.nodeRenamed$.next({
node: node,
parent: this.parentTree,
oldValue: nodeOldValue,
newValue: node.value
});
}
node._status = branchy_types_1.TreeStatus.Modified;
};
TreeComponent.prototype.onNodeSelected = function (e) {
if (event_utils_1.isLeftButtonClicked(e)) {
this.isSelected = true;
this.branchyService.nodeSelected$.next({ node: this.tree });
}
};
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], TreeComponent.prototype, "tree", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], TreeComponent.prototype, "parentTree", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Number)
], TreeComponent.prototype, "indexInParent", void 0);
__decorate([
core_1.Output(),
__metadata('design:type', core_1.EventEmitter)
], TreeComponent.prototype, "nodeRemoved", void 0);
TreeComponent = __decorate([
core_1.Component({
selector: 'tree',
styles: [require('./branchy.component.css')],
template: require('./branchy.component.html'),
directives: [node_editable_directive_1.NodeEditableDirective, TreeComponent, node_menu_component_1.NodeMenuComponent, node_draggable_directive_1.NodeDraggableDirective, common_1.CORE_DIRECTIVES],
}),
__param(0, core_1.Inject(node_menu_service_1.NodeMenuService)),
__param(1, core_1.Inject(node_draggable_service_1.NodeDraggableService)),
__param(2, core_1.Inject(branchy_service_1.BranchyService)),
__param(3, core_1.Inject(core_1.ElementRef)),
__metadata('design:paramtypes', [node_menu_service_1.NodeMenuService, node_draggable_service_1.NodeDraggableService, branchy_service_1.BranchyService, core_1.ElementRef])
], TreeComponent);
return TreeComponent;
}());
var BranchyComponent = (function () {
function BranchyComponent(branchyService) {
this.branchyService = branchyService;
this.nodeCreated = new core_1.EventEmitter();
this.nodeRemoved = new core_1.EventEmitter();
this.nodeRenamed = new core_1.EventEmitter();
this.nodeSelected = new core_1.EventEmitter();
this.nodeMoved = new core_1.EventEmitter();
}
BranchyComponent.prototype.ngOnInit = function () {
var _this = this;
this.branchyService.nodeRemoved$.subscribe(function (e) {
_this.nodeRemoved.emit(e);
});
this.branchyService.nodeRenamed$.subscribe(function (e) {
_this.nodeRenamed.emit(e);
});
this.branchyService.nodeCreated$.subscribe(function (e) {
_this.nodeCreated.emit(e);
});
this.branchyService.nodeSelected$.subscribe(function (e) {
_this.nodeSelected.emit(e);
});
this.branchyService.nodeMoved$.subscribe(function (e) {
_this.nodeMoved.emit(e);
});
};
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], BranchyComponent.prototype, "tree", void 0);
__decorate([
core_1.Output(),
__metadata('design:type', core_1.EventEmitter)
], BranchyComponent.prototype, "nodeCreated", void 0);
__decorate([
core_1.Output(),
__metadata('design:type', core_1.EventEmitter)
], BranchyComponent.prototype, "nodeRemoved", void 0);
__decorate([
core_1.Output(),
__metadata('design:type', core_1.EventEmitter)
], BranchyComponent.prototype, "nodeRenamed", void 0);
__decorate([
core_1.Output(),
__metadata('design:type', core_1.EventEmitter)
], BranchyComponent.prototype, "nodeSelected", void 0);
__decorate([
core_1.Output(),
__metadata('design:type', core_1.EventEmitter)
], BranchyComponent.prototype, "nodeMoved", void 0);
BranchyComponent = __decorate([
core_1.Component({
selector: 'branchy',
providers: [node_menu_service_1.NodeMenuService, node_draggable_service_1.NodeDraggableService, branchy_service_1.BranchyService],
template: "<tree [tree]=\"tree\"></tree>",
directives: [TreeComponent]
}),
__param(0, core_1.Inject(branchy_service_1.BranchyService)),
__metadata('design:paramtypes', [branchy_service_1.BranchyService])
], BranchyComponent);
return BranchyComponent;
}());
exports.BranchyComponent = BranchyComponent;
//# sourceMappingURL=branchy.component.js.map