1/* 2 * Copyright (C) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16import { BaseElement, element } from '../../../../base-ui/BaseElement'; 17import { ColorUtils } from './ColorUtils'; 18import { LitRadioBox } from '../../../../base-ui/radiobox/LitRadioBox'; 19import { SpApplication } from '../../../SpApplication'; 20import { SpSystemTrace } from '../../SpSystemTrace'; 21import { CustomThemeColorHtml } from './CustomThemeColor.html'; 22 23@element('custom-theme-color') 24export class CustomThemeColor extends BaseElement { 25 private application: SpApplication | undefined | null; 26 private radios: NodeListOf<LitRadioBox> | undefined | null; 27 private colorsArray: Array<string> = []; 28 private colorsEl: HTMLDivElement | undefined | null; 29 private theme: Theme = Theme.LIGHT; 30 private systemTrace: SpSystemTrace | undefined | null; 31 32 static get observedAttributes(): string[] { 33 return ['mode']; 34 } 35 36 init(): void { 37 window.localStorage.getItem('Theme') === 'light' ? (this.theme = Theme.LIGHT) : (this.theme = Theme.DARK); 38 if (window.localStorage.getItem('Theme') === 'light' || !window.localStorage.getItem('Theme')) { 39 this.theme = Theme.LIGHT; 40 } else { 41 this.theme = Theme.DARK; 42 } 43 this.application!.changeTheme(this.theme); 44 this.setRadioChecked(this.theme); 45 } 46 47 /** 48 * 更新色板 49 * @param colorsEl 色板的父元素 50 */ 51 createColorsEl(colorsEl: HTMLDivElement) { 52 for (let i = 0; i < this.colorsArray!.length; i++) { 53 let div = document.createElement('div'); 54 div.className = 'color-wrap'; 55 let input = document.createElement('input'); 56 input.type = 'color'; 57 input.className = 'color'; 58 input.value = this.colorsArray![i]; 59 div.appendChild(input); 60 colorsEl?.appendChild(div); 61 input.addEventListener('change', (evt: any) => { 62 input.value = evt?.target.value; 63 this.colorsArray![i] = evt?.target.value; 64 }); 65 } 66 } 67 68 /** 69 * 根据传入的主题改变color setting页面的单选框状态，更新颜色数组 70 * @param theme 主题模式 71 */ 72 setRadioChecked(theme: Theme) { 73 for (let i = 0; i < this.radios!.length; i++) { 74 if (this.radios![i].innerHTML === theme) { 75 this.radios![i].setAttribute('checked', ''); 76 if (theme === Theme.LIGHT) { 77 this.colorsArray = 78 window.localStorage.getItem('LightThemeColors') === null 79 ? [...ColorUtils.FUNC_COLOR_A] 80 : JSON.parse(window.localStorage.getItem('LightThemeColors')!); 81 } else { 82 this.colorsArray = 83 window.localStorage.getItem('DarkThemeColors') === null 84 ? [...ColorUtils.FUNC_COLOR_B] 85 : JSON.parse(window.localStorage.getItem('DarkThemeColors')!); 86 } 87 } else { 88 this.radios![i].removeAttribute('checked'); 89 } 90 } 91 this.colorsEl!.innerHTML = ''; 92 this.createColorsEl(this.colorsEl!); 93 } 94 95 initElements(): void { 96 this.colorsEl = this.shadowRoot?.querySelector('.colors') as HTMLDivElement; 97 this.application = document.querySelector('body > sp-application') as SpApplication; 98 this.systemTrace = this.application.shadowRoot!.querySelector<SpSystemTrace>('#sp-system-trace'); 99 let close = this.shadowRoot?.querySelector('.page-close'); 100 this.radioClick(); 101 close!.addEventListener('click', (ev) => { 102 if (this.application!.hasAttribute('custom-color')) { 103 this.application!.removeAttribute('custom-color'); 104 this.setAttribute('hidden', ''); 105 } 106 this.cancelOperate(); 107 }); 108 let resetBtn = this.shadowRoot?.querySelector<HTMLButtonElement>('#reset'); 109 let previewBtn = this.shadowRoot?.querySelector<HTMLButtonElement>('#preview'); 110 let confirmBtn = this.shadowRoot?.querySelector<HTMLButtonElement>('#confirm'); 111 112 resetBtn?.addEventListener('click', () => { 113 if (this.theme === Theme.LIGHT) { 114 window.localStorage.setItem('LightThemeColors', JSON.stringify(ColorUtils.FUNC_COLOR_A)); 115 } else { 116 window.localStorage.setItem('DarkThemeColors', JSON.stringify(ColorUtils.FUNC_COLOR_B)); 117 } 118 this.application!.changeTheme(this.theme); 119 }); 120 121 previewBtn?.addEventListener('click', () => { 122 this.application!.changeTheme(this.theme, [...this.colorsArray]); 123 }); 124 125 confirmBtn?.addEventListener('click', () => { 126 this.confirmOPerate(); 127 }); 128 // 鼠标移入该页面，cpu泳道图恢复鼠标移出状态（鼠标移入cpu泳道图有数据的矩形上，和该矩形的tid或者pid不同的矩形会变灰，移出矩形，所有矩形恢复颜色） 129 this.addEventListener('mousemove', (event) => { 130 this.systemTrace!.tipEL!.style.display = 'none'; 131 this.systemTrace!.hoverStructNull(); 132 this.systemTrace!.refreshCanvas(true); 133 }); 134 } 135 136 private radioClick(): void { 137 this.radios = this.shadowRoot?.querySelectorAll('.litRadio'); 138 if (this.radios) { 139 for (let i = 0; i < this.radios.length; i++) { 140 this.radios![i].shadowRoot!.querySelector<HTMLSpanElement>('.selected')!.classList.add('blue'); 141 this.radios[i].addEventListener('click', (evt) => { 142 // 点击颜色模式的单选框，色板切换 143 if (this.radios![i].innerHTML === Theme.LIGHT) { 144 if (this.radios![i].getAttribute('checked') === null) { 145 this.colorsArray = 146 window.localStorage.getItem('LightThemeColors') === null 147 ? [...ColorUtils.FUNC_COLOR_A] 148 : JSON.parse(window.localStorage.getItem('LightThemeColors')!); 149 this.theme = Theme.LIGHT; 150 } else { 151 return; 152 } 153 } else if (this.radios![i].innerHTML === Theme.DARK) { 154 if (this.radios![i].getAttribute('checked') === null) { 155 this.colorsArray = 156 window.localStorage.getItem('DarkThemeColors') === null 157 ? [...ColorUtils.FUNC_COLOR_B] 158 : JSON.parse(window.localStorage.getItem('DarkThemeColors')!); 159 this.theme = Theme.DARK; 160 } else { 161 return; 162 } 163 } 164 this.colorsEl!.innerHTML = ''; 165 this.createColorsEl(this.colorsEl!); 166 this.confirmOPerate(); 167 }); 168 } 169 } 170 } 171 172 confirmOPerate() { 173 window.localStorage.setItem('Theme', this.theme); 174 if (this.theme === Theme.LIGHT) { 175 window.localStorage.setItem('LightThemeColors', JSON.stringify([...this.colorsArray])); 176 } else { 177 window.localStorage.setItem('DarkThemeColors', JSON.stringify([...this.colorsArray])); 178 } 179 this.application!.changeTheme(this.theme); 180 this.setRadioChecked(this.theme); 181 } 182 183 cancelOperate(): void { 184 if (window.localStorage.getItem('Theme') === 'light' || !window.localStorage.getItem('Theme')) { 185 this.theme = Theme.LIGHT; 186 this.colorsArray = 187 window.localStorage.getItem('LightThemeColors') === null 188 ? [...ColorUtils.FUNC_COLOR_A] 189 : JSON.parse(window.localStorage.getItem('LightThemeColors')!); 190 } else if (window.localStorage.getItem('Theme') === 'dark') { 191 this.theme = Theme.DARK; 192 this.colorsArray = 193 window.localStorage.getItem('DarkThemeColors') === null 194 ? [...ColorUtils.FUNC_COLOR_B] 195 : JSON.parse(window.localStorage.getItem('DarkThemeColors')!); 196 } 197 this.application!.changeTheme(this.theme); 198 // 恢复颜色模式单选框checked状态 199 this.setRadioChecked(this.theme); 200 } 201 202 connectedCallback(): void {} 203 204 initHtml(): string { 205 return CustomThemeColorHtml; 206 } 207 208 attributeChangedCallback(name: string, oldValue: string, newValue: string): void { 209 if (name === 'mode' && newValue === '') { 210 this.init(); 211 } 212 } 213} 214export enum Theme { 215 LIGHT = 'light', 216 DARK = 'dark', 217} 218