annotation.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. // ******* Annotation MANAGER ******** //
  2. $axure.internal(function($ax) {
  3. var NOTE_SIZE = 10;
  4. var _annotationManager = $ax.annotation = {};
  5. var _updateLinkLocations = $ax.annotation.updateLinkLocations = function(elementId) {
  6. var textId = $ax.GetTextPanelId(elementId);
  7. if(!textId) return;
  8. var rotation = $ax.getObjectFromElementId(elementId).style.rotation;
  9. //we have to do this because webkit reports the post-transform position but when you set positions it's pre-transform
  10. if(WEBKIT && rotation) {
  11. //we can dynamiclly rotate a widget now, show need to remember the transform rather than just remove it
  12. //here jquery.css will return 'none' if element is display none
  13. var oldShapeTransform = document.getElementById(elementId).style['-webkit-transform'];
  14. var oldTextTransform = document.getElementById(textId).style['-webkit-transform'];
  15. $('#' + elementId).css('-webkit-transform', 'scale(1)');
  16. $('#' + textId).css('-webkit-transform', 'scale(1)');
  17. }
  18. $('#' + textId).find('div[id$="_ann"]').each(function(index, value) {
  19. var elementId = value.id.replace('_ann', '');
  20. var $link = $('#' + elementId);
  21. var annPos = $link.position();
  22. annPos.left += $link.width();
  23. //var annPos = $(value).position();
  24. var left = annPos.left;// - NOTE_SIZE;
  25. var top = annPos.top - 5;
  26. $(value).css('left', left).css('top', top);
  27. });
  28. //undo the transform reset
  29. if(WEBKIT && rotation) {
  30. $('#' + elementId).css('-webkit-transform', oldShapeTransform || '');
  31. $('#' + textId).css('-webkit-transform', oldTextTransform || '');
  32. }
  33. };
  34. var _toggleAnnotationDialog = function (elementId, event) {
  35. let win = $(window);
  36. let scrollY = win.scrollTop();
  37. let scrollX = win.scrollLeft();
  38. let x = event.pageX - scrollX;
  39. let y = event.pageY - scrollY;
  40. let frameElement = window.frameElement;
  41. let parent = window.parent;
  42. //ann dialog is relative to mainFrame, exclude the mainFrame location so the notes shows up correctly in device mode
  43. while(frameElement && frameElement.name !== 'mainFrame') {
  44. let rect = frameElement.getBoundingClientRect();
  45. x += rect.x;
  46. y += rect.y;
  47. if(!parent) break;
  48. frameElement = parent.frameElement;
  49. parent = parent.parent;
  50. }
  51. let messageData = { id: elementId, x: x, y: y }
  52. if (!$axure.utils.isInPlayer()) messageData.page = $ax.pageData.notesData;
  53. $ax.messageCenter.postMessage('toggleAnnDialog', messageData);
  54. }
  55. $ax.annotation.initialize = function () {
  56. _createFootnotes($ax('*'), true);
  57. }
  58. var _createFootnotes = $ax.annotation.createFootnotes = function(query, create) {
  59. if(!$ax.document.configuration.showAnnotations) return;
  60. var widgetNotes = $ax.pageData.notesData.widgetNotes;
  61. if (widgetNotes) {
  62. var ownerToFns = $ax.pageData.notesData.ownerToFns;
  63. if(!$.isEmptyObject(ownerToFns)) {
  64. query.each(function(dObj, elementId) {
  65. var fns = ownerToFns[dObj.id];
  66. if (fns !== undefined) {
  67. var elementIdQuery = $('#' + elementId);
  68. if (dObj.type == 'hyperlink') {
  69. var parentId = $ax.GetParentIdFromLink(elementId);
  70. if (create) {
  71. elementIdQuery.after("<div id='" + elementId + "_ann' class='annnote'>&#8203;</div>");
  72. appendFns($('#' + elementId + "_ann"), fns);
  73. }
  74. _updateLinkLocations(parentId);
  75. } else {
  76. if (create) {
  77. elementIdQuery.after("<div id='" + elementId + "_ann' class='annnote'>&#8203;</div>");
  78. appendFns($('#' + elementId + "_ann"), fns);
  79. }
  80. _adjustIconLocation(elementId, dObj);
  81. }
  82. if (create) {
  83. $('#' + elementId + "_ann").click(function (e) {
  84. _toggleAnnotationDialog(dObj.id, e);
  85. return false;
  86. });
  87. var isVisible = true;
  88. var isMaster = $ax.public.fn.IsReferenceDiagramObject(dObj.type);
  89. if (isMaster) isVisible = dObj.visible;
  90. else isVisible = $ax.visibility.IsIdVisible(elementId);
  91. if (!isVisible) {
  92. var ann = document.getElementById(elementId + "_ann");
  93. if (ann) $ax.visibility.SetVisible(ann, false);
  94. }
  95. }
  96. }
  97. });
  98. }
  99. }
  100. function appendFns($parent, fns) {
  101. for (var index = 0; index < fns.length; index++) {
  102. $parent.append("<div class='annnotelabel' >" + fns[index] + "</div>");
  103. }
  104. }
  105. };
  106. $ax.annotation.updateAllFootnotes = function () {
  107. _createFootnotes($ax('*'), false);
  108. }
  109. $ax.annotation.jQueryAnn = function(query) {
  110. var elementIds = [];
  111. query.each(function(diagramObject, elementId) {
  112. if(diagramObject.annotation) elementIds[elementIds.length] = elementId;
  113. });
  114. var elementIdSelectors = jQuery.map(elementIds, function(elementId) { return '#' + elementId + '_ann'; });
  115. var jQuerySelectorText = (elementIdSelectors.length > 0) ? elementIdSelectors.join(', ') : '';
  116. return $(jQuerySelectorText);
  117. };
  118. $(window.document).ready(function() {
  119. //$ax.annotation.InitializeAnnotations($ax(function(dObj) { return dObj.annotation; }));
  120. $ax.messageCenter.addMessageListener(function(message, data) {
  121. //If the annotations are being hidden via the Sitemap toggle button, hide any open dialogs
  122. if(message == 'annotationToggle') {
  123. if (data == true) {
  124. $('div.annnote').show();
  125. } else {
  126. $('div.annnote').hide();
  127. }
  128. }
  129. });
  130. });
  131. //adjust annotation location to a element's top right corner
  132. var _adjustIconLocation = $ax.annotation.adjustIconLocation = function(id, dObj) {
  133. var ann = document.getElementById(id + "_ann");
  134. if(ann) {
  135. var corners = $ax.public.fn.getCornersFromComponent(id);
  136. var width = $(ann).width();
  137. var newTopRight = $ax.public.fn.vectorPlus(corners.relativeTopRight, corners.centerPoint);
  138. //note size is 14x8, this is how rp calculated it as well
  139. ann.style.left = (newTopRight.x - width) + "px";
  140. var elementType = dObj ? dObj.type : $ax.getTypeFromElementId(id);
  141. var yOffset = $ax.public.fn.IsTableCell(elementType) ? 0 : -8;
  142. ann.style.top = (newTopRight.y + yOffset) + "px";
  143. }
  144. var ref = document.getElementById(id + "_ref");
  145. if(ref) {
  146. if(!corners) corners = $ax.public.fn.getCornersFromComponent(id);
  147. var newBottomRight = $ax.public.fn.vectorPlus(corners.relativeBottomRight, corners.centerPoint);
  148. ref.style.left = (newBottomRight.x - 8) + 'px';
  149. ref.style.top = (newBottomRight.y - 10) + 'px';
  150. }
  151. }
  152. });