feat: ✨ add a basic style editor

__init__.py

@@ -192,6 +192,32 @@ def load_nodes():
         "LoadFaceAnalysisModel": restore_deps,
     }
 
+    PromptServer.instance.app.router.add_static(
+        "/mtb-assets/", path=(here / "html").as_posix()
+    )
+
+    @PromptServer.instance.routes.get("/mtb/manage")
+    async def manage(request):
+        from . import endpoint
+
+        reload(endpoint)
+
+        endlog.debug("Initializing Manager")
+        if "text/html" in request.headers.get("Accept", ""):
+            csv_editor = endpoint.csv_editor()
+
+            tabview = endpoint.render_tab_view(Styles=csv_editor)
+            return web.Response(
+                text=endpoint.render_base_template("MTB", tabview),
+                content_type="text/html",
+            )
+
+        return web.json_response(
+            {
+                "message": "manage only has a POST api for now",
+            }
+        )
+
     @PromptServer.instance.routes.get("/mtb/status")
     async def get_full_library(request):
         from . import endpoint
@@ -255,6 +281,7 @@ async def get_home(request):
             # # Return an HTML page
             html_response = """
             <div class="flex-container menu">
+                <a href="/mtb/manage">manage</a>
                 <a href="/mtb/debug">debug</a>
                 <a href="/mtb/status">status</a>
             </div>            

endpoint.py

@@ -1,7 +1,13 @@
-from .utils import here, run_command, comfy_mode, import_install
+from .utils import (
+    here,
+    import_install,
+    styles_dir,
+    backup_file,
+)
 from aiohttp import web
 from .log import mklog
-import sys
+import csv
+
 
 endlog = mklog("mtb endpoint")
 
@@ -49,6 +55,32 @@ def ACTIONS_getStyles(style_name=None):
     return {"error": "No styles found"}
 
 
+def ACTIONS_saveStyle(data):
+    # endlog.debug(f"Received Save Styles for {data.keys()}")
+    # endlog.debug(data)
+
+    styles = [f.name for f in styles_dir.iterdir() if f.suffix == ".csv"]
+    target = None
+    rows = []
+    for fp, content in data.items():
+        if fp in styles:
+            endlog.debug(f"Overwriting {fp}")
+            target = styles_dir / fp
+            rows = content
+            break
+
+    if not target:
+        endlog.warning(f"Could not determine the target file for {data.keys()}")
+        return {"error": "Could not determine the target file for the style"}
+
+    backup_file(target)
+
+    with target.open("w", newline="", encoding="utf-8") as file:
+        csv_writer = csv.writer(file, quoting=csv.QUOTE_ALL)
+        for row in rows:
+            csv_writer.writerow(row)
+
+
 async def do_action(request) -> web.Response:
     endlog.debug("Init action request")
     request_data = await request.json()
@@ -84,6 +116,129 @@ def dependencies_button(name, dependencies):
         """
 
 
