Mxgraph-EasyFlowEditor
Mxgraph-EasyFlowEditor copied to clipboard
关于内置属性'mxConstants.WORD_WRAP' 与 css属性'word-break: break-all' 的设置问题
首先向Json表示感谢!本人近期也在研究mxgraph,您的这个详细的demo示例给我带来了非常非常大的帮助! 因为本人实际项目中涉及需要设置 word-break 的css属性,折腾了好几天总算搞定了。也发现了您代码中一些小瑕疵,以下提出来。 Mxgraph-EasyFlowEditor-1.0-beat\src\views\customToolbar\customToolbar.vue中,
- mxConstants.WORD_WRAP 设置有误
style[mxConstants.WORD_WRAP] = "normal"应改为mxConstant.WORD_WRAP = 'normal'或者mxConstant.WORD_WRAP = 'word-break'本人查询源码中发现,源码是直接在设置css属性时, 将mxConstant.WORD_WRAP的值直接拼接字符串'word-warp:' + mxConstant.WORD_WRAP + ';' - 由于mxgraph内没有内置
word-break属性,通过style[mxConstants["word-break"]] = "break-all"设置是无效的。 - 最后,如果需要设置
word-break属性,目前本人知晓的方法有两种:- 采用mxgraph内置相关API,设置 htmlLable 的方式赋值cell的title字段,该方式的缺点是会污染本身title字段,想要获取title字段内原本的内容需要从 htmlLable 中‘切割
- 采用AOP装饰函数方式,复写源码中的
mxSvgCanvas2D.prototype.getTextCss方法,该方法返回一个css字符串,负责cell设置基本的css样式。在原方法返回的css字段内,额外增加自己需要的 其他自定义基础css样式 - 如果还有其他的方式,请一定告诉我!
好的,非常感谢你的建议!