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
5422a968
Commit
5422a968
authored
Feb 19, 2019
by
Patrik Meijer
Browse files
GraphEditor add set/pointer classes by name and fix bug in reg lookup
parent
9cc67c06
Changes
2
Hide whitespace changes
Inline
Side-by-side
src/components/GraphEditor/DefaultStyles.jsx
View file @
5422a968
/**
* These are the styles for cytoscape defined by the GraphEditor.
* You cannot overwrite the array, only append additional rules.
* For more info http://js.cytoscape.org/#style
* Note: " For simplicity and ease of use, specificity rules are completely ignored in stylesheets.
* For a given style property for a given element, the last matching selector wins. "
*
*
*/
const
DEFAULT_STYLES
=
[
...
...
@@ -33,6 +38,10 @@ const DEFAULT_STYLES = [
selector
:
'
edge.pointer
'
,
style
:
{
content
:
'
data(label)
'
,
color
:
'
rgb(0,0,255)
'
,
'
font-size
'
:
10
,
width
:
1
,
'
line-color
'
:
'
rgb(0,0,255)
'
,
'
curve-style
'
:
'
bezier
'
,
'
target-arrow-color
'
:
'
rgb(0,0,255)
'
,
...
...
@@ -43,6 +52,10 @@ const DEFAULT_STYLES = [
selector
:
'
edge.set-member
'
,
style
:
{
content
:
'
data(label)
'
,
color
:
'
rgb(255,0,255)
'
,
'
font-size
'
:
10
,
width
:
1
,
'
curve-style
'
:
'
bezier
'
,
'
line-color
'
:
'
rgb(255,0,255)
'
,
'
target-arrow-color
'
:
'
rgb(255,0,255)
'
,
...
...
src/components/GraphEditor/GraphEditor.jsx
View file @
5422a968
...
...
@@ -187,16 +187,10 @@ export default class GraphEditor extends Component {
const
nodeIdsWithChildren
=
{};
const
getPosition
=
(
id
)
=>
{
const
parentN
ode
=
nodes
[
id
];
const
n
ode
=
nodes
[
id
];
// while (parentNode.parent &&
// parentNode.parent !== activeNode &&
// !parentNode[CONSTANTS.CYTOSCAPE_POS_REG_KEY]) {
// parentNode = children[parentNode.parent];
// }
return
JSON
.
parse
(
JSON
.
stringify
(
parentNode
.
registries
[
CONSTANTS
.
CYTOSCAPE_POS_REG_KEY
]
||
parentNode
.
registries
.
position
));
return
JSON
.
parse
(
JSON
.
stringify
(
node
.
registries
[
CONSTANTS
.
CYTOSCAPE_POS_REG_KEY
]
||
node
.
registries
.
position
||
{
x
:
100
,
y
:
100
}));
};
const
isRenderedAsGmeConnection
=
(
id
)
=>
{
...
...
@@ -242,7 +236,8 @@ export default class GraphEditor extends Component {
source
:
childData
.
pointers
.
src
,
target
:
childData
.
pointers
.
dst
,
},
classes
:
`
${
activeSelection
.
includes
(
id
)
?
'
in-active-selection
'
:
''
}
gme-connection`
,
classes
:
`gme-connection
${
childData
.
attributes
.
name
}
-gme-connection\
${
activeSelection
.
includes
(
id
)
?
'
in-active-selection
'
:
''
}
`
,
};
if
(
createPointer
&&
createPointer
.
target
===
id
)
{
...
...
@@ -315,7 +310,7 @@ export default class GraphEditor extends Component {
label
:
setName
,
memberAttrs
:
setMemberData
.
memberAttrs
,
},
classes
:
`set-member
${
activeSelection
.
includes
(
edgeId
)
classes
:
`set-member
${
setName
}
-set-member
${
activeSelection
.
includes
(
edgeId
)
?
'
in-active-selection
'
:
''
}
`
,
};
...
...
@@ -345,7 +340,7 @@ export default class GraphEditor extends Component {
target
:
targetId
,
label
:
pName
,
},
classes
:
`
${
pName
===
'
base
'
?
'
base-pointer
'
:
'
pointer
'
}
\
classes
:
`
${
pName
===
'
base
'
?
'
base-pointer
'
:
`pointer
${
pName
}
-
pointer
`
}
\
${
activeSelection
.
includes
(
edgeId
)
?
'
in-active-selection
'
:
''
}
`
,
};
...
...
@@ -371,7 +366,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
}
else
{
result
.
elements
.
edges
.
push
(
edgeData
);
}
})
})
;
return
result
;
}
...
...
@@ -425,19 +420,27 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
attachCytoscapeHandlers
()
{
this
.
cy
.
on
(
'
position
'
,
({
target
})
=>
{
const
{
nodes
}
=
this
.
props
;
debugger
;
const
childNodeDesc
=
nodes
[
target
.
id
()];
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
&&
(
!
childNodeDesc
[
CONSTANTS
.
CYTOSCAPE_POS_REG_KEY
]
||
childNodeDesc
[
CONSTANTS
.
CYTOSCAPE_POS_REG_KEY
].
x
!==
floorPos
.
x
||
childNodeDesc
[
CONSTANTS
.
CYTOSCAPE_POS_REG_KEY
].
y
!==
floorPos
.
y
))
{
this
.
reposition
[
target
.
id
()]
=
{
id
:
target
.
id
(),
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
,
};
}
...
...
@@ -446,7 +449,6 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
this
.
cy
.
on
(
'
free
'
,
({
target
})
=>
{
const
{
setActiveSelection
}
=
this
.
props
;
if
(
typeof
target
.
id
===
'
function
'
&&
target
.
hasClass
(
'
aux-node
'
)
===
false
)
{
// console.log('free', cyNode.id(), JSON.stringify(this.reposition));
this
.
storePosition
(
target
.
id
());
setTimeout
(()
=>
{
setActiveSelection
([
target
.
id
()]);
...
...
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