Skip to content

Commit ee20af5

Browse files
author
Aaron Sillus
committed
AframeCanvasHoverController.js created
- added to aframe.html also: (un-)highlightEntity created for aframe
1 parent beb5a91 commit ee20af5

3 files changed

Lines changed: 260 additions & 2 deletions

File tree

‎ui/aframe.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
<script type="text/javascript" src="scripts/CanvasFilter/CanvasFilterController.js"></script>
6060
<script type="text/javascript" src="scripts/CanvasMark/CanvasMarkController.js"></script>
6161
<script type="text/javascript" src="scripts/CanvasFlyTo/CanvasFlyToController.js"></script>
62-
<script type="text/javascript" src="scripts/CanvasHover/CanvasHoverController.js"></script>
62+
<script type="text/javascript" src="scripts/CanvasHover/AframeCanvasHoverController.js"></script>
6363
<script type="text/javascript" src="scripts/CanvasSelect/CanvasSelectController.js"></script>
6464
<script type="text/javascript" src="scripts/CanvasResetView/CanvasResetViewController.js"></script>
6565
<script type="text/javascript" src="scripts/CanvasGrid/CanvasGridController.js"></script>

‎ui/scripts/AframeCanvasManipulator.js‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,28 @@ var canvasManipulator = (function () {
103103
});
104104
}
105105

