canvas tabs added

Author: Attila Cseh

invokeai/frontend/web/src/features/controlLayers/store/selectors.ts

@@ -21,6 +21,17 @@ import { assert } from 'tsafe';
  */
 const selectCanvasSlice = (state: RootState) => state.canvas.present;
 
+/**
+ * Selects the canvases
+ */
+export const selectCanvases = createSelector(selectCanvasSlice, (state) =>
+  state.canvases.map((canvas) => ({
+    ...canvas,
+    isSelected: canvas.id === state.selectedCanvasId,
+    canDelete: state.canvases.length > 1,
+  }))
+);
+
 /**
  * Selects the selected canvas
  */

invokeai/frontend/web/src/features/ui/layouts/CanvasTabEditableTitle.tsx

@@ -0,0 +1,69 @@
+import { Flex, IconButton, Input, Text } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { useBoolean } from 'common/hooks/useBoolean';
+import { useEditable } from 'common/hooks/useEditable';
+import { canvasNameChanged } from 'features/controlLayers/store/canvasSlice';
+import { memo, useCallback, useRef } from 'react';
+import { PiPencilBold } from 'react-icons/pi';
+
+interface CanvasTabEditableTitleProps {
+  id: string;
+  name: string;
+  isSelected: boolean;
+}
+
+export const CanvasTabEditableTitle = memo(({ id, name, isSelected }: CanvasTabEditableTitleProps) => {
+  const dispatch = useAppDispatch();
+  const isHovering = useBoolean(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const onChange = useCallback(() => {
+    dispatch(canvasNameChanged({ id, name }));
+  }, [dispatch, id, name]);
+
+  const editable = useEditable({
+    value: name,
+    defaultValue: name,
+    onChange,
+    inputRef,
+    onStartEditing: isHovering.setTrue,
+  });
+
+  if (!editable.isEditing) {
+    return (
+      <Flex alignItems="center" gap={3} onMouseOver={isHovering.setTrue} onMouseOut={isHovering.setFalse}>
+        <Text
+          size="sm"
+          fontWeight="semibold"
+          userSelect="none"
+          color={isSelected ? 'base.100' : 'base.300'}
+          onDoubleClick={editable.startEditing}
+          cursor="text"
+          noOfLines={1}
+        >
+          {editable.value}
+        </Text>
+        {isHovering.isTrue && (
+          <IconButton
+            aria-label="edit name"
+            icon={<PiPencilBold />}
+            size="sm"
+            variant="ghost"
+            onClick={editable.startEditing}
+          />
+        )}
+      </Flex>
+    );
+  }
+
+  return (
+    <Input
+      ref={inputRef}
+      {...editable.inputProps}
+      variant="outline"
+      textAlign="center"
+      _focusVisible={{ borderWidth: 1, borderColor: 'invokeBlueAlpha.400', borderRadius: 'base' }}
+    />
+  );
+});
+CanvasTabEditableTitle.displayName = 'CanvasTabEditableTitle';

invokeai/frontend/web/src/features/ui/layouts/CanvasTabs.tsx

@@ -0,0 +1,123 @@
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Box, Flex, IconButton } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { canvasAdded, canvasDeleted, canvasSelected } from 'features/controlLayers/store/canvasSlice';
+import { selectCanvases } from 'features/controlLayers/store/selectors';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiPlusBold, PiXBold } from 'react-icons/pi';
+
+import { CanvasTabEditableTitle } from './CanvasTabEditableTitle';
+
+const _hover: SystemStyleObject = {
+  bg: 'base.650',
+};
+
+const AddCanvasButton = memo(() => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+
+  const onClick = useCallback(() => {
+    dispatch(canvasAdded({ isSelected: true }));
+  }, [dispatch]);
+
+  return (
+    <IconButton
+      size="sm"
+      onClick={onClick}
+      aria-label={t('canvas.addNewCanvas')}
+      tooltip={t('canvas.addNewCanvas')}
+      icon={<PiPlusBold />}
+      bg="base.650"
+      w={8}
+      h={8}
+    />
+  );
+});
+AddCanvasButton.displayName = 'AddCanvasButton';
+
+interface CloseCanvasButtonProps {
+  id: string;
+  canDelete: boolean;
+}
+
+const CloseCanvasButton = memo(({ id, canDelete }: CloseCanvasButtonProps) => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+
+  const onClick = useCallback(() => {
+    dispatch(canvasDeleted({ id }));
+  }, [dispatch, id]);
+
+  return (
+    <IconButton
+      size="sm"
+      onClick={onClick}
+      aria-label={t('canvas.closeCanvas')}
+      tooltip={t('canvas.closeCanvas')}
+      icon={<PiXBold />}
+      disabled={!canDelete}
+      variant="link"
+      w={8}
+      h={8}
+    />
+  );
+});
+CloseCanvasButton.displayName = 'CloseCanvasButton';
+
+interface CanvasTabProps {
+  id: string;
+  name: string;
+  isSelected: boolean;
+  canDelete: boolean;
+}
+
+const CanvasTab = memo(({ id, name, isSelected, canDelete }: CanvasTabProps) => {
+  const dispatch = useAppDispatch();
+
+  const onClick = useCallback(() => {
+    if (!isSelected) {
+      dispatch(canvasSelected({ id }));
+    }
+  }, [dispatch, id, isSelected]);
+
+  return (
+    <Box position="relative" w="full" h={8}>
+      <Flex
+        onClick={onClick}
+        alignItems="center"
+        borderRadius="base"
+        cursor="pointer"
+        py={1}
+        ps={1}
+        pe={1}
+        gap={4}
+        bg={isSelected ? 'base.650' : 'base.850'}
+        _hover={_hover}
+        w="full"
+        h="full"
+      >
+        <Flex flex={1} justifyContent="center">
+          <CanvasTabEditableTitle id={id} name={name} isSelected={isSelected} />
+        </Flex>
+        <Flex justifyContent="flex-end">
+          <CloseCanvasButton id={id} canDelete={canDelete} />
+        </Flex>
+      </Flex>
+    </Box>
+  );
+});
+CanvasTab.displayName = 'CanvasTab';
+
+export const CanvasTabs = () => {
+  const canvases = useAppSelector(selectCanvases);
+
+  return (
+    <Flex w="full" gap={2} alignItems="center" px={2}>
+      <AddCanvasButton />
+      {canvases.map(({ id, name, isSelected, canDelete }) => (
+        <CanvasTab key={id} id={id} name={name} isSelected={isSelected} canDelete={canDelete} />
+      ))}
+    </Flex>
+  );
+};

invokeai/frontend/web/src/features/ui/layouts/CanvasWorkspacePanel.tsx

@@ -22,6 +22,7 @@ import { selectCanvasSessionId } from 'features/controlLayers/store/canvasStagin
 import { memo, useCallback } from 'react';
 import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';
 
+import { CanvasTabs } from './CanvasTabs';
 import { StagingArea } from './StagingArea';
 
 const MenuContent = memo(() => {
@@ -74,6 +75,7 @@ export const CanvasWorkspacePanel = memo(() => {
           <CanvasToolbar />
         </CanvasManagerProviderGate>
         <Divider />
+        <CanvasTabs />
         <ContextMenu<HTMLDivElement> renderMenu={renderMenu} withLongPress={false}>
           {(ref) => (
             <Flex ref={ref} sx={canvasBgSx} data-dynamic-grid={dynamicGrid}>