text-block.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. var __rest = (this && this.__rest) || function (s, e) {
  2. var t = {};
  3. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
  4. t[p] = s[p];
  5. if (s != null && typeof Object.getOwnPropertySymbols === "function")
  6. for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  7. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
  8. t[p[i]] = s[p[i]];
  9. }
  10. return t;
  11. };
  12. import { Platform, Dom, FunctionExt, ObjectExt } from '@antv/x6-common';
  13. import { Attr } from '../registry';
  14. import { Base } from './base';
  15. export const TextBlock = Base.define({
  16. shape: 'text-block',
  17. markup: [
  18. {
  19. tagName: 'rect',
  20. selector: 'body',
  21. },
  22. Platform.SUPPORT_FOREIGNOBJECT
  23. ? {
  24. tagName: 'foreignObject',
  25. selector: 'foreignObject',
  26. children: [
  27. {
  28. tagName: 'div',
  29. ns: Dom.ns.xhtml,
  30. selector: 'label',
  31. style: {
  32. width: '100%',
  33. height: '100%',
  34. position: 'static',
  35. backgroundColor: 'transparent',
  36. textAlign: 'center',
  37. margin: 0,
  38. padding: '0px 5px',
  39. boxSizing: 'border-box',
  40. display: 'flex',
  41. alignItems: 'center',
  42. justifyContent: 'center',
  43. },
  44. },
  45. ],
  46. }
  47. : {
  48. tagName: 'text',
  49. selector: 'label',
  50. attrs: {
  51. textAnchor: 'middle',
  52. },
  53. },
  54. ],
  55. attrs: {
  56. body: Object.assign(Object.assign({}, Base.bodyAttr), { refWidth: '100%', refHeight: '100%' }),
  57. foreignObject: {
  58. refWidth: '100%',
  59. refHeight: '100%',
  60. },
  61. label: {
  62. style: {
  63. fontSize: 14,
  64. },
  65. },
  66. },
  67. propHooks(metadata) {
  68. const { text } = metadata, others = __rest(metadata, ["text"]);
  69. if (text) {
  70. ObjectExt.setByPath(others, 'attrs/label/text', text);
  71. }
  72. return others;
  73. },
  74. attrHooks: {
  75. text: {
  76. set(text, { cell, view, refBBox, elem, attrs }) {
  77. if (elem instanceof HTMLElement) {
  78. elem.textContent = text;
  79. }
  80. else {
  81. // No foreign object
  82. const style = attrs.style || {};
  83. const wrapValue = { text, width: -5, height: '100%' };
  84. const wrapAttrs = Object.assign({ textVerticalAnchor: 'middle' }, style);
  85. const textWrap = Attr.presets.textWrap;
  86. FunctionExt.call(textWrap.set, this, wrapValue, {
  87. cell,
  88. view,
  89. elem,
  90. refBBox,
  91. attrs: wrapAttrs,
  92. });
  93. return { fill: style.color || null };
  94. }
  95. },
  96. position(text, { refBBox, elem }) {
  97. if (elem instanceof SVGElement) {
  98. return refBBox.getCenter();
  99. }
  100. },
  101. },
  102. },
  103. });
  104. //# sourceMappingURL=text-block.js.map