Home Reference Source

cables_dev/cables_ui/src/ui/components/opparampanel/valuechanger.js

  1. import { ele } from "cables-shared-client";
  2. import { utils } from "cables";
  3. import { GuiText } from "../../text.js";
  4. import { hideToolTip } from "../../elements/tooltips.js";
  5. import undo from "../../utils/undo.js";
  6. import paramsHelper from "./params_helper.js";
  7. import { gui } from "../../gui.js";
  9. let pointerLockFirstTime = true;
  11. export default valueChanger;
  13. /**
  14.  * mouse and keyboard interactions with port parameters
  15.  */
  16. function valueChanger(eleId, focus, portName, opid)
  17. {
  18.     gui.showInfo(GuiText.valueChangerInput);
  20.     const eleInput = ele.byId(eleId);
  21.     const eleContainer = ele.byId(eleId + "-container");
  22.     const eleNumInputDisplay = document.querySelector("#" + eleId + "-container .numberinput-display");
  24.     const theOp = gui.corePatch().getOpById(opid);
  25.     if (!theOp) return;
  27.     const thePort = theOp.getPort(portName);
  29.     let isDown = false;
  30.     const startVal = eleInputValue();
  31.     let incMode = 0;
  32.     let mouseDownTime = 0;
  34.     let usePointerLock = true;
  36.     if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) usePointerLock = false;
  38.     document.addEventListener("pointerup", up);
  39.     document.addEventListener("pointerdown", down);
  40.     eleInput.addEventListener("focusout", blur);
  42.     if (focus)
  43.     {
  44.         setTextEdit(true);
  45.         eleInput.addEventListener("keydown", paramsHelper.inputListenerCursorKeys);
  46.         // elem.keydown(paramsHelper.inputListenerCursorKeys);
  47.     }
  49.     function setTextEdit(enabled)
  50.     {
  51.         ele.forEachClass("numberinput", (elm) => { elm.classList.remove("numberinputFocussed"); });
  53.         if (enabled)
  54.         {
  55.             if (eleContainer.classList.contains("valuesliderinput"))
  56.                 eleInput.addEventListener("input", () => { paramsHelper.valueChangerSetSliderCSS(eleInput.value, eleContainer); });
  57.             ele.hide(eleNumInputDisplay);
  59.             eleContainer.classList.add("numberinputFocussed");
  60.             ele.show(eleInput);
  61.             eleInput.focus();
  63.             const vv = eleInput.value;
  64.             eleInput.setSelectionRange(0, vv.length);
  65.         }
  66.         else
  67.         {
  68.             if (eleContainer.classList.contains("valuesliderinput")) eleInput.addEventListener("input",
  69.                 () =>
  70.                 {
  71.                     paramsHelper.valueChangerSetSliderCSS(eleInput.value, eleContainer);
  72.                 });
  74.             ele.show(eleNumInputDisplay);
  75.             ele.hide(eleInput);
  76.             eleInput.blur();
  78.             document.removeEventListener("pointerup", up);
  79.             document.removeEventListener("pointerdown", down);
  80.         }
  81.     }
  83.     function down(e)
  84.     {
  85.         if (ele.hasFocus(eleInput)) return;
  87.         eleInput.removeEventListener("wheel", paramsHelper.inputListenerMousewheel);
  88.         eleInput.addEventListener("wheel", paramsHelper.inputListenerMousewheel);
  89.         eleInput.addEventListener("keydown", paramsHelper.inputListenerCursorKeys);
  90.         mouseDownTime = performance.now();
  91.         isDown = true;
  93.         if (usePointerLock)
  94.         {
  95.             document.addEventListener("pointerlockerror", lockError);
  96.             document.addEventListener("pointerlockchange", lockChange);
  97.             document.addEventListener("mozpointerlockchange", lockChange);
  98.             document.addEventListener("webkitpointerlockchange", lockChange);
  100.             if (eleInput.classList.contains("inc_int")) incMode = 1;
  102.             eleInput.requestPointerLock = eleInput.requestPointerLock || eleInput.mozRequestPointerLock || eleInput.webkitRequestPointerLock;
  103.             if (eleInput.requestPointerLock) eleInput.requestPointerLock();
  104.         }
  105.         else
  106.         {
  107.             document.addEventListener("pointermove", move);
  108.         }
  110.         CABLES.mouseDraggingValue = true;
  111.     }
  113.     function up(e)
  114.     {
  115.         if (ele.hasFocus(eleInput)) return;
  117.         CABLES.mouseDraggingValue = false;
  119.         if (opid && portName)
  120.         {
  121.             const undofunc = (function (_portName, opId, oldVal, newVal)
  122.             {
  123.                 if (oldVal != newVal)
  124.                     undo.add({
  125.                         "title": "Value mousedrag " + oldVal + " to " + newVal,
  126.                         undo()
  127.                         {
  128.                             const op = gui.corePatch().getOpById(opid);
  129.                             const p = op.getPort(_portName);
  130.                             gui.patchView.showDefaultPanel();
  132.                             p.set(oldVal);
  133.                             gui.opParams.show(op);
  134.                             gui.patchView.focusOp(null);
  135.                             gui.patchView.focusOp(op.id);
  136.                             gui.patchView.centerSelectOp(op.id);
  137.                         },
  138.                         redo()
  139.                         {
  140.                             const op = gui.corePatch().getOpById(opid);
  141.                             const p = op.getPort(_portName);
  142.                             gui.patchView.showDefaultPanel();
  144.                             p.set(newVal);
  145.                             gui.opParams.show(op);
  146.                             gui.patchView.focusOp(null);
  147.                             gui.patchView.focusOp(op.id);
  148.                             gui.patchView.centerSelectOp(op.id);
  149.                         }
  150.                     });
  151.             }(portName, opid, parseFloat(startVal), parseFloat(eleInput.value)));
  152.         }
  154.         // gui.setStateUnsaved();
  155.         gui.savedState.setUnSaved("valuechangerUp", thePort.op.getSubPatch());
  157.         isDown = false;
  159.         if (usePointerLock)
  160.         {
  161.             document.removeEventListener("pointerlockerror", lockError, false);
  162.             document.removeEventListener("pointerlockchange", lockChange, false);
  163.             document.removeEventListener("mozpointerlockchange", lockChange, false);
  164.             document.removeEventListener("webkitpointerlockchange", lockChange, false);
  166.             if (document.exitPointerLock)document.exitPointerLock();
  167.         }
  169.         document.removeEventListener("pointerup", up);
  170.         document.removeEventListener("pointerdown", down);
  171.         document.removeEventListener("pointermove", move, false);
  172.         if (performance.now() - mouseDownTime < 200) setTextEdit(true);
  173.     }
  175.     function setProgress(v)
  176.     {
  177.         paramsHelper.valueChangerSetSliderCSS(eleInput.value, eleContainer);
  178.         return v;
  179.     }
  181.     function eleInputValue()
  182.     {
  183.         eleInput.value = eleInput.value.replaceAll(",", ".");
  185.         let str = eleInput.value;
  186.         let v = parseFloat(str);
  187.         if (v != v)v = 0;
  189.         return v;
  190.     }
  192.     function move(e)
  193.     {
  194.         if (pointerLockFirstTime)
  195.         {
  196.             pointerLockFirstTime = false;
  197.             return;
  198.         }
  200.         if (ele.hasFocus(eleInput)) return;
  202.         // gui.setStateUnsaved();
  203.         gui.savedState.setUnSaved("valuechangerMove", thePort.op.getSubPatch());
  204.         let v = eleInputValue();
  205.         let inc = 0;
  207.         if (thePort.uiAttribs.min != undefined)
  208.             v = utils.map(v, thePort.uiAttribs.min, thePort.uiAttribs.max, 0, 1);
  210.         if (Math.abs(e.movementX) > 5) mouseDownTime = 0;
  212.         if (eleContainer.classList.contains("valuesliderinput"))
  213.         {
  214.             inc = e.movementX * 0.001;
  215.             v += inc;
  216.             v = Math.max(0, v);
  217.             v = Math.min(1, v);
  218.             v = Math.round(v * 1000) / 1000;
  219.             v = setProgress(v);
  220.         }
  221.         else
  222.         if (incMode == 0)
  223.         {
  224.             inc = e.movementX * 0.01;
  225.             if (e.shiftKey || e.which == 3)inc = e.movementX * 0.5;
  227.             v += inc;
  228.             v = Math.round(v * 1000) / 1000;
  229.         }
  230.         else
  231.         {
  232.             inc = e.movementX * 1;
  233.             if (e.shiftKey || e.which == 3)inc = e.movementX * 5;
  235.             v += inc;
  236.             v = Math.floor(v);
  237.         }
  239.         if (thePort.uiAttribs.min != undefined)
  240.             v = utils.map(v, 0, 1, thePort.uiAttribs.min, thePort.uiAttribs.max);
  242.         eleInput.value = v;
  243.         eleNumInputDisplay.innerHTML = v;
  245.         eleInput.dispatchEvent(new Event("input"));
  246.     }
  248.     function lockError(e)
  249.     {
  250.         // console.log("pointer lock error...", e);
  251.     }
  253.     function lockChange(e)
  254.     {
  255.         if (document.pointerLockElement === eleInput || document.mozPointerLockElement === eleInput || document.webkitPointerLockElement === eleInput)
  256.         {
  257.             pointerLockFirstTime = true;
  258.             document.addEventListener("pointermove", move);
  259.         }
  260.         else
  261.         {
  262.             // propably cancled by escape key / reset value
  263.             eleInput.value = startVal;
  264.             eleNumInputDisplay.innerHTML = startVal;
  265.             eleInput.dispatchEvent(new Event("input"));
  266.             up();
  267.         }
  268.     }
  270.     function blur(e)
  271.     {
  272.         // value changed after blur
  273.         if (startVal != eleInputValue())
  274.         {
  275.             if (opid && portName)
  276.             {
  277.                 if (isNaN(eleInput.value))
  278.                 {
  279.                     const op = gui.corePatch().getOpById(opid);
  280.                     const p = op.getPort(portName);
  282.                     let mathParsed = eleInput.value;
  284.                     mathParsed = mathParsed.replaceAll(",", ".");
  286.                     try
  287.                     {
  288.                         mathParsed = CABLES.UI.mathparser.parse(eleInput.value);
  289.                     }
  290.                     catch (ex)
  291.                     {
  292.                         // failed to parse math, use unparsed value
  293.                         mathParsed = eleInputValue();
  294.                     }
  295.                     eleInput.value = mathParsed;
  297.                     p.set(mathParsed);
  298.                     hideToolTip();
  299.                 }
  300.             }
  301.         }
  303.         hideToolTip();
  304.         eleInput.removeEventListener("focusout", blur);
  305.         eleNumInputDisplay.innerHTML = eleInput.value;
  306.         setTextEdit(false);
  308.         if (eleInput.classList.contains("valuesliderinput"))setProgress();
  309.     }
  310. }