Improvement to SI view
- Labels shorter - Labels above nodes - Icons based on component types - New SVG icons
This commit is contained in:
Kris De Volder
@@ -23,6 +23,7 @@ cp -R ${client_dir}/samples $static_dir/samples
|
||||
cp -R ${client_dir}/css $static_dir/css
|
||||
cp -R ${client_dir}/lib $static_dir/lib
|
||||
cp -R ${client_dir}/src $static_dir/src
|
||||
cp -R ${client_dir}/icon $static_dir/icon
|
||||
|
||||
../mvnw \
|
||||
-f ../pom.xml \
|
||||
|
||||
26
headless-services/sprotty-si-view/client/icon/aggregator.svg
Normal file
26
headless-services/sprotty-si-view/client/icon/aggregator.svg
Normal file
@@ -0,0 +1,26 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" baseProfile="full" width="100px"
|
||||
height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="svg_document"
|
||||
style="zoom: 1;"><!-- Created with macSVG - https://macsvg.org/ - https://github.com/dsward2/macsvg/ -->
|
||||
<title id="svg_document_title">Untitled.svg</title>
|
||||
<defs id="svg_document_defs"></defs>
|
||||
<rect stroke="#000000" x="10px" height="20px" y="10px" id="rect1" stroke-width="3px" width="20px" fill="greenyellow"
|
||||
transform=""></rect>
|
||||
<rect stroke="#000000" x="10px" height="20px" y="40px" id="rect2" stroke-width="3px" width="20px" fill="greenyellow"
|
||||
transform=""></rect>
|
||||
<rect stroke="#000000" x="70px" height="20px" y="40px" id="rect4" stroke-width="3px" width="20px" fill="greenyellow"
|
||||
transform=""></rect>
|
||||
<rect stroke="#000000" x="10px" height="20px" y="70px" id="rect3" stroke-width="3px" width="20px" fill="greenyellow"
|
||||
transform=""></rect>
|
||||
<line stroke="#000000" y1="50.000000px" id="line1" x1="35.000000px" stroke-width="3px" y2="50.000000px"
|
||||
x2="65.000000px" transform=""></line>
|
||||
<line stroke="#000000" y1="45.000000px" id="line2" x1="58.000000px" stroke-width="3px" y2="50.000000px"
|
||||
x2="65.000000px" transform=""></line>
|
||||
<line stroke="#000000" y1="55.000000px" id="line3" x1="58.000000px" stroke-width="3px" y2="50.000000px"
|
||||
x2="65.000000px" transform=""></line>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
|
||||
<line style="stroke: rgb(0, 0, 0);" x1="74.53838348388673" y1="29.348882518908752" x2="74.53838348388673" y2="29.348882518908752"/>
|
||||
<path style="" transform="matrix(1, 0, 0, -1, 0, 0)" d="M 8 -90 H 18 V -15 A 5 5 0 0 1 13 -10 H 13 A 5 5 0 0 1 8 -15 V -90 Z" bx:shape="rect 8 -90 10 80 0 0 5 5 1@160af39c"/>
|
||||
<polygon style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);" points="22 14"/>
|
||||
<polygon style="fill: greenyellow; stroke: rgb(0, 0, 0);" points="20 20 48 30 48 75 20 87"/>
|
||||
<path style="" transform="matrix(-1, 0, 0, -1, 0, 0)" d="M -92 -90 H -82 V -15 A 5 5 0 0 1 -87 -10 H -87 A 5 5 0 0 1 -92 -15 V -90 Z" bx:shape="rect -92 -90 10 80 0 0 5 5 1@7aff9b84"/>
|
||||
<polygon style="fill: greenyellow; stroke: rgb(0, 0, 0);" points="52 87 80 77 80 32 52 20" transform="matrix(-1, 0, 0, -1, 132, 107)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 955 B |
16
headless-services/sprotty-si-view/client/icon/bridge.svg
Normal file
16
headless-services/sprotty-si-view/client/icon/bridge.svg
Normal file
@@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" baseProfile="full" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="svg_document" style="zoom: 1;" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
|
||||
<title id="svg_document_title">Untitled.svg</title>
|
||||
<line stroke="#000000" y1="64" id="line1" stroke-width="5px" x1="10" y2="64" x2="90"/>
|
||||
<line stroke="#000000" y1="12px" id="line2" x1="30px" stroke-width="3px" y2="12px" x2="30px" transform=""/>
|
||||
<line stroke="#000000" y1="12px" id="line3" x1="28px" stroke-width="3px" y2="12px" x2="28px" transform=""/>
|
||||
<line stroke="#000000" y1="24" id="line4" stroke-width="7px" x1="30" y2="75" x2="30" style="stroke-linecap: round;"/>
|
||||
<line stroke="#000000" y1="22px" id="line5" x1="78px" stroke-width="3px" y2="22px" x2="78px" transform=""/>
|
||||
<line stroke="#000000" y1="24" id="line6" stroke-width="7px" x1="70" y2="75" x2="70" style="stroke-linecap: round;"/>
|
||||
<line stroke="#000000" y1="38" id="line12" x1="40" y2="64" x2="40" style="stroke-width: 2px;"/>
|
||||
<path style="stroke: rgb(0, 0, 0); fill: none; stroke-width: 2px;" d="M 30 32 C 43 42 57 42 70 32"/>
|
||||
<line stroke="#000000" y1="38" id="line-1" x1="60" y2="64" x2="60" style="stroke-width: 2px;"/>
|
||||
<line stroke="#000000" y1="40" id="line-2" x1="50" y2="63" x2="50" style="stroke-width: 2px;" transform="matrix(1, 0.00013, -0.00013, 1, 0.00819, -0.006499)" bx:origin="0 1"/>
|
||||
<path style="stroke: rgb(0, 0, 0); fill: none; stroke-width: 2px;" d="M 71 33 Q 73 56 87 64"/>
|
||||
<path style="stroke: rgb(0, 0, 0); fill: none; stroke-width: 2px;" d="M -3 94 C -2 79 3 69 13 63" transform="matrix(-1, 0, 0, -1, 26, 126)" bx:origin="1 0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
20
headless-services/sprotty-si-view/client/icon/chain.svg
Normal file
20
headless-services/sprotty-si-view/client/icon/chain.svg
Normal file
@@ -0,0 +1,20 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" baseProfile="full" width="100px"
|
||||
height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="svg_document"
|
||||
style="zoom: 1;"><!-- Created with macSVG - https://macsvg.org/ - https://github.com/dsward2/macsvg/ -->
|
||||
<title id="svg_document_title">Untitled.svg</title>
|
||||
<defs id="svg_document_defs"></defs>
|
||||
<rect stroke="#000000" x="10px" height="20px" y="45px" id="rect1" stroke-width="3px" width="20px"
|
||||
fill="greenyellow" transform=""></rect>
|
||||
<rect stroke="#000000" x="40px" height="20px" y="45px" id="rect2" stroke-width="3px" width="20px"
|
||||
fill="greenyellow" transform=""></rect>
|
||||
<rect stroke="#000000" x="70px" height="20px" y="45px" id="rect3" stroke-width="3px" width="20px"
|
||||
fill="greenyellow" transform=""></rect>
|
||||
<path d="M 20 45 A 10 10 0 0 1 50 45" stroke="black" stroke-width="3" fill="none"></path>
|
||||
<path d="M 50 45 A 10 10 0 0 1 80 45" stroke="black" stroke-width="3" fill="none"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,23 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" baseProfile="full" width="100px"
|
||||
height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="svg_document"
|
||||
style="zoom: 1;"><!-- Created with macSVG - https://macsvg.org/ - https://github.com/dsward2/macsvg/ -->
|
||||
<title id="svg_document_title">Untitled.svg</title>
|
||||
<defs id="svg_document_defs"></defs>
|
||||
<g id="main_group"></g>
|
||||
<rect stroke="#000000" x="10px" height="30px" y="35px" id="rect1" stroke-width="3px" width="30px" fill="greenyellow"
|
||||
transform=""></rect>
|
||||
<rect stroke="#000000" x="70px" height="20px" y="40px" id="rect2" stroke-width="3px" width="20px" fill="greenyellow"
|
||||
transform=""></rect>
|
||||
<line stroke="#000000" y1="50.000000px" id="line1" stroke-width="3px" x1="45.000000px" y2="50.000000px"
|
||||
stroke-linecap="round" x2="65.000000px" transform=""></line>
|
||||
<line stroke="#000000" y1="45.000000px" id="line2" stroke-width="3px" x1="60.000000px" y2="50.000000px"
|
||||
stroke-linecap="round" x2="65.000000px"></line>
|
||||
<line stroke="#000000" y1="50.000000px" id="line3" stroke-width="3px" x1="65.000000px" y2="55.000000px"
|
||||
stroke-linecap="round" x2="60.000000px"></line>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
23
headless-services/sprotty-si-view/client/icon/enricher.svg
Normal file
23
headless-services/sprotty-si-view/client/icon/enricher.svg
Normal file
@@ -0,0 +1,23 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" baseProfile="full" width="100px"
|
||||
height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="svg_document"
|
||||
style="zoom: 1;"><!-- Created with macSVG - https://macsvg.org/ - https://github.com/dsward2/macsvg/ -->
|
||||
<title id="svg_document_title">Untitled.svg</title>
|
||||
<defs id="svg_document_defs"></defs>
|
||||
<g id="main_group"></g>
|
||||
<rect stroke="#000000" x="10px" height="20px" y="40px" id="rect1" stroke-width="3px" width="20px" fill="greenyellow"
|
||||
transform=""></rect>
|
||||
<rect stroke="#000000" x="60px" height="30px" y="35px" id="rect2" stroke-width="3px" width="30px" fill="greenyellow"
|
||||
transform=""></rect>
|
||||
<line stroke="#000000" y1="50.000000px" id="line1" stroke-width="3px" x1="35.000000px" y2="50.000000px"
|
||||
stroke-linecap="round" x2="55.000000px" transform=""></line>
|
||||
<line stroke="#000000" y1="45.000000px" id="line2" stroke-width="3px" x1="50.000000px" y2="50.000000px"
|
||||
stroke-linecap="round" x2="55.000000px"></line>
|
||||
<line stroke="#000000" y1="50.000000px" id="line3" stroke-width="3px" x1="55.000000px" y2="55.000000px"
|
||||
stroke-linecap="round" x2="50.000000px"></line>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
17
headless-services/sprotty-si-view/client/icon/filter.svg
Normal file
17
headless-services/sprotty-si-view/client/icon/filter.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" baseProfile="full" width="100px"
|
||||
height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="svg_document"
|
||||
style="zoom: 4;"><!-- Created with macSVG - https://macsvg.org/ - https://github.com/dsward2/macsvg/ -->
|
||||
<title id="svg_document_title">Untitled.svg</title>
|
||||
<defs id="svg_document_defs"></defs>
|
||||
<g id="main_group"></g>
|
||||
<polygon points="10,10 90,10 55,50 55,80 45,90 45,51" stroke="#000000" id="polygon1" stroke-width="3px"
|
||||
fill="greenyellow" transform=""></polygon>
|
||||
<line stroke="#000000" y1="50.000000px" id="line1" x1="45.000000px" stroke-width="2px" y2="50.000000px"
|
||||
x2="55.000000px" transform=""></line>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
11
headless-services/sprotty-si-view/client/icon/gateway.svg
Normal file
11
headless-services/sprotty-si-view/client/icon/gateway.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1, 0, 0, 1, -2, 0)">
|
||||
<line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="10" y1="50" x2="30" y2="50"/>
|
||||
<line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="24" y1="45" x2="30" y2="50"/>
|
||||
<line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="24" y1="55" x2="30" y2="50"/>
|
||||
</g>
|
||||
<line style="stroke: rgb(0, 0, 0);" x1="74.53838348388673" y1="29.348882518908752" x2="74.53838348388673" y2="29.348882518908752"/>
|
||||
<rect x="60" y="10" width="30" height="80" style="stroke: rgb(0, 0, 0); stroke-linejoin: round; fill: rgb(173, 255, 47);"/>
|
||||
<polygon fill="greenyellow" stroke="black" stroke-linejoin="round" points="55 10 55 90 30 70 30 30"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 814 B |
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1, 0, 0, 1, -2, 0)">
|
||||
<line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="10" y1="50" x2="30" y2="50"/>
|
||||
<line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="24" y1="45" x2="30" y2="50"/>
|
||||
<line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="24" y1="55" x2="30" y2="50"/>
|
||||
</g>
|
||||
<line style="stroke: rgb(0, 0, 0);" x1="74.53838348388673" y1="29.348882518908752" x2="74.53838348388673" y2="29.348882518908752"/>
|
||||
<rect x="60" y="10" width="30" height="80" style="stroke: rgb(0, 0, 0); stroke-linejoin: round; fill: rgb(173, 255, 47);"/>
|
||||
<polygon fill="greenyellow" stroke="black" stroke-linejoin="round" points="55 10 55 90 30 70 30 30"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 814 B |
@@ -0,0 +1,19 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1, 0, 0, 1, -2, 0)">
|
||||
<line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="10" y1="50" x2="30" y2="50"/>
|
||||
<line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="24" y1="45" x2="30" y2="50"/>
|
||||
<line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="24" y1="55" x2="30" y2="50"/>
|
||||
</g>
|
||||
<line style="stroke: rgb(0, 0, 0);" x1="74.53838348388673" y1="29.348882518908752" x2="74.53838348388673" y2="29.348882518908752"/>
|
||||
<rect x="60" y="10" width="30" height="80" style="stroke: rgb(0, 0, 0); fill: rgb(252, 252, 252); stroke-linejoin: round;"/>
|
||||
<polygon fill="greenyellow" stroke="black" stroke-linejoin="round" points="55 10 55 90 30 70 30 30"/>
|
||||
<line style="stroke: rgb(144, 144, 144);" x1="63" y1="15" x2="85" y2="15"/>
|
||||
<line style="stroke: rgb(144, 144, 144);" x1="63" y1="19" x2="85" y2="19"/>
|
||||
<line style="stroke: rgb(144, 144, 144);" x1="63" y1="23" x2="85" y2="23"/>
|
||||
<line style="stroke: rgb(144, 144, 144);" x1="63" y1="27" x2="85" y2="27"/>
|
||||
<line style="stroke: rgb(144, 144, 144);" x1="63" y1="31" x2="85" y2="31"/>
|
||||
<line style="stroke: rgb(144, 144, 144);" x1="63" y1="35" x2="85" y2="35"/>
|
||||
<line style="stroke: rgb(144, 144, 144);" x1="63" y1="39" x2="85" y2="39"/>
|
||||
<line style="stroke: rgb(144, 144, 144);" x1="63" y1="43" x2="85" y2="43"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg stroke-width="2px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1, 0, 0, 1, -2, 0)">
|
||||
<line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="10" y1="50" x2="30" y2="50"/>
|
||||
<line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="24" y1="45" x2="30" y2="50"/>
|
||||
<line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="24" y1="55" x2="30" y2="50"/>
|
||||
</g>
|
||||
<rect x="60" y="10" width="30" height="80" style="stroke: rgb(0, 0, 0); fill: rgb(252, 252, 252); stroke-linejoin: round;"/>
|
||||
<polygon fill="greenyellow" stroke="black" stroke-linejoin="round" points="55 10 55 90 30 70 30 30"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 700 B |
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1, 0, 0, 1, 60, 0)">
|
||||
<line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="10" y1="50" x2="30" y2="50"/>
|
||||
<line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="24" y1="45" x2="30" y2="50"/>
|
||||
<line style="stroke: rgb(0, 0, 0); stroke-linecap: round;" x1="24" y1="55" x2="30" y2="50"/>
|
||||
</g>
|
||||
<line style="stroke: rgb(0, 0, 0);" x1="23" y1="29" x2="23" y2="29" transform="matrix(-1, 0, 0, -1, 46, 58)"/>
|
||||
<rect x="-38" y="10" width="30" height="80" style="stroke: rgb(0, 0, 0); stroke-linejoin: round; fill: rgb(173, 255, 47);" transform="matrix(-1, 0, 0, 1, 0, 0)"/>
|
||||
<polygon fill="greenyellow" stroke="black" stroke-linejoin="round" points="68 90 68 10 43 30 43 70" transform="matrix(-1, 0, 0, -1, 111, 100)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 875 B |
12
headless-services/sprotty-si-view/client/icon/router.svg
Normal file
12
headless-services/sprotty-si-view/client/icon/router.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<line style="stroke-width: 2px; stroke: rgb(67, 67, 67);" x1="25" y1="50" x2="75" y2="19.999999999999996"/>
|
||||
<circle style="" cx="20" cy="50" r="7"/>
|
||||
<line style="stroke: rgb(0, 0, 0); stroke-width: 2px;" x1="7.5" y1="50.25" x2="15" y2="50"/>
|
||||
<circle style="" cx="80" cy="20" r="7"/>
|
||||
<line style="stroke: rgb(0, 0, 0); stroke-width: 2px;" x1="85" y1="20" x2="93.8" y2="20"/>
|
||||
<circle style="" cx="80" cy="50" r="7"/>
|
||||
<line style="stroke: rgb(0, 0, 0); stroke-width: 2px;" x1="85" y1="50" x2="94" y2="50"/>
|
||||
<circle style="" cx="80" cy="80" r="7"/>
|
||||
<line style="stroke: rgb(0, 0, 0); stroke-width: 2px;" x1="85" y1="80" x2="94" y2="80"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 760 B |
@@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="15" y="45" width="10" height="10" style="fill: black; stroke-width: 2px;" transform="matrix(0.707107, 0.707107, -0.707107, 0.707107, 59.21994, 0.486262)"/>
|
||||
<rect x="15" y="45" width="10" height="10" style="stroke-width: 3px; fill: rgb(255, 255, 255); paint-order: stroke; stroke: rgb(0, 0, 0);" transform="matrix(0.707107, 0.707107, -0.707107, 0.707107, 97.098412, 0.486262)"/>
|
||||
<g>
|
||||
<line style="stroke: rgb(0, 0, 0);" x1="10" y1="50" x2="30" y2="50"/>
|
||||
<line style="stroke: rgb(0, 0, 0);" x1="24" y1="45" x2="30" y2="50"/>
|
||||
<line style="stroke: rgb(0, 0, 0);" x1="24" y1="55" x2="30" y2="50"/>
|
||||
</g>
|
||||
<g transform="matrix(1, 0, 0, 1, 35.958775, -0.044944)">
|
||||
<line style="stroke: rgb(0, 0, 0);" x1="10" y1="50" x2="30" y2="50"/>
|
||||
<line style="stroke: rgb(0, 0, 0);" x1="24" y1="45" x2="30" y2="50"/>
|
||||
<line style="stroke: rgb(0, 0, 0);" x1="24" y1="55" x2="30" y2="50"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1022 B |
26
headless-services/sprotty-si-view/client/icon/splitter.svg
Normal file
26
headless-services/sprotty-si-view/client/icon/splitter.svg
Normal file
@@ -0,0 +1,26 @@
|
||||
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" baseProfile="full" width="100px"
|
||||
height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="svg_document"
|
||||
style="zoom: 1;"><!-- Created with macSVG - https://macsvg.org/ - https://github.com/dsward2/macsvg/ -->
|
||||
<title id="svg_document_title">Untitled.svg</title>
|
||||
<defs id="svg_document_defs"></defs>
|
||||
<rect stroke="#000000" x="70px" height="20px" y="10px" id="rect1" stroke-width="3px" width="20px" fill="greenyellow"
|
||||
transform=""></rect>
|
||||
<rect stroke="#000000" x="10px" height="20px" y="40px" id="rect2" stroke-width="3px" width="20px" fill="greenyellow"
|
||||
transform=""></rect>
|
||||
<rect stroke="#000000" x="70px" height="20px" y="40px" id="rect4" stroke-width="3px" width="20px" fill="greenyellow"
|
||||
transform=""></rect>
|
||||
<rect stroke="#000000" x="70px" height="20px" y="70px" id="rect3" stroke-width="3px" width="20px" fill="greenyellow"
|
||||
transform=""></rect>
|
||||
<line stroke="#000000" y1="50.000000px" id="line1" x1="35.000000px" stroke-width="3px" y2="50.000000px"
|
||||
x2="65.000000px" transform=""></line>
|
||||
<line stroke="#000000" y1="45.000000px" id="line2" x1="58.000000px" stroke-width="3px" y2="50.000000px"
|
||||
x2="65.000000px" transform=""></line>
|
||||
<line stroke="#000000" y1="55.000000px" id="line3" x1="58.000000px" stroke-width="3px" y2="50.000000px"
|
||||
x2="65.000000px" transform=""></line>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" baseProfile="full" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="svg_document" style="zoom: 1;" xmlns="http://www.w3.org/2000/svg">
|
||||
<title id="svg_document_title">Untitled.svg</title>
|
||||
<g id="main_group">
|
||||
<rect stroke="#000000" height="80px" x="10px" id="rect1" stroke-width="3px" width="20px" y="10px" fill="greenyellow" transform=""/>
|
||||
<rect stroke="#000000" height="80px" x="70px" id="rect2" stroke-width="3px" width="20px" y="10px" fill="greenyellow" transform=""/>
|
||||
<line stroke="#000000" y1="20.000000px" id="line1" stroke-width="3px" x1="25.000000px" y2="80.000000px" x2="75.000000px" transform=""/>
|
||||
<line stroke="#000000" y1="80.000000px" id="line2" x1="25.000000px" stroke-width="3px" y2="20.000000px" x2="75.000000px" transform=""/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 876 B |
@@ -516,7 +516,7 @@
|
||||
"countLong": 1549
|
||||
}
|
||||
},
|
||||
"componentType": "bridge",
|
||||
"componentType": "filter",
|
||||
"properties": {},
|
||||
"output": "hotDrinkBarista",
|
||||
"input": "hotDrinks",
|
||||
@@ -629,7 +629,7 @@
|
||||
"countLong": 1559
|
||||
}
|
||||
},
|
||||
"componentType": "service-activator",
|
||||
"componentType": "transformer",
|
||||
"properties": {},
|
||||
"output": "preparedDrinks",
|
||||
"input": "coldDrinkBarista"
|
||||
@@ -629,7 +629,7 @@
|
||||
"countLong": 1559
|
||||
}
|
||||
},
|
||||
"componentType": "transformer",
|
||||
"componentType": "service-activator",
|
||||
"properties": {},
|
||||
"output": "preparedDrinks",
|
||||
"input": "coldDrinkBarista"
|
||||
|
||||
@@ -77,7 +77,6 @@ export class LimitedWidthLabelView extends SLabelView {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@injectable()
|
||||
export class ExampleGraphView extends SGraphView {
|
||||
|
||||
@@ -121,123 +120,10 @@ export class EdgeView extends PolylineEdgeView {
|
||||
@injectable()
|
||||
export class IntegrationNodeView extends RectangularNodeView {
|
||||
render(node: Readonly<IntegrationNode & Hoverable & Selectable>, context: RenderingContext): VNode {
|
||||
if (node.componentType==='transformer') {
|
||||
return <g>
|
||||
<rect x="1.5px" stroke="black" height="97px" id="background_rect" stroke-width="3" width="97px" y="1.5px" fill="none"
|
||||
class-sprotty-node={node instanceof SNode}
|
||||
class-mouseover={node.hoverFeedback} class-selected={node.selected}
|
||||
/>
|
||||
<rect stroke="#000000" height="80px" x="10px" id="rect1" stroke-width="3px" width="20px" y="10px" fill="greenyellow" transform=""/>
|
||||
<rect stroke="#000000" height="80px" x="70px" id="rect2" stroke-width="3px" width="20px" y="10px" fill="greenyellow" transform=""/>
|
||||
<line stroke="#000000" y1="20.000000px" id="line1" stroke-width="3px" x1="25.000000px" y2="80.000000px" x2="75.000000px" transform=""/>
|
||||
<line stroke="#000000" y1="80.000000px" id="line2" x1="25.000000px" stroke-width="3px" y2="20.000000px" x2="75.000000px" transform=""/>
|
||||
{context.renderChildren(node)}
|
||||
</g>;
|
||||
} else if (node.componentType==='aggregator') {
|
||||
return <g>
|
||||
<rect x="1.5px" stroke="black" height="97px" id="background_rect" stroke-width="3" width="97px" y="1.5px" fill="none"
|
||||
class-sprotty-node={node instanceof SNode}
|
||||
class-mouseover={node.hoverFeedback} class-selected={node.selected}
|
||||
/>
|
||||
<rect stroke="#000000" x="10px" height="20px" y="10px" id="rect1" stroke-width="3px" width="20px" fill="greenyellow"
|
||||
transform=""></rect>
|
||||
<rect stroke="#000000" x="10px" height="20px" y="40px" id="rect2" stroke-width="3px" width="20px" fill="greenyellow"
|
||||
transform=""></rect>
|
||||
<rect stroke="#000000" x="70px" height="20px" y="40px" id="rect4" stroke-width="3px" width="20px" fill="greenyellow"
|
||||
transform=""></rect>
|
||||
<rect stroke="#000000" x="10px" height="20px" y="70px" id="rect3" stroke-width="3px" width="20px" fill="greenyellow"
|
||||
transform=""></rect>
|
||||
<line stroke="#000000" y1="50.000000px" id="line1" x1="35.000000px" stroke-width="3px" y2="50.000000px"
|
||||
x2="65.000000px" transform=""></line>
|
||||
<line stroke="#000000" y1="45.000000px" id="line2" x1="58.000000px" stroke-width="3px" y2="50.000000px"
|
||||
x2="65.000000px" transform=""></line>
|
||||
<line stroke="#000000" y1="55.000000px" id="line3" x1="58.000000px" stroke-width="3px" y2="50.000000px"
|
||||
x2="65.000000px" transform=""></line>
|
||||
{context.renderChildren(node)}
|
||||
</g>
|
||||
} else if (node.componentType==='splitter') {
|
||||
return <g>
|
||||
<rect x="1.5px" stroke="black" height="97px" id="background_rect" stroke-width="3" width="97px" y="1.5px" fill="none"
|
||||
class-sprotty-node={node instanceof SNode}
|
||||
class-mouseover={node.hoverFeedback} class-selected={node.selected}
|
||||
></rect>
|
||||
<rect stroke="#000000" x="70px" height="20px" y="10px" id="rect1" stroke-width="3px" width="20px" fill="greenyellow"
|
||||
transform=""></rect>
|
||||
<rect stroke="#000000" x="10px" height="20px" y="40px" id="rect2" stroke-width="3px" width="20px" fill="greenyellow"
|
||||
transform=""></rect>
|
||||
<rect stroke="#000000" x="70px" height="20px" y="40px" id="rect4" stroke-width="3px" width="20px" fill="greenyellow"
|
||||
transform=""></rect>
|
||||
<rect stroke="#000000" x="70px" height="20px" y="70px" id="rect3" stroke-width="3px" width="20px" fill="greenyellow"
|
||||
transform=""></rect>
|
||||
<line stroke="#000000" y1="50.000000px" id="line1" x1="35.000000px" stroke-width="3px" y2="50.000000px"
|
||||
x2="65.000000px" transform=""></line>
|
||||
<line stroke="#000000" y1="45.000000px" id="line2" x1="58.000000px" stroke-width="3px" y2="50.000000px"
|
||||
x2="65.000000px" transform=""></line>
|
||||
<line stroke="#000000" y1="55.000000px" id="line3" x1="58.000000px" stroke-width="3px" y2="50.000000px"
|
||||
x2="65.000000px" transform=""></line>
|
||||
{context.renderChildren(node)}
|
||||
</g>;
|
||||
} else if (node.componentType === 'router') {
|
||||
return <g>
|
||||
<rect x="1.5px" stroke="black" height="97px" id="background_rect" stroke-width="3" width="97px" y="1.5px" fill="none"
|
||||
class-sprotty-node={node instanceof SNode}
|
||||
class-mouseover={node.hoverFeedback} class-selected={node.selected}
|
||||
></rect>
|
||||
<line stroke="#000000" stroke-width="2px" x1="23.25" y1="50" x2="77" y2="20"/>
|
||||
<circle cx="20" cy="50" r="7"/>
|
||||
<circle cx="80" cy="20" r="7"/>
|
||||
<circle cx="80" cy="50" r="7"/>
|
||||
<circle cx="80" cy="80" r="7"/>
|
||||
<line stroke="#000000" stroke-width="2px" x1="7.5" y1="50.25" x2="15" y2="50"/>
|
||||
<line stroke="#000000" stroke-width="2px" x1="85" y1="20" x2="94" y2="20"/>
|
||||
<line stroke="#000000" stroke-width="2px" x1="85" y1="50" x2="94" y2="50"/>
|
||||
<line stroke="#000000" stroke-width="2px" x1="85" y1="80" x2="94" y2="80"/>
|
||||
{context.renderChildren(node)}
|
||||
</g>;
|
||||
} else if (node.componentType === 'service-activator') {
|
||||
return <g>
|
||||
<rect x="1.5px" stroke="black" height="97px" id="background_rect" stroke-width="3" width="97px" y="1.5px" fill="none"
|
||||
class-sprotty-node={node instanceof SNode}
|
||||
class-mouseover={node.hoverFeedback} class-selected={node.selected}
|
||||
></rect>
|
||||
<rect x="15" y="45" width="10" height="10" fill="black" stroke-width="2px" transform="matrix(0.707107, 0.707107, -0.707107, 0.707107, 59.21994, 0.486262)"/>
|
||||
<rect x="15" y="45" width="10" height="10"
|
||||
stroke="black" fill="#ffffff" stroke-width="2px"
|
||||
transform="matrix(0.707107, 0.707107, -0.707107, 0.707107, 97.098412, 0.486262)"/>
|
||||
<g>
|
||||
<line stroke="black" x1="10" y1="50" x2="30" y2="50"/>
|
||||
<line stroke="black" x1="24" y1="45" x2="30" y2="50"/>
|
||||
<line stroke="black" x1="24" y1="55" x2="30" y2="50"/>
|
||||
</g>
|
||||
<g transform="matrix(1, 0, 0, 1, 35.958775, -0.044944)">
|
||||
<line stroke="black" x1="10" y1="50" x2="30" y2="50"/>
|
||||
<line stroke="black" x1="24" y1="45" x2="30" y2="50"/>
|
||||
<line stroke="black" x1="24" y1="55" x2="30" y2="50"/>
|
||||
</g>
|
||||
{context.renderChildren(node)}
|
||||
</g>;
|
||||
} else if (node.componentType.indexOf('outbound-channel-adapter')>=0) {
|
||||
return <g>
|
||||
<rect class-sprotty-node={node instanceof SNode}
|
||||
class-mouseover={node.hoverFeedback} class-selected={node.selected}
|
||||
x="0" y="0" width={Math.max(node.size.width, 0)} height={Math.max(node.size.height, 0)} rx="10" ry="10"/>
|
||||
<g>
|
||||
<line stroke="black" x1="10" y1="50" x2="27" y2="50"/>
|
||||
<line stroke="black" x1="21" y1="45" x2="27" y2="50"/>
|
||||
<line stroke="black" x1="21" y1="55" x2="27" y2="50"/>
|
||||
</g>
|
||||
<line stroke="black" x1="75" y1="30" x2="75" y2="30"/>
|
||||
<polygon fill="greenyellow" stroke="black" stroke-linejoin="round" points="55 10 55 90 30 70 30 30"/>
|
||||
<rect x="60" y="10" width="30" height="80" stroke="black" fill="white" stroke-linejoin="round"/>
|
||||
{context.renderChildren(node)}
|
||||
</g>
|
||||
if (node.componentType.indexOf('outbound-channel-adapter')>=0) {
|
||||
return nodeIcon(node, context, "outbound-channel-adapter");
|
||||
} else {
|
||||
return <g>
|
||||
<rect class-sprotty-node={node instanceof SNode}
|
||||
class-mouseover={node.hoverFeedback} class-selected={node.selected}
|
||||
x="0" y="0" width={Math.max(node.size.width, 0)} height={Math.max(node.size.height, 0)} rx="10" ry="10"></rect>
|
||||
{context.renderChildren(node)}
|
||||
</g>
|
||||
return nodeIcon(node, context, node.componentType);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -284,6 +170,15 @@ export class ErrorPortView implements IView {
|
||||
</g>;
|
||||
}
|
||||
}
|
||||
|
||||
function nodeIcon(node: Readonly<IntegrationNode & Hoverable & Selectable>, context: RenderingContext, iconType: string): VNode {
|
||||
const url = `/icon/${iconType}.svg`;
|
||||
return <g>
|
||||
<rect class-sprotty-node={node instanceof SNode} class-mouseover={node.hoverFeedback} class-selected={node.selected} fill="none" x="0" y="0" width={Math.max(node.size.width, 0)} height={Math.max(node.size.height, 0)}></rect>
|
||||
<image width="100" height="100" color="blue" href={url} />
|
||||
{context.renderChildren(node)}
|
||||
</g>;
|
||||
}
|
||||
/*
|
||||
<g class="shape">'+
|
||||
'<rect class="border"/>' +
|
||||
|
||||
Reference in New Issue
Block a user