From e61214b0cb348c65a732e01525d0cb6f3a1aff40 Mon Sep 17 00:00:00 2001 From: zombieyang Date: Wed, 30 Apr 2025 00:06:46 +0800 Subject: [PATCH] option for using slider for number widge --- sdppp_python/comfy/nodes_legacy.py | 1 - sdppp_python/protocols/photoshop.py | 3 +- typescripts/modules/comfy/photoshopModels.mts | 6 +- .../modules/comfy/src/graph-to-form.mts | 11 +++- .../comfy/src/litegraph/fe-widgets.mts | 1 - .../modules/comfy/src/popup/ComfyPopup.css | 9 ++- .../modules/comfy/src/popup/sdpppPopup.mts | 30 +++++++--- .../comfy/src/popup/tsx/ComfyPopup.tsx | 15 +++-- .../comfy/src/popup/tsx/ComfySidebar.tsx | 5 +- .../modules/comfy/src/popup/tsx/Settings.tsx | 42 ++++++------- .../comfy/src/popup/tsx/WorkflowEditWeb.tsx | 5 ++ .../comfy/src/popup/tsx/widgets/combo.tsx | 3 +- .../src/popup/tsx/widgets/image_mask_path.tsx | 1 + .../comfy/src/popup/tsx/widgets/number.tsx | 59 ++++++++++--------- .../comfy/src/popup/tsx/widgets/string.tsx | 1 + .../comfy/src/popup/tsx/widgets/toggle.tsx | 1 + typescripts/modules/photoshop-internal | 2 +- typescripts/src/common/WorkflowEdit.tsx | 7 ++- typescripts/src/common/zh-cn.mts | 3 +- typescripts/src/store/page.mts | 17 +++--- typescripts/src/types/sdppp/index.d.ts | 1 + 21 files changed, 137 insertions(+), 86 deletions(-) diff --git a/sdppp_python/comfy/nodes_legacy.py b/sdppp_python/comfy/nodes_legacy.py index b10c63e..b9a7cbd 100644 --- a/sdppp_python/comfy/nodes_legacy.py +++ b/sdppp_python/comfy/nodes_legacy.py @@ -105,7 +105,6 @@ def define_comfyui_nodes_legacy(sdppp): document_identify=document['identify'], layer_identify=item_layer, boundary=convert_mask_to_boundary(item_bound), - max_wh=sdppp_arg_item['ps_maxGetImageWH'], quality=sdppp_get_prompt_item_from_list(quality, i) ) ) diff --git a/sdppp_python/protocols/photoshop.py b/sdppp_python/protocols/photoshop.py index 258c09b..0deedee 100644 --- a/sdppp_python/protocols/photoshop.py +++ b/sdppp_python/protocols/photoshop.py @@ -17,7 +17,7 @@ class ProtocolPhotoshop: cls.sdpppServer = sdpppServer @classmethod - async def get_image(cls, instance_id, document_identify, layer_identify, boundary, max_wh=60606, quality=100.0): + async def get_image(cls, instance_id, document_identify, layer_identify, boundary, quality=100.0): ppp_instance = cls.sdpppServer.ppp_instances[instance_id] result = await protocol_call(ppp_instance, 'B_photoshop', data={ 'action': 'getImage', @@ -25,7 +25,6 @@ class ProtocolPhotoshop: 'document_identify': document_identify, 'layer_identify': layer_identify, 'boundary': boundary, - 'max_wh': max_wh, 'quality': quality } }) diff --git a/typescripts/modules/comfy/photoshopModels.mts b/typescripts/modules/comfy/photoshopModels.mts index ad71d48..ab049d0 100644 --- a/typescripts/modules/comfy/photoshopModels.mts +++ b/typescripts/modules/comfy/photoshopModels.mts @@ -66,9 +66,9 @@ export async function waitModelInited() { return Promise.resolve(); } api.user && pageStore.setComfyUserToken(api.user); - const maxImageWH = await api.getSetting('sdppp.maxImageWH') - if (maxImageWH) { - pageStore.setMaxImageWH(maxImageWH) + const useSliderForNumberWidget = await api.getSetting('sdppp.useSliderForNumberWidget') + if (useSliderForNumberWidget) { + pageStore.setUseSliderForNumberWidget(useSliderForNumberWidget) } modelInited = true; } \ No newline at end of file diff --git a/typescripts/modules/comfy/src/graph-to-form.mts b/typescripts/modules/comfy/src/graph-to-form.mts index 2a40d97..333b04e 100644 --- a/typescripts/modules/comfy/src/graph-to-form.mts +++ b/typescripts/modules/comfy/src/graph-to-form.mts @@ -1,3 +1,4 @@ +import { pageStore } from "photoshopModels.mjs"; import i18n from "../../../src/common/i18n.mts"; import { sdpppX } from "../../../src/common/sdpppX.mts"; import { WidgetTableStructure, WidgetTableStructureNode, WidgetTableValue } from "../../../src/types/sdppp"; @@ -80,7 +81,10 @@ export function makeWidgetTableStructure(graph: any, activeWorkflow: any): Widge widgetTablePersisted: false, groups: {}, nodes: {}, - nodeIndexes: [] + nodeIndexes: [], + extraOptions: { + useSliderForNumberWidget: pageStore.data.useSliderForNumberWidget + } }; const groups: WidgetTableStructure['groups'] = graph .groups @@ -177,7 +181,10 @@ export function makeWidgetTableStructure(graph: any, activeWorkflow: any): Widge acc[node.id] = node; return acc; }, {}), - nodeIndexes: nodes.map((node: WidgetTableStructureNode) => node.id) + nodeIndexes: nodes.map((node: WidgetTableStructureNode) => node.id), + extraOptions: { + useSliderForNumberWidget: pageStore.data.useSliderForNumberWidget + } } } diff --git a/typescripts/modules/comfy/src/litegraph/fe-widgets.mts b/typescripts/modules/comfy/src/litegraph/fe-widgets.mts index c342985..1ea55d3 100644 --- a/typescripts/modules/comfy/src/litegraph/fe-widgets.mts +++ b/typescripts/modules/comfy/src/litegraph/fe-widgets.mts @@ -271,7 +271,6 @@ export class DownloadWidget extends SDPPPWidget { ]; widget.serializeValue = async () => { const ret: any = { - ps_maxGetImageWH: pageStore.data.maxImageWH, lastOpenedWorkflow: simplifyWorkflowPath(pageStore.data.widgetTableStructure.widgetTablePath) } const documentNode = findDocumentNodeRecursive(node); diff --git a/typescripts/modules/comfy/src/popup/ComfyPopup.css b/typescripts/modules/comfy/src/popup/ComfyPopup.css index 1118ee8..0982b18 100644 --- a/typescripts/modules/comfy/src/popup/ComfyPopup.css +++ b/typescripts/modules/comfy/src/popup/ComfyPopup.css @@ -220,5 +220,12 @@ .sdppp-side-container .sdppp-side-header button { width: 32px; height: 32px; + border: 1px solid var(--border-color); + cursor: pointer; +} +.sdppp-photoshop-icon { + background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/af/Adobe_Photoshop_CC_icon.svg"); +} +.sdppp-premiere-icon { + background-image: url("https://upload.wikimedia.org/wikipedia/commons/4/40/Adobe_Premiere_Pro_CC_icon.svg"); } - diff --git a/typescripts/modules/comfy/src/popup/sdpppPopup.mts b/typescripts/modules/comfy/src/popup/sdpppPopup.mts index 90a8fbc..b53ed6c 100644 --- a/typescripts/modules/comfy/src/popup/sdpppPopup.mts +++ b/typescripts/modules/comfy/src/popup/sdpppPopup.mts @@ -5,6 +5,7 @@ import ComfySidebar from "./tsx/ComfySidebar"; let sdpppCanvasRendered: any = null let sdpppSideBarRendered: any = null +let popupJSXElement: any = null export default async function initPopup(app: any) { if (!sdpppCanvasRendered) { const sdpppCanvas = document.createElement('div'); @@ -26,19 +27,30 @@ export default async function initPopup(app: any) { container.style.padding = "8px"; createRoot(container).render(createElement(ComfySidebar, { onMaximize: () => { - if (!sdpppCanvasRendered) { - createRoot(sdpppCanvas).render(createElement(ComfyPopup, { - onClose: () => { - sdpppCanvas.style.display = "none"; - } - })); - } - sdpppCanvas.style.display = "flex"; - document.querySelector(".sdppp-side-icon")?.parentElement?.click(); + showPopup("1") + }, + onPhotoshop: () => { + showPopup("2") } })) } sdpppCanvas.style.display = "none"; + function showPopup(tab: string) { + if (!sdpppCanvasRendered) { + popupJSXElement = createElement(ComfyPopup, { + onClose: () => { + sdpppCanvas.style.display = "none"; + }, + tab + }); + createRoot(sdpppCanvas).render(popupJSXElement); + + } else { + popupJSXElement.props.tab = tab + } + sdpppCanvas.style.display = "flex"; + document.querySelector(".sdppp-side-icon")?.parentElement?.click(); + } } }); diff --git a/typescripts/modules/comfy/src/popup/tsx/ComfyPopup.tsx b/typescripts/modules/comfy/src/popup/tsx/ComfyPopup.tsx index f1c81c8..c5de02e 100644 --- a/typescripts/modules/comfy/src/popup/tsx/ComfyPopup.tsx +++ b/typescripts/modules/comfy/src/popup/tsx/ComfyPopup.tsx @@ -10,9 +10,12 @@ var docStyle = document.createElement('style'); docStyle.innerHTML = cssText; document.head.appendChild(docStyle); -export default function ComfyPopup({ onClose }: { onClose: () => void }) { - const [tab, setTab] = useState('1'); +export default function ComfyPopup({ onClose, tab }: { onClose: () => void, tab: string }) { + const [_tab, setTab] = useState('1'); const [sidebarWidth, setSidebarWidth] = useState(0); + useEffect(() => { + setTab(tab); + }, [tab]); useEffect(() => { const $canvas = document.getElementById('graph-canvas'); @@ -58,17 +61,17 @@ export default function ComfyPopup({ onClose }: { onClose: () => void }) { }}>
- - + +
Powered by SDPPP
-
+
-
+
diff --git a/typescripts/modules/comfy/src/popup/tsx/ComfySidebar.tsx b/typescripts/modules/comfy/src/popup/tsx/ComfySidebar.tsx index 869deed..dc6126a 100644 --- a/typescripts/modules/comfy/src/popup/tsx/ComfySidebar.tsx +++ b/typescripts/modules/comfy/src/popup/tsx/ComfySidebar.tsx @@ -2,12 +2,15 @@ import { WorkflowEditWrap } from "./WorkflowEditWeb"; export default function ComfySidebar({ onMaximize, + onPhotoshop, }: { - onMaximize: () => void + onMaximize: () => void, + onPhotoshop: () => void }) { return (
+
diff --git a/typescripts/modules/comfy/src/popup/tsx/Settings.tsx b/typescripts/modules/comfy/src/popup/tsx/Settings.tsx index ac2a5ba..85e18fc 100644 --- a/typescripts/modules/comfy/src/popup/tsx/Settings.tsx +++ b/typescripts/modules/comfy/src/popup/tsx/Settings.tsx @@ -2,10 +2,10 @@ import React, { useState } from "react"; import { pageStore } from "../../../photoshopModels.mts"; import i18n from "../../../../../src/common/i18n.mts"; import { api } from "../../comfy-globals.mts"; +import { Checkbox } from "antd"; const Settings: React.FC = () => { - const [maxImageWH, setMaxImageWH] = useState(pageStore.data.maxImageWH); - + const [useSliderForNumberWidget, setUseSliderForNumberWidget] = useState(pageStore.data.useSliderForNumberWidget); const handleDownloadPlugin = () => { location.href = "/sd-ppp-static/sd-ppp_PS.ccx?_=" + Date.now(); }; @@ -15,28 +15,11 @@ const Settings: React.FC = () => {

{i18n("SDPPP Settings/Misc")}

-

{i18n("Comfy URL: {0}", location.origin)}

-
- -
- +
- { - const number = event.currentTarget.value ? parseInt(event.currentTarget.value) : 0; - if (!isNaN(number)) { - pageStore.setMaxImageWH(number); - setMaxImageWH(number); - api.storeSetting('sdppp.maxImageWH', number) - } - }} - min="256" - /> + {location.href.split("?")[0].split("#")[0]}
@@ -50,6 +33,23 @@ const Settings: React.FC = () => {
+ +
+
+ +
+
+ { + setUseSliderForNumberWidget(event.target.checked); + pageStore.setUseSliderForNumberWidget(event.target.checked); + api.storeSetting('sdppp.useSliderForNumberWidget', event.target.checked) + }} + /> +
+
); }; diff --git a/typescripts/modules/comfy/src/popup/tsx/WorkflowEditWeb.tsx b/typescripts/modules/comfy/src/popup/tsx/WorkflowEditWeb.tsx index ea29503..c15f2f4 100644 --- a/typescripts/modules/comfy/src/popup/tsx/WorkflowEditWeb.tsx +++ b/typescripts/modules/comfy/src/popup/tsx/WorkflowEditWeb.tsx @@ -208,6 +208,7 @@ export class WorkflowEditWrap extends React.Component<{ onValueChange={(v) => { editProps.onWidgetChange(fieldInfo.id, widgetIndex, v, fieldInfo); }} + extraOptions={this.state.widgetTableStructure.extraOptions} />) return true } else if (widget.outputType === 'combo') { @@ -221,6 +222,7 @@ export class WorkflowEditWrap extends React.Component<{ editProps.onWidgetChange(fieldInfo.id, widgetIndex, v, fieldInfo); }} value={this.state.widgetTableValue[fieldInfo.id][widgetIndex]} + extraOptions={this.state.widgetTableStructure.extraOptions} /> ) return true @@ -234,6 +236,7 @@ export class WorkflowEditWrap extends React.Component<{ onValueChange={(v) => { editProps.onWidgetChange(fieldInfo.id, widgetIndex, v, fieldInfo); }} + extraOptions={this.state.widgetTableStructure.extraOptions} /> ) return true @@ -247,6 +250,7 @@ export class WorkflowEditWrap extends React.Component<{ onValueChange={(v) => { editProps.onWidgetChange(fieldInfo.id, widgetIndex, v, fieldInfo); }} + extraOptions={this.state.widgetTableStructure.extraOptions} /> ) return true @@ -263,6 +267,7 @@ export class WorkflowEditWrap extends React.Component<{ onValueChange={async (v) => { editProps.onWidgetChange(fieldInfo.id, widgetIndex, v, fieldInfo); }} + extraOptions={this.state.widgetTableStructure.extraOptions} /> ); return true; diff --git a/typescripts/modules/comfy/src/popup/tsx/widgets/combo.tsx b/typescripts/modules/comfy/src/popup/tsx/widgets/combo.tsx index ae6f5e6..f4d6023 100644 --- a/typescripts/modules/comfy/src/popup/tsx/widgets/combo.tsx +++ b/typescripts/modules/comfy/src/popup/tsx/widgets/combo.tsx @@ -9,6 +9,7 @@ export interface DropdownWidgetProps extends BaseWidgetProps { options: string[]; value: string; name?: string; + extraOptions?: Record; } export const ComboWidget: React.FC = ({ @@ -34,7 +35,7 @@ export const ComboWidget: React.FC = ({