support default widgetable node

2025-04-27 21:56:19 +08:00
parent 542691d5ce
commit f90f77c18e
8 changed files with 135 additions and 69 deletions
@@ -97,20 +97,20 @@ export default function (sdppp) {
            }
            let widgets = node.widgets.slice(0, sliceNum)
                .map((widget, index) => {
-                    let uiWeight = 12;
-                    if (widget.type == "number" || widget.type == "combo") {
-                        uiWeight = index == 0 ? (sliceNum == 2 ? 8 : 6) : 4
-                    }
-                    if (widget.type == "toggle") {
-                        uiWeight = 4;
-                    }
-                    return {
+                    const ret = {
                        value: widget.value,
-                        name: widget.label || widget.name,
                        outputType: widget.type || "string",
                        options: widget.options,
-                        uiWeight: uiWeight
+                        uiWeight: 12
                    }
+                    if (widget.type == "number" || widget.type == "combo") {
+                        ret.uiWeight = index == 0 ? (sliceNum == 2 ? 8 : 6) : 4
+                    }
+                    if (widget.type == "toggle") {
+                        ret.uiWeight = 4;
+                        ret.name = widget.label || widget.name
+                    }
+                    return ret
                })
                .filter(Boolean)
            return {
@@ -249,6 +249,22 @@ export default function (sdppp) {
            }
        }
    });
+
+    sdppp.widgetable.add('__DEFAULT__', {
+        formatter: (node) => {
+            return {
+                id: node.id,
+                title: getTitle(node),
+                widgets: node.widgets.map((widget) => ({
+                    name: widget.label || widget.name,
+                    outputType: widget.type || "string",
+                    value: widget.value,
+                    options: widget.options,
+                    uiWeight: widget.uiWeight || 12
+                }))
+            };
+        }
+    })
 }


