META-INF.resources.primefaces.organigram.organigram.js Maven / Gradle / Ivy
/**
* __PrimeFaces Organigram Widget__
*
* Organigram is a data component to display an organizational hierarchy.
*
* @implements {PrimeFaces.widget.ContextMenu.ContextMenuProvider}
*
* @prop {boolean} redraw Whether the organigram requires redrawing.
* @prop {JQuery} source The DOM elements for the source nodes when drawing the lines connecting two nodes.
* @prop {JQuery} target The DOM elements for the target nodes when drawing the lines connecting two nodes.
* @prop {number} zoomFactor The current zoom factor of the organigram.
*
* @interface {PrimeFaces.widget.OrganigramCfg} cfg The configuration for the {@link Organigram| Organigram widget}.
* You can access this configuration via {@link PrimeFaces.widget.BaseWidget.cfg|BaseWidget.cfg}. Please note that this
* configuration is usually meant to be read-only and should not be modified.
* @extends {PrimeFaces.widget.BaseWidgetCfg} cfg
*
* @prop {string} cfg.event Base namespace for the events triggered by this widget.
* @prop {number} cfg.leafNodeConnectorHeight The height of the connector line for leaf nodes.
* @prop {boolean} cfg.zoom Whether zooming is enabled.
*/
PrimeFaces.widget.Organigram = PrimeFaces.widget.BaseWidget.extend({
/**
* @override
* @inheritdoc
* @param {PrimeFaces.PartialWidgetCfg} cfg
*/
init: function(cfg) {
this._super(cfg);
this.draw();
},
/**
* Draws (renders) the organigram with the current nodes.
* @private
*/
draw : function() {
this.source = this.jq.children('ul');
this.target = this.jq.children('div');
this.target.empty();
this.drawNode(this.source.find('li:first').data("rowkey"), this.source.find('li:first'), this.target, 0, 0);
this.setupSelection();
this.setupDragAndDrop();
this.setupControls();
},
/**
* Sets up the event listeners for when a node is selected.
* @private
*/
setupSelection : function() {
var widget = this;
var selectableNodes = this.target.find(".ui-organigram-node.selectable");
selectableNodes.on("click", function() {
widget.selectNode(widget, $(this), "select");
});
if (this.cfg.autoScrollToSelection === true) {
this.scrollToSelection();
}
},
/**
* Selects the given organigram node.
* @private
* @param {PrimeFaces.widget.Organigram} widget This widget instance.
* @param {JQuery} node The node to select, with the class `.ui-organigram-node`.
* @param {string} event Name of the event that triggered the selection, usually `select` or `contextmenu`.
*/
selectNode : function(widget, node, event) {
if (!node.hasClass("selected")) {
widget.target.find(".ui-organigram-node.selected").removeClass("selected");
node.addClass("selected");
if (widget.hasBehavior(event)) {
var options = {
params: [
{ name: widget.id + "_selectNode", value: node.data("rowkey") }
]
};
widget.cfg.behaviors[event].call(widget, options);
}
}
},
/**
* Sets up the event listeners for dragging and dropping nodes.
* @private
*/
setupDragAndDrop : function() {
var widget = this;
var nodes = this.target.find(".ui-organigram-node");
var draggableNodes = nodes.filter(".draggable");
var droppableNodes = nodes.filter(".droppable");
var initialDragPosition = {
x: 0,
y: 0
};
draggableNodes.draggable({
zIndex: 100,
opacity: 0.7,
cursor: "move",
helper: "clone",
distance: 60,
revert: "invalid",
revertDuration: 200,
snapMode: "inner",
// overwrite start/drag to support browser scaling/zooming
start: function(event) {
initialDragPosition.x = event.clientX;
initialDragPosition.y = event.clientY;
},
drag: function(event, ui) {
var original = ui.originalPosition;
var zoomFactor = 1.0;
if (widget.zoomFactor) {
zoomFactor = widget.zoomFactor;
}
ui.position = {
left: (event.clientX - initialDragPosition.x + original.left) / zoomFactor,
top: (event.clientY - initialDragPosition.y + original.top ) / zoomFactor
};
}
});
droppableNodes.droppable({
accept: ".ui-organigram-node.draggable",
activeClass: "drag-active",
hoverClass: "drop-hover"
});
// drop & drop happens in the target dom
// but moving the actual nodes happens in the source li/ul dom
// after dropping, we redraw the organigram from the source
droppableNodes.on("drop", function (event, ui) {
// lookup target node in source DOM
var targetId = $(this).data("rowkey");
var targetLi = widget.source.find("li").filter(function () {
return $(this).data("rowkey") === targetId;
});
var targetUl = targetLi.children("ul");
// lookup source node in source DOM
var sourceId = ui.draggable.data("rowkey");
var sourceLi = widget.source.find("li").filter(function () {
return $(this).data("rowkey") === sourceId;
});
var sourceUl = sourceLi.parent("ul");
// ignore the current drop?
var ignore = false;
// ignore moving to the current parent
if (sourceLi.data("parent-rowkey") === targetId)
{
ignore = true;
}
// ignore moving to the direct child
if (targetLi.data("parent-rowkey") === sourceId)
{
ignore = true;
}
// ignore moving to childs
targetLi.parents().each(function() {
if ($(this).data("parent-rowkey") === sourceId) {
ignore = true;
return false;
}
});
if (ignore) {
return false;
}
// add new children
if (targetUl.length > 0) {
targetUl.append(sourceLi);
}
else {
targetLi.append("
");
targetLi.children("ul").append(sourceLi);
}
// remove children if empty
if (sourceUl.children().length === 0) {
sourceUl.remove();
}
// add "leaf" class if the last item was removed from the parent
var oldParent = widget.source.find("li").filter(function () {
return $(this).data("rowkey") === sourceLi.data("parent-rowkey");
});
if (oldParent.children("ul").length === 0) {
oldParent.addClass("leaf");
}
// remove leave class if a node was added to a leaf node
targetLi.removeClass("leaf");
// update parent
sourceLi.data("parent-rowkey", targetId);
sourceLi.attr("data-parent-rowkey", targetId);
// call behavior
if (widget.hasBehavior("dragdrop")) {
var options = {
params: [
{ name: widget.id + "_dragNode", value: sourceId },
{ name: widget.id + "_dropNode", value: targetId }
]
};
widget.cfg.behaviors["dragdrop"].call(widget, options);
}
widget.redraw = true;
});
// redraw from source after drop
draggableNodes.on("dragstop", function (event, ui) {
// redraw only if the item was dropped successfully
if (widget.redraw) {
widget.draw();
widget.redraw = false;
}
});
},
/**
* Sets up the buttons for the global controls, such as the buttons for zooming in and out.
* @private
*/
setupControls : function() {
var widget = this;
if (this.cfg.zoom) {
this.jq.children(".controls").remove();
var controls = $("").appendTo(this.jq);
var controlsTable = $("
").appendTo(controls);
if (!this.zoomFactor) {
this.zoomFactor = 1.0;
}
else {
this.zoom(this.zoomFactor);
}
var zoomIn = $("
").appendTo(appendTo);
var row = $("
").appendTo(cell);
for (var j = 0; j < leafChildNodes.length; j++) {
// add connector line
if (j !== 0 && this.cfg.leafNodeConnectorHeight > 0) {
leafTable.append($("
© 2015 - 2024 Weber Informatics LLC | Privacy Policy