Revize 219cf56f

re #16: found node is marked with drop shadow instead of background

sources/imiger-core/src/main/webapp/css/components/sidebar.css

@@ -169 +169 @@
 
 .sidebar .node--found .vertex-name,
 .sidebar .node--found .group-name {
-	background-color: orange;
+	box-shadow: 0 0 16px 2px #ffa500;
 }
 
 .sidebar .node--highlighted .vertex-name {

sources/imiger-core/src/main/webapp/css/components/viewport.css

@@ -47 +47 @@
 	stroke-width: 1;
 }
 
-.viewport .node--found > rect {
-	fill: orange;
-}
-
 .viewport .node--dimmed {
 	opacity: 0.5;
 }

sources/imiger-core/src/main/webapp/js/components/node.js

@@ -151 +151 @@
 		this._isFound = newValue;
 
 		if (newValue) {
-			this._rootElement.classList.add('node--found');
+			if (this.isExcluded) {
+				this._rootElement.classList.add('node--found');
+			} else {
+				this._rootElement.setAttribute('filter', 'url(#node--found)');
+			}
 		} else {
-			this._rootElement.classList.remove('node--found');
+			if (this.isExcluded) {
+				this._rootElement.classList.remove('node--found');
+			} else {
+				this._rootElement.removeAttribute('filter');
+			}
 		}
 	}
 

sources/imiger-core/src/main/webapp/js/components/viewport.js

@@ -183 +183 @@
 					'stop-color': '#5896ff',
 				}),
 			]),
+			// drop shadow for found nodes
+			DOM.s('filter', {
+				id: 'node--found',
+				width: '200%',
+				height: '200%',
+				x: '-50%',
+				y: '-50%',
+			}, [
+				// use feDropShadow once supported in all major browsers
+				DOM.s('feGaussianBlur', {
+					in: 'SourceAlpha',
+					stdDeviation: '16 8',
+				}),
+				DOM.s('feOffset', {
+					dx: 0,
+					dy: 0,
+					result: 'offsetBlur',
+				}),
+				DOM.s('feFlood', {
+					'flood-color': '#ffa500',
+					'flood-opacity': 1,
+				}),
+				DOM.s('feComposite', {
+					in2: 'offsetBlur',
+					operator: 'in',
+				}),
+				DOM.s('feMerge', {}, [
+					DOM.s('feMergeNode'),
+					DOM.s('feMergeNode', {
+						in: 'SourceGraphic',
+					}),
+				]),
+			]),
 		]);
 		graph.appendChild(this._definitions);
 

sources/imiger-core/src/main/webapp/tests/search.robot

@@ -25 +25 @@
 	# check counter of found nodes
 	${found}=		Get Text	${searchCounter}
 	Should Be Equal As Strings	${found}		2
-	# check CSS classes of found nodes
-	Element Should Have Class	${vertex2015}	node--found
-	Element Should Have Class	${vertex2039}	node--found
+	# check found nodes
+	Element Attribute Value Should Be	${vertex2015}	filter	url(#node--found)
+	Element Attribute Value Should Be	${vertex2039}	filter	url(#node--found)
 
 
 Search vertex using button
@@ -36 +36 @@
 	# check counter of found nodes
 	${found}=	Get Text		${searchCounter}
 	Should Be Equal As Strings	${found}		2
-	# check CSS classes of found nodes
-	Element Should Have Class	${vertex2015}	node--found
-	Element Should Have Class	${vertex2039}	node--found
+	# check found nodes
+	Element Attribute Value Should Be	${vertex2015}	filter	url(#node--found)
+	Element Attribute Value Should Be	${vertex2039}	filter	url(#node--found)
 
 
 Reset search using escape key
@@ -50 +50 @@
 	${found}=	Get Text	${searchCounter}
 	Should Be Equal As Strings	${found}		0
 	# check that no nodes are found
-	Element Should Not Have Class	${vertex2015}	node--found
-	Element Should Not Have Class	${vertex2039}	node--found
+	Element Should Not Have Attribute	${vertex2015}	filter
+	Element Should Not Have Attribute	${vertex2039}	filter
 
 
 Reset search using counter click
@@ -62 +62 @@
 	${found}=	Get Text	${searchCounter}
 	Should Be Equal As Strings	${found}		0
 	# check that no nodes are found
-	Element Should Not Have Class	${vertex2015}	vertex--found
-	Element Should Not Have Class	${vertex2039}	vertex--found
+	Element Should Not Have Attribute	${vertex2015}	filter
+	Element Should Not Have Attribute	${vertex2039}	filter