106+
function highlightEntities(entities, color) {
107+
entities.forEach(function (entity) {
108+
let component = document.getElementById(entity.id);
109+
if (component == undefined) {
110+
events.log.error.publish({text: "CanvasManipualtor - highlightEntities - components for entityIds not found"});
111+
return;
112+
}
113+
setColor(component, color);
114+
});
115+
}
116+
117+
function unhighlightEntities(entities) {
118+
entities.forEach(function (entity) {
119+
let component = document.getElementById(entity.id);
120+
if (component == undefined) {
121+
events.log.error.publish({text: "CanvasManipualtor - unhighlightEntities - components for entityIds not found"});
122+
return;
123+
}
124+
setColor(component, component.getAttribute("color"));
125+
});
126+
}
127+
106128
// after clicking an entity fit the camera to show this entity (angle stays the same)
107129
// not working
108130
function flyToEntity(entity) {
@@ -168,7 +190,7 @@ var canvasManipulator = (function () {
168190

169191
// working
170192
function setColor(object, color) {
171-
object.setAttribute('material', {
193+
object.setAttribute("material", {
172194
color: color
173195
});
174196
}
@@ -198,6 +220,9 @@ var canvasManipulator = (function () {
198220
hideEntities: hideEntities,
199221
showEntities: showEntities,
200222

223+
highlightEntities: highlightEntities,
224+
unhighlightEntities: unhighlightEntities,
225+
201226
flyToEntity: flyToEntity,
202227

203228
addElement: addElement,

‎ui/scripts/CanvasHover/AframeCanvasHoverController.js‎

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
var canvasHoverController = (function() {
2+
3+
var isInNavigation = false;
4+
5+
function initialize(setupConfig){
6+
application.transferConfigParams(setupConfig, controllerConfig);
7+
var cssLink = document.createElement("link");
8+
cssLink.type = "text/css";
9+
cssLink.rel = "stylesheet";
10+
cssLink.href = "scripts/CanvasHover/ho.css";
11+
document.getElementsByTagName("head")[0].appendChild(cssLink);
12+
}
13+
14+
//config parameters
15+
var controllerConfig = {
16+
hoverColor: "darkred",
17+
showQualifiedName : false,
18+
showVersion : false,
19+
showIssues : false
20+
};
21+
22+
function activate(){
23+
24+
actionController.actions.mouse.hover.subscribe(handleOnMouseEnter);
25+
actionController.actions.mouse.unhover.subscribe(handleOnMouseLeave);
26+
27+
var canvas = document.getElementById("x3dom-x3dElement-canvas");
28+
canvas.addEventListener("mousedown", handleOnMousedown, false);
29+
canvas.addEventListener("mouseup", handleOnMouseup, false);
30+
31+
createTooltipContainer();
32+
33+
events.hovered.on.subscribe(onEntityHover);
34+
events.hovered.off.subscribe(onEntityUnhover);
35+
}
36+
37+
function reset(){
38+
var hoveredEntities = events.hovered.getEntities();
39+
40+
hoveredEntities.forEach(function(hoveredEntity){
41+
var unHoverEvent = {
42+
sender: canvasHoverController,
43+
entities: [hoveredEntity]
44+
};
45+
46+
events.hovered.off.publish(unHoverEvent);
47+
});
48+
}
49+
50+
function createTooltipContainer(){
51+
52+
var canvas = document.getElementById("canvas");
53+
54+
var tooltipDivElement = document.createElement("DIV");
55+
tooltipDivElement.id = "tooltip";
56+
57+
var namePElement = document.createElement("P");
58+
namePElement.id = "tooltipName";
59+
tooltipDivElement.appendChild(namePElement);
60+
61+
if(controllerConfig.showQualifiedName) {
62+
var qualifiedNamePElement = document.createElement("P");
63+
qualifiedNamePElement.id = "tooltipQualifiedName";
64+
tooltipDivElement.appendChild(qualifiedNamePElement);
65+
}
66+
67+
if(controllerConfig.showVersion) {
68+
var versionPElement = document.createElement("P");
69+
versionPElement.id = "tooltipVersion";
70+
tooltipDivElement.appendChild(versionPElement);
71+
}
72+
if(controllerConfig.showIssues) {
73+
var openIssuesPElement = document.createElement("P");
74+
openIssuesPElement.id = "tooltipOpenIssues";
75+
tooltipDivElement.appendChild((openIssuesPElement));
76+
77+
var closedIssuesPElement = document.createElement("P");
78+
closedIssuesPElement.id = "tooltipClosedIssues";
79+
tooltipDivElement.appendChild((closedIssuesPElement));
80+
81+
var openSecurityIssuesPElement = document.createElement("P");
82+
openSecurityIssuesPElement.id = "tooltipOpenSecurityIssues";
83+
tooltipDivElement.appendChild((openSecurityIssuesPElement));
84+
85+
var closedSecurityIssuesPElement = document.createElement("P");
86+
closedSecurityIssuesPElement.id = "tooltipClosedSecurityIssues";
87+
tooltipDivElement.appendChild((closedSecurityIssuesPElement));
88+
}
89+
canvas.appendChild(tooltipDivElement);
90+
}
91+
92+
function handleOnMousedown(canvasEvent) {
93+
isInNavigation = true;
94+
}
95+
96+
function handleOnMouseup(canvasEvent) {
97+
isInNavigation = false;
98+
}
99+
100+
function handleOnMouseEnter(eventObject) {
101+
console.debug(eventObject);
102+
if(isInNavigation){
103+
return;
104+
}
105+
106+
var entity = model.getEntityById(eventObject.target.id);
107+
if(entity === undefined){
108+
entity = eventObject.target.id;
109+
events.log.error.publish({ text: "Entity of partID " + multipartEvent.partID + " not in model data."});
110+
return;
111+
}
112+
113+
var applicationEvent = {
114+
sender : canvasHoverController,
115+
entities : [entity],
116+
/*posX : multipartEvent.layerX,
117+
posY : multipartEvent.layerY*/
118+
};
119+
120+
events.hovered.on.publish(applicationEvent);
121+
}
122+
123+
function handleOnMouseLeave(eventObject) {
124+
125+
var entity = model.getEntityById(eventObject.target.id);
126+
if(entity === undefined){
127+
events.log.error.publish({ text: "Entity of partID " + multipartEvent.partID + " not in model data."});
128+
return;
129+
}
130+
131+
var applicationEvent = {
132+
sender : canvasHoverController,
133+
entities : [entity]
134+
};
135+
136+
events.hovered.off.publish(applicationEvent);
137+
}
138+
139+
function onEntityHover(applicationEvent) {
140+
console.debug("onEntityHover");
141+
var entity = applicationEvent.entities[0];
142+
143+
if(entity === undefined){
144+
events.log.error.publish({ text: "Entity is not defined"});
145+
}
146+
147+
if(entity.isTransparent === true) {
148+
return;
149+
}
150+
151+
if(entity.type === "text"){
152+
return;
153+
}
154+
155+
if(entity.marked && entity.selected){
156+
canvasManipulator.unhighlightEntities([entity]);
157+
} else {
158+
canvasManipulator.highlightEntities([entity], controllerConfig.hoverColor);
159+
}
160+
161+
$("#tooltipName").text(getTooltipName(entity));
162+
if(controllerConfig.showQualifiedName) {
163+
$("#tooltipQualifiedName").text(entity.qualifiedName);
164+
}
165+
if(controllerConfig.showVersion) {
166+
$("#tooltipVersion").text("Version: " + entity.version);
167+
}
168+
if(controllerConfig.showIssues) {
169+
let openIssuesSelector = $('#tooltipOpenIssues');
170+
let closedIssuesSelector = $('#tooltipClosedIssues');
171+
let openSecurityIssuesSelector = $('#tooltipOpenSecurityIssues');
172+
let closedSecurityIssuesSelector = $('#tooltipClosedSecurityIssues');
173+
if (entity.type === "Namespace") {
174+
openIssuesSelector.css("display", "none");
175+
closedIssuesSelector.css("display", "none");
176+
openSecurityIssuesSelector.css("display", "none");
177+
closedSecurityIssuesSelector.css("display", "none");
178+
} else {
179+
openIssuesSelector.text("Open Issues: " + entity.numberOfOpenIssues);
180+
closedIssuesSelector.text("Closed Issues: " + entity.numberOfClosedIssues);
181+
openSecurityIssuesSelector.text("Open Security Issues: " + entity.numberOfOpenSecurityIssues);
182+
closedSecurityIssuesSelector.text("Closed Security Issues: " + entity.numberOfClosedSecurityIssues);
183+
openIssuesSelector.css("display", "block");
184+
closedIssuesSelector.css("display", "block");
185+
openSecurityIssuesSelector.css("display", "block");
186+
closedSecurityIssuesSelector.css("display", "block");
187+
}
188+
}
189+
190+
var tooltip = $("#tooltip");
191+
tooltip.css("top", applicationEvent.posY + 50 + "px");
192+
tooltip.css("left", applicationEvent.posX + 50 + "px");
193+
tooltip.css("display", "block");
194+
}
195+
196+
function onEntityUnhover(applicationEvent) {
197+
var entity = applicationEvent.entities[0];
198+
199+
if(entity.marked && entity.selected){
200+
canvasManipulator.highlightEntities([entity], controllerConfig.hoverColor);
201+
} else {
202+
if(!entity.selected){
203+
canvasManipulator.unhighlightEntities([entity]);
204+
}
205+
if(entity.type === "Namespace"){
206+
canvasManipulator.unhighlightEntities([entity]);
207+
}
208+
}
209+
210+
$("#tooltip").css("display", "none");
211+
212+
}
213+
214+
function getTooltipName(entity) {
215+
if(entity.type === "Method") {
216+
return entity.type + ": " + entity.signature;
217+
}
218+
219+
if (entity.type === "Namespace") {
220+
return "Package: " + entity.name;
221+
}
222+
223+
return entity.type + ": " + entity.name;
224+
}
225+
226+
return {
227+
initialize: initialize,
228+
activate: activate,
229+
reset: reset,
230+
handleOnMouseEnter: handleOnMouseEnter,
231+
handleOnMouseLeave: handleOnMouseLeave
232+
};
233+
})();

0 commit comments

Comments
 (0)