Skip to content

Commit

Permalink
Merge branch 'unstable'
Browse files Browse the repository at this point in the history
  • Loading branch information
@msalihaltun
msalihaltun committed Jun 16, 2021
2 parents 149c0aa + ee8579e commit 1bc3fbf
Show file tree
Hide file tree
Showing 10 changed files with 827 additions and 3,443 deletions.
22 changes: 16 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,8 @@ instance.getAnchorsAsArray(ele);
instance.initAnchorPoints(eles);
// Removes anchor with some index from an edge
instance.deleteSelectedAnchor(ele, index);
// Get type of an edge as `bend`, `control` or `none`
instance.getEdgeType(ele);
```

You can also get an existing instance:
Expand All @@ -99,16 +101,22 @@ cy.edgeEditing('initialized');
## Default Options
```js
var options = {
// this function specifies the positions of bend points
// strictly name the property 'bendPointPositions' for the edge to be detected for bend point edititng
// A function parameter to get bend point positions, should return positions of bend points
bendPositionsFunction: function(ele) {
return ele.data('bendPointPositions');
},
// this function specifies the poitions of control points
// strictly name the property 'controlPointPositions' for the edge to be detected for control point edititng
// A function parameter to get control point positions, should return positions of control points
controlPositionsFunction: function(ele) {
return ele.data('controlPointPositions');
},
// A function parameter to set bend point positions
bendPointPositionsSetterFunction: function(ele, bendPointPositions) {
ele.data('bendPointPositions', bendPointPositions);
},
// A function parameter to set bend point positions
controlPointPositionsSetterFunction: function(ele, controlPointPositions) {
ele.data('controlPointPositions', controlPointPositions);
},
// whether to initilize bend and control points on creation of this extension automatically
initAnchorsAutomatically: true,
// the classes of those edges that should be ignored
Expand All @@ -119,8 +127,6 @@ cy.edgeEditing('initialized');
anchorShapeSizeFactor: 3,
// z-index value of the canvas in which bend points are drawn
zIndex: 999,
// whether to start the plugin in the enabled state
enabled: true,
/*An option that controls the distance (in pixels) within which a bend point is considered near the line segment between
its two neighbors and will be automatically removed
min value = 0 , max value = 20 , values less than 0 are set to 0 and values greater than 20 are set to 20
Expand Down Expand Up @@ -153,6 +159,10 @@ cy.edgeEditing('initialized');
},
// this function is called if reconnected edge is not valid according to validateEdge function
actOnUnsuccessfulReconnection: undefined,
// specifically for edge-editing menu items, whether trailing dividers should be used
useTrailingDividersAfterContextMenuOptions: false,
// Enable / disable drag creation of anchor points when there is at least one anchor already on the edge
enableCreateAnchorOnDrag: true
};
```

Expand Down
2 changes: 1 addition & 1 deletion cytoscape-edge-editing.js
View file

Large diffs are not rendered by default.

11 changes: 7 additions & 4 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@

style: [
{
selector: 'node',
selector: 'node[name]',
style: {
'content': 'data(name)'
}
Expand Down Expand Up @@ -114,9 +114,12 @@

// demo your ext
cy.edgeEditing({
undoable: true,
bendRemovalSensitivity: 16,
enableMultipleAnchorRemovalOption: true
undoable: true,
bendRemovalSensitivity: 16,
enableMultipleAnchorRemovalOption: true,
initAnchorsAutomatically: false,
useTrailingDividersAfterContextMenuOptions: false,
enableCreateAnchorOnDrag: true
});

cy.style().update();
Expand Down
4,013 changes: 655 additions & 3,358 deletions package-lock.json
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@
"babel-preset-env": "^1.7.0",
"camelcase": "^6.0.0",
"cross-env": "^7.0.2",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
"webpack": "^5.36.1",
"webpack-cli": "^4.6.0"
},
"peerDependencies": {
"cytoscape": "^3.3.0",
Expand Down
75 changes: 48 additions & 27 deletions src/UIUtilities.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
var debounce = require('./debounce');
var anchorPointUtilities = require('./AnchorPointUtilities');
var anchorPointUtilities = require('./anchorPointUtilities');
var reconnectionUtilities = require('./reconnectionUtilities');
var registerUndoRedoFunctions = require('./registerUndoRedoFunctions');
var stageId = 0;

module.exports = function (params, cy) {
var fn = params;

anchorPointUtilities.options = params;

var addBendPointCxtMenuId = 'cy-edge-bend-editing-cxt-add-bend-point' + stageId;
var removeBendPointCxtMenuId = 'cy-edge-bend-editing-cxt-remove-bend-point' + stageId;
var removeAllBendPointCtxMenuId = 'cy-edge-bend-editing-cxt-remove-multiple-bend-point' + stageId;
var addControlPointCxtMenuId = 'cy-edge-control-editing-cxt-add-control-point' + stageId;
var removeControlPointCxtMenuId = 'cy-edge-control-editing-cxt-remove-control-point' + stageId;
var removeAllControlPointCtxMenuId = 'cy-edge-bend-editing-cxt-remove-multiple-control-point' + stageId;
var eStyle, eRemove, eAdd, eZoom, eSelect, eUnselect, eTapStart, eTapStartOnEdge, eTapDrag, eTapEnd, eCxtTap, eDrag;
var eStyle, eRemove, eAdd, eZoom, eSelect, eUnselect, eTapStart, eTapStartOnEdge, eTapDrag, eTapEnd, eCxtTap, eDrag, eData;
// last status of gestures
var lastPanningEnabled, lastZoomingEnabled, lastBoxSelectionEnabled;
var lastActiveBgOpacity;
Expand Down Expand Up @@ -83,7 +85,7 @@ module.exports = function (params, cy) {

var anchorManager = {
edge: undefined,
edgeType: 'inconclusive',
edgeType: 'none',
anchors: [],
// remembers the touched anchor to avoid clearing it when dragging happens
touchedAnchor: undefined,
Expand Down Expand Up @@ -186,7 +188,7 @@ module.exports = function (params, cy) {
else {
this.anchors = [];
this.edge = undefined;
this.edgeType = 'inconclusive';
this.edgeType = 'none';
}
},
// render the bend and control shapes of the given edge
Expand Down Expand Up @@ -255,7 +257,7 @@ module.exports = function (params, cy) {
var type = anchorPointUtilities.getEdgeType(edge);
var weights, distances, weightStr, distanceStr;

if(type === 'inconclusive'){
if(type === 'none'){
weights = [];
distances = [];
}
Expand Down Expand Up @@ -290,7 +292,7 @@ module.exports = function (params, cy) {
var edge = anchorManager.edge;
var type = anchorPointUtilities.getEdgeType(edge);

if(anchorPointUtilities.edgeTypeInconclusiveShouldntHappen(type, "UiUtilities.js, cxtRemoveAnchorFcn")){
if(anchorPointUtilities.edgeTypeNoneShouldntHappen(type, "UiUtilities.js, cxtRemoveAnchorFcn")){
return;
}

Expand Down Expand Up @@ -341,39 +343,45 @@ module.exports = function (params, cy) {
id: addBendPointCxtMenuId,
content: opts.addBendMenuItemTitle,
selector: 'edge',
onClickFunction: cxtAddBendFcn
onClickFunction: cxtAddBendFcn,
hasTrailingDivider: opts.useTrailingDividersAfterContextMenuOptions,
},
{
id: removeBendPointCxtMenuId,
content: opts.removeBendMenuItemTitle,
selector: 'edge',
onClickFunction: cxtRemoveAnchorFcn
onClickFunction: cxtRemoveAnchorFcn,
hasTrailingDivider: opts.useTrailingDividersAfterContextMenuOptions,
},
{
id: removeAllBendPointCtxMenuId,
content: opts.removeAllBendMenuItemTitle,
selector: opts.enableMultipleAnchorRemovalOption && ':selected.edgebendediting-hasmultiplebendpoints',
onClickFunction: cxtRemoveAllAnchorsFcn
onClickFunction: cxtRemoveAllAnchorsFcn,
hasTrailingDivider: opts.useTrailingDividersAfterContextMenuOptions,
},
{
id: addControlPointCxtMenuId,
content: opts.addControlMenuItemTitle,
selector: 'edge',
coreAsWell: true,
onClickFunction: cxtAddControlFcn
onClickFunction: cxtAddControlFcn,
hasTrailingDivider: opts.useTrailingDividersAfterContextMenuOptions,
},
{
id: removeControlPointCxtMenuId,
content: opts.removeControlMenuItemTitle,
selector: 'edge',
coreAsWell: true,
onClickFunction: cxtRemoveAnchorFcn
onClickFunction: cxtRemoveAnchorFcn,
hasTrailingDivider: opts.useTrailingDividersAfterContextMenuOptions,
},
{
id: removeAllControlPointCtxMenuId,
content: opts.removeAllControlMenuItemTitle,
selector: opts.enableMultipleAnchorRemovalOption && ':selected.edgecontrolediting-hasmultiplecontrolpoints',
onClickFunction: cxtRemoveAllAnchorsFcn
onClickFunction: cxtRemoveAllAnchorsFcn,
hasTrailingDivider: opts.useTrailingDividersAfterContextMenuOptions,
},
];

Expand Down Expand Up @@ -495,6 +503,16 @@ module.exports = function (params, cy) {
}
var sourcePos = edge.sourceEndpoint();
var targetPos = edge.targetEndpoint();

// This function is called inside refreshDraws which is called
// for updating Konva shapes on events, but sometimes these values
// will be NaN and Konva will show warnings in console as a result
// This is a check to eliminate those cases since if these values
// are NaN nothing will be drawn anyway.
if (!sourcePos.x || !targetPos.x) {
return;
}

edge_pts.unshift(sourcePos.y);
edge_pts.unshift(sourcePos.x);
edge_pts.push(targetPos.x);
Expand Down Expand Up @@ -613,7 +631,7 @@ module.exports = function (params, cy) {
function getContainingShapeIndex(x, y, edge) {
var type = anchorPointUtilities.getEdgeType(edge);

if(type === 'inconclusive'){
if(type === 'none'){
return -1;
}

Expand Down Expand Up @@ -715,11 +733,16 @@ module.exports = function (params, cy) {
}
var type = anchorPointUtilities.getEdgeType(edge);

if(anchorPointUtilities.edgeTypeInconclusiveShouldntHappen(type, "UiUtilities.js, moveAnchorPoints")){
if(anchorPointUtilities.edgeTypeNoneShouldntHappen(type, "UiUtilities.js, moveAnchorPoints")){
return;
}

edge.data(anchorPointUtilities.syntax[type]['pointPos'], nextAnchorPointsPosition);
if (type === 'bend') {
params.bendPointPositionsSetterFunction(edge, nextAnchorPointsPosition);
}
else if (type === 'control') {
params.controlPointPositionsSetterFunction(edge, nextAnchorPointsPosition);
}
}
});
anchorPointUtilities.initAnchorPoints(options().bendPositionsFunction, options().controlPositionsFunction, edges);
Expand Down Expand Up @@ -767,8 +790,7 @@ module.exports = function (params, cy) {
refreshDraws();
});

// cy.off is never called on this listener
cy.on('data', 'edge', function () {
cy.on('data', 'edge', eData = function () {
if ( !edgeToHighlight ) {
return;
}
Expand Down Expand Up @@ -923,7 +945,7 @@ module.exports = function (params, cy) {
var type = anchorPointUtilities.getEdgeType(edge);

// to avoid errors
if(type === 'inconclusive')
if(type === 'none')
type = 'bend';

var cyPosX = tapStartPos.x;
Expand Down Expand Up @@ -951,12 +973,10 @@ module.exports = function (params, cy) {
}
});

cy.on('drag', 'node', eDrag = function (event) {
var node = this;
cy.edges().unselect();
if(!node.selected()){
cy.nodes().unselect();
}
cy.on('drag', 'node', eDrag = function () {
if (edgeToHighlight) {
refreshDraws();
}
});
cy.on('tapdrag', eTapDrag = function (event) {
/**
Expand All @@ -975,7 +995,7 @@ module.exports = function (params, cy) {

var type = anchorPointUtilities.getEdgeType(edge);

if(createAnchorOnDrag && !anchorTouched && type !== 'inconclusive') {
if(createAnchorOnDrag && opts.enableCreateAnchorOnDrag && !anchorTouched && type !== 'none') {
// remember state before creating anchor
var weightStr = anchorPointUtilities.syntax[type]['weight'];
var distanceStr = anchorPointUtilities.syntax[type]['distance'];
Expand Down Expand Up @@ -1188,7 +1208,7 @@ module.exports = function (params, cy) {
var type = anchorPointUtilities.getEdgeType(edge);

// to avoid errors
if(type === 'inconclusive'){
if(type === 'none'){
type = 'bend';
}

Expand Down Expand Up @@ -1494,7 +1514,8 @@ module.exports = function (params, cy) {
.off('tapdrag', eTapDrag)
.off('tapend', eTapEnd)
.off('cxttap', eCxtTap)
.off('drag', 'node',eDrag);
.off('drag', 'node',eDrag)
.off('data', 'edge', eData);

cy.unbind("zoom pan", eZoom);
}
Expand Down
Loading

0 comments on commit 1bc3fbf

Please sign in to comment.