如何使用类型记录将mxFloorplan.js包含在mxGraph React应用程序中？
因此，我试图创建一个简单的react应用程序来呈现我正在从文件中加载的mxGraph。我可以加载模型，但有些形状渲染不正确。问题是，它们是一个特定的形状，是平面图包装的一部分，我无法找到将这些形状包含在代码中的方法。
ps.：我刚开始和mxGraph合作。
我试过的东西
- 我尝试的第一件事是下载mxFloorplan.js文件到我的应用程序中，然后导入它，如下所示：
// App.tsx
import './models/mxFloorplan'
const mx = factory({
mxBasePath: './models'
})
let graph: mxGraph
...因为关于扩展mxShape的文档显示我应该注册一个新的形状：mxCellRenderer.registerShape('customShape', CustomShape);和mxFloorplan.js文件就是这样做的。然后，我简单地将其添加到文件的乞讨中：
// mxFloorplan.js
import Graph, {
mxShape,
mxUtils,
mxCellRenderer,
mxPoint
} from 'mxgraph'
...但是我得到了这个错误：
- 然后我认为我需要将mxCellRenderer链接到我的图形实例？因此，我尝试将其中一个形状定义移到App.jsx中进行测试：
// App.jsx
const mx = factory({
mxBasePath: './models'
})
let graph: mxGraph
function mxFloorplanWall(bounds: any, fill: any, stroke: any, strokewidth: any)
{
mx.mxShape.call(this); <-- Error: "Expected 2 args, but got one"
this.bounds = bounds;
this.fill = fill;
this.stroke = stroke;
this.strokewidth = (strokewidth != null) ? strokewidth : 1;
};
/**
* Extends mxShape.
*/
mx.mxUtils.extend(mxFloorplanWall, mxShape); <-- Error: "Property 'extend' does not exist on type mxUtils
// ... more code
mx.mxCellRenderer.registerShape(mxFloorplanWall.prototype.cst.WALL, mxFloorplanWall); <-- Error: mxFloorplanWall type not compatible with expected.真的不知道怎么解决这些问题。在我的研究中，我只找到了对mxCellRenderer.registerShape('name', CustomShape)的参考，所以其他的不太确定。
看上去怎么样
图的外观如下(请忽略箭头和标签)：
下面是我实际呈现的内容(“黑匣子”中有shape=shape=mxgraph.floorplan.wallU)：
回答 1
Stack Overflow用户
发布于 2020-12-28 15:21:10
如https://jgraph.github.io/mxgraph/docs/js-api/files/shape/mxShape-js.html所述，必须将构造函数传递给mxCellRenderer.registerShape
function CustomShape() { }
CustomShape.prototype = new mxShape();
CustomShape.prototype.constructor = CustomShape;
// To register a custom shape in an existing graph instance,
// one must register the shape under a new name in the graph’s cell renderer
// as follows:
mxCellRenderer.registerShape('customShape', CustomShape);
}我猜您的问题来自于错误的drawio代码端口(使用了非常古老的Javscript语法)，并且与响应完全无关。目前我还不清楚你到底实现了什么。这里有一些提示。
如果使用TypeScript，则mxCellRenderer.registerShape签名由mxgraph类型https://github.com/typed-mxgraph/typed-mxgraph/blob/v0.0.5-0/view/mxCellRenderer.d.ts#L83强制执行。当将mxFloorplanWall代码移植到类型记录时，您应该有如下所示的构造函数(请避免使用任何构造函数！)
export class mxFloorplanWall extends mxShape { // or extends mx.mxShape depending how you manage mxgraph imports
public constructor(bounds: mxRectangle, fill: string, stroke: string, strokewidth: number) {
super(bounds, fill, stroke, strokewidth);
}
...
}调用超级直接设置超类中的参数，避免错误
// mx.mxUtils.extend(mxFloorplanWall, mxShape); <-- Error: "Property 'extend' does not exist on type mxUtils
// avoid mx.mxShape.call(this); <-- Error: "Expected 2 args, but got one"同样，如果使用Javascript，则更倾向于使用ES6类语法来声明mxFloorplanWall类。
https://stackoverflow.com/questions/64868125
复制相似问题
腾讯云开发者
