Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Patrik Meijer
react-components
Commits
2434c7f6
Commit
2434c7f6
authored
Feb 20, 2019
by
Patrik Meijer
Browse files
Handle reposition using dragFree - now it works again and should be more efficient
parent
b36cdc9d
Changes
1
Hide whitespace changes
Inline
Side-by-side
src/components/GraphEditor/GraphEditor.jsx
View file @
2434c7f6
...
...
@@ -32,11 +32,11 @@ const coseBilkentOptions = {
name
:
'
cose-bilkent
'
,
// Called on `layoutready`
ready
:
function
ready
()
{
console
.
log
(
'
coseBilkent ready
'
);
//
console.log('coseBilkent ready');
},
// Called on `layoutstop`
stop
:
function
stop
()
{
console
.
log
(
'
coseBilkent stop
'
);
//
console.log('coseBilkent stop');
},
// Whether to include labels in node dimensions. Useful for avoiding label overlap
nodeDimensionsIncludeLabels
:
true
,
...
...
@@ -112,8 +112,8 @@ export default class GraphEditor extends Component {
constructor
(
props
)
{
super
(
props
);
this
.
styles
=
DEFAULT_STYLES
.
concat
(
this
.
props
.
extraStyles
)
;
this
.
reposition
=
{}
;
const
{
extraStyles
}
=
props
;
this
.
styles
=
DEFAULT_STYLES
.
concat
(
extraStyles
)
;
this
.
cyId
=
`cy-
${
Date
.
now
()}
`
;
}
...
...
@@ -190,26 +190,26 @@ export default class GraphEditor extends Component {
const
node
=
nodes
[
id
];
return
JSON
.
parse
(
JSON
.
stringify
(
node
.
registries
[
CONSTANTS
.
CYTOSCAPE_POS_REG_KEY
]
||
node
.
registries
.
position
||
{
x
:
100
,
y
:
100
}));
||
node
.
registries
.
position
||
{
x
:
100
,
y
:
100
,
}));
};
const
isRenderedAsGmeConnection
=
(
id
)
=>
{
return
nodes
[
id
]
&&
typeof
nodes
[
id
].
pointers
.
src
===
'
string
'
&&
typeof
nodes
[
id
].
pointers
.
dst
===
'
string
'
&&
targetsExist
(
nodes
[
id
].
pointers
.
src
,
nodes
[
id
].
pointers
.
dst
);
}
const
targetsExist
=
(
src
,
dst
)
=>
nodes
[
src
]
&&
nodes
[
dst
]
&&
src
!==
activeNode
&&
dst
!==
activeNode
;
const
targetsExist
=
(
src
,
dst
)
=>
{
return
nodes
[
src
]
&&
nodes
[
dst
]
&&
src
!==
activeNode
&&
dst
!==
activeNode
;
};
const
isRenderedAsGmeConnection
=
id
=>
nodes
[
id
]
&&
typeof
nodes
[
id
].
pointers
.
src
===
'
string
'
&&
typeof
nodes
[
id
].
pointers
.
dst
===
'
string
'
&&
targetsExist
(
nodes
[
id
].
pointers
.
src
,
nodes
[
id
].
pointers
.
dst
);
const
hasEdgeTargets
=
(
src
,
dst
)
=>
{
function
isEdge
(
target
)
{
return
nodes
[
target
].
pointers
&&
typeof
nodes
[
target
].
pointers
.
src
===
'
string
'
&&
typeof
nodes
[
target
].
pointers
.
dst
===
'
string
'
&&
targetsExist
(
nodes
[
target
].
pointers
.
src
,
nodes
[
target
].
pointers
.
dst
);
return
nodes
[
target
].
pointers
&&
typeof
nodes
[
target
].
pointers
.
src
===
'
string
'
&&
typeof
nodes
[
target
].
pointers
.
dst
===
'
string
'
&&
targetsExist
(
nodes
[
target
].
pointers
.
src
,
nodes
[
target
].
pointers
.
dst
);
}
return
isEdge
(
src
)
||
isEdge
(
dst
);
...
...
@@ -327,8 +327,8 @@ ${activeSelection.includes(id) ? 'in-active-selection' : ''}`,
Object
.
keys
(
childData
.
pointers
)
.
forEach
((
pName
)
=>
{
const
targetId
=
childData
.
pointers
[
pName
];
if
(
!
targetId
||
activeFilters
[
`pointers$
${
pName
}
`
]
||
!
targetsExist
(
id
,
targetId
)
||
(
isGmeConnection
&&
(
pName
===
'
src
'
||
pName
===
'
dst
'
)))
{
if
(
!
targetId
||
activeFilters
[
`pointers$
${
pName
}
`
]
||
!
targetsExist
(
id
,
targetId
)
||
(
isGmeConnection
&&
(
pName
===
'
src
'
||
pName
===
'
dst
'
)))
{
return
;
}
...
...
@@ -371,26 +371,31 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
return
result
;
}
storePosition
=
(
nodeId
)
=>
{
const
{
gmeClient
}
=
this
.
props
;
storePosition
s
=
(
repositions
)
=>
{
const
{
gmeClient
,
nodes
}
=
this
.
props
;
if
(
Object
.
keys
(
this
.
reposition
)
.
length
>
0
)
{
if
(
reposition
s
.
length
>
0
)
{
gmeClient
.
startTransaction
();
Object
.
keys
(
this
.
reposition
)
.
forEach
((
id
)
=>
{
if
(
id
.
indexOf
(
nodeId
)
===
0
||
nodeId
.
indexOf
(
id
)
===
0
)
{
gmeClient
.
setRegistry
(
id
,
CONSTANTS
.
CYTOSCAPE_POS_REG_KEY
,
this
.
reposition
[
id
].
position
,
);
}
});
repositions
.
forEach
((
posData
)
=>
{
const
childNodeDesc
=
nodes
[
posData
.
id
];
if
(
!
childNodeDesc
)
{
return
;
}
const
floorPos
=
{
x
:
Math
.
floor
(
posData
.
position
.
x
),
y
:
Math
.
floor
(
posData
.
position
.
y
),
};
if
(
!
childNodeDesc
.
registries
[
CONSTANTS
.
CYTOSCAPE_POS_REG_KEY
]
||
floorPos
.
x
!==
childNodeDesc
.
registries
[
CONSTANTS
.
CYTOSCAPE_POS_REG_KEY
].
x
||
floorPos
.
y
!==
childNodeDesc
.
registries
[
CONSTANTS
.
CYTOSCAPE_POS_REG_KEY
].
y
)
{
gmeClient
.
setRegistry
(
posData
.
id
,
CONSTANTS
.
CYTOSCAPE_POS_REG_KEY
,
floorPos
);
}
});
gmeClient
.
completeTransaction
();
}
this
.
reposition
=
{};
};
showFilterSelector
=
()
=>
{
...
...
@@ -417,51 +422,42 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
});
};
attachCytoscapeHandlers
()
{
this
.
cy
.
on
(
'
position
'
,
({
target
})
=>
{
const
{
nodes
}
=
this
.
props
;
const
nodeId
=
target
.
id
();
const
childNodeDesc
=
nodes
[
nodeId
];
if
(
!
childNodeDesc
)
{
return
;
}
const
floorPos
=
{
x
:
Math
.
floor
(
target
.
position
().
x
),
y
:
Math
.
floor
(
target
.
position
().
y
),
};
if
(
!
childNodeDesc
.
registries
[
CONSTANTS
.
CYTOSCAPE_POS_REG_KEY
])
{
this
.
reposition
[
nodeId
]
=
{
id
:
nodeId
,
position
:
floorPos
,
};
}
else
if
(
floorPos
.
x
!==
childNodeDesc
.
registries
[
CONSTANTS
.
CYTOSCAPE_POS_REG_KEY
].
x
||
floorPos
.
y
!==
childNodeDesc
.
registries
[
CONSTANTS
.
CYTOSCAPE_POS_REG_KEY
].
y
)
{
this
.
reposition
[
nodeId
]
=
{
id
:
nodeId
,
position
:
floorPos
,
};
}
});
atLayoutStop
=
()
=>
{
this
.
storePositions
(
this
.
cy
.
nodes
(
'
.gme-node
'
)
.
map
(
ele
=>
({
id
:
ele
.
id
(),
position
:
ele
.
position
(),
})));
};
this
.
cy
.
on
(
'
free
'
,
({
target
})
=>
{
attachCytoscapeHandlers
()
{
this
.
cy
.
on
(
'
dragfree
'
,
({
target
})
=>
{
const
{
setActiveSelection
}
=
this
.
props
;
if
(
typeof
target
.
id
===
'
function
'
&&
target
.
hasClass
(
'
aux-node
'
)
===
false
)
{
this
.
storePosition
(
target
.
id
());
const
repositions
=
[
{
id
:
target
.
id
(),
position
:
target
.
position
(),
},
];
target
.
descendants
(
'
node.gme-node
'
)
.
forEach
(
child
=>
repositions
.
push
({
id
:
child
.
id
(),
position
:
child
.
position
(),
}));
this
.
storePositions
(
repositions
);
setTimeout
(()
=>
{
setActiveSelection
([
target
.
id
()]);
});
}
else
{
// Free outside of canvas
this
.
reposition
=
{};
setActiveSelection
([]);
}
});
this
.
cy
.
on
(
'
vclick
'
,
'
node
'
,
(
e
)
=>
{
this
.
reposition
=
{};
const
{
setActiveSelection
,
gmeClient
}
=
this
.
props
;
const
{
createPointer
}
=
this
.
state
;
if
(
typeof
e
.
target
.
id
===
'
function
'
)
{
...
...
@@ -469,7 +465,6 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
this
.
setState
({
createPointer
:
null
});
gmeClient
.
setPointer
(
createPointer
.
nodeId
,
createPointer
.
ptrName
,
createPointer
.
target
);
}
else
if
(
e
.
target
.
hasClass
(
'
aux-node
'
)
===
false
)
{
// console.log('vclick', e.target.id(), JSON.stringify(this.reposition));
this
.
setState
({
showNodeMenu
:
{
id
:
e
.
target
.
id
(),
...
...
@@ -494,9 +489,9 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
this
.
cy
.
on
(
'
mouseover
'
,
'
node
'
,
(
e
)
=>
{
const
{
createPointer
}
=
this
.
state
;
const
{
gmeClient
}
=
this
.
props
;
if
(
createPointer
&&
typeof
e
.
target
.
id
===
'
function
'
&&
e
.
target
.
hasClass
(
'
aux-node
'
)
===
false
)
{
if
(
createPointer
&&
typeof
e
.
target
.
id
===
'
function
'
&&
e
.
target
.
hasClass
(
'
aux-node
'
)
===
false
)
{
const
gmeNode
=
gmeClient
.
getNode
(
e
.
target
.
id
());
if
(
gmeNode
&&
gmeNode
.
isValidTargetOf
(
createPointer
.
nodeId
,
createPointer
.
ptrName
)
&&
createPointer
.
target
!==
e
.
target
.
id
())
{
...
...
@@ -561,7 +556,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
onClick
=
{
()
=>
{
const
layout
=
this
.
cy
.
layout
(
coseBilkentOptions
);
layout
.
on
(
'
layoutstop
'
,
()
=>
{
this
.
storePosition
(
activeNode
);
this
.
atLayoutStop
(
);
});
layout
.
run
();
}
}
...
...
@@ -574,7 +569,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
onClick
=
{
()
=>
{
const
layout
=
this
.
cy
.
layout
({
name
:
'
dagre
'
});
layout
.
on
(
'
layoutstop
'
,
()
=>
{
this
.
storePosition
(
activeNode
);
this
.
atLayoutStop
(
);
});
layout
.
run
();
}
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment