zcy
/
maxGraph
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

manual updates to js syntax

development
mcyph 2021-03-20 16:06:14 +11:00
parent 8d5296163c
commit a599a51ef9
6 changed files with 3345 additions and 3461 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

221
src/js/handler/mxCellHighlight.js
View File

@ -2,7 +2,47 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
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.
@ -16,10 +56,8 @@
*
* Constructs a cell highlight.
*/
function mxCellHighlight(graph, highlightColor, strokeWidth, dashed)
{
if (graph != null)
{
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;
@ -27,24 +65,19 @@ function mxCellHighlight(graph, highlightColor, strokeWidth, dashed)
this.opacity = mxConstants.HIGHLIGHT_OPACITY;
// Updates the marker if the graph changes
this.repaintHandler = mxUtils.bind(this, ()=>{
{
this.repaintHandler = () => {
// Updates reference to state
if (this.state != null)
{
if (this.state != null) {
var tmp = this.graph.view.getState(this.state.cell);
if (tmp == null)
{
if (tmp == null) {
this.hide();
}
else
{
} else {
this.state = tmp;
this.repaint();
}
}
});
};
this.graph.getView().addListener(mxEvent.SCALE, this.repaintHandler);
this.graph.getView().addListener(mxEvent.TRANSLATE, this.repaintHandler);
@ -52,55 +85,16 @@ function mxCellHighlight(graph, highlightColor, strokeWidth, dashed)
this.graph.getModel().addListener(mxEvent.CHANGE, this.repaintHandler);
// Hides the marker if the current root changes
this.resetHandler = mxUtils.bind(this, ()=>{
{
this.resetHandler = () => {
this.hide();
});
};
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.
@ -109,39 +103,34 @@ resetHandler = null;
*
* color - String that represents the new highlight color.
*/
setHighlightColor = (color)=>{
{
setHighlightColor = (color) => {
this.highlightColor = color;
if (this.shape != null)
{
if (this.shape != null) {
this.shape.stroke = color;
}
};
};
/**
/**
* Function: drawHighlight
*
* Creates and returns the highlight shape for the given state.
*/
drawHighlight = ()=>{
{
drawHighlight = () => {
this.shape = this.createShape();
this.repaint();
if (!this.keepOnTop && this.shape.node.parentNode.firstChild != this.shape.node)
{
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 = ()=>{
{
createShape = () => {
var shape = this.graph.cellRenderer.createShape(this.state);
shape.svgStrokeTolerance = this.graph.tolerance;
@ -156,47 +145,38 @@ createShape = ()=>{
shape.init(this.graph.getView().getOverlayPane());
mxEvent.redirectMouseEvents(shape.node, this.graph, this.state);
if (this.graph.dialect != mxConstants.DIALECT_SVG)
{
if (this.graph.dialect != mxConstants.DIALECT_SVG) {
shape.pointerEvents = false;
}
else
{
} else {
shape.svgPointerEvents = 'stroke';
}
return shape;
};
};
/**
/**
* Function: getStrokeWidth
*
* Returns the stroke width.
*/
getStrokeWidth = (state)=>{
{
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)
{
repaint = () => {
if (this.state != null && this.shape != null) {
this.shape.scale = this.state.view.scale;
if (this.graph.model.isEdge(this.state.cell))
{
if (this.graph.model.isEdge(this.state.cell)) {
this.shape.strokewidth = this.getStrokeWidth();
this.shape.points = this.state.absolutePoints;
this.shape.outline = false;
}
else
{
} 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');
@ -205,66 +185,56 @@ repaint = ()=>{
}
// Uses cursor from shape in highlight
if (this.state.shape != null)
{
if (this.state.shape != null) {
this.shape.setCursor(this.state.shape.getCursor());
}
this.shape.redraw();
}
};
};
/**
/**
* Function: hide
*
* Resets the state of the cell marker.
*/
hide = ()=>{
{
hide = () => {
this.highlight(null);
};
};
/**
/**
* Function: mark
*
* Marks the <markedState> and fires a <mark> event.
*/
highlight = (state)=>{
{
if (this.state != state)
{
if (this.shape != null)
{
highlight = (state) => {
if (this.state != state) {
if (this.shape != null) {
this.shape.destroy();
this.shape = null;
}
this.state = state;
if (this.state != null)
{
if (this.state != null) {
this.drawHighlight();
}
}
};
};
/**
/**
* Function: isHighlightAt
*
* Returns true if this highlight is at the given position.
*/
isHighlightAt = (x, y)=>{
{
isHighlightAt = (x, y) => {
var hit = false;
if (this.shape != null && document.elementFromPoint != null)
{
if (this.shape != null && document.elementFromPoint != null) {
var elt = document.elementFromPoint(x, y);
while (elt != null)
{
if (elt == this.shape.node)
{
while (elt != null) {
if (elt == this.shape.node) {
hit = true;
break;
}
@ -274,22 +244,23 @@ isHighlightAt = (x, y)=>{
}
return hit;
};
};
/**
/**
* Function: destroy
*
* Destroys the handler and all its resources and DOM nodes.
*/
destroy = ()=>{
{
destroy = () => {
this.graph.getView().removeListener(this.resetHandler);
this.graph.getView().removeListener(this.repaintHandler);
this.graph.getModel().removeListener(this.repaintHandler);
if (this.shape != null)
{
if (this.shape != null) {
this.shape.destroy();
this.shape = null;
}
};
}
}
export default mxCellHighlight;

337
src/js/handler/mxCellMarker.js
View File

@ -2,7 +2,75 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
class mxCellMarker extends mxEventSource {
/**
* Variable: graph
*
* Reference to the enclosing <mxGraph>.
*/
graph = null;
/**
* 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: hotspotEnabled
*
* Specifies if the hotspot is enabled. Default is false.
*/
hotspotEnabled = false;
/**
* Variable: validColor
*
* Holds the valid marker color.
*/
validColor = null;
/**
* Variable: invalidColor
*
* Holds the invalid marker color.
*/
invalidColor = null;
/**
* Variable: currentColor
*
* Holds the current marker color.
*/
currentColor = null;
/**
* Variable: validState
*
* Holds the marked <mxCellState> if it is valid.
*/
validState = null;
/**
* Variable: markedState
*
* Holds the marked <mxCellState>.
*/
markedState = null;
/**
* Class: mxCellMarker
*
* A helper class to process mouse locations and highlight cells.
@ -42,12 +110,10 @@
* given coordinate pair. A value of 0 means always highlight. Default is
* <mxConstants.DEFAULT_HOTSPOT>.
*/
function mxCellMarker(graph, validColor, invalidColor, hotspot)
{
mxEventSource.call(this);
constructor(graph, validColor, invalidColor, hotspot) {
super();
if (graph != null)
{
if (graph != null) {
this.graph = graph;
this.validColor = (validColor != null) ? validColor : mxConstants.DEFAULT_VALID_COLOR;
this.invalidColor = (invalidColor != null) ? invalidColor : mxConstants.DEFAULT_INVALID_COLOR;
@ -55,80 +121,9 @@ function mxCellMarker(graph, validColor, invalidColor, hotspot)
this.highlight = new mxCellHighlight(graph);
}
};
};
/**
* Extends mxEventSource.
*/
mxUtils.extend(mxCellMarker, mxEventSource);
/**
* Variable: graph
*
* Reference to the enclosing <mxGraph>.
*/
graph = null;
/**
* 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: hotspotEnabled
*
* Specifies if the hotspot is enabled. Default is false.
*/
hotspotEnabled = false;
/**
* Variable: validColor
*
* Holds the valid marker color.
*/
validColor = null;
/**
* Variable: invalidColor
*
* Holds the invalid marker color.
*/
invalidColor = null;
/**
* Variable: currentColor
*
* Holds the current marker color.
*/
currentColor = null;
/**
* Variable: validState
*
* Holds the marked <mxCellState> if it is valid.
*/
validState = null;
/**
* Variable: markedState
*
* Holds the marked <mxCellState>.
*/
markedState = null;
/**
/**
* Function: setEnabled
*
* Enables or disables event handling. This implementation
@ -138,109 +133,98 @@ markedState = null;
*
* enabled - Boolean that specifies the new enabled state.
*/
setEnabled = (enabled)=>
{
setEnabled = (enabled) => {
this.enabled = enabled;
};
};
/**
/**
* Function: isEnabled
*
* Returns true if events are handled. This implementation
* returns <enabled>.
*/
isEnabled = ()=>
{
isEnabled = () => {
return this.enabled;
};
};
/**
/**
* Function: setHotspot
*
* Sets the <hotspot>.
*/
setHotspot = (hotspot)=>
{
setHotspot = (hotspot) => {
this.hotspot = hotspot;
};
};
/**
/**
* Function: getHotspot
*
* Returns the <hotspot>.
*/
getHotspot = ()=>
{
getHotspot = () => {
return this.hotspot;
};
};
/**
/**
* Function: setHotspotEnabled
*
* Specifies whether the hotspot should be used in <intersects>.
*/
setHotspotEnabled = (enabled)=>
{
setHotspotEnabled = (enabled) => {
this.hotspotEnabled = enabled;
};
};
/**
/**
* Function: isHotspotEnabled
*
* Returns true if hotspot is used in <intersects>.
*/
isHotspotEnabled = ()=>
{
isHotspotEnabled = () => {
return this.hotspotEnabled;
};
};
/**
/**
* Function: hasValidState
*
* Returns true if <validState> is not null.
*/
hasValidState = ()=>
{
hasValidState = () => {
return this.validState != null;
};
};
/**
/**
* Function: getValidState
*
* Returns the <validState>.
*/
getValidState = ()=>
{
getValidState = () => {
return this.validState;
};
};
/**
/**
* Function: getMarkedState
*
* Returns the <markedState>.
*/
getMarkedState = ()=>
{
getMarkedState = () => {
return this.markedState;
};
};
/**
/**
* Function: reset
*
* Resets the state of the cell marker.
*/
reset = ()=>
{
reset = () => {
this.validState = null;
if (this.markedState != null)
{
if (this.markedState != null) {
this.markedState = null;
this.unmark();
}
};
};
/**
/**
* Function: process
*
* Processes the given event and cell and marks the state returned by
@ -250,181 +234,162 @@ reset = ()=>
* regardless of the marker color. The state is returned regardless of the
* marker color and valid state.
*/
process = (me)=>
{
process = (me) => {
var state = null;
if (this.isEnabled())
{
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)=>
{
setCurrentState = (state, me, color) => {
var isValid = (state != null) ? this.isValidState(state) : false;
color = (color != null) ? color : this.getMarkerColor(me.getEvent(), state, isValid);
if (isValid)
{
if (isValid) {
this.validState = state;
}
else
{
} else {
this.validState = null;
}
if (state != this.markedState || color != this.currentColor)
{
if (state != this.markedState || color != this.currentColor) {
this.currentColor = color;
if (state != null && this.currentColor != null)
{
if (state != null && this.currentColor != null) {
this.markedState = state;
this.mark();
}
else if (this.markedState != null)
{
} 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)=>
{
markCell = (cell, color) => {
var state = this.graph.getView().getState(cell);
if (state != null)
{
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 = ()=>
{
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 = ()=>
{
unmark = () => {
this.mark();
};
};
/**
/**
* 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)=>
{
isValidState = (state) => {
return true;
};
};
/**
/**
* 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)=>
{
getMarkerColor = (evt, state, isValid) => {
return (isValid) ? this.validColor : this.invalidColor;
};
};
/**
/**
* Function: getState
*
* Uses <getCell>, <getStateToMark> and <intersects> to return the
* <mxCellState> for the given <mxMouseEvent>.
*/
getState = (me)=>
{
getState = (me) => {
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: getCell
*
* Returns the <mxCell> for the given event and cell. This returns the
* given cell.
*/
getCell = (me)=>
{
getCell = (me) => {
return me.getCell();
};
};
/**
/**
* Function: getStateToMark
*
* Returns the <mxCellState> to be marked for the given <mxCellState> under
* the mouse. This returns the given state.
*/
getStateToMark = (state)=>
{
getStateToMark = (state) => {
return state;
};
};
/**
/**
* 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)
{
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 = ()=>
{
destroy = () => {
this.graph.getView().removeListener(this.resetHandler);
this.graph.getModel().removeListener(this.resetHandler);
this.highlight.destroy();
};
};
}
export default mxCellMarker;

52
src/js/handler/mxCellTracker.js
View File

@ -2,7 +2,9 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
class mxCellTracker extends mxCellMarker {
/**
* Class: mxCellTracker
*
* Event handler that highlights cells. Inherits from <mxCellMarker>.
@ -72,65 +74,59 @@
* funct - Optional JavaScript function that is used to override
* <mxCellMarker.getCell>.
*/
function mxCellTracker(graph, color, funct)
{
mxCellMarker.call(this, graph, color);
constructor(graph, color, funct) {
super(graph, color);
this.graph.addMouseListener(this);
if (funct != null)
{
if (funct != null) {
this.getCell = funct;
}
};
};
/**
* Extends mxCellMarker.
*/
mxUtils.extend(mxCellTracker, mxCellMarker);
/**
/**
* Function: mouseDown
*
* Ignores the event. The event is not consumed.
*/
mouseDown = (sender, me)=> { };
mouseDown = (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())
{
mouseMove = (sender, me) => {
if (this.isEnabled()) {
this.process(me);
}
};
};
/**
/**
* Function: mouseUp
*
* Handles the event by reseting the highlight.
*/
mouseUp = (sender, me)=> { };
mouseUp = (sender, 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)
{
destroy = () => {
if (!this.destroyed) {
this.destroyed = true;
this.graph.removeMouseListener(this);
destroy.apply(this);
}
};
};
}
export default mxCellTracker;

198
src/js/handler/mxPopupMenuHandler.js
View File

@ -2,7 +2,60 @@
* Copyright (c) 2006-2015, JGraph Ltd
* Copyright (c) 2006-2015, Gaudenz Alder
*/
/**
class mxPopupMenuHandler extends mxPopupMenu {
/**
* 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: 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: triggerY
*
* Y-coordinate of the mouse down event.
*/
triggerY = 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;
/**
* Class: mxPopupMenuHandler
*
* Event handler that creates popupmenus.
@ -11,17 +64,15 @@
*
* Constructs an event handler that creates a <mxPopupMenu>.
*/
function mxPopupMenuHandler(graph, factoryMethod)
{
if (graph != null)
{
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
this.gestureHandler = mxUtils.bind(this, (sender, eo)=>
{
this.gestureHandler = mxUtils.bind(this, (sender, eo) => {
this.inTolerance = false;
});
@ -29,104 +80,42 @@ function mxPopupMenuHandler(graph, factoryMethod)
this.init();
}
};
};
/**
* Extends mxPopupMenu.
*/
mxPopupMenuHandler.prototype = new mxPopupMenu();
constructor = mxPopupMenuHandler;
/**
* 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: 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: triggerY
*
* Y-coordinate of the mouse down event.
*/
triggerY = 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;
/**
/**
* Function: init
*
* Initializes the shapes required for this vertex handler.
*/
init = ()=>
{
init = () => {
// Supercall
init.apply(this);
// Hides the tooltip if the mouse is over
// the context menu
mxEvent.addGestureListeners(this.div, mxUtils.bind(this, (evt)=>
{
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)=>
{
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()))
{
mouseDown = (sender, me) => {
if (this.isEnabled() && !mxEvent.isMultiTouchEvent(me.getEvent())) {
// Hides the popupmenu if is is being displayed
this.hideMenu();
this.triggerX = me.getGraphX();
@ -136,46 +125,38 @@ mouseDown = (sender, me)=>
this.popupTrigger = this.isPopupTrigger(me);
this.inTolerance = true;
}
};
};
/**
/**
* Function: mouseMove
*
* Handles the event by updating the panning on the graph.
*/
mouseMove = (sender, me)=>
{
mouseMove = (sender, me) => {
// Popup trigger may change on mouseUp so ignore it
if (this.inTolerance && this.screenX != null && this.screenY != null)
{
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)
{
Math.abs(mxEvent.getMainEvent(me.getEvent()).screenY - this.screenY) > this.graph.tolerance) {
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)
{
mouseUp = (sender, me) => {
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
if (this.graph.isEnabled() && this.isSelectOnPopup(me) &&
cell != null && !this.graph.isCellSelected(cell))
{
cell != null && !this.graph.isCellSelected(cell)) {
this.graph.setSelectionCell(cell);
}
else if (this.clearSelectionOnBackground && cell == null)
{
} else if (this.clearSelectionOnBackground && cell == null) {
this.graph.clearSelection();
}
@ -191,28 +172,29 @@ mouseUp = (sender, me)=>
this.popupTrigger = false;
this.inTolerance = false;
};
};
/**
/**
* Function: getCellForPopupEvent
*
* Hook to return the cell for the mouse up popup trigger handling.
*/
getCellForPopupEvent = (me)=>
{
getCellForPopupEvent = (me) => {
return me.getCell();
};
};
/**
/**
* Function: destroy
*
* Destroys the handler and all its resources and DOM nodes.
*/
destroy = ()=>
{
destroy = () => {
this.graph.removeMouseListener(this);
this.graph.removeListener(this.gestureHandler);
// Supercall
destroy.apply(this);
};
};
}
export default mxPopupMenuHandler;

283
src/js/handler/mxRubberband.js
View File

@ -2,7 +2,59 @@
* Copyright (c) 2006-2016, JGraph Ltd
* Copyright (c) 2006-2016, Gaudenz Alder
*/
/**
class mxRubberband {
/**
* Variable: defaultOpacity
*
* Specifies the default opacity to be used for the rubberband div. Default
* is 20.
*/
defaultOpacity = 20;
/**
* Variable: enabled
*
* Specifies if events are handled. Default is true.
*/
enabled = true;
/**
* Variable: div
*
* Holds the DIV element which is currently visible.
*/
div = null;
/**
* Variable: sharedDiv
*
* Holds the DIV element which is used to display the rubberband.
*/
sharedDiv = null;
/**
* Variable: currentX
*
* Holds the value of the x argument in the last call to <update>.
*/
currentX = 0;
/**
* Variable: currentY
*
* Holds the value of the y argument in the last call to <update>.
*/
currentY = 0;
/**
* Variable: fadeOut
*
* Optional fade out effect. Default is false.
*/
fadeOut = false;
/**
* Class: mxRubberband
*
* Event handler that selects rectangular regions. This is not built-into
@ -19,21 +71,17 @@
* Constructs an event handler that selects rectangular regions in the graph
* using rubberband selection.
*/
function mxRubberband(graph)
{
if (graph != null)
{
constructor(graph) {
if (graph != null) {
this.graph = graph;
this.graph.addMouseListener(this);
// Handles force rubberband event
this.forceRubberbandHandler = mxUtils.bind(this, (sender, evt)=>
{
this.forceRubberbandHandler = mxUtils.bind(this, (sender, evt) => {
var evtName = evt.getProperty('eventName');
var me = evt.getProperty('event');
if (evtName == mxEvent.MOUSE_DOWN && this.isForceRubberbandEvent(me))
{
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;
@ -46,121 +94,63 @@ function mxRubberband(graph)
this.graph.addListener(mxEvent.FIRE_MOUSE_EVENT, this.forceRubberbandHandler);
// Repaints the marquee after autoscroll
this.panHandler = mxUtils.bind(this, ()=>
{
this.panHandler = mxUtils.bind(this, () => {
this.repaint();
});
this.graph.addListener(mxEvent.PAN, this.panHandler);
// 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.gestureHandler = mxUtils.bind(this, (sender, eo) => {
if (this.first != null) {
this.reset();
}
});
this.graph.addListener(mxEvent.GESTURE, this.gestureHandler);
}
};
};
/**
* Variable: defaultOpacity
*
* Specifies the default opacity to be used for the rubberband div. Default
* is 20.
*/
defaultOpacity = 20;
/**
* Variable: enabled
*
* Specifies if events are handled. Default is true.
*/
enabled = true;
/**
* Variable: div
*
* Holds the DIV element which is currently visible.
*/
div = null;
/**
* Variable: sharedDiv
*
* Holds the DIV element which is used to display the rubberband.
*/
sharedDiv = null;
/**
* Variable: currentX
*
* Holds the value of the x argument in the last call to <update>.
*/
currentX = 0;
/**
* Variable: currentY
*
* Holds the value of the y argument in the last call to <update>.
*/
currentY = 0;
/**
* Variable: fadeOut
*
* Optional fade out effect. Default is false.
*/
fadeOut = false;
/**
/**
* Function: isEnabled
*
* Returns true if events are handled. This implementation returns
* <enabled>.
*/
isEnabled = ()=>
{
isEnabled = () => {
return this.enabled;
};
};
/**
/**
* Function: setEnabled
*
* Enables or disables event handling. This implementation updates
* <enabled>.
*/
setEnabled = (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)=>
{
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)=>
{
mouseDown = (sender, me) => {
if (!me.isConsumed() && this.isEnabled() && this.graph.isEnabled() &&
me.getState() == null && !mxEvent.isMultiTouchEvent(me.getEvent()))
{
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;
@ -174,21 +164,19 @@ mouseDown = (sender, me)=>
// not selecting anything while we're rubberbanding.
me.consume(false);
}
};
};
/**
/**
* Function: start
*
* Sets the start point for the rubberband selection.
*/
start = (x, y)=>
{
start = (x, y) => {
this.first = new mxPoint(x, y);
var container = this.graph.container;
function createMouseEvent(evt)
{
function createMouseEvent(evt) {
var me = new mxMouseEvent(evt);
var pt = mxUtils.convertPoint(container, me.getX(), me.getY());
@ -198,32 +186,27 @@ start = (x, y)=>
return me;
};
this.dragHandler = mxUtils.bind(this, (evt)=>
{
this.dragHandler = mxUtils.bind(this, (evt) => {
this.mouseMove(this.graph, createMouseEvent(evt));
});
this.dropHandler = mxUtils.bind(this, (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)
{
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)
{
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;
@ -234,10 +217,8 @@ mouseMove = (sender, me)=>
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)
{
if (this.div != null || Math.abs(dx) > tol || Math.abs(dy) > tol) {
if (this.div == null) {
this.div = this.createShape();
}
@ -249,17 +230,15 @@ mouseMove = (sender, me)=>
me.consume();
}
}
};
};
/**
/**
* Function: createShape
*
* Creates the rubberband selection shape.
*/
createShape = ()=>
{
if (this.sharedDiv == null)
{
createShape = () => {
if (this.sharedDiv == null) {
this.sharedDiv = document.createElement('div');
this.sharedDiv.className = 'mxRubberband';
mxUtils.setOpacity(this.sharedDiv, this.defaultOpacity);
@ -268,77 +247,66 @@ createShape = ()=>
this.graph.container.appendChild(this.sharedDiv);
var result = this.sharedDiv;
if (mxClient.IS_SVG && this.fadeOut)
{
if (mxClient.IS_SVG && this.fadeOut) {
this.sharedDiv = null;
}
return result;
};
};
/**
/**
* Function: isActive
*
* Returns true if this handler is active.
*/
isActive = (sender, me)=>
{
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)=>
{
mouseUp = (sender, me) => {
var active = this.isActive();
this.reset();
if (active)
{
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)=>
{
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)
{
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(()=>
{
window.setTimeout(() => {
temp.parentNode.removeChild(temp);
}, 200);
}
else
{
} else {
this.div.parentNode.removeChild(this.div);
}
}
@ -351,30 +319,27 @@ reset = ()=>
this.currentY = 0;
this.first = null;
this.div = null;
};
};
/**
/**
* Function: update
*
* Sets <currentX> and <currentY> and calls <repaint>.
*/
update = (x, y)=>
{
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)
{
repaint = () => {
if (this.div != null) {
var x = this.currentX - this.graph.panDx;
var y = this.currentY - this.graph.panDy;
@ -391,28 +356,28 @@ repaint = ()=>
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)
{
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 (this.sharedDiv != null) {
this.sharedDiv = null;
}
}
};
};
}
export default mxRubberband;

733
src/js/handler/mxVertexHandler.js
View File

File diff suppressed because it is too large Load Diff