diff --git a/web/app/components/workflow-app/components/user-cursors-state.ts b/web/app/components/workflow-app/components/user-cursors-state.ts new file mode 100644 index 0000000000..de422de393 --- /dev/null +++ b/web/app/components/workflow-app/components/user-cursors-state.ts @@ -0,0 +1,11 @@ +import { create } from 'zustand' + +type UserCursorsState = { + showUserCursors: boolean + toggleUserCursors: () => void +} + +export const useUserCursorsState = create(set => ({ + showUserCursors: true, + toggleUserCursors: () => set(state => ({ showUserCursors: !state.showUserCursors })), +})) diff --git a/web/app/components/workflow-app/components/workflow-main.tsx b/web/app/components/workflow-app/components/workflow-main.tsx index 08ab039c50..3e9f494694 100644 --- a/web/app/components/workflow-app/components/workflow-main.tsx +++ b/web/app/components/workflow-app/components/workflow-main.tsx @@ -13,6 +13,7 @@ import { WorkflowWithInnerContext } from '@/app/components/workflow' import type { WorkflowProps } from '@/app/components/workflow' import WorkflowChildren from './workflow-children' import UserCursors from '@/app/components/workflow/collaboration/components/user-cursors' +import { useUserCursorsState } from './user-cursors-state' import { useAvailableNodesMetaData, @@ -46,8 +47,9 @@ const WorkflowMain = ({ const reactFlow = useReactFlow() const store = useStoreApi() - const { startCursorTracking, stopCursorTracking, onlineUsers, cursors, isConnected } = useCollaboration(appId, store) + const { startCursorTracking, stopCursorTracking, onlineUsers, cursors, isConnected } = useCollaboration(appId || '', store) const [myUserId, setMyUserId] = useState(null) + const { showUserCursors } = useUserCursorsState() useEffect(() => { if (isConnected) @@ -300,7 +302,7 @@ const WorkflowMain = ({ > - + ) } diff --git a/web/app/components/workflow/operator/index.tsx b/web/app/components/workflow/operator/index.tsx index 544d088022..e8d4b42a5e 100644 --- a/web/app/components/workflow/operator/index.tsx +++ b/web/app/components/workflow/operator/index.tsx @@ -5,6 +5,7 @@ import ZoomInOut from './zoom-in-out' import VariableTrigger from '../variable-inspect/trigger' import VariableInspectPanel from '../variable-inspect' import { useStore } from '../store' +import { useUserCursorsState } from '@/app/components/workflow-app/components/user-cursors-state' export type OperatorProps = { handleUndo: () => void @@ -14,6 +15,7 @@ export type OperatorProps = { const Operator = ({ handleUndo, handleRedo }: OperatorProps) => { const bottomPanelRef = useRef(null) const [showMiniMap, setShowMiniMap] = useState(true) + const { showUserCursors, toggleUserCursors } = useUserCursorsState() const handleToggleMiniMap = useCallback(() => { setShowMiniMap(prev => !prev) @@ -79,6 +81,8 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => { diff --git a/web/app/components/workflow/operator/zoom-in-out.tsx b/web/app/components/workflow/operator/zoom-in-out.tsx index b1ad1065e9..c6f0207fa3 100644 --- a/web/app/components/workflow/operator/zoom-in-out.tsx +++ b/web/app/components/workflow/operator/zoom-in-out.tsx @@ -39,17 +39,22 @@ enum ZoomType { zoomTo75 = 'zoomTo75', zoomTo100 = 'zoomTo100', zoomTo200 = 'zoomTo200', + toggleUserCursors = 'toggleUserCursors', toggleMiniMap = 'toggleMiniMap', } type ZoomInOutProps = { showMiniMap?: boolean onToggleMiniMap?: () => void + showUserCursors?: boolean + onToggleUserCursors?: () => void } const ZoomInOut: FC = ({ showMiniMap = true, onToggleMiniMap, + showUserCursors = true, + onToggleUserCursors, }) => { const { t } = useTranslation() const { @@ -94,6 +99,10 @@ const ZoomInOut: FC = ({ }, ], [ + { + key: ZoomType.toggleUserCursors, + text: t('workflow.operator.showUserCursors'), + }, { key: ZoomType.toggleMiniMap, text: t('workflow.operator.showMiniMap'), @@ -123,6 +132,11 @@ const ZoomInOut: FC = ({ if (type === ZoomType.zoomTo200) zoomTo(2) + if (type === ZoomType.toggleUserCursors) { + onToggleUserCursors?.() + return + } + if (type === ZoomType.toggleMiniMap) { onToggleMiniMap?.() return @@ -211,10 +225,16 @@ const ZoomInOut: FC = ({ options.map(option => (
handleZoom(option.key)} >
+ {option.key === ZoomType.toggleUserCursors && showUserCursors && ( + + )} + {option.key === ZoomType.toggleUserCursors && !showUserCursors && ( +
+ )} {option.key === ZoomType.toggleMiniMap && showMiniMap && ( )} diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts index 35d6001969..210d700c38 100644 --- a/web/i18n/en-US/workflow.ts +++ b/web/i18n/en-US/workflow.ts @@ -326,6 +326,7 @@ const translation = { zoomTo50: 'Zoom to 50%', zoomTo100: 'Zoom to 100%', zoomToFit: 'Zoom to Fit', + showUserCursors: 'Collaborator cursors', showMiniMap: 'Minimap', alignNodes: 'Align Nodes', alignLeft: 'Left',