blsmedia/bot
2
0
Fork 0
Code Activity

🚸 (editor) Enable groups clipboard accross tabs

Browse Source
This commit is contained in:
Baptiste Arnaud
2024-02-12 09:10:04 +01:00
parent a0ab3b4d82
commit e05580a5de
1 changed files with 73 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
apps/builder/src/features/graph/hooks/useGroupsStore.ts
View File

@ -1,6 +1,7 @@
import { createWithEqualityFn } from 'zustand/traditional' import { createWithEqualityFn } from 'zustand/traditional'
import { Coordinates, CoordinatesMap } from '../types' import { Coordinates, CoordinatesMap } from '../types'
import { Edge, Group, GroupV6 } from '@typebot.io/schemas' import { Edge, Group, GroupV6 } from '@typebot.io/schemas'
import { persist } from 'zustand/middleware'
type Store = { type Store = {
focusedGroups: string[] focusedGroups: string[]
@ -19,69 +20,77 @@ type Store = {
setIsDraggingGraph: (isDragging: boolean) => void setIsDraggingGraph: (isDragging: boolean) => void
} }
export const useGroupsStore = createWithEqualityFn<Store>((set, get) => ({ export const useGroupsStore = createWithEqualityFn<Store>()(
focusedGroups: [], persist(
groupsCoordinates: undefined, (set, get) => ({
groupsInClipboard: undefined, focusedGroups: [],
isDraggingGraph: false, groupsCoordinates: undefined,
getGroupsCoordinates: () => get().groupsCoordinates, groupsInClipboard: undefined,
focusGroup: (groupId, isShiftKeyPressed) => isDraggingGraph: false,
set((state) => ({ getGroupsCoordinates: () => get().groupsCoordinates,
focusedGroups: isShiftKeyPressed focusGroup: (groupId, isShiftKeyPressed) =>
? state.focusedGroups.includes(groupId) set((state) => ({
? state.focusedGroups.filter((id) => id !== groupId) focusedGroups: isShiftKeyPressed
: [...state.focusedGroups, groupId] ? state.focusedGroups.includes(groupId)
: [groupId], ? state.focusedGroups.filter((id) => id !== groupId)
})), : [...state.focusedGroups, groupId]
blurGroups: () => set({ focusedGroups: [] }), : [groupId],
moveFocusedGroups: (delta) => })),
set(({ focusedGroups, groupsCoordinates }) => ({ blurGroups: () => set({ focusedGroups: [] }),
groupsCoordinates: groupsCoordinates moveFocusedGroups: (delta) =>
? { set(({ focusedGroups, groupsCoordinates }) => ({
...groupsCoordinates, groupsCoordinates: groupsCoordinates
...focusedGroups.reduce( ? {
(coords, groupId) => ({ ...groupsCoordinates,
...coords, ...focusedGroups.reduce(
[groupId]: { (coords, groupId) => ({
x: groupsCoordinates[groupId].x + delta.x, ...coords,
y: groupsCoordinates[groupId].y + delta.y, [groupId]: {
}, x: groupsCoordinates[groupId].x + delta.x,
}), y: groupsCoordinates[groupId].y + delta.y,
groupsCoordinates },
), }),
} groupsCoordinates
: undefined, ),
})), }
setFocusedGroups: (groupIds) => set({ focusedGroups: groupIds }), : undefined,
setGroupsCoordinates: (groups) => })),
set({ setFocusedGroups: (groupIds) => set({ focusedGroups: groupIds }),
groupsCoordinates: groups setGroupsCoordinates: (groups) =>
? groups.reduce( set({
(coords, group) => ({ groupsCoordinates: groups
...coords, ? groups.reduce(
[group.id]: { (coords, group) => ({
x: group.graphCoordinates.x, ...coords,
y: group.graphCoordinates.y, [group.id]: {
}, x: group.graphCoordinates.x,
}), y: group.graphCoordinates.y,
{} },
) }),
: undefined, {}
}), )
updateGroupCoordinates: (groupId, newCoord) => { : undefined,
set((state) => ({ }),
groupsCoordinates: { updateGroupCoordinates: (groupId, newCoord) => {
...state.groupsCoordinates, set((state) => ({
[groupId]: newCoord, groupsCoordinates: {
}, ...state.groupsCoordinates,
})) [groupId]: newCoord,
}, },
copyGroups: (groups, edges) => }))
set({
groupsInClipboard: {
groups,
edges,
}, },
copyGroups: (groups, edges) =>
set({
groupsInClipboard: {
groups,
edges,
},
}),
setIsDraggingGraph: (isDragging) => set({ isDraggingGraph: isDragging }),
}), }),
setIsDraggingGraph: (isDragging) => set({ isDraggingGraph: isDragging }), {
})) name: 'store',
partialize: (state) => ({ groupsInClipboard: state.groupsInClipboard }),
}
)
)