cssEmphasis.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. import { liftColor } from '../tool/color.js';
  2. import { getClassId } from './cssClassId.js';
  3. export function createCSSEmphasis(el, attrs, scope) {
  4. if (!el.ignore) {
  5. if (el.isSilent()) {
  6. var style = {
  7. 'pointer-events': 'none'
  8. };
  9. setClassAttribute(style, attrs, scope, true);
  10. }
  11. else {
  12. var emphasisStyle = el.states.emphasis && el.states.emphasis.style
  13. ? el.states.emphasis.style
  14. : {};
  15. var fill = emphasisStyle.fill;
  16. if (!fill) {
  17. var normalFill = el.style && el.style.fill;
  18. var selectFill = el.states.select
  19. && el.states.select.style
  20. && el.states.select.style.fill;
  21. var fromFill = el.currentStates.indexOf('select') >= 0
  22. ? (selectFill || normalFill)
  23. : normalFill;
  24. if (fromFill) {
  25. fill = liftColor(fromFill);
  26. }
  27. }
  28. var lineWidth = emphasisStyle.lineWidth;
  29. if (lineWidth) {
  30. var scaleX = (!emphasisStyle.strokeNoScale && el.transform)
  31. ? el.transform[0]
  32. : 1;
  33. lineWidth = lineWidth / scaleX;
  34. }
  35. var style = {
  36. cursor: 'pointer'
  37. };
  38. if (fill) {
  39. style.fill = fill;
  40. }
  41. if (emphasisStyle.stroke) {
  42. style.stroke = emphasisStyle.stroke;
  43. }
  44. if (lineWidth) {
  45. style['stroke-width'] = lineWidth;
  46. }
  47. setClassAttribute(style, attrs, scope, true);
  48. }
  49. }
  50. }
  51. function setClassAttribute(style, attrs, scope, withHover) {
  52. var styleKey = JSON.stringify(style);
  53. var className = scope.cssStyleCache[styleKey];
  54. if (!className) {
  55. className = scope.zrId + '-cls-' + getClassId();
  56. scope.cssStyleCache[styleKey] = className;
  57. scope.cssNodes['.' + className + (withHover ? ':hover' : '')] = style;
  58. }
  59. attrs["class"] = attrs["class"] ? (attrs["class"] + ' ' + className) : className;
  60. }