feat(free-demo): move out container button

apps/demo-free-layout/src/form-components/form-header/index.tsx

@@ -1,10 +1,14 @@
+import { useCallback, useState, type MouseEvent } from 'react';
+
 import {
   Command,
   Field,
   FieldRenderProps,
   useClientContext,
   useNodeRender,
+  useService,
 } from '@flowgram.ai/free-layout-editor';
+import { NodeIntoContainerService } from '@flowgram.ai/free-container-plugin';
 import { IconButton, Dropdown, Typography } from '@douyinfe/semi-ui';
 import { IconMore } from '@douyinfe/semi-icons';
 
@@ -15,30 +19,64 @@ import { Header, Operators, Title } from './styles';
 
 const { Text } = Typography;
 
-function DropdownContent() {
+function DropdownButton() {
+  const [key, setKey] = useState(0);
   const { node, deleteNode } = useNodeRender();
   const clientContext = useClientContext();
   const registry = node.getNodeRegistry<FlowNodeRegistry>();
-  const handleCopy = () => {
+  const nodeIntoContainerService = useService<NodeIntoContainerService>(NodeIntoContainerService);
+  const canMoveOut = nodeIntoContainerService.canMoveOutContainer(node);
+
+  const rerenderMenu = useCallback(() => {
+    setKey((prevKey) => prevKey + 1);
+  }, []);
+
+  const handleMoveOut = useCallback(
+    (e: MouseEvent) => {
+      e.stopPropagation();
+      nodeIntoContainerService.moveOutContainer({ node });
+      nodeIntoContainerService.removeNodeLines(node);
+      requestAnimationFrame(rerenderMenu);
+    },
+    [nodeIntoContainerService, node, rerenderMenu]
+  );
+
+  const handleCopy = useCallback(() => {
     clientContext.playground.commandService.executeCommand(Command.Default.COPY, node);
-  };
+  }, [clientContext, node]);
   return (
-    <Dropdown.Menu>
-      <Dropdown.Item onClick={handleCopy} disabled={registry.meta!.copyDisable === true}>
-        Copy
-      </Dropdown.Item>
-      <Dropdown.Item
-        onClick={deleteNode}
-        disabled={!!(registry.canDelete?.(clientContext, node) || registry.meta!.deleteDisable)}
-      >
-        Delete
-      </Dropdown.Item>
-    </Dropdown.Menu>
+    <Dropdown
+      trigger="hover"
+      position="bottomRight"
+      onVisibleChange={rerenderMenu}
+      render={
+        <Dropdown.Menu key={key}>
+          {canMoveOut && <Dropdown.Item onClick={handleMoveOut}>Move out</Dropdown.Item>}
+          <Dropdown.Item onClick={handleCopy} disabled={registry.meta!.copyDisable === true}>
+            Copy
+          </Dropdown.Item>
+          <Dropdown.Item
+            onClick={deleteNode}
+            disabled={!!(registry.canDelete?.(clientContext, node) || registry.meta!.deleteDisable)}
+          >
+            Delete
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      }
+    >
+      <IconButton
+        color="secondary"
+        size="small"
+        theme="borderless"
+        icon={<IconMore />}
+        onClick={(e) => e.stopPropagation()}
+      />
+    </Dropdown>
   );
 }
 
 export function FormHeader() {
-  const { node, expanded, toggleExpand, readonly } = useNodeRender();
+  const { node, readonly } = useNodeRender();
 
   return (
     <Header>
@@ -55,15 +93,7 @@ export function FormHeader() {
       </Title>
       {readonly ? undefined : (
         <Operators>
-          <Dropdown trigger="hover" position="bottomRight" render={<DropdownContent />}>
-            <IconButton
-              color="secondary"
-              size="small"
-              theme="borderless"
-              icon={<IconMore />}
-              onClick={(e) => e.stopPropagation()}
-            />
-          </Dropdown>
+          <DropdownButton />
         </Operators>
       )}
     </Header>