sdppp node title optimize

javascript/sdppp-custom.js

@@ -39,7 +39,7 @@ export default function (sdppp) {
     sdppp.widgetable.add('SDPPP Get Document', {
         formatter: (node) => {
             return {
-                title: node.title,
+                title: getTitle(node),
                 widgets: [{
                     value: node.widgets[0].value,
                     outputType: "PS_DOCUMENT",
@@ -60,13 +60,13 @@ export default function (sdppp) {
     sdppp.widgetable.add('SDPPP Get Layer By ID', {
         formatter: (node) => {
             return {
-                title: node.title,
+                title: getTitle(node),
                 widgets: [{
                     value: node.widgets[0].value,
                     outputType: "PS_LAYER",
                     options: {
                         values: node.widgets[0].options.values,
-                        documentNodeID: sdppp.findDocumentNodeRecursive(node)?.id || 0
+                        documentNodeID: sdpppX.findDocumentNodeRecursive(node)?.id || 0
                     }
                 }]
             }
@@ -87,7 +87,7 @@ export default function (sdppp) {
      */
     sdppp.widgetable.add('PrimitiveNode', {
         formatter: (node) => {
-            let title = node.title.startsWith("Primitive") ? nameByConnectedOutputOrTitle(node) : node.title;
+            let title = node.title.startsWith("Primitive") ? nameByConnectedOutputOrTitle(node) : getTitle(node);
             if (!node.widgets || node.widgets.length == 0) {
                 return null;
             }
@@ -130,7 +130,7 @@ export default function (sdppp) {
         formatter: (node) => {
             if (node.type.indexOf('Group') != -1) {
                 return {
-                    title: node.title,
+                    title: getTitle(node),
                     widgets: node.widgets.map((widget) => ({
                         value: fixRGthreeWidgetValue(widget.type, widget.value),
                         name: (widget.label || widget.name).replace(/^(enable[-_ ]?)?/gi, ''),
@@ -141,7 +141,7 @@ export default function (sdppp) {
                 }
             }
             return {
-                title: node.title,
+                title: getTitle(node),
                 widgets: node.widgets.map((widget) => ({
                     value: fixRGthreeWidgetValue(widget.type, widget.value),
                     name: node.type.indexOf('Group') != -1 ? (widget.label || widget.name) : '',
@@ -179,7 +179,7 @@ export default function (sdppp) {
     sdppp.widgetable.add('LoadImage', {
         formatter: (node) => {
             return {
-                title: node.title,
+                title: getTitle(node),
                 widgets: [{
                     value: node.widgets[0].value,
                     outputType: "IMAGE_PATH",
@@ -196,7 +196,7 @@ export default function (sdppp) {
     sdppp.widgetable.add('LoadImageMask', {
         formatter: (node) => {
             return {
-                title: node.title,
+                title: getTitle(node),
                 widgets: [{
                     value: node.widgets[0].value,
                     outputType: "MASK_PATH",
@@ -209,7 +209,7 @@ export default function (sdppp) {
     sdppp.widgetable.add("CheckpointLoaderSimple", {
         formatter: (node) => {
             return {
-                title: node.title,
+                title: getTitle(node),
                 widgets: [{
                     value: node.widgets[0].value,
                     outputType: "combo",
@@ -233,7 +233,7 @@ export default function (sdppp) {
             const mappedType = outputTypeMap[paramType] || { type: paramType } || { type: "string" };
 
             return {
-                title: node.title,
+                title: getTitle(node),
                 widgets: [{
                     value: node.widgets[2].value, // 主值widget
                     name: node.widgets[0].value,   // 参数名widget
@@ -260,7 +260,7 @@ export default function (sdppp) {
  * @returns 
  */
 function nameByConnectedOutputOrTitle(node) {
-    return node.outputs?.[0].widget?.name || getTitle(node);
+    return sdpppX.getNodeTitle(node, node.outputs?.[0].widget?.name);
 }
 /**
  * get the title of the node, with priority to avoid conflicts with the hidden property sdppp_widgetable_title
@@ -270,5 +270,5 @@ function nameByConnectedOutputOrTitle(node) {
  * @returns 
  */
 function getTitle(node) {
-    return node.getProperty('sdppp_widgetable_title') || node.title;
+    return sdpppX.getNodeTitle(node);
 }

typescripts/src/sdsystem/comfy/graph-to-form.mts

@@ -51,7 +51,8 @@ export function findAvailableNodeInGraph(graph: any): SDPPPGraphForm[] {
     return graph?.nodes
         .map((node: any) => {
             if (node.mode != 0) return; // muted or by passed
-            if (!node.title || node.title.startsWith(".")) return; // hidden
+            const title = getTitle(node);
+            if (!title || title.startsWith(".")) return; // hidden
             if (!node.widgets || node.widgets.length == 0) return; // no widgets
 
             const converter = customNodeConvertersByWildcard.find(([wildcard]) => {
@@ -68,7 +69,7 @@ export function findAvailableNodeInGraph(graph: any): SDPPPGraphForm[] {
                 } catch (e: any) {
                     return {
                         id: node.id,
-                        title: node.title,
+                        title: title,
                         uiWeightSum: 12,
                         widgets: [{
                             outputType: 'error',
@@ -80,11 +81,10 @@ export function findAvailableNodeInGraph(graph: any): SDPPPGraphForm[] {
 
             // generic node 
             //only use the nodes starts with #
-            if (!node.title.startsWith("#")) {
+            if (!title.startsWith("#")) {
                 return null;
             }
 
-            let title = node.title;
             let widgets = node.widgets;
             return {
                 id: node.id,
@@ -100,7 +100,11 @@ export function findAvailableNodeInGraph(graph: any): SDPPPGraphForm[] {
         })
         .filter(Boolean)
         .sort((a: SDPPPGraphForm, b: SDPPPGraphForm) => {
-            return a.title.localeCompare(b.title);
+            let titleA = getTitle(a);
+            let titleB = getTitle(b);
+            titleA = titleA.startsWith("#") ? titleA.slice(1).trim() : titleA.trim();
+            titleB = titleB.startsWith("#") ? titleB.slice(1).trim() : titleB.trim();
+            return titleA.localeCompare(titleB);
         });
 }
 
@@ -115,3 +119,21 @@ function wildcardMatch(pattern: string, text: string): boolean {
     const regex = new RegExp(`^${regexPattern}$`);
     return regex.test(text);
 }
+
+/**
+ * get the title of the node, with priority to avoid conflicts with the hidden property sdppp_widgetable_title
+ * 获取节点的标题, 优先用于规避冲突的隐藏属性sdppp_widgetable_title
+ * 
+ * @param {*} node 
+ * @returns 
+ */
+function getTitle(node: any, defaultTitle: string = '') {
+    let retTitle = defaultTitle || node.title;
+    if (node.setProperty && (retTitle.startsWith("#") || retTitle.startsWith("."))) {
+        node.setProperty('sdppp_widgetable_title', retTitle);
+    } else {
+        retTitle = node.properties?.['sdppp_widgetable_title'] || retTitle;
+    }
+    return retTitle;
+}
+sdpppX.getNodeTitle = getTitle;

typescripts/src/sdsystem/comfy/popup/tsx/widgets/EditableTitle.tsx

@@ -11,6 +11,10 @@ export function EditableTitle({ title, onTitleChange }: EditableTitleProps) {
     const [editing, setEditing] = useState(false);
     const [editedTitle, setEditedTitle] = useState(title);
 
+    useEffect(() => {
+        setEditedTitle(title);
+    }, [title]);
+
     const handleClick = () => {
         setEditing(true);
     };

typescripts/src/sdsystem/comfy/popup/tsx/widgets/combo.tsx

@@ -22,7 +22,6 @@ export const ComboWidget: React.FC<DropdownWidgetProps> = ({
         onSelectUpdate(selectedValue, selectedIndex);
     };
     const uiWeightCSS = useUIWeightCSS(uiWeight || 12);
-    console.log(options);
 
     return (
         <Select