[BUG] Workflow lines fail to render after fromJSON() when meta.size equals wrapperStyle dimensions

[kerwin612]

🙋 SDK Version

@flowgram.ai/free-layout-core: 0.1.8

📌 Layout

Free layout

💻 Environment

• Operation System: Linux 5.15 (WSL)
• Node.js: (Please fill in your version)
• Other: flowgram.ai repository

📝 Question Description

Bug Summary

When loading initial data using fromJSON(), lines connecting nodes fail to render if the node's meta.size and wrapperStyle have the same width/height values. This bug only occurs during initial data loading; drag-and-drop and manual connections work correctly.

Steps to Reproduce

1. Create a custom node with meta.size and wrapperStyle having the same width/height values:

meta: {
  size: {
    width: 80,
    height: 80,
  },
  wrapperStyle: {
    width: '80px',
    height: '80px',
    // ... other styles
  },
}

2. Load initial data with nodes connected by edges:

{
  "nodes": [
    { "id": "start", "type": "custom-start", "meta": { "position": { "x": 40, "y": 0 } } },
    { "id": "variable", "type": "custom-variable", "meta": { "position": { "x": 220, "y": 0 } } },
    { "id": "end", "type": "custom-end", "meta": { "position": { "x": 400, "y": 0 } } }
  ],
  "edges": [
    { "sourceNodeID": "start", "targetNodeID": "variable" },
    { "sourceNodeID": "variable", "targetNodeID": "end" }
  ]
}

3. Call document.fromJSON(initialData) to load the data
4. Observe that the lines connecting the nodes are not rendered

Workarounds (Not Recommended)

The bug can be temporarily avoided by:

1. Removing meta.size from the node definition, OR
2. Removing wrapperStyle.width/height from the node definition, OR
3. Making the width/height values different between meta.size and wrapperStyle

Temporary Workaround (Not Recommended)

The following workaround works but is not a proper solution:

// In workflow-line-render-data.ts update method
public update(): void {
  this.syncContributions();
  // const oldVersion = this.data.version;
  this.updatePosition();
  // const newVersion = this.data.version;
  // if (oldVersion === newVersion) {
  //   return;  // Early return prevents update
  // }
  // this.data.version = newVersion;
  this.currentLine?.update({
    fromPos: this.data.position.from,
    toPos: this.data.position.to,
  });
}

// In workflow-document.ts fromJSON method
setTimeout(() => {
  this.linesManager.forceUpdate();
}, 100);

Additional Notes

• This bug only affects initial data loading via fromJSON()
• Drag-and-drop and manual connections work correctly because the DOM is already rendered when lines are created
• The issue is related to the timing of DOM rendering vs. line position calculation

[xiamidaxia]

Could you send a GIF image? I'm not quite sure what the problem is.

[kerwin612]

[kerwin612]

• start

/**
 * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 * SPDX-License-Identifier: MIT
 */

import React from 'react';
import { nanoid } from 'nanoid';
import { Field, FormMeta } from '@flowgram.ai/free-layout-editor';
import { FlowNodeRegistry } from '../../../typings';
import { WorkflowNodeType } from '../../constants';
import iconStart from '../../../assets/icon-start.jpg';
import { useIsSidebar } from '../../../hooks';
import { FormHeader, FormContent } from '../../../form-components';

export const CustomStartComponent: React.FC<{ title?: string }> = ({ title = 'Start' }) => {
  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        gap: '4px',
      }}
    >
      <div
        style={{
          width: '36px',
          height: '36px',
          borderRadius: '50%',
          border: '3px solid #4CAF50',
          backgroundColor: '#E8F5E9',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          position: 'relative',
        }}
      >
        {/* Inner circle */}
        <div
          style={{
            width: '16px',
            height: '16px',
            borderRadius: '50%',
            backgroundColor: '#4CAF50',
          }}
        />
      </div>
      {/* Label */}
      <div
        style={{
          fontSize: '12px',
          fontWeight: '500',
          color: '#333',
          textAlign: 'center',
          maxWidth: '100%',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
        }}
      >
        {title}
      </div>
    </div>
  );
};

/**
 * Editor 上显示的简约组件
 */
const PreviewComponent = () => (
  <div style={{ padding: '0', width: '100%', height: '100%' }}>
    <CustomStartComponent />
  </div>
);

/**
 * 抽屉中显示的详情组件
 */
