hyperlink.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. define(function(require, exports, module) {
  2. var kity = require('../core/kity');
  3. var utils = require('../core/utils');
  4. var Minder = require('../core/minder');
  5. var MinderNode = require('../core/node');
  6. var Command = require('../core/command');
  7. var Module = require('../core/module');
  8. var Renderer = require('../core/render');
  9. // jscs:disable maximumLineLength
  10. var linkShapePath = 'M16.614,10.224h-1.278c-1.668,0-3.07-1.07-3.599-2.556h4.877c0.707,0,1.278-0.571,1.278-1.278V3.834 c0-0.707-0.571-1.278-1.278-1.278h-4.877C12.266,1.071,13.668,0,15.336,0h1.278c2.116,0,3.834,1.716,3.834,3.834V6.39 C20.448,8.508,18.73,10.224,16.614,10.224z M5.112,5.112c0-0.707,0.573-1.278,1.278-1.278h7.668c0.707,0,1.278,0.571,1.278,1.278 S14.765,6.39,14.058,6.39H6.39C5.685,6.39,5.112,5.819,5.112,5.112z M2.556,3.834V6.39c0,0.707,0.573,1.278,1.278,1.278h4.877 c-0.528,1.486-1.932,2.556-3.599,2.556H3.834C1.716,10.224,0,8.508,0,6.39V3.834C0,1.716,1.716,0,3.834,0h1.278 c1.667,0,3.071,1.071,3.599,2.556H3.834C3.129,2.556,2.556,3.127,2.556,3.834z';
  11. Module.register('hyperlink',{
  12. 'commands': {
  13. /**
  14. * @command HyperLink
  15. * @description 为选中的节点添加超链接
  16. * @param {string} url 超链接的 URL,设置为 null 移除
  17. * @param {string} title 超链接的说明
  18. * @state
  19. * 0: 当前有选中的节点
  20. * -1: 当前没有选中的节点
  21. * @return 返回首个选中节点的超链接信息,JSON 对象: `{url: url, title: title}`
  22. */
  23. 'hyperlink': kity.createClass('hyperlink', {
  24. base: Command,
  25. execute: function(km, url, title) {
  26. var nodes = km.getSelectedNodes();
  27. nodes.forEach(function(n) {
  28. n.setData('hyperlink', url);
  29. n.setData('hyperlinkTitle', url && title);
  30. n.render();
  31. });
  32. km.layout();
  33. },
  34. queryState: function(km) {
  35. var nodes = km.getSelectedNodes(),
  36. result = 0;
  37. if (nodes.length === 0) {
  38. return -1;
  39. }
  40. nodes.forEach(function(n) {
  41. if (n && n.getData('hyperlink')) {
  42. result = 0;
  43. return false;
  44. }
  45. });
  46. return result;
  47. },
  48. queryValue: function(km) {
  49. var node = km.getSelectedNode();
  50. return {
  51. url: node.getData('hyperlink'),
  52. title: node.getData('hyperlinkTitle')
  53. };
  54. }
  55. })
  56. },
  57. 'renderers': {
  58. right: kity.createClass('hyperlinkrender', {
  59. base: Renderer,
  60. create: function() {
  61. var link = new kity.HyperLink();
  62. var linkshape = new kity.Path();
  63. var outline = new kity.Rect(24, 22, -2, -6, 4).fill('rgba(255, 255, 255, 0)');
  64. linkshape.setPathData(linkShapePath).fill('#666');
  65. link.addShape(outline);
  66. link.addShape(linkshape);
  67. link.setTarget('_blank');
  68. link.setStyle('cursor', 'pointer');
  69. link.on('mouseover', function() {
  70. outline.fill('rgba(255, 255, 200, .8)');
  71. }).on('mouseout', function() {
  72. outline.fill('rgba(255, 255, 255, 0)');
  73. });
  74. return link;
  75. },
  76. shouldRender: function(node) {
  77. return node.getData('hyperlink');
  78. },
  79. update: function(link, node, box) {
  80. var href = node.getData('hyperlink');
  81. link.setHref('#');
  82. var allowed = ['^http:', '^https:', '^ftp:', '^mailto:'];
  83. for (var i = 0; i < allowed.length; i++) {
  84. var regex = new RegExp(allowed[i]);
  85. if (regex.test(href)) {
  86. link.setHref(href);
  87. break;
  88. }
  89. }
  90. var title = node.getData('hyperlinkTitle');
  91. if (title) {
  92. title = [title, '(', href, ')'].join('');
  93. } else {
  94. title = href;
  95. }
  96. link.node.setAttributeNS('http://www.w3.org/1999/xlink', 'title', title);
  97. var spaceRight = node.getStyle('space-right');
  98. link.setTranslate(box.right + spaceRight + 2, -5);
  99. return new kity.Box({
  100. x: box.right + spaceRight,
  101. y: -11,
  102. width: 24,
  103. height: 22
  104. });
  105. }
  106. })
  107. }
  108. });
  109. });