diff --git a/javascript/plugins/sd-ppp_PS.ccx b/javascript/plugins/sd-ppp_PS.ccx index 7dc9687..4ca0837 100644 Binary files a/javascript/plugins/sd-ppp_PS.ccx and b/javascript/plugins/sd-ppp_PS.ccx differ diff --git a/photoshop/dist/index.js b/photoshop/dist/index.js index 8efa7e6..ead9e81 100644 --- a/photoshop/dist/index.js +++ b/photoshop/dist/index.js @@ -96,7 +96,8 @@ __webpack_require__.r(__webpack_exports__); class Main extends react__WEBPACK_IMPORTED_MODULE_0__.Component { state = { comfyURL: '', - isConnected: false + isConnected: false, + isReconnecting: false }; componentDidMount() { _system_ComfyConnection__WEBPACK_IMPORTED_MODULE_1__["default"].onConnectStateChange(() => { @@ -104,6 +105,7 @@ class Main extends react__WEBPACK_IMPORTED_MODULE_0__.Component { console.log('isConnected：', instance?.isConnected); this.setState({ isConnected: instance?.isConnected, + isReconnecting: instance?.isReconnecting, comfyURL: instance ? instance.comfyURL : '' }); }); @@ -119,7 +121,8 @@ class Main extends react__WEBPACK_IMPORTED_MODULE_0__.Component { }); } doConnectOrDisconnect() { - if (!_system_ComfyConnection__WEBPACK_IMPORTED_MODULE_1__["default"].instance?.isConnected) _system_ComfyConnection__WEBPACK_IMPORTED_MODULE_1__["default"].createInstance(this.state.comfyURL);else _system_ComfyConnection__WEBPACK_IMPORTED_MODULE_1__["default"].instance.disconnect(); + console.log(_system_ComfyConnection__WEBPACK_IMPORTED_MODULE_1__["default"].instance?.isConnected, _system_ComfyConnection__WEBPACK_IMPORTED_MODULE_1__["default"].instance?.isReconnecting); + if (_system_ComfyConnection__WEBPACK_IMPORTED_MODULE_1__["default"].instance?.isConnected || _system_ComfyConnection__WEBPACK_IMPORTED_MODULE_1__["default"].instance?.isReconnecting) _system_ComfyConnection__WEBPACK_IMPORTED_MODULE_1__["default"].instance.disconnect();else _system_ComfyConnection__WEBPACK_IMPORTED_MODULE_1__["default"].createInstance(this.state.comfyURL); } render() { return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("sp-textfield", { @@ -131,12 +134,18 @@ class Main extends react__WEBPACK_IMPORTED_MODULE_0__.Component { value: this.state.comfyURL, placeholder: "http://127.0.0.1:8188" }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { - className: "button-box" - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("sp-button", { + className: "connect-box" + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { + className: "status-bar " + (this.state.isConnected ? 'connected' : this.state.isReconnecting ? 'reconnecting' : 'disconnected') + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { + className: "status-icon" + }, "\u2B24"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { + className: "status-text" + }, this.state.isConnected ? 'connected' : this.state.isReconnecting ? 'reconnecting...' : 'disconnected')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("sp-button", { id: "connect-btn", variant: "primary", onClick: this.doConnectOrDisconnect.bind(this) - }, this.state.isConnected ? 'disconnect' : 'connect')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("sp-divider", { + }, this.state.isConnected || this.state.isReconnecting ? 'disconnect' : 'connect')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("sp-divider", { size: "small" })); } @@ -181,7 +190,7 @@ class ComfyConnection { static _callConnectStateChange() { ComfyConnection._connectStateCallbacks.forEach(cb => { try { - cb(ComfyConnection.instance?.isConnected); + cb(); } catch (e) { console.error(e); } @@ -196,6 +205,9 @@ class ComfyConnection { get isConnected() { return this.socket != null && this.socket.connected === true; } + get isReconnecting() { + return this.socket != null && this.socket.connected === false && this.socket.active === true; + } comfyURL = ''; serverType = ''; interval = null; @@ -211,8 +223,11 @@ class ComfyConnection { this.socket.connect(); } disconnect() { + console.log('disconnect' + this.socket); if (this.socket) { this.socket.close(); + this.socket = null; + ComfyConnection._callConnectStateChange(); } } _createSocket() { @@ -5205,15 +5220,38 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.tabbar { #url-bar { width: 100%; } -.button-box { +.status-bar { + display: flex; + justify-content: left; + align-items: center; +} +.status-bar.connected { color: lightgreen; } +.status-bar.reconnecting { color: lightyellow; } +.status-bar.disconnected { color: lightcoral; } +.status-icon { + margin: 0 5px; +} +.connect-box { width: 100%; display: flex; - justify-content: center; + justify-content: space-between; align-items: center; margin-top: 10px; } #connect-btn { text-align: center; + margin-right: 10px; +} +.client-list-item { + display: flex; + justify-content: space-between; + align-items: center; +} +.client-list-item .client-name { + margin-left: 10px; +} +.client-list-item sp-link { + margin-right: 20px; }`, ""]); // Exports /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___); diff --git a/photoshop/dist/manifest.json b/photoshop/dist/manifest.json index c0629bd..bfb4441 100644 --- a/photoshop/dist/manifest.json +++ b/photoshop/dist/manifest.json @@ -1,7 +1,7 @@ { "id": "sd-ppp", "name": "SD-PPP", - "version": "0.0.3", + "version": "1.0.0", "main": "index.html", "manifestVersion": 5, "host": { @@ -42,8 +42,8 @@ "height": 100 }, "maximumSize": { - "width": 400, - "height": 100 + "width": 300, + "height": 500 }, "preferredDockedSize": { "width": 300, @@ -51,7 +51,7 @@ }, "preferredFloatingSize": { "width": 300, - "height": 100 + "height": 500 }, "icons": [ { diff --git a/photoshop/plugin/manifest.json b/photoshop/plugin/manifest.json index 297492b..bfb4441 100644 --- a/photoshop/plugin/manifest.json +++ b/photoshop/plugin/manifest.json @@ -42,8 +42,8 @@ "height": 100 }, "maximumSize": { - "width": 400, - "height": 100 + "width": 300, + "height": 500 }, "preferredDockedSize": { "width": 300, @@ -51,7 +51,7 @@ }, "preferredFloatingSize": { "width": 300, - "height": 100 + "height": 500 }, "icons": [ { diff --git a/photoshop/src/panels/Main.jsx b/photoshop/src/panels/Main.jsx index e139df0..385af77 100644 --- a/photoshop/src/panels/Main.jsx +++ b/photoshop/src/panels/Main.jsx @@ -4,7 +4,8 @@ import { storage } from "uxp"; export default class Main extends React.Component { state = { comfyURL: '', - isConnected: false + isConnected: false, + isReconnecting: false, } componentDidMount() { @@ -13,6 +14,7 @@ export default class Main extends React.Component { console.log('isConnected：', instance?.isConnected) this.setState({ isConnected: instance?.isConnected, + isReconnecting: instance?.isReconnecting, comfyURL: instance ? instance.comfyURL : '' }) }); @@ -27,16 +29,16 @@ export default class Main extends React.Component { } doConnectOrDisconnect() { - if (!ComfyConnection.instance?.isConnected) - ComfyConnection.createInstance(this.state.comfyURL); - else + console.log(ComfyConnection.instance?.isConnected, ComfyConnection.instance?.isReconnecting) + if (ComfyConnection.instance?.isConnected || ComfyConnection.instance?.isReconnecting) ComfyConnection.instance.disconnect(); + else + ComfyConnection.createInstance(this.state.comfyURL); } render() { return ( <> - -
+
+
+
⬤
+
{( + this.state.isConnected ? 'connected' : ( + this.state.isReconnecting ? 'reconnecting...' : + 'disconnected' + ) + )}
+
{this.state.isConnected ? 'disconnect' : 'connect'} -
+ >{this.state.isConnected || this.state.isReconnecting ? 'disconnect' : 'connect'} +
+ + {/* webpage-list + */} ) } diff --git a/photoshop/src/styles.css b/photoshop/src/styles.css index 4a3e5b2..88bc570 100644 --- a/photoshop/src/styles.css +++ b/photoshop/src/styles.css @@ -24,13 +24,36 @@ #url-bar { width: 100%; } -.button-box { +.status-bar { + display: flex; + justify-content: left; + align-items: center; +} +.status-bar.connected { color: lightgreen; } +.status-bar.reconnecting { color: lightyellow; } +.status-bar.disconnected { color: lightcoral; } +.status-icon { + margin: 0 5px; +} +.connect-box { width: 100%; display: flex; - justify-content: center; + justify-content: space-between; align-items: center; margin-top: 10px; } #connect-btn { text-align: center; + margin-right: 10px; +} +.client-list-item { + display: flex; + justify-content: space-between; + align-items: center; +} +.client-list-item .client-name { + margin-left: 10px; +} +.client-list-item sp-link { + margin-right: 20px; } \ No newline at end of file diff --git a/photoshop/src/system/ComfyConnection.js b/photoshop/src/system/ComfyConnection.js index 66b5c03..9a77b6b 100644 --- a/photoshop/src/system/ComfyConnection.js +++ b/photoshop/src/system/ComfyConnection.js @@ -16,7 +16,7 @@ class ComfyConnection { static _callConnectStateChange() { ComfyConnection._connectStateCallbacks.forEach(cb => { try { - cb(ComfyConnection.instance?.isConnected) + cb() } catch (e) { console.error(e) } }); } @@ -31,6 +31,9 @@ class ComfyConnection { get isConnected() { return this.socket != null && this.socket.connected === true; } + get isReconnecting() { + return this.socket != null && this.socket.connected === false && this.socket.active === true; + } comfyURL = ''; serverType = ''; @@ -48,8 +51,11 @@ class ComfyConnection { } disconnect() { + console.log('disconnect' + this.socket); if (this.socket) { this.socket.close() + this.socket = null; + ComfyConnection._callConnectStateChange(); } }