fix(demo-free-layout): group selected style (#740)

* fix(demo-free-layout): group selected style

* fix(free-layout): document options

apps/demo-free-layout/src/components/group/components/background.tsx

@@ -13,9 +13,10 @@ import { defaultColor, groupColors } from '../color';
 interface GroupBackgroundProps {
   node: WorkflowNodeEntity;
   style?: CSSProperties;
+  selected: boolean;
 }
 
-export const GroupBackground: FC<GroupBackgroundProps> = ({ node, style }) => {
+export const GroupBackground: FC<GroupBackgroundProps> = ({ node, style, selected }) => {
   const colorName = useWatch<string>(GroupField.Color) ?? defaultColor;
   const color = groupColors[colorName];
 
@@ -29,7 +30,7 @@ export const GroupBackground: FC<GroupBackgroundProps> = ({ node, style }) => {
       }
 
       .workflow-group-render.selected[data-group-id="${node.id}"] .workflow-group-background {
-        border: 1px solid ${color['400']};
+        border: 1px solid #4e40e5;
       }
     `;
 
@@ -47,7 +48,7 @@ export const GroupBackground: FC<GroupBackgroundProps> = ({ node, style }) => {
       data-flow-editor-selectable="true"
       style={{
         ...style,
-        backgroundColor: `${color['300']}29`,
+        backgroundColor: `${color['300']}${selected ? '40' : '29'}`,
       }}
     />
   );

apps/demo-free-layout/src/components/group/components/node-render.tsx

@@ -68,6 +68,7 @@ export const GroupNodeRender = () => {
           <UngroupButton node={node} />
           <GroupBackground
             node={node}
+            selected={selected}
             style={{
               top: HEADER_HEIGHT + HEADER_PADDING,
               height: nodeHeight - HEADER_HEIGHT - HEADER_PADDING,

apps/demo-free-layout/src/components/group/index.css

@@ -8,6 +8,9 @@
     pointer-events: none;
 }
 
+.workflow-group-background {
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.04), 0 4px 12px 0 rgba(0, 0, 0, 0.02);
+}
 .workflow-group-header {
     height: 30px;
     width: fit-content;

apps/demo-free-layout/src/styles/index.css

@@ -19,11 +19,6 @@
   --g-workflow-line-color-error: red;
 }
 
-.gedit-selector-bounds-background {
-  cursor: move;
-  display: none !important;
-}
-
 .gedit-selector-bounds-foreground {
   cursor: move;
   position: absolute;

packages/canvas-engine/free-layout-core/src/workflow-document-option.ts

@@ -71,7 +71,7 @@ export interface WorkflowDocumentOptions extends FlowDocumentOptions {
   /** 能否删除线条 */
   canDeleteLine?: (
     line: WorkflowLineEntity,
-    newLineInfo?: Required<WorkflowLinePortInfo>,
+    newLineInfo?: Required<Omit<WorkflowLinePortInfo, 'data'>>,
     silent?: boolean
   ) => boolean;
   /**

packages/canvas-engine/free-layout-core/src/workflow-lines-manager.ts

@@ -127,13 +127,13 @@ export class WorkflowLinesManager {
     return this.entityManager.getEntities(WorkflowLineEntity);
   }
 
-  hasLine(portInfo: WorkflowLinePortInfo): boolean {
+  hasLine(portInfo: Omit<WorkflowLinePortInfo, 'data'>): boolean {
     return !!this.entityManager.getEntityById<WorkflowLineEntity>(
       WorkflowLineEntity.portInfoToLineId(portInfo)
     );
   }
 
-  getLine(portInfo: WorkflowLinePortInfo): WorkflowLineEntity | undefined {
+  getLine(portInfo: Omit<WorkflowLinePortInfo, 'data'>): WorkflowLineEntity | undefined {
     return this.entityManager.getEntityById<WorkflowLineEntity>(
       WorkflowLineEntity.portInfoToLineId(portInfo)
     );
@@ -144,8 +144,8 @@ export class WorkflowLinesManager {
   }
 
   replaceLine(
-    oldPortInfo: WorkflowLinePortInfo,
-    newPortInfo: WorkflowLinePortInfo
+    oldPortInfo: Omit<WorkflowLinePortInfo, 'data'>,
+    newPortInfo: Omit<WorkflowLinePortInfo, 'data'>
   ): WorkflowLineEntity {
     const oldLine = this.getLine(oldPortInfo);
     if (oldLine) {
@@ -395,7 +395,7 @@ export class WorkflowLinesManager {
 
   canRemove(
     line: WorkflowLineEntity,
-    newLineInfo?: Required<WorkflowLinePortInfo>,
+    newLineInfo?: Required<Omit<WorkflowLinePortInfo, 'data'>>,
     silent?: boolean
   ): boolean {
     if (