18a1921bd95d17df576c8822027021717c837a8dd7aa10039c058f0a3138446be6b90d5c00163f9dfd79758c74b79b19547cb5254b7f969213bb55dc0d5f48 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. /*---------------------------------------------------------------------------------------------
  2. * Copyright (c) Microsoft Corporation. All rights reserved.
  3. * Licensed under the MIT License. See License.txt in the project root for license information.
  4. *--------------------------------------------------------------------------------------------*/
  5. import * as dom from '../../dom.js';
  6. import { UILabelProvider } from '../../../common/keybindingLabels.js';
  7. import { equals } from '../../../common/objects.js';
  8. import './keybindingLabel.css';
  9. import { localize } from '../../../../nls.js';
  10. const $ = dom.$;
  11. export class KeybindingLabel {
  12. constructor(container, os, options) {
  13. this.os = os;
  14. this.keyElements = new Set();
  15. this.options = options || Object.create(null);
  16. this.labelBackground = this.options.keybindingLabelBackground;
  17. this.labelForeground = this.options.keybindingLabelForeground;
  18. this.labelBorder = this.options.keybindingLabelBorder;
  19. this.labelBottomBorder = this.options.keybindingLabelBottomBorder;
  20. this.labelShadow = this.options.keybindingLabelShadow;
  21. this.domNode = dom.append(container, $('.monaco-keybinding'));
  22. this.didEverRender = false;
  23. container.appendChild(this.domNode);
  24. }
  25. get element() {
  26. return this.domNode;
  27. }
  28. set(keybinding, matches) {
  29. if (this.didEverRender && this.keybinding === keybinding && KeybindingLabel.areSame(this.matches, matches)) {
  30. return;
  31. }
  32. this.keybinding = keybinding;
  33. this.matches = matches;
  34. this.render();
  35. }
  36. render() {
  37. this.clear();
  38. if (this.keybinding) {
  39. const [firstPart, chordPart] = this.keybinding.getParts();
  40. if (firstPart) {
  41. this.renderPart(this.domNode, firstPart, this.matches ? this.matches.firstPart : null);
  42. }
  43. if (chordPart) {
  44. dom.append(this.domNode, $('span.monaco-keybinding-key-chord-separator', undefined, ' '));
  45. this.renderPart(this.domNode, chordPart, this.matches ? this.matches.chordPart : null);
  46. }
  47. this.domNode.title = this.keybinding.getAriaLabel() || '';
  48. }
  49. else if (this.options && this.options.renderUnboundKeybindings) {
  50. this.renderUnbound(this.domNode);
  51. }
  52. this.applyStyles();
  53. this.didEverRender = true;
  54. }
  55. clear() {
  56. dom.clearNode(this.domNode);
  57. this.keyElements.clear();
  58. }
  59. renderPart(parent, part, match) {
  60. const modifierLabels = UILabelProvider.modifierLabels[this.os];
  61. if (part.ctrlKey) {
  62. this.renderKey(parent, modifierLabels.ctrlKey, Boolean(match === null || match === void 0 ? void 0 : match.ctrlKey), modifierLabels.separator);
  63. }
  64. if (part.shiftKey) {
  65. this.renderKey(parent, modifierLabels.shiftKey, Boolean(match === null || match === void 0 ? void 0 : match.shiftKey), modifierLabels.separator);
  66. }
  67. if (part.altKey) {
  68. this.renderKey(parent, modifierLabels.altKey, Boolean(match === null || match === void 0 ? void 0 : match.altKey), modifierLabels.separator);
  69. }
  70. if (part.metaKey) {
  71. this.renderKey(parent, modifierLabels.metaKey, Boolean(match === null || match === void 0 ? void 0 : match.metaKey), modifierLabels.separator);
  72. }
  73. const keyLabel = part.keyLabel;
  74. if (keyLabel) {
  75. this.renderKey(parent, keyLabel, Boolean(match === null || match === void 0 ? void 0 : match.keyCode), '');
  76. }
  77. }
  78. renderKey(parent, label, highlight, separator) {
  79. dom.append(parent, this.createKeyElement(label, highlight ? '.highlight' : ''));
  80. if (separator) {
  81. dom.append(parent, $('span.monaco-keybinding-key-separator', undefined, separator));
  82. }
  83. }
  84. renderUnbound(parent) {
  85. dom.append(parent, this.createKeyElement(localize('unbound', "Unbound")));
  86. }
  87. createKeyElement(label, extraClass = '') {
  88. const keyElement = $('span.monaco-keybinding-key' + extraClass, undefined, label);
  89. this.keyElements.add(keyElement);
  90. return keyElement;
  91. }
  92. style(styles) {
  93. this.labelBackground = styles.keybindingLabelBackground;
  94. this.labelForeground = styles.keybindingLabelForeground;
  95. this.labelBorder = styles.keybindingLabelBorder;
  96. this.labelBottomBorder = styles.keybindingLabelBottomBorder;
  97. this.labelShadow = styles.keybindingLabelShadow;
  98. this.applyStyles();
  99. }
  100. applyStyles() {
  101. var _a;
  102. if (this.element) {
  103. for (const keyElement of this.keyElements) {
  104. if (this.labelBackground) {
  105. keyElement.style.backgroundColor = (_a = this.labelBackground) === null || _a === void 0 ? void 0 : _a.toString();
  106. }
  107. if (this.labelBorder) {
  108. keyElement.style.borderColor = this.labelBorder.toString();
  109. }
  110. if (this.labelBottomBorder) {
  111. keyElement.style.borderBottomColor = this.labelBottomBorder.toString();
  112. }
  113. if (this.labelShadow) {
  114. keyElement.style.boxShadow = `inset 0 -1px 0 ${this.labelShadow}`;
  115. }
  116. }
  117. if (this.labelForeground) {
  118. this.element.style.color = this.labelForeground.toString();
  119. }
  120. }
  121. }
  122. static areSame(a, b) {
  123. if (a === b || (!a && !b)) {
  124. return true;
  125. }
  126. return !!a && !!b && equals(a.firstPart, b.firstPart) && equals(a.chordPart, b.chordPart);
  127. }
  128. }