@@ -482,8 +482,7 @@ sp-progressbar {
 }

 .workflow-edit-button sp-action-button.highlight {
-    background-color: var(--uxp-host-text-color-secondary);
-    color: var(--uxp-host-background-color);
+    box-shadow: inset 5px 5px var(--uxp-host-text-color);
 }

 .client-list {
@@ -13,19 +13,22 @@ import WebSocket, { WebSocketServer } from 'ws';
 import { join } from 'path';
 import { typescriptSrcRoot } from './lib.ts';
 import { globSync } from 'glob';
-// 创建WebSocket服务器
-const wss = new WebSocketServer({ port: 8787 });
-const clients = new Set<WebSocket>();
+let wss: WebSocketServer | null = null;
+let clients = new Set<WebSocket>();
+if (process.env.NODE_ENV === 'development') {
+  // 创建WebSocket服务器
+  wss = new WebSocketServer({ port: 8787 });

-wss.on('connection', (ws) => {
-  clients.add(ws);
-  console.log('Client connected, total clients:', clients.size);
+  wss.on('connection', (ws) => {
+    clients.add(ws);
+    console.log('Client connected, total clients:', clients.size);

-  ws.on('close', () => {
-    clients.delete(ws);
-    console.log('Client disconnected, total clients:', clients.size);
+    ws.on('close', () => {
+      clients.delete(ws);
+      console.log('Client disconnected, total clients:', clients.size);
+    });
  });
-});
+}

 // 向所有客户端发送编译完成通知
 function notifyClients(result: {
@@ -39,9 +42,11 @@ function notifyClients(result: {
    warnings: result.warnings.length
  });

-  for (const client of clients) {
-    if (client.readyState === 1) { // OPEN
-      client.send(message);
+  if (process.env.NODE_ENV === 'development') {
+    for (const client of clients) {
+      if (client.readyState === 1) { // OPEN
+        client.send(message);
+      }
    }
  }
 }
@@ -50,7 +55,7 @@ async function createBuildContexts() {
  const contexts = [];
  const startTime = Date.now();
  const isWatchMode = process.argv.includes('--watch');
-  
+
  const buildConfigs = await Promise.all(
    globSync(join(typescriptSrcRoot, 'modules/*'))
      .map(async (path: string) => {
@@ -110,7 +115,9 @@ async function main() {
      for (const { context } of contexts) {
        await context.dispose();
      }
-      wss.close();
+      if (process.env.NODE_ENV === 'development') {
+        wss?.close();
+      }
      console.log('Build completed successfully.');
    }
  } catch (error) {
@@ -29,9 +29,12 @@ sdpppX.widgetable.add = function (name: string, fn: NodeConverter | {


 export function setWidgetValue(node: any, widgetIndex: any, value: any) {
+    const defaultConverter = customNodeConvertersByWildcard.find(([wildcard]) => {
+        return wildcard == '__DEFAULT__'
+    })
    const converter = customNodeConvertersByWildcard.find(([wildcard]) => {
        return wildcardMatch(wildcard, node.type);
-    });
+    }) || defaultConverter;
    let setted = false;
    if (converter) {
        const setter = converter[1].setter;
@@ -49,15 +52,17 @@ export function setWidgetValue(node: any, widgetIndex: any, value: any) {

 export function getWidgetTableValue(graph: any): WidgetTableValue {
    const ret: WidgetTableValue = {};
+    const defaultConverter = customNodeConvertersByWildcard.find(([wildcard]) => {
+        return wildcard == '__DEFAULT__'
+    })

    graph
        .nodes
        .forEach((node: any) => {
            if (!node.widgets || node.widgets.length == 0) return; // no widgets
-
            const converter = customNodeConvertersByWildcard.find(([wildcard]) => {
                return wildcardMatch(wildcard, node.type);
-            });
+            }) || defaultConverter;
            if (converter) {
                const converted = converter[1].formatter(node);
                if (converted) {
@@ -129,16 +134,30 @@ export function makeWidgetTableStructure(graph: any, activeWorkflow: any): Widge
            }

            let widgets = node.widgets;
-            return {
+            const defaultConverter = customNodeConvertersByWildcard.find(([wildcard]) => {
+                return wildcard == '__DEFAULT__'
+            })
+            if (defaultConverter) {
+                const converted = defaultConverter[1].formatter(node);
+                if (converted) {
+                    return Object.assign(converted, {
+                        uiWeightSum: converted.widgets.reduce((sum: number, widget: any) => sum + (widget.uiWeight || 12), 0),
+                    });
+                }
+            }
+            const converted = {
                id: node.id,
                title: title,
-                uiWeightSum: widgets.reduce((sum: number, widget: any) => sum + (widget.uiWeight || 12), 0),
                widgets: widgets.map((widget: any) => ({
                    name: widget.label || widget.name,
                    outputType: widget.type || "string",
+                    value: widget.value,
                    options: widget.options
                }))
            };
+            return Object.assign(converted, {
+                uiWeightSum: converted.widgets.reduce((sum: number, widget: any) => sum + (widget.uiWeight || 12), 0),
+            });
        })
        .filter(Boolean)
        .sort((a: WidgetTableStructureNode, b: WidgetTableStructureNode) => {
@@ -37,20 +37,13 @@ export class WorkflowEditWrap extends React.Component<{
            lastError: '',
            executingNodeTitle: '',
        },
-        widgetTableStructure: {
-            nodes: {},
-            groups: {},
-            nodeIndexes: [],
-            widgetTableID: '',
-            widgetTableName: '',
-            widgetTablePath: '',
-            widgetTablePersisted: false,
-        } as WidgetTableStructure,
-        widgetTableValue: {} as WidgetTableValue,
-        widgetTableErrors: {} as Record<string, string>,
+        widgetTableStructure: pageStore.data.widgetTableStructure,
+        widgetTableValue: pageStore.data.widgetTableValue,
+        widgetTableErrors: pageStore.data.widgetTableErrors,
    }

    private eventListeners: { event: string; handler: (e: any) => void }[] = [];
+    private unsubscribes: (() => void)[] = [];

    constructor(props: any) {
        super(props)
@@ -134,15 +127,28 @@ export class WorkflowEditWrap extends React.Component<{
            });
        });

-        pageStore.subscribe('widgetTableStructure', (wtStructure: WidgetTableStructure) => {
+        const structureCallback = (wtStructure: WidgetTableStructure) => {
            this.setState({
                widgetTableStructure: wtStructure
            })
-        })
-        pageStore.subscribe('widgetTableValue', (wtValue: WidgetTableValue) => {
+        }
+        pageStore.subscribe('/widgetTableStructure', structureCallback)
+        const valueCallback = (wtValue: WidgetTableValue) => {
            this.setState({
                widgetTableValue: wtValue
            })
+        }
+        pageStore.subscribe('/widgetTableValue', valueCallback)
+        const errorsCallback = (wtErrors: Record<string, string>) => {
+            this.setState({
+                widgetTableErrors: wtErrors
+            })
+        }
+        pageStore.subscribe('/widgetTableErrors', errorsCallback)
+        this.unsubscribes.push(() => {
+            pageStore.unsubscribe(structureCallback)
+            pageStore.unsubscribe(valueCallback)
+            pageStore.unsubscribe(errorsCallback)
        })
    }

@@ -150,6 +156,7 @@ export class WorkflowEditWrap extends React.Component<{
        this.eventListeners.forEach(({ event, handler }) => {
            api.removeEventListener(event, handler);
        });
+        this.unsubscribes.forEach((unsubscribe) => unsubscribe())
    }

    render() {
@@ -196,6 +203,7 @@ export class WorkflowEditWrap extends React.Component<{
                            inputMin={min}
                            inputMax={max}
                            inputStep={step}
+                            name={widget.name}
                            value={parseFloat(this.state.widgetTableValue[fieldInfo.id][widgetIndex])}
                            onValueChange={(v) => {
                                editProps.onWidgetChange(fieldInfo.id, widgetIndex, v, fieldInfo);
@@ -208,6 +216,7 @@ export class WorkflowEditWrap extends React.Component<{
                            uiWeight={widget.uiWeight || 12}
                            key={widgetIndex}
                            options={widget.options?.values || []}
+                            name={widget.name}
                            onSelectUpdate={(v) => {
                                editProps.onWidgetChange(fieldInfo.id, widgetIndex, v, fieldInfo);
                            }}
@@ -1,4 +1,4 @@
-import { Select } from 'antd';
+import { Flex, Select, Typography } from 'antd';
 import React from 'react';
 import i18n from '../../../../../../src/common/i18n.mts';
 import { useUIWeightCSS } from './hooks.mts';
@@ -8,12 +8,14 @@ export interface DropdownWidgetProps extends BaseWidgetProps {
    onSelectUpdate: (identify: string, index: number) => void;
    options: string[];
    value: string;
-}   
+    name?: string;
+}

 export const ComboWidget: React.FC<DropdownWidgetProps> = ({
    onSelectUpdate,
    options,
    value,
+    name,
    uiWeight
 }) => {
    // 处理选择变化
@@ -24,17 +26,23 @@ export const ComboWidget: React.FC<DropdownWidgetProps> = ({
    const uiWeightCSS = useUIWeightCSS(uiWeight || 12);

    return (
-        <Select
-            value={value}
-            options={options.map(option => ({ value: option, label: option }))}
-            style={{ ...uiWeightCSS }}
-            onSelect={handleSelect}
-            placeholder={i18n("select...")}
-            showSearch
-            filterOption={(input, option) =>
-                (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
-            }
-        />
+        <Flex
+            style={{ width: '100%', ...uiWeightCSS }}
+            align='center'
+        >
+            {name && <span style={{ flex: 1 }}>{name}</span>}
+            <Select
+                value={value}
+                options={options.map(option => ({ value: option, label: option }))}
+                style={{ flex: 2 }}
+                onSelect={handleSelect}
+                placeholder={i18n("select...")}
+                showSearch
+                filterOption={(input, option) =>
+                    (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+                }
+            />
+        </Flex>
    );
 };

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Flex, InputNumber, Slider, Space } from 'antd';
+import { Flex, InputNumber, Slider, Space, Typography } from 'antd';
 import { useUIWeightCSS } from './hooks.mts';
 import { BaseWidgetProps } from './_base';

@@ -8,6 +8,7 @@ interface NumberWidgetProps extends BaseWidgetProps {
    inputMax: number;
    inputStep: number;
    value?: number;
+    name?: string;
    onValueChange: (value: number) => void;
 }

@@ -15,6 +16,7 @@ export const NumberWidget: React.FC<NumberWidgetProps> = ({
    inputMin,
    inputMax,
    inputStep,
+    name,
    value = 0,
    uiWeight = 1,
    onValueChange
@@ -58,14 +60,20 @@ export const NumberWidget: React.FC<NumberWidgetProps> = ({
    // }

    return (
-        <InputNumber
+        <Flex
            style={{ width: '100%', ...uiWeightCSS }}
-            min={inputMin}
-            max={inputMax}
-            step={inputStep}
-            value={currentValue}
-            onChange={handleValueChange}
-            controls={false}
-        />
+            align='center'
+        >
+            {name && <span style={{ flex: 1 }}>{name}</span>}
+            <InputNumber
+                style={{ width: '100%', flex: 2 }}
+                min={inputMin}
+                max={inputMax}
+                step={inputStep}
+                value={currentValue}
+                onChange={handleValueChange}
+                controls={false}
+            />
+        </Flex>
    );
 };