+def csv_editor():
+    inputs = [f for f in styles_dir.iterdir() if f.suffix == ".csv"]
+    # rows = {f.stem: list(csv.reader(f.read_text("utf8"))) for f in styles}
+
+    style_files = {}
+    for file in inputs:
+        with open(file, "r", encoding="utf8") as f:
+            parsed = csv.reader(f)
+            style_files[file.name] = []
+            for row in parsed:
+                endlog.debug(f"Adding style {row[0]}")
+                style_files[file.name].append((row[0], row[1], row[2]))
+
+    html_out = """
+            <div id="style-editor">
+             <h1>Style Editor</h1>
+
+            """
+    for current, styles in style_files.items():
+        current_out = f"<h3>{current}</h3>"
+        table_rows = []
+        for index, style in enumerate(styles):
+            table_rows += (
+                (["<tr>"] + [f"<th>{cell}</th>" for cell in style] + ["</tr>"])
+                if index == 0
+                else (
+                    ["<tr>"]
+                    + [
+                        f"<td><input type='text' value='{cell}'></td>"
+                        if i == 0
+                        else f"<td><textarea name='Text1' cols='40' rows='5'>{cell}</textarea></td>"
+                        for i, cell in enumerate(style)
+                    ]
+                    + ["</tr>"]
+                )
+            )
+        current_out += (
+            f"<table data-id='{current}' data-filename='{current}'>"
+            + "".join(table_rows)
+            + "</table>"
+        )
+        current_out += f"<button data-id='{current}' onclick='saveTableData(this.getAttribute(\"data-id\"))'>Save {current}</button>"
+
+        html_out += add_foldable_region(current, current_out)
+
+    html_out += "</div>"
+    html_out += """<script src='/mtb-assets/js/saveTableData.js'></script>"""
+
+    return html_out
+
+
+def render_tab_view(**kwargs):
+    tab_headers = []
+    tab_contents = []
+
+    for idx, (tab_name, content) in enumerate(kwargs.items()):
+        active_class = "active" if idx == 0 else ""
+        tab_headers.append(
+            f"<button class='tablinks {active_class}' onclick=\"openTab(event, '{tab_name}')\">{tab_name}</button>"
+        )
+        tab_contents.append(
+            f"<div id='{tab_name}' class='tabcontent {active_class}'>{content}</div>"
+        )
+
+    headers_str = "\n".join(tab_headers)
+    contents_str = "\n".join(tab_contents)
+
+    return f"""
+<div class='tab-container'>
+    <div class='tab'>
+        {headers_str}
+    </div>
+    {contents_str}
+    </div>
+    <script src='/mtb-assets/js/tabSwitch.js'></script>
+    """
+
+
+def add_foldable_region(title, content):
+    symbol_id = f"{title}-symbol"
+    return f"""
+    <div class='foldable'>
+        <div class='foldable-title' onclick="toggleFoldable('{title}', '{symbol_id}')">
+            <span id='{symbol_id}' class='foldable-symbol'>&#9655;</span>
+            {title}
+        </div>
+        <div id='{title}' class='foldable-content'>
+            {content}
+        </div>
+    </div>
+    <script src='/mtb-assets/js/foldable.js'></script>
+    """
+
+
+def add_split_pane(left_content, right_content, vertical=True):
+    orientation = "vertical" if vertical else "horizontal"
+    return f"""
+    <div class="split-pane {orientation}">
+        <div id="leftPane">
+            {left_content}
+        </div>
+        <div id="resizer"></div>
+        <div id="rightPane">
+            {right_content}
+        </div>
+    </div>
+    <script>
+        initSplitPane({str(vertical).lower()});
+    </script>
+    <script src='/mtb-assets/js/splitPane.js'></script>
+    """
+
+
+def add_dropdown(title, options):
+    option_str = "\n".join([f"<option value='{opt}'>{opt}</option>" for opt in options])
+    return f"""
+    <select>
+        <option disabled selected>{title}</option>
+        {option_str}
+    </select>
+    """
+
+
 def render_table(table_dict, sort=True, title=None):
     table_dict = sorted(
         table_dict.items(), key=lambda item: item[0]
@@ -123,21 +278,13 @@ def render_table(table_dict, sort=True, title=None):
 
 
 def render_base_template(title, content):
-    css_content = ""
-    css_path = here / "html" / "style.css"
-    if css_path:
-        with open(css_path, "r") as css_file:
-            css_content = css_file.read()
-
     github_icon_svg = """<svg xmlns="http://www.w3.org/2000/svg" fill="whitesmoke" height="3em" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>"""
     return f"""
     <!DOCTYPE html>
     <html>
     <head>
         <title>{title}</title>
-        <style>
-            {css_content}
-        </style>
+        <link rel="stylesheet" href="/mtb-assets/style.css"/>
     </head>
     <script type="module">
         import {{ api }} from '/scripts/api.js'

html/js/foldable.js

@@ -0,0 +1,20 @@
+/**
+ * File: foldable.js
+ * Project: comfy_mtb
+ * Author: Mel Massadian
+ *
+ * Copyright (c) 2023 Mel Massadian
+ *
+ */
+
+function toggleFoldable(elementId, symbolId) {
+  const content = document.getElementById(elementId)
+  const symbol = document.getElementById(symbolId)
+  if (content.style.display === 'none' || content.style.display === '') {
+    content.style.display = 'flex'
+    symbol.innerHTML = '▽' // Down arrow
+  } else {
+    content.style.display = 'none'
+    symbol.innerHTML = '▷' // Right arrow
+  }
+}

html/js/saveTableData.js

@@ -0,0 +1,54 @@
+/**
+ * File: saveTableData.js
+ * Project: comfy_mtb
+ * Author: Mel Massadian
+ *
+ * Copyright (c) 2023 Mel Massadian
+ *
+ */
+
+function saveTableData(identifier) {
+  const table = document.querySelector(
+    `#style-editor table[data-id='${identifier}']`
+  )
+
+  let currentData = []
+  const rows = table.querySelectorAll('tr')
+  const filename = table.getAttribute('data-id')
+
+  rows.forEach((row, rowIndex) => {
+    const rowData = []
+    const cells =
+      rowIndex === 0
+        ? row.querySelectorAll('th')
+        : row.querySelectorAll('td input, td textarea')
+
+    cells.forEach((cell) => {
+      rowData.push(rowIndex === 0 ? cell.textContent : cell.value)
+    })
+
+    currentData.push(rowData)
+  })
+
+  let tablesData = {}
+  tablesData[filename] = currentData
+
+  console.debug('Sending styles to manage endpoint:', tablesData)
+  fetch('/mtb/actions', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      name: 'saveStyle',
+      args: tablesData,
+    }),
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      console.debug('Success:', data)
+    })
+    .catch((error) => {
+      console.error('Error:', error)
+    })
+}

html/js/splitPane.js

@@ -0,0 +1,34 @@
+/**
+ * File: splitPane.js
+ * Project: comfy_mtb
+ * Author: Mel Massadian
+ *
+ * Copyright (c) 2023 Mel Massadian
+ *
+ */
+
+function initSplitPane(vertical) {
+  let resizer = document.getElementById('resizer')
+  let left = document.getElementById('leftPane')
+  let right = document.getElementById('rightPane')
+  resizer.addEventListener('mousedown', function (e) {
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup', function () {
+      document.removeEventListener('mousemove', onMouseMove)
+    })
+  })
+
+  const onMouseMove = (e) => {
+    if (vertical) {
+      let leftWidth = e.clientX
+      let rightWidth = window.innerWidth - e.clientX
+      left.style.width = leftWidth + 'px'
+      right.style.width = rightWidth + 'px'
+    } else {
+      let topHeight = e.clientY
+      let bottomHeight = window.innerHeight - e.clientY
+      left.style.height = topHeight + 'px'
+      right.style.height = bottomHeight + 'px'
+    }
+  }
+}

html/js/tabSwitch.js

@@ -0,0 +1,22 @@
+/**
+ * File: tabSwitch.js
+ * Project: comfy_mtb
+ * Author: Mel Massadian
+ *
+ * Copyright (c) 2023 Mel Massadian
+ *
+ */
+
+function openTab(evt, tabName) {
+  var i, tabcontent, tablinks
+  tabcontent = document.getElementsByClassName('tabcontent')
+  for (i = 0; i < tabcontent.length; i++) {
+    tabcontent[i].style.display = 'none'
+  }
+  tablinks = document.getElementsByClassName('tablinks')
+  for (i = 0; i < tablinks.length; i++) {
+    tablinks[i].className = tablinks[i].className.replace(' active', '')
+  }
+  document.getElementById(tabName).style.display = 'block'
+  evt.currentTarget.className += ' active'
+}