Prompt editor > Plugin Lora > improve controls to swap or delete loras

library/built-in/_controlNet/prefab_cnet.ts

@@ -258,7 +258,7 @@ const _apply_cnet = (
     image: _IMAGE,
     cnet_name: Enum_ControlNetLoader_control_net_name,
     mask: HasSingle_MASK | null,
-) => {
+): void => {
     const run = getCurrentRun()
     const graph = run.nodes
     const cnet_node = mask

src/app/shortcuts/cmd_mix.ts

@@ -20,10 +20,10 @@ function focusTree(tree: Tree): void {
             const currentFocous = window.document.activeElement
             const treeAlreadySelected = currentFocous?.id === tree.KeyboardNavigableDomNodeID
             if (treeAlreadySelected)
-                cushy.layout.open('TreeExplorer', {}, 'right') // close the panel
+                cushy.layout.open('TreeExplorer', {}, { where: 'right' }) // close the panel
             else focusTreeRootIfMounted()
         } else {
-            const node = cushy.layout.open('TreeExplorer', {}, 'right')
+            const node = cushy.layout.open('TreeExplorer', {}, { where: 'right' })
             setImmediate((): void => {
                 const isVisible = node?.isVisible()
                 if (!isVisible) return

src/csuite/select/SelectProps.tsx

@@ -25,6 +25,14 @@ export type SelectProps<OPTION> = {
     /** callback when a new option is selected */
     onOptionToggled: null | ((next: OPTION, self: AutoCompleteSelectState<OPTION>) => void)
 
+    /**
+     * @deprecated
+     * use `onOptionToggled` instead
+     * this is just an alias for `onOptionToggled`
+     * this function has been added back since 2 people struggled to find the `onOptionToggled` name
+     */
+    onChange?: (next: OPTION, self: AutoCompleteSelectState<OPTION>) => void
+
     /**
      * list of all choices
      * 👉 If the list of options is generated from the query directly,

src/csuite/select/SelectState.tsx

@@ -271,7 +271,8 @@ export class AutoCompleteSelectState<OPTION> {
 
     toggleOption(option: OPTION): void {
         this.revealState?.log(`_ SelectSate toggleOption`)
-        this.p.onOptionToggled?.(option, this)
+        const onOptionToggledFn = this.p.onOptionToggled ?? this.p.onChange
+        onOptionToggledFn?.(option, this)
         // reset the query
         const shouldResetQuery = this.p.resetQueryOnPick ?? false // !this.isMultiSelect
         if (shouldResetQuery) this.searchQuery = ''

src/models/ComfyWorkflow.ts

@@ -59,7 +59,7 @@ export class ComfyWorkflowL {
         ev.stopPropagation()
         const prompt = await this.json_workflow()
         if (prompt == null) return
-        this.st.layout.open('ComfyUI', { litegraphJson: prompt }, 'biggest')
+        this.st.layout.open('ComfyUI', { litegraphJson: prompt }, { where: 'biggest' })
     }
     menuAction_openInTab = async (ev: MouseEvent): Promise<void> => {
         ev.preventDefault()

src/models/CushyApp.ts

@@ -108,7 +108,7 @@ export class CushyAppL {
             appID: this.id,
             title: title,
         })
-        this.st.layout.open('Draft', { draftID: draft.id }, 'left')
+        this.st.layout.open('Draft', { draftID: draft.id }, { where: 'left' })
         return draft
     }
 

src/models/Draft.ts

@@ -44,7 +44,7 @@ export class DraftL {
 
     openOrFocusTab(): void {
         if (!(this instanceof DraftL)) throw new Error('❌')
-        this.st.layout.open('Draft', { draftID: this.id }, 'left')
+        this.st.layout.open('Draft', { draftID: this.id }, { where: 'left' })
         // this.st.tree2View.revealAndFocusAtPath(['all-drafts', this.id])
     }
 

src/panels/PanelDraft/RunOrAutorunUI.tsx

@@ -57,7 +57,7 @@ export const RunOrAutorunUI = observer(function RunOrAutorunUI_(p: { className?:
                 className='self-start'
                 icon={icon}
                 onClick={() => {
-                    draft.st.layout.open('Output', {}, 'right')
+                    draft.st.layout.open('Output', {}, { where: 'right' })
                     draft.setAutostart(false)
                     draft.start({})
                 }}

src/prompt/plugins/Plugin_LoraBoxUI.tsx

@@ -6,6 +6,7 @@ import { Frame } from '../../csuite/frame/Frame'
 import { InputNumberUI } from '../../csuite/input-number/InputNumberUI'
 import { InputLegacy } from '../../csuite/inputs/shims'
 import { MessageErrorUI } from '../../csuite/messages/MessageErrorUI'
+import { SelectUI } from '../../csuite/select/SelectUI'
 import { useSt } from '../../state/stateContext'
 import { Prompt_Lora, Prompt_WeightedExpression } from '../grammar/grammar.practical'
 import { WidgetPromptUISt } from '../WidgetPromptUISt'
@@ -83,15 +84,43 @@ const LoraBoxUI = observer(function LoraBoxUI_(p: {
             <div //Header
                 tw='flex w-full h-10 border-b pb-2 items-center border-base-200 mb-2'
             >
-                {node.name}
+                <div //Join Lora selection and Delete Button
+                    tw='flex-1 join'
+                >
+                    <SelectUI<string>
+                        tw='join-item'
+                        value={() => loraName}
+                        options={() => st.schema.getLoras()}
+                        onOptionToggled={(val) => {
+                            node.nameNode?.setText(val)
+                            // p.uist.editorView?.dispatch({
+                            //     changes: {
+                            //         from: node.from,
+                            //         to: node.to,
+                            //         insert: val.indexOf(' ') > -1 ? `@"${val}"` : `@${val}`,
+                            //     },
+                            // })
+                        }}
+                        getLabelText={(t): string => t}
+                        getLabelUI={(v) => <div>{v}</div>}
+                    />
+                    <Button //
+                        tw='WIDGET-FIELD join-item w-8'
+                        size='xs'
+                        icon='mdiDeleteForever'
+                        onClick={p.onDelete}
+                    />
+                </div>
+                {/* {node.name}
                 <div tw='flex-0 flex-grow'></div>
                 <Button //
                     size='xs'
                     icon='mdiDeleteForever'
                     onClick={p.onDelete}
                     tw='h-full'
-                />
+                /> */}
             </div>
+            {/* {node.name} */}
             <div tw='flex gap-1 items-center'>
                 <div tw='w-32'>Model Strength</div>
                 <div tw='flex flex-grow items-center'>

src/router/Panel.tsx

@@ -53,7 +53,7 @@ export class Panel<Props> {
             ctx: ctx_global,
             action: () => {
                 const props: Props = this.p.def()
-                cushy.layout.open(this.name as any, props, 'left')
+                cushy.layout.open(this.name as any, props, { where: 'left' })
                 return Trigger.Success
             },
             icon: this.icon,
@@ -97,7 +97,7 @@ export class Panel<Props> {
                     icon: this.p.icon,
                     onPick: (): void => {
                         const props: Props = preset()
-                        cushy.layout.open(this.name as any, props, 'left')
+                        cushy.layout.open(this.name as any, props, { where: 'left' })
                     },
                 })
             })