[Bug Report]: Converting circular structure to JSON --> starting at object with constructor 'Object' --- property '_renderProxy' closes the circle at JSON.stringify (<anonymous>)

### 发生了什么？

案例：https://examples.logic-flow.cn/demo/dist/organizer
错误：
![输入图片说明](https://foruda.gitee.com/images/1720060204622562736/8fec5001_4952064.png "f9d61369b1010c483a3c8ff99cfb831.png")

![输入图片说明](https://foruda.gitee.com/images/1720060081125971341/2495a908_4952064.png "740af6356e3c85d67a9dabf2fa0eb97.png")![输入图片说明](https://foruda.gitee.com/images/1720060069693463184/bcb7aba6_4952064.png "467ee7f093eeb49893504cc937da5fa.png")

![输入图片说明](https://foruda.gitee.com/images/1720059874722248378/05b31116_4952064.png "5b88d18904dcf3631ef934f88c98094.png")

代码如下。organizer/src/components/LogicPanel.vue

```
<template>
  <div
      class="logic-panel"
      v-loading="loading"
      element-loading-text="加载中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 1)"
  >
    <div class="diagram-main">
      <div class="diagram-sidebar">
        <div>
          <h1 class="node-category-title">General</h1>
          <div class="node-category">
            <div class="node-item" @mousedown="dragInNode('circle')">
              <span class="svg-node">组件1</span>
            </div>
            <div class="node-item" @mousedown="dragInNode('circle')">
              <span class="svg-node">组件2</span>
            </div>
          </div>
        </div>
      </div>
      
      <div ref="container" class="logic-container">
        <div class="diagram-wrapper">
          <div class="lf-diagram" ref="diagram"></div>
        </div>
      </div>
    </div>

</div>
</template>

import "@logicflow/core/dist/style/index.css";
import "@logicflow/extension/lib/style/index.css";
import base from "@/node/base";
import common from "../node/common";

export default {
  name: 'LogicPanel',
  props: {
    context: Object,
    info: Object,
  },
  computed: {},
  data() {
    return {
      lf: null,
      isShowMenu: false,
      menuPosition: {
        x: 0,
        y: 0,
      },
      currentModel: null,
      tipText: "",
      loading: true,
    };
  },
  async created() {
  },
  async mounted() {
    this.loading = true;
    this.initCanvas();
    this.initEvents();
    this.initPopover();
    this.info && this.createDefaultLogic();
    this.loading = false;
  },
  methods: {
    dragInNode(type) {
      this.lf.dnd.startDrag({
        properties: {
          name: 123,
        },
        type:'common-node'
      })
    },
    // 初始化画布
    initCanvas() {
      this.lf = new LogicFlow({
        container: this.$refs.container,
        autoExpand: false,
        hoverOutline: false,
        edgeSelectedOutline: false,
        // adjustEdge: false,
        plugins: [DndPanel, MiniMap, SelectionSelect, Menu, Dagre],
        keyboard: {
          enabled: true,
          shortcuts: [
            {
              keys: "backspace",
              callback: () => {
                const {edges} = this.lf.getSelectElements();
                // 默认只支持删除选中连线
                if (edges && edges.length === 1) {
                  this.lf.deleteEdge(edges[0].id);
                }
              },
            },
          ],
        },
        grid: {
          size: 10,
          visible: false,
        },
      });
      // setSelectionSense 参数: isWholeEdge	true	是否要边的起点终点都在选区范围才算选中， isWholeNode	true	是否要节点的全部点都在选区范围才算选中
      this.lf.extension.selectionSelect.setSelectionSense(true, false);
      this.lf.batchRegister([base,common]);
      // this.lf.batchRegister([logicLine, reaction, common, event, rpaNode]);
      // this.lf.render(graphData);
      this.lf.render({});
      this.lf.setTheme({
        arrow: {
          offset: 4,
          verticalLength: 3,
        },
        snapline: {
          stroke: "#2961EF", // 对齐线颜色
          strokeWidth: 1, // 对齐线宽度
        },
        bezier: {
          stroke: "#afafaf",
          strokeWidth: 2,
        },
      });
    },

// 初始化事件
    initEvents() {
      // Context 事件监听
      // 点击组件时高亮对应节点
      this.context.eventCenter.on(
          'canvas:model-clicked',
          (model) => {
            this.graph.selectNodesByModel(model);
          }
      );
      this.context.eventCenter.on(
          'canvas:model-deleted',
          (model) => {
            console.log("EDITOR_EVENT.CANVAS_MODEL_DELETE", model);
            // 检查相关组件
          }
      );
      /* 暂时不需要。this.lf.on('node:dnd-drag', ({data, e, position}) => {
        console.log('node:dnd-drag', data)
      });*/
      this.lf.on('node:dnd-add', ({data, e, position}) => {
        console.log('node:dnd-add', data)
      });

// LF事件注册
      // 双击击处理
      this.lf.on("node:select-dbclick", (model) => {
        console.log("node:select-dbclick", model);
        this.currentModel = model;
      });
      // 监听node点击
      this.lf.on("node:click", ({data}) => {
        console.log("node:click", data);
        const model = this.lf.getNodeModelById(data.id);
        this.currentModel = model;
      });

// 属性面板鼠标悬浮到某选项时高亮对应节点
      this.lf.on("node:hover-node", (model) => {
        this.graph.hoverNode(model);
      });

// 鼠标移出节点后取消画布组件高亮
      this.lf.on("node:mouseleave", () => {
        this.context.eventCenter.emit('logic:node-hover', null);
      });
      this.lf.on("history:change", () => {
        this.setGraphDataToContext();
      });
      this.lf.on("node:add-node", ({model, type, properties}) => {
        this.graph.insertNode(model, type, properties);
      });
      this.lf.on("node:delete-node", (model) => {
        this.lf.deleteNode(model);
      });
      this.lf.on("node:copy-node", (model) => {
        this.lf.copyNode(model);
      });

// 如果画布上一个节点都没有了，添加一个引导节点
      this.lf.on("node:delete", ({data}) => {
        const {nodes} = this.lf.getGraphData();
      });

// 点击节点添加按钮后，显示添加菜单
      this.lf.on("node:add-click", ({model, event}) => {
        this.currentModel = model;
        const x = event.clientX;
        const y = event.clientY;
        this.menuPosition = {
          x: x - 10,
          y: y - 10,
        };
        this.isShowMenu = true;
      });
      this.lf.on("edge:update-model", (model) => {
        this.currentModel = model;
      });
      this.lf.on("node:update-model", (model) => {
        this.currentModel = model;
        this.lf.selectNode(model);
      });
      this.lf.on("blank:click", () => {
        this.currentModel = null;
        this.context.eventCenter.emit(
            'canvas:model-activated',
            null
        );
      });
      this.lf.on("blank:contextmenu", ({e, position}) => {
        const x = e.clientX;
        const y = e.clientY;
        this.menuPosition = {
          x: x - 10,
          y: y - 10,
        };
        this.isShowMenu = true;
      });
    },
    // 初始化弹出框
    initPopover() {/*
      const {popover} = this.lf.extension;
      popover.registerPopover("tip1", {
        // TODO: 后续支持传递属性
        render: (rootEl, data) => {
          const vm = new Vue({
            render: (h) =>
                h(insertMenu, {
                  props: {
                    lf: this.lf,
                    context: this.context,
                    graph: this.lf,
                    model: this.currentModel,
                    showConnectBlock: data.props.showConnectBlock,
                  },
                }),
          });
          vm.$mount(rootEl);
        },
      });*/
    },

/**
     * 从context中获取graphData
     */
    getGraphDataFromContext() {
      const {logicList} = this.context;
      if (logicList.length === 1 && logicList[0].nodes !== undefined) {
        // 表示新版数据，目前虽然是一张图，但是以后大概率用多张图来表示逻辑控制，所以先预留数组的形式。
        const graphData = logicList[0];
        if (graphData.nodes) {
          graphData.nodes.forEach((node) => {
            const {properties} = node;
            if (properties) {
              node.properties.logo = "defaultLogo";
            }
          });
        }
        return graphData;
      }
      return {
        nodes: [],
        edges: [],
      };
    },
    setGraphDataToContext() {
      const graphData = this.lf.getGraphData();
      if (graphData.nodes) {
        graphData.nodes.forEach((node) => {
          if (node.properties) {
            delete node.properties.logo;
            delete node.properties.status;
            delete node.properties.warnings;
          }
        });
      }
      this.context.logicList = [graphData];
    },
    /**
     * 获取节点的outgoing
     * outgoing: [
     *  {
     *    id: 'edgeId',
     *    condition: 'nodeId_1.eventType === "click"',
     *    text: '点击',
     *    target: 'nodeId_2',
     *    pointsList: [] // 连线的坐标
     *  }
     * ]
     */
    getNodeOutgoing(nodeId) {
      const edges = this.lf.getNodeOutgoingEdge(nodeId);
      return edges.map((edgeModel) => {
        const edgeData = edgeModel.getData();
        return {
          id: edgeData.id,
          condition: edgeData.properties.condition,
          text: edgeData.text ? edgeData.text.value : "",
          target: edgeData.targetNodeId,
          pointsList: edgeData.pointsList,
        };
      });
    },
    handleSubmit(type) {
      if (type === "ds") {
        this.checkRelatedDs();
      }
    },

/**
     * 根据传入的model创建行为节点、引导
     */
    createDefaultNode(startPos) {
      const {dynamicKey, model} = this.info;
      const logic = model.getLogic();
      const props = logic.props || [];
      const currentProp = props.find((item) => item.name === dynamicKey) || {};
      const actNode = {
        id: genId(10),
        type: reaction.type,
        x: startPos.x + NODE_SPACE_X * 2,
        y: startPos.y,
        properties: {
          componentId: model.id,
          componentName: model.componentName,
          name: getNodeName(model),
          reactions: [
            {
              key: dynamicKey,
              keyDefine: currentProp.description,
              valueDefine: "",
              value: {
                type: "dataSource",
              },
            },
          ],
          item: {
            prop: true,
          },
        },
      };
      return actNode;
    },
    /**
     * 在setter点击动态数据设置后，跳转到逻辑编排并自动创建一条逻辑
     */
    createDefaultLogic() {
      const startPos = genStartPos(this.lf);
      const startNode = {
        id: genId(10),
        type: event.type,
        x: startPos.x,
        y: startPos.y,
        properties: {
          componentId: "page_init",
          componentName: "pageInit",
          name: "页面初始化",
        },
      };
      const reqNode = {
        id: genId(10),
        type: common.type,
        x: startPos.x + NODE_SPACE_X,
        y: startPos.y,
        properties: {
          type: "dataSource",
          componentName: "dataSource",
          name: "数据请求",
        },
      };
      const actNode = this.createDefaultNode(startPos);
      const graphData = {
        nodes: [startNode, reqNode, actNode],
        edges: [
          {
            id: genId(10),
            type: logicLine.type,
            sourceNodeId: startNode.id,
            targetNodeId: reqNode.id,
          },
          {
            id: genId(10),
            type: logicLine.type,
            sourceNodeId: reqNode.id,
            targetNodeId: actNode.id,
          },
        ],
      };
      this.lf.addElements(graphData);
      this.lf.translate(0, -NODE_SPACE_Y);
    },
  },
  components: {
    toolbar,
  },
};
</script>

.logic-panel,
.logic-container {
  width: 100%;
  height: 100%;
  position: relative;

/deep/ div.lf-tool-overlay {
    margin-top: 40px;
  }
}

.logic-palette {
  position: absolute;
  left: 0;
  top: 0;
}

/*自定义锚点样式*/
.logic-panel {
  .diagram-main {
    display: flex;
    width: 100%;
    height: 100%;
  }

.diagram-sidebar {
    width: 185px;
    height: calc(100% - 40px);
    border-right: 1px solid #dadce0;
    padding: 10px;
  }

.diagram-panel {
    width: 300px;
    background: #fff;
    height: calc(100% - 40px);
    position: absolute;
    right: 0px;
    top: 40px;
    border-left: 1px solid #dadce0;
  }

.logic-container {
    flex: 1;
  }

/* 由于背景图和gird不对齐，需要css处理一下 */

.diagram /deep/ .lf-background {
    left: -9px;
  }

.diagram-wrapper {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }

.lf-diagram {
    box-shadow: 0px 0px 4px #838284;
    width: 100%;
    height: 100%;
  }

/deep/ .custom-anchor {
    stroke: #2961ef;
    stroke-width: 1;
    fill: #fff;
    cursor: crosshair;
    rx: 3;
    ry: 3;
  }

/deep/ .custom-anchor:hover {
    stroke: #2961ef;
    stroke-width: 1;
    fill: #fff;
  }

/deep/ .lf-node-not-allow .custom-anchor:hover {
    stroke: #999;
    fill: #d9d9d9;
    cursor: not-allowed;
  }

/deep/ .incomming-anchor {
    stroke: #2961ef;
    cursor: default;
  }

/deep/ .outgoing-anchor {
    stroke: #2961ef;
  }

/deep/ .lf-node-not-allow .basic-node {
    cursor: not-allowed;
  }

/deep/ .lf-control-item i {
    font-size: 20px;
    font-weight: 600;
  }

/deep/ .lf-multiple-select {
    background: rgba(224, 80, 10, 0.2);
  }

/deep/ .lf-grid > svg {
    background-image: url("../assets/img/grid.svg");
    background-size: 50px 50px;
    background-repeat: repeat;
  }
}
</style>

```

### logicflow/core版本

>=1.2.0-alpha.16

### logicflow/extension版本

>=1.2.0-next.1

### logicflow/engine版本

### 浏览器&环境

Chrome

LogicFlow/LogicFlow

Content Risk Flag

Comments (0)

LogicFlow/LogicFlow .gitee-modal { width: 500px !important; }

Content Risk Flag