@baron1996/klinecharts-runtime 0.9.13 → 0.9.14

package/dist/toolbar/chart-workspace-toolbar.js

@@ -0,0 +1,684 @@
+import { SUPPORTED_OVERLAYS } from '@baron1996/klinecharts-adapter';
+import { MAIN_PANE_INDICATOR_PRESETS } from '../indicator-presentation.js';
+import { registerRuntimeTeardown } from '../lifecycle.js';
+import { CHART_WORKSPACE_TOOLBAR_STYLES } from './chart-workspace-toolbar-styles.js';
+import { createToolbarIcon } from './toolbar-icons.js';
+import { OVERLAY_TOOL_PRESENTATIONS, TEXT_OVERLAY_TYPES, TOOLBAR_GROUPS, } from './toolbar-tools.js';
+let nextWorkspaceToolbarId = 1;
+function runtimeStateCapability(runtime) {
+    const candidate = runtime;
+    return typeof candidate.getRuntimeState === 'function' &&
+        typeof candidate.subscribeRuntimeState === 'function'
+        ? candidate
+        : undefined;
+}
+function createButton(options) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = `baron-chart-workspace-toolbar__button${options.className === undefined ? '' : ` ${options.className}`}`;
+    button.setAttribute('aria-label', options.label);
+    if (options.icon !== undefined) {
+        button.append(createToolbarIcon(options.icon));
+    }
+    if (options.text !== undefined) {
+        button.append(document.createTextNode(options.text));
+    }
+    return button;
+}
+function createSection(label, end = false) {
+    const section = document.createElement('div');
+    section.className = `baron-chart-workspace-toolbar__section${end ? ' baron-chart-workspace-toolbar__section--end' : ''}`;
+    section.setAttribute('role', 'group');
+    section.setAttribute('aria-label', label);
+    return section;
+}
+function createPopover(button, id, cleanupCallbacks) {
+    const element = document.createElement('div');
+    element.id = id;
+    element.className = 'baron-chart-workspace-popover';
+    element.hidden = true;
+    button.setAttribute('aria-controls', id);
+    button.setAttribute('aria-expanded', 'false');
+    document.body.append(element);
+    const position = () => {
+        const anchor = button.getBoundingClientRect();
+        const bounds = element.getBoundingClientRect();
+        const left = Math.min(Math.max(8, anchor.left), Math.max(8, window.innerWidth - bounds.width - 8));
+        element.style.left = `${Math.round(left)}px`;
+        element.style.top = `${Math.round(anchor.bottom + 7)}px`;
+    };
+    const close = () => {
+        button.setAttribute('aria-expanded', 'false');
+        element.classList.remove('baron-chart-workspace-popover--open');
+        element.hidden = true;
+    };
+    const open = () => {
+        element.hidden = false;
+        position();
+        button.setAttribute('aria-expanded', 'true');
+        requestAnimationFrame(() => {
+            if (!element.hidden) {
+                element.classList.add('baron-chart-workspace-popover--open');
+            }
+        });
+    };
+    const toggle = () => {
+        if (element.hidden) {
+            open();
+        }
+        else {
+            close();
+        }
+    };
+    const handleButtonClick = () => toggle();
+    const handleOutsidePointer = (event) => {
+        const target = event.target;
+        if (target instanceof Node &&
+            !element.contains(target) &&
+            !button.contains(target)) {
+            close();
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Escape' && !element.hidden) {
+            close();
+            button.focus();
+        }
+    };
+    const handleViewportChange = () => close();
+    button.addEventListener('click', handleButtonClick);
+    document.addEventListener('pointerdown', handleOutsidePointer, true);
+    document.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('resize', handleViewportChange);
+    window.addEventListener('scroll', handleViewportChange, true);
+    cleanupCallbacks.push(() => {
+        button.removeEventListener('click', handleButtonClick);
+        document.removeEventListener('pointerdown', handleOutsidePointer, true);
+        document.removeEventListener('keydown', handleKeyDown);
+        window.removeEventListener('resize', handleViewportChange);
+        window.removeEventListener('scroll', handleViewportChange, true);
+    });
+    return {
+        element,
+        toggle,
+        close,
+        destroy() {
+            close();
+            element.remove();
+        },
+    };
+}
+function createTooltip(cleanupCallbacks) {
+    const tooltip = document.createElement('div');
+    tooltip.className = 'baron-chart-workspace-tooltip';
+    tooltip.setAttribute('role', 'tooltip');
+    tooltip.hidden = true;
+    document.body.append(tooltip);
+    const hide = () => {
+        tooltip.hidden = true;
+    };
+    const bind = (button, label) => {
+        const show = () => {
+            const bounds = button.getBoundingClientRect();
+            tooltip.textContent = label;
+            tooltip.hidden = false;
+            const tooltipBounds = tooltip.getBoundingClientRect();
+            const left = Math.min(bounds.right + 8, window.innerWidth - tooltipBounds.width - 8);
+            const top = Math.min(Math.max(8, bounds.top + (bounds.height - tooltipBounds.height) / 2), window.innerHeight - tooltipBounds.height - 8);
+            tooltip.style.left = `${Math.round(left)}px`;
+            tooltip.style.top = `${Math.round(top)}px`;
+        };
+        button.addEventListener('mouseenter', show);
+        button.addEventListener('mouseleave', hide);
+        button.addEventListener('focus', show);
+        button.addEventListener('blur', hide);
+        cleanupCallbacks.push(() => {
+            button.removeEventListener('mouseenter', show);
+            button.removeEventListener('mouseleave', hide);
+            button.removeEventListener('focus', show);
+            button.removeEventListener('blur', hide);
+        });
+    };
+    return { bind, hide, destroy: () => tooltip.remove() };
+}
+function applyHostActionState(control, state) {
+    if (state.pressed !== undefined) {
+        control.button.setAttribute('aria-pressed', String(state.pressed));
+    }
+    if (state.disabled !== undefined) {
+        control.button.disabled = state.disabled;
+    }
+    if (state.pending !== undefined) {
+        control.button.setAttribute('aria-busy', String(state.pending));
+    }
+    if ('errorMessage' in state) {
+        const message = state.errorMessage?.trim() ?? '';
+        control.error.textContent = message;
+        control.error.hidden = message.length === 0;
+        if (message.length === 0) {
+            control.button.removeAttribute('aria-errormessage');
+        }
+        else {
+            control.button.setAttribute('aria-errormessage', control.error.id);
+        }
+    }
+}
+function defaultTimezoneChoices(runtime) {
+    const chartTimezone = runtime.getDisplayTimezone();
+    const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
+    return [
+        {
+            value: 'chart',
+            label: `图表 · ${chartTimezone}`,
+            timezone: chartTimezone,
+        },
+        {
+            value: 'local',
+            label: `本机 · ${localTimezone}`,
+            timezone: localTimezone,
+        },
+        { value: 'utc', label: 'UTC', timezone: 'UTC' },
+    ];
+}
+/**
+ * 创建 Pro 风格的复合工具栏。Baron 只发出周期/复权宿主意图，
+ * 指标、展示时区、价格轴和主序列在浏览器 Runtime 内即时生效。
+ */
+export function createChartWorkspaceToolbar(containers, runtime, options = {}) {
+    if (containers.top === containers.left) {
+        throw new TypeError('CHART_WORKSPACE_TOOLBAR_CONTAINERS_MUST_DIFFER');
+    }
+    const descriptor = runtime.getRuntimeCapabilityDescriptor({
+        hostActions: [
+            ...(options.periodActions ?? []),
+            ...(options.settingsHostActions ?? []),
+        ],
+    });
+    const toolbarId = nextWorkspaceToolbarId++;
+    const cleanupCallbacks = [];
+    const dataControls = [];
+    const drawingControls = [];
+    const hostActionControls = new Map();
+    const openPopovers = [];
+    const style = document.createElement('style');
+    style.dataset.baronChartWorkspaceToolbarStyles = '';
+    style.textContent = CHART_WORKSPACE_TOOLBAR_STYLES;
+    const top = document.createElement('div');
+    top.className =
+        'baron-chart-workspace-toolbar baron-chart-workspace-toolbar--top';
+    top.setAttribute('role', 'toolbar');
+    top.setAttribute('aria-label', 'K 线图表工具');
+    top.append(style);
+    const left = document.createElement('div');
+    left.className =
+        'baron-chart-workspace-toolbar baron-chart-workspace-toolbar--left';
+    left.setAttribute('role', 'toolbar');
+    left.setAttribute('aria-label', 'K 线画图工具');
+    const tooltip = createTooltip(cleanupCallbacks);
+    const hostActions = [
+        ...(options.periodActions ?? []),
+        ...(options.settingsHostActions ?? []),
+    ];
+    for (const action of hostActions) {
+        if (hostActionControls.has(action.actionId)) {
+            throw new TypeError(`CHART_WORKSPACE_TOOLBAR_DUPLICATE_HOST_ACTION: ${action.actionId}`);
+        }
+        const button = createButton({ label: action.label, text: action.label });
+        button.dataset.hostAction = action.actionId;
+        button.setAttribute('aria-pressed', String(action.pressed ?? false));
+        button.setAttribute('aria-busy', String(action.pending ?? false));
+        button.disabled = action.disabled ?? false;
+        const error = document.createElement('div');
+        error.className = 'baron-chart-workspace-toolbar__error';
+        error.id = `baron-workspace-host-error-${toolbarId}-${hostActionControls.size}`;
+        error.hidden = true;
+        error.setAttribute('role', 'alert');
+        const control = { button, error };
+        hostActionControls.set(action.actionId, control);
+        applyHostActionState(control, {
+            errorMessage: action.errorMessage ?? null,
+        });
+        const request = () => runtime.requestHostAction(action.actionId, runtime.getSelectedDrawingId() ?? null);
+        button.addEventListener('click', request);
+        cleanupCallbacks.push(() => button.removeEventListener('click', request));
+    }
+    const periodSection = createSection('周期');
+    for (const action of options.periodActions ?? []) {
+        const control = hostActionControls.get(action.actionId);
+        control.button.classList.add('baron-chart-workspace-toolbar__period');
+        periodSection.append(control.button, control.error);
+    }
+    top.append(periodSection);
+    const primarySection = createSection('图表能力');
+    const divider = document.createElement('span');
+    divider.className = 'baron-chart-workspace-toolbar__divider';
+    divider.setAttribute('aria-hidden', 'true');
+    primarySection.append(divider);
+    const indicatorButton = createButton({
+        label: '主图指标',
+        text: '指标',
+        icon: 'indicator',
+    });
+    indicatorButton.dataset.action = 'main-indicators';
+    primarySection.append(indicatorButton);
+    dataControls.push(indicatorButton);
+    const indicatorPopover = createPopover(indicatorButton, `baron-workspace-indicators-${toolbarId}`, cleanupCallbacks);
+    openPopovers.push(indicatorPopover);
+    const indicatorTitle = document.createElement('div');
+    indicatorTitle.className = 'baron-chart-workspace-popover__title';
+    indicatorTitle.textContent = '主图指标 · 浏览器实时计算';
+    const indicatorGrid = document.createElement('div');
+    indicatorGrid.className = 'baron-chart-workspace-popover__grid';
+    const indicatorButtons = new Map();
+    const refreshIndicators = () => {
+        const activeNames = new Set(runtime.listMainIndicators().map((indicator) => indicator.name));
+        for (const preset of MAIN_PANE_INDICATOR_PRESETS) {
+            indicatorButtons
+                .get(preset.name)
+                ?.setAttribute('aria-pressed', String(activeNames.has(preset.name)));
+        }
+    };
+    for (const preset of MAIN_PANE_INDICATOR_PRESETS) {
+        const button = createButton({
+            label: `${preset.label} 主图指标`,
+            text: preset.label,
+        });
+        button.dataset.indicatorName = preset.name;
+        button.setAttribute('aria-pressed', 'false');
+        const toggle = () => {
+            const current = runtime
+                .listMainIndicators()
+                .filter((indicator) => indicator.name === preset.name);
+            if (current.length > 0) {
+                for (const indicator of current) {
+                    runtime.removeMainIndicator(indicator.id);
+                }
+            }
+            else {
+                runtime.addMainIndicator({
+                    name: preset.name,
+                    calcParams: preset.calcParams,
+                });
+            }
+            refreshIndicators();
+        };
+        button.addEventListener('click', toggle);
+        cleanupCallbacks.push(() => button.removeEventListener('click', toggle));
+        indicatorButtons.set(preset.name, button);
+        indicatorGrid.append(button);
+    }
+    indicatorPopover.element.append(indicatorTitle, indicatorGrid);
+    const timezoneChoices = options.displayTimezoneChoices ?? defaultTimezoneChoices(runtime);
+    const timezoneLabel = document.createElement('label');
+    timezoneLabel.className = 'baron-chart-workspace-toolbar__timezone';
+    timezoneLabel.append(createToolbarIcon('timezone'));
+    const timezoneSelect = document.createElement('select');
+    timezoneSelect.className = 'baron-chart-workspace-toolbar__select';
+    timezoneSelect.dataset.action = 'display-timezone';
+    timezoneSelect.setAttribute('aria-label', '显示时区');
+    for (const choice of timezoneChoices) {
+        const option = document.createElement('option');
+        option.value = choice.value;
+        option.textContent = choice.label;
+        timezoneSelect.append(option);
+    }
+    const initialTimezoneValue = options.activeDisplayTimezoneValue ??
+        timezoneChoices.find((choice) => choice.timezone === runtime.getDisplayTimezone())?.value;
+    if (initialTimezoneValue !== undefined) {
+        timezoneSelect.value = initialTimezoneValue;
+    }
+    let committedTimezoneValue = timezoneSelect.value;
+    const changeTimezone = () => {
+        const choice = timezoneChoices.find((candidate) => candidate.value === timezoneSelect.value);
+        if (choice === undefined) {
+            return;
+        }
+        try {
+            runtime.setDisplayTimezone(choice.timezone);
+            committedTimezoneValue = choice.value;
+            options.onDisplayTimezoneChange?.(choice);
+        }
+        catch (error) {
+            timezoneSelect.value = committedTimezoneValue;
+            throw error;
+        }
+    };
+    timezoneSelect.addEventListener('change', changeTimezone);
+    cleanupCallbacks.push(() => timezoneSelect.removeEventListener('change', changeTimezone));
+    timezoneLabel.append(timezoneSelect);
+    primarySection.append(timezoneLabel);
+    top.append(primarySection);
+    const endSection = createSection('设置与全屏', true);
+    const settingsButton = createButton({ label: '图表设置', icon: 'settings' });
+    settingsButton.dataset.action = 'settings';
+    endSection.append(settingsButton);
+    const settingsPopover = createPopover(settingsButton, `baron-workspace-settings-${toolbarId}`, cleanupCallbacks);
+    openPopovers.push(settingsPopover);
+    if ((options.settingsHostActions?.length ?? 0) > 0) {
+        const group = document.createElement('div');
+        group.className = 'baron-chart-workspace-popover__group';
+        const title = document.createElement('div');
+        title.className = 'baron-chart-workspace-popover__title';
+        title.textContent = '宿主设置';
+        const grid = document.createElement('div');
+        grid.className = 'baron-chart-workspace-popover__grid';
+        for (const action of options.settingsHostActions ?? []) {
+            const control = hostActionControls.get(action.actionId);
+            grid.append(control.button);
+            group.append(control.error);
+        }
+        group.prepend(title, grid);
+        settingsPopover.element.append(group);
+    }
+    const chartSettingsGroup = document.createElement('div');
+    chartSettingsGroup.className = 'baron-chart-workspace-popover__group';
+    const chartSettingsTitle = document.createElement('div');
+    chartSettingsTitle.className = 'baron-chart-workspace-popover__title';
+    chartSettingsTitle.textContent = '图表显示';
+    chartSettingsGroup.append(chartSettingsTitle);
+    if (descriptor.valueAxis.mutable) {
+        const row = document.createElement('label');
+        row.className = 'baron-chart-workspace-popover__row';
+        const label = document.createElement('span');
+        label.className = 'baron-chart-workspace-popover__label';
+        label.textContent = '价格轴';
+        const select = document.createElement('select');
+        select.className = 'baron-chart-workspace-toolbar__select';
+        select.dataset.action = 'price-scale';
+        for (const scale of descriptor.valueAxis.supportedScales) {
+            const option = document.createElement('option');
+            option.value = scale;
+            option.textContent = scale === 'linear' ? '线性' : '对数';
+            select.append(option);
+        }
+        select.value = descriptor.valueAxis.activeScale;
+        let committedScale = descriptor.valueAxis.activeScale;
+        const changeScale = async () => {
+            try {
+                await runtime.setValueAxisScale(select.value);
+                committedScale = select.value;
+            }
+            catch (error) {
+                select.value = committedScale;
+                throw error;
+            }
+        };
+        select.addEventListener('change', changeScale);
+        cleanupCallbacks.push(() => select.removeEventListener('change', changeScale));
+        dataControls.push(select);
+        row.append(label, select);
+        chartSettingsGroup.append(row);
+    }
+    if (descriptor.mainSeriesPresentation !== null) {
+        const mainSeries = descriptor.mainSeriesPresentation;
+        const row = document.createElement('label');
+        row.className = 'baron-chart-workspace-popover__row';
+        const label = document.createElement('span');
+        label.className = 'baron-chart-workspace-popover__label';
+        label.textContent = '主序列';
+        const select = document.createElement('select');
+        select.className = 'baron-chart-workspace-toolbar__select';
+        select.dataset.action = 'main-series';
+        for (const presentation of mainSeries.presentations) {
+            const option = document.createElement('option');
+            option.value = presentation.type;
+            option.textContent = presentationLabel(presentation.type);
+            select.append(option);
+        }
+        select.value = mainSeries.activeType;
+        const changeMainSeries = () => {
+            const presentation = mainSeries.presentations.find((candidate) => candidate.type === select.value);
+            if (presentation !== undefined) {
+                select.value =
+                    runtime.setMainSeriesPresentation(presentation).activeType;
+            }
+        };
+        select.addEventListener('change', changeMainSeries);
+        cleanupCallbacks.push(() => select.removeEventListener('change', changeMainSeries));
+        dataControls.push(select);
+        row.append(label, select);
+        chartSettingsGroup.append(row);
+    }
+    settingsPopover.element.append(chartSettingsGroup);
+    if (options.fullscreenControl !== 'hidden') {
+        const fullscreenTarget = options.fullscreenTarget ?? containers.top.parentElement;
+        const fullscreenButton = createButton({
+            label: '进入全屏',
+            icon: 'fullscreen',
+        });
+        fullscreenButton.dataset.action = 'fullscreen';
+        fullscreenButton.disabled =
+            fullscreenTarget === null ||
+                typeof fullscreenTarget.requestFullscreen !== 'function';
+        const refreshFullscreen = () => {
+            const active = fullscreenTarget !== null &&
+                document.fullscreenElement === fullscreenTarget;
+            fullscreenButton.setAttribute('aria-pressed', String(active));
+            fullscreenButton.setAttribute('aria-label', active ? '退出全屏' : '进入全屏');
+            fullscreenButton.replaceChildren(createToolbarIcon(active ? 'fullscreenExit' : 'fullscreen'));
+        };
+        const toggleFullscreen = async () => {
+            if (document.fullscreenElement !== null) {
+                await document.exitFullscreen();
+            }
+            else {
+                await fullscreenTarget?.requestFullscreen();
+            }
+        };
+        fullscreenButton.addEventListener('click', toggleFullscreen);
+        document.addEventListener('fullscreenchange', refreshFullscreen);
+        cleanupCallbacks.push(() => fullscreenButton.removeEventListener('click', toggleFullscreen), () => document.removeEventListener('fullscreenchange', refreshFullscreen));
+        endSection.append(fullscreenButton);
+    }
+    top.append(endSection);
+    const drawableTypes = (descriptor.drawingTypes.length === 0
+        ? SUPPORTED_OVERLAYS
+        : descriptor.drawingTypes);
+    const overlayButtons = [];
+    for (const group of TOOLBAR_GROUPS) {
+        if (group.id === 'edit' || group.id === 'action') {
+            continue;
+        }
+        const section = createSection(group.label);
+        for (const overlayType of drawableTypes) {
+            const presentation = OVERLAY_TOOL_PRESENTATIONS[overlayType];
+            if (presentation.group !== group.id) {
+                continue;
+            }
+            const button = createButton({
+                label: presentation.label,
+                icon: presentation.icon,
+            });
+            button.dataset.overlayType = overlayType;
+            button.setAttribute('aria-pressed', 'false');
+            const startDrawing = (text) => {
+                runtime.startDrawing(overlayType, text === undefined ? {} : { text });
+                for (const candidate of overlayButtons) {
+                    candidate.setAttribute('aria-pressed', String(candidate === button));
+                }
+                tooltip.hide();
+            };
+            if (TEXT_OVERLAY_TYPES.has(overlayType)) {
+                const textPopover = createPopover(button, `baron-workspace-text-${toolbarId}-${overlayType}`, cleanupCallbacks);
+                openPopovers.push(textPopover);
+                const form = document.createElement('form');
+                form.className = 'baron-chart-workspace-popover__text-form';
+                const input = document.createElement('input');
+                input.type = 'text';
+                input.placeholder = '输入标注文本';
+                input.setAttribute('aria-label', `${presentation.label}文本`);
+                const confirm = createButton({
+                    label: `开始绘制${presentation.label}`,
+                    text: '开始绘制',
+                });
+                confirm.type = 'submit';
+                const submit = (event) => {
+                    event.preventDefault();
+                    startDrawing(input.value);
+                    textPopover.close();
+                };
+                form.addEventListener('submit', submit);
+                cleanupCallbacks.push(() => form.removeEventListener('submit', submit));
+                const focusInput = () => {
+                    requestAnimationFrame(() => {
+                        if (!textPopover.element.hidden) {
+                            input.focus();
+                        }
+                    });
+                };
+                button.addEventListener('click', focusInput);
+                cleanupCallbacks.push(() => button.removeEventListener('click', focusInput));
+                dataControls.push(input, confirm);
+                form.append(input, confirm);
+                textPopover.element.append(form);
+            }
+            else {
+                const start = () => startDrawing();
+                button.addEventListener('click', start);
+                cleanupCallbacks.push(() => button.removeEventListener('click', start));
+            }
+            tooltip.bind(button, presentation.label);
+            overlayButtons.push(button);
+            drawingControls.push(button);
+            dataControls.push(button);
+            section.append(button);
+        }
+        if (section.childElementCount > 0) {
+            left.append(section);
+        }
+    }
+    const drawingActions = createSection('标注操作');
+    const clearButton = createButton({ label: '清空全部标注', icon: 'clearAll' });
+    clearButton.dataset.action = 'clear-all';
+    const clearDrawings = () => {
+        for (const drawing of runtime.listDrawings()) {
+            if (!drawing.locked) {
+                runtime.removeDrawing(drawing.id);
+            }
+        }
+        runtime.selectDrawing(null);
+    };
+    clearButton.addEventListener('click', clearDrawings);
+    cleanupCallbacks.push(() => clearButton.removeEventListener('click', clearDrawings));
+    tooltip.bind(clearButton, '清空全部标注');
+    drawingControls.push(clearButton);
+    dataControls.push(clearButton);
+    drawingActions.append(clearButton);
+    left.append(drawingActions);
+    containers.top.append(top);
+    containers.left.append(left);
+    const stateCapability = runtimeStateCapability(runtime);
+    let runtimeReady = stateCapability === undefined;
+    let hostDataDisabled = false;
+    let hostDrawingDisabled = false;
+    const applyDisabledState = () => {
+        for (const control of dataControls) {
+            control.disabled = !runtimeReady || hostDataDisabled;
+        }
+        if (hostDrawingDisabled) {
+            for (const control of drawingControls) {
+                control.disabled = true;
+            }
+        }
+    };
+    let unsubscribeIndicatorChanges;
+    if (stateCapability !== undefined) {
+        const applyRuntimeState = (state) => {
+            runtimeReady = state === 'ready';
+            top.dataset.runtimeState = state;
+            left.dataset.runtimeState = state;
+            if (runtimeReady) {
+                refreshIndicators();
+                unsubscribeIndicatorChanges ??=
+                    runtime.subscribeDrawingChanges(refreshIndicators);
+            }
+            applyDisabledState();
+        };
+        applyRuntimeState(stateCapability.getRuntimeState());
+        cleanupCallbacks.push(stateCapability.subscribeRuntimeState(applyRuntimeState));
+    }
+    else {
+        refreshIndicators();
+        unsubscribeIndicatorChanges =
+            runtime.subscribeDrawingChanges(refreshIndicators);
+    }
+    cleanupCallbacks.push(() => unsubscribeIndicatorChanges?.());
+    let destroyed = false;
+    let unregisterRuntime = () => { };
+    const toolbar = {
+        topElement: top,
+        leftElement: left,
+        setDataActionsDisabled(disabled) {
+            if (destroyed) {
+                throw new Error('CHART_WORKSPACE_TOOLBAR_DESTROYED');
+            }
+            hostDataDisabled = disabled;
+            applyDisabledState();
+        },
+        setDrawingActionsDisabled(disabled) {
+            if (destroyed) {
+                throw new Error('CHART_WORKSPACE_TOOLBAR_DESTROYED');
+            }
+            hostDrawingDisabled = disabled;
+            applyDisabledState();
+        },
+        setHostActionState(actionId, state) {
+            if (destroyed) {
+                throw new Error('CHART_WORKSPACE_TOOLBAR_DESTROYED');
+            }
+            const control = hostActionControls.get(actionId);
+            if (control === undefined) {
+                throw new TypeError(`CHART_WORKSPACE_TOOLBAR_UNKNOWN_HOST_ACTION: ${actionId}`);
+            }
+            applyHostActionState(control, state);
+        },
+        setDisplayTimezoneChoice(value) {
+            if (destroyed) {
+                throw new Error('CHART_WORKSPACE_TOOLBAR_DESTROYED');
+            }
+            const choice = timezoneChoices.find((candidate) => candidate.value === value);
+            if (choice === undefined) {
+                throw new TypeError(`CHART_WORKSPACE_TOOLBAR_UNKNOWN_TIMEZONE: ${value}`);
+            }
+            runtime.setDisplayTimezone(choice.timezone);
+            timezoneSelect.value = value;
+            committedTimezoneValue = value;
+        },
+        destroy() {
+            if (destroyed) {
+                return;
+            }
+            destroyed = true;
+            unregisterRuntime();
+            for (const cleanup of cleanupCallbacks) {
+                cleanup();
+            }
+            for (const popover of openPopovers) {
+                popover.destroy();
+            }
+            tooltip.destroy();
+            top.remove();
+            left.remove();
+        },
+    };
+    unregisterRuntime = registerRuntimeTeardown(runtime, () => toolbar.destroy());
+    return toolbar;
+}
+function presentationLabel(type) {
+    switch (type) {
+        case 'candle_solid':
+            return '实心蜡烛';
+        case 'candle_stroke':
+            return '描边蜡烛';
+        case 'candle_up_stroke':
+            return '上涨描边';
+        case 'candle_down_stroke':
+            return '下跌描边';
+        case 'ohlc':
+            return 'OHLC';
+        case 'area':
+            return '收盘价折线';
+        default:
+            return type;
+    }
+}