ToolbarManager.ts 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. import { DEBUG } from "cc/env";
  2. /**
  3. * Cocos Creator 工具栏管理器
  4. * 用于动态控制工具栏的显示和隐藏
  5. */
  6. export class ToolbarManager {
  7. private static _ins: ToolbarManager;
  8. private _isHidden: boolean = false;
  9. private _styleElement: HTMLStyleElement | null = null;
  10. public static get ins(): ToolbarManager {
  11. return this._ins ?? (this._ins = new ToolbarManager());
  12. }
  13. /**
  14. * 隐藏工具栏
  15. */
  16. public hideToolbar(): void {
  17. if (this._isHidden) return;
  18. // 创建隐藏样式
  19. this._styleElement = document.createElement('style');
  20. this._styleElement.id = 'cocos-toolbar-hide';
  21. this._styleElement.textContent = `
  22. /* 隐藏 Cocos Creator 工具栏 */
  23. .cocos-toolbar,
  24. .toolbar,
  25. .cc-toolbar,
  26. .editor-toolbar,
  27. [class*="toolbar"],
  28. [id*="toolbar"],
  29. [class*="Toolbar"],
  30. [id*="Toolbar"] {
  31. display: none !important;
  32. visibility: hidden !important;
  33. opacity: 0 !important;
  34. height: 0 !important;
  35. overflow: hidden !important;
  36. }
  37. /* 隐藏可能的工具栏容器 */
  38. .toolbar-container,
  39. .toolbar-wrapper,
  40. .editor-toolbar-container {
  41. display: none !important;
  42. }
  43. `;
  44. document.head.appendChild(this._styleElement);
  45. this._isHidden = true;
  46. console.log('[ToolbarManager] 工具栏已隐藏');
  47. }
  48. /**
  49. * 显示工具栏
  50. */
  51. public showToolbar(): void {
  52. if (!this._isHidden) return;
  53. // 移除隐藏样式
  54. if (this._styleElement) {
  55. this._styleElement.remove();
  56. this._styleElement = null;
  57. }
  58. this._isHidden = false;
  59. console.log('[ToolbarManager] 工具栏已显示');
  60. }
  61. /**
  62. * 切换工具栏显示状态
  63. */
  64. public toggleToolbar(): void {
  65. if (this._isHidden) {
  66. this.showToolbar();
  67. } else {
  68. this.hideToolbar();
  69. }
  70. }
  71. /**
  72. * 检查工具栏是否隐藏
  73. */
  74. public isToolbarHidden(): boolean {
  75. return this._isHidden;
  76. }
  77. /**
  78. * 通过 JavaScript 直接操作 DOM 隐藏工具栏
  79. */
  80. public hideToolbarByDOM(): void {
  81. const toolbarSelectors = [
  82. '.cocos-toolbar',
  83. '.toolbar',
  84. '.cc-toolbar',
  85. '.editor-toolbar',
  86. '[class*="toolbar"]',
  87. '[id*="toolbar"]',
  88. '[class*="Toolbar"]',
  89. '[id*="Toolbar"]'
  90. ];
  91. let hiddenCount = 0;
  92. toolbarSelectors.forEach(selector => {
  93. const elements = document.querySelectorAll(selector);
  94. elements.forEach(el => {
  95. const element = el as HTMLElement;
  96. if (element.style.display !== 'none') {
  97. element.style.display = 'none';
  98. hiddenCount++;
  99. }
  100. });
  101. });
  102. console.log(`[ToolbarManager] 通过 DOM 操作隐藏了 ${hiddenCount} 个工具栏元素`);
  103. }
  104. /**
  105. * 通过 JavaScript 直接操作 DOM 显示工具栏
  106. */
  107. public showToolbarByDOM(): void {
  108. const toolbarSelectors = [
  109. '.cocos-toolbar',
  110. '.toolbar',
  111. '.cc-toolbar',
  112. '.editor-toolbar',
  113. '[class*="toolbar"]',
  114. '[id*="toolbar"]',
  115. '[class*="Toolbar"]',
  116. '[id*="Toolbar"]'
  117. ];
  118. let shownCount = 0;
  119. toolbarSelectors.forEach(selector => {
  120. const elements = document.querySelectorAll(selector);
  121. elements.forEach(el => {
  122. const element = el as HTMLElement;
  123. if (element.style.display === 'none') {
  124. element.style.display = '';
  125. shownCount++;
  126. }
  127. });
  128. });
  129. console.log(`[ToolbarManager] 通过 DOM 操作显示了 ${shownCount} 个工具栏元素`);
  130. }
  131. /**
  132. * 初始化工具栏管理器
  133. */
  134. public init(): void {
  135. // 检查是否需要自动隐藏工具栏
  136. if (localStorage.getItem('hide_cocos_toolbar') === 'true') {
  137. this.hideToolbar();
  138. }
  139. console.log('[ToolbarManager] 工具栏管理器已初始化');
  140. }
  141. /**
  142. * 设置工具栏隐藏状态并保存到本地存储
  143. */
  144. public setToolbarHidden(hidden: boolean): void {
  145. localStorage.setItem('hide_cocos_toolbar', hidden.toString());
  146. if (hidden) {
  147. this.hideToolbar();
  148. } else {
  149. this.showToolbar();
  150. }
  151. }
  152. }