Home Reference Source

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

  1. import { Logger, ele, Events } from "cables-shared-client";
  3. import { Op, Port, utils } from "cables";
  4. import { getHandleBarHtml } from "../../utils/handlebars.js";
  5. import { GuiText } from "../../text.js";
  6. import { PortHtmlGenerator } from "./op_params_htmlgen.js";
  7. import ParamsListener from "./params_listener.js";
  8. import gluiconfig from "../../glpatch/gluiconfig.js";
  9. import { notify } from "../../elements/notification.js";
  10. import namespace from "../../namespaceutils.js";
  11. import Gui, { gui } from "../../gui.js";
  12. import { platform } from "../../platform.js";
  13. import { contextMenu } from "../../elements/contextmenu.js";
  14. import { userSettings } from "../usersettings.js";
  15. import { CmdOps } from "../../commands/cmd_op.js";
  16. import uiconfig from "../../uiconfig.js";
  17. import { UiOp } from "../../core_extend_op.js";
  19. /**
  20.  * op parameter panel
  21.  *
  22.  * @class OpParampanel
  23.  * @extends {Events}
  24.  */
  25. class OpParampanel extends Events
  26. {
  28.     /**
  29.      * @param {string} eleid
  30.      */
  31.     constructor(eleid = null)
  32.     {
  33.         super();
  35.         this.panelId = utils.simpleId();
  36.         this._eleId = eleid;
  37.         this._log = new Logger("OpParampanel");
  38.         this._htmlGen = new PortHtmlGenerator(this.panelId);
  40.         /** @type {Op} */
  41.         this._currentOp = null;
  42.         this._eventPrefix = utils.shortId();
  43.         this._isPortLineDragDown = false;
  45.         /** @type {Array<Port>} */
  46.         this._portsIn = [];
  48.         /** @type {Array<Port>} */
  49.         this._portsOut = [];
  51.         this._paramsListener = new ParamsListener(this.panelId);
  53.         this._portUiAttrListeners = [];
  54.         this._startedGlobalListeners = false;
  56.         this.reloadListener = null;
  57.     }
  59.     get op()
  60.     {
  61.         return this._currentOp;
  62.     }
  64.     setParentElementId(eleid)
  65.     {
  66.         this._eleId = eleid;
  67.     }
  69.     dispose()
  70.     {
  71.         this._stopListeners();
  72.     }
  74.     clear()
  75.     {
  76.         this._stopListeners();
  77.         this._currentOp = null;
  78.     }
  80.     refresh()
  81.     {
  82.         this.show(this._currentOp);
  83.     }
  85.     /**
  86.      * @param {import("cables/src/core/core_patch.js").OpUiAttribs} attr
  87.      */
  88.     _onUiAttrChangeOp(attr)
  89.     {
  90.         if (attr.hasOwnProperty("uierrors")) this.updateUiErrors();
  91.     }
  93.     /**
  94.      * @param {object} attr
  95.      * @param {Port} port
  96.      */
  97.     _onUiAttrChangePort(attr, port)
  98.     {
  99.         if (!attr) return;
  101.         if (attr.hasOwnProperty("greyout")) this.refreshDelayed();
  102.         // todo: only update this part of the html
  104.         if (attr.hasOwnProperty("hover"))
  105.         {
  106.             const portParamRow = ele.byClass("paramport_1_" + port.id);
  107.             if (portParamRow)
  108.             {
  109.                 if (attr.hover) portParamRow.classList.add("hoverPort");
  110.                 else portParamRow.classList.remove("hoverPort");
  111.             }
  112.         }
  114.     }
  116.     /**
  117.      * @param {Op<any>} [op]
  118.      */
  119.     _stopListeners(op)
  120.     {
  121.         op = op || this._currentOp;
  122.         if (!op) return;
  124.         for (let i = 0; i < this._portUiAttrListeners.length; i++)
  125.         {
  126.             const listener = this._portUiAttrListeners[i];
  127.             listener.port.off(listener.listenId);
  128.         }
  129.         this._portUiAttrListeners.length = 0;
  130.         this.onOpUiAttrChange = op.off(this.onOpUiAttrChange);
  131.     }
  133.     /**
  134.      * @param {Op<any>} op
  135.      */
  136.     _startListeners(op)
  137.     {
  138.         if (!op)
  139.         {
  140.             this._stopListeners();
  141.             return;
  142.         }
  144.         if (!this.hasExposeListener)
  145.         {
  146.             this.hasExposeListener = gui.corePatch().on("subpatchExpose",
  147.                 (subpatchid) =>
  148.                 {
  149.                     if (
  150.                         op &&
  151.                         op.storage && op.storage.subPatchVer &&
  152.                         op.patchId.get() === subpatchid
  153.                     )
  154.                     {
  155.                         op.refreshParams();
  156.                     }
  157.                 });
  158.         }
  160.         this.onOpUiAttrChange = op.on(Op.EVENT_UIATTR_CHANGE, this._onUiAttrChangeOp.bind(this));
  162.         for (let i = 0; i < this._portsIn.length; i++)
  163.         {
  164.             const listenId = this._portsIn[i].on(
  165.                 Port.EVENT_UIATTRCHANGE,
  166.                 this._onUiAttrChangePort.bind(this),
  167.                 this._eventPrefix);
  168.             this._portUiAttrListeners.push({ "listenId": listenId, "port": this._portsIn[i] });
  169.         }
  170.     }
  172.     refreshDelayed()
  173.     {
  174.         clearTimeout(this.refreshTimeout);
  175.         this.refreshTimeout = setTimeout(() =>
  176.         {
  177.             this.show(this._currentOp);
  178.         }, 50);
  179.     }
  181.     /**
  182.      * @param {Port} port
  183.      */
  184.     _checkPortTypes(port)
  185.     {
  186.         if (port.type == Port.TYPE_NUMBER && typeof port.get() == "string")
  187.         {
  188.             this.op.setUiError("typeerr", "Wrong type! String in number " + port.name, 0);
  189.         }
  190.     }
  192.     /**
  193.      * @param {Op|String} op
  194.      */
  195.     show(op)
  196.     {
  197.         if (!gui.finishedLoading()) return;
  198.         if (!this._startedGlobalListeners)
  199.         {
  200.             this._startedGlobalListeners = true;
  202.             gui.corePatch().on("bookmarkschanged", () => { gui.bookmarks.needRefreshSubs = true; this._startedGlobalListeners = true; if (!this._currentOp) gui.patchParamPanel.show(true); });
  203.             gui.corePatch().on("subpatchesChanged", () => { gui.bookmarks.needRefreshSubs = true; this._startedGlobalListeners = true; if (!this._currentOp) gui.patchParamPanel.show(true); });
  204.             gui.corePatch().on("subpatchCreated", () => { gui.bookmarks.needRefreshSubs = true; this._startedGlobalListeners = true; if (!this._currentOp) gui.patchParamPanel.show(true); });
  205.             gui.corePatch().on("patchLoadEnd", () => { gui.bookmarks.needRefreshSubs = true; this._startedGlobalListeners = true; if (!this._currentOp) gui.patchParamPanel.show(true); });
  206.         }
  208.         if (this.reloadListener)
  209.             this.reloadListener = gui.corePatch().on("opReloaded", () =>
  210.             {
  211.                 this.refreshDelayed();
  212.             });
  214.         const perf = gui.uiProfiler.start("[opparampanel] show");
  216.         if (typeof op == "string") op = gui.corePatch().getOpById(op);
  218.         if (!gui.showingtwoMetaPanel && gui.metaTabs.getActiveTab() && gui.metaTabs.getActiveTab().title != "op")
  219.             gui.metaTabs.activateTabByName("op");
  221.         if (this._currentOp) this._stopListeners();
  223.         this._currentOp = op;
  225.         if (!op) return;
  227.         op.setUiError("typeerr", null);
  229.         this._portsIn = op.portsIn;
  230.         this._portsOut = op.portsOut;
  232.         if (op.storage && op.storage.subPatchVer && op.patchId)
  233.         {
  234.             const ports = gui.patchView.getSubPatchExposedPorts(op.patchId.get());
  235.             for (let i = 0; i < ports.length; i++)
  236.             {
  237.                 if (ports[i].direction === Port.DIR_IN && this._portsIn.indexOf(ports[i]) == -1) this._portsIn.push(ports[i]);
  238.                 if (ports[i].direction === Port.DIR_OUT && this._portsOut.indexOf(ports[i]) == -1) this._portsOut.push(ports[i]);
  239.             }
  240.         }
  242.         this._startListeners(this._currentOp);
  244.         op.emitEvent("uiParamPanel", op);
  246.         const perfHtml = gui.uiProfiler.start("[opparampanel] build html ");
  248.         gui.opHistory.push(op.id);
  249.         gui.setTransformGizmo(null);
  251.         gui.emitEvent(Gui.EVENT_OP_SELECTIONCHANGED, op);
  253.         this.emitEvent("opSelected", op);
  255.         op.isServerOp = gui.serverOps.isServerOp(op.objName);
  257.         /*
  258.          * show first anim in timeline
  259.          * if (self.timeLine)
  260.          * {
  261.          *     let foundAnim = false;
  262.          *     for (let i = 0; i < this._portsIn.length; i++)
  263.          *     {
  264.          *         if (this._portsIn[i].isAnimated())
  265.          *         {
  266.          *             self.timeLine.setAnim(this._portsIn[i].anim, {
  267.          *                 "name": this._portsIn[i].name,
  268.          *             });
  269.          *             foundAnim = true;
  270.          *             continue;
  271.          *         }
  272.          *     }
  273.          *     if (!foundAnim) self.timeLine.setAnim(null);
  274.          * }
  275.          */
  277.         this._portsIn.sort(function (a, b) { return (a.uiAttribs.order || 0) - (b.uiAttribs.order || 0); });
  279.         let html = this._htmlGen.getHtmlOpHeader(op);
  281.         gui.showInfo(GuiText.patchSelectedOp);
  283.         if (this._portsIn.length > 0)
  284.         {
  285.             const perfLoop = gui.uiProfiler.start("[opparampanel] _showOpParamsLOOP IN");
  286.             html += this._htmlGen.getHtmlHeaderPorts("in", "Input");
  287.             html += this._htmlGen.getHtmlInputPorts(this._portsIn);
  289.             perfLoop.finish();
  290.         }
  292.         if (this._portsOut.length > 0)
  293.         {
  294.             html += this._htmlGen.getHtmlHeaderPorts("out", "Output");
  296.             const perfLoopOut = gui.uiProfiler.start("[opparampanel] _showOpParamsLOOP OUT");
  298.             html += this._htmlGen.getHtmlOutputPorts(this._portsOut);
  300.             perfLoopOut.finish();
  301.         }
  303.         html += getHandleBarHtml("params_op_foot", { "commentColors": uiconfig.commentColors, "op": op, "showDevInfos": userSettings.get("devinfos") });
  305.         const el = document.getElementById(this._eleId || gui.getParamPanelEleId());
  307.         if (el) el.innerHTML = html;
  308.         else return;
  310.         this._paramsListener.init({ "op": op, "element": el });
  312.         perfHtml.finish();
  314.         this.updateUiAttribs();
  316.         for (let i = 0; i < this._portsIn.length; i++)
  317.         {
  318.             this._checkPortTypes(this._portsIn[i]);
  319.             if (this._portsIn[i].uiAttribs.display && this._portsIn[i].uiAttribs.display == "file")
  320.             {
  321.                 let shortName = String(this._portsIn[i].get() || "Open Filemanager");
  322.                 if (shortName.indexOf("/") > -1) shortName = shortName.substr(shortName.lastIndexOf("/") + 1);
  324.                 if (op.getSubPatch())
  325.                 {
  326.                     const subouterOp = op.patch.getSubPatchOuterOp(op.getSubPatch());
  327.                     if (subouterOp)
  328.                     {
  329.                         const subOuterName = subouterOp.objName;
  331.                         if (!namespace.isPatchOp(subOuterName) &&
  332.                         this._portsIn[i].get() &&
  333.                             namespace.isCoreOp(subOuterName) &&
  334.                             namespace.isExtensionOp(subOuterName) &&
  335.                             String(this._portsIn[i].get()).startsWith("/assets/") &&
  336.                             !this._portsIn[i].isLinked())
  337.                             this._portsIn[i].op.setUiError("nonpatchopassets", "This Operator uses assets from a patch, this file will probably not be found when exporting the patch or using in standalone etc.!", 1);
  338.                     }
  339.                 }
  341.                 let eleOpen = ele.byId("portOpenAsset_" + i);
  342.                 let srcEle = ele.byId("portFilename_" + i + "_src");
  343.                 let buttonOpensFilemanager = true;
  345.                 if (srcEle)
  346.                 {
  347.                     let src = "";
  348.                     let fn = this._portsIn[i].get() || "";
  350.                     if (fn == "" || fn == 0)src = "";
  351.                     else if (!fn.startsWith("/")) src = "relative";
  352.                     if (fn.startsWith("/")) src = "abs";
  353.                     if (fn.startsWith("./")) src = "current dir";
  355.                     if (fn.startsWith("file:")) src = "file";
  356.                     if (fn.startsWith("data:")) src = "dataUrl";
  358.                     let openSrc = "";
  359.                     let openOnClick = "";
  361.                     if (fn.startsWith("http://") || fn.startsWith("https://"))
  362.                     {
  363.                         buttonOpensFilemanager = false;
  364.                         const parts = fn.split("/");
  365.                         if (parts && parts.length > 1) src = "ext: " + parts[2];
  366.                         openSrc = fn;
  367.                     }
  368.                     if ((fn.startsWith("file:") || fn.startsWith("/") || fn.startsWith("./")) && platform.isElectron())
  369.                     {
  370.                         openOnClick = "CABLES.CMD.ELECTRON.openFileManager('" + fn + "')";
  371.                     }
  373.                     if (fn.startsWith("/assets/" + gui.project()._id)) src = "this patch";
  374.                     if (fn.startsWith("/assets/") && !fn.startsWith("/assets/" + gui.project()._id))
  375.                     {
  376.                         const parts = fn.split("/");
  377.                         if (parts && parts.length > 1)
  378.                         {
  379.                             src = "<a target=\"_blank\" class=\"link\" href=\"" + platform.getCablesUrl() + "/edit/" + parts[2] + "\">other patch</a>";
  380.                             src += " <a target=\"_blank\" class=\"button-small\" id=\"copyToPatch" + i + "\">copy</a>";
  381.                         }
  382.                     }
  384.                     if (fn.startsWith("/assets/"))
  385.                         openSrc = platform.getCablesUrl() + "/asset/patches/?filename=" + fn;
  387.                     if (fn.startsWith("/assets/library/")) src = "lib";
  389.                     if (src != "") src = "[ " + src + " ]";
  391.                     if (eleOpen)
  392.                     {
  393.                         if (openOnClick) eleOpen.setAttribute("onclick", openOnClick);
  394.                         if (openSrc) eleOpen.setAttribute("href", openSrc);
  396.                         if (!openOnClick && !openSrc) eleOpen.remove();
  397.                     }
  398.                     srcEle.innerHTML = src;
  400.                     ele.clickable(ele.byId("copyToPatch" + i), () =>
  401.                     {
  402.                         gui.getFileManager(null, true).copyFileToPatch(fn);
  403.                     });
  404.                 }
  406.                 const filenameButton = ele.byId("portFilename_" + i);
  407.                 if (filenameButton)
  408.                 {
  409.                     filenameButton.innerHTML = "<span class=\"button-small tt\" data-tt=\"" + this._portsIn[i].get() + "\" style=\"text-transform:none;\"><span style=\"pointer-events:none;\" class=\"icon icon-file\"></span>" + shortName + "</span>";
  411.                     filenameButton.addEventListener("pointerdown", () =>
  412.                     {
  413.                         if (buttonOpensFilemanager)
  414.                         {
  415.                             // open filemananger
  416.                             ele.byId("portFilename_" + i + "_src").innerHTML = "";
  417.                             ele.byId("fileInputContainer_" + i).classList.remove("hidden");
  418.                             filenameButton.classList.add("hidden");
  419.                             CABLES.platform.showFileSelect(".portFileVal_" + i, this._portsIn[i].uiAttribs.filter || null, op.id, "portFileVal_" + i + "_preview");
  420.                         }
  421.                         else
  422.                         {
  423.                             // edit url
  424.                             ele.byId("portFilenameButton_" + i).classList.toggle("hidden");
  425.                             ele.byId("fileInputContainer_" + i).classList.toggle("hidden");
  426.                         }
  427.                     });
  428.                 }
  429.                 else
  430.                 {
  431.                     // no filenamebutton, probably because port is linked...
  432.                 }
  433.             }
  435.             const f = (e) =>
  436.             {
  437.                 if (!this._isPortLineDragDown) return;
  439.                 if (gui.patchView._patchRenderer.getOp)
  440.                 {
  441.                     const glOp = gui.patchView._patchRenderer.getOp(op.id);
  443.                     if (glOp && this._portsIn[i])
  444.                     {
  445.                         const glPort = glOp.getGlPort(this._portsIn[i].name);
  447.                         if (this._portsIn[i].name == this._portLineDraggedName)
  448.                             gui.patchView._patchRenderer.emitEvent("mouseDownOverPort", glPort, glOp.id, this._portsIn[i].name, e);
  449.                     }
  450.                 }
  451.             };
  453.             document.getElementById("portLineTitle_in_" + i).addEventListener("pointerup", () => { this._isPortLineDragDown = false; this._portLineDraggedName = null; }, { "passive": false });
  454.             document.getElementById("portLineTitle_in_" + i).addEventListener("pointerdown", (e) => { this._isPortLineDragDown = true; this._portLineDraggedName = e.target.dataset.portname; }, { "passive": false });
  455.             if (document.getElementById("patchviews")) document.getElementById("patchviews").addEventListener("pointerenter", f);
  456.         }
  458.         for (const ipo in this._portsOut)
  459.         {
  460.             this._checkPortTypes(this._portsOut[ipo]);
  462.             this._showOpParamsCbPortDelete(ipo, op);
  463.             (function (index)
  464.             {
  465.                 const elem = ele.byId("portTitle_out_" + index);
  466.                 if (elem)elem.addEventListener("click", (e) =>
  467.                 {
  468.                     const p = this._portsOut[index];
  469.                     if (!p.uiAttribs.hidePort)
  470.                         gui.opSelect().show({ "x": p.parent.uiAttribs.translate.x + index * (gluiconfig.portWidth + gluiconfig.portPadding), "y": p.op.uiAttribs.translate.y + 50 }, op, p);
  471.                 }, { "passive": false });
  472.                 else this._log.warn("ele not found: portTitle_out_" + index);
  473.             }.bind(this)(ipo));
  475.             document.getElementById("portLineTitle_out_" + ipo).addEventListener("pointerup", () => { this._isPortLineDragDown = false; this._portLineDraggedName = null; }, { "passive": false });
  476.             document.getElementById("portLineTitle_out_" + ipo).addEventListener("pointerdown", (e) => { this._isPortLineDragDown = true; this._portLineDraggedName = e.target.dataset.portname; }, { "passive": false });
  478.             if (document.getElementById("patchviews")) document.getElementById("patchviews").addEventListener("pointerenter", (e) =>
  479.             {
  480.                 if (!this._isPortLineDragDown) return;
  481.                 if (gui.patchView._patchRenderer.getOp)
  482.                 {
  483.                     const glOp = gui.patchView._patchRenderer.getOp(op.id);
  484.                     if (glOp && this._portsOut[ipo])
  485.                     {
  486.                         const glPort = glOp.getGlPort(this._portsOut[ipo].name);
  487.                         if (this._portsOut[ipo].name == this._portLineDraggedName)
  488.                             gui.patchView._patchRenderer.emitEvent("mouseDownOverPort", glPort, glOp.id, this._portsOut[ipo].name, e);
  489.                     }
  490.                 }
  491.             }, { "passive": false });
  492.         }
  494.         ele.clickable(ele.byId("parampanel_manage_op"), () => { CABLES.CMD.OP.manageOp(op.opId); });
  495.         ele.clickable(ele.byId("parampanel_edit_op"), CABLES.CMD.OP.editOp);
  496.         ele.clickable(ele.byId("watchOpSerialized"), CABLES.CMD.DEBUG.watchOpSerialized);
  497.         ele.clickable(ele.byId("watchOpUiAttribs"), CABLES.CMD.DEBUG.watchOpUiAttribs);
  498.         ele.clickable(ele.byId("watchOpDocsJson"), CABLES.CMD.DEBUG.watchOpDocsJson);
  500.         ele.forEachClass("portCopyClipboard", (ell) =>
  501.         {
  502.             ell.addEventListener("click", (e) =>
  503.             {
  504.                 if (!navigator.clipboard) return;
  506.                 const cop = gui.corePatch().getOpById(e.target.dataset.opid);
  507.                 const port = cop.getPortByName(e.target.dataset.portname);
  509.                 navigator.clipboard
  510.                     .writeText(String(port.get()))
  511.                     .then(() =>
  512.                     {
  513.                         notify("Copied value to clipboard");
  514.                     })
  515.                     .catch((err) =>
  516.                     {
  517.                         this._log.warn("copy to clipboard failed", err);
  518.                     });
  520.                 e.preventDefault();
  521.             }, { "passive": false });
  522.         });
  524.         if (gui.serverOps.opIdsChangedOnServer[op.opId])
  525.         {
  527.             ele.clickable(ele.byId("parampanel_loadchangedop_" + op.opId), () =>
  528.             {
  529.                 gui.serverOps.execute(op.opId, () =>
  530.                 {
  531.                     delete gui.serverOps.opIdsChangedOnServer[op.opId];
  532.                     this.refresh();
  534.                 });
  536.             });
  537.         }
  539.         perf.finish();
  540.     }
  542.     updateUiErrors()
  543.     {
  544.         if (!this._currentOp) return;
  545.         const el = document.getElementById("op_params_uierrors");
  547.         if (!this._currentOp.uiAttribs.uierrors || this._currentOp.uiAttribs.uierrors.length == 0)
  548.         {
  549.             if (el)el.innerHTML = "";
  550.             return;
  551.         }
  552.         else
  553.         if (document.getElementsByClassName("warning-error") != this._currentOp.uiAttribs.uierrors.length)
  554.         {
  555.             if (el) el.innerHTML = "";
  556.         }
  558.         if (!el)
  559.         {
  560.             this._log.warn("no uiErrors html ele?!");
  561.         }
  562.         else
  563.         {
  564.             for (let i = 0; i < this._currentOp.uiAttribs.uierrors.length; i++)
  565.             {
  566.                 const err = this._currentOp.uiAttribs.uierrors[i];
  568.                 let div = document.getElementById("uierror_" + err.id);
  570.                 let str = "";
  571.                 if (err.level == 0) str += "<b>Hint: </b>";
  572.                 if (err.level == 1) str += "<b>Warning: </b>";
  573.                 if (err.level == 2) str += "<b>Error: </b>";
  574.                 if (err.level == 3) str += "<b>Not working: </b>";
  575.                 str += err.txt;
  577.                 if (err.options)
  578.                 {
  579.                     if (err.options.button)
  580.                         str += "&nbsp;<a class=\"button-small\" id=\"err_button_" + err.id + "\">" + err.options.button + "</a>";
  581.                 }
  583.                 if (!div)
  584.                 {
  585.                     div = document.createElement("div");
  586.                     div.id = "uierror_" + err.id;
  587.                     div.classList.add("warning-error");
  588.                     if (utils.isNumeric(err.level))
  589.                         div.classList.add("warning-error-level" + err.level);
  590.                     else
  591.                     {
  592.                         console.error("err level not numeric", err.level);
  593.                         console.log((new Error().stack));
  594.                     }
  596.                     el.appendChild(div);
  597.                 }
  599.                 div.innerHTML = str;
  601.             }
  602.             gui.patchView.checkPatchErrors();
  603.         }
  605.         for (let i = 0; i < this._currentOp.uiAttribs.uierrors.length; i++)
  606.         {
  607.             if (this._currentOp.uiAttribs.uierrors[i].options.button)
  608.                 ele.clickable(ele.byId("err_button_" + this._currentOp.uiAttribs.uierrors[i].id), () =>
  609.                 {
  610.                     if (this._currentOp.uiAttribs.uierrors[i].options.buttonCb) this._currentOp.uiAttribs.uierrors[i].options.buttonCb();
  611.                     else this._log.log("uierror button has no callback");
  612.                 });
  613.         }
  615.     }
  617.     updateUiAttribs()
  618.     {
  619.         if (gui.patchView.isPasting) return;
  620.         if (!this._currentOp) return;
  622.         this._uiAttrFpsLast = this._uiAttrFpsLast || performance.now();
  623.         this._uiAttrFpsCount++;
  625.         if (performance.now() - this._uiAttrFpsLast > 1000)
  626.         {
  627.             this._uiAttrFpsLast = performance.now();
  628.             if (this._uiAttrFpsCount >= 10) this._log.log("many ui attr updates! ", this._uiAttrFpsCount, this._currentOp.name);
  629.             this._uiAttrFpsCount = 0;
  630.         }
  632.         const perf = gui.uiProfiler.start("[opparampanel] updateUiAttribs");
  633.         let el = null;
  635.         el = document.getElementById("options_warning");
  636.         if (el)
  637.         {
  638.             if (!this._currentOp.uiAttribs.warning || this._currentOp.uiAttribs.warning.length === 0) el.style.display = "none";
  639.             else
  640.             {
  641.                 el.style.display = "block";
  642.                 if (el) el.innerHTML = this._currentOp.uiAttribs.warning;
  643.             }
  644.         }
  646.         el = document.getElementById("options_hint");
  647.         if (el)
  648.         {
  649.             if (!this._currentOp.uiAttribs.hint || this._currentOp.uiAttribs.hint.length === 0) el.style.display = "none";
  650.             else
  651.             {
  652.                 el.style.display = "block";
  653.                 if (el) el.innerHTML = this._currentOp.uiAttribs.hint;
  654.             }
  655.         }
  657.         el = document.getElementById("options_error");
  658.         if (el)
  659.         {
  660.             if (!this._currentOp.uiAttribs.error || this._currentOp.uiAttribs.error.length === 0) el.style.display = "none";
  661.             else
  662.             {
  663.                 el.style.display = "block";
  664.                 if (el) el.innerHTML = this._currentOp.uiAttribs.error;
  665.             }
  666.         }
  668.         el = document.getElementById("options_info");
  669.         if (el)
  670.         {
  671.             if (!this._currentOp.uiAttribs.info) el.style.display = "none";
  672.             else
  673.             {
  674.                 el.style.display = "block";
  675.                 el.innerHTML = "<div class=\"panelhead\">info</div><div class=\"panel\">" + this._currentOp.uiAttribs.info + "</div>";
  676.             }
  677.         }
  679.         this.updateUiErrors();
  681.         perf.finish();
  682.     }
  684.     _showOpParamsCbPortDelete(index, op)
  685.     {
  686.         const el = ele.byId("portdelete_out_" + index);
  687.         if (el)el.addEventListener("click", (e) =>
  688.         {
  689.             this._portsOut[index].removeLinks();
  690.             this.show(op);
  691.         });
  692.     }
  694.     setCurrentOpTags(t)
  695.     {
  696.         if (this._currentOp)
  697.         {
  698.             console.log(t.split(","));
  699.             this._currentOp.tags = t.split(",");
  700.         }
  701.         else
  702.         {
  703.             this._log.warn("no current op tags");
  704.         }
  706.     }
  708.     setCurrentOpComment(v)
  709.     {
  710.         if (this._currentOp)
  711.         {
  712.             this._currentOp.uiAttr({ "comment": v });
  713.             if (v.length == 0) this._currentOp.uiAttr({ "comment": null });
  714.             this._currentOp.patch.emitEvent("commentChanged");
  715.             // gui.setStateUnsaved({ "op": this._currentOp });
  716.             gui.savedState.setUnSaved("op comment", this._currentOp.uiAttribs.subPatch);
  717.         }
  718.         else
  719.         {
  720.             this._log.warn("no current op comment");
  721.         }
  722.     }
  724.     setCurrentOpTitle(t)
  725.     {
  726.         if (this._currentOp) this._currentOp.setTitle(t);
  728.         if (this._currentOp && this._currentOp.storage && this._currentOp.storage.subPatchVer)
  729.             this._currentOp.patch.emitEvent("subpatchesChanged");
  730.     }
  732.     isCurrentOp(op)
  733.     {
  734.         return this._currentOp == op;
  735.     }
  737.     isCurrentOpId(opid)
  738.     {
  739.         if (!this._currentOp) return false;
  740.         return this._currentOp.id == opid;
  741.     }
  743.     // OLD SUBPATCH LIST!!!!!! REMOVE
  744.     subPatchContextMenu(el)
  745.     {
  746.         const outer = gui.patchView.getSubPatchOuterOp(el.dataset.id);
  748.         const items = [];
  749.         if (outer && outer.storage && outer.storage.blueprint)
  750.         {
  751.             items.push({
  752.                 "title": "Goto Blueprint Op",
  753.                 "func": function ()
  754.                 {
  755.                     // gui.patchView.focusSubpatchOp(el.dataset.id);
  756.                 }
  757.             });
  758.             items.push({
  759.                 "title": "Update Blueprint",
  760.                 "func": function ()
  761.                 {
  762.                     const bp = gui.patchView.getBlueprintOpFromBlueprintSubpatchId(el.dataset.id);
  763.                     if (bp) gui.patchView.updateBlueprints([bp]);
  764.                 }
  765.             });
  766.             items.push({
  767.                 "title": "Open Patch",
  768.                 "iconClass": "icon icon-external",
  769.                 "func": function ()
  770.                 {
  771.                     const url = platform.getCablesUrl() + "/edit/" + outer.storage.blueprint.patchId;
  772.                     window.open(url, "_blank");
  773.                 }
  774.             });
  775.         }
  776.         else
  777.         {
  778.             items.push({
  779.                 "title": "Rename",
  780.                 "func": function ()
  781.                 {
  782.                     gui.patchView.focusSubpatchOp(el.dataset.id);
  783.                     CABLES.CMD.PATCH.setOpTitle();
  784.                 }
  785.             });
  787.             items.push({
  788.                 "title": "Goto Subpatch Op",
  789.                 "func": function ()
  790.                 {
  791.                     gui.patchView.focusSubpatchOp(el.dataset.id);
  792.                 }
  793.             });
  795.             if (el.dataset.subpatchver == "2" && el.dataset.blueprintver != 2)
  796.                 items.push({
  797.                     "title": "Create op from subpatch",
  798.                     "func": function ()
  799.                     {
  800.                         gui.serverOps.createBlueprint2Op(el.dataset.id);
  801.                         // gui.patchView.focusSubpatchOp(el.dataset.id);
  802.                     }
  803.                 });
  805.             if (el.dataset.blueprintver == 2)
  806.             {
  807.                 items.push({
  808.                     "title": "Save Blueprint Op",
  809.                     "func": function ()
  810.                     {
  811.                         const op = gui.patchView.getSubPatchOuterOp(el.dataset.id);
  813.                         gui.serverOps.updateSubPatchOpAttachment(op, { "oldSubId": el.dataset.id });
  814.                         // gui.patchView.focusSubpatchOp(el.dataset.id);
  815.                     }
  816.                 });
  817.             }
  818.         }
  819.         contextMenu.show({ "items": items }, el);
  820.     }
  822.     /**
  823.      * @param {HTMLElement} el
  824.      */
  825.     opContextMenu(el)
  826.     {
  827.         const items = [];
  829.         const opname = this._currentOp.objName;
  830.         const opid = this._currentOp.id;
  832.         items.push({
  833.             "title": "Set title",
  834.             "func": CABLES.CMD.PATCH.setOpTitle
  835.         });
  837.         items.push({
  838.             "title": "Set default values",
  839.             "func": function ()
  840.             {
  841.                 gui.patchView.resetOpValues(opid);
  842.             }
  843.         });
  845.         items.push({
  846.             "title": "Bookmark",
  847.             "func": function ()
  848.             {
  849.                 gui.bookmarks.add();
  850.             }
  851.         });
  853.         items.push({
  854.             "title": "Manage Op Code",
  855.             "func": function ()
  856.             {
  857.                 CmdOps.manageOp();
  858.             }
  859.         });
  861.         items.push({
  862.             "title": "Clone Op",
  863.             "func": function ()
  864.             {
  865.                 CmdOps.cloneSelectedOp();
  866.             }
  867.         });
  869.         contextMenu.show({ "items": items }, el);
  870.     }
  872.     getCurrentOp()
  873.     {
  874.         return this._currentOp;
  875.     }
  877.     hidePorts(arr)
  878.     {
  879.         // console.log("arrrrrr", arr);
  880.         // for (let i = 0; i < arr.length; i++)
  881.         // {
  882.         //     const p = this.op.getPort(arr[i]);
  883.         //     p.setUiAttribs({ "hidePort": true });
  884.         // }
  886.     }
  887. }
  889. export default OpParampanel;