Thanks @h_classen, I tried the file, but couldn’t get it to work with multiple objects, so went back to the first approach. My idea is to set up onover, onout, onclick CSS styles and reference them through the Additional HTML Attributes, so everything is kept in the same place. I can also add Key and Value pairs to trigger Custom Behaviors.
I was getting really close, and then tried to simplify the code and it broke down, was working really well before, but there must be just the CLICK part in the wrong place now… Aaargh!
var cursorTop = hypeDocument.getElementProperty(cursor, 'top');
var cursorLeft = hypeDocument.getElementProperty(cursor, 'left');
var cursorBottom = hypeDocument.getElementProperty(cursor, 'top') + hypeDocument.getElementProperty(cursor, 'height');
var cursorRight = hypeDocument.getElementProperty(cursor, 'left') + hypeDocument.getElementProperty(cursor, 'width');
var UIElements = document.getElementsByClassName('UI');
for (var i = 0; i < UIElements.length; i++) {
var UI = document.getElementsByClassName('UI')[i];
var UITop = hypeDocument.getElementProperty(UI, 'top');
var UIBottom = hypeDocument.getElementProperty(UI, 'top') + hypeDocument.getElementProperty(UI, 'height');
var UILeft = hypeDocument.getElementProperty(UI, 'left');
var UIRight = hypeDocument.getElementProperty(UI, 'left') + hypeDocument.getElementProperty(UI, 'width');
var hit1 = (UIBottom > cursorTop) && (UITop < cursorBottom) && (UILeft < cursorLeft) && (UIRight > cursorLeft);
var hit2 = (UIBottom > cursorTop) && (UITop < cursorBottom) && (UILeft < cursorRight) && (UILeft > cursorLeft);
//MY MOUSE ACTIONS
var myOver = UI.getAttribute('over');
var myOut = UI.getAttribute('out');
var myClick = UI.getAttribute('click');
var myAction = UI.getAttribute('action');
if (hit1 || hit2) {
UI.classList.add(myOver);
UI.classList.remove(myOut);
}
if ((hit1 || hit2) && MyCursor.isPlayingTimelineNamed('click') == true) {
UI.classList.add(myClick);
UI.classList.remove(myOver);
UI.classList.remove(myOut);
} else {
UI.classList.remove(myOver);
UI.classList.add(myOut);
}
}
Where this may work you will run into issues like you have.
It is best to set up a var as a reference to the object/element, that way you always know what you are referencing.
The second thing is to interact with a symbols element properties you need to reference it’s element()
var MyCursor = hypeDocument.getSymbolInstanceById('cursor'); // ref to cursor symbol instance
var MyCursorElement = MyCursor.element(); // ref to cursor symbol instance's element
var cursorTop = hypeDocument.getElementProperty(MyCursorElement, 'top');
var cursorLeft = hypeDocument.getElementProperty(MyCursorElement, 'left');
var cursorBottom = hypeDocument.getElementProperty(MyCursorElement, 'top') + hypeDocument.getElementProperty(cursor, 'height');
var cursorRight = hypeDocument.getElementProperty(MyCursorElement, 'left') + hypeDocument.getElementProperty(cursor, 'width');
Also in removing the original MyCursor you left it in below. You ran into errors of undefined…
if ((hit1 || hit2) && MyCursor.isPlayingTimelineNamed('click') == true) {
No change needs to be done there though as we re reference it above.
This usage is correct as you are calling the symbol object and not it’s properties.
Here is a followup to do intersection observering using Matter.js included in the Hype Runtime. It supports shapes and polygons.
hypeDocument.queryIntersections = function(sourceSelector, targetSelectors) {
var sceneElm = document.getElementById(hypeDocument.currentSceneId());
var sourceElm = sceneElm.querySelector(sourceSelector);
var cursorBody = hypeDocument.getElementProperty(sourceElm, 'physics-body');
if (cursorBody) {
var trackElms = sceneElm.querySelectorAll(targetSelectors);
var trackBodies = [];
trackElms.forEach(function(elm){
var elmBody = hypeDocument.getElementProperty(elm, 'physics-body');
if (elmBody) {
trackBodies.push(elmBody);
} else {
console.log('target '+elm.id+' must be static Physics enabled');
}
});
var collisions = Matter.Query.collides(cursorBody, trackBodies);
if (collisions.length) {
return collisions.map(function(collision){
var isB = sourceElm.id == collision.bodyB.elementId;
return document.getElementById((isB? collision.bodyA : collision.bodyB).elementId);
});
}
} else {
console.log('sourceSelector must be static Physics enabled', elm);
}
return [];
}
You can then check if something (singular) is intersecting with other elements (plural) and use whatever you want to trigger the check (setInterval, Mutation Observer, requestAnimation frame etc.).
setInterval(function(){
var intersectingElms = hypeDocument.queryIntersections('.cursor', '.obstacle');
intersectingElms.forEach(function(elm){
// do something with them
console.log(elm);
});
}, 200);
Only thing it needs the participants to be static Physics objects and inside the same scope (scene).
