didi / LogicFlow

专注于业务自定义的流程图编辑框架,支持实现脑图、ER图、UML、工作流等各种图编辑场景。A flow chart editing framework focusing on business customization.

Home Page:https://site.logic-flow.cn

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Bug Report]: nuxt3使用logicflow刷新地址后,报错

iforgetyounow opened this issue · comments

发生了什么?

首次展示能正常,但是刷新后就异常。
代码:



<script setup> import {LogicFlow} from "@logicflow/core"; onMounted(() => { const lf = new LogicFlow({ container: document.getElementById("flow-container"), grid: true, height: 700 }); lf.render({ nodes: [ { id: "1", type: "rect", x: 100, y: 100, text: "节点1", }, { id: "2", type: "circle", x: 300, y: 100, text: "节点2", }, ], edges: [ { sourceNodeId: "1", targetNodeId: "2", type: "polyline", text: "连线", }, ], }); }); </script>

效果:
1,首次点击展示(正常):
image
2,直接刷新浏览器地址(异常):
image

logicflow/core版本

1.2.18

logicflow/extension版本

1.2.19

logicflow/engine版本

No response

浏览器&环境

Chrome

看下如果直接访问 LogicFlow 所在的这个地址,会不会报错呢?

补充一下开发工具报错的信息,确认这个是 LogicFlow 报的错吗?我们 Next.js 测试是没有问题的

看下如果直接访问 LogicFlow 所在的这个地址,会不会报错呢?

直接访问不会报错,正常展示后,刷新地址就会报错。

补充一下开发工具报错的信息,确认这个是 LogicFlow 报的错吗?我们 Next.js 测试是没有问题的

用的是nuxt.js,不是next.js,用的这个https://github.com/rekryt/nuxt-vuetify-dashboard 工程,然后找一个界面,把loginflow的demo内容替换一下,点击菜单能正常展示,但是刷新展示的界面就报错了。
image

image

补充一下开发工具报错的信息,确认这个是 LogicFlow 报的错吗?我们 Next.js 测试是没有问题的

Next.js 使用也发生了window is not defined,代码:
import React, { useEffect } from 'react';
import LogicFlow from '@logicflow/core';

export default function Design() {
const data = {
nodes: [
{
id: '1',
type: 'rect',
x: 100,
y: 100,
text: '节点1',
},
{
id: '2',
type: 'circle',
x: 300,
y: 100,
text: '节点2',
},
],
edges: [
{
sourceNodeId: '1',
targetNodeId: '2',
type: 'polyline',
text: '连线',
startPoint: {
x: 140,
y: 100,
},
endPoint: {
x: 250,
y: 100,
},
},
],
};

console.log("typeof window:", typeof window !== 'undefined')
if (typeof window !== 'undefined') {
console.log("🚀 ~ Design ~ window:", window)
} else {
console.log("🚀 ~ Design ~ window222")
}

useEffect(() => {
if (typeof window !== 'undefined') {
const lf = new LogicFlow({
container: document.querySelector('#graph') as HTMLElement,
height: 400,
});
lf.render(data);
lf.translateCenter();
}
}, []);

return (




);
}