Skip to content

Commit

Permalink
Merge pull request #260 from openworm/feature/232_2
Browse files Browse the repository at this point in the history 
#232 onLoad method for canvas plus small improvements to animation
  • Loading branch information
@tarelli
tarelli authored Jun 3, 2020
2 parents b22a22a + c751872 commit 56a1796
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 10 deletions.
76 changes: 68 additions & 8 deletions js/components/interface/3dCanvas/Canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,21 @@ define(function (require) {
}

this.initialCameraReset = false;
this.animationRunning = false;
}

startAnimation () {
if (this.props.minimiseAnimation !== undefined || this.props.minimiseAnimation) {
this.engine.animationRunning = true;
this.engine.animate();
}
}

stopAnimation () {
if (this.props.minimiseAnimation !== undefined || this.props.minimiseAnimation) {
this.engine.animationRunning = false;
this.engine.animate();
}
}

/**
Expand All @@ -44,6 +59,7 @@ define(function (require) {
* @returns {Canvas}
*/
display (instances) {
var that = this;
if (this.isWidget()) {
this.showOverlay(<div className="spinner-container">
<div className={"fa fa-circle-o-notch fa-spin"}></div>
Expand All @@ -63,6 +79,17 @@ define(function (require) {
// Trigger Update_camera event, camera position is reset when project is first loaded with initial instances
GEPPETTO.trigger(GEPPETTO.Events.Update_camera);
this.setDirty(true);
// Handle the update for the prop onLoad
if (this.props.onLoad !== undefined) {
added.map(instance => {
let parent = instance.getParent();
if (parent !== null) {
that.props.onLoad(parent.getId());
} else {
that.props.onLoad(instance.getId());
}
});
}
}

if (this.isWidget()) {
Expand Down Expand Up @@ -101,6 +128,7 @@ define(function (require) {
* @param object
*/
removeObject (object) {
this.startAnimation();
this.engine.removeObject(object);
}

Expand All @@ -127,6 +155,7 @@ define(function (require) {
* @return {Canvas}
*/
selectInstance (instancePath, geometryIdentifier) {
this.startAnimation();
this.engine.selectInstance(instancePath, geometryIdentifier);
return this;
}
Expand All @@ -138,6 +167,7 @@ define(function (require) {
* @returns {Canvas}
*/
deselectInstance (instancePath) {
this.startAnimation();
this.engine.deselectInstance(instancePath);
return this;
}
Expand All @@ -148,6 +178,7 @@ define(function (require) {
* @returns {Canvas}
*/
assignRandomColor (instance) {
this.startAnimation();
this.engine.assignRandomColor(instance);
return this;
}
Expand All @@ -158,6 +189,7 @@ define(function (require) {
* @return {Canvas}
*/
zoomTo (instances) {
this.startAnimation();
this.engine.zoomTo(instances);
return this;
}
Expand All @@ -168,6 +200,7 @@ define(function (require) {
* @return {Canvas}
*/
setWireframe (wireframe) {
this.startAnimation();
this.engine.setWireframe(wireframe);
return this;
}
Expand All @@ -178,6 +211,7 @@ define(function (require) {
* @return {Canvas}
*/
enablePicking (pickingEnabled) {
this.startAnimation();
this.engine.enablePicking(pickingEnabled);
return this;
}
Expand Down Expand Up @@ -210,6 +244,7 @@ define(function (require) {
* @returns {Canvas}
*/
add3DPlane (x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4, textureURL) {
this.startAnimation();
return this.engine.add3DPlane(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4, textureURL);
}

Expand All @@ -232,6 +267,7 @@ define(function (require) {
* @returns {Canvas}
*/
modify3DPlane (object, x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4) {
this.startAnimation();
return this.engine.modify3DPlane(object, x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4);
}

Expand All @@ -241,6 +277,7 @@ define(function (require) {
* @param {boolean} mode - Show or hide connection lines
*/
showConnectionLines (instancePath, mode) {
this.startAnimation();
this.engine.showConnectionLines(instancePath, mode);
return this;
}
Expand All @@ -252,6 +289,7 @@ define(function (require) {
* @return {Canvas}
*/
showInstance (instancePath) {
this.startAnimation();
this.engine.showInstance(instancePath);
return this;
}
Expand All @@ -263,6 +301,7 @@ define(function (require) {
* @return {Canvas}
*/
hideInstance (instancePath) {
this.startAnimation();
this.engine.hideInstance(instancePath);
return this;
}
Expand All @@ -273,6 +312,7 @@ define(function (require) {
* @return {Canvas}
*/
hideAllInstances () {
this.startAnimation();
this.engine.hideAllInstances();
return this;
}
Expand All @@ -284,6 +324,7 @@ define(function (require) {
* @return {Canvas}
*/
setBackgroundColor (color) {
this.startAnimation();
this.viewState.custom.backgroundColor = color;
this.setDirty(true);
$(this.getContainer()).css("background", color);
Expand All @@ -300,6 +341,7 @@ define(function (require) {
* @return {Canvas}
*/
setColor (path, color, recursion) {
this.startAnimation();
if (recursion === undefined) {
recursion = false;
}
Expand Down Expand Up @@ -767,13 +809,16 @@ define(function (require) {
GEPPETTO.off(GEPPETTO.Events.Instances_created, null, this);
GEPPETTO.off(GEPPETTO.Events.Instance_deleted, null, this);
GEPPETTO.off(GEPPETTO.Events.Update_camera, null, this);
if (this.props.minimiseAnimation !== undefined || this.props.minimiseAnimation) {
GEPPETTO.off(GEPPETTO.Events.selectInstance, null, this);
GEPPETTO.off(GEPPETTO.Events.deselectInstance, null, this);
}
}

componentDidMount () {
if (!isWebglEnabled) {
Detector.addGetWebGLMessage();
} else {
// this.container = $("#" + this.props.id + "_component").get(0);
var [width, height] = this.setContainerDimensions();
this.engine = new ThreeDEngine(this.getContainer(), this.props.id);
this.engine.setSize(width, height);
Expand All @@ -785,22 +830,36 @@ define(function (require) {
GEPPETTO.WidgetsListener.subscribe(this.engine, this.id);

var that = this;
$("#" + this.props.id).on("dialogresizestop resizeEnd", function (event, ui) {
var [width, height] = that.setContainerDimensions();
that.engine.setSize(width, height);
});

if (this.props.minimiseAnimation !== undefined || this.props.minimiseAnimation) {
$("#" + this.props.id + "_component").on("mouseover", function (event, ui) {
that.startAnimation();
});

$("#" + this.props.id + "_component").on("mouseout", function (event, ui) {
that.stopAnimation();
});

GEPPETTO.on(GEPPETTO.Events.selectInstance, () => {
this.stopAnimation();
}, this);

GEPPETTO.on(GEPPETTO.Events.deselectInstance, () => {
this.stopAnimation();
}, this);
}

window.addEventListener('resize', function () {
var [width, height] = that.setContainerDimensions();
that.engine.setSize(width, height);
}, false);

/*
* Update camera position call.
*/
GEPPETTO.on(GEPPETTO.Events.Update_camera, () => {
let instancesFetched = window.Instances.length;
// Instances fetched were stored in window.Instances variable, get number of those with visual capability.
// Instances fetched were stored in window.Instances variable, get number of those with visual capability.
for ( var i = 0; i < window.Instances.length ; i++ ){
if ( !window.Instances[i].hasCapability('VisualCapability') ){
instancesFetched--;
Expand All @@ -814,8 +873,9 @@ define(function (require) {
this.resetCamera();
this.initialCameraReset = false;
}
this.startAnimation();
}, this);

this.initialCameraReset = true;
}
}
Expand Down
4 changes: 4 additions & 0 deletions js/components/interface/3dCanvas/ThreeDEngine.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ define(['jquery'], function () {
this.needsUpdate = false;
this.pickingEnabled = true; // flag to enable disable 3d picking
this.linesUserInput = false;
this.animationRunning = true;
this.linesUserPreference = undefined;
this.hoverListeners = undefined;
this.THREE = THREE;
Expand Down Expand Up @@ -1534,6 +1535,9 @@ define(['jquery'], function () {
var that = this;
that.debugUpdate = that.needsUpdate;
// so that we log only the cycles when we are updating the scene
if (!this.animationRunning) {
return;
}

that.controls.update();

Expand Down
12 changes: 10 additions & 2 deletions js/geppettoModel/ModelFactory.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1330,7 +1330,16 @@ export default function (GEPPETTO) {
window[topInstances[k].getId()] = topInstances[k];
window.Instances[topInstances[k].getId()] = topInstances[k];
}
// TODO Should we trigger that instances were added?

for (let instanceCounter = 0; instanceCounter < newInstancesPaths.length; instanceCounter++) {
var newInstance = newInstancesPaths[instanceCounter];
if (newInstance !== "time") {
let instanceStrings = newInstance.split(".");
if (window.Instances[instanceStrings[0]][instanceStrings[1]] !== undefined) {
GEPPETTO.trigger(GEPPETTO.Events.Instance_added, newInstance);
}
}
}
},

/**
Expand Down Expand Up @@ -3021,4 +3030,3 @@ function createInstancePathObj (instance) {
static: true
};
}

1 change: 1 addition & 0 deletions js/pages/geppetto/GEPPETTO.Events.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export default function (GEPPETTO) {
Spotlight_loaded: "spotlight:loaded",
Instance_deleted: "instance:deleted",
Instances_created: "instances:created",
Instance_added: "instance:added",
Show_Tutorial: "show_tutorial",
Hide_Tutorial: "hide_tutorial",
Show_spinner: "spinner:show",
Expand Down

0 comments on commit 56a1796

Please sign in to comment.