Added tooltips for Lasso's attempted to do a Chinese one too, I'm so sorry it it is wrong! @AmazingRain

packages/fossflow-lib/src/components/LassoHintTooltip/LassoHintTooltip.tsx

@@ -0,0 +1,113 @@
+import React, { useState, useEffect } from 'react';
+import { Box, IconButton, Paper, Typography, useTheme } from '@mui/material';
+import { Close as CloseIcon } from '@mui/icons-material';
+import { useUiStateStore } from 'src/stores/uiStateStore';
+import { useTranslation } from 'src/stores/localeStore';
+
+const STORAGE_KEY = 'fossflow_lasso_hint_dismissed';
+
+interface Props {
+  toolMenuRef?: React.RefObject<HTMLElement>;
+}
+
+export const LassoHintTooltip = ({ toolMenuRef }: Props) => {
+  const { t } = useTranslation('lassoHintTooltip');
+  const theme = useTheme();
+  const mode = useUiStateStore((state) => state.mode);
+  const [isDismissed, setIsDismissed] = useState(true);
+  const [position, setPosition] = useState({ top: 16, right: 16 });
+
+  useEffect(() => {
+    // Check if the hint has been dismissed before
+    const dismissed = localStorage.getItem(STORAGE_KEY);
+    if (dismissed !== 'true') {
+      setIsDismissed(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    // Calculate position based on toolbar
+    if (toolMenuRef?.current) {
+      const toolMenuRect = toolMenuRef.current.getBoundingClientRect();
+      // Position tooltip below the toolbar with some spacing
+      setPosition({
+        top: toolMenuRect.bottom + 16,
+        right: 16
+      });
+    } else {
+      // Fallback position if no toolbar ref
+      const appPadding = theme.customVars?.appPadding || { x: 16, y: 16 };
+      setPosition({
+        top: appPadding.y + 500, // Approximate toolbar height
+        right: appPadding.x
+      });
+    }
+  }, [toolMenuRef, theme]);
+
+  const handleDismiss = () => {
+    setIsDismissed(true);
+    localStorage.setItem(STORAGE_KEY, 'true');
+  };
+
+  // Only show when in LASSO or FREEHAND_LASSO mode
+  if (isDismissed || (mode.type !== 'LASSO' && mode.type !== 'FREEHAND_LASSO')) {
+    return null;
+  }
+
+  const isFreehandMode = mode.type === 'FREEHAND_LASSO';
+
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        top: position.top,
+        right: position.right,
+        zIndex: 1300, // Above most UI elements
+        maxWidth: 320
+      }}
+    >
+      <Paper
+        elevation={4}
+        sx={{
+          p: 2,
+          pr: 5,
+          backgroundColor: 'background.paper',
+          borderLeft: '4px solid',
+          borderLeftColor: 'primary.main'
+        }}
+      >
+        <IconButton
+          size="small"
+          onClick={handleDismiss}
+          sx={{
+            position: 'absolute',
+            right: 4,
+            top: 4
+          }}
+        >
+          <CloseIcon fontSize="small" />
+        </IconButton>
+
+        <Typography variant="subtitle2" gutterBottom sx={{ fontWeight: 600 }}>
+          {isFreehandMode ? t('tipFreehandLasso') : t('tipLasso')}
+        </Typography>
+
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+          {isFreehandMode ? (
+            <>
+              <strong>{t('freehandDragStart')}</strong> {t('freehandDragMiddle')} <strong>{t('freehandDragEnd')}</strong> {t('freehandComplete')}
+            </>
+          ) : (
+            <>
+              <strong>{t('lassoDragStart')}</strong> {t('lassoDragEnd')}
+            </>
+          )}
+        </Typography>
+
+        <Typography variant="body2" color="text.secondary">
+          {t('moveStart')} <strong>{t('moveMiddle')}</strong> {t('moveEnd')}
+        </Typography>
+      </Paper>
+    </Box>
+  );
+};

packages/fossflow-lib/src/components/UiOverlay/UiOverlay.tsx

