manual updates to js syntax
mcyph
parent
8d5296163c
commit
a599a51ef9
|
|
@ -2,294 +2,265 @@
|
|||
* Copyright (c) 2006-2015, JGraph Ltd
|
||||
* 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
|
||||
this.repaintHandler = mxUtils.bind(this, ()=>{
|
||||
{
|
||||
// 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();
|
||||
class mxCellHighlight {
|
||||
/**
|
||||
* 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;
|
||||
|
||||
/**
|
||||
* 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);
|
||||
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 = mxUtils.bind(this, ()=>{
|
||||
{
|
||||
this.hide();
|
||||
});
|
||||
// Uses cursor from shape in highlight
|
||||
if (this.state.shape != null) {
|
||||
this.shape.setCursor(this.state.shape.getCursor());
|
||||
}
|
||||
|
||||
this.graph.getView().addListener(mxEvent.DOWN, this.resetHandler);
|
||||
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;
|
||||
this.shape.redraw();
|
||||
}
|
||||
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;
|
||||
};
|
||||
|
||||
/**
|
||||
* Function: hide
|
||||
*
|
||||
* Resets the state of the cell marker.
|
||||
*/
|
||||
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
|
||||
if (this.state.shape != null)
|
||||
{
|
||||
this.shape.setCursor(this.state.shape.getCursor());
|
||||
}
|
||||
|
||||
this.shape.redraw();
|
||||
}
|
||||
};
|
||||
return hit;
|
||||
};
|
||||
|
||||
/**
|
||||
* Function: hide
|
||||
*
|
||||
* Resets the state of the cell marker.
|
||||
*/
|
||||
hide = ()=>{
|
||||
{
|
||||
this.highlight(null);
|
||||
};
|
||||
/**
|
||||
* 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);
|
||||
|
||||
/**
|
||||
* Function: mark
|
||||
*
|
||||
* Marks the <markedState> and fires a <mark> event.
|
||||
*/
|
||||
highlight = (state)=>{
|
||||
{
|
||||
if (this.state != state)
|
||||
{
|
||||
if (this.shape != null)
|
||||
{
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
};
|
||||
export default mxCellHighlight;
|
||||
|
|
|
|||
|
|
@ -2,429 +2,394 @@
|
|||
* Copyright (c) 2006-2015, JGraph Ltd
|
||||
* 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);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Extends mxEventSource.
|
||||
*/
|
||||
mxUtils.extend(mxCellMarker, mxEventSource);
|
||||
class mxCellMarker extends mxEventSource {
|
||||
/**
|
||||
* Variable: graph
|
||||
*
|
||||
* Reference to the enclosing <mxGraph>.
|
||||
*/
|
||||
graph = null;
|
||||
|
||||
/**
|
||||
* Variable: graph
|
||||
*
|
||||
* Reference to the enclosing <mxGraph>.
|
||||
*/
|
||||
graph = null;
|
||||
/**
|
||||
* Variable: enabled
|
||||
*
|
||||
* Specifies if the marker is enabled. Default is true.
|
||||
*/
|
||||
enabled = true;
|
||||
|
||||
/**
|
||||
* Variable: enabled
|
||||
*
|
||||
* Specifies if the marker is enabled. Default is true.
|
||||
*/
|
||||
enabled = true;
|
||||
/**
|
||||
* Variable: hotspot
|
||||
*
|
||||
* 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
|
||||
* as the hotspot. Possible values are between 0 and 1. Default is
|
||||
* mxConstants.DEFAULT_HOTSPOT.
|
||||
*/
|
||||
hotspot = mxConstants.DEFAULT_HOTSPOT;
|
||||
|
||||
/**
|
||||
* Variable: hotspot
|
||||
*
|
||||
* 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
|
||||
* as the hotspot. Possible values are between 0 and 1. Default is
|
||||
* mxConstants.DEFAULT_HOTSPOT.
|
||||
*/
|
||||
hotspot = mxConstants.DEFAULT_HOTSPOT;
|
||||
/**
|
||||
* Variable: hotspotEnabled
|
||||
*
|
||||
* Specifies if the hotspot is enabled. Default is false.
|
||||
*/
|
||||
hotspotEnabled = false;
|
||||
|
||||
/**
|
||||
* Variable: hotspotEnabled
|
||||
*
|
||||
* Specifies if the hotspot is enabled. Default is false.
|
||||
*/
|
||||
hotspotEnabled = false;
|
||||
/**
|
||||
* Variable: validColor
|
||||
*
|
||||
* Holds the valid marker color.
|
||||
*/
|
||||
validColor = null;
|
||||
|
||||
/**
|
||||
* Variable: validColor
|
||||
*
|
||||
* Holds the valid marker color.
|
||||
*/
|
||||
validColor = null;
|
||||
/**
|
||||
* Variable: invalidColor
|
||||
*
|
||||
* Holds the invalid marker color.
|
||||
*/
|
||||
invalidColor = null;
|
||||
|
||||
/**
|
||||
* Variable: invalidColor
|
||||
*
|
||||
* Holds the invalid marker color.
|
||||
*/
|
||||
invalidColor = null;
|
||||
/**
|
||||
* Variable: currentColor
|
||||
*
|
||||
* Holds the current marker color.
|
||||
*/
|
||||
currentColor = null;
|
||||
|
||||
/**
|
||||
* Variable: currentColor
|
||||
*
|
||||
* Holds the current marker color.
|
||||
*/
|
||||
currentColor = null;
|
||||
/**
|
||||
* Variable: validState
|
||||
*
|
||||
* Holds the marked <mxCellState> if it is valid.
|
||||
*/
|
||||
validState = null;
|
||||
|
||||
/**
|
||||
* Variable: validState
|
||||
*
|
||||
* Holds the marked <mxCellState> if it is valid.
|
||||
*/
|
||||
validState = null;
|
||||
/**
|
||||
* Variable: markedState
|
||||
*
|
||||
* Holds the marked <mxCellState>.
|
||||
*/
|
||||
markedState = null;
|
||||
|
||||
/**
|
||||
* Variable: markedState
|
||||
*
|
||||
* Holds the marked <mxCellState>.
|
||||
*/
|
||||
markedState = null;
|
||||
/**
|
||||
* 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>.
|
||||
*/
|
||||
constructor(graph, validColor, invalidColor, hotspot) {
|
||||
super();
|
||||
|
||||
/**
|
||||
* 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;
|
||||
};
|
||||
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;
|
||||
|
||||
/**
|
||||
* 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();
|
||||
this.highlight = new mxCellHighlight(graph);
|
||||
}
|
||||
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.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;
|
||||
/**
|
||||
* 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) {
|
||||
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();
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 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: isValidState
|
||||
*
|
||||
* Returns true if the given <mxCellState> is a valid state. If this
|
||||
* returns true, then the state is stored in <validState>. The return value
|
||||
* of this method is used as the argument for <getMarkerColor>.
|
||||
*/
|
||||
isValidState = (state) => {
|
||||
return true;
|
||||
};
|
||||
|
||||
/**
|
||||
* Function: unmark
|
||||
*
|
||||
* Hides the marker and fires a <mark> event.
|
||||
*/
|
||||
unmark = ()=>
|
||||
{
|
||||
this.mark();
|
||||
};
|
||||
/**
|
||||
* 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: isValidState
|
||||
*
|
||||
* Returns true if the given <mxCellState> is a valid state. If this
|
||||
* returns true, then the state is stored in <validState>. The return value
|
||||
* of this method is used as the argument for <getMarkerColor>.
|
||||
*/
|
||||
isValidState = (state)=>
|
||||
{
|
||||
return true;
|
||||
};
|
||||
/**
|
||||
* Function: getState
|
||||
*
|
||||
* Uses <getCell>, <getStateToMark> and <intersects> to return the
|
||||
* <mxCellState> for the given <mxMouseEvent>.
|
||||
*/
|
||||
getState = (me) => {
|
||||
var view = this.graph.getView();
|
||||
var cell = this.getCell(me);
|
||||
var state = this.getStateToMark(view.getState(cell));
|
||||
|
||||
/**
|
||||
* 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;
|
||||
};
|
||||
return (state != null && this.intersects(state, me)) ? state : null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Function: getState
|
||||
*
|
||||
* Uses <getCell>, <getStateToMark> and <intersects> to return the
|
||||
* <mxCellState> for the given <mxMouseEvent>.
|
||||
*/
|
||||
getState = (me)=>
|
||||
{
|
||||
var view = this.graph.getView();
|
||||
var cell = this.getCell(me);
|
||||
var state = this.getStateToMark(view.getState(cell));
|
||||
/**
|
||||
* Function: getCell
|
||||
*
|
||||
* Returns the <mxCell> for the given event and cell. This returns the
|
||||
* given cell.
|
||||
*/
|
||||
getCell = (me) => {
|
||||
return me.getCell();
|
||||
};
|
||||
|
||||
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
|
||||
*
|
||||
* Returns the <mxCell> for the given event and cell. This returns the
|
||||
* given cell.
|
||||
*/
|
||||
getCell = (me)=>
|
||||
{
|
||||
return me.getCell();
|
||||
};
|
||||
/**
|
||||
* Function: intersects
|
||||
*
|
||||
* Returns true if the given coordinate pair intersects the given state.
|
||||
* This returns true if the <hotspot> is 0 or the coordinates are inside
|
||||
* the hotspot for the given cell state.
|
||||
*/
|
||||
intersects = (state, me) => {
|
||||
if (this.hotspotEnabled) {
|
||||
return mxUtils.intersectsHotspot(state, me.getGraphX(), me.getGraphY(),
|
||||
this.hotspot, mxConstants.MIN_HOTSPOT_SIZE,
|
||||
mxConstants.MAX_HOTSPOT_SIZE);
|
||||
}
|
||||
|
||||
/**
|
||||
* Function: getStateToMark
|
||||
*
|
||||
* Returns the <mxCellState> to be marked for the given <mxCellState> under
|
||||
* the mouse. This returns the given state.
|
||||
*/
|
||||
getStateToMark = (state)=>
|
||||
{
|
||||
return state;
|
||||
};
|
||||
return true;
|
||||
};
|
||||
|
||||
/**
|
||||
* Function: intersects
|
||||
*
|
||||
* Returns true if the given coordinate pair intersects the given state.
|
||||
* This returns true if the <hotspot> is 0 or the coordinates are inside
|
||||
* the hotspot for the given cell state.
|
||||
*/
|
||||
intersects = (state, me)=>
|
||||
{
|
||||
if (this.hotspotEnabled)
|
||||
{
|
||||
return mxUtils.intersectsHotspot(state, me.getGraphX(), me.getGraphY(),
|
||||
this.hotspot, mxConstants.MIN_HOTSPOT_SIZE,
|
||||
mxConstants.MAX_HOTSPOT_SIZE);
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
/**
|
||||
* 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();
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 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();
|
||||
};
|
||||
export default mxCellMarker;
|
||||
|
|
|
|||
|
|
@ -2,135 +2,131 @@
|
|||
* Copyright (c) 2006-2015, JGraph Ltd
|
||||
* 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);
|
||||
|
||||
if (funct != null)
|
||||
{
|
||||
this.getCell = funct;
|
||||
}
|
||||
};
|
||||
class mxCellTracker extends mxCellMarker {
|
||||
/**
|
||||
* 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>.
|
||||
*/
|
||||
constructor(graph, color, funct) {
|
||||
super(graph, color);
|
||||
|
||||
/**
|
||||
* Extends mxCellMarker.
|
||||
*/
|
||||
mxUtils.extend(mxCellTracker, mxCellMarker);
|
||||
this.graph.addMouseListener(this);
|
||||
|
||||
/**
|
||||
* Function: mouseDown
|
||||
*
|
||||
* Ignores the event. The event is not consumed.
|
||||
*/
|
||||
mouseDown = (sender, me)=> { };
|
||||
if (funct != null) {
|
||||
this.getCell = funct;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Function: mouseMove
|
||||
*
|
||||
* Handles the event by highlighting the cell under the mousepointer if it
|
||||
* is over the hotspot region of the cell.
|
||||
*/
|
||||
mouseMove = (sender, me)=>
|
||||
{
|
||||
if (this.isEnabled())
|
||||
{
|
||||
this.process(me);
|
||||
}
|
||||
};
|
||||
/**
|
||||
* Function: mouseDown
|
||||
*
|
||||
* Ignores the event. The event is not consumed.
|
||||
*/
|
||||
mouseDown = (sender, me) => {
|
||||
};
|
||||
|
||||
/**
|
||||
* Function: mouseUp
|
||||
*
|
||||
* Handles the event by reseting the highlight.
|
||||
*/
|
||||
mouseUp = (sender, me)=> { };
|
||||
/**
|
||||
* Function: mouseMove
|
||||
*
|
||||
* Handles the event by highlighting the cell under the mousepointer if it
|
||||
* is over the hotspot region of the cell.
|
||||
*/
|
||||
mouseMove = (sender, me) => {
|
||||
if (this.isEnabled()) {
|
||||
this.process(me);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 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;
|
||||
/**
|
||||
* Function: mouseUp
|
||||
*
|
||||
* Handles the event by reseting the highlight.
|
||||
*/
|
||||
mouseUp = (sender, me) => {
|
||||
};
|
||||
|
||||
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, 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();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Extends mxPopupMenu.
|
||||
*/
|
||||
mxPopupMenuHandler.prototype = new mxPopupMenu();
|
||||
constructor = mxPopupMenuHandler;
|
||||
class mxPopupMenuHandler extends mxPopupMenu {
|
||||
/**
|
||||
* Variable: graph
|
||||
*
|
||||
* Reference to the enclosing <mxGraph>.
|
||||
*/
|
||||
graph = null;
|
||||
|
||||
/**
|
||||
* Variable: graph
|
||||
*
|
||||
* Reference to the enclosing <mxGraph>.
|
||||
*/
|
||||
graph = null;
|
||||
/**
|
||||
* Variable: selectOnPopup
|
||||
*
|
||||
* Specifies if cells should be selected if a popupmenu is displayed for
|
||||
* them. Default is true.
|
||||
*/
|
||||
selectOnPopup = true;
|
||||
|
||||
/**
|
||||
* Variable: selectOnPopup
|
||||
*
|
||||
* Specifies if cells should be selected if a popupmenu is displayed for
|
||||
* them. Default is true.
|
||||
*/
|
||||
selectOnPopup = true;
|
||||
/**
|
||||
* Variable: clearSelectionOnBackground
|
||||
*
|
||||
* Specifies if cells should be deselected if a popupmenu is displayed for
|
||||
* the diagram background. Default is true.
|
||||
*/
|
||||
clearSelectionOnBackground = true;
|
||||
|
||||
/**
|
||||
* Variable: clearSelectionOnBackground
|
||||
*
|
||||
* Specifies if cells should be deselected if a popupmenu is displayed for
|
||||
* the diagram background. Default is true.
|
||||
*/
|
||||
clearSelectionOnBackground = true;
|
||||
/**
|
||||
* Variable: triggerX
|
||||
*
|
||||
* X-coordinate of the mouse down event.
|
||||
*/
|
||||
triggerX = null;
|
||||
|
||||
/**
|
||||
* Variable: triggerX
|
||||
*
|
||||
* X-coordinate of the mouse down event.
|
||||
*/
|
||||
triggerX = null;
|
||||
/**
|
||||
* Variable: triggerY
|
||||
*
|
||||
* Y-coordinate of the mouse down event.
|
||||
*/
|
||||
triggerY = null;
|
||||
|
||||
/**
|
||||
* Variable: triggerY
|
||||
*
|
||||
* Y-coordinate of the mouse down event.
|
||||
*/
|
||||
triggerY = null;
|
||||
/**
|
||||
* Variable: screenX
|
||||
*
|
||||
* Screen X-coordinate of the mouse down event.
|
||||
*/
|
||||
screenX = null;
|
||||
|
||||
/**
|
||||
* Variable: screenX
|
||||
*
|
||||
* Screen X-coordinate of the mouse down event.
|
||||
*/
|
||||
screenX = null;
|
||||
/**
|
||||
* Variable: screenY
|
||||
*
|
||||
* Screen Y-coordinate of the mouse down event.
|
||||
*/
|
||||
screenY = null;
|
||||
|
||||
/**
|
||||
* Variable: screenY
|
||||
*
|
||||
* Screen Y-coordinate of the mouse down event.
|
||||
*/
|
||||
screenY = null;
|
||||
/**
|
||||
* Class: mxPopupMenuHandler
|
||||
*
|
||||
* Event handler that creates popupmenus.
|
||||
*
|
||||
* 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);
|
||||
|
||||
/**
|
||||
* Function: init
|
||||
*
|
||||
* Initializes the shapes required for this vertex handler.
|
||||
*/
|
||||
init = ()=>
|
||||
{
|
||||
// Supercall
|
||||
init.apply(this);
|
||||
// Does not show menu if any touch gestures take place after the trigger
|
||||
this.gestureHandler = mxUtils.bind(this, (sender, eo) => {
|
||||
this.inTolerance = false;
|
||||
});
|
||||
|
||||
// Hides the tooltip if the mouse is over
|
||||
// the context menu
|
||||
mxEvent.addGestureListeners(this.div, mxUtils.bind(this, (evt)=>
|
||||
{
|
||||
this.graph.tooltipHandler.hide();
|
||||
}));
|
||||
};
|
||||
this.graph.addListener(mxEvent.GESTURE, this.gestureHandler);
|
||||
|
||||
/**
|
||||
* 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;
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Function: mouseUp
|
||||
*
|
||||
* Handles the event by setting the translation on the view or showing the
|
||||
* popupmenu.
|
||||
*/
|
||||
mouseUp = (sender, me)=>
|
||||
{
|
||||
if (this.popupTrigger && this.inTolerance && this.triggerX != null && this.triggerY != null)
|
||||
{
|
||||
var cell = this.getCellForPopupEvent(me);
|
||||
/**
|
||||
* Function: init
|
||||
*
|
||||
* Initializes the shapes required for this vertex handler.
|
||||
*/
|
||||
init = () => {
|
||||
// Supercall
|
||||
init.apply(this);
|
||||
|
||||
// Selects the cell for which the context menu is being displayed
|
||||
if (this.graph.isEnabled() && this.isSelectOnPopup(me) &&
|
||||
cell != null && !this.graph.isCellSelected(cell))
|
||||
{
|
||||
this.graph.setSelectionCell(cell);
|
||||
// Hides the tooltip if the mouse is over
|
||||
// the context menu
|
||||
mxEvent.addGestureListeners(this.div, mxUtils.bind(this, (evt) => {
|
||||
this.graph.tooltipHandler.hide();
|
||||
}));
|
||||
};
|
||||
|
||||
/**
|
||||
* 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
|
||||
var origin = mxUtils.getScrollOrigin();
|
||||
this.popup(me.getX() + origin.x + 1, me.getY() + origin.y + 1, cell, me.getEvent());
|
||||
me.consume();
|
||||
}
|
||||
|
||||
this.popupTrigger = false;
|
||||
this.inTolerance = false;
|
||||
};
|
||||
/**
|
||||
* Function: mouseUp
|
||||
*
|
||||
* Handles the event by setting the translation on the view or showing the
|
||||
* popupmenu.
|
||||
*/
|
||||
mouseUp = (sender, me) => {
|
||||
if (this.popupTrigger && this.inTolerance && this.triggerX != null && this.triggerY != null) {
|
||||
var cell = this.getCellForPopupEvent(me);
|
||||
|
||||
/**
|
||||
* Function: getCellForPopupEvent
|
||||
*
|
||||
* Hook to return the cell for the mouse up popup trigger handling.
|
||||
*/
|
||||
getCellForPopupEvent = (me)=>
|
||||
{
|
||||
return me.getCell();
|
||||
};
|
||||
// Selects the cell for which the context menu is being displayed
|
||||
if (this.graph.isEnabled() && this.isSelectOnPopup(me) &&
|
||||
cell != null && !this.graph.isCellSelected(cell)) {
|
||||
this.graph.setSelectionCell(cell);
|
||||
} else if (this.clearSelectionOnBackground && cell == null) {
|
||||
this.graph.clearSelection();
|
||||
}
|
||||
|
||||
/**
|
||||
* 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);
|
||||
};
|
||||
// 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
|
||||
var origin = mxUtils.getScrollOrigin();
|
||||
this.popup(me.getX() + origin.x + 1, me.getY() + origin.y + 1, cell, me.getEvent());
|
||||
me.consume();
|
||||
}
|
||||
|
||||
this.popupTrigger = false;
|
||||
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, 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
|
||||
this.forceRubberbandHandler = mxUtils.bind(this, (sender, evt)=>
|
||||
{
|
||||
var evtName = evt.getProperty('eventName');
|
||||
var me = evt.getProperty('event');
|
||||
class mxRubberband {
|
||||
/**
|
||||
* Variable: defaultOpacity
|
||||
*
|
||||
* Specifies the default opacity to be used for the rubberband div. Default
|
||||
* is 20.
|
||||
*/
|
||||
defaultOpacity = 20;
|
||||
|
||||
if (evtName == mxEvent.MOUSE_DOWN && this.isForceRubberbandEvent(me))
|
||||
{
|
||||
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);
|
||||
me.consume(false);
|
||||
}
|
||||
});
|
||||
/**
|
||||
* Variable: enabled
|
||||
*
|
||||
* Specifies if events are handled. Default is true.
|
||||
*/
|
||||
enabled = true;
|
||||
|
||||
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, ()=>
|
||||
{
|
||||
this.repaint();
|
||||
});
|
||||
/**
|
||||
* Variable: sharedDiv
|
||||
*
|
||||
* 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)=>
|
||||
{
|
||||
if (this.first != null)
|
||||
{
|
||||
this.reset();
|
||||
}
|
||||
});
|
||||
/**
|
||||
* Variable: currentY
|
||||
*
|
||||
* Holds the value of the y argument in the last call to <update>.
|
||||
*/
|
||||
currentY = 0;
|
||||
|
||||
this.graph.addListener(mxEvent.GESTURE, this.gestureHandler);
|
||||
}
|
||||
};
|
||||
/**
|
||||
* Variable: fadeOut
|
||||
*
|
||||
* Optional fade out effect. Default is false.
|
||||
*/
|
||||
fadeOut = false;
|
||||
|
||||
/**
|
||||
* Variable: defaultOpacity
|
||||
*
|
||||
* Specifies the default opacity to be used for the rubberband div. Default
|
||||
* is 20.
|
||||
*/
|
||||
defaultOpacity = 20;
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
constructor(graph) {
|
||||
if (graph != null) {
|
||||
this.graph = graph;
|
||||
this.graph.addMouseListener(this);
|
||||
|
||||
/**
|
||||
* Variable: enabled
|
||||
*
|
||||
* Specifies if events are handled. Default is true.
|
||||
*/
|
||||
enabled = true;
|
||||
// Handles force rubberband event
|
||||
this.forceRubberbandHandler = mxUtils.bind(this, (sender, evt) => {
|
||||
var evtName = evt.getProperty('eventName');
|
||||
var me = evt.getProperty('event');
|
||||
|
||||
/**
|
||||
* Variable: div
|
||||
*
|
||||
* Holds the DIV element which is currently visible.
|
||||
*/
|
||||
div = null;
|
||||
if (evtName == mxEvent.MOUSE_DOWN && this.isForceRubberbandEvent(me)) {
|
||||
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);
|
||||
me.consume(false);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Variable: sharedDiv
|
||||
*
|
||||
* Holds the DIV element which is used to display the rubberband.
|
||||
*/
|
||||
sharedDiv = null;
|
||||
this.graph.addListener(mxEvent.FIRE_MOUSE_EVENT, this.forceRubberbandHandler);
|
||||
|
||||
/**
|
||||
* Variable: currentX
|
||||
*
|
||||
* Holds the value of the x argument in the last call to <update>.
|
||||
*/
|
||||
currentX = 0;
|
||||
// Repaints the marquee after autoscroll
|
||||
this.panHandler = mxUtils.bind(this, () => {
|
||||
this.repaint();
|
||||
});
|
||||
|
||||
/**
|
||||
* Variable: currentY
|
||||
*
|
||||
* Holds the value of the y argument in the last call to <update>.
|
||||
*/
|
||||
currentY = 0;
|
||||
this.graph.addListener(mxEvent.PAN, this.panHandler);
|
||||
|
||||
/**
|
||||
* Variable: fadeOut
|
||||
*
|
||||
* Optional fade out effect. Default is false.
|
||||
*/
|
||||
fadeOut = false;
|
||||
// Does not show menu if any touch gestures take place after the trigger
|
||||
this.gestureHandler = mxUtils.bind(this, (sender, eo) => {
|
||||
if (this.first != null) {
|
||||
this.reset();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 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.graph.addListener(mxEvent.GESTURE, this.gestureHandler);
|
||||
}
|
||||
};
|
||||
|
||||
this.dragHandler = mxUtils.bind(this, (evt)=>
|
||||
{
|
||||
this.mouseMove(this.graph, createMouseEvent(evt));
|
||||
});
|
||||
/**
|
||||
* Function: isEnabled
|
||||
*
|
||||
* Returns true if events are handled. This implementation returns
|
||||
* <enabled>.
|
||||
*/
|
||||
isEnabled = () => {
|
||||
return this.enabled;
|
||||
};
|
||||
|
||||
this.dropHandler = mxUtils.bind(this, (evt)=>
|
||||
{
|
||||
this.mouseUp(this.graph, createMouseEvent(evt));
|
||||
});
|
||||
/**
|
||||
* Function: setEnabled
|
||||
*
|
||||
* 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)
|
||||
{
|
||||
mxEvent.addGestureListeners(document, null, this.dragHandler, this.dropHandler);
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 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: 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;
|
||||
/**
|
||||
* 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);
|
||||
|
||||
if (this.div != null || Math.abs(dx) > tol || Math.abs(dy) > tol)
|
||||
{
|
||||
if (this.div == null)
|
||||
{
|
||||
this.div = this.createShape();
|
||||
// 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) => {
|
||||
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
|
||||
*
|
||||
* Creates the rubberband selection shape.
|
||||
*/
|
||||
createShape = ()=>
|
||||
{
|
||||
if (this.sharedDiv == null)
|
||||
{
|
||||
this.sharedDiv = document.createElement('div');
|
||||
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);
|
||||
/**
|
||||
* Function: createShape
|
||||
*
|
||||
* Creates the rubberband selection shape.
|
||||
*/
|
||||
createShape = () => {
|
||||
if (this.sharedDiv == null) {
|
||||
this.sharedDiv = document.createElement('div');
|
||||
this.sharedDiv.className = 'mxRubberband';
|
||||
mxUtils.setOpacity(this.sharedDiv, this.defaultOpacity);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.div.parentNode.removeChild(this.div);
|
||||
}
|
||||
}
|
||||
|
||||
mxEvent.removeGestureListeners(document, null, this.dragHandler, this.dropHandler);
|
||||
this.dragHandler = null;
|
||||
this.dropHandler = null;
|
||||
this.graph.container.appendChild(this.sharedDiv);
|
||||
var result = this.sharedDiv;
|
||||
|
||||
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)
|
||||
{
|
||||
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.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