const DetailComponent = () => (
  <>
    <FormHeader />
    <FormContent>
      <Field<string> name="title">
        {({ field }) => (
          <div style={{ marginBottom: '16px' }}>
            <label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', fontWeight: '500' }}>
              节点标题
            </label>
            <input
              value={field.value}
              onChange={(e) => field.onChange(e.target.value)}
              placeholder="请输入节点标题"
              style={{
                width: '100%',
                padding: '8px 12px',
                border: '1px solid #d9d9d9',
                borderRadius: '4px',
                fontSize: '14px',
              }}
            />
          </div>
        )}
      </Field>
      <Field<string> name="description">
        {({ field }) => (
          <div style={{ marginBottom: '16px' }}>
            <label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', fontWeight: '500' }}>
              描述
            </label>
            <textarea
              value={field.value}
              onChange={(e) => field.onChange(e.target.value)}
              placeholder="请输入节点描述"
              rows={4}
              style={{
                width: '100%',
                padding: '8px 12px',
                border: '1px solid #d9d9d9',
                borderRadius: '4px',
                fontSize: '14px',
                resize: 'vertical',
              }}
            />
          </div>
        )}
      </Field>
    </FormContent>
  </>
);

/**
 * 根据渲染位置返回不同组件
 */
export const renderForm = () => {
  const isSidebar = useIsSidebar();
  
  if (isSidebar) {
    // 在抽屉中显示详情组件
    return <DetailComponent />;
  }
  
  // 在 Editor 上显示简约组件
  return <PreviewComponent />;
};

export const formMeta: FormMeta = {
  render: renderForm,
};

export const CustomStartNodeRegistry: FlowNodeRegistry = {
  type: WorkflowNodeType.CustomStart,
  meta: {
    defaultPorts: [{ type: 'output' }],
    size: {
      width: 80,
      height: 80,
    },
    // 自定义外层card样式
    wrapperStyle: {
      width: '80px',
      height: '80px',
      border: 'none',
      backgroundColor: 'transparent',
      boxShadow: 'none',
      padding: '0',
    },
  },
  info: {
    icon: iconStart,
    description: 'Custom Start - The starting node of the workflow',
  },
  formMeta,
  onAdd() {
    return {
      id: `customStart_${nanoid(5)}`,
      type: WorkflowNodeType.CustomStart,
      data: {
        title: 'Custom Start',
        description: '',
      },
    };
  },
};

---

• end

/**
 * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 * SPDX-License-Identifier: MIT
 */

import React from 'react';
import { nanoid } from 'nanoid';
import { Field, FormMeta } from '@flowgram.ai/free-layout-editor';
import { FlowNodeRegistry } from '../../../typings';
import { WorkflowNodeType } from '../../constants';
import iconEnd from '../../../assets/icon-end.jpg';
import { useIsSidebar } from '../../../hooks';
import { FormHeader, FormContent } from '../../../form-components';

export const CustomEndComponent: React.FC<{ title?: string }> = ({ title = 'End' }) => {
  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        gap: '4px',
      }}
    >
      <div
        style={{
          width: '36px',
          height: '36px',
          borderRadius: '50%',
          border: '5px solid #F44336',
          backgroundColor: '#FFEBEE',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        {/* Inner circle */}
        <div
          style={{
            width: '16px',
            height: '16px',
            borderRadius: '50%',
            backgroundColor: '#F44336',
          }}
        />
      </div>
      {/* Label */}
      <div
        style={{
          fontSize: '12px',
          fontWeight: '500',
          color: '#333',
          textAlign: 'center',
          maxWidth: '100%',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
        }}
      >
        {title}
      </div>
    </div>
  );
};

/**
 * Editor 上显示的简约组件
 */
const PreviewComponent = () => (
  <div style={{ padding: '0', width: '100%', height: '100%' }}>
    <CustomEndComponent />
  </div>
);

/**
 * 抽屉中显示的详情组件
 */
const DetailComponent = () => (
  <>
    <FormHeader />
    <FormContent>
      <Field<string> name="title">
        {({ field }) => (
          <div style={{ marginBottom: '16px' }}>
            <label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', fontWeight: '500' }}>
              节点标题
            </label>
            <input
              value={field.value}
              onChange={(e) => field.onChange(e.target.value)}
              placeholder="请输入节点标题"
              style={{
                width: '100%',
                padding: '8px 12px',
                border: '1px solid #d9d9d9',
                borderRadius: '4px',
                fontSize: '14px',
              }}
            />
          </div>
        )}
      </Field>
      <Field<string> name="description">
        {({ field }) => (
          <div style={{ marginBottom: '16px' }}>
            <label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', fontWeight: '500' }}>
              描述
            </label>
            <textarea
              value={field.value}
              onChange={(e) => field.onChange(e.target.value)}
              placeholder="请输入节点描述"
              rows={4}
              style={{
                width: '100%',
                padding: '8px 12px',
                border: '1px solid #d9d9d9',
                borderRadius: '4px',
                fontSize: '14px',
                resize: 'vertical',
              }}
            />
          </div>
        )}
      </Field>
    </FormContent>
  </>
);

/**
 * 根据渲染位置返回不同组件
 */
export const renderForm = () => {
  const isSidebar = useIsSidebar();
  
  if (isSidebar) {
    // 在抽屉中显示详情组件
    return <DetailComponent />;
  }
  
  // 在 Editor 上显示简约组件
  return <PreviewComponent />;
};

