{
this.el = el;
}}
style={{
}}
/>
);
};
componentDidMount() {
};
}
export default Touch;
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function main(container)
{
// Checks if the browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// To detect if touch events are actually supported, the following condition is recommended:
// mxClient.IS_TOUCH || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
// Disables built-in text selection and context menu while not editing text
let textEditing = mxUtils.bind(this, function(evt)
{
return graph.isEditing();
});
container.onselectstart = textEditing;
container.onmousedown = textEditing;
container.oncontextmenu = textEditing;
// Creates the graph inside the given container
let graph = new mxGraph(container);
graph.centerZoom = false;
graph.setConnectable(true);
graph.setPanning(true);
// Creates rubberband selection
let rubberband = new mxRubberband(graph);
graph.popupMenuHandler.autoExpand = true;
graph.popupMenuHandler.isSelectOnPopup = function(me)
{
return mxEvent.isMouseEvent(me.getEvent());
};
// Installs context menu
graph.popupMenuHandler.factoryMethod = function(menu, cell, evt)
{
menu.addItem('Item 1', null, function()
{
alert('Item 1');
});
menu.addSeparator();
var submenu1 = menu.addItem('Submenu 1', null, null);
menu.addItem('Subitem 1', null, function()
{
alert('Subitem 1');
}, submenu1);
menu.addItem('Subitem 1', null, function()
{
alert('Subitem 2');
}, submenu1);
};
// Context menu trigger implementation depending on current selection state
// combined with support for normal popup trigger.
let cellSelected = false;
let selectionEmpty = false;
let menuShowing = false;
graph.fireMouseEvent = function(evtName, me, sender)
{
if (evtName == mxEvent.MOUSE_DOWN)
{
// For hit detection on edges
me = this.updateMouseEvent(me);
cellSelected = this.isCellSelected(me.getCell());
selectionEmpty = this.isSelectionEmpty();
menuShowing = graph.popupMenuHandler.isMenuShowing();
}
mxGraph.prototype.fireMouseEvent.apply(this, arguments);
};
// Shows popup menu if cell was selected or selection was empty and background was clicked
graph.popupMenuHandler.mouseUp = function(sender, me)
{
this.popupTrigger = !graph.isEditing() && (this.popupTrigger || (!menuShowing &&
!graph.isEditing() && !mxEvent.isMouseEvent(me.getEvent()) &&
((selectionEmpty && me.getCell() == null && graph.isSelectionEmpty()) ||
(cellSelected && graph.isCellSelected(me.getCell())))));
mxPopupMenuHandler.prototype.mouseUp.apply(this, arguments);
};
// Tap and hold on background starts rubberband for multiple selected
// cells the cell associated with the event is deselected
graph.addListener(mxEvent.TAP_AND_HOLD, function(sender, evt)
{
if (!mxEvent.isMultiTouchEvent(evt))
{
let me = evt.getProperty('event');
let cell = evt.getProperty('cell');
if (cell == null)
{
let pt = mxUtils.convertPoint(this.container,
mxEvent.getClientX(me), mxEvent.getClientY(me));
rubberband.start(pt.x, pt.y);
}
else if (graph.getSelectionCount() > 1 && graph.isCellSelected(cell))
{
graph.removeSelectionCell(cell);
}
// Blocks further processing of the event
evt.consume();
}
});
// Adds mouse wheel handling for zoom
mxEvent.addMouseWheelListener(function(evt, up)
{
if (up)
{
graph.zoomIn();
}
else
{
graph.zoomOut();
}
mxEvent.consume(evt);
});
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
let parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
// Disables new connections via "hotspot"
graph.connectionHandler.marker.isEnabled = function()
{
return this.graph.connectionHandler.first != null;
};
// Adds custom hit detection if native hit detection found no cell
graph.updateMouseEvent = function(me)
{
let me = mxGraph.prototype.updateMouseEvent.apply(this, arguments);
if (me.getState() == null)
{
let cell = this.getCellAt(me.graphX, me.graphY);
if (cell != null && this.isSwimlane(cell) && this.hitsSwimlaneContent(cell, me.graphX, me.graphY))
{
cell = null;
}
else
{
me.state = this.view.getState(cell);
if (me.state != null && me.state.shape != null)
{
this.container.style.cursor = me.state.shape.node.style.cursor;
}
}
}
if (me.getState() == null)
{
this.container.style.cursor = 'default';
}
return me;
};
}
};
(function()
{
// Enables rotation handle
mxVertexHandler.prototype.rotationEnabled = true;
// Enables managing of sizers
mxVertexHandler.prototype.manageSizers = true;
// Enables live preview
mxVertexHandler.prototype.livePreview = true;
// Sets constants for touch style
mxConstants.HANDLE_SIZE = 16;
mxConstants.LABEL_HANDLE_SIZE = 7;
// Larger tolerance and grid for real touch devices
if (mxClient.IS_TOUCH || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0)
{
mxShape.prototype.svgStrokeTolerance = 18;
mxVertexHandler.prototype.tolerance = 12;
mxEdgeHandler.prototype.tolerance = 12;
mxGraph.prototype.tolerance = 12;
}
// One finger pans (no rubberband selection) must start regardless of mouse button
mxPanningHandler.prototype.isPanningTrigger = function(me)
{
let evt = me.getEvent();
return (me.getState() == null && !mxEvent.isMouseEvent(evt)) ||
(mxEvent.isPopupTrigger(evt) && (me.getState() == null ||
mxEvent.isControlDown(evt) || mxEvent.isShiftDown(evt)));
};
// Don't clear selection if multiple cells selected
let graphHandlerMouseDown = mxGraphHandler.prototype.mouseDown;
mxGraphHandler.prototype.mouseDown = function(sender, me)
{
graphHandlerMouseDown.apply(this, arguments);
if (this.graph.isCellSelected(me.getCell()) && this.graph.getSelectionCount() > 1)
{
this.delayedSelection = false;
}
};
// On connect the target is selected and we clone the cell of the preview edge for insert
mxConnectionHandler.prototype.selectCells = function(edge, target)
{
if (target != null)
{
this.graph.setSelectionCell(target);
}
else
{
this.graph.setSelectionCell(edge);
}
};
// Overrides double click handling to use the tolerance
let graphDblClick = mxGraph.prototype.dblClick;
mxGraph.prototype.dblClick = function(evt, cell)
{
if (cell == null)
{
let pt = mxUtils.convertPoint(this.container,
mxEvent.getClientX(evt), mxEvent.getClientY(evt));
cell = this.getCellAt(pt.x, pt.y);
}
graphDblClick.call(this, evt, cell);
};
// Rounded edge and vertex handles
let touchHandle = new mxImage('images/handle-main.png', 17, 17);
mxVertexHandler.prototype.handleImage = touchHandle;
mxEdgeHandler.prototype.handleImage = touchHandle;
mxOutline.prototype.sizerImage = touchHandle;
// Pre-fetches touch handle
new Image().src = touchHandle.src;
// Adds connect icon to selected vertex
let connectorSrc = 'images/handle-connect.png';
let vertexHandlerInit = mxVertexHandler.prototype.init;
mxVertexHandler.prototype.init = function()
{
// TODO: Use 4 sizers, move outside of shape
//this.singleSizer = this.state.width < 30 && this.state.height < 30;
vertexHandlerInit.apply(this, arguments);
// Only show connector image on one cell and do not show on containers
if (this.graph.connectionHandler.isEnabled() &&
this.graph.isCellConnectable(this.state.cell) &&
this.graph.getSelectionCount() == 1)
{
this.connectorImg = mxUtils.createImage(connectorSrc);
this.connectorImg.style.cursor = 'pointer';
this.connectorImg.style.width = '29px';
this.connectorImg.style.height = '29px';
this.connectorImg.style.position = 'absolute';
if (!mxClient.IS_TOUCH)
{
this.connectorImg.setAttribute('title', mxResources.get('connect'));
mxEvent.redirectMouseEvents(this.connectorImg, this.graph, this.state);
}
// Starts connecting on touch/mouse down
mxEvent.addGestureListeners(this.connectorImg,
mxUtils.bind(this, function(evt)
{
this.graph.popupMenuHandler.hideMenu();
this.graph.stopEditing(false);
let pt = mxUtils.convertPoint(this.graph.container,
mxEvent.getClientX(evt), mxEvent.getClientY(evt));
this.graph.connectionHandler.start(this.state, pt.x, pt.y);
this.graph.isMouseDown = true;
this.graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
mxEvent.consume(evt);
})
);
this.graph.container.appendChild(this.connectorImg);
}
this.redrawHandles();
};
let vertexHandlerHideSizers = mxVertexHandler.prototype.hideSizers;
mxVertexHandler.prototype.hideSizers = function()
{
vertexHandlerHideSizers.apply(this, arguments);
if (this.connectorImg != null)
{
this.connectorImg.style.visibility = 'hidden';
}
};
let vertexHandlerReset = mxVertexHandler.prototype.reset;
mxVertexHandler.prototype.reset = function()
{
vertexHandlerReset.apply(this, arguments);
if (this.connectorImg != null)
{
this.connectorImg.style.visibility = '';
}
};
let vertexHandlerRedrawHandles = mxVertexHandler.prototype.redrawHandles;
mxVertexHandler.prototype.redrawHandles = function()
{
vertexHandlerRedrawHandles.apply(this);
if (this.state != null && this.connectorImg != null)
{
let pt = new mxPoint();
let s = this.state;
// Top right for single-sizer
if (mxVertexHandler.prototype.singleSizer)
{
pt.x = s.x + s.width - this.connectorImg.offsetWidth / 2;
pt.y = s.y - this.connectorImg.offsetHeight / 2;
}
else
{
pt.x = s.x + s.width + mxConstants.HANDLE_SIZE / 2 + 4 + this.connectorImg.offsetWidth / 2;
pt.y = s.y + s.height / 2;
}
let alpha = mxUtils.toRadians(mxUtils.getValue(s.style, mxConstants.STYLE_ROTATION, 0));
if (alpha != 0)
{
let cos = Math.cos(alpha);
let sin = Math.sin(alpha);
let ct = new mxPoint(s.getCenterX(), s.getCenterY());
pt = mxUtils.getRotatedPoint(pt, cos, sin, ct);
}
this.connectorImg.style.left = (pt.x - this.connectorImg.offsetWidth / 2) + 'px';
this.connectorImg.style.top = (pt.y - this.connectorImg.offsetHeight / 2) + 'px';
}
};
let vertexHandlerDestroy = mxVertexHandler.prototype.destroy;
mxVertexHandler.prototype.destroy = function(sender, me)
{
vertexHandlerDestroy.apply(this, arguments);
if (this.connectorImg != null)
{
this.connectorImg.parentNode.removeChild(this.connectorImg);
this.connectorImg = null;
}
};
// Pre-fetches touch connector
new Image().src = connectorSrc;
})();