manual updates to js syntax
mcyph
parent
8d5296163c
commit
a599a51ef9
|
|
@ -2,294 +2,265 @@
|
||||||
* Copyright (c) 2006-2015, JGraph Ltd
|
* Copyright (c) 2006-2015, JGraph Ltd
|
||||||
* Copyright (c) 2006-2015, Gaudenz Alder
|
* Copyright (c) 2006-2015, Gaudenz Alder
|
||||||
*/
|
*/
|
||||||
/**
|
|
||||||
* Class: mxCellHighlight
|
|
||||||
*
|
|
||||||
* A helper class to highlight cells. Here is an example for a given cell.
|
|
||||||
*
|
|
||||||
* (code)
|
|
||||||
* var highlight = new mxCellHighlight(graph, '#ff0000', 2);
|
|
||||||
* highlight.highlight(graph.view.getState(cell)));
|
|
||||||
* (end)
|
|
||||||
*
|
|
||||||
* Constructor: mxCellHighlight
|
|
||||||
*
|
|
||||||
* Constructs a cell highlight.
|
|
||||||
*/
|
|
||||||
function mxCellHighlight(graph, highlightColor, strokeWidth, dashed)
|
|
||||||
{
|
|
||||||
if (graph != null)
|
|
||||||
{
|
|
||||||
this.graph = graph;
|
|
||||||
this.highlightColor = (highlightColor != null) ? highlightColor : mxConstants.DEFAULT_VALID_COLOR;
|
|
||||||
this.strokeWidth = (strokeWidth != null) ? strokeWidth : mxConstants.HIGHLIGHT_STROKEWIDTH;
|
|
||||||
this.dashed = (dashed != null) ? dashed : false;
|
|
||||||
this.opacity = mxConstants.HIGHLIGHT_OPACITY;
|
|
||||||
|
|
||||||
// Updates the marker if the graph changes
|
class mxCellHighlight {
|
||||||
this.repaintHandler = mxUtils.bind(this, ()=>{
|
/**
|
||||||
{
|
* Variable: keepOnTop
|
||||||
// Updates reference to state
|
*
|
||||||
if (this.state != null)
|
* Specifies if the highlights should appear on top of everything
|
||||||
{
|
* else in the overlay pane. Default is false.
|
||||||
var tmp = this.graph.view.getState(this.state.cell);
|
*/
|
||||||
|
keepOnTop = false;
|
||||||
if (tmp == null)
|
|
||||||
{
|
/**
|
||||||
this.hide();
|
* Variable: graph
|
||||||
}
|
*
|
||||||
else
|
* Reference to the enclosing <mxGraph>.
|
||||||
{
|
*/
|
||||||
this.state = tmp;
|
graph = null;
|
||||||
this.repaint();
|
|
||||||
|
/**
|
||||||
|
* Variable: state
|
||||||
|
*
|
||||||
|
* Reference to the <mxCellState>.
|
||||||
|
*/
|
||||||
|
state = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Variable: spacing
|
||||||
|
*
|
||||||
|
* Specifies the spacing between the highlight for vertices and the vertex.
|
||||||
|
* Default is 2.
|
||||||
|
*/
|
||||||
|
spacing = 2;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Variable: resetHandler
|
||||||
|
*
|
||||||
|
* Holds the handler that automatically invokes reset if the highlight
|
||||||
|
* should be hidden.
|
||||||
|
*/
|
||||||
|
resetHandler = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Class: mxCellHighlight
|
||||||
|
*
|
||||||
|
* A helper class to highlight cells. Here is an example for a given cell.
|
||||||
|
*
|
||||||
|
* (code)
|
||||||
|
* var highlight = new mxCellHighlight(graph, '#ff0000', 2);
|
||||||
|
* highlight.highlight(graph.view.getState(cell)));
|
||||||
|
* (end)
|
||||||
|
*
|
||||||
|
* Constructor: mxCellHighlight
|
||||||
|
*
|
||||||
|
* Constructs a cell highlight.
|
||||||
|
*/
|
||||||
|
constructor(graph, highlightColor, strokeWidth, dashed) {
|
||||||
|
if (graph != null) {
|
||||||
|
this.graph = graph;
|
||||||
|
this.highlightColor = (highlightColor != null) ? highlightColor : mxConstants.DEFAULT_VALID_COLOR;
|
||||||
|
this.strokeWidth = (strokeWidth != null) ? strokeWidth : mxConstants.HIGHLIGHT_STROKEWIDTH;
|
||||||
|
this.dashed = (dashed != null) ? dashed : false;
|
||||||
|
this.opacity = mxConstants.HIGHLIGHT_OPACITY;
|
||||||
|
|
||||||
|
// Updates the marker if the graph changes
|
||||||
|
this.repaintHandler = () => {
|
||||||
|
// Updates reference to state
|
||||||
|
if (this.state != null) {
|
||||||
|
var tmp = this.graph.view.getState(this.state.cell);
|
||||||
|
|
||||||
|
if (tmp == null) {
|
||||||
|
this.hide();
|
||||||
|
} else {
|
||||||
|
this.state = tmp;
|
||||||
|
this.repaint();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.graph.getView().addListener(mxEvent.SCALE, this.repaintHandler);
|
||||||
|
this.graph.getView().addListener(mxEvent.TRANSLATE, this.repaintHandler);
|
||||||
|
this.graph.getView().addListener(mxEvent.SCALE_AND_TRANSLATE, this.repaintHandler);
|
||||||
|
this.graph.getModel().addListener(mxEvent.CHANGE, this.repaintHandler);
|
||||||
|
|
||||||
|
// Hides the marker if the current root changes
|
||||||
|
this.resetHandler = () => {
|
||||||
|
this.hide();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.graph.getView().addListener(mxEvent.DOWN, this.resetHandler);
|
||||||
|
this.graph.getView().addListener(mxEvent.UP, this.resetHandler);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: setHighlightColor
|
||||||
|
*
|
||||||
|
* Sets the color of the rectangle used to highlight drop targets.
|
||||||
|
*
|
||||||
|
* Parameters:
|
||||||
|
*
|
||||||
|
* color - String that represents the new highlight color.
|
||||||
|
*/
|
||||||
|
setHighlightColor = (color) => {
|
||||||
|
this.highlightColor = color;
|
||||||
|
|
||||||
|
if (this.shape != null) {
|
||||||
|
this.shape.stroke = color;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: drawHighlight
|
||||||
|
*
|
||||||
|
* Creates and returns the highlight shape for the given state.
|
||||||
|
*/
|
||||||
|
drawHighlight = () => {
|
||||||
|
this.shape = this.createShape();
|
||||||
|
this.repaint();
|
||||||
|
|
||||||
|
if (!this.keepOnTop && this.shape.node.parentNode.firstChild != this.shape.node) {
|
||||||
|
this.shape.node.parentNode.insertBefore(this.shape.node, this.shape.node.parentNode.firstChild);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: createShape
|
||||||
|
*
|
||||||
|
* Creates and returns the highlight shape for the given state.
|
||||||
|
*/
|
||||||
|
createShape = () => {
|
||||||
|
var shape = this.graph.cellRenderer.createShape(this.state);
|
||||||
|
|
||||||
|
shape.svgStrokeTolerance = this.graph.tolerance;
|
||||||
|
shape.points = this.state.absolutePoints;
|
||||||
|
shape.apply(this.state);
|
||||||
|
shape.stroke = this.highlightColor;
|
||||||
|
shape.opacity = this.opacity;
|
||||||
|
shape.isDashed = this.dashed;
|
||||||
|
shape.isShadow = false;
|
||||||
|
|
||||||
|
shape.dialect = (this.graph.dialect != mxConstants.DIALECT_SVG) ? mxConstants.DIALECT_VML : mxConstants.DIALECT_SVG;
|
||||||
|
shape.init(this.graph.getView().getOverlayPane());
|
||||||
|
mxEvent.redirectMouseEvents(shape.node, this.graph, this.state);
|
||||||
|
|
||||||
|
if (this.graph.dialect != mxConstants.DIALECT_SVG) {
|
||||||
|
shape.pointerEvents = false;
|
||||||
|
} else {
|
||||||
|
shape.svgPointerEvents = 'stroke';
|
||||||
|
}
|
||||||
|
|
||||||
|
return shape;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: getStrokeWidth
|
||||||
|
*
|
||||||
|
* Returns the stroke width.
|
||||||
|
*/
|
||||||
|
getStrokeWidth = (state) => {
|
||||||
|
return this.strokeWidth;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: repaint
|
||||||
|
*
|
||||||
|
* Updates the highlight after a change of the model or view.
|
||||||
|
*/
|
||||||
|
repaint = () => {
|
||||||
|
if (this.state != null && this.shape != null) {
|
||||||
|
this.shape.scale = this.state.view.scale;
|
||||||
|
|
||||||
|
if (this.graph.model.isEdge(this.state.cell)) {
|
||||||
|
this.shape.strokewidth = this.getStrokeWidth();
|
||||||
|
this.shape.points = this.state.absolutePoints;
|
||||||
|
this.shape.outline = false;
|
||||||
|
} else {
|
||||||
|
this.shape.bounds = new mxRectangle(this.state.x - this.spacing, this.state.y - this.spacing,
|
||||||
|
this.state.width + 2 * this.spacing, this.state.height + 2 * this.spacing);
|
||||||
|
this.shape.rotation = Number(this.state.style[mxConstants.STYLE_ROTATION] || '0');
|
||||||
|
this.shape.strokewidth = this.getStrokeWidth() / this.state.view.scale;
|
||||||
|
this.shape.outline = true;
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
this.graph.getView().addListener(mxEvent.SCALE, this.repaintHandler);
|
// Uses cursor from shape in highlight
|
||||||
this.graph.getView().addListener(mxEvent.TRANSLATE, this.repaintHandler);
|
if (this.state.shape != null) {
|
||||||
this.graph.getView().addListener(mxEvent.SCALE_AND_TRANSLATE, this.repaintHandler);
|
this.shape.setCursor(this.state.shape.getCursor());
|
||||||
this.graph.getModel().addListener(mxEvent.CHANGE, this.repaintHandler);
|
}
|
||||||
|
|
||||||
// Hides the marker if the current root changes
|
|
||||||
this.resetHandler = mxUtils.bind(this, ()=>{
|
|
||||||
{
|
|
||||||
this.hide();
|
|
||||||
});
|
|
||||||
|
|
||||||
this.graph.getView().addListener(mxEvent.DOWN, this.resetHandler);
|
this.shape.redraw();
|
||||||
this.graph.getView().addListener(mxEvent.UP, this.resetHandler);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Variable: keepOnTop
|
|
||||||
*
|
|
||||||
* Specifies if the highlights should appear on top of everything
|
|
||||||
* else in the overlay pane. Default is false.
|
|
||||||
*/
|
|
||||||
keepOnTop = false;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Variable: graph
|
|
||||||
*
|
|
||||||
* Reference to the enclosing <mxGraph>.
|
|
||||||
*/
|
|
||||||
graph = null;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Variable: state
|
|
||||||
*
|
|
||||||
* Reference to the <mxCellState>.
|
|
||||||
*/
|
|
||||||
state = null;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Variable: spacing
|
|
||||||
*
|
|
||||||
* Specifies the spacing between the highlight for vertices and the vertex.
|
|
||||||
* Default is 2.
|
|
||||||
*/
|
|
||||||
spacing = 2;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Variable: resetHandler
|
|
||||||
*
|
|
||||||
* Holds the handler that automatically invokes reset if the highlight
|
|
||||||
* should be hidden.
|
|
||||||
*/
|
|
||||||
resetHandler = null;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: setHighlightColor
|
|
||||||
*
|
|
||||||
* Sets the color of the rectangle used to highlight drop targets.
|
|
||||||
*
|
|
||||||
* Parameters:
|
|
||||||
*
|
|
||||||
* color - String that represents the new highlight color.
|
|
||||||
*/
|
|
||||||
setHighlightColor = (color)=>{
|
|
||||||
{
|
|
||||||
this.highlightColor = color;
|
|
||||||
|
|
||||||
if (this.shape != null)
|
|
||||||
{
|
|
||||||
this.shape.stroke = color;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: drawHighlight
|
|
||||||
*
|
|
||||||
* Creates and returns the highlight shape for the given state.
|
|
||||||
*/
|
|
||||||
drawHighlight = ()=>{
|
|
||||||
{
|
|
||||||
this.shape = this.createShape();
|
|
||||||
this.repaint();
|
|
||||||
|
|
||||||
if (!this.keepOnTop && this.shape.node.parentNode.firstChild != this.shape.node)
|
|
||||||
{
|
|
||||||
this.shape.node.parentNode.insertBefore(this.shape.node, this.shape.node.parentNode.firstChild);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: createShape
|
|
||||||
*
|
|
||||||
* Creates and returns the highlight shape for the given state.
|
|
||||||
*/
|
|
||||||
createShape = ()=>{
|
|
||||||
{
|
|
||||||
var shape = this.graph.cellRenderer.createShape(this.state);
|
|
||||||
|
|
||||||
shape.svgStrokeTolerance = this.graph.tolerance;
|
|
||||||
shape.points = this.state.absolutePoints;
|
|
||||||
shape.apply(this.state);
|
|
||||||
shape.stroke = this.highlightColor;
|
|
||||||
shape.opacity = this.opacity;
|
|
||||||
shape.isDashed = this.dashed;
|
|
||||||
shape.isShadow = false;
|
|
||||||
|
|
||||||
shape.dialect = (this.graph.dialect != mxConstants.DIALECT_SVG) ? mxConstants.DIALECT_VML : mxConstants.DIALECT_SVG;
|
|
||||||
shape.init(this.graph.getView().getOverlayPane());
|
|
||||||
mxEvent.redirectMouseEvents(shape.node, this.graph, this.state);
|
|
||||||
|
|
||||||
if (this.graph.dialect != mxConstants.DIALECT_SVG)
|
|
||||||
{
|
|
||||||
shape.pointerEvents = false;
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
shape.svgPointerEvents = 'stroke';
|
|
||||||
}
|
|
||||||
|
|
||||||
return shape;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: getStrokeWidth
|
|
||||||
*
|
|
||||||
* Returns the stroke width.
|
|
||||||
*/
|
|
||||||
getStrokeWidth = (state)=>{
|
|
||||||
{
|
|
||||||
return this.strokeWidth;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: repaint
|
|
||||||
*
|
|
||||||
* Updates the highlight after a change of the model or view.
|
|
||||||
*/
|
|
||||||
repaint = ()=>{
|
|
||||||
{
|
|
||||||
if (this.state != null && this.shape != null)
|
|
||||||
{
|
|
||||||
this.shape.scale = this.state.view.scale;
|
|
||||||
|
|
||||||
if (this.graph.model.isEdge(this.state.cell))
|
|
||||||
{
|
|
||||||
this.shape.strokewidth = this.getStrokeWidth();
|
|
||||||
this.shape.points = this.state.absolutePoints;
|
|
||||||
this.shape.outline = false;
|
|
||||||
}
|
}
|
||||||
else
|
};
|
||||||
{
|
|
||||||
this.shape.bounds = new mxRectangle(this.state.x - this.spacing, this.state.y - this.spacing,
|
/**
|
||||||
this.state.width + 2 * this.spacing, this.state.height + 2 * this.spacing);
|
* Function: hide
|
||||||
this.shape.rotation = Number(this.state.style[mxConstants.STYLE_ROTATION] || '0');
|
*
|
||||||
this.shape.strokewidth = this.getStrokeWidth() / this.state.view.scale;
|
* Resets the state of the cell marker.
|
||||||
this.shape.outline = true;
|
*/
|
||||||
|
hide = () => {
|
||||||
|
this.highlight(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: mark
|
||||||
|
*
|
||||||
|
* Marks the <markedState> and fires a <mark> event.
|
||||||
|
*/
|
||||||
|
highlight = (state) => {
|
||||||
|
if (this.state != state) {
|
||||||
|
if (this.shape != null) {
|
||||||
|
this.shape.destroy();
|
||||||
|
this.shape = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.state = state;
|
||||||
|
|
||||||
|
if (this.state != null) {
|
||||||
|
this.drawHighlight();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: isHighlightAt
|
||||||
|
*
|
||||||
|
* Returns true if this highlight is at the given position.
|
||||||
|
*/
|
||||||
|
isHighlightAt = (x, y) => {
|
||||||
|
var hit = false;
|
||||||
|
|
||||||
|
if (this.shape != null && document.elementFromPoint != null) {
|
||||||
|
var elt = document.elementFromPoint(x, y);
|
||||||
|
|
||||||
|
while (elt != null) {
|
||||||
|
if (elt == this.shape.node) {
|
||||||
|
hit = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
elt = elt.parentNode;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Uses cursor from shape in highlight
|
return hit;
|
||||||
if (this.state.shape != null)
|
};
|
||||||
{
|
|
||||||
this.shape.setCursor(this.state.shape.getCursor());
|
|
||||||
}
|
|
||||||
|
|
||||||
this.shape.redraw();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Function: hide
|
* Function: destroy
|
||||||
*
|
*
|
||||||
* Resets the state of the cell marker.
|
* Destroys the handler and all its resources and DOM nodes.
|
||||||
*/
|
*/
|
||||||
hide = ()=>{
|
destroy = () => {
|
||||||
{
|
this.graph.getView().removeListener(this.resetHandler);
|
||||||
this.highlight(null);
|
this.graph.getView().removeListener(this.repaintHandler);
|
||||||
};
|
this.graph.getModel().removeListener(this.repaintHandler);
|
||||||
|
|
||||||
/**
|
if (this.shape != null) {
|
||||||
* Function: mark
|
|
||||||
*
|
|
||||||
* Marks the <markedState> and fires a <mark> event.
|
|
||||||
*/
|
|
||||||
highlight = (state)=>{
|
|
||||||
{
|
|
||||||
if (this.state != state)
|
|
||||||
{
|
|
||||||
if (this.shape != null)
|
|
||||||
{
|
|
||||||
this.shape.destroy();
|
this.shape.destroy();
|
||||||
this.shape = null;
|
this.shape = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.state = state;
|
|
||||||
|
|
||||||
if (this.state != null)
|
|
||||||
{
|
|
||||||
this.drawHighlight();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
/**
|
export default mxCellHighlight;
|
||||||
* Function: isHighlightAt
|
|
||||||
*
|
|
||||||
* Returns true if this highlight is at the given position.
|
|
||||||
*/
|
|
||||||
isHighlightAt = (x, y)=>{
|
|
||||||
{
|
|
||||||
var hit = false;
|
|
||||||
|
|
||||||
if (this.shape != null && document.elementFromPoint != null)
|
|
||||||
{
|
|
||||||
var elt = document.elementFromPoint(x, y);
|
|
||||||
|
|
||||||
while (elt != null)
|
|
||||||
{
|
|
||||||
if (elt == this.shape.node)
|
|
||||||
{
|
|
||||||
hit = true;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
elt = elt.parentNode;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return hit;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: destroy
|
|
||||||
*
|
|
||||||
* Destroys the handler and all its resources and DOM nodes.
|
|
||||||
*/
|
|
||||||
destroy = ()=>{
|
|
||||||
{
|
|
||||||
this.graph.getView().removeListener(this.resetHandler);
|
|
||||||
this.graph.getView().removeListener(this.repaintHandler);
|
|
||||||
this.graph.getModel().removeListener(this.repaintHandler);
|
|
||||||
|
|
||||||
if (this.shape != null)
|
|
||||||
{
|
|
||||||
this.shape.destroy();
|
|
||||||
this.shape = null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
|
||||||
|
|
@ -2,429 +2,394 @@
|
||||||
* Copyright (c) 2006-2015, JGraph Ltd
|
* Copyright (c) 2006-2015, JGraph Ltd
|
||||||
* Copyright (c) 2006-2015, Gaudenz Alder
|
* Copyright (c) 2006-2015, Gaudenz Alder
|
||||||
*/
|
*/
|
||||||
/**
|
|
||||||
* Class: mxCellMarker
|
|
||||||
*
|
|
||||||
* A helper class to process mouse locations and highlight cells.
|
|
||||||
*
|
|
||||||
* Helper class to highlight cells. To add a cell marker to an existing graph
|
|
||||||
* for highlighting all cells, the following code is used:
|
|
||||||
*
|
|
||||||
* (code)
|
|
||||||
* var marker = new mxCellMarker(graph);
|
|
||||||
* graph.addMouseListener({
|
|
||||||
* mouseDown: ()=> {},
|
|
||||||
* mouseMove: (sender, me)=>
|
|
||||||
* {
|
|
||||||
* marker.process(me);
|
|
||||||
* },
|
|
||||||
* mouseUp: ()=> {}
|
|
||||||
* });
|
|
||||||
* (end)
|
|
||||||
*
|
|
||||||
* Event: mxEvent.MARK
|
|
||||||
*
|
|
||||||
* Fires after a cell has been marked or unmarked. The <code>state</code>
|
|
||||||
* property contains the marked <mxCellState> or null if no state is marked.
|
|
||||||
*
|
|
||||||
* Constructor: mxCellMarker
|
|
||||||
*
|
|
||||||
* Constructs a new cell marker.
|
|
||||||
*
|
|
||||||
* Parameters:
|
|
||||||
*
|
|
||||||
* graph - Reference to the enclosing <mxGraph>.
|
|
||||||
* validColor - Optional marker color for valid states. Default is
|
|
||||||
* <mxConstants.DEFAULT_VALID_COLOR>.
|
|
||||||
* invalidColor - Optional marker color for invalid states. Default is
|
|
||||||
* <mxConstants.DEFAULT_INVALID_COLOR>.
|
|
||||||
* hotspot - Portion of the width and hight where a state intersects a
|
|
||||||
* given coordinate pair. A value of 0 means always highlight. Default is
|
|
||||||
* <mxConstants.DEFAULT_HOTSPOT>.
|
|
||||||
*/
|
|
||||||
function mxCellMarker(graph, validColor, invalidColor, hotspot)
|
|
||||||
{
|
|
||||||
mxEventSource.call(this);
|
|
||||||
|
|
||||||
if (graph != null)
|
|
||||||
{
|
|
||||||
this.graph = graph;
|
|
||||||
this.validColor = (validColor != null) ? validColor : mxConstants.DEFAULT_VALID_COLOR;
|
|
||||||
this.invalidColor = (invalidColor != null) ? invalidColor : mxConstants.DEFAULT_INVALID_COLOR;
|
|
||||||
this.hotspot = (hotspot != null) ? hotspot : mxConstants.DEFAULT_HOTSPOT;
|
|
||||||
|
|
||||||
this.highlight = new mxCellHighlight(graph);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
class mxCellMarker extends mxEventSource {
|
||||||
* Extends mxEventSource.
|
/**
|
||||||
*/
|
* Variable: graph
|
||||||
mxUtils.extend(mxCellMarker, mxEventSource);
|
*
|
||||||
|
* Reference to the enclosing <mxGraph>.
|
||||||
|
*/
|
||||||
|
graph = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Variable: graph
|
* Variable: enabled
|
||||||
*
|
*
|
||||||
* Reference to the enclosing <mxGraph>.
|
* Specifies if the marker is enabled. Default is true.
|
||||||
*/
|
*/
|
||||||
graph = null;
|
enabled = true;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Variable: enabled
|
* Variable: hotspot
|
||||||
*
|
*
|
||||||
* Specifies if the marker is enabled. Default is true.
|
* Specifies the portion of the width and height that should trigger
|
||||||
*/
|
* a highlight. The area around the center of the cell to be marked is used
|
||||||
enabled = true;
|
* as the hotspot. Possible values are between 0 and 1. Default is
|
||||||
|
* mxConstants.DEFAULT_HOTSPOT.
|
||||||
|
*/
|
||||||
|
hotspot = mxConstants.DEFAULT_HOTSPOT;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Variable: hotspot
|
* Variable: hotspotEnabled
|
||||||
*
|
*
|
||||||
* Specifies the portion of the width and height that should trigger
|
* Specifies if the hotspot is enabled. Default is false.
|
||||||
* a highlight. The area around the center of the cell to be marked is used
|
*/
|
||||||
* as the hotspot. Possible values are between 0 and 1. Default is
|
hotspotEnabled = false;
|
||||||
* mxConstants.DEFAULT_HOTSPOT.
|
|
||||||
*/
|
|
||||||
hotspot = mxConstants.DEFAULT_HOTSPOT;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Variable: hotspotEnabled
|
* Variable: validColor
|
||||||
*
|
*
|
||||||
* Specifies if the hotspot is enabled. Default is false.
|
* Holds the valid marker color.
|
||||||
*/
|
*/
|
||||||
hotspotEnabled = false;
|
validColor = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Variable: validColor
|
* Variable: invalidColor
|
||||||
*
|
*
|
||||||
* Holds the valid marker color.
|
* Holds the invalid marker color.
|
||||||
*/
|
*/
|
||||||
validColor = null;
|
invalidColor = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Variable: invalidColor
|
* Variable: currentColor
|
||||||
*
|
*
|
||||||
* Holds the invalid marker color.
|
* Holds the current marker color.
|
||||||
*/
|
*/
|
||||||
invalidColor = null;
|
currentColor = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Variable: currentColor
|
* Variable: validState
|
||||||
*
|
*
|
||||||
* Holds the current marker color.
|
* Holds the marked <mxCellState> if it is valid.
|
||||||
*/
|
*/
|
||||||
currentColor = null;
|
validState = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Variable: validState
|
* Variable: markedState
|
||||||
*
|
*
|
||||||
* Holds the marked <mxCellState> if it is valid.
|
* Holds the marked <mxCellState>.
|
||||||
*/
|
*/
|
||||||
validState = null;
|
markedState = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Variable: markedState
|
* Class: mxCellMarker
|
||||||
*
|
*
|
||||||
* Holds the marked <mxCellState>.
|
* A helper class to process mouse locations and highlight cells.
|
||||||
*/
|
*
|
||||||
markedState = null;
|
* Helper class to highlight cells. To add a cell marker to an existing graph
|
||||||
|
* for highlighting all cells, the following code is used:
|
||||||
|
*
|
||||||
|
* (code)
|
||||||
|
* var marker = new mxCellMarker(graph);
|
||||||
|
* graph.addMouseListener({
|
||||||
|
* mouseDown: ()=> {},
|
||||||
|
* mouseMove: (sender, me)=>
|
||||||
|
* {
|
||||||
|
* marker.process(me);
|
||||||
|
* },
|
||||||
|
* mouseUp: ()=> {}
|
||||||
|
* });
|
||||||
|
* (end)
|
||||||
|
*
|
||||||
|
* Event: mxEvent.MARK
|
||||||
|
*
|
||||||
|
* Fires after a cell has been marked or unmarked. The <code>state</code>
|
||||||
|
* property contains the marked <mxCellState> or null if no state is marked.
|
||||||
|
*
|
||||||
|
* Constructor: mxCellMarker
|
||||||
|
*
|
||||||
|
* Constructs a new cell marker.
|
||||||
|
*
|
||||||
|
* Parameters:
|
||||||
|
*
|
||||||
|
* graph - Reference to the enclosing <mxGraph>.
|
||||||
|
* validColor - Optional marker color for valid states. Default is
|
||||||
|
* <mxConstants.DEFAULT_VALID_COLOR>.
|
||||||
|
* invalidColor - Optional marker color for invalid states. Default is
|
||||||
|
* <mxConstants.DEFAULT_INVALID_COLOR>.
|
||||||
|
* hotspot - Portion of the width and hight where a state intersects a
|
||||||
|
* given coordinate pair. A value of 0 means always highlight. Default is
|
||||||
|
* <mxConstants.DEFAULT_HOTSPOT>.
|
||||||
|
*/
|
||||||
|
constructor(graph, validColor, invalidColor, hotspot) {
|
||||||
|
super();
|
||||||
|
|
||||||
/**
|
if (graph != null) {
|
||||||
* Function: setEnabled
|
this.graph = graph;
|
||||||
*
|
this.validColor = (validColor != null) ? validColor : mxConstants.DEFAULT_VALID_COLOR;
|
||||||
* Enables or disables event handling. This implementation
|
this.invalidColor = (invalidColor != null) ? invalidColor : mxConstants.DEFAULT_INVALID_COLOR;
|
||||||
* updates <enabled>.
|
this.hotspot = (hotspot != null) ? hotspot : mxConstants.DEFAULT_HOTSPOT;
|
||||||
*
|
|
||||||
* Parameters:
|
|
||||||
*
|
|
||||||
* enabled - Boolean that specifies the new enabled state.
|
|
||||||
*/
|
|
||||||
setEnabled = (enabled)=>
|
|
||||||
{
|
|
||||||
this.enabled = enabled;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
this.highlight = new mxCellHighlight(graph);
|
||||||
* Function: isEnabled
|
|
||||||
*
|
|
||||||
* Returns true if events are handled. This implementation
|
|
||||||
* returns <enabled>.
|
|
||||||
*/
|
|
||||||
isEnabled = ()=>
|
|
||||||
{
|
|
||||||
return this.enabled;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: setHotspot
|
|
||||||
*
|
|
||||||
* Sets the <hotspot>.
|
|
||||||
*/
|
|
||||||
setHotspot = (hotspot)=>
|
|
||||||
{
|
|
||||||
this.hotspot = hotspot;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: getHotspot
|
|
||||||
*
|
|
||||||
* Returns the <hotspot>.
|
|
||||||
*/
|
|
||||||
getHotspot = ()=>
|
|
||||||
{
|
|
||||||
return this.hotspot;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: setHotspotEnabled
|
|
||||||
*
|
|
||||||
* Specifies whether the hotspot should be used in <intersects>.
|
|
||||||
*/
|
|
||||||
setHotspotEnabled = (enabled)=>
|
|
||||||
{
|
|
||||||
this.hotspotEnabled = enabled;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: isHotspotEnabled
|
|
||||||
*
|
|
||||||
* Returns true if hotspot is used in <intersects>.
|
|
||||||
*/
|
|
||||||
isHotspotEnabled = ()=>
|
|
||||||
{
|
|
||||||
return this.hotspotEnabled;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: hasValidState
|
|
||||||
*
|
|
||||||
* Returns true if <validState> is not null.
|
|
||||||
*/
|
|
||||||
hasValidState = ()=>
|
|
||||||
{
|
|
||||||
return this.validState != null;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: getValidState
|
|
||||||
*
|
|
||||||
* Returns the <validState>.
|
|
||||||
*/
|
|
||||||
getValidState = ()=>
|
|
||||||
{
|
|
||||||
return this.validState;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: getMarkedState
|
|
||||||
*
|
|
||||||
* Returns the <markedState>.
|
|
||||||
*/
|
|
||||||
getMarkedState = ()=>
|
|
||||||
{
|
|
||||||
return this.markedState;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: reset
|
|
||||||
*
|
|
||||||
* Resets the state of the cell marker.
|
|
||||||
*/
|
|
||||||
reset = ()=>
|
|
||||||
{
|
|
||||||
this.validState = null;
|
|
||||||
|
|
||||||
if (this.markedState != null)
|
|
||||||
{
|
|
||||||
this.markedState = null;
|
|
||||||
this.unmark();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: process
|
|
||||||
*
|
|
||||||
* Processes the given event and cell and marks the state returned by
|
|
||||||
* <getState> with the color returned by <getMarkerColor>. If the
|
|
||||||
* markerColor is not null, then the state is stored in <markedState>. If
|
|
||||||
* <isValidState> returns true, then the state is stored in <validState>
|
|
||||||
* regardless of the marker color. The state is returned regardless of the
|
|
||||||
* marker color and valid state.
|
|
||||||
*/
|
|
||||||
process = (me)=>
|
|
||||||
{
|
|
||||||
var state = null;
|
|
||||||
|
|
||||||
if (this.isEnabled())
|
|
||||||
{
|
|
||||||
state = this.getState(me);
|
|
||||||
this.setCurrentState(state, me);
|
|
||||||
}
|
|
||||||
|
|
||||||
return state;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: setCurrentState
|
|
||||||
*
|
|
||||||
* Sets and marks the current valid state.
|
|
||||||
*/
|
|
||||||
setCurrentState = (state, me, color)=>
|
|
||||||
{
|
|
||||||
var isValid = (state != null) ? this.isValidState(state) : false;
|
|
||||||
color = (color != null) ? color : this.getMarkerColor(me.getEvent(), state, isValid);
|
|
||||||
|
|
||||||
if (isValid)
|
|
||||||
{
|
|
||||||
this.validState = state;
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
this.validState = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (state != this.markedState || color != this.currentColor)
|
|
||||||
{
|
|
||||||
this.currentColor = color;
|
|
||||||
|
|
||||||
if (state != null && this.currentColor != null)
|
|
||||||
{
|
|
||||||
this.markedState = state;
|
|
||||||
this.mark();
|
|
||||||
}
|
}
|
||||||
else if (this.markedState != null)
|
};
|
||||||
{
|
|
||||||
|
/**
|
||||||
|
* Function: setEnabled
|
||||||
|
*
|
||||||
|
* Enables or disables event handling. This implementation
|
||||||
|
* updates <enabled>.
|
||||||
|
*
|
||||||
|
* Parameters:
|
||||||
|
*
|
||||||
|
* enabled - Boolean that specifies the new enabled state.
|
||||||
|
*/
|
||||||
|
setEnabled = (enabled) => {
|
||||||
|
this.enabled = enabled;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: isEnabled
|
||||||
|
*
|
||||||
|
* Returns true if events are handled. This implementation
|
||||||
|
* returns <enabled>.
|
||||||
|
*/
|
||||||
|
isEnabled = () => {
|
||||||
|
return this.enabled;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: setHotspot
|
||||||
|
*
|
||||||
|
* Sets the <hotspot>.
|
||||||
|
*/
|
||||||
|
setHotspot = (hotspot) => {
|
||||||
|
this.hotspot = hotspot;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: getHotspot
|
||||||
|
*
|
||||||
|
* Returns the <hotspot>.
|
||||||
|
*/
|
||||||
|
getHotspot = () => {
|
||||||
|
return this.hotspot;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: setHotspotEnabled
|
||||||
|
*
|
||||||
|
* Specifies whether the hotspot should be used in <intersects>.
|
||||||
|
*/
|
||||||
|
setHotspotEnabled = (enabled) => {
|
||||||
|
this.hotspotEnabled = enabled;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: isHotspotEnabled
|
||||||
|
*
|
||||||
|
* Returns true if hotspot is used in <intersects>.
|
||||||
|
*/
|
||||||
|
isHotspotEnabled = () => {
|
||||||
|
return this.hotspotEnabled;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: hasValidState
|
||||||
|
*
|
||||||
|
* Returns true if <validState> is not null.
|
||||||
|
*/
|
||||||
|
hasValidState = () => {
|
||||||
|
return this.validState != null;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: getValidState
|
||||||
|
*
|
||||||
|
* Returns the <validState>.
|
||||||
|
*/
|
||||||
|
getValidState = () => {
|
||||||
|
return this.validState;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: getMarkedState
|
||||||
|
*
|
||||||
|
* Returns the <markedState>.
|
||||||
|
*/
|
||||||
|
getMarkedState = () => {
|
||||||
|
return this.markedState;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: reset
|
||||||
|
*
|
||||||
|
* Resets the state of the cell marker.
|
||||||
|
*/
|
||||||
|
reset = () => {
|
||||||
|
this.validState = null;
|
||||||
|
|
||||||
|
if (this.markedState != null) {
|
||||||
this.markedState = null;
|
this.markedState = null;
|
||||||
this.unmark();
|
this.unmark();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Function: markCell
|
* Function: process
|
||||||
*
|
*
|
||||||
* Marks the given cell using the given color, or <validColor> if no color is specified.
|
* Processes the given event and cell and marks the state returned by
|
||||||
*/
|
* <getState> with the color returned by <getMarkerColor>. If the
|
||||||
markCell = (cell, color)=>
|
* markerColor is not null, then the state is stored in <markedState>. If
|
||||||
{
|
* <isValidState> returns true, then the state is stored in <validState>
|
||||||
var state = this.graph.getView().getState(cell);
|
* regardless of the marker color. The state is returned regardless of the
|
||||||
|
* marker color and valid state.
|
||||||
if (state != null)
|
*/
|
||||||
{
|
process = (me) => {
|
||||||
this.currentColor = (color != null) ? color : this.validColor;
|
var state = null;
|
||||||
this.markedState = state;
|
|
||||||
|
if (this.isEnabled()) {
|
||||||
|
state = this.getState(me);
|
||||||
|
this.setCurrentState(state, me);
|
||||||
|
}
|
||||||
|
|
||||||
|
return state;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: setCurrentState
|
||||||
|
*
|
||||||
|
* Sets and marks the current valid state.
|
||||||
|
*/
|
||||||
|
setCurrentState = (state, me, color) => {
|
||||||
|
var isValid = (state != null) ? this.isValidState(state) : false;
|
||||||
|
color = (color != null) ? color : this.getMarkerColor(me.getEvent(), state, isValid);
|
||||||
|
|
||||||
|
if (isValid) {
|
||||||
|
this.validState = state;
|
||||||
|
} else {
|
||||||
|
this.validState = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state != this.markedState || color != this.currentColor) {
|
||||||
|
this.currentColor = color;
|
||||||
|
|
||||||
|
if (state != null && this.currentColor != null) {
|
||||||
|
this.markedState = state;
|
||||||
|
this.mark();
|
||||||
|
} else if (this.markedState != null) {
|
||||||
|
this.markedState = null;
|
||||||
|
this.unmark();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: markCell
|
||||||
|
*
|
||||||
|
* Marks the given cell using the given color, or <validColor> if no color is specified.
|
||||||
|
*/
|
||||||
|
markCell = (cell, color) => {
|
||||||
|
var state = this.graph.getView().getState(cell);
|
||||||
|
|
||||||
|
if (state != null) {
|
||||||
|
this.currentColor = (color != null) ? color : this.validColor;
|
||||||
|
this.markedState = state;
|
||||||
|
this.mark();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: mark
|
||||||
|
*
|
||||||
|
* Marks the <markedState> and fires a <mark> event.
|
||||||
|
*/
|
||||||
|
mark = () => {
|
||||||
|
this.highlight.setHighlightColor(this.currentColor);
|
||||||
|
this.highlight.highlight(this.markedState);
|
||||||
|
this.fireEvent(new mxEventObject(mxEvent.MARK, 'state', this.markedState));
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: unmark
|
||||||
|
*
|
||||||
|
* Hides the marker and fires a <mark> event.
|
||||||
|
*/
|
||||||
|
unmark = () => {
|
||||||
this.mark();
|
this.mark();
|
||||||
}
|
};
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Function: mark
|
* Function: isValidState
|
||||||
*
|
*
|
||||||
* Marks the <markedState> and fires a <mark> event.
|
* Returns true if the given <mxCellState> is a valid state. If this
|
||||||
*/
|
* returns true, then the state is stored in <validState>. The return value
|
||||||
mark = ()=>
|
* of this method is used as the argument for <getMarkerColor>.
|
||||||
{
|
*/
|
||||||
this.highlight.setHighlightColor(this.currentColor);
|
isValidState = (state) => {
|
||||||
this.highlight.highlight(this.markedState);
|
return true;
|
||||||
this.fireEvent(new mxEventObject(mxEvent.MARK, 'state', this.markedState));
|
};
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Function: unmark
|
* Function: getMarkerColor
|
||||||
*
|
*
|
||||||
* Hides the marker and fires a <mark> event.
|
* Returns the valid- or invalidColor depending on the value of isValid.
|
||||||
*/
|
* The given <mxCellState> is ignored by this implementation.
|
||||||
unmark = ()=>
|
*/
|
||||||
{
|
getMarkerColor = (evt, state, isValid) => {
|
||||||
this.mark();
|
return (isValid) ? this.validColor : this.invalidColor;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Function: isValidState
|
* Function: getState
|
||||||
*
|
*
|
||||||
* Returns true if the given <mxCellState> is a valid state. If this
|
* Uses <getCell>, <getStateToMark> and <intersects> to return the
|
||||||
* returns true, then the state is stored in <validState>. The return value
|
* <mxCellState> for the given <mxMouseEvent>.
|
||||||
* of this method is used as the argument for <getMarkerColor>.
|
*/
|
||||||
*/
|
getState = (me) => {
|
||||||
isValidState = (state)=>
|
var view = this.graph.getView();
|
||||||
{
|
var cell = this.getCell(me);
|
||||||
return true;
|
var state = this.getStateToMark(view.getState(cell));
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
return (state != null && this.intersects(state, me)) ? state : null;
|
||||||
* Function: getMarkerColor
|
};
|
||||||
*
|
|
||||||
* Returns the valid- or invalidColor depending on the value of isValid.
|
|
||||||
* The given <mxCellState> is ignored by this implementation.
|
|
||||||
*/
|
|
||||||
getMarkerColor = (evt, state, isValid)=>
|
|
||||||
{
|
|
||||||
return (isValid) ? this.validColor : this.invalidColor;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Function: getState
|
* Function: getCell
|
||||||
*
|
*
|
||||||
* Uses <getCell>, <getStateToMark> and <intersects> to return the
|
* Returns the <mxCell> for the given event and cell. This returns the
|
||||||
* <mxCellState> for the given <mxMouseEvent>.
|
* given cell.
|
||||||
*/
|
*/
|
||||||
getState = (me)=>
|
getCell = (me) => {
|
||||||
{
|
return me.getCell();
|
||||||
var view = this.graph.getView();
|
};
|
||||||
var cell = this.getCell(me);
|
|
||||||
var state = this.getStateToMark(view.getState(cell));
|
|
||||||
|
|
||||||
return (state != null && this.intersects(state, me)) ? state : null;
|
/**
|
||||||
};
|
* Function: getStateToMark
|
||||||
|
*
|
||||||
|
* Returns the <mxCellState> to be marked for the given <mxCellState> under
|
||||||
|
* the mouse. This returns the given state.
|
||||||
|
*/
|
||||||
|
getStateToMark = (state) => {
|
||||||
|
return state;
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Function: getCell
|
* Function: intersects
|
||||||
*
|
*
|
||||||
* Returns the <mxCell> for the given event and cell. This returns the
|
* Returns true if the given coordinate pair intersects the given state.
|
||||||
* given cell.
|
* This returns true if the <hotspot> is 0 or the coordinates are inside
|
||||||
*/
|
* the hotspot for the given cell state.
|
||||||
getCell = (me)=>
|
*/
|
||||||
{
|
intersects = (state, me) => {
|
||||||
return me.getCell();
|
if (this.hotspotEnabled) {
|
||||||
};
|
return mxUtils.intersectsHotspot(state, me.getGraphX(), me.getGraphY(),
|
||||||
|
this.hotspot, mxConstants.MIN_HOTSPOT_SIZE,
|
||||||
|
mxConstants.MAX_HOTSPOT_SIZE);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
return true;
|
||||||
* Function: getStateToMark
|
};
|
||||||
*
|
|
||||||
* Returns the <mxCellState> to be marked for the given <mxCellState> under
|
|
||||||
* the mouse. This returns the given state.
|
|
||||||
*/
|
|
||||||
getStateToMark = (state)=>
|
|
||||||
{
|
|
||||||
return state;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Function: intersects
|
* Function: destroy
|
||||||
*
|
*
|
||||||
* Returns true if the given coordinate pair intersects the given state.
|
* Destroys the handler and all its resources and DOM nodes.
|
||||||
* This returns true if the <hotspot> is 0 or the coordinates are inside
|
*/
|
||||||
* the hotspot for the given cell state.
|
destroy = () => {
|
||||||
*/
|
this.graph.getView().removeListener(this.resetHandler);
|
||||||
intersects = (state, me)=>
|
this.graph.getModel().removeListener(this.resetHandler);
|
||||||
{
|
this.highlight.destroy();
|
||||||
if (this.hotspotEnabled)
|
};
|
||||||
{
|
}
|
||||||
return mxUtils.intersectsHotspot(state, me.getGraphX(), me.getGraphY(),
|
|
||||||
this.hotspot, mxConstants.MIN_HOTSPOT_SIZE,
|
|
||||||
mxConstants.MAX_HOTSPOT_SIZE);
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
export default mxCellMarker;
|
||||||
* Function: destroy
|
|
||||||
*
|
|
||||||
* Destroys the handler and all its resources and DOM nodes.
|
|
||||||
*/
|
|
||||||
destroy = ()=>
|
|
||||||
{
|
|
||||||
this.graph.getView().removeListener(this.resetHandler);
|
|
||||||
this.graph.getModel().removeListener(this.resetHandler);
|
|
||||||
this.highlight.destroy();
|
|
||||||
};
|
|
||||||
|
|
|
||||||
|
|
@ -2,135 +2,131 @@
|
||||||
* Copyright (c) 2006-2015, JGraph Ltd
|
* Copyright (c) 2006-2015, JGraph Ltd
|
||||||
* Copyright (c) 2006-2015, Gaudenz Alder
|
* Copyright (c) 2006-2015, Gaudenz Alder
|
||||||
*/
|
*/
|
||||||
/**
|
|
||||||
* Class: mxCellTracker
|
|
||||||
*
|
|
||||||
* Event handler that highlights cells. Inherits from <mxCellMarker>.
|
|
||||||
*
|
|
||||||
* Example:
|
|
||||||
*
|
|
||||||
* (code)
|
|
||||||
* new mxCellTracker(graph, '#00FF00');
|
|
||||||
* (end)
|
|
||||||
*
|
|
||||||
* For detecting dragEnter, dragOver and dragLeave on cells, the following
|
|
||||||
* code can be used:
|
|
||||||
*
|
|
||||||
* (code)
|
|
||||||
* graph.addMouseListener(
|
|
||||||
* {
|
|
||||||
* cell: null,
|
|
||||||
* mouseDown: (sender, me)=> { },
|
|
||||||
* mouseMove: (sender, me)=>
|
|
||||||
* {
|
|
||||||
* var tmp = me.getCell();
|
|
||||||
*
|
|
||||||
* if (tmp != this.cell)
|
|
||||||
* {
|
|
||||||
* if (this.cell != null)
|
|
||||||
* {
|
|
||||||
* this.dragLeave(me.getEvent(), this.cell);
|
|
||||||
* }
|
|
||||||
*
|
|
||||||
* this.cell = tmp;
|
|
||||||
*
|
|
||||||
* if (this.cell != null)
|
|
||||||
* {
|
|
||||||
* this.dragEnter(me.getEvent(), this.cell);
|
|
||||||
* }
|
|
||||||
* }
|
|
||||||
*
|
|
||||||
* if (this.cell != null)
|
|
||||||
* {
|
|
||||||
* this.dragOver(me.getEvent(), this.cell);
|
|
||||||
* }
|
|
||||||
* },
|
|
||||||
* mouseUp: (sender, me)=> { },
|
|
||||||
* dragEnter: (evt, cell)=>
|
|
||||||
* {
|
|
||||||
* mxLog.debug('dragEnter', cell.value);
|
|
||||||
* },
|
|
||||||
* dragOver: (evt, cell)=>
|
|
||||||
* {
|
|
||||||
* mxLog.debug('dragOver', cell.value);
|
|
||||||
* },
|
|
||||||
* dragLeave: (evt, cell)=>
|
|
||||||
* {
|
|
||||||
* mxLog.debug('dragLeave', cell.value);
|
|
||||||
* }
|
|
||||||
* });
|
|
||||||
* (end)
|
|
||||||
*
|
|
||||||
* Constructor: mxCellTracker
|
|
||||||
*
|
|
||||||
* Constructs an event handler that highlights cells.
|
|
||||||
*
|
|
||||||
* Parameters:
|
|
||||||
*
|
|
||||||
* graph - Reference to the enclosing <mxGraph>.
|
|
||||||
* color - Color of the highlight. Default is blue.
|
|
||||||
* funct - Optional JavaScript function that is used to override
|
|
||||||
* <mxCellMarker.getCell>.
|
|
||||||
*/
|
|
||||||
function mxCellTracker(graph, color, funct)
|
|
||||||
{
|
|
||||||
mxCellMarker.call(this, graph, color);
|
|
||||||
|
|
||||||
this.graph.addMouseListener(this);
|
class mxCellTracker extends mxCellMarker {
|
||||||
|
/**
|
||||||
if (funct != null)
|
* Class: mxCellTracker
|
||||||
{
|
*
|
||||||
this.getCell = funct;
|
* Event handler that highlights cells. Inherits from <mxCellMarker>.
|
||||||
}
|
*
|
||||||
};
|
* Example:
|
||||||
|
*
|
||||||
|
* (code)
|
||||||
|
* new mxCellTracker(graph, '#00FF00');
|
||||||
|
* (end)
|
||||||
|
*
|
||||||
|
* For detecting dragEnter, dragOver and dragLeave on cells, the following
|
||||||
|
* code can be used:
|
||||||
|
*
|
||||||
|
* (code)
|
||||||
|
* graph.addMouseListener(
|
||||||
|
* {
|
||||||
|
* cell: null,
|
||||||
|
* mouseDown: (sender, me)=> { },
|
||||||
|
* mouseMove: (sender, me)=>
|
||||||
|
* {
|
||||||
|
* var tmp = me.getCell();
|
||||||
|
*
|
||||||
|
* if (tmp != this.cell)
|
||||||
|
* {
|
||||||
|
* if (this.cell != null)
|
||||||
|
* {
|
||||||
|
* this.dragLeave(me.getEvent(), this.cell);
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* this.cell = tmp;
|
||||||
|
*
|
||||||
|
* if (this.cell != null)
|
||||||
|
* {
|
||||||
|
* this.dragEnter(me.getEvent(), this.cell);
|
||||||
|
* }
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* if (this.cell != null)
|
||||||
|
* {
|
||||||
|
* this.dragOver(me.getEvent(), this.cell);
|
||||||
|
* }
|
||||||
|
* },
|
||||||
|
* mouseUp: (sender, me)=> { },
|
||||||
|
* dragEnter: (evt, cell)=>
|
||||||
|
* {
|
||||||
|
* mxLog.debug('dragEnter', cell.value);
|
||||||
|
* },
|
||||||
|
* dragOver: (evt, cell)=>
|
||||||
|
* {
|
||||||
|
* mxLog.debug('dragOver', cell.value);
|
||||||
|
* },
|
||||||
|
* dragLeave: (evt, cell)=>
|
||||||
|
* {
|
||||||
|
* mxLog.debug('dragLeave', cell.value);
|
||||||
|
* }
|
||||||
|
* });
|
||||||
|
* (end)
|
||||||
|
*
|
||||||
|
* Constructor: mxCellTracker
|
||||||
|
*
|
||||||
|
* Constructs an event handler that highlights cells.
|
||||||
|
*
|
||||||
|
* Parameters:
|
||||||
|
*
|
||||||
|
* graph - Reference to the enclosing <mxGraph>.
|
||||||
|
* color - Color of the highlight. Default is blue.
|
||||||
|
* funct - Optional JavaScript function that is used to override
|
||||||
|
* <mxCellMarker.getCell>.
|
||||||
|
*/
|
||||||
|
constructor(graph, color, funct) {
|
||||||
|
super(graph, color);
|
||||||
|
|
||||||
/**
|
this.graph.addMouseListener(this);
|
||||||
* Extends mxCellMarker.
|
|
||||||
*/
|
|
||||||
mxUtils.extend(mxCellTracker, mxCellMarker);
|
|
||||||
|
|
||||||
/**
|
if (funct != null) {
|
||||||
* Function: mouseDown
|
this.getCell = funct;
|
||||||
*
|
}
|
||||||
* Ignores the event. The event is not consumed.
|
};
|
||||||
*/
|
|
||||||
mouseDown = (sender, me)=> { };
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Function: mouseMove
|
* Function: mouseDown
|
||||||
*
|
*
|
||||||
* Handles the event by highlighting the cell under the mousepointer if it
|
* Ignores the event. The event is not consumed.
|
||||||
* is over the hotspot region of the cell.
|
*/
|
||||||
*/
|
mouseDown = (sender, me) => {
|
||||||
mouseMove = (sender, me)=>
|
};
|
||||||
{
|
|
||||||
if (this.isEnabled())
|
|
||||||
{
|
|
||||||
this.process(me);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Function: mouseUp
|
* Function: mouseMove
|
||||||
*
|
*
|
||||||
* Handles the event by reseting the highlight.
|
* Handles the event by highlighting the cell under the mousepointer if it
|
||||||
*/
|
* is over the hotspot region of the cell.
|
||||||
mouseUp = (sender, me)=> { };
|
*/
|
||||||
|
mouseMove = (sender, me) => {
|
||||||
|
if (this.isEnabled()) {
|
||||||
|
this.process(me);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Function: destroy
|
* Function: mouseUp
|
||||||
*
|
*
|
||||||
* Destroys the object and all its resources and DOM nodes. This doesn't
|
* Handles the event by reseting the highlight.
|
||||||
* normally need to be called. It is called automatically when the window
|
*/
|
||||||
* unloads.
|
mouseUp = (sender, me) => {
|
||||||
*/
|
};
|
||||||
destroy = ()=>
|
|
||||||
{
|
|
||||||
if (!this.destroyed)
|
|
||||||
{
|
|
||||||
this.destroyed = true;
|
|
||||||
|
|
||||||
this.graph.removeMouseListener(this);
|
/**
|
||||||
destroy.apply(this);
|
* Function: destroy
|
||||||
}
|
*
|
||||||
};
|
* Destroys the object and all its resources and DOM nodes. This doesn't
|
||||||
|
* normally need to be called. It is called automatically when the window
|
||||||
|
* unloads.
|
||||||
|
*/
|
||||||
|
destroy = () => {
|
||||||
|
if (!this.destroyed) {
|
||||||
|
this.destroyed = true;
|
||||||
|
|
||||||
|
this.graph.removeMouseListener(this);
|
||||||
|
destroy.apply(this);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default mxCellTracker;
|
||||||
|
|
|
||||||
|
|
@ -2,217 +2,199 @@
|
||||||
* Copyright (c) 2006-2015, JGraph Ltd
|
* Copyright (c) 2006-2015, JGraph Ltd
|
||||||
* Copyright (c) 2006-2015, Gaudenz Alder
|
* Copyright (c) 2006-2015, Gaudenz Alder
|
||||||
*/
|
*/
|
||||||
/**
|
|
||||||
* Class: mxPopupMenuHandler
|
|
||||||
*
|
|
||||||
* Event handler that creates popupmenus.
|
|
||||||
*
|
|
||||||
* Constructor: mxPopupMenuHandler
|
|
||||||
*
|
|
||||||
* Constructs an event handler that creates a <mxPopupMenu>.
|
|
||||||
*/
|
|
||||||
function mxPopupMenuHandler(graph, factoryMethod)
|
|
||||||
{
|
|
||||||
if (graph != null)
|
|
||||||
{
|
|
||||||
this.graph = graph;
|
|
||||||
this.factoryMethod = factoryMethod;
|
|
||||||
this.graph.addMouseListener(this);
|
|
||||||
|
|
||||||
// Does not show menu if any touch gestures take place after the trigger
|
|
||||||
this.gestureHandler = mxUtils.bind(this, (sender, eo)=>
|
|
||||||
{
|
|
||||||
this.inTolerance = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
this.graph.addListener(mxEvent.GESTURE, this.gestureHandler);
|
|
||||||
|
|
||||||
this.init();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
class mxPopupMenuHandler extends mxPopupMenu {
|
||||||
* Extends mxPopupMenu.
|
/**
|
||||||
*/
|
* Variable: graph
|
||||||
mxPopupMenuHandler.prototype = new mxPopupMenu();
|
*
|
||||||
constructor = mxPopupMenuHandler;
|
* Reference to the enclosing <mxGraph>.
|
||||||
|
*/
|
||||||
|
graph = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Variable: graph
|
* Variable: selectOnPopup
|
||||||
*
|
*
|
||||||
* Reference to the enclosing <mxGraph>.
|
* Specifies if cells should be selected if a popupmenu is displayed for
|
||||||
*/
|
* them. Default is true.
|
||||||
graph = null;
|
*/
|
||||||
|
selectOnPopup = true;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Variable: selectOnPopup
|
* Variable: clearSelectionOnBackground
|
||||||
*
|
*
|
||||||
* Specifies if cells should be selected if a popupmenu is displayed for
|
* Specifies if cells should be deselected if a popupmenu is displayed for
|
||||||
* them. Default is true.
|
* the diagram background. Default is true.
|
||||||
*/
|
*/
|
||||||
selectOnPopup = true;
|
clearSelectionOnBackground = true;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Variable: clearSelectionOnBackground
|
* Variable: triggerX
|
||||||
*
|
*
|
||||||
* Specifies if cells should be deselected if a popupmenu is displayed for
|
* X-coordinate of the mouse down event.
|
||||||
* the diagram background. Default is true.
|
*/
|
||||||
*/
|
triggerX = null;
|
||||||
clearSelectionOnBackground = true;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Variable: triggerX
|
* Variable: triggerY
|
||||||
*
|
*
|
||||||
* X-coordinate of the mouse down event.
|
* Y-coordinate of the mouse down event.
|
||||||
*/
|
*/
|
||||||
triggerX = null;
|
triggerY = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Variable: triggerY
|
* Variable: screenX
|
||||||
*
|
*
|
||||||
* Y-coordinate of the mouse down event.
|
* Screen X-coordinate of the mouse down event.
|
||||||
*/
|
*/
|
||||||
triggerY = null;
|
screenX = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Variable: screenX
|
* Variable: screenY
|
||||||
*
|
*
|
||||||
* Screen X-coordinate of the mouse down event.
|
* Screen Y-coordinate of the mouse down event.
|
||||||
*/
|
*/
|
||||||
screenX = null;
|
screenY = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Variable: screenY
|
* Class: mxPopupMenuHandler
|
||||||
*
|
*
|
||||||
* Screen Y-coordinate of the mouse down event.
|
* Event handler that creates popupmenus.
|
||||||
*/
|
*
|
||||||
screenY = null;
|
* Constructor: mxPopupMenuHandler
|
||||||
|
*
|
||||||
|
* Constructs an event handler that creates a <mxPopupMenu>.
|
||||||
|
*/
|
||||||
|
constructor(graph, factoryMethod) {
|
||||||
|
// super not called
|
||||||
|
if (graph != null) {
|
||||||
|
this.graph = graph;
|
||||||
|
this.factoryMethod = factoryMethod;
|
||||||
|
this.graph.addMouseListener(this);
|
||||||
|
|
||||||
/**
|
// Does not show menu if any touch gestures take place after the trigger
|
||||||
* Function: init
|
this.gestureHandler = mxUtils.bind(this, (sender, eo) => {
|
||||||
*
|
this.inTolerance = false;
|
||||||
* Initializes the shapes required for this vertex handler.
|
});
|
||||||
*/
|
|
||||||
init = ()=>
|
|
||||||
{
|
|
||||||
// Supercall
|
|
||||||
init.apply(this);
|
|
||||||
|
|
||||||
// Hides the tooltip if the mouse is over
|
this.graph.addListener(mxEvent.GESTURE, this.gestureHandler);
|
||||||
// the context menu
|
|
||||||
mxEvent.addGestureListeners(this.div, mxUtils.bind(this, (evt)=>
|
|
||||||
{
|
|
||||||
this.graph.tooltipHandler.hide();
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
this.init();
|
||||||
* Function: isSelectOnPopup
|
|
||||||
*
|
|
||||||
* Hook for returning if a cell should be selected for a given <mxMouseEvent>.
|
|
||||||
* This implementation returns <selectOnPopup>.
|
|
||||||
*/
|
|
||||||
isSelectOnPopup = (me)=>
|
|
||||||
{
|
|
||||||
return this.selectOnPopup;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: mouseDown
|
|
||||||
*
|
|
||||||
* Handles the event by initiating the panning. By consuming the event all
|
|
||||||
* subsequent events of the gesture are redirected to this handler.
|
|
||||||
*/
|
|
||||||
mouseDown = (sender, me)=>
|
|
||||||
{
|
|
||||||
if (this.isEnabled() && !mxEvent.isMultiTouchEvent(me.getEvent()))
|
|
||||||
{
|
|
||||||
// Hides the popupmenu if is is being displayed
|
|
||||||
this.hideMenu();
|
|
||||||
this.triggerX = me.getGraphX();
|
|
||||||
this.triggerY = me.getGraphY();
|
|
||||||
this.screenX = mxEvent.getMainEvent(me.getEvent()).screenX;
|
|
||||||
this.screenY = mxEvent.getMainEvent(me.getEvent()).screenY;
|
|
||||||
this.popupTrigger = this.isPopupTrigger(me);
|
|
||||||
this.inTolerance = true;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: mouseMove
|
|
||||||
*
|
|
||||||
* Handles the event by updating the panning on the graph.
|
|
||||||
*/
|
|
||||||
mouseMove = (sender, me)=>
|
|
||||||
{
|
|
||||||
// Popup trigger may change on mouseUp so ignore it
|
|
||||||
if (this.inTolerance && this.screenX != null && this.screenY != null)
|
|
||||||
{
|
|
||||||
if (Math.abs(mxEvent.getMainEvent(me.getEvent()).screenX - this.screenX) > this.graph.tolerance ||
|
|
||||||
Math.abs(mxEvent.getMainEvent(me.getEvent()).screenY - this.screenY) > this.graph.tolerance)
|
|
||||||
{
|
|
||||||
this.inTolerance = false;
|
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Function: mouseUp
|
* Function: init
|
||||||
*
|
*
|
||||||
* Handles the event by setting the translation on the view or showing the
|
* Initializes the shapes required for this vertex handler.
|
||||||
* popupmenu.
|
*/
|
||||||
*/
|
init = () => {
|
||||||
mouseUp = (sender, me)=>
|
// Supercall
|
||||||
{
|
init.apply(this);
|
||||||
if (this.popupTrigger && this.inTolerance && this.triggerX != null && this.triggerY != null)
|
|
||||||
{
|
|
||||||
var cell = this.getCellForPopupEvent(me);
|
|
||||||
|
|
||||||
// Selects the cell for which the context menu is being displayed
|
// Hides the tooltip if the mouse is over
|
||||||
if (this.graph.isEnabled() && this.isSelectOnPopup(me) &&
|
// the context menu
|
||||||
cell != null && !this.graph.isCellSelected(cell))
|
mxEvent.addGestureListeners(this.div, mxUtils.bind(this, (evt) => {
|
||||||
{
|
this.graph.tooltipHandler.hide();
|
||||||
this.graph.setSelectionCell(cell);
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: isSelectOnPopup
|
||||||
|
*
|
||||||
|
* Hook for returning if a cell should be selected for a given <mxMouseEvent>.
|
||||||
|
* This implementation returns <selectOnPopup>.
|
||||||
|
*/
|
||||||
|
isSelectOnPopup = (me) => {
|
||||||
|
return this.selectOnPopup;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: mouseDown
|
||||||
|
*
|
||||||
|
* Handles the event by initiating the panning. By consuming the event all
|
||||||
|
* subsequent events of the gesture are redirected to this handler.
|
||||||
|
*/
|
||||||
|
mouseDown = (sender, me) => {
|
||||||
|
if (this.isEnabled() && !mxEvent.isMultiTouchEvent(me.getEvent())) {
|
||||||
|
// Hides the popupmenu if is is being displayed
|
||||||
|
this.hideMenu();
|
||||||
|
this.triggerX = me.getGraphX();
|
||||||
|
this.triggerY = me.getGraphY();
|
||||||
|
this.screenX = mxEvent.getMainEvent(me.getEvent()).screenX;
|
||||||
|
this.screenY = mxEvent.getMainEvent(me.getEvent()).screenY;
|
||||||
|
this.popupTrigger = this.isPopupTrigger(me);
|
||||||
|
this.inTolerance = true;
|
||||||
}
|
}
|
||||||
else if (this.clearSelectionOnBackground && cell == null)
|
};
|
||||||
{
|
|
||||||
this.graph.clearSelection();
|
/**
|
||||||
|
* Function: mouseMove
|
||||||
|
*
|
||||||
|
* Handles the event by updating the panning on the graph.
|
||||||
|
*/
|
||||||
|
mouseMove = (sender, me) => {
|
||||||
|
// Popup trigger may change on mouseUp so ignore it
|
||||||
|
if (this.inTolerance && this.screenX != null && this.screenY != null) {
|
||||||
|
if (Math.abs(mxEvent.getMainEvent(me.getEvent()).screenX - this.screenX) > this.graph.tolerance ||
|
||||||
|
Math.abs(mxEvent.getMainEvent(me.getEvent()).screenY - this.screenY) > this.graph.tolerance) {
|
||||||
|
this.inTolerance = false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
};
|
||||||
// Hides the tooltip if there is one
|
|
||||||
this.graph.tooltipHandler.hide();
|
|
||||||
|
|
||||||
// Menu is shifted by 1 pixel so that the mouse up event
|
/**
|
||||||
// is routed via the underlying shape instead of the DIV
|
* Function: mouseUp
|
||||||
var origin = mxUtils.getScrollOrigin();
|
*
|
||||||
this.popup(me.getX() + origin.x + 1, me.getY() + origin.y + 1, cell, me.getEvent());
|
* Handles the event by setting the translation on the view or showing the
|
||||||
me.consume();
|
* popupmenu.
|
||||||
}
|
*/
|
||||||
|
mouseUp = (sender, me) => {
|
||||||
this.popupTrigger = false;
|
if (this.popupTrigger && this.inTolerance && this.triggerX != null && this.triggerY != null) {
|
||||||
this.inTolerance = false;
|
var cell = this.getCellForPopupEvent(me);
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
// Selects the cell for which the context menu is being displayed
|
||||||
* Function: getCellForPopupEvent
|
if (this.graph.isEnabled() && this.isSelectOnPopup(me) &&
|
||||||
*
|
cell != null && !this.graph.isCellSelected(cell)) {
|
||||||
* Hook to return the cell for the mouse up popup trigger handling.
|
this.graph.setSelectionCell(cell);
|
||||||
*/
|
} else if (this.clearSelectionOnBackground && cell == null) {
|
||||||
getCellForPopupEvent = (me)=>
|
this.graph.clearSelection();
|
||||||
{
|
}
|
||||||
return me.getCell();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
// Hides the tooltip if there is one
|
||||||
* Function: destroy
|
this.graph.tooltipHandler.hide();
|
||||||
*
|
|
||||||
* Destroys the handler and all its resources and DOM nodes.
|
// Menu is shifted by 1 pixel so that the mouse up event
|
||||||
*/
|
// is routed via the underlying shape instead of the DIV
|
||||||
destroy = ()=>
|
var origin = mxUtils.getScrollOrigin();
|
||||||
{
|
this.popup(me.getX() + origin.x + 1, me.getY() + origin.y + 1, cell, me.getEvent());
|
||||||
this.graph.removeMouseListener(this);
|
me.consume();
|
||||||
this.graph.removeListener(this.gestureHandler);
|
}
|
||||||
|
|
||||||
// Supercall
|
this.popupTrigger = false;
|
||||||
destroy.apply(this);
|
this.inTolerance = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: getCellForPopupEvent
|
||||||
|
*
|
||||||
|
* Hook to return the cell for the mouse up popup trigger handling.
|
||||||
|
*/
|
||||||
|
getCellForPopupEvent = (me) => {
|
||||||
|
return me.getCell();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: destroy
|
||||||
|
*
|
||||||
|
* Destroys the handler and all its resources and DOM nodes.
|
||||||
|
*/
|
||||||
|
destroy = () => {
|
||||||
|
this.graph.removeMouseListener(this);
|
||||||
|
this.graph.removeListener(this.gestureHandler);
|
||||||
|
|
||||||
|
// Supercall
|
||||||
|
destroy.apply(this);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default mxPopupMenuHandler;
|
||||||
|
|
|
||||||
|
|
@ -2,417 +2,382 @@
|
||||||
* Copyright (c) 2006-2016, JGraph Ltd
|
* Copyright (c) 2006-2016, JGraph Ltd
|
||||||
* Copyright (c) 2006-2016, Gaudenz Alder
|
* Copyright (c) 2006-2016, Gaudenz Alder
|
||||||
*/
|
*/
|
||||||
/**
|
|
||||||
* Class: mxRubberband
|
|
||||||
*
|
|
||||||
* Event handler that selects rectangular regions. This is not built-into
|
|
||||||
* <mxGraph>. To enable rubberband selection in a graph, use the following code.
|
|
||||||
*
|
|
||||||
* Example:
|
|
||||||
*
|
|
||||||
* (code)
|
|
||||||
* var rubberband = new mxRubberband(graph);
|
|
||||||
* (end)
|
|
||||||
*
|
|
||||||
* Constructor: mxRubberband
|
|
||||||
*
|
|
||||||
* Constructs an event handler that selects rectangular regions in the graph
|
|
||||||
* using rubberband selection.
|
|
||||||
*/
|
|
||||||
function mxRubberband(graph)
|
|
||||||
{
|
|
||||||
if (graph != null)
|
|
||||||
{
|
|
||||||
this.graph = graph;
|
|
||||||
this.graph.addMouseListener(this);
|
|
||||||
|
|
||||||
// Handles force rubberband event
|
class mxRubberband {
|
||||||
this.forceRubberbandHandler = mxUtils.bind(this, (sender, evt)=>
|
/**
|
||||||
{
|
* Variable: defaultOpacity
|
||||||
var evtName = evt.getProperty('eventName');
|
*
|
||||||
var me = evt.getProperty('event');
|
* Specifies the default opacity to be used for the rubberband div. Default
|
||||||
|
* is 20.
|
||||||
|
*/
|
||||||
|
defaultOpacity = 20;
|
||||||
|
|
||||||
if (evtName == mxEvent.MOUSE_DOWN && this.isForceRubberbandEvent(me))
|
/**
|
||||||
{
|
* Variable: enabled
|
||||||
var offset = mxUtils.getOffset(this.graph.container);
|
*
|
||||||
var origin = mxUtils.getScrollOrigin(this.graph.container);
|
* Specifies if events are handled. Default is true.
|
||||||
origin.x -= offset.x;
|
*/
|
||||||
origin.y -= offset.y;
|
enabled = true;
|
||||||
this.start(me.getX() + origin.x, me.getY() + origin.y);
|
|
||||||
me.consume(false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this.graph.addListener(mxEvent.FIRE_MOUSE_EVENT, this.forceRubberbandHandler);
|
/**
|
||||||
|
* Variable: div
|
||||||
|
*
|
||||||
|
* Holds the DIV element which is currently visible.
|
||||||
|
*/
|
||||||
|
div = null;
|
||||||
|
|
||||||
// Repaints the marquee after autoscroll
|
/**
|
||||||
this.panHandler = mxUtils.bind(this, ()=>
|
* Variable: sharedDiv
|
||||||
{
|
*
|
||||||
this.repaint();
|
* Holds the DIV element which is used to display the rubberband.
|
||||||
});
|
*/
|
||||||
|
sharedDiv = null;
|
||||||
|
|
||||||
this.graph.addListener(mxEvent.PAN, this.panHandler);
|
/**
|
||||||
|
* Variable: currentX
|
||||||
|
*
|
||||||
|
* Holds the value of the x argument in the last call to <update>.
|
||||||
|
*/
|
||||||
|
currentX = 0;
|
||||||
|
|
||||||
// Does not show menu if any touch gestures take place after the trigger
|
/**
|
||||||
this.gestureHandler = mxUtils.bind(this, (sender, eo)=>
|
* Variable: currentY
|
||||||
{
|
*
|
||||||
if (this.first != null)
|
* Holds the value of the y argument in the last call to <update>.
|
||||||
{
|
*/
|
||||||
this.reset();
|
currentY = 0;
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this.graph.addListener(mxEvent.GESTURE, this.gestureHandler);
|
/**
|
||||||
}
|
* Variable: fadeOut
|
||||||
};
|
*
|
||||||
|
* Optional fade out effect. Default is false.
|
||||||
|
*/
|
||||||
|
fadeOut = false;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Variable: defaultOpacity
|
* Class: mxRubberband
|
||||||
*
|
*
|
||||||
* Specifies the default opacity to be used for the rubberband div. Default
|
* Event handler that selects rectangular regions. This is not built-into
|
||||||
* is 20.
|
* <mxGraph>. To enable rubberband selection in a graph, use the following code.
|
||||||
*/
|
*
|
||||||
defaultOpacity = 20;
|
* Example:
|
||||||
|
*
|
||||||
|
* (code)
|
||||||
|
* var rubberband = new mxRubberband(graph);
|
||||||
|
* (end)
|
||||||
|
*
|
||||||
|
* Constructor: mxRubberband
|
||||||
|
*
|
||||||
|
* Constructs an event handler that selects rectangular regions in the graph
|
||||||
|
* using rubberband selection.
|
||||||
|
*/
|
||||||
|
constructor(graph) {
|
||||||
|
if (graph != null) {
|
||||||
|
this.graph = graph;
|
||||||
|
this.graph.addMouseListener(this);
|
||||||
|
|
||||||
/**
|
// Handles force rubberband event
|
||||||
* Variable: enabled
|
this.forceRubberbandHandler = mxUtils.bind(this, (sender, evt) => {
|
||||||
*
|
var evtName = evt.getProperty('eventName');
|
||||||
* Specifies if events are handled. Default is true.
|
var me = evt.getProperty('event');
|
||||||
*/
|
|
||||||
enabled = true;
|
|
||||||
|
|
||||||
/**
|
if (evtName == mxEvent.MOUSE_DOWN && this.isForceRubberbandEvent(me)) {
|
||||||
* Variable: div
|
var offset = mxUtils.getOffset(this.graph.container);
|
||||||
*
|
var origin = mxUtils.getScrollOrigin(this.graph.container);
|
||||||
* Holds the DIV element which is currently visible.
|
origin.x -= offset.x;
|
||||||
*/
|
origin.y -= offset.y;
|
||||||
div = null;
|
this.start(me.getX() + origin.x, me.getY() + origin.y);
|
||||||
|
me.consume(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
/**
|
this.graph.addListener(mxEvent.FIRE_MOUSE_EVENT, this.forceRubberbandHandler);
|
||||||
* Variable: sharedDiv
|
|
||||||
*
|
|
||||||
* Holds the DIV element which is used to display the rubberband.
|
|
||||||
*/
|
|
||||||
sharedDiv = null;
|
|
||||||
|
|
||||||
/**
|
// Repaints the marquee after autoscroll
|
||||||
* Variable: currentX
|
this.panHandler = mxUtils.bind(this, () => {
|
||||||
*
|
this.repaint();
|
||||||
* Holds the value of the x argument in the last call to <update>.
|
});
|
||||||
*/
|
|
||||||
currentX = 0;
|
|
||||||
|
|
||||||
/**
|
this.graph.addListener(mxEvent.PAN, this.panHandler);
|
||||||
* Variable: currentY
|
|
||||||
*
|
|
||||||
* Holds the value of the y argument in the last call to <update>.
|
|
||||||
*/
|
|
||||||
currentY = 0;
|
|
||||||
|
|
||||||
/**
|
// Does not show menu if any touch gestures take place after the trigger
|
||||||
* Variable: fadeOut
|
this.gestureHandler = mxUtils.bind(this, (sender, eo) => {
|
||||||
*
|
if (this.first != null) {
|
||||||
* Optional fade out effect. Default is false.
|
this.reset();
|
||||||
*/
|
}
|
||||||
fadeOut = false;
|
});
|
||||||
|
|
||||||
/**
|
this.graph.addListener(mxEvent.GESTURE, this.gestureHandler);
|
||||||
* Function: isEnabled
|
}
|
||||||
*
|
|
||||||
* Returns true if events are handled. This implementation returns
|
|
||||||
* <enabled>.
|
|
||||||
*/
|
|
||||||
isEnabled = ()=>
|
|
||||||
{
|
|
||||||
return this.enabled;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: setEnabled
|
|
||||||
*
|
|
||||||
* Enables or disables event handling. This implementation updates
|
|
||||||
* <enabled>.
|
|
||||||
*/
|
|
||||||
setEnabled = (enabled)=>
|
|
||||||
{
|
|
||||||
this.enabled = enabled;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: isForceRubberbandEvent
|
|
||||||
*
|
|
||||||
* Returns true if the given <mxMouseEvent> should start rubberband selection.
|
|
||||||
* This implementation returns true if the alt key is pressed.
|
|
||||||
*/
|
|
||||||
isForceRubberbandEvent = (me)=>
|
|
||||||
{
|
|
||||||
return mxEvent.isAltDown(me.getEvent());
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: mouseDown
|
|
||||||
*
|
|
||||||
* Handles the event by initiating a rubberband selection. By consuming the
|
|
||||||
* event all subsequent events of the gesture are redirected to this
|
|
||||||
* handler.
|
|
||||||
*/
|
|
||||||
mouseDown = (sender, me)=>
|
|
||||||
{
|
|
||||||
if (!me.isConsumed() && this.isEnabled() && this.graph.isEnabled() &&
|
|
||||||
me.getState() == null && !mxEvent.isMultiTouchEvent(me.getEvent()))
|
|
||||||
{
|
|
||||||
var offset = mxUtils.getOffset(this.graph.container);
|
|
||||||
var origin = mxUtils.getScrollOrigin(this.graph.container);
|
|
||||||
origin.x -= offset.x;
|
|
||||||
origin.y -= offset.y;
|
|
||||||
this.start(me.getX() + origin.x, me.getY() + origin.y);
|
|
||||||
|
|
||||||
// Does not prevent the default for this event so that the
|
|
||||||
// event processing chain is still executed even if we start
|
|
||||||
// rubberbanding. This is required eg. in ExtJs to hide the
|
|
||||||
// current context menu. In mouseMove we'll make sure we're
|
|
||||||
// not selecting anything while we're rubberbanding.
|
|
||||||
me.consume(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: start
|
|
||||||
*
|
|
||||||
* Sets the start point for the rubberband selection.
|
|
||||||
*/
|
|
||||||
start = (x, y)=>
|
|
||||||
{
|
|
||||||
this.first = new mxPoint(x, y);
|
|
||||||
|
|
||||||
var container = this.graph.container;
|
|
||||||
|
|
||||||
function createMouseEvent(evt)
|
|
||||||
{
|
|
||||||
var me = new mxMouseEvent(evt);
|
|
||||||
var pt = mxUtils.convertPoint(container, me.getX(), me.getY());
|
|
||||||
|
|
||||||
me.graphX = pt.x;
|
|
||||||
me.graphY = pt.y;
|
|
||||||
|
|
||||||
return me;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
this.dragHandler = mxUtils.bind(this, (evt)=>
|
/**
|
||||||
{
|
* Function: isEnabled
|
||||||
this.mouseMove(this.graph, createMouseEvent(evt));
|
*
|
||||||
});
|
* Returns true if events are handled. This implementation returns
|
||||||
|
* <enabled>.
|
||||||
|
*/
|
||||||
|
isEnabled = () => {
|
||||||
|
return this.enabled;
|
||||||
|
};
|
||||||
|
|
||||||
this.dropHandler = mxUtils.bind(this, (evt)=>
|
/**
|
||||||
{
|
* Function: setEnabled
|
||||||
this.mouseUp(this.graph, createMouseEvent(evt));
|
*
|
||||||
});
|
* Enables or disables event handling. This implementation updates
|
||||||
|
* <enabled>.
|
||||||
|
*/
|
||||||
|
setEnabled = (enabled) => {
|
||||||
|
this.enabled = enabled;
|
||||||
|
};
|
||||||
|
|
||||||
// Workaround for rubberband stopping if the mouse leaves the container in Firefox
|
/**
|
||||||
if (mxClient.IS_FF)
|
* Function: isForceRubberbandEvent
|
||||||
{
|
*
|
||||||
mxEvent.addGestureListeners(document, null, this.dragHandler, this.dropHandler);
|
* Returns true if the given <mxMouseEvent> should start rubberband selection.
|
||||||
}
|
* This implementation returns true if the alt key is pressed.
|
||||||
};
|
*/
|
||||||
|
isForceRubberbandEvent = (me) => {
|
||||||
|
return mxEvent.isAltDown(me.getEvent());
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Function: mouseMove
|
* Function: mouseDown
|
||||||
*
|
*
|
||||||
* Handles the event by updating therubberband selection.
|
* Handles the event by initiating a rubberband selection. By consuming the
|
||||||
*/
|
* event all subsequent events of the gesture are redirected to this
|
||||||
mouseMove = (sender, me)=>
|
* handler.
|
||||||
{
|
*/
|
||||||
if (!me.isConsumed() && this.first != null)
|
mouseDown = (sender, me) => {
|
||||||
{
|
if (!me.isConsumed() && this.isEnabled() && this.graph.isEnabled() &&
|
||||||
var origin = mxUtils.getScrollOrigin(this.graph.container);
|
me.getState() == null && !mxEvent.isMultiTouchEvent(me.getEvent())) {
|
||||||
var offset = mxUtils.getOffset(this.graph.container);
|
var offset = mxUtils.getOffset(this.graph.container);
|
||||||
origin.x -= offset.x;
|
var origin = mxUtils.getScrollOrigin(this.graph.container);
|
||||||
origin.y -= offset.y;
|
origin.x -= offset.x;
|
||||||
var x = me.getX() + origin.x;
|
origin.y -= offset.y;
|
||||||
var y = me.getY() + origin.y;
|
this.start(me.getX() + origin.x, me.getY() + origin.y);
|
||||||
var dx = this.first.x - x;
|
|
||||||
var dy = this.first.y - y;
|
|
||||||
var tol = this.graph.tolerance;
|
|
||||||
|
|
||||||
if (this.div != null || Math.abs(dx) > tol || Math.abs(dy) > tol)
|
// Does not prevent the default for this event so that the
|
||||||
{
|
// event processing chain is still executed even if we start
|
||||||
if (this.div == null)
|
// rubberbanding. This is required eg. in ExtJs to hide the
|
||||||
{
|
// current context menu. In mouseMove we'll make sure we're
|
||||||
this.div = this.createShape();
|
// not selecting anything while we're rubberbanding.
|
||||||
|
me.consume(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: start
|
||||||
|
*
|
||||||
|
* Sets the start point for the rubberband selection.
|
||||||
|
*/
|
||||||
|
start = (x, y) => {
|
||||||
|
this.first = new mxPoint(x, y);
|
||||||
|
|
||||||
|
var container = this.graph.container;
|
||||||
|
|
||||||
|
function createMouseEvent(evt) {
|
||||||
|
var me = new mxMouseEvent(evt);
|
||||||
|
var pt = mxUtils.convertPoint(container, me.getX(), me.getY());
|
||||||
|
|
||||||
|
me.graphX = pt.x;
|
||||||
|
me.graphY = pt.y;
|
||||||
|
|
||||||
|
return me;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dragHandler = mxUtils.bind(this, (evt) => {
|
||||||
|
this.mouseMove(this.graph, createMouseEvent(evt));
|
||||||
|
});
|
||||||
|
|
||||||
|
this.dropHandler = mxUtils.bind(this, (evt) => {
|
||||||
|
this.mouseUp(this.graph, createMouseEvent(evt));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Workaround for rubberband stopping if the mouse leaves the container in Firefox
|
||||||
|
if (mxClient.IS_FF) {
|
||||||
|
mxEvent.addGestureListeners(document, null, this.dragHandler, this.dropHandler);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: mouseMove
|
||||||
|
*
|
||||||
|
* Handles the event by updating therubberband selection.
|
||||||
|
*/
|
||||||
|
mouseMove = (sender, me) => {
|
||||||
|
if (!me.isConsumed() && this.first != null) {
|
||||||
|
var origin = mxUtils.getScrollOrigin(this.graph.container);
|
||||||
|
var offset = mxUtils.getOffset(this.graph.container);
|
||||||
|
origin.x -= offset.x;
|
||||||
|
origin.y -= offset.y;
|
||||||
|
var x = me.getX() + origin.x;
|
||||||
|
var y = me.getY() + origin.y;
|
||||||
|
var dx = this.first.x - x;
|
||||||
|
var dy = this.first.y - y;
|
||||||
|
var tol = this.graph.tolerance;
|
||||||
|
|
||||||
|
if (this.div != null || Math.abs(dx) > tol || Math.abs(dy) > tol) {
|
||||||
|
if (this.div == null) {
|
||||||
|
this.div = this.createShape();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clears selection while rubberbanding. This is required because
|
||||||
|
// the event is not consumed in mouseDown.
|
||||||
|
mxUtils.clearSelection();
|
||||||
|
|
||||||
|
this.update(x, y);
|
||||||
|
me.consume();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clears selection while rubberbanding. This is required because
|
|
||||||
// the event is not consumed in mouseDown.
|
|
||||||
mxUtils.clearSelection();
|
|
||||||
|
|
||||||
this.update(x, y);
|
|
||||||
me.consume();
|
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Function: createShape
|
* Function: createShape
|
||||||
*
|
*
|
||||||
* Creates the rubberband selection shape.
|
* Creates the rubberband selection shape.
|
||||||
*/
|
*/
|
||||||
createShape = ()=>
|
createShape = () => {
|
||||||
{
|
if (this.sharedDiv == null) {
|
||||||
if (this.sharedDiv == null)
|
this.sharedDiv = document.createElement('div');
|
||||||
{
|
this.sharedDiv.className = 'mxRubberband';
|
||||||
this.sharedDiv = document.createElement('div');
|
mxUtils.setOpacity(this.sharedDiv, this.defaultOpacity);
|
||||||
this.sharedDiv.className = 'mxRubberband';
|
|
||||||
mxUtils.setOpacity(this.sharedDiv, this.defaultOpacity);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.graph.container.appendChild(this.sharedDiv);
|
|
||||||
var result = this.sharedDiv;
|
|
||||||
|
|
||||||
if (mxClient.IS_SVG && this.fadeOut)
|
|
||||||
{
|
|
||||||
this.sharedDiv = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: isActive
|
|
||||||
*
|
|
||||||
* Returns true if this handler is active.
|
|
||||||
*/
|
|
||||||
isActive = (sender, me)=>
|
|
||||||
{
|
|
||||||
return this.div != null && this.div.style.display != 'none';
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: mouseUp
|
|
||||||
*
|
|
||||||
* Handles the event by selecting the region of the rubberband using
|
|
||||||
* <mxGraph.selectRegion>.
|
|
||||||
*/
|
|
||||||
mouseUp = (sender, me)=>
|
|
||||||
{
|
|
||||||
var active = this.isActive();
|
|
||||||
this.reset();
|
|
||||||
|
|
||||||
if (active)
|
|
||||||
{
|
|
||||||
this.execute(me.getEvent());
|
|
||||||
me.consume();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: execute
|
|
||||||
*
|
|
||||||
* Resets the state of this handler and selects the current region
|
|
||||||
* for the given event.
|
|
||||||
*/
|
|
||||||
execute = (evt)=>
|
|
||||||
{
|
|
||||||
var rect = new mxRectangle(this.x, this.y, this.width, this.height);
|
|
||||||
this.graph.selectRegion(rect, evt);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: reset
|
|
||||||
*
|
|
||||||
* Resets the state of the rubberband selection.
|
|
||||||
*/
|
|
||||||
reset = ()=>
|
|
||||||
{
|
|
||||||
if (this.div != null)
|
|
||||||
{
|
|
||||||
if (mxClient.IS_SVG && this.fadeOut)
|
|
||||||
{
|
|
||||||
var temp = this.div;
|
|
||||||
mxUtils.setPrefixedStyle(temp.style, 'transition', 'all 0.2s linear');
|
|
||||||
temp.style.pointerEvents = 'none';
|
|
||||||
temp.style.opacity = 0;
|
|
||||||
|
|
||||||
window.setTimeout(()=>
|
|
||||||
{
|
|
||||||
temp.parentNode.removeChild(temp);
|
|
||||||
}, 200);
|
|
||||||
}
|
}
|
||||||
else
|
|
||||||
{
|
|
||||||
this.div.parentNode.removeChild(this.div);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
mxEvent.removeGestureListeners(document, null, this.dragHandler, this.dropHandler);
|
this.graph.container.appendChild(this.sharedDiv);
|
||||||
this.dragHandler = null;
|
var result = this.sharedDiv;
|
||||||
this.dropHandler = null;
|
|
||||||
|
|
||||||
this.currentX = 0;
|
if (mxClient.IS_SVG && this.fadeOut) {
|
||||||
this.currentY = 0;
|
|
||||||
this.first = null;
|
|
||||||
this.div = null;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: update
|
|
||||||
*
|
|
||||||
* Sets <currentX> and <currentY> and calls <repaint>.
|
|
||||||
*/
|
|
||||||
update = (x, y)=>
|
|
||||||
{
|
|
||||||
this.currentX = x;
|
|
||||||
this.currentY = y;
|
|
||||||
|
|
||||||
this.repaint();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: repaint
|
|
||||||
*
|
|
||||||
* Computes the bounding box and updates the style of the <div>.
|
|
||||||
*/
|
|
||||||
repaint = ()=>
|
|
||||||
{
|
|
||||||
if (this.div != null)
|
|
||||||
{
|
|
||||||
var x = this.currentX - this.graph.panDx;
|
|
||||||
var y = this.currentY - this.graph.panDy;
|
|
||||||
|
|
||||||
this.x = Math.min(this.first.x, x);
|
|
||||||
this.y = Math.min(this.first.y, y);
|
|
||||||
this.width = Math.max(this.first.x, x) - this.x;
|
|
||||||
this.height = Math.max(this.first.y, y) - this.y;
|
|
||||||
|
|
||||||
var dx = 0;
|
|
||||||
var dy = 0;
|
|
||||||
|
|
||||||
this.div.style.left = (this.x + dx) + 'px';
|
|
||||||
this.div.style.top = (this.y + dy) + 'px';
|
|
||||||
this.div.style.width = Math.max(1, this.width) + 'px';
|
|
||||||
this.div.style.height = Math.max(1, this.height) + 'px';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function: destroy
|
|
||||||
*
|
|
||||||
* Destroys the handler and all its resources and DOM nodes. This does
|
|
||||||
* normally not need to be called, it is called automatically when the
|
|
||||||
* window unloads.
|
|
||||||
*/
|
|
||||||
destroy = ()=>
|
|
||||||
{
|
|
||||||
if (!this.destroyed)
|
|
||||||
{
|
|
||||||
this.destroyed = true;
|
|
||||||
this.graph.removeMouseListener(this);
|
|
||||||
this.graph.removeListener(this.forceRubberbandHandler);
|
|
||||||
this.graph.removeListener(this.panHandler);
|
|
||||||
this.reset();
|
|
||||||
|
|
||||||
if (this.sharedDiv != null)
|
|
||||||
{
|
|
||||||
this.sharedDiv = null;
|
this.sharedDiv = null;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
};
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: isActive
|
||||||
|
*
|
||||||
|
* Returns true if this handler is active.
|
||||||
|
*/
|
||||||
|
isActive = (sender, me) => {
|
||||||
|
return this.div != null && this.div.style.display != 'none';
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: mouseUp
|
||||||
|
*
|
||||||
|
* Handles the event by selecting the region of the rubberband using
|
||||||
|
* <mxGraph.selectRegion>.
|
||||||
|
*/
|
||||||
|
mouseUp = (sender, me) => {
|
||||||
|
var active = this.isActive();
|
||||||
|
this.reset();
|
||||||
|
|
||||||
|
if (active) {
|
||||||
|
this.execute(me.getEvent());
|
||||||
|
me.consume();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: execute
|
||||||
|
*
|
||||||
|
* Resets the state of this handler and selects the current region
|
||||||
|
* for the given event.
|
||||||
|
*/
|
||||||
|
execute = (evt) => {
|
||||||
|
var rect = new mxRectangle(this.x, this.y, this.width, this.height);
|
||||||
|
this.graph.selectRegion(rect, evt);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: reset
|
||||||
|
*
|
||||||
|
* Resets the state of the rubberband selection.
|
||||||
|
*/
|
||||||
|
reset = () => {
|
||||||
|
if (this.div != null) {
|
||||||
|
if (mxClient.IS_SVG && this.fadeOut) {
|
||||||
|
var temp = this.div;
|
||||||
|
mxUtils.setPrefixedStyle(temp.style, 'transition', 'all 0.2s linear');
|
||||||
|
temp.style.pointerEvents = 'none';
|
||||||
|
temp.style.opacity = 0;
|
||||||
|
|
||||||
|
window.setTimeout(() => {
|
||||||
|
temp.parentNode.removeChild(temp);
|
||||||
|
}, 200);
|
||||||
|
} else {
|
||||||
|
this.div.parentNode.removeChild(this.div);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
mxEvent.removeGestureListeners(document, null, this.dragHandler, this.dropHandler);
|
||||||
|
this.dragHandler = null;
|
||||||
|
this.dropHandler = null;
|
||||||
|
|
||||||
|
this.currentX = 0;
|
||||||
|
this.currentY = 0;
|
||||||
|
this.first = null;
|
||||||
|
this.div = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: update
|
||||||
|
*
|
||||||
|
* Sets <currentX> and <currentY> and calls <repaint>.
|
||||||
|
*/
|
||||||
|
update = (x, y) => {
|
||||||
|
this.currentX = x;
|
||||||
|
this.currentY = y;
|
||||||
|
|
||||||
|
this.repaint();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: repaint
|
||||||
|
*
|
||||||
|
* Computes the bounding box and updates the style of the <div>.
|
||||||
|
*/
|
||||||
|
repaint = () => {
|
||||||
|
if (this.div != null) {
|
||||||
|
var x = this.currentX - this.graph.panDx;
|
||||||
|
var y = this.currentY - this.graph.panDy;
|
||||||
|
|
||||||
|
this.x = Math.min(this.first.x, x);
|
||||||
|
this.y = Math.min(this.first.y, y);
|
||||||
|
this.width = Math.max(this.first.x, x) - this.x;
|
||||||
|
this.height = Math.max(this.first.y, y) - this.y;
|
||||||
|
|
||||||
|
var dx = 0;
|
||||||
|
var dy = 0;
|
||||||
|
|
||||||
|
this.div.style.left = (this.x + dx) + 'px';
|
||||||
|
this.div.style.top = (this.y + dy) + 'px';
|
||||||
|
this.div.style.width = Math.max(1, this.width) + 'px';
|
||||||
|
this.div.style.height = Math.max(1, this.height) + 'px';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: destroy
|
||||||
|
*
|
||||||
|
* Destroys the handler and all its resources and DOM nodes. This does
|
||||||
|
* normally not need to be called, it is called automatically when the
|
||||||
|
* window unloads.
|
||||||
|
*/
|
||||||
|
destroy = () => {
|
||||||
|
if (!this.destroyed) {
|
||||||
|
this.destroyed = true;
|
||||||
|
this.graph.removeMouseListener(this);
|
||||||
|
this.graph.removeListener(this.forceRubberbandHandler);
|
||||||
|
this.graph.removeListener(this.panHandler);
|
||||||
|
this.reset();
|
||||||
|
|
||||||
|
if (this.sharedDiv != null) {
|
||||||
|
this.sharedDiv = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default mxRubberband;
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue