Skip to content

Commit 9a5b80a

Browse files
huchenleihuchenlei
authored
[Refactor] Split SelectionToolbox buttons to components (#3902)
1 parent 985dab7 commit 9a5b80a

File tree

9 files changed

+149
-73
lines changed

9 files changed

+149
-73
lines changed

‎src/components/graph/SelectionToolbox.vue‎

Lines changed: 17 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -6,96 +6,41 @@
66
content: 'p-0 flex flex-row'
77
}"
88
>
9-
<ExecuteButton v-show="nodeSelected" />
10-
<ColorPickerButton v-show="nodeSelected || groupSelected" />
11-
<Button
12-
v-show="nodeSelected"
13-
v-tooltip.top="{
14-
value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Bypass.label'),
15-
showDelay: 1000
16-
}"
17-
severity="secondary"
18-
text
19-
data-testid="bypass-button"
20-
@click="
21-
() => commandStore.execute('Comfy.Canvas.ToggleSelectedNodes.Bypass')
22-
"
23-
>
24-
<template #icon>
25-
<i-game-icons:detour />
26-
</template>
27-
</Button>
28-
<Button
29-
v-show="nodeSelected || groupSelected"
30-
v-tooltip.top="{
31-
value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Pin.label'),
32-
showDelay: 1000
33-
}"
34-
severity="secondary"
35-
text
36-
icon="pi pi-thumbtack"
37-
@click="() => commandStore.execute('Comfy.Canvas.ToggleSelected.Pin')"
38-
/>
39-
<Button
40-
v-tooltip.top="{
41-
value: t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
42-
showDelay: 1000
43-
}"
44-
severity="danger"
45-
text
46-
icon="pi pi-trash"
47-
@click="() => commandStore.execute('Comfy.Canvas.DeleteSelectedItems')"
48-
/>
49-
<Button
50-
v-show="isRefreshable"
51-
severity="info"
52-
text
53-
icon="pi pi-refresh"
54-
@click="refreshSelected"
55-
/>
56-
<Button
9+
<ExecuteButton />
10+
<ColorPickerButton />
11+
<BypassButton />
12+
<PinButton />
13+
<DeleteButton />
14+
<RefreshButton />
15+
<ExtensionCommandButton
5716
v-for="command in extensionToolboxCommands"
5817
:key="command.id"
59-
v-tooltip.top="{
60-
value:
61-
st(`commands.${normalizeI18nKey(command.id)}.label`, '') || undefined,
62-
showDelay: 1000
63-
}"
64-
severity="secondary"
65-
text
66-
:icon="typeof command.icon === 'function' ? command.icon() : command.icon"
67-
@click="() => commandStore.execute(command.id)"
18+
:command="command"
6819
/>
6920
</Panel>
7021
</template>
7122

