vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

192 lines
6.8 KiB

  1. import NodeBase from './NodeBase';
  2. /**
  3. * NOTE: This is a bad base class
  4. *
  5. * Child classes are:
  6. *
  7. * Image - uses *only* image methods
  8. * Circle - uses *only* _drawRawCircle
  9. * CircleImage - uses all
  10. *
  11. * TODO: Refactor, move _drawRawCircle to different module, derive Circle from NodeBase
  12. * Rename this to ImageBase
  13. * Consolidate common code in Image and CircleImage to base class
  14. *
  15. * @extends NodeBase
  16. */
  17. class CircleImageBase extends NodeBase {
  18. /**
  19. * @param {Object} options
  20. * @param {Object} body
  21. * @param {Label} labelModule
  22. */
  23. constructor(options, body, labelModule) {
  24. super(options, body, labelModule);
  25. this.labelOffset = 0;
  26. this.selected = false;
  27. }
  28. /**
  29. *
  30. * @param {Object} options
  31. * @param {Object} [imageObj]
  32. * @param {Object} [imageObjAlt]
  33. */
  34. setOptions(options, imageObj, imageObjAlt) {
  35. this.options = options;
  36. if (!(imageObj === undefined && imageObjAlt === undefined)) {
  37. this.setImages(imageObj, imageObjAlt);
  38. }
  39. }
  40. /**
  41. * Set the images for this node.
  42. *
  43. * The images can be updated after the initial setting of options;
  44. * therefore, this method needs to be reentrant.
  45. *
  46. * For correct working in error cases, it is necessary to properly set
  47. * field 'nodes.brokenImage' in the options.
  48. *
  49. * @param {Image} imageObj required; main image to show for this node
  50. * @param {Image|undefined} imageObjAlt optional; image to show when node is selected
  51. */
  52. setImages(imageObj, imageObjAlt) {
  53. if (imageObjAlt && this.selected) {
  54. this.imageObj = imageObjAlt;
  55. this.imageObjAlt = imageObj;
  56. } else {
  57. this.imageObj = imageObj;
  58. this.imageObjAlt = imageObjAlt;
  59. }
  60. }
  61. /**
  62. * Set selection and switch between the base and the selected image.
  63. *
  64. * Do the switch only if imageObjAlt exists.
  65. *
  66. * @param {boolean} selected value of new selected state for current node
  67. */
  68. switchImages(selected) {
  69. var selection_changed = ((selected && !this.selected) || (!selected && this.selected));
  70. this.selected = selected; // Remember new selection
  71. if (this.imageObjAlt !== undefined && selection_changed) {
  72. let imageTmp = this.imageObj;
  73. this.imageObj = this.imageObjAlt;
  74. this.imageObjAlt = imageTmp;
  75. }
  76. }
  77. /**
  78. * Adjust the node dimensions for a loaded image.
  79. *
  80. * Pre: this.imageObj is valid
  81. */
  82. _resizeImage() {
  83. var width, height;
  84. if (this.options.shapeProperties.useImageSize === false) {
  85. // Use the size property
  86. var ratio_width = 1;
  87. var ratio_height = 1;
  88. // Only calculate the proper ratio if both width and height not zero
  89. if (this.imageObj.width && this.imageObj.height) {
  90. if (this.imageObj.width > this.imageObj.height) {
  91. ratio_width = this.imageObj.width / this.imageObj.height;
  92. }
  93. else {
  94. ratio_height = this.imageObj.height / this.imageObj.width;
  95. }
  96. }
  97. width = this.options.size * 2 * ratio_width;
  98. height = this.options.size * 2 * ratio_height;
  99. }
  100. else {
  101. // Use the image size
  102. width = this.imageObj.width;
  103. height = this.imageObj.height;
  104. }
  105. this.width = width;
  106. this.height = height;
  107. this.radius = 0.5 * this.width;
  108. }
  109. /**
  110. *
  111. * @param {CanvasRenderingContext2D} ctx
  112. * @param {number} x width
  113. * @param {number} y height
  114. * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
  115. * @private
  116. */
  117. _drawRawCircle(ctx, x, y, values) {
  118. this.initContextForDraw(ctx, values);
  119. ctx.circle(x, y, values.size);
  120. this.performFill(ctx, values);
  121. }
  122. /**
  123. *
  124. * @param {CanvasRenderingContext2D} ctx
  125. * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values
  126. * @private
  127. */
  128. _drawImageAtPosition(ctx, values) {
  129. if (this.imageObj.width != 0) {
  130. // draw the image
  131. ctx.globalAlpha = 1.0;
  132. // draw shadow if enabled
  133. this.enableShadow(ctx, values);
  134. let factor = 1;
  135. if (this.options.shapeProperties.interpolation === true) {
  136. factor = (this.imageObj.width / this.width) / this.body.view.scale;
  137. }
  138. this.imageObj.drawImageAtPosition(ctx, factor, this.left, this.top, this.width, this.height);
  139. // disable shadows for other elements.
  140. this.disableShadow(ctx, values);
  141. }
  142. }
  143. /**
  144. *
  145. * @param {CanvasRenderingContext2D} ctx
  146. * @param {number} x width
  147. * @param {number} y height
  148. * @param {boolean} selected
  149. * @param {boolean} hover
  150. * @private
  151. */
  152. _drawImageLabel(ctx, x, y, selected, hover) {
  153. var yLabel;
  154. var offset = 0;
  155. if (this.height !== undefined) {
  156. offset = this.height * 0.5;
  157. var labelDimensions = this.labelModule.getTextSize(ctx, selected, hover);
  158. if (labelDimensions.lineCount >= 1) {
  159. offset += labelDimensions.height / 2;
  160. }
  161. }
  162. yLabel = y + offset;
  163. if (this.options.label) {
  164. this.labelOffset = offset;
  165. }
  166. this.labelModule.draw(ctx, x, yLabel, selected, hover, 'hanging');
  167. }
  168. }
  169. export default CircleImageBase;