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 { 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 { CmdOp } 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.         this._currentOp = null;
  41.         this._eventPrefix = utils.shortId();
  42.         this._isPortLineDragDown = false;
  44.         /** @type {Array<Port>} */
  45.         this._portsIn = [];
  47.         /** @type {Array<Port>} */
  48.         this._portsOut = [];
  50.         this._paramsListener = new ParamsListener(this.panelId);
  52.         this._portUiAttrListeners = [];
  53.         this._startedGlobalListeners = false;
  55.         this.reloadListener = null;
  56.     }
  58.     get op()
  59.     {
  60.         return this._currentOp;
  61.     }
  63.     setParentElementId(eleid)
  64.     {
  65.         this._eleId = eleid;
  66.     }
  68.     dispose()
  69.     {
  70.         this._stopListeners();
  71.     }
  73.     clear()
  74.     {
  75.         this._stopListeners();
  76.         this._currentOp = null;
  77.     }
  79.     refresh()
  80.     {
  81.         this.show(this._currentOp);
  82.     }
  84.     _onUiAttrChangeOp(attr)
  85.     {
  86.         if (attr.hasOwnProperty("uierrors")) this.updateUiErrors();
  87.     }
  89.     /**
  90.      * @param {object} attr
  91.      * @param {Port} port
  92.      */
  93.     _onUiAttrChangePort(attr, port)
  94.     {
  95.         if (!attr) return;
  96.         if (attr.hasOwnProperty("greyout")) this.refreshDelayed();
  97.         // todo: only update this part of the html
  99.         if (attr.hasOwnProperty("hover"))
  100.         {
  101.             const portParamRow = ele.byClass("paramport_1_" + port.id);
  102.             if (portParamRow)
  103.             {
  104.                 if (attr.hover) portParamRow.classList.add("hoverPort");
  105.                 else portParamRow.classList.remove("hoverPort");
  106.             }
  107.         }
  109.     }
  111.     _stopListeners(op)
  112.     {
  113.         op = op || this._currentOp;
  114.         if (!op) return;
  116.         for (let i = 0; i < this._portUiAttrListeners.length; i++)
  117.         {
  118.             const listener = this._portUiAttrListeners[i];
  119.             listener.port.off(listener.listenId);
  120.         }
  121.         this._portUiAttrListeners.length = 0;
  122.         this.onOpUiAttrChange = op.off(this.onOpUiAttrChange);
  123.     }
  125.     _startListeners(op)
  126.     {
  127.         if (!op)
  128.         {
  129.             this._stopListeners();
  130.             return;
  131.         }
  133.         if (!this.hasExposeListener)
  134.         {
  135.             this.hasExposeListener = gui.corePatch().on("subpatchExpose",
  136.                 (subpatchid) =>
  137.                 {
  138.                     if (
  139.                         op &&
  140.                         op.storage && op.storage.subPatchVer &&
  141.                         op.patchId.get() === subpatchid
  142.                     )
  143.                     {
  144.                         op.refreshParams();
  145.                     }
  146.                 });
  147.         }
  149.         this.onOpUiAttrChange = op.on("onUiAttribsChange", this._onUiAttrChangeOp.bind(this));
  151.         for (let i = 0; i < this._portsIn.length; i++)
  152.         {
  153.             const listenId = this._portsIn[i].on(
  154.                 "onUiAttrChange",
  155.                 this._onUiAttrChangePort.bind(this),
  156.                 this._eventPrefix);
  157.             this._portUiAttrListeners.push({ "listenId": listenId, "port": this._portsIn[i] });
  158.         }
  159.     }
  161.     refreshDelayed()
  162.     {
  163.         clearTimeout(this.refreshTimeout);
  164.         this.refreshTimeout = setTimeout(() =>
  165.         {
  166.             this.show(this._currentOp);
  167.         }, 50);
  168.     }
  170.     /**
  171.      * @param {UiOp|String} op
  172.      */
  173.     show(op)
  174.     {
  175.         if (!gui.finishedLoading()) return;
  176.         if (!this._startedGlobalListeners)
  177.         {
  178.             this._startedGlobalListeners = true;
  180.             gui.corePatch().on("bookmarkschanged", () => { gui.bookmarks.needRefreshSubs = true; this._startedGlobalListeners = true; if (!this._currentOp) gui.patchParamPanel.show(true); });
  181.             gui.corePatch().on("subpatchesChanged", () => { gui.bookmarks.needRefreshSubs = true; this._startedGlobalListeners = true; if (!this._currentOp) gui.patchParamPanel.show(true); });
  182.             gui.corePatch().on("subpatchCreated", () => { gui.bookmarks.needRefreshSubs = true; this._startedGlobalListeners = true; if (!this._currentOp) gui.patchParamPanel.show(true); });
  183.             gui.corePatch().on("patchLoadEnd", () => { gui.bookmarks.needRefreshSubs = true; this._startedGlobalListeners = true; if (!this._currentOp) gui.patchParamPanel.show(true); });
  184.         }
  186.         if (this.reloadListener)
  187.             this.reloadListener = gui.corePatch().on("opReloaded", () =>
  188.             {
  189.                 this.refreshDelayed();
  190.             });
  192.         const perf = gui.uiProfiler.start("[opparampanel] show");
  194.         if (typeof op == "string") op = gui.corePatch().getOpById(op);
  196.         if (!gui.showingtwoMetaPanel && gui.metaTabs.getActiveTab() && gui.metaTabs.getActiveTab().title != "op")
  197.             gui.metaTabs.activateTabByName("op");
  199.         if (this._currentOp) this._stopListeners();
  201.         this._currentOp = op;
  203.         if (!op) return;
  205.         this._portsIn = op.portsIn;
  206.         this._portsOut = op.portsOut;
  208.         if (op.storage && op.storage.subPatchVer && op.patchId)
  209.         {
  210.             const ports = gui.patchView.getSubPatchExposedPorts(op.patchId.get());
  211.             for (let i = 0; i < ports.length; i++)
  212.             {
  213.                 if (ports[i].direction === Port.DIR_IN && this._portsIn.indexOf(ports[i]) == -1) this._portsIn.push(ports[i]);
  214.                 if (ports[i].direction === Port.DIR_OUT && this._portsOut.indexOf(ports[i]) == -1) this._portsOut.push(ports[i]);
  215.             }
  216.         }
  218.         this._startListeners(this._currentOp);
  220.         op.emitEvent("uiParamPanel", op);
  222.         const perfHtml = gui.uiProfiler.start("[opparampanel] build html ");
  224.         gui.opHistory.push(op.id);
  225.         gui.setTransformGizmo(null);
  227.         gui.emitEvent(Gui.EVENT_OP_SELECTIONCHANGED, op);
  229.         this.emitEvent("opSelected", op);
  231.         op.isServerOp = gui.serverOps.isServerOp(op.objName);
  233.         /*
  234.          * show first anim in timeline
  235.          * if (self.timeLine)
  236.          * {
  237.          *     let foundAnim = false;
  238.          *     for (let i = 0; i < this._portsIn.length; i++)
  239.          *     {
  240.          *         if (this._portsIn[i].isAnimated())
  241.          *         {
  242.          *             self.timeLine.setAnim(this._portsIn[i].anim, {
  243.          *                 "name": this._portsIn[i].name,
  244.          *             });
  245.          *             foundAnim = true;
  246.          *             continue;
  247.          *         }
  248.          *     }
  249.          *     if (!foundAnim) self.timeLine.setAnim(null);
  250.          * }
  251.          */
  253.         this._portsIn.sort(function (a, b) { return (a.uiAttribs.order || 0) - (b.uiAttribs.order || 0); });
  255.         let html = this._htmlGen.getHtmlOpHeader(op);
  257.         gui.showInfo(GuiText.patchSelectedOp);
  259.         if (this._portsIn.length > 0)
  260.         {
  261.             const perfLoop = gui.uiProfiler.start("[opparampanel] _showOpParamsLOOP IN");
  262.             html += this._htmlGen.getHtmlHeaderPorts("in", "Input");
  263.             html += this._htmlGen.getHtmlInputPorts(this._portsIn);
  265.             perfLoop.finish();
  266.         }
  268.         if (this._portsOut.length > 0)
  269.         {
  270.             html += this._htmlGen.getHtmlHeaderPorts("out", "Output");
  272.             const perfLoopOut = gui.uiProfiler.start("[opparampanel] _showOpParamsLOOP OUT");
  274.             html += this._htmlGen.getHtmlOutputPorts(this._portsOut);
  276.             perfLoopOut.finish();
  277.         }
  279.         html += getHandleBarHtml("params_op_foot", { "commentColors": uiconfig.commentColors, "op": op, "showDevInfos": userSettings.get("devinfos") });
  281.         const el = document.getElementById(this._eleId || gui.getParamPanelEleId());
  283.         if (el) el.innerHTML = html;
  284.         else return;
  286.         this._paramsListener.init({ "op": op, "element": el });
  288.         perfHtml.finish();
  290.         this.updateUiAttribs();
  292.         for (let i = 0; i < this._portsIn.length; i++)
  293.         {
  294.             if (this._portsIn[i].uiAttribs.display && this._portsIn[i].uiAttribs.display == "file")
  295.             {
  296.                 let shortName = String(this._portsIn[i].get() || "Open Filemanager");
  297.                 if (shortName.indexOf("/") > -1) shortName = shortName.substr(shortName.lastIndexOf("/") + 1);
  299.                 if (op.getSubPatch())
  300.                 {
  301.                     const subouterOp = op.patch.getSubPatchOuterOp(op.getSubPatch());
  302.                     if (subouterOp)
  303.                     {
  304.                         const subOuterName = subouterOp.objName;
  306.                         if (!namespace.isPatchOp(subOuterName) &&
  307.                         this._portsIn[i].get() &&
  308.                             namespace.isCoreOp(subOuterName) &&
  309.                             namespace.isExtensionOp(subOuterName) &&
  310.                             String(this._portsIn[i].get()).startsWith("/assets/") &&
  311.                             !this._portsIn[i].isLinked())
  312.                             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);
  313.                     }
  314.                 }
  316.                 let eleOpen = ele.byId("portOpenAsset_" + i);
  317.                 let srcEle = ele.byId("portFilename_" + i + "_src");
  318.                 let buttonOpensFilemanager = true;
  320.                 if (srcEle)
  321.                 {
  322.                     let src = "";
  323.                     let fn = this._portsIn[i].get() || "";
  325.                     if (fn == "" || fn == 0)src = "";
  326.                     else if (!fn.startsWith("/")) src = "relative";
  327.                     if (fn.startsWith("/")) src = "abs";
  328.                     if (fn.startsWith("./")) src = "current dir";
  330.                     if (fn.startsWith("file:")) src = "file";
  331.                     if (fn.startsWith("data:")) src = "dataUrl";
  333.                     let openSrc = "";
  334.                     let openOnClick = "";
  336.                     if (fn.startsWith("http://") || fn.startsWith("https://"))
  337.                     {
  338.                         buttonOpensFilemanager = false;
  339.                         const parts = fn.split("/");
  340.                         if (parts && parts.length > 1) src = "ext: " + parts[2];
  341.                         openSrc = fn;
  342.                     }
  343.                     if ((fn.startsWith("file:") || fn.startsWith("/") || fn.startsWith("./")) && platform.isElectron())
  344.                     {
  345.                         openOnClick = "CABLES.CMD.ELECTRON.openFileManager('" + fn + "')";
  346.                     }
  348.                     if (fn.startsWith("/assets/" + gui.project()._id)) src = "this patch";
  349.                     if (fn.startsWith("/assets/") && !fn.startsWith("/assets/" + gui.project()._id))
  350.                     {
  351.                         const parts = fn.split("/");
  352.                         if (parts && parts.length > 1)
  353.                         {
  354.                             src = "<a target=\"_blank\" class=\"link\" href=\"" + platform.getCablesUrl() + "/edit/" + parts[2] + "\">other patch</a>";
  355.                             src += " <a target=\"_blank\" class=\"button-small\" id=\"copyToPatch" + i + "\">copy</a>";
  356.                         }
  357.                     }
  359.                     if (fn.startsWith("/assets/"))
  360.                         openSrc = platform.getCablesUrl() + "/asset/patches/?filename=" + fn;
  362.                     if (fn.startsWith("/assets/library/")) src = "lib";
  364.                     if (src != "") src = "[ " + src + " ]";
  366.                     if (eleOpen)
  367.                     {
  368.                         if (openOnClick) eleOpen.setAttribute("onclick", openOnClick);
  369.                         if (openSrc) eleOpen.setAttribute("href", openSrc);
  371.                         if (!openOnClick && !openSrc) eleOpen.remove();
  372.                     }
  373.                     srcEle.innerHTML = src;
  375.                     ele.clickable(ele.byId("copyToPatch" + i), () =>
  376.                     {
  377.                         gui.getFileManager(null, true).copyFileToPatch(fn);
  378.                     });
  379.                 }
  381.                 const filenameButton = ele.byId("portFilename_" + i);
  382.                 if (filenameButton)
  383.                 {
  384.                     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>";
  386.                     filenameButton.addEventListener("pointerdown", () =>
  387.                     {
  388.                         if (buttonOpensFilemanager)
  389.                         {
  390.                             // open filemananger
  391.                             ele.byId("portFilename_" + i + "_src").innerHTML = "";
  392.                             ele.byId("fileInputContainer_" + i).classList.remove("hidden");
  393.                             filenameButton.classList.add("hidden");
  394.                             CABLES.platform.showFileSelect(".portFileVal_" + i, this._portsIn[i].uiAttribs.filter || null, op.id, "portFileVal_" + i + "_preview");
  395.                         }
  396.                         else
  397.                         {
  398.                             // edit url
  399.                             ele.byId("portFilenameButton_" + i).classList.toggle("hidden");
  400.                             ele.byId("fileInputContainer_" + i).classList.toggle("hidden");
  401.                         }
  402.                     });
  403.                 }
  404.                 else
  405.                 {
  406.                     console.log("no filenamebutton");
  407.                 }
  408.             }
  410.             const f = (e) =>
  411.             {
  412.                 if (!this._isPortLineDragDown) return;
  414.                 if (gui.patchView._patchRenderer.getOp)
  415.                 {
  416.                     const glOp = gui.patchView._patchRenderer.getOp(op.id);
  418.                     if (glOp && this._portsIn[i])
  419.                     {
  420.                         const glPort = glOp.getGlPort(this._portsIn[i].name);
  422.                         if (this._portsIn[i].name == this._portLineDraggedName)
  423.                             gui.patchView._patchRenderer.emitEvent("mouseDownOverPort", glPort, glOp.id, this._portsIn[i].name, e);
  424.                     }
  425.                 }
  426.             };
  428.             document.getElementById("portLineTitle_in_" + i).addEventListener("pointerup", () => { this._isPortLineDragDown = false; this._portLineDraggedName = null; }, { "passive": false });
  429.             document.getElementById("portLineTitle_in_" + i).addEventListener("pointerdown", (e) => { this._isPortLineDragDown = true; this._portLineDraggedName = e.target.dataset.portname; }, { "passive": false });
  430.             if (document.getElementById("patchviews")) document.getElementById("patchviews").addEventListener("pointerenter", f);
  431.         }
  433.         for (const ipo in this._portsOut)
  434.         {
  435.             this._showOpParamsCbPortDelete(ipo, op);
  436.             (function (index)
  437.             {
  438.                 const elem = ele.byId("portTitle_out_" + index);
  439.                 if (elem)elem.addEventListener("click", (e) =>
  440.                 {
  441.                     const p = this._portsOut[index];
  442.                     if (!p.uiAttribs.hidePort)
  443.                         gui.opSelect().show({ "x": p.parent.uiAttribs.translate.x + index * (gluiconfig.portWidth + gluiconfig.portPadding), "y": p.op.uiAttribs.translate.y + 50, }, op, p);
  444.                 }, { "passive": false });
  445.                 else this._log.warn("ele not found: portTitle_out_" + index);
  446.             }.bind(this)(ipo));
  448.             document.getElementById("portLineTitle_out_" + ipo).addEventListener("pointerup", () => { this._isPortLineDragDown = false; this._portLineDraggedName = null; }, { "passive": false });
  449.             document.getElementById("portLineTitle_out_" + ipo).addEventListener("pointerdown", (e) => { this._isPortLineDragDown = true; this._portLineDraggedName = e.target.dataset.portname; }, { "passive": false });
  451.             if (document.getElementById("patchviews")) document.getElementById("patchviews").addEventListener("pointerenter", (e) =>
  452.             {
  453.                 if (!this._isPortLineDragDown) return;
  454.                 if (gui.patchView._patchRenderer.getOp)
  455.                 {
  456.                     const glOp = gui.patchView._patchRenderer.getOp(op.id);
  457.                     if (glOp && this._portsOut[ipo])
  458.                     {
  459.                         const glPort = glOp.getGlPort(this._portsOut[ipo].name);
  460.                         if (this._portsOut[ipo].name == this._portLineDraggedName)
  461.                             gui.patchView._patchRenderer.emitEvent("mouseDownOverPort", glPort, glOp.id, this._portsOut[ipo].name, e);
  462.                     }
  463.                 }
  464.             }, { "passive": false });
  465.         }
  467.         ele.clickable(ele.byId("parampanel_manage_op"), () => { CABLES.CMD.OP.manageOp(op.opId); });
  468.         ele.clickable(ele.byId("parampanel_edit_op"), CABLES.CMD.OP.editOp);
  469.         ele.clickable(ele.byId("watchOpSerialized"), CABLES.CMD.DEBUG.watchOpSerialized);
  470.         ele.clickable(ele.byId("watchOpUiAttribs"), CABLES.CMD.DEBUG.watchOpUiAttribs);
  471.         ele.clickable(ele.byId("watchOpDocsJson"), CABLES.CMD.DEBUG.watchOpDocsJson);
  473.         ele.forEachClass("portCopyClipboard", (ell) =>
  474.         {
  475.             ell.addEventListener("click", (e) =>
  476.             {
  477.                 if (!navigator.clipboard) return;
  479.                 const cop = gui.corePatch().getOpById(e.target.dataset.opid);
  480.                 const port = cop.getPortByName(e.target.dataset.portname);
  482.                 navigator.clipboard
  483.                     .writeText(String(port.get()))
  484.                     .then(() =>
  485.                     {
  486.                         notify("Copied value to clipboard");
  487.                     })
  488.                     .catch((err) =>
  489.                     {
  490.                         this._log.warn("copy to clipboard failed", err);
  491.                     });
  493.                 e.preventDefault();
  494.             }, { "passive": false });
  495.         });
  497.         if (gui.serverOps.opIdsChangedOnServer[op.opId])
  498.         {
  500.             ele.clickable(ele.byId("parampanel_loadchangedop_" + op.opId), () =>
  501.             {
  502.                 gui.serverOps.execute(op.opId, () =>
  503.                 {
  504.                     delete gui.serverOps.opIdsChangedOnServer[op.opId];
  505.                     this.refresh();
  507.                 });
  509.             });
  510.         }
  512.         perf.finish();
  513.     }
  515.     updateUiErrors()
  516.     {
  517.         if (!this._currentOp) return;
  518.         const el = document.getElementById("op_params_uierrors");
  520.         if (!this._currentOp.uiAttribs.uierrors || this._currentOp.uiAttribs.uierrors.length == 0)
  521.         {
  522.             if (el)el.innerHTML = "";
  523.             return;
  524.         }
  525.         else
  526.         if (document.getElementsByClassName("warning-error") != this._currentOp.uiAttribs.uierrors.length)
  527.         {
  528.             if (el) el.innerHTML = "";
  529.         }
  531.         if (!el)
  532.         {
  533.             this._log.warn("no uiErrors html ele?!");
  534.         }
  535.         else
  536.         {
  537.             for (let i = 0; i < this._currentOp.uiAttribs.uierrors.length; i++)
  538.             {
  539.                 const err = this._currentOp.uiAttribs.uierrors[i];
  541.                 let div = document.getElementById("uierror_" + err.id);
  543.                 let str = "";
  544.                 if (err.level == 0) str += "<b>Hint: </b>";
  545.                 if (err.level == 1) str += "<b>Warning: </b>";
  546.                 if (err.level == 2) str += "<b>Error: </b>";
  547.                 if (err.level == 3) str += "<b>Not working: </b>";
  548.                 str += err.txt;
  550.                 if (err.options)
  551.                 {
  552.                     if (err.options.button)
  553.                         str += "&nbsp;<a class=\"button-small\" id=\"err_button_" + err.id + "\">" + err.options.button + "</a>";
  554.                 }
  556.                 if (!div)
  557.                 {
  558.                     div = document.createElement("div");
  559.                     div.id = "uierror_" + err.id;
  560.                     div.classList.add("warning-error");
  561.                     if (utils.isNumeric(err.level))
  562.                         div.classList.add("warning-error-level" + err.level);
  563.                     else
  564.                     {
  565.                         console.error("err level not numeric", err.level);
  566.                         console.log((new Error().stack));
  567.                     }
  569.                     el.appendChild(div);
  570.                 }
  572.                 div.innerHTML = str;
  574.             }
  575.             gui.patchView.checkPatchErrors();
  576.         }
  578.         for (let i = 0; i < this._currentOp.uiAttribs.uierrors.length; i++)
  579.         {
  580.             if (this._currentOp.uiAttribs.uierrors[i].options.button)
  581.                 ele.clickable(ele.byId("err_button_" + this._currentOp.uiAttribs.uierrors[i].id), () =>
  582.                 {
  583.                     if (this._currentOp.uiAttribs.uierrors[i].options.buttonCb) this._currentOp.uiAttribs.uierrors[i].options.buttonCb();
  584.                     else this._log.log("uierror button has no callback");
  585.                 });
  586.         }
  588.     }
  590.     updateUiAttribs()
  591.     {
  592.         if (gui.patchView.isPasting) return;
  593.         if (!this._currentOp) return;
  595.         this._uiAttrFpsLast = this._uiAttrFpsLast || performance.now();
  596.         this._uiAttrFpsCount++;
  598.         if (performance.now() - this._uiAttrFpsLast > 1000)
  599.         {
  600.             this._uiAttrFpsLast = performance.now();
  601.             if (this._uiAttrFpsCount >= 10) this._log.log("many ui attr updates! ", this._uiAttrFpsCount, this._currentOp.name);
  602.             this._uiAttrFpsCount = 0;
  603.         }
  605.         const perf = gui.uiProfiler.start("[opparampanel] updateUiAttribs");
  606.         let el = null;
  608.         el = document.getElementById("options_warning");
  609.         if (el)
  610.         {
  611.             if (!this._currentOp.uiAttribs.warning || this._currentOp.uiAttribs.warning.length === 0) el.style.display = "none";
  612.             else
  613.             {
  614.                 el.style.display = "block";
  615.                 if (el) el.innerHTML = this._currentOp.uiAttribs.warning;
  616.             }
  617.         }
  619.         el = document.getElementById("options_hint");
  620.         if (el)
  621.         {
  622.             if (!this._currentOp.uiAttribs.hint || this._currentOp.uiAttribs.hint.length === 0) el.style.display = "none";
  623.             else
  624.             {
  625.                 el.style.display = "block";
  626.                 if (el) el.innerHTML = this._currentOp.uiAttribs.hint;
  627.             }
  628.         }
  630.         el = document.getElementById("options_error");
  631.         if (el)
  632.         {
  633.             if (!this._currentOp.uiAttribs.error || this._currentOp.uiAttribs.error.length === 0) el.style.display = "none";
  634.             else
  635.             {
  636.                 el.style.display = "block";
  637.                 if (el) el.innerHTML = this._currentOp.uiAttribs.error;
  638.             }
  639.         }
  641.         el = document.getElementById("options_info");
  642.         if (el)
  643.         {
  644.             if (!this._currentOp.uiAttribs.info) el.style.display = "none";
  645.             else
  646.             {
  647.                 el.style.display = "block";
  648.                 el.innerHTML = "<div class=\"panelhead\">info</div><div class=\"panel\">" + this._currentOp.uiAttribs.info + "</div>";
  649.             }
  650.         }
  652.         this.updateUiErrors();
  654.         perf.finish();
  655.     }
  657.     _showOpParamsCbPortDelete(index, op)
  658.     {
  659.         const el = ele.byId("portdelete_out_" + index);
  660.         if (el)el.addEventListener("click", (e) =>
  661.         {
  662.             this._portsOut[index].removeLinks();
  663.             this.show(op);
  664.         });
  665.     }
  667.     setCurrentOpComment(v)
  668.     {
  669.         if (this._currentOp)
  670.         {
  671.             this._currentOp.uiAttr({ "comment": v });
  672.             if (v.length == 0) this._currentOp.uiAttr({ "comment": null });
  673.             this._currentOp.patch.emitEvent("commentChanged");
  674.             // gui.setStateUnsaved({ "op": this._currentOp });
  675.             gui.savedState.setUnSaved("op comment", this._currentOp.uiAttribs.subPatch);
  676.         }
  677.         else
  678.         {
  679.             this._log.warn("no current op comment");
  680.         }
  681.     }
  683.     setCurrentOpTitle(t)
  684.     {
  685.         if (this._currentOp) this._currentOp.setTitle(t);
  687.         if (this._currentOp && this._currentOp.storage && this._currentOp.storage.subPatchVer)
  688.             this._currentOp.patch.emitEvent("subpatchesChanged");
  689.     }
  691.     isCurrentOp(op)
  692.     {
  693.         return this._currentOp == op;
  694.     }
  696.     isCurrentOpId(opid)
  697.     {
  698.         if (!this._currentOp) return false;
  699.         return this._currentOp.id == opid;
  700.     }
  702.     // OLD SUBPATCH LIST!!!!!! REMOVE
  703.     subPatchContextMenu(el)
  704.     {
  705.         const outer = gui.patchView.getSubPatchOuterOp(el.dataset.id);
  707.         const items = [];
  708.         if (outer && outer.storage && outer.storage.blueprint)
  709.         {
  710.             items.push({
  711.                 "title": "Goto Blueprint Op",
  712.                 func()
  713.                 {
  714.                     // gui.patchView.focusSubpatchOp(el.dataset.id);
  715.                 },
  716.             });
  717.             items.push({
  718.                 "title": "Update Blueprint",
  719.                 func()
  720.                 {
  721.                     const bp = gui.patchView.getBlueprintOpFromBlueprintSubpatchId(el.dataset.id);
  722.                     if (bp) gui.patchView.updateBlueprints([bp]);
  723.                 },
  724.             });
  725.             items.push({
  726.                 "title": "Open Patch",
  727.                 "iconClass": "icon icon-external",
  728.                 func()
  729.                 {
  730.                     const url = platform.getCablesUrl() + "/edit/" + outer.storage.blueprint.patchId;
  731.                     window.open(url, "_blank");
  732.                 },
  733.             });
  734.         }
  735.         else
  736.         {
  737.             items.push({
  738.                 "title": "Rename",
  739.                 func()
  740.                 {
  741.                     gui.patchView.focusSubpatchOp(el.dataset.id);
  742.                     CABLES.CMD.PATCH.setOpTitle();
  743.                 },
  744.             });
  746.             items.push({
  747.                 "title": "Goto Subpatch Op",
  748.                 func()
  749.                 {
  750.                     gui.patchView.focusSubpatchOp(el.dataset.id);
  751.                 },
  752.             });
  754.             if (el.dataset.subpatchver == "2" && el.dataset.blueprintver != 2)
  755.                 items.push({
  756.                     "title": "Create op from subpatch",
  757.                     func()
  758.                     {
  759.                         gui.serverOps.createBlueprint2Op(el.dataset.id);
  760.                         // gui.patchView.focusSubpatchOp(el.dataset.id);
  761.                     },
  762.                 });
  764.             if (el.dataset.blueprintver == 2)
  765.             {
  766.                 items.push({
  767.                     "title": "Save Blueprint Op",
  768.                     func()
  769.                     {
  770.                         const op = gui.patchView.getSubPatchOuterOp(el.dataset.id);
  772.                         gui.serverOps.updateSubPatchOpAttachment(op, { "oldSubId": el.dataset.id });
  773.                         // gui.patchView.focusSubpatchOp(el.dataset.id);
  774.                     },
  775.                 });
  776.             }
  777.         }
  778.         contextMenu.show({ items }, el);
  779.     }
  781.     /**
  782.      * @param {HTMLElement} el
  783.      */
  784.     opContextMenu(el)
  785.     {
  786.         const items = [];
  788.         const opname = this._currentOp.objName;
  789.         const opid = this._currentOp.id;
  791.         items.push({
  792.             "title": "Set title",
  793.             "func": CABLES.CMD.PATCH.setOpTitle,
  794.         });
  796.         items.push({
  797.             "title": "Set default values",
  798.             func()
  799.             {
  800.                 gui.patchView.resetOpValues(opid);
  801.             },
  802.         });
  804.         items.push({
  805.             "title": "Bookmark",
  806.             func()
  807.             {
  808.                 gui.bookmarks.add();
  809.             }
  810.         });
  812.         items.push({
  813.             "title": "Manage Op Code",
  814.             func()
  815.             {
  816.                 CmdOp.manageOp();
  817.             },
  818.         });
  820.         items.push({
  821.             "title": "Clone Op",
  822.             func()
  823.             {
  824.                 CmdOp.cloneSelectedOp();
  825.             },
  826.         });
  828.         contextMenu.show({ items }, el);
  829.     }
  831.     getCurrentOp()
  832.     {
  833.         return this._currentOp;
  834.     }
  836.     hidePorts(arr)
  837.     {
  838.         // console.log("arrrrrr", arr);
  839.         // for (let i = 0; i < arr.length; i++)
  840.         // {
  841.         //     const p = this.op.getPort(arr[i]);
  842.         //     p.setUiAttribs({ "hidePort": true });
  843.         // }
  845.     }
  846. }
  848. export default OpParampanel;