@polygonjs/polygonjs/dist/src/engine/nodes/js/OnScroll.js

node-based WebGL 3D engine https://polygonjs.com

"use strict";
import { TypedJsNode } from "./_Base";
import { NodeParamsConfig, ParamConfig } from "../utils/params/ParamsConfig";
import { JsConnectionPoint, JsConnectionPointType, JS_CONNECTION_POINT_IN_NODE_DEF } from "../utils/io/connections/Js";
import { JsType } from "../../poly/registers/nodes/types/Js";
import { SCROLL_EVENTS, ScrollEvent } from "../../../core/scroll/Common";
import { InitFunctionJsDefinition, RefJsDefinition, TriggeringJsDefinition } from "./utils/JsDefinition";
import { Poly } from "../../Poly";
import {
  getConnectedOutputNodes,
  getOutputIndices,
  nodeMethodName,
  triggerInputIndex
} from "./code/assemblers/actor/ActorAssemblerUtils";
import { setToArray } from "../../../core/SetUtils";
import { ModuleName } from "../../poly/registers/modules/Common";
export var OnScrollInputName = /* @__PURE__ */ ((OnScrollInputName2) => {
  OnScrollInputName2["attribName"] = "attribName";
  return OnScrollInputName2;
})(OnScrollInputName || {});
export var OnScrollOutputName = /* @__PURE__ */ ((OnScrollOutputName2) => {
  OnScrollOutputName2["progress"] = "progress";
  return OnScrollOutputName2;
})(OnScrollOutputName || {});
const CONNECTION_OPTIONS = JS_CONNECTION_POINT_IN_NODE_DEF;
class OnScrollJsParamsConfig extends NodeParamsConfig {
  constructor() {
    super(...arguments);
    this.element = ParamConfig.STRING("#checkpoint1");
    this.useViewport = ParamConfig.BOOLEAN(false);
    this.scroller = ParamConfig.STRING("#scroll-container", {
      visibleIf: {
        useViewport: false
      }
    });
    this.displayMarkers = ParamConfig.BOOLEAN(false);
  }
}
const ParamsConfig = new OnScrollJsParamsConfig();
export class OnScrollJsNode extends TypedJsNode {
  constructor() {
    super(...arguments);
    this.paramsConfig = ParamsConfig;
  }
  static type() {
    return JsType.ON_SCROLL;
  }
  requiredModules() {
    return [ModuleName.GSAP];
  }
  isTriggering() {
    return true;
  }
  initializeNode() {
    this.io.outputs.setNamedOutputConnectionPoints([
      ...SCROLL_EVENTS.map((triggerName) => new JsConnectionPoint(triggerName, JsConnectionPointType.TRIGGER)),
      new JsConnectionPoint("progress" /* progress */, JsConnectionPointType.FLOAT, CONNECTION_OPTIONS)
    ]);
  }
  setLines(linesController) {
    const usedOutputNames = this.io.outputs.used_output_names();
    if (usedOutputNames.includes("progress" /* progress */)) {
      this._addProgressRef(linesController);
    }
    if (usedOutputNames.length > 0) {
      this._addCreateScrollListenerLines(linesController);
    }
  }
  setTriggeringLines(linesController, triggeredMethods) {
    this._addCreateScrollListenerLines(linesController);
  }
  _addCreateScrollListenerLines(linesController) {
    const element = this.variableForInputParam(linesController, this.p.element);
    const scroller = this.variableForInputParam(linesController, this.p.scroller);
    const useViewport = this.variableForInputParam(linesController, this.p.useViewport);
    const displayMarkers = this.variableForInputParam(linesController, this.p.displayMarkers);
    const outProgress = this._addProgressRef(linesController);
    const listeners = {
      [ScrollEvent.onUpdate]: "",
      [ScrollEvent.onToggle]: "",
      [ScrollEvent.onEnter]: "",
      [ScrollEvent.onLeave]: "",
      [ScrollEvent.onEnterBack]: "",
      [ScrollEvent.onLeaveBack]: ""
    };
    const createOptions = {
      element,
      useViewport,
      scroller,
      displayMarkers,
      nodePath: `'${this.path()}'`
    };
    SCROLL_EVENTS.forEach((eventName) => {
      const triggeredMethods = triggerMethod(this, eventName);
      const _nodeMethodName = nodeMethodName(this, eventName);
      listeners[eventName] = `this.${_nodeMethodName}.bind(this)`;
      const value = triggeredMethods;
      const dataType = JsConnectionPointType.BOOLEAN;
      linesController.addDefinitions(this, [
        new TriggeringJsDefinition(this, linesController, dataType, _nodeMethodName, value, {
          triggeringMethodName: eventName,
          gatherable: false,
          nodeMethodName: _nodeMethodName
        })
      ]);
    });
    const func = Poly.namedFunctionsRegister.getFunction("createScrollListener", this, linesController);
    const bodyLine = func.asString(
      shallowJSONStringify(createOptions),
      JSON.stringify(listeners).replace(/\"/g, ""),
      `this`,
      `this.${outProgress}`
    );
    linesController.addDefinitions(this, [
      new InitFunctionJsDefinition(this, linesController, JsConnectionPointType.OBJECT_3D, this.path(), bodyLine)
    ]);
  }
  _addProgressRef(linesController) {
    const outProgress = this.jsVarName("progress" /* progress */);
    linesController.addDefinitions(this, [
      new RefJsDefinition(this, linesController, JsConnectionPointType.FLOAT, outProgress, `0`)
    ]);
    return outProgress;
  }
}
function triggerMethod(node, outputName) {
  const outputIndex = getOutputIndices(node, (c) => c.name() == outputName)[0];
  const triggerableNodes = /* @__PURE__ */ new Set();
  getConnectedOutputNodes({
    node,
    triggerOutputIndices: [outputIndex],
    triggerableNodes,
    recursive: false
  });
  const triggerableMethodNames = setToArray(triggerableNodes, []).map((triggerableNode) => {
    const argIndex = triggerInputIndex(node, triggerableNode);
    const m = nodeMethodName(triggerableNode);
    return `this.${m}(${argIndex})`;
  });
  return `${triggerableMethodNames.join(";")}`;
}
function shallowJSONStringify(options) {
  const keys = Object.keys(options);
  const values = keys.map((key) => `${key}:${options[key]}`);
  return `{${values}}`;
}