Mxgraph-EasyFlowEditor icon indicating copy to clipboard operation
Mxgraph-EasyFlowEditor copied to clipboard

关于内置属性'mxConstants.WORD_WRAP' 与 css属性'word-break: break-all' 的设置问题

Open GinkoTyping opened this issue 3 years ago • 1 comments

首先向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样式
    • 如果还有其他的方式,请一定告诉我!

GinkoTyping avatar Jul 13 '22 16:07 GinkoTyping

好的,非常感谢你的建议!

Jason-chen-coder avatar Jul 22 '22 01:07 Jason-chen-coder