475 lines
18 KiB
TypeScript
475 lines
18 KiB
TypeScript
|
import './index.css';
|
|||
|
|
import type { RadialToolbarOptions, RadialMenuItem } from './types';
|
|||
|
|
import type { ThemeConfig } from '../../themes/types';
|
|||
|
|
import { IBimComponent } from '../../types/component';
|
|||
|
|
import { getIcon } from '../../utils/icon-manager';
|
|||
|
|
import { themeManager } from '../../services/theme';
|
|||
|
|
import { localeManager, t } from '../../services/locale';
|
|||
|
|
|
|||
|
|
export class RadialToolbar implements IBimComponent {
|
|||
|
|
private container: HTMLElement;
|
|||
|
|
private wrapper: HTMLElement;
|
|||
|
|
private mainButton: HTMLButtonElement;
|
|||
|
|
private items: RadialMenuItem[] = [];
|
|||
|
|
private itemElements: HTMLButtonElement[] = [];
|
|||
|
|
private itemButtonMap: Map<string, HTMLButtonElement> = new Map();
|
|||
|
|
private toggleStateMap: Map<string, boolean> = new Map();
|
|||
|
|
private isActive = false;
|
|||
|
|
private timer: number | null = null;
|
|||
|
|
private unsubscribeTheme: (() => void) | null = null;
|
|||
|
|
private unsubscribeLocale: (() => void) | null = null;
|
|||
|
|
private readonly mainButtonLabel: string;
|
|||
|
|
private readonly onMainButtonClick?: () => void;
|
|||
|
|
private pointerX = Number.NaN;
|
|||
|
|
private pointerY = Number.NaN;
|
|||
|
|
private maxInteractiveRadius = 220;
|
|||
|
|
|
|||
|
|
private readonly closeDelay: number;
|
|||
|
|
private readonly itemsPerRing: number;
|
|||
|
|
|
|||
|
|
// 主按钮直径（px）
|
|||
|
|
private readonly MAIN_BUTTON_SIZE = 60;
|
|||
|
|
// 子按钮直径（px）
|
|||
|
|
private readonly SUB_BUTTON_SIZE = 46;
|
|||
|
|
// 第一环“子按钮中心”到“主按钮中心”的距离（px）
|
|||
|
|
// 不做防重叠兜底，允许在小半径时出现重叠。
|
|||
|
|
private readonly BASE_RADIUS = 80;
|
|||
|
|
// 多环时，相邻两环的中心半径差（px）
|
|||
|
|
private readonly RING_GAP = 40;
|
|||
|
|
// 扇形展开角度范围：当前 180~270（实际就是 90 度）
|
|||
|
|
private readonly FAN_START_DEG = 170;
|
|||
|
|
private readonly FAN_END_DEG = 280;
|
|||
|
|
// 扇形边缘留白（px），防止按钮贴边或裁切
|
|||
|
|
private readonly CANVAS_PADDING = 28;
|
|||
|
|
|
|||
|
|
constructor(options: RadialToolbarOptions) {
|
|||
|
|
this.container = options.container;
|
|||
|
|
this.items = options.items === undefined ? this.createDefaultItems() : [...options.items];
|
|||
|
|
this.mainButtonLabel = options.mainButtonLabel ?? 'toolbar.home';
|
|||
|
|
this.onMainButtonClick = options.onMainButtonClick;
|
|||
|
|
this.itemsPerRing = Math.max(3, options.itemsPerRing ?? 5);
|
|||
|
|
this.closeDelay = Math.max(100, options.closeDelay ?? 260);
|
|||
|
|
|
|||
|
|
this.wrapper = this.createWrapper();
|
|||
|
|
this.mainButton = this.createMainButton(options.mainButtonIcon);
|
|||
|
|
this.wrapper.appendChild(this.mainButton);
|
|||
|
|
|
|||
|
|
this.container.appendChild(this.wrapper);
|
|||
|
|
this.renderItems();
|
|||
|
|
this.updateLayoutMetrics();
|
|||
|
|
this.bindEvents();
|
|||
|
|
|
|||
|
|
this.setTheme(themeManager.getTheme());
|
|||
|
|
this.updateLocales();
|
|||
|
|
this.unsubscribeTheme = themeManager.subscribe((theme) => {
|
|||
|
|
this.setTheme(theme);
|
|||
|
|
});
|
|||
|
|
this.unsubscribeLocale = localeManager.subscribe(() => {
|
|||
|
|
this.updateLocales();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private createDefaultItems(): RadialMenuItem[] {
|
|||
|
|
return [
|
|||
|
|
{ id: 'zoom', label: 'toolbar.zoomBox', icon: getIcon('框选放大') },
|
|||
|
|
{ id: 'measure', label: 'toolbar.measure', icon: getIcon('测量') },
|
|||
|
|
{ id: 'section', label: 'toolbar.section', icon: getIcon('剖切') },
|
|||
|
|
{ id: 'walk', label: 'toolbar.walk', icon: getIcon('漫游') },
|
|||
|
|
{ id: 'setting', label: 'toolbar.setting', icon: getIcon('设置') }
|
|||
|
|
];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private createWrapper(): HTMLElement {
|
|||
|
|
const el = document.createElement('div');
|
|||
|
|
el.className = 'radial-toolbar-wrapper';
|
|||
|
|
return el;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private createMainButton(icon?: string): HTMLButtonElement {
|
|||
|
|
const btn = document.createElement('button');
|
|||
|
|
btn.className = 'radial-main-btn';
|
|||
|
|
btn.type = 'button';
|
|||
|
|
btn.innerHTML = icon ?? getIcon('主视角');
|
|||
|
|
return btn;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private bindEvents(): void {
|
|||
|
|
this.mainButton.addEventListener('mouseenter', this.handlePointerEnter);
|
|||
|
|
this.mainButton.addEventListener('mouseleave', this.handlePointerLeave);
|
|||
|
|
this.mainButton.addEventListener('click', this.handleMainButtonClick);
|
|||
|
|
document.addEventListener('click', this.handleDocumentClick);
|
|||
|
|
document.addEventListener('mousemove', this.handleDocumentMouseMove);
|
|||
|
|
document.addEventListener('mouseleave', this.handleDocumentMouseLeave);
|
|||
|
|
document.addEventListener('visibilitychange', this.handleVisibilityChange);
|
|||
|
|
window.addEventListener('blur', this.handleWindowBlur);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private readonly handleDocumentMouseMove = (event: MouseEvent): void => {
|
|||
|
|
this.pointerX = event.clientX;
|
|||
|
|
this.pointerY = event.clientY;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
private readonly handleDocumentMouseLeave = (): void => {
|
|||
|
|
this.pointerX = Number.NaN;
|
|||
|
|
this.pointerY = Number.NaN;
|
|||
|
|
this.collapse();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
private readonly handleVisibilityChange = (): void => {
|
|||
|
|
if (!document.hidden) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.pointerX = Number.NaN;
|
|||
|
|
this.pointerY = Number.NaN;
|
|||
|
|
this.collapse();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
private readonly handleWindowBlur = (): void => {
|
|||
|
|
this.pointerX = Number.NaN;
|
|||
|
|
this.pointerY = Number.NaN;
|
|||
|
|
this.collapse();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
private readonly handlePointerEnter = (): void => {
|
|||
|
|
if (this.timer) {
|
|||
|
|
clearTimeout(this.timer);
|
|||
|
|
this.timer = null;
|
|||
|
|
}
|
|||
|
|
this.expand();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
private readonly handlePointerLeave = (event: MouseEvent): void => {
|
|||
|
|
const relatedTarget = event.relatedTarget;
|
|||
|
|
if (relatedTarget instanceof Node && this.wrapper.contains(relatedTarget)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.scheduleCollapse();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
private readonly handleMainButtonClick = (event: MouseEvent): void => {
|
|||
|
|
event.stopPropagation();
|
|||
|
|
if (this.onMainButtonClick) {
|
|||
|
|
this.onMainButtonClick();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (this.isActive) {
|
|||
|
|
this.collapse();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.expand();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
private readonly handleDocumentClick = (event: MouseEvent): void => {
|
|||
|
|
const target = event.target;
|
|||
|
|
if (!(target instanceof Node)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!this.wrapper.contains(target)) {
|
|||
|
|
this.collapse();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
private renderItems(): void {
|
|||
|
|
this.itemElements.forEach((el) => el.remove());
|
|||
|
|
this.itemElements = [];
|
|||
|
|
this.itemButtonMap.clear();
|
|||
|
|
this.toggleStateMap.clear();
|
|||
|
|
|
|||
|
|
this.items.forEach((item, index) => {
|
|||
|
|
this.toggleStateMap.set(item.id, Boolean(item.isActive));
|
|||
|
|
const btn = this.createSubButton(item, index);
|
|||
|
|
this.wrapper.insertBefore(btn, this.mainButton);
|
|||
|
|
this.itemElements.push(btn);
|
|||
|
|
this.itemButtonMap.set(item.id, btn);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.updateItemPositions();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private createSubButton(item: RadialMenuItem, index: number): HTMLButtonElement {
|
|||
|
|
const btn = document.createElement('button');
|
|||
|
|
btn.className = 'radial-sub-btn';
|
|||
|
|
btn.type = 'button';
|
|||
|
|
btn.dataset.index = String(index);
|
|||
|
|
this.applyItemActiveClass(btn, item);
|
|||
|
|
|
|||
|
|
const iconContainer = document.createElement('span');
|
|||
|
|
iconContainer.className = 'radial-sub-btn-icon';
|
|||
|
|
if (item.icon) {
|
|||
|
|
iconContainer.innerHTML = item.icon;
|
|||
|
|
} else {
|
|||
|
|
iconContainer.textContent = this.getFallbackLabel(item.label);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
btn.appendChild(iconContainer);
|
|||
|
|
btn.addEventListener('mouseenter', this.handlePointerEnter);
|
|||
|
|
btn.addEventListener('mouseleave', this.handlePointerLeave);
|
|||
|
|
btn.addEventListener('click', (event) => {
|
|||
|
|
event.stopPropagation();
|
|||
|
|
if (item.isToggle) {
|
|||
|
|
const current = this.toggleStateMap.get(item.id) ?? false;
|
|||
|
|
const next = !current;
|
|||
|
|
this.toggleStateMap.set(item.id, next);
|
|||
|
|
item.isActive = next;
|
|||
|
|
this.applyItemActiveClass(btn, item);
|
|||
|
|
item.onToggle?.(next, item);
|
|||
|
|
this.collapse();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
item.onClick?.(item);
|
|||
|
|
this.collapse();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return btn;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private updateItemPositions(): void {
|
|||
|
|
const total = this.itemElements.length;
|
|||
|
|
const fanSpan = this.FAN_END_DEG - this.FAN_START_DEG;
|
|||
|
|
|
|||
|
|
this.itemElements.forEach((btn, globalIndex) => {
|
|||
|
|
const ringIndex = Math.floor(globalIndex / this.itemsPerRing);
|
|||
|
|
const ringStart = ringIndex * this.itemsPerRing;
|
|||
|
|
const ringCount = Math.min(this.itemsPerRing, total - ringStart);
|
|||
|
|
const ringLocalIndex = globalIndex - ringStart;
|
|||
|
|
const ratio = ringCount === 1 ? 0.5 : ringLocalIndex / (ringCount - 1);
|
|||
|
|
const angleDeg = this.FAN_START_DEG + fanSpan * ratio;
|
|||
|
|
const angleRad = (angleDeg * Math.PI) / 180;
|
|||
|
|
const radius = this.getBaseRadius(ringCount) + ringIndex * this.RING_GAP;
|
|||
|
|
|
|||
|
|
const x = Math.cos(angleRad) * radius;
|
|||
|
|
const y = Math.sin(angleRad) * radius;
|
|||
|
|
|
|||
|
|
const openDelay = (ringLocalIndex + ringIndex * 0.5) * 0.045;
|
|||
|
|
const closeDelay = (ringCount - 1 - ringLocalIndex + ringIndex * 0.4) * 0.032;
|
|||
|
|
|
|||
|
|
btn.style.setProperty('--rt-x', `${x.toFixed(2)}px`);
|
|||
|
|
btn.style.setProperty('--rt-y', `${y.toFixed(2)}px`);
|
|||
|
|
btn.style.setProperty('--rt-open-delay', `${openDelay.toFixed(3)}s`);
|
|||
|
|
btn.style.setProperty('--rt-close-delay', `${closeDelay.toFixed(3)}s`);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private updateLayoutMetrics(): void {
|
|||
|
|
const total = this.items.length;
|
|||
|
|
const ringCount = Math.max(1, Math.ceil(total / this.itemsPerRing));
|
|||
|
|
const maxItemsPerRing = Math.max(1, Math.min(total, this.itemsPerRing));
|
|||
|
|
const maxRadius = this.getBaseRadius(maxItemsPerRing) + (ringCount - 1) * this.RING_GAP;
|
|||
|
|
const size = Math.ceil(maxRadius + this.MAIN_BUTTON_SIZE + this.SUB_BUTTON_SIZE + this.CANVAS_PADDING * 2);
|
|||
|
|
this.maxInteractiveRadius = maxRadius + this.SUB_BUTTON_SIZE * 0.7;
|
|||
|
|
|
|||
|
|
this.wrapper.style.width = `${size}px`;
|
|||
|
|
this.wrapper.style.height = `${size}px`;
|
|||
|
|
this.wrapper.style.setProperty('--rt-main-size', `${this.MAIN_BUTTON_SIZE}px`);
|
|||
|
|
this.wrapper.style.setProperty('--rt-sub-size', `${this.SUB_BUTTON_SIZE}px`);
|
|||
|
|
this.wrapper.style.setProperty('--rt-main-offset', `${(this.MAIN_BUTTON_SIZE - this.SUB_BUTTON_SIZE) / 2}px`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private getBaseRadius(_itemsInRing: number): number {
|
|||
|
|
return this.BASE_RADIUS;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private scheduleCollapse(): void {
|
|||
|
|
if (this.timer) {
|
|||
|
|
clearTimeout(this.timer);
|
|||
|
|
}
|
|||
|
|
this.timer = window.setTimeout(() => {
|
|||
|
|
this.timer = null;
|
|||
|
|
if (this.isPointerInsideToolbar()) {
|
|||
|
|
if (this.isActive) {
|
|||
|
|
this.scheduleCollapse();
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.collapse();
|
|||
|
|
}, this.closeDelay);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private isPointerInsideToolbar(): boolean {
|
|||
|
|
if (this.mainButton.matches(':hover')) {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.itemElements.some((button) => button.matches(':hover'))) {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return this.isPointerInsideFanRegion();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private isPointerInsideFanRegion(): boolean {
|
|||
|
|
if (!Number.isFinite(this.pointerX) || !Number.isFinite(this.pointerY)) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const mainRect = this.mainButton.getBoundingClientRect();
|
|||
|
|
const centerX = mainRect.left + mainRect.width / 2;
|
|||
|
|
const centerY = mainRect.top + mainRect.height / 2;
|
|||
|
|
const dx = this.pointerX - centerX;
|
|||
|
|
const dy = this.pointerY - centerY;
|
|||
|
|
const distance = Math.hypot(dx, dy);
|
|||
|
|
|
|||
|
|
if (distance <= this.MAIN_BUTTON_SIZE / 2) {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (distance > this.maxInteractiveRadius) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let angle = (Math.atan2(dy, dx) * 180) / Math.PI;
|
|||
|
|
if (angle < 0) {
|
|||
|
|
angle += 360;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.FAN_START_DEG <= this.FAN_END_DEG) {
|
|||
|
|
return angle >= this.FAN_START_DEG && angle <= this.FAN_END_DEG;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return angle >= this.FAN_START_DEG || angle <= this.FAN_END_DEG;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private expand(): void {
|
|||
|
|
if (this.isActive || this.items.length === 0) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.isActive = true;
|
|||
|
|
this.wrapper.classList.add('is-active');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private collapse(): void {
|
|||
|
|
if (!this.isActive) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.isActive = false;
|
|||
|
|
this.wrapper.classList.remove('is-active');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private updateLocales(): void {
|
|||
|
|
const mainLabel = t(this.mainButtonLabel);
|
|||
|
|
this.mainButton.title = mainLabel;
|
|||
|
|
this.mainButton.setAttribute('aria-label', mainLabel);
|
|||
|
|
this.itemElements.forEach((el, index) => {
|
|||
|
|
const item = this.items[index];
|
|||
|
|
if (!item) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const text = t(item.label);
|
|||
|
|
el.title = text;
|
|||
|
|
el.setAttribute('aria-label', text);
|
|||
|
|
this.applyItemActiveClass(el, item);
|
|||
|
|
|
|||
|
|
if (!item.icon) {
|
|||
|
|
const iconEl = el.querySelector('.radial-sub-btn-icon');
|
|||
|
|
if (iconEl) {
|
|||
|
|
iconEl.textContent = this.getFallbackLabel(item.label);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private applyItemActiveClass(button: HTMLButtonElement, item: RadialMenuItem): void {
|
|||
|
|
if (!item.isToggle) {
|
|||
|
|
button.classList.remove('is-active');
|
|||
|
|
button.dataset.active = 'false';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const active = this.toggleStateMap.get(item.id) ?? Boolean(item.isActive);
|
|||
|
|
button.classList.toggle('is-active', active);
|
|||
|
|
button.dataset.active = active ? 'true' : 'false';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private getFallbackLabel(label: string): string {
|
|||
|
|
const translated = t(label).trim();
|
|||
|
|
if (!translated) {
|
|||
|
|
return '?';
|
|||
|
|
}
|
|||
|
|
return translated.charAt(0).toUpperCase();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
public setTheme(theme: ThemeConfig): void {
|
|||
|
|
this.wrapper.classList.remove('theme-light', 'theme-dark');
|
|||
|
|
this.wrapper.classList.add(`theme-${theme.name}`);
|
|||
|
|
|
|||
|
|
const style = this.wrapper.style;
|
|||
|
|
style.setProperty('--bim-primary', theme.primary);
|
|||
|
|
style.setProperty('--bim-primary-hover', theme.primaryHover);
|
|||
|
|
style.setProperty('--bim-primary-active', theme.primaryActive);
|
|||
|
|
style.setProperty('--bim-text-inverse', theme.textInverse);
|
|||
|
|
style.setProperty('--bim-icon-inverse', theme.iconInverse);
|
|||
|
|
style.setProperty('--bim-shadow-glow', theme.shadowGlow);
|
|||
|
|
|
|||
|
|
const isDark = theme.name === 'dark';
|
|||
|
|
|
|||
|
|
style.setProperty('--rt-main-bg', isDark ? 'rgba(55, 68, 86, 0.92)' : theme.floatingBtnBg);
|
|||
|
|
style.setProperty('--rt-main-bg-hover', isDark ? 'rgba(66, 82, 104, 0.96)' : theme.floatingBtnBgHover);
|
|||
|
|
style.setProperty('--rt-main-border', isDark ? 'rgba(117, 133, 154, 0.56)' : theme.floatingBtnBorder);
|
|||
|
|
style.setProperty('--rt-main-shadow', isDark ? '0 2px 8px rgba(15, 23, 42, 0.32), 0 4px 12px rgba(15, 23, 42, 0.24)' : theme.floatingBtnShadow);
|
|||
|
|
style.setProperty('--rt-main-shadow-hover', isDark ? '0 4px 12px rgba(15, 23, 42, 0.38), 0 6px 20px rgba(15, 23, 42, 0.3)' : theme.floatingBtnShadowHover);
|
|||
|
|
style.setProperty('--rt-main-icon', isDark ? '#e2e8f0' : theme.floatingIconColor);
|
|||
|
|
style.setProperty('--rt-main-icon-hover', isDark ? '#f8fafc' : theme.floatingIconColorHover);
|
|||
|
|
|
|||
|
|
style.setProperty('--rt-sub-bg', isDark ? 'rgba(55, 68, 86, 0.92)' : theme.floatingBtnBg);
|
|||
|
|
style.setProperty('--rt-sub-bg-hover', isDark ? 'rgba(66, 82, 104, 0.96)' : theme.floatingBtnBgHover);
|
|||
|
|
style.setProperty('--rt-sub-border', isDark ? 'rgba(117, 133, 154, 0.56)' : theme.floatingBtnBorder);
|
|||
|
|
style.setProperty('--rt-sub-shadow', isDark ? '0 2px 8px rgba(15, 23, 42, 0.32), 0 4px 12px rgba(15, 23, 42, 0.24)' : theme.floatingBtnShadow);
|
|||
|
|
style.setProperty('--rt-sub-shadow-hover', isDark ? '0 4px 12px rgba(15, 23, 42, 0.38), 0 6px 20px rgba(15, 23, 42, 0.3)' : theme.floatingBtnShadowHover);
|
|||
|
|
style.setProperty('--rt-sub-icon', isDark ? '#e2e8f0' : theme.floatingIconColor);
|
|||
|
|
style.setProperty('--rt-sub-icon-hover', isDark ? '#f8fafc' : theme.floatingIconColorHover);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
public setItemActive(id: string, active: boolean): void {
|
|||
|
|
const item = this.items.find((entry) => entry.id === id);
|
|||
|
|
if (!item || !item.isToggle) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
item.isActive = active;
|
|||
|
|
this.toggleStateMap.set(id, active);
|
|||
|
|
const button = this.itemButtonMap.get(id);
|
|||
|
|
if (button) {
|
|||
|
|
this.applyItemActiveClass(button, item);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
public init(): void { }
|
|||
|
|
|
|||
|
|
public setLocales(): void {
|
|||
|
|
this.updateLocales();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
public destroy(): void {
|
|||
|
|
if (this.timer) {
|
|||
|
|
clearTimeout(this.timer);
|
|||
|
|
this.timer = null;
|
|||
|
|
}
|
|||
|
|
if (this.unsubscribeTheme) {
|
|||
|
|
this.unsubscribeTheme();
|
|||
|
|
this.unsubscribeTheme = null;
|
|||
|
|
}
|
|||
|
|
if (this.unsubscribeLocale) {
|
|||
|
|
this.unsubscribeLocale();
|
|||
|
|
this.unsubscribeLocale = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
document.removeEventListener('click', this.handleDocumentClick);
|
|||
|
|
document.removeEventListener('mousemove', this.handleDocumentMouseMove);
|
|||
|
|
document.removeEventListener('mouseleave', this.handleDocumentMouseLeave);
|
|||
|
|
document.removeEventListener('visibilitychange', this.handleVisibilityChange);
|
|||
|
|
window.removeEventListener('blur', this.handleWindowBlur);
|
|||
|
|
this.mainButton.removeEventListener('mouseenter', this.handlePointerEnter);
|
|||
|
|
this.mainButton.removeEventListener('mouseleave', this.handlePointerLeave);
|
|||
|
|
this.mainButton.removeEventListener('click', this.handleMainButtonClick);
|
|||
|
|
|
|||
|
|
this.itemElements.forEach((button) => {
|
|||
|
|
button.removeEventListener('mouseenter', this.handlePointerEnter);
|
|||
|
|
button.removeEventListener('mouseleave', this.handlePointerLeave);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (this.wrapper.parentNode) {
|
|||
|
|
this.wrapper.parentNode.removeChild(this.wrapper);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|