我正在React JS中创建一个页面，以实现OCR功能，将文档OCR数据键值对映射到文档图像上显示的相应边界框元素。关于呼叫"；window.jsPlumb.ready(function(({quot；在其组件DidMount中，它第一次加载时运行良好，但在刷新页面时崩溃
查看此处显示的错误我已经寻找了各种解决方案来克服这个问题，但似乎都没有奏效。
以下是我创建jsPlumb节点的代码；连接器
setJsPlumbCanvas = (self) => {
window.jsPlumb.ready(function () {
var offsetCalculators = {
"RECT":function(el, parentOffset) {
var x = el[0].getBoundingClientRect().x,
y = el[0].getBoundingClientRect().y + (el[0].getBoundingClientRect().height / 2);
return {
left: x,
top: y
};
}
};
// custom size calculators for SVG shapes.
var sizeCalculators = {
"RECT":function(el) {
var w = 0,
h = 0;
return [ w, h ];
}
};
// store original jsPlumb prototype methods for getOffset and size.
var originalOffset = window.jsPlumbInstance.prototype.getOffset;
var originalSize = window.jsPlumbInstance.prototype.getSize;
window.jsPlumbInstance.prototype.getOffset = function(el) {
var tn = el.tagName.toUpperCase();
if (offsetCalculators[tn]) {
console.log("Condition satisfied");
return offsetCalculators[tn]($(el), $(el).parent().offset());
}
else
return $(el).offset();
};
window.jsPlumbInstance.prototype.getSize = function(el) {
var tn = el.tagName.toUpperCase();
if (sizeCalculators[tn]) {
return sizeCalculators[tn]($(el));
}
else
return [ $(el).outerWidth(), $(el).outerHeight() ];
};
//Checked
var instance = (window.jsp = window.jsPlumb.getInstance({
// default drag options
DragOptions: { cursor: "pointer", zIndex: 2000 },
// the overlays to decorate each connection with. note that the label overlay uses a function to generate the label text; in this
// case it returns the 'labelText' member that we set on each connection in the 'init' method below.
ConnectionOverlays: [
[
"Arrow",
{
location: 1,
visible: true,
width: 11,
length: 11,
id: "ARROW",
},
],
[
"Label",
{
location: 0.1,
id: "label",
cssClass: "aLabel",
},
],
],
Container: "canvas",
}));
//Checked
var basicType = {
connector: "StateMachine",
paintStyle: { stroke: "red", strokeWidth: 4 },
hoverPaintStyle: { stroke: "blue" },
overlays: ["Arrow"],
};
instance.registerConnectionType("basic", basicType);
//Checked
var connectorPaintStyle = {
strokeWidth: 4,
stroke: "red",
joinstyle: "round",
outlineStroke: "white",
outlineWidth: 2,
},
connectorHoverStyle = {
strokeWidth: 3,
stroke: "#216477",
outlineWidth: 5,
outlineStroke: "white",
},
endpointHoverStyle = {
fill: "#216477",
stroke: "#216477",
},
sourceEndpoint = {
endpoint: "Dot",
paintStyle: {
stroke: "transparent",
fill: "transparent",
radius: 7,
strokeWidth: 1,
},
isSource: true,
connector: [
"Flowchart",
{ stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true },
],
connectorStyle: connectorPaintStyle,
hoverPaintStyle: endpointHoverStyle,
connectorHoverStyle: connectorHoverStyle,
dragOptions: {},
overlays: [
[
"Label",
{
location: [0.5, 1.5],
label: "",
cssClass: "endpointSourceLabel",
visible: true,
},
],
],
},
//Checked
// the definition of target endpoints (will appear when the user drags a connection)
targetEndpoint = {
endpoint: "Dot",
paintStyle: { fill: "transparent", radius: 7 },
hoverPaintStyle: endpointHoverStyle,
maxConnections: -1,
dropOptions: { hoverClass: "hover", activeClass: "active" },
isTarget: true,
overlays: [
[
"Label",
{
location: [0.5, -0.5],
label: "",
cssClass: "endpointTargetLabel",
visible: true,
},
],
],
}
//To draw end points and maintain click event on nodes
for(let i=0; i<self.state.boundsData.length; i++) {
//For Left Node end points
instance.addEndpoint(`rect${(2*i)+1}`, sourceEndpoint, {
anchor: "RightMiddle",
uuid: `rect${(2*i)+1}`,
});
//For Right Node end points
instance.addEndpoint(`rect${(2*i)+2}`, sourceEndpoint, {
anchor: "LeftMiddle",
uuid: `rect${(2*i)+2}`,
});
}
var leftSourceClickedID = 0;
var rightSourceClickedID = 0;
var connection;
for(let i=0; i<self.state.boundsData.length; i++) {
//Set click event on Left Nodes
$(`#source${(2*i)+1}`).click(() => {
leftSourceClickedID = (2*i)+1;
self.setState({leftSourceId:(2*i)+1,leftSourceIndex:i})
console.log("I am left clicked " + leftSourceClickedID);
if(connection) {
instance.deleteConnection(connection);
}
connection = instance.connect({ uuids: [`rect${leftSourceClickedID}`, `rect${leftSourceClickedID+1}`] });
});
//Set click event on Right Nodes
$(`#rect${(2*i)+2}`).click(() => {
rightSourceClickedID = (2*i)+2;
const items = [...self.state.boundsData];
const targetItems = [...self.state.invoiceBounds];
items[self.state.leftSourceIndex].value = targetItems[i].value;
items[self.state.leftSourceIndex]['new_key'] = targetItems[i].value;
self.setState({boundsData:items})
if(connection) {
instance.deleteConnection(connection);
}
connection = instance.connect({ uuids: [`rect${self.state.leftSourceId}`, `rect${(2*i)+2}`] });
});
}
//Handle Left Window Scrolling
var leftPreviousScrollValue = 0;
document.getElementById('form_content').addEventListener("scroll", function() {
var leftScrollValue = document.getElementById("form_content").scrollTop;
for(let i=0; i<self.state.boundsData.length; i++) {
console.log("self..")
var leftElement = document.getElementById(`rect${(2*i)+1}`);
var leftElementTop = leftElement.offsetTop
leftElement.style.top = `${leftElementTop + leftPreviousScrollValue - leftScrollValue}px`;
instance.revalidate(leftElement);
};
leftPreviousScrollValue = leftScrollValue
});
//Handle Right Window Scrolling
var rightPreviousScrollValue = 0;
document.getElementById('image-div').addEventListener("scroll", function() {
var rightScrollValue = document.getElementById("form_content").scrollTop;
for(let i=0; i<self.state.boundsData.length; i++) {
var rightElement = document.getElementById(`rect${(2*i)+2}`);
if(rightElement){
var rightElementTop = rightElement.offsetTop
rightElement.style.top = `${rightElementTop + rightPreviousScrollValue - rightScrollValue}px`;
instance.revalidate(rightElement);
}
};
rightPreviousScrollValue = rightScrollValue
});
var mobiletop = $('#rect1').position().top;
var scrollfactor = 18;
document.getElementById('image-div').addEventListener("scroll", function() {
var scrollValue = document.getElementById("image-div").scrollTop;
var element1 = document.getElementById("rect1");
var imgtop = mobiletop - ((scrollValue - mobiletop)/scrollfactor);
instance.revalidate(element1);
});
});
}
我的index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="./css/font-awesome.css" />
<link rel="stylesheet" href="./css/font.css" />
<link rel="stylesheet" href="./css/jsplumbtoolkit-defaults.css" />
<link rel="stylesheet" href="./css/main.css" />
<link rel="stylesheet" href="./css/jsplumbtoolkit-demo.css" />
<link rel="stylesheet" href="./demo.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<title>Extricator</title>
</head>
<body>
<script src="./js/jsplumb.js"></script>
<script src="./js/demo-list.js"></script>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
我的包.json:
{
"name": "extricator",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/core": "7.9.0",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",
"@svgr/webpack": "4.3.3",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@typescript-eslint/eslint-plugin": "^2.10.0",
"@typescript-eslint/parser": "^2.10.0",
"axios": "^0.20.0",
"babel-eslint": "10.1.0",
"babel-jest": "^24.9.0",
"babel-loader": "8.1.0",
"babel-plugin-named-asset-import": "^0.3.6",
"babel-preset-react-app": "^9.1.2",
"camelcase": "^5.3.1",
"case-sensitive-paths-webpack-plugin": "2.3.0",
"css-loader": "3.4.2",
"dotenv": "8.2.0",
"dotenv-expand": "5.1.0",
"eslint": "^6.6.0",
"eslint-config-react-app": "^5.2.1",
"eslint-loader": "3.0.3",
"eslint-plugin-flowtype": "4.6.0",
"eslint-plugin-import": "2.20.1",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.19.0",
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "4.3.0",
"fs-extra": "^8.1.0",
"html-webpack-plugin": "4.0.0-beta.11",
"identity-obj-proxy": "3.0.0",
"jest": "24.9.0",
"jest-environment-jsdom-fourteen": "1.0.1",
"jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.2",
"jquery": "^3.5.1",
"lean-validation": "0.0.4",
"mini-css-extract-plugin": "0.9.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.6.4",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "8.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"react": "^17.0.0",
"react-app-polyfill": "^1.0.6",
"react-dev-utils": "^10.2.1",
"react-dom": "^17.0.0",
"react-intl": "^5.8.6",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"recharts": "^1.8.5",
"redux": "4.0.1",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3",
"resolve": "1.15.0",
"resolve-url-loader": "3.1.2",
"semver": "6.3.0",
"style-loader": "0.23.1",
"terser-webpack-plugin": "2.3.8",
"ts-pnp": "1.1.6",
"url-loader": "2.3.0",
"webpack": "4.42.0",
"webpack-dev-server": "3.11.0",
"webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "4.3.1"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"jest": {
"roots": [
"<rootDir>/src"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jest-environment-jsdom-fourteen",
"transform": {
"^.+\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\]node_modules[/\\].+\.(js|jsx|ts|tsx)$",
"^.+\.module\.(css|sass|scss)$"
],
"modulePaths": [],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\.module\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
]
},
"babel": {
"presets": [
"react-app"
]
},
"devDependencies": {
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2"
}
}
删除节点模块文件夹和包锁.json文件然后运行
npm install
安装完成后，运行
npm audit fix
然后检查它是否有效。如果仍然出现错误，运行以下命令
npm install node-sass
现在它将运行无错误