export const formMeta: FormMeta = {
  render: renderForm,
};

export const CustomEndNodeRegistry: FlowNodeRegistry = {
  type: WorkflowNodeType.CustomEnd,
  meta: {
    defaultPorts: [{ type: 'input' }],
    size: {
      width: 80,
      height: 80,
    },
    // 自定义外层card样式
    wrapperStyle: {
      width: '80px',
      height: '80px',
      border: 'none',
      backgroundColor: 'transparent',
      boxShadow: 'none',
      padding: '0',
    },
  },
  info: {
    icon: iconEnd,
    description: 'Custom End - The final node of the workflow',
  },
  formMeta,
  onAdd() {
    return {
      id: `customEnd_${nanoid(5)}`,
      type: WorkflowNodeType.CustomEnd,
      data: {
        title: 'Custom End',
        description: '',
      },
    };
  },
};

---

• variable

/**
 * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 * SPDX-License-Identifier: MIT
 */

import { nanoid } from 'nanoid';

import { WorkflowNodeType } from '../../constants';
import { FlowNodeRegistry } from '../../../typings';
import iconVariable from '../../../assets/icon-variable.png';
import { formMeta } from './form-meta';

let index = 0;

export const CustomVariableNodeRegistry: FlowNodeRegistry = {
  type: WorkflowNodeType.CustomVariable,
  info: {
    icon: iconVariable,
    description: 'Variable Assign and Declaration',
  },
  meta: {
    size: {
      width: 80,
      height: 80,
    },
    // 自定义外层card样式
    wrapperStyle: {
      width: '80px',
      height: '80px',
      border: 'none',
      backgroundColor: 'transparent',
      boxShadow: 'none',
      padding: '0',
    },
  },
  onAdd() {
    return {
      id: `customVariable_${nanoid(5)}`,
      type: WorkflowNodeType.CustomVariable,
      data: {
        title: `Variable_${++index}`,
        assign: [
          {
            operator: 'declare',
            left: 'sum',
            right: {
              type: 'constant',
              content: 0,
              schema: { type: 'integer' },
            },
          },
        ],
      },
    };
  },
  formMeta: formMeta,
};

---

• initial-data

/**
 * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 * SPDX-License-Identifier: MIT
 */

import { FlowDocumentJSON } from './typings';

export const initialData: FlowDocumentJSON = {
  "nodes": [
    {
      "id": "customStart_bitAJ",
      "type": "custom-start",
      "meta": {
        "position": {
          "x": 40,
          "y": 0
        }
      },
      "data": {
        "title": "Custom Start",
        "description": ""
      }
    },
    {
      "id": "customVariable_4kD_5",
      "type": "custom-variable",
      "meta": {
        "position": {
          "x": 220,
          "y": 0
        }
      },
      "data": {
        "title": "Variable_1",
        "assign": [
          {
            "operator": "declare",
            "left": "sum",
            "right": {
              "type": "constant",
              "content": 0,
              "schema": {
                "type": "integer"
              }
            }
          }
        ],
        "outputs": {
          "type": "object",
          "required": [],
          "properties": {
            "sum": {
              "type": "integer"
            }
          }
        }
      }
    },
    {
      "id": "customEnd_HwFOX",
      "type": "custom-end",
      "meta": {
        "position": {
          "x": 400,
          "y": 0
        }
      },
      "data": {
        "title": "Custom End",
        "description": ""
      }
    }
  ],
  "edges": [
    {
      "sourceNodeID": "customStart_bitAJ",
      "targetNodeID": "customVariable_4kD_5"
    },
    {
      "sourceNodeID": "customVariable_4kD_5",
      "targetNodeID": "customEnd_HwFOX"
    }
  ],
  globalVariable: {
    type: 'object',
    required: [],
    properties: {
    },
  },
};

[xiamidaxia]

试一试 ctx.document.reload 或者 ctx.operation.fromJSON 来加载数据

This text is auto-translated:
Try ctx.document.reload or ctx.operation.fromJSON to load the data

[zyh94946]

We hit the same issue and traced it to the version guard in WorkflowLineRenderData.update().

path comes from the line contribution (get path() { return this.currentLine?.path ?? ''; }). When a line entity is created before its line contribution (bezier/fold/straight, registered by free-lines-plugin in onReady) is available, the first update() writes the real coordinates into version while currentLine is still undefined, so path is left empty. Once the contribution registers, the coordinates are unchanged, so oldVersion === newVersion holds and the guard permanently skips recomputation — the empty path is locked in and the line never renders. That's why it's specific to initial fromJSON load; manual drag/connect happens after the contributions are registered. The meta.size == wrapperStyle condition you found likely just shifts line creation into that window.

Opened a PR with a minimal fix + regression test: #1147