@polygonjs/polygonjs
Version:
node-based WebGL 3D engine https://polygonjs.com
118 lines (117 loc) • 3.99 kB
JavaScript
;
import { TypedEventNode } from "./_Base";
import { EventConnectionPoint, EventConnectionPointType } from "../utils/io/connections/Event";
import { NodeContext } from "../../poly/NodeContext";
import { NodeParamsConfig, ParamConfig } from "../utils/params/ParamsConfig";
import { isBooleanTrue } from "../../../core/Type";
import { gsapTimeline } from "../../../core/thirdParty/gsap/gsapFactory";
import { ModuleName } from "../../poly/registers/modules/Common";
var AnimationEventInput = /* @__PURE__ */ ((AnimationEventInput2) => {
AnimationEventInput2["START"] = "start";
AnimationEventInput2["STOP"] = "stop";
AnimationEventInput2["UPDATE"] = "update";
return AnimationEventInput2;
})(AnimationEventInput || {});
export var AnimationEventOutput = /* @__PURE__ */ ((AnimationEventOutput2) => {
AnimationEventOutput2["START"] = "start";
AnimationEventOutput2["COMPLETE"] = "completed";
return AnimationEventOutput2;
})(AnimationEventOutput || {});
class AnimationEventParamsConfig extends NodeParamsConfig {
constructor() {
super(...arguments);
/** @parm animation node */
this.animation = ParamConfig.NODE_PATH("", {
nodeSelection: { context: NodeContext.ANIM },
dependentOnFoundNode: false
});
/** @parm presses to play the animation */
this.play = ParamConfig.BUTTON(null, {
callback: (node) => {
AnimationEventNode.PARAM_CALLBACK_play(node);
}
});
/** @parm presses to pause the animation */
this.pause = ParamConfig.BUTTON(null, {
callback: (node) => {
AnimationEventNode.PARAM_CALLBACK_pause(node);
}
});
/** @param stops previous animations still in progress started by this node */
this.stopsPreviousAnim = ParamConfig.BOOLEAN(1);
}
}
const ParamsConfig = new AnimationEventParamsConfig();
export class AnimationEventNode extends TypedEventNode {
constructor() {
super(...arguments);
this.paramsConfig = ParamsConfig;
}
static type() {
return "animation";
}
requiredModules() {
return [ModuleName.GSAP];
}
initializeNode() {
this.io.inputs.setNamedInputConnectionPoints([
new EventConnectionPoint("start" /* START */, EventConnectionPointType.BASE, this._play.bind(this)),
new EventConnectionPoint("stop" /* STOP */, EventConnectionPointType.BASE, this._pause.bind(this))
]);
this.io.outputs.setNamedOutputConnectionPoints([
new EventConnectionPoint("start" /* START */, EventConnectionPointType.BASE),
new EventConnectionPoint("completed" /* COMPLETE */, EventConnectionPointType.BASE)
]);
}
processEvent(event_context) {
}
static PARAM_CALLBACK_play(node) {
node._play({});
}
static PARAM_CALLBACK_pause(node) {
node._pause();
}
async _play(event_context) {
const param = this.p.animation;
if (param.isDirty()) {
await param.compute();
}
const node = param.value.nodeWithContext(NodeContext.ANIM);
if (!node) {
return;
}
const container = await node.compute();
if (!container) {
return;
}
this._timelineBuilder = container.coreContent();
if (!this._timelineBuilder) {
return;
}
if (this._timeline && isBooleanTrue(this.pv.stopsPreviousAnim)) {
this._timeline.kill();
}
this._timeline = gsapTimeline();
if (!this._timeline) {
return;
}
this._timelineBuilder.populate(this._timeline, { registerproperties: true });
this._timeline.vars.onStart = () => {
this._triggerAnimationStarted(event_context);
};
this._timeline.vars.onComplete = () => {
this._triggerAnimationCompleted(event_context);
};
}
_pause() {
if (this._timeline) {
this._timeline.pause();
}
}
_triggerAnimationStarted(event_context) {
this.dispatchEventToOutput("start" /* START */, event_context);
}
_triggerAnimationCompleted(event_context) {
this.dispatchEventToOutput("completed" /* COMPLETE */, event_context);
}
}