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
52d1a0c9
Commit
52d1a0c9
authored
Feb 22, 2019
by
Patrik Meijer
Browse files
Handle colors and images efficiently
parent
26bd5bdb
Changes
3
Hide whitespace changes
Inline
Side-by-side
src/components/GraphEditor/DefaultStyles.jsx
View file @
52d1a0c9
...
...
@@ -14,15 +14,27 @@ const COLORS = {
SET
:
'
rgb(255,0,255)
'
,
BASE_POINTER
:
'
rgb(255,0,0)
'
,
SELECTED
:
'
rgba(82, 168, 236, 0.6)
'
,
VALID_TARGET
:
'
rgb(
139, 255, 135
)
'
,
VALID_TARGET
:
'
rgb(
66, 244, 66
)
'
,
INVALID_TARGET
:
'
rgb(255, 135, 135)
'
,
DARK_GREY
:
'
rgb(153, 153, 153)
'
,
LIGHT_GREY
:
'
whitesmoke
'
,
};
const
DEFAULT_STYLES
=
[
{
selector
:
'
node.gme-node
[hasChildren]
'
,
selector
:
'
node.gme-node
'
,
style
:
{
content
:
'
data(attributes.name)
'
,
'
background-image
'
:
(
ele
)
=>
{
const
value
=
ele
.
data
(
'
registries
'
).
SVGIcon
;
return
(
value
&&
value
.
indexOf
(
'
<
'
)
===
-
1
)
?
`url(/assets/DecoratorSVG/
${
value
}
)`
:
undefined
;
},
},
},
{
selector
:
'
node.gme-node[hasChildren]
'
,
style
:
{
'
background-color
'
:
ele
=>
ele
.
data
(
'
registries
'
).
color
||
COLORS
.
LIGHT_GREY
,
// http://js.cytoscape.org/#style/background-image
'
background-width
'
:
'
20%
'
,
'
background-height
'
:
'
20%
'
,
...
...
@@ -31,108 +43,135 @@ const DEFAULT_STYLES = [
{
selector
:
'
node.gme-node[^hasChildren]
'
,
style
:
{
content
:
'
data(attributes.name)
'
,
'
background-color
'
:
ele
=>
ele
.
data
(
'
registries
'
).
color
||
COLORS
.
DARK_GREY
,
// http://js.cytoscape.org/#style/background-image
'
background-width
'
:
'
80%
'
,
'
background-height
'
:
'
80%
'
,
},
},
{
selector
:
'
node.
aux
-node
'
,
selector
:
'
node.
gme
-node
.in-active-selection
'
,
style
:
{
width
:
6
,
height
:
6
,
'
background-color
'
:
'
rgb(174, 219, 255)
'
,
'
border-color
'
:
COLORS
.
SELECTED
,
'
border-style
'
:
'
solid
'
,
'
border-opacity
'
:
'
1
'
,
'
border-width
'
:
5
,
},
},
{
selector
:
'
edge.
pointer
'
,
selector
:
'
edge.
gme-connection
'
,
style
:
{
content
:
'
data(label)
'
,
color
:
COLORS
.
EDGE_LABEL
,
'
font-size
'
:
7
,
width
:
1
,
'
line-color
'
:
COLORS
.
POINTER
,
'
curve-style
'
:
'
bezier
'
,
'
target-arrow-color
'
:
COLORS
.
POINTER
,
'
target-arrow-shape
'
:
'
vee
'
,
'
line-color
'
:
ele
=>
ele
.
data
(
'
registries
'
).
color
||
'
rgb(0, 0, 0)
'
,
// 'curve-style': 'bezier',
// 'target-arrow-shape': (ele) => {
// const arrow = ele.data('registries').lineEndArrow;
// let result = 'none';
//
// if (arrow) {
// result = 'triangle';
// }
//
// return result;
// },
// 'target-arrow-color': ele => ele.data('registries').color || COLORS.DARK_GREY,
// 'source-arrow-shape': (ele) => {
// const arrow = ele.data('registries').lineStartArrow;
// let result = 'none';
//
// if (arrow) {
// result = 'triangle';
// }
//
// return result;
// },
// 'source-arrow-color': ele => ele.data('registries').color || COLORS.DARK_GREY,
},
},
{
selector
:
'
edge.
set-member
'
,
selector
:
'
edge.
gme-connection.in-active-selection
'
,
style
:
{
content
:
'
data(label)
'
,
color
:
COLORS
.
EDGE_LABEL
,
'
font-size
'
:
7
,
width
:
1
,
'
curve-style
'
:
'
bezier
'
,
'
line-color
'
:
COLORS
.
SET
,
'
target-arrow-color
'
:
COLORS
.
SET
,
'
target-arrow-shape
'
:
'
vee
'
,
width
:
5
,
'
line-color
'
:
COLORS
.
SELECTED
,
},
},
{
selector
:
'
edge.base-pointer
'
,
selector
:
'
node.gme-node.valid-action-target
'
,
style
:
{
width
:
1
,
'
line-color
'
:
COLORS
.
BASE_POINTER
,
'
curve-style
'
:
'
bezier
'
,
'
target-arrow-fill
'
:
'
hollow
'
,
'
target-arrow-color
'
:
COLORS
.
BASE_POINTER
,
'
target-arrow-shape
'
:
'
triangle
'
,
'
border-color
'
:
COLORS
.
VALID_TARGET
,
'
border-style
'
:
'
solid
'
,
'
border-opacity
'
:
'
1
'
,
'
border-width
'
:
10
,
},
},
{
selector
:
'
node
[hasChildren].in-active-selection
'
,
selector
:
'
node
.gme-node.invalid-action-target
'
,
style
:
{
//
'border-
width': '2px'
,
'
border-
color
'
:
COLORS
.
INVALID_TARGET
,
'
border-style
'
:
'
solid
'
,
'
border-opacity
'
:
'
1
'
,
'
border-
color
'
:
COLORS
.
SELECTED
,
'
border-
width
'
:
10
,
},
},
{
selector
:
'
node[^hasChildren].in-active-selection
'
,
selector
:
'
edge.gme-connection.valid-action-target
'
,
style
:
{
'
background-color
'
:
COLORS
.
SELECTED
,
width
:
4
,
'
line-color
'
:
COLORS
.
VALID_TARGET
,
},
},
{
selector
:
'
edge.
in-active-selection
'
,
selector
:
'
edge.
gme-connection.invalid-action-target
'
,
style
:
{
width
:
5
,
'
line-color
'
:
COLORS
.
SELECTED
,
width
:
4
,
'
line-color
'
:
COLORS
.
INVALID_TARGET
,
},
},
{
selector
:
'
node.
valid-action-target
'
,
selector
:
'
node.
aux-node
'
,
style
:
{
'
background-color
'
:
COLORS
.
VALID_TARGET
,
width
:
3
,
height
:
3
,
},
},
{
selector
:
'
node.invalid-action-target
'
,
selector
:
'
edge.pointer
'
,
style
:
{
'
background-color
'
:
COLORS
.
INVALID_TARGET
,
content
:
'
data(label)
'
,
color
:
COLORS
.
EDGE_LABEL
,
'
font-size
'
:
7
,
width
:
1
,
'
line-color
'
:
COLORS
.
POINTER
,
'
curve-style
'
:
'
bezier
'
,
'
target-arrow-color
'
:
COLORS
.
POINTER
,
'
target-arrow-shape
'
:
'
vee
'
,
},
},
{
selector
:
'
edge.
valid-action-target
'
,
selector
:
'
edge.
set-member
'
,
style
:
{
width
:
4
,
'
line-color
'
:
COLORS
.
VALID_TARGET
,
content
:
'
data(label)
'
,
color
:
COLORS
.
EDGE_LABEL
,
'
font-size
'
:
7
,
width
:
1
,
'
curve-style
'
:
'
bezier
'
,
'
line-color
'
:
COLORS
.
SET
,
'
target-arrow-color
'
:
COLORS
.
SET
,
'
target-arrow-shape
'
:
'
vee
'
,
},
},
{
selector
:
'
edge.
invalid-action-target
'
,
selector
:
'
edge.
base-pointer
'
,
style
:
{
width
:
4
,
'
line-color
'
:
COLORS
.
INVALID_TARGET
,
width
:
1
,
'
line-color
'
:
COLORS
.
BASE_POINTER
,
'
curve-style
'
:
'
bezier
'
,
'
target-arrow-fill
'
:
'
hollow
'
,
'
target-arrow-color
'
:
COLORS
.
BASE_POINTER
,
'
target-arrow-shape
'
:
'
triangle
'
,
},
},
];
export
default
DEFAULT_STYLES
;
src/components/GraphEditor/GraphEditor.jsx
View file @
52d1a0c9
...
...
@@ -145,7 +145,7 @@ export default class GraphEditor extends Component {
componentWillReceiveProps
({
activeNode
})
{
const
{
activeNode
:
preActiveNode
}
=
this
.
props
;
if
(
activeNode
!==
preActiveNode
)
{
this
.
reposition
=
{};
// update creatingNew etc.
}
}
...
...
@@ -176,7 +176,6 @@ export default class GraphEditor extends Component {
nodes
:
[],
edges
:
[],
},
style
:
[],
hyperEdges
:
[],
};
...
...
@@ -276,16 +275,6 @@ ${activeSelection.includes(id) ? 'in-active-selection' : ''}`,
nodeIdsWithChildren
[
childData
.
parent
]
=
true
;
}
// Use the images defined for the node.
if
(
childData
.
registries
.
SVGIcon
&&
childData
.
registries
.
SVGIcon
.
indexOf
(
'
<
'
)
===
-
1
)
{
result
.
style
.
push
({
selector
:
`node[id = "
${
id
}
"]`
,
style
:
{
'
background-image
'
:
`url(/assets/DecoratorSVG/
${
childData
.
registries
.
SVGIcon
}
)`
,
},
});
}
if
(
creatingNew
&&
creatingNew
.
target
===
id
)
{
cytoData
.
classes
+=
creatingNew
.
isValid
?
'
valid-action-target
'
:
'
invalid-action-target
'
;
}
...
...
@@ -581,9 +570,6 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
}));
this
.
storePositions
(
repositions
);
setTimeout
(()
=>
{
setActiveSelection
([
target
.
id
()]);
});
}
else
{
// Free outside of canvas
setActiveSelection
([]);
...
...
@@ -697,13 +683,13 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
</
Button
>
</
Tooltip
>
{
/*<Tooltip id="tooltip-show-filters" title="Manage filters">*/
}
{
/*<Button*/
}
{
/*onClick={() => {*/
}
{
/*this.setState({showFilterSelector: true});*/
}
{
/*}}*/
}
{
/*>*/
}
{
/*<FilterIcon/>*/
}
{
/*</Button>*/
}
{
/*<Button*/
}
{
/*onClick={() => {*/
}
{
/*this.setState({showFilterSelector: true});*/
}
{
/*}}*/
}
{
/*>*/
}
{
/*<FilterIcon/>*/
}
{
/*</Button>*/
}
{
/*</Tooltip>*/
}
</
span
>
</
div
>
...
...
@@ -721,7 +707,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
}
}
cytoscapeOptions
=
{
{
wheelSensitivity
:
0.1
}
}
layout
=
{
{
name
:
'
preset
'
/* preset dagre */
}
}
style
=
{
this
.
styles
.
concat
(
cytoData
.
style
)
}
style
=
{
this
.
styles
}
/>
{
showNodeMenu
&&
showNodeMenu
.
id
===
activeSelection
[
0
]
?
(
...
...
@@ -741,11 +727,11 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
/>)
:
null
}
{
/*<FilterSelector*/
}
{
/*open={showFilterSelector}*/
}
{
/*validItems={validFilters}*/
}
{
/*activeItems={activeFilters}*/
}
{
/*handleToggle={this.toggleFilter}*/
}
{
/*onClose={(() => this.setState({showFilterSelector: false}))}*/
}
{
/*open={showFilterSelector}*/
}
{
/*validItems={validFilters}*/
}
{
/*activeItems={activeFilters}*/
}
{
/*handleToggle={this.toggleFilter}*/
}
{
/*onClose={(() => this.setState({showFilterSelector: false}))}*/
}
{
/*/>*/
}
</
div
>);
}
...
...
src/components/GraphEditor/ReactCytoscape.jsx
View file @
52d1a0c9
...
...
@@ -69,9 +69,13 @@ export default class ReactCytoscape extends Component {
style
,
}
=
this
.
props
;
if
(
JSON
.
stringify
(
style
)
!==
JSON
.
stringify
(
nextProps
.
style
))
{
this
.
cy
.
style
(
nextProps
.
style
);
}
// TODO: Consider making more fine-grained updates here instead.
if
(
JSON
.
stringify
(
elements
)
!==
JSON
.
stringify
(
nextProps
.
elements
)
||
JSON
.
stringify
(
hyperEdges
)
!==
JSON
.
stringify
(
nextProps
.
hyperEdges
))
{
if
(
JSON
.
stringify
(
elements
)
!==
JSON
.
stringify
(
nextProps
.
elements
)
||
JSON
.
stringify
(
hyperEdges
)
!==
JSON
.
stringify
(
nextProps
.
hyperEdges
))
{
this
.
cy
.
json
({
elements
:
nextProps
.
elements
});
this
.
edgeConnHandler
.
addEdges
(
nextProps
.
hyperEdges
);
}
...
...
@@ -80,10 +84,6 @@ export default class ReactCytoscape extends Component {
this
.
cy
.
resize
();
}
if
(
JSON
.
stringify
(
style
)
!==
JSON
.
stringify
(
nextProps
.
style
))
{
this
.
cy
.
style
(
nextProps
.
style
);
}
if
(
elements
.
nodes
&&
elements
.
nodes
.
length
===
0
&&
nextProps
.
elements
.
nodes
.
length
>
0
)
{
// Initial elements received -> fit graph to canvas.
...
...
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