nodes/zombieyang-sd-ppp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: show connecting status

Browse Source
This commit is contained in:
zombieyang
2024-07-08 09:25:42 +08:00
parent c40a189943
commit 070cb8a25e
7 changed files with 117 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript/plugins/sd-ppp_PS.ccx
BIN
View File
Binary file not shown.
photoshop/dist/index.js
Vendored
+46 -8
View File
@@ -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___);
photoshop/dist/manifest.json
Vendored
+4 -4
View File
@@ -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": [
{
photoshop/plugin/manifest.json
+3 -3
View File
@@ -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": [
{
photoshop/src/panels/Main.jsx
+32 -8
View File
@@ -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 (
<>
<sp-textfield
id="url-bar"
label="ComfyURL"
@@ -44,15 +46,37 @@ export default class Main extends React.Component {
value={this.state.comfyURL}
placeholder="http://127.0.0.1:8188"
></sp-textfield>
<div className="button-box">
<div className="connect-box">
<div className={"status-bar " + (
this.state.isConnected ? 'connected' : (
this.state.isReconnecting ? 'reconnecting' :
'disconnected'
)
)}>
<div className="status-icon">⬤</div>
<div className="status-text">{(
this.state.isConnected ? 'connected' : (
this.state.isReconnecting ? 'reconnecting...' :
'disconnected'
)
)}</div>
</div>
<sp-button
id="connect-btn"
variant="primary"
onClick={this.doConnectOrDisconnect.bind(this)}
>{this.state.isConnected ? 'disconnect' : 'connect'}</sp-button>
</div>
>{this.state.isConnected || this.state.isReconnecting ? 'disconnect' : 'connect'}</sp-button>
</div>
<sp-divider size="small"></sp-divider>
{/* <sp-label>webpage-list</sp-label>
<ul className="client-list">
<li className="client-list-item">
<sp-label class="client-name">AE231DDEB64C</sp-label>
<sp-link>Run</sp-link>
</li>
</ul> */}
</>
)
}
photoshop/src/styles.css
+25 -2
View File
@@ -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;
}
photoshop/src/system/ComfyConnection.js
+7 -1
View File
@@ -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();
}
}