fix(free-demo): drag node to container selected style (bytedance#134)

Author: louisyoungx

apps/demo-free-layout/src/components/base-node/index.tsx

@@ -4,7 +4,7 @@ import { FlowNodeEntity, useNodeRender } from '@flowgram.ai/free-layout-editor';
 import { ConfigProvider } from '@douyinfe/semi-ui';
 
 import { NodeRenderContext } from '../../context';
-import { BaseNodeStyle, ErrorIcon } from './styles';
+import { ErrorIcon } from './styles';
 import { NodeWrapper } from './node-wrapper';
 
 export const BaseNode = ({ node }: { node: FlowNodeEntity }) => {
@@ -30,15 +30,7 @@ export const BaseNode = ({ node }: { node: FlowNodeEntity }) => {
       <NodeRenderContext.Provider value={nodeRender}>
         <NodeWrapper>
           {form?.state.invalid && <ErrorIcon />}
-          <BaseNodeStyle
-            className={nodeRender.selected ? 'selected' : ''}
-            style={{
-              borderRadius: 8,
-              outline: form?.state.invalid ? '1px solid red' : 'none',
-            }}
-          >
-            {form?.render()}
-          </BaseNodeStyle>
+          {form?.render()}
         </NodeWrapper>
       </NodeRenderContext.Provider>
     </ConfigProvider>

apps/demo-free-layout/src/components/base-node/node-wrapper.tsx

@@ -1,13 +1,15 @@
 import React, { useState, useContext } from 'react';
 
 import { WorkflowPortRender } from '@flowgram.ai/free-layout-editor';
+import { useClientContext } from '@flowgram.ai/free-layout-editor';
 
 import { useNodeRenderContext } from '../../hooks';
 import { SidebarContext } from '../../context';
-// import { scrollToView } from './utils'
-// import { useClientContext } from '@flowgram.ai/free-layout-editor';
+import { scrollToView } from './utils';
+import { NodeWrapperStyle } from './styles';
 
 export interface NodeWrapperProps {
+  isScrollToView?: boolean;
   children: React.ReactNode;
 }
 
@@ -16,15 +18,18 @@ export interface NodeWrapperProps {
  * 用于节点的拖拽/点击事件和点位渲染
  */
 export const NodeWrapper: React.FC<NodeWrapperProps> = (props) => {
+  const { children, isScrollToView = false } = props;
   const nodeRender = useNodeRenderContext();
   const { selected, startDrag, ports, selectNode, nodeRef, onFocus, onBlur } = nodeRender;
   const [isDragging, setIsDragging] = useState(false);
   const sidebar = useContext(SidebarContext);
-  // const ctx = useClientContext()
+  const form = nodeRender.form;
+  const ctx = useClientContext();
 
   return (
     <>
-      <div
+      <NodeWrapperStyle
+        className={selected ? 'selected' : ''}
         ref={nodeRef}
         draggable
         onDragStart={(e) => {
@@ -35,18 +40,23 @@ export const NodeWrapper: React.FC<NodeWrapperProps> = (props) => {
           selectNode(e);
           if (!isDragging) {
             sidebar.setNodeRender(nodeRender);
-            // 可选：如果需要让节点滚动到画布中间加上这个
-            // Optional: Add this if you want the node to scroll to the middle of the canvas
-            // scrollToView(ctx, nodeRender.node)
+            // 可选：将 isScrollToView 设为 true，可以让节点选中后滚动到画布中间
+            // Optional: Set isScrollToView to true to scroll the node to the center of the canvas after it is selected.
+            if (isScrollToView) {
+              scrollToView(ctx, nodeRender.node);
+            }
           }
         }}
         onMouseUp={() => setIsDragging(false)}
         onFocus={onFocus}
         onBlur={onBlur}
         data-node-selected={String(selected)}
+        style={{
+          outline: form?.state.invalid ? '1px solid red' : 'none',
+        }}
       >
-        {props.children}
-      </div>
+        {children}
+      </NodeWrapperStyle>
       {ports.map((p) => (
         <WorkflowPortRender key={p.id} entity={p} />
       ))}

apps/demo-free-layout/src/components/base-node/styles.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { IconInfoCircle } from '@douyinfe/semi-icons';
 
-export const BaseNodeStyle = styled.div`
+export const NodeWrapperStyle = styled.div`
   align-items: flex-start;
   background-color: #fff;
   border: 1px solid rgba(6, 7, 9, 0.15);
@@ -13,7 +13,7 @@ export const BaseNodeStyle = styled.div`
   position: relative;
   min-width: 360px;
   width: 100%;
-  height: 100%;
+  height: auto;
 
   &.selected {
     border: 1px solid #4e40e5;