7223
<script setup lang="ts">
73-
import Button from 'primevue/button'
7424
import Panel from 'primevue/panel'
7525
import { computed } from 'vue'
7626
7727
import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
7828
import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
79-
import { useRefreshableSelection } from '@/composables/useRefreshableSelection'
80-
import { st, t } from '@/i18n'
8129
import { useExtensionService } from '@/services/extensionService'
82-
import { ComfyCommand, useCommandStore } from '@/stores/commandStore'
30+
import { type ComfyCommandImpl, useCommandStore } from '@/stores/commandStore'
8331
import { useCanvasStore } from '@/stores/graphStore'
84-
import { normalizeI18nKey } from '@/utils/formatUtil'
85-
import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
32+
33+
import BypassButton from './selectionToolbox/BypassButton.vue'
34+
import DeleteButton from './selectionToolbox/DeleteButton.vue'
35+
import ExtensionCommandButton from './selectionToolbox/ExtensionCommandButton.vue'
36+
import PinButton from './selectionToolbox/PinButton.vue'
37+
import RefreshButton from './selectionToolbox/RefreshButton.vue'
8638
8739
const commandStore = useCommandStore()
8840
const canvasStore = useCanvasStore()
8941
const extensionService = useExtensionService()
90-
const { isRefreshable, refreshSelected } = useRefreshableSelection()
91-
const nodeSelected = computed(() =>
92-
canvasStore.selectedItems.some(isLGraphNode)
93-
)
94-
const groupSelected = computed(() =>
95-
canvasStore.selectedItems.some(isLGraphGroup)
96-
)
9742
98-
const extensionToolboxCommands = computed<ComfyCommand[]>(() => {
43+
const extensionToolboxCommands = computed<ComfyCommandImpl[]>(() => {
9944
const commandIds = new Set<string>(
10045
canvasStore.selectedItems
10146
.map(
@@ -108,7 +53,7 @@ const extensionToolboxCommands = computed<ComfyCommand[]>(() => {
10853
)
10954
return Array.from(commandIds)
11055
.map((commandId) => commandStore.getCommand(commandId))
111-
.filter((command) => command !== undefined)
56+
.filter((command): command is ComfyCommandImpl => command !== undefined)
11257
})
11358
</script>
11459

‎src/components/graph/selectionToolbox/BypassButton.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<Button
3+
v-show="canvasStore.nodeSelected"
4+
v-tooltip.top="{
5+
value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Bypass.label'),
6+
showDelay: 1000
7+
}"
8+
severity="secondary"
9+
text
10+
data-testid="bypass-button"
11+
@click="
12+
() => commandStore.execute('Comfy.Canvas.ToggleSelectedNodes.Bypass')
13+
"
14+
>
15+
<template #icon>
16+
<i-game-icons:detour />
17+
</template>
18+
</Button>
19+
</template>
20+
21+
<script setup lang="ts">
22+
import Button from 'primevue/button'
23+
import { useI18n } from 'vue-i18n'
24+
25+
import { useCommandStore } from '@/stores/commandStore'
26+
import { useCanvasStore } from '@/stores/graphStore'
27+
28+
const { t } = useI18n()
29+
const commandStore = useCommandStore()
30+
const canvasStore = useCanvasStore()
31+
</script>

‎src/components/graph/selectionToolbox/ColorPickerButton.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<div class="relative">
33
<Button
4+
v-show="canvasStore.nodeSelected || canvasStore.groupSelected"
45
severity="secondary"
56
text
67
@click="() => (showColorPicker = !showColorPicker)"

‎src/components/graph/selectionToolbox/DeleteButton.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<Button
3+
v-tooltip.top="{
4+
value: t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
5+
showDelay: 1000
6+
}"
7+
severity="danger"
8+
text
9+
icon="pi pi-trash"
10+
@click="() => commandStore.execute('Comfy.Canvas.DeleteSelectedItems')"
11+
/>
12+
</template>
13+
14+
<script setup lang="ts">
15+
import Button from 'primevue/button'
16+
import { useI18n } from 'vue-i18n'
17+
18+
import { useCommandStore } from '@/stores/commandStore'
19+
20+
const { t } = useI18n()
21+
const commandStore = useCommandStore()
22+
</script>

‎src/components/graph/selectionToolbox/ExecuteButton.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<Button
3+
v-show="canvasStore.nodeSelected"
34
v-tooltip.top="{
45
value: isDisabled
56
? t('selectionToolbox.executeButton.disabledTooltip')

‎src/components/graph/selectionToolbox/ExtensionCommandButton.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<Button
3+
v-tooltip.top="{
4+
value:
5+
st(`commands.${normalizeI18nKey(command.id)}.label`, '') || undefined,
6+
showDelay: 1000
7+
}"
8+
severity="secondary"
9+
text
10+
:icon="typeof command.icon === 'function' ? command.icon() : command.icon"
11+
@click="() => commandStore.execute(command.id)"
12+
/>
13+
</template>
14+
15+
<script setup lang="ts">
16+
import Button from 'primevue/button'
17+
18+
import { st } from '@/i18n'
19+
import { ComfyCommand, useCommandStore } from '@/stores/commandStore'
20+
import { normalizeI18nKey } from '@/utils/formatUtil'
21+
22+
defineProps<{
23+
command: ComfyCommand
24+
}>()
25+
26+
const commandStore = useCommandStore()
27+
</script>

‎src/components/graph/selectionToolbox/PinButton.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<Button
3+
v-show="canvasStore.nodeSelected || canvasStore.groupSelected"
4+
v-tooltip.top="{
5+
value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Pin.label'),
6+
showDelay: 1000
7+
}"
8+
severity="secondary"
9+
text
10+
icon="pi pi-thumbtack"
11+
@click="() => commandStore.execute('Comfy.Canvas.ToggleSelected.Pin')"
12+
/>
13+
</template>
14+
15+
<script setup lang="ts">
16+
import Button from 'primevue/button'
17+
import { useI18n } from 'vue-i18n'
18+
19+
import { useCommandStore } from '@/stores/commandStore'
20+
import { useCanvasStore } from '@/stores/graphStore'
21+
22+
const { t } = useI18n()
23+
const commandStore = useCommandStore()
24+
const canvasStore = useCanvasStore()
25+
</script>

‎src/components/graph/selectionToolbox/RefreshButton.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<Button
3+
v-show="isRefreshable"
4+
severity="info"
5+
text
6+
icon="pi pi-refresh"
7+
@click="refreshSelected"
8+
/>
9+
</template>
10+
11+
<script setup lang="ts">
12+
import Button from 'primevue/button'
13+
14+
import { useRefreshableSelection } from '@/composables/useRefreshableSelection'
15+
16+
const { isRefreshable, refreshSelected } = useRefreshableSelection()
17+
</script>

‎src/stores/graphStore.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import type { LGraphCanvas, LGraphGroup, LGraphNode } from '@comfyorg/litegraph'
22
import type { Positionable } from '@comfyorg/litegraph/dist/interfaces'
33
import { defineStore } from 'pinia'
4-
import { type Raw, markRaw, ref, shallowRef } from 'vue'
4+
import { type Raw, computed, markRaw, ref, shallowRef } from 'vue'
5+
6+
import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
57

68
export const useTitleEditorStore = defineStore('titleEditor', () => {
79
const titleEditorTarget = shallowRef<LGraphNode | LGraphGroup | null>(null)
@@ -27,6 +29,9 @@ export const useCanvasStore = defineStore('canvas', () => {
2729
selectedItems.value = items.map((item) => markRaw(item))
2830
}
2931

32+
const nodeSelected = computed(() => selectedItems.value.some(isLGraphNode))
33+
const groupSelected = computed(() => selectedItems.value.some(isLGraphGroup))
34+
3035
const getCanvas = () => {
3136
if (!canvas.value) throw new Error('getCanvas: canvas is null')
3237
return canvas.value
@@ -35,6 +40,8 @@ export const useCanvasStore = defineStore('canvas', () => {
3540
return {
3641
canvas,
3742
selectedItems,
43+
nodeSelected,
44+
groupSelected,
3845
updateSelectedItems,
3946
getCanvas
4047
}

0 commit comments

Comments
 (0)