feat(fixed-line): support custom rounded line radius (#987)

apps/demo-fixed-layout/src/hooks/use-editor-props.ts

@@ -114,6 +114,7 @@ export function useEditorProps(
         // [ConstantKeys.BRANCH_SPACING]: 20,
         // [ConstantKeys.INLINE_SPACING_BOTTOM]: 24,
         // [ConstantKeys.INLINE_BLOCKS_INLINE_SPACING_BOTTOM]: 13,
+        // [ConstantKeys.ROUNDED_LINE_RADIUS]: 32,
         // [ConstantKeys.ROUNDED_LINE_X_RADIUS]: 8,
         // [ConstantKeys.ROUNDED_LINE_Y_RADIUS]: 10,
         // [ConstantKeys.INLINE_BLOCKS_INLINE_SPACING_TOP]: 23,

packages/canvas-engine/document/src/typings/flow-node-register.ts

@@ -65,6 +65,10 @@ export const DefaultSpacingKey = {
    * 分支节点间距
    */
   BRANCH_SPACING: 'BRANCH_SPACING',
+  /**
+   * 圆弧线条拐角 radius
+   */
+  ROUNDED_LINE_RADIUS: 'ROUNDED_LINE_RADIUS',
   /**
    * 圆弧线条 x radius
    */
@@ -106,6 +110,7 @@ export const DEFAULT_SPACING = {
   MIN_INLINE_BLOCK_SPACING: 200, // 分支间最小边距 (垂直布局)
   MIN_INLINE_BLOCK_SPACING_HORIZONTAL: 80, // 分支间最小边距 (水平布局)
   [DefaultSpacingKey.COLLAPSED_SPACING]: 12, // 复合节点距离上个节点的距离
+  [DefaultSpacingKey.ROUNDED_LINE_RADIUS]: 16, // 圆弧线条拐角 radius
   [DefaultSpacingKey.ROUNDED_LINE_X_RADIUS]: 16, // 圆弧线条 x radius
   [DefaultSpacingKey.ROUNDED_LINE_Y_RADIUS]: 20, // 圆弧线条 y radius
   [DefaultSpacingKey.HOVER_AREA_WIDTH]: 20, // width of hover area

packages/canvas-engine/renderer/src/components/LinesRenderer.tsx

@@ -32,6 +32,7 @@ export function createLines(props: PropsType): void {
   const { data, rendererRegistry, linesSave, dragService } = props;
   const { lines, entity } = data || {};
 
+  const radius = getDefaultSpacing(entity, DefaultSpacingKey.ROUNDED_LINE_RADIUS);
   const xRadius = getDefaultSpacing(entity, DefaultSpacingKey.ROUNDED_LINE_X_RADIUS);
   const yRadius = getDefaultSpacing(entity, DefaultSpacingKey.ROUNDED_LINE_Y_RADIUS);
 
@@ -71,6 +72,7 @@ export function createLines(props: PropsType): void {
             lineId={data.entity.id}
             isHorizontal={!isVertical}
             activated={lineActivated || draggingLineActivated}
+            radius={radius}
             {...line}
             xRadius={xRadius}
             yRadius={yRadius}

packages/canvas-engine/renderer/src/components/utils.tsx

@@ -25,7 +25,7 @@ export const DEFAULT_LINE_ATTRS: React.SVGProps<SVGPathElement> = {
 };
 
 // 默认的圆角半径
-export const DEFAULT_RADIUS = 16;
+export const DEFAULT_RADIUS = DEFAULT_SPACING[DefaultSpacingKey.ROUNDED_LINE_RADIUS];
 
 // 小圆角
 export const MINI_RADIUS = 10;