@@ -21,6 +21,7 @@ import { SettingsDialog } from '../SettingsDialog/SettingsDialog';
 import { ConnectorHintTooltip } from '../ConnectorHintTooltip/ConnectorHintTooltip';
 import { ConnectorEmptySpaceTooltip } from '../ConnectorEmptySpaceTooltip/ConnectorEmptySpaceTooltip';
 import { ImportHintTooltip } from '../ImportHintTooltip/ImportHintTooltip';
+import { LassoHintTooltip } from '../LassoHintTooltip/LassoHintTooltip';
 
 const ToolsEnum = {
   MAIN_MENU: 'MAIN_MENU',
@@ -245,10 +246,11 @@ export const UiOverlay = () => {
 
       {dialog === DialogTypeEnum.SETTINGS && <SettingsDialog />}
 
-      {/* Show connector hint tooltip only in editable mode */}
+      {/* Show hint tooltips only in editable mode */}
       {editorMode === EditorModeEnum.EDITABLE && <ConnectorHintTooltip toolMenuRef={toolMenuRef} />}
       {editorMode === EditorModeEnum.EDITABLE && <ConnectorEmptySpaceTooltip />}
       {editorMode === EditorModeEnum.EDITABLE && <ImportHintTooltip />}
+      {editorMode === EditorModeEnum.EDITABLE && <LassoHintTooltip toolMenuRef={toolMenuRef} />}
 
       <SceneLayer>
         <Box ref={contextMenuAnchorRef} />

packages/fossflow-lib/src/i18n/en-US.ts

@@ -80,6 +80,19 @@ const locale: LocaleProps = {
     rerouteMiddle: "left-click",
     rerouteEnd: "on any point along the connector line and drag to create or move anchor points."
   },
+  lassoHintTooltip: {
+    tipLasso: "Tip: Lasso Selection",
+    tipFreehandLasso: "Tip: Freehand Lasso Selection",
+    lassoDragStart: "Click and drag",
+    lassoDragEnd: "to draw a rectangular selection box around items you want to select.",
+    freehandDragStart: "Click and drag",
+    freehandDragMiddle: "to draw a",
+    freehandDragEnd: "freeform shape",
+    freehandComplete: "around items. Release to select all items inside the shape.",
+    moveStart: "Once selected,",
+    moveMiddle: "click inside the selection",
+    moveEnd: "and drag to move all selected items together."
+  },
   importHintTooltip: {
     title: "Import Diagrams",
     instructionStart: "To import diagrams, click the",

packages/fossflow-lib/src/i18n/zh-CN.ts

@@ -80,6 +80,19 @@ const locale: LocaleProps = {
     rerouteMiddle: "左键点击",
     rerouteEnd: "连接器线上的任何点并拖拽以创建或移动锚点。"
   },
+  lassoHintTooltip: {
+    tipLasso: "提示：套索选择",
+    tipFreehandLasso: "提示：自由套索选择",
+    lassoDragStart: "点击并拖拽",
+    lassoDragEnd: "以绘制矩形选择框来选中您想选择的项目。",
+    freehandDragStart: "点击并拖拽",
+    freehandDragMiddle: "以绘制",
+    freehandDragEnd: "自由形状",
+    freehandComplete: "围绕项目。释放以选择形状内的所有项目。",
+    moveStart: "选择后，",
+    moveMiddle: "在选择区域内点击",
+    moveEnd: "并拖拽以一起移动所有选中的项目。"
+  },
   importHintTooltip: {
     title: "导入图表",
     instructionStart: "要导入图表，请点击左上角的",

packages/fossflow-lib/src/types/isoflowProps.ts

@@ -87,6 +87,19 @@ export interface LocaleProps {
     rerouteMiddle: string;
     rerouteEnd: string;
   };
+  lassoHintTooltip: {
+    tipLasso: string;
+    tipFreehandLasso: string;
+    lassoDragStart: string;
+    lassoDragEnd: string;
+    freehandDragStart: string;
+    freehandDragMiddle: string;
+    freehandDragEnd: string;
+    freehandComplete: string;
+    moveStart: string;
+    moveMiddle: string;
+    moveEnd: string;
+  };
   importHintTooltip: {
     title: string;
     instructionStart: string;