feat: double-click current mix chip to toggle on/off

dist/immac_style_mixer/main.js

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["immac_style_mixer/StyleMixerPanel-Cgx4HgTP.js","immac_style_mixer/vendor-DPfS0z4g.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["immac_style_mixer/StyleMixerPanel-C2nCmlGN.js","immac_style_mixer/vendor-DPfS0z4g.js"])))=>i.map(i=>d[i]);
 import{r as P,a as M,R as I}from"./vendor-DPfS0z4g.js";const j="modulepreload",k=function(t){return"/"+t},E={},O=function(e,i,r){let d=Promise.resolve();if(i&&i.length>0){document.getElementsByTagName("link");const n=document.querySelector("meta[property=csp-nonce]"),a=(n==null?void 0:n.nonce)||(n==null?void 0:n.getAttribute("nonce"));d=Promise.allSettled(i.map(c=>{if(c=k(c),c in E)return;E[c]=!0;const o=c.endsWith(".css"),y=o?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${c}"]${y}`))return;const s=document.createElement("link");if(s.rel=o?"stylesheet":j,o||(s.as="script"),s.crossOrigin="",s.href=c,a&&s.setAttribute("nonce",a),document.head.appendChild(s),o)return new Promise((f,h)=>{s.addEventListener("load",f),s.addEventListener("error",()=>h(new Error(`Unable to preload CSS for ${c}`)))})}))}function p(n){const a=new Event("vite:preloadError",{cancelable:!0});if(a.payload=n,window.dispatchEvent(a),!a.defaultPrevented)throw n}return d.then(n=>{for(const a of n||[])a.status==="rejected"&&p(a.reason);return e().catch(p)})};var R={exports:{}},v={};/**
  * @license React
  * react-jsx-runtime.production.min.js
@@ -7,4 +7,4 @@ import{r as P,a as M,R as I}from"./vendor-DPfS0z4g.js";const j="modulepreload",k
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var z=P,L=Symbol.for("react.element"),T=Symbol.for("react.fragment"),U=Object.prototype.hasOwnProperty,D=z.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,$={key:!0,ref:!0,__self:!0,__source:!0};function C(t,e,i){var r,d={},p=null,n=null;i!==void 0&&(p=""+i),e.key!==void 0&&(p=""+e.key),e.ref!==void 0&&(n=e.ref);for(r in e)U.call(e,r)&&!$.hasOwnProperty(r)&&(d[r]=e[r]);if(t&&t.defaultProps)for(r in e=t.defaultProps,e)d[r]===void 0&&(d[r]=e[r]);return{$$typeof:L,type:t,key:p,ref:n,props:d,_owner:D.current}}v.Fragment=T;v.jsx=C;v.jsxs=C;R.exports=v;var x=R.exports,_={},b=M;_.createRoot=b.createRoot,_.hydrateRoot=b.hydrateRoot;const W=I.lazy(()=>O(()=>import("./StyleMixerPanel-Cgx4HgTP.js"),__vite__mapDeps([0,1])));function A(){return new Promise(t=>{function e(){if(window.app){t();return}const i=setInterval(()=>{window.app&&(clearInterval(i),t())},50);setTimeout(()=>{clearInterval(i),console.error("[ImmacStyleMixer] Timeout waiting for ComfyUI app"),t()},5e3)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):e()})}async function F(){if(await A(),!window.app){console.error("[ImmacStyleMixer] ComfyUI app not available");return}window.app.extensionManager.registerSidebarTab({id:"immac-style-mixer",icon:"pi pi-palette",title:"Style Mixer",tooltip:"Immac Style Mixer",type:"custom",render:t=>{const e=document.createElement("div");e.id="immac-style-mixer-root",e.style.position="absolute",e.style.inset="0",e.style.overflow="hidden",t.style.position="relative",t.style.height="100%",t.appendChild(e),_.createRoot(e).render(x.jsx(I.StrictMode,{children:x.jsx(P.Suspense,{fallback:x.jsx("div",{style:{padding:"1rem"},children:"Loading…"}),children:x.jsx(W,{})})}))}}),window.app.registerExtension({name:"ImmacStyleMixer",nodeCreated(t){var c;if(t.comfyClass!=="StyleMixImmacStyleMixer")return;const e=(c=t.widgets)==null?void 0:c.find(o=>o.name==="mix");if(!e)return;const i=document.createElement("img");i.style.cssText="width:100%;height:100%;display:none;object-fit:contain;border-radius:4px";const r=document.createElement("div");r.style.cssText="padding:4px;box-sizing:border-box",r.appendChild(i),r.style.setProperty("--comfy-widget-min-height","0"),r.style.setProperty("--comfy-widget-height","0"),t.addDOMWidget("immac_mix_preview","div",r,{serialize:!1});function d(o,y){var g,w,l,S;const s=((g=t.size)==null?void 0:g[0])??300,f=y/o,h=Math.round((s-8)*f),m=Math.max(80,Math.min(h,600));r.style.setProperty("--comfy-widget-min-height",String(m)),r.style.setProperty("--comfy-widget-height",String(m));const u=(w=t.computeSize)==null?void 0:w.call(t);u&&t.setSize([Math.max(t.size[0],u[0]),Math.max(t.size[1],u[1])]),(S=(l=window.app)==null?void 0:l.graph)==null||S.setDirtyCanvas(!0)}function p(){var o,y;r.style.setProperty("--comfy-widget-min-height","0"),r.style.setProperty("--comfy-widget-height","0"),i.style.display="none",(y=(o=window.app)==null?void 0:o.graph)==null||y.setDirtyCanvas(!0)}async function n(o){var y,s;try{const f=await fetch("/immac_style_mixer/api/data");if(!f.ok)return;const h=await f.json(),m=(y=h.mixes)==null?void 0:y.find(g=>g.name===o);let u="";if(m!=null&&m.image_filename)u=`/view?filename=${encodeURIComponent(m.image_filename)}&subfolder=immac_style_mixer%2Fmixes&type=input`;else if((s=m==null?void 0:m.styles)!=null&&s.length){const g=Object.fromEntries((h.styles??[]).map(l=>[l.id,l])),w=m.styles.filter(l=>l.enabled!==!1).map(l=>g[l.style_id]).find(l=>l==null?void 0:l.image_filename);w&&(u=`/view?filename=${encodeURIComponent(w.image_filename)}&subfolder=immac_style_mixer%2Fstyles&type=input`)}if(!u){p();return}i.onload=()=>{i.style.display="block",d(i.naturalWidth,i.naturalHeight)},i.onerror=()=>{p()},i.src=u}catch(f){console.error("[ImmacStyleMixer] Preview update failed",f)}}const a=e.callback;e.callback=function(...o){a==null||a.apply(this,o),n(String(e.value??""))},e.value&&n(String(e.value))}})}F().catch(console.error);export{x as j};
+ */var z=P,L=Symbol.for("react.element"),T=Symbol.for("react.fragment"),U=Object.prototype.hasOwnProperty,D=z.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,$={key:!0,ref:!0,__self:!0,__source:!0};function C(t,e,i){var r,d={},p=null,n=null;i!==void 0&&(p=""+i),e.key!==void 0&&(p=""+e.key),e.ref!==void 0&&(n=e.ref);for(r in e)U.call(e,r)&&!$.hasOwnProperty(r)&&(d[r]=e[r]);if(t&&t.defaultProps)for(r in e=t.defaultProps,e)d[r]===void 0&&(d[r]=e[r]);return{$$typeof:L,type:t,key:p,ref:n,props:d,_owner:D.current}}v.Fragment=T;v.jsx=C;v.jsxs=C;R.exports=v;var x=R.exports,_={},b=M;_.createRoot=b.createRoot,_.hydrateRoot=b.hydrateRoot;const W=I.lazy(()=>O(()=>import("./StyleMixerPanel-C2nCmlGN.js"),__vite__mapDeps([0,1])));function A(){return new Promise(t=>{function e(){if(window.app){t();return}const i=setInterval(()=>{window.app&&(clearInterval(i),t())},50);setTimeout(()=>{clearInterval(i),console.error("[ImmacStyleMixer] Timeout waiting for ComfyUI app"),t()},5e3)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):e()})}async function F(){if(await A(),!window.app){console.error("[ImmacStyleMixer] ComfyUI app not available");return}window.app.extensionManager.registerSidebarTab({id:"immac-style-mixer",icon:"pi pi-palette",title:"Style Mixer",tooltip:"Immac Style Mixer",type:"custom",render:t=>{const e=document.createElement("div");e.id="immac-style-mixer-root",e.style.position="absolute",e.style.inset="0",e.style.overflow="hidden",t.style.position="relative",t.style.height="100%",t.appendChild(e),_.createRoot(e).render(x.jsx(I.StrictMode,{children:x.jsx(P.Suspense,{fallback:x.jsx("div",{style:{padding:"1rem"},children:"Loading…"}),children:x.jsx(W,{})})}))}}),window.app.registerExtension({name:"ImmacStyleMixer",nodeCreated(t){var c;if(t.comfyClass!=="StyleMixImmacStyleMixer")return;const e=(c=t.widgets)==null?void 0:c.find(o=>o.name==="mix");if(!e)return;const i=document.createElement("img");i.style.cssText="width:100%;height:100%;display:none;object-fit:contain;border-radius:4px";const r=document.createElement("div");r.style.cssText="padding:4px;box-sizing:border-box",r.appendChild(i),r.style.setProperty("--comfy-widget-min-height","0"),r.style.setProperty("--comfy-widget-height","0"),t.addDOMWidget("immac_mix_preview","div",r,{serialize:!1});function d(o,y){var g,w,l,S;const s=((g=t.size)==null?void 0:g[0])??300,f=y/o,h=Math.round((s-8)*f),m=Math.max(80,Math.min(h,600));r.style.setProperty("--comfy-widget-min-height",String(m)),r.style.setProperty("--comfy-widget-height",String(m));const u=(w=t.computeSize)==null?void 0:w.call(t);u&&t.setSize([Math.max(t.size[0],u[0]),Math.max(t.size[1],u[1])]),(S=(l=window.app)==null?void 0:l.graph)==null||S.setDirtyCanvas(!0)}function p(){var o,y;r.style.setProperty("--comfy-widget-min-height","0"),r.style.setProperty("--comfy-widget-height","0"),i.style.display="none",(y=(o=window.app)==null?void 0:o.graph)==null||y.setDirtyCanvas(!0)}async function n(o){var y,s;try{const f=await fetch("/immac_style_mixer/api/data");if(!f.ok)return;const h=await f.json(),m=(y=h.mixes)==null?void 0:y.find(g=>g.name===o);let u="";if(m!=null&&m.image_filename)u=`/view?filename=${encodeURIComponent(m.image_filename)}&subfolder=immac_style_mixer%2Fmixes&type=input`;else if((s=m==null?void 0:m.styles)!=null&&s.length){const g=Object.fromEntries((h.styles??[]).map(l=>[l.id,l])),w=m.styles.filter(l=>l.enabled!==!1).map(l=>g[l.style_id]).find(l=>l==null?void 0:l.image_filename);w&&(u=`/view?filename=${encodeURIComponent(w.image_filename)}&subfolder=immac_style_mixer%2Fstyles&type=input`)}if(!u){p();return}i.onload=()=>{i.style.display="block",d(i.naturalWidth,i.naturalHeight)},i.onerror=()=>{p()},i.src=u}catch(f){console.error("[ImmacStyleMixer] Preview update failed",f)}}const a=e.callback;e.callback=function(...o){a==null||a.apply(this,o),n(String(e.value??""))},e.value&&n(String(e.value))}})}F().catch(console.error);export{x as j};

ui/src/components/StyleMixerPanel.tsx

@@ -204,6 +204,7 @@ export default function StyleMixerPanel() {
                     key={entry.style_id}
                     onMouseEnter={() => setHoveredChipId(entry.style_id)}
                     onMouseLeave={() => setHoveredChipId(null)}
+                    onDoubleClick={() => updateCurrentMixEntry(entry.style_id, { enabled: !entry.enabled })}
                     style={{
                       border: `1px solid ${entry.enabled ? 'var(--p-primary-color, #6c6)' : 'var(--p-surface-border, #444)'}`,
                       borderRadius: 6,