@baron1996/klinecharts-runtime 0.9.20 → 0.9.21

package/README.md

@@ -4,7 +4,7 @@ Browser editing runtime and standard annotation toolbar for deterministic KLineC
 ChartScene files.
 
 ```bash
-npm install --save-exact @baron1996/kline-scene-schema@0.9.20 @baron1996/klinecharts-runtime@0.9.20
+npm install --save-exact @baron1996/kline-scene-schema@0.9.21 @baron1996/klinecharts-runtime@0.9.21
 ```
 
 ```ts

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 /** Web Runtime npm 包版本；ChartScene runtimeVersion 是独立的数据契约版本。 */
-export declare const WEB_RUNTIME_PACKAGE_VERSION: "0.9.20";
+export declare const WEB_RUNTIME_PACKAGE_VERSION: "0.9.21";
 export { SUPPORTED_OVERLAYS } from '@baron1996/klinecharts-adapter';
 export * from './cross-period/coordinator.js';
 export * from './drawing/capabilities.js';

package/dist/index.js

@@ -1,5 +1,5 @@
 /** Web Runtime npm 包版本；ChartScene runtimeVersion 是独立的数据契约版本。 */
-export const WEB_RUNTIME_PACKAGE_VERSION = '0.9.20';
+export const WEB_RUNTIME_PACKAGE_VERSION = '0.9.21';
 export { SUPPORTED_OVERLAYS } from '@baron1996/klinecharts-adapter';
 export * from './cross-period/coordinator.js';
 export * from './drawing/capabilities.js';

package/dist/toolbar/chart-workspace-toolbar-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-workspace-toolbar-styles.d.ts","sourceRoot":"","sources":["../../src/toolbar/chart-workspace-toolbar-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,8BAA8B,QAoN1C,CAAC"}
+{"version":3,"file":"chart-workspace-toolbar-styles.d.ts","sourceRoot":"","sources":["../../src/toolbar/chart-workspace-toolbar-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,8BAA8B,QAkP1C,CAAC"}

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

@@ -166,9 +166,37 @@ export const CHART_WORKSPACE_TOOLBAR_STYLES = String.raw `
 .baron-chart-workspace-popover__grid { display: grid; grid-template-columns: repeat(3, minmax(58px, 1fr)); gap: 5px; }
 .baron-chart-workspace-popover__grid .baron-chart-workspace-toolbar__button { width: 100%; border: 1px solid rgba(231, 233, 238, 1); }
 .baron-chart-workspace-popover__group + .baron-chart-workspace-popover__group { padding-top: 10px; margin-top: 10px; border-top: 1px solid rgba(233, 235, 239, 1); }
-.baron-chart-workspace-popover__row { display: grid; grid-template-columns: 76px minmax(120px, 1fr); align-items: center; gap: 10px; min-height: 34px; }
+.baron-chart-workspace-popover__settings { display: grid; gap: 8px; }
+.baron-chart-workspace-popover__row { display: grid; grid-template-columns: 56px minmax(152px, 1fr); align-items: center; gap: 12px; min-height: 32px; }
 .baron-chart-workspace-popover__label { color: rgba(102, 108, 122, 1); font-size: 11px; }
+.baron-chart-workspace-popover__control { display: grid; min-width: 0; gap: 4px; }
 .baron-chart-workspace-popover__row .baron-chart-workspace-toolbar__select { width: 100%; max-width: none; background: rgba(247, 248, 250, 1); border: 1px solid rgba(226, 228, 233, 1); border-radius: 6px; }
+.baron-chart-workspace-popover__segmented {
+	display: inline-flex;
+	width: 100%;
+	padding: 2px;
+	background: rgba(244, 246, 249, 1);
+	border: 1px solid rgba(226, 228, 233, 1);
+	border-radius: 999px;
+}
+.baron-chart-workspace-popover__segmented .baron-chart-workspace-popover__segment {
+	flex: 1 1 0;
+	min-width: 0;
+	height: 26px;
+	padding: 0 10px;
+	border-radius: 999px;
+	font-size: 11px;
+	transition: color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
+}
+.baron-chart-workspace-popover__segmented .baron-chart-workspace-popover__segment:hover:not(:disabled) {
+	color: rgba(41, 98, 255, 1);
+	background: rgba(41, 98, 255, .06);
+}
+.baron-chart-workspace-popover__segmented .baron-chart-workspace-popover__segment[aria-pressed="true"] {
+	color: rgba(41, 98, 255, 1);
+	background: rgba(255, 255, 255, 1);
+	box-shadow: 0 1px 3px rgba(20, 23, 31, .14);
+}
 .baron-chart-workspace-popover__text-form { display: flex; gap: 6px; }
 .baron-chart-workspace-popover__text-form input {
 	width: 180px;
@@ -204,10 +232,12 @@ export const CHART_WORKSPACE_TOOLBAR_STYLES = String.raw `
 	.baron-chart-workspace-toolbar--top { height: 42px; padding: 0 4px; }
 	.baron-chart-workspace-toolbar__timezone { padding-left: 3px; }
 	.baron-chart-workspace-toolbar__select { max-width: 112px; }
+	.baron-chart-workspace-popover__row { grid-template-columns: 50px minmax(146px, 1fr); gap: 8px; }
 }
 
 @media (prefers-reduced-motion: reduce) {
 	.baron-chart-workspace-toolbar__button,
-	.baron-chart-workspace-popover { transition: none; }
+	.baron-chart-workspace-popover,
+	.baron-chart-workspace-popover__segmented .baron-chart-workspace-popover__segment { transition: none; }
 }
 `;

package/dist/toolbar/chart-workspace-toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-workspace-toolbar.d.ts","sourceRoot":"","sources":["../../src/toolbar/chart-workspace-toolbar.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACX,gCAAgC,EAChC,wBAAwB,EACxB,8BAA8B,EAC9B,0BAA0B,EAC1B,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AAaxF,KAAK,qBAAqB,GAAG,wBAAwB,GACpD,0BAA0B,GAC1B,8BAA8B,GAC9B,gCAAgC,CAAC;AAElC,MAAM,WAAW,8BAA8B;IAC9C,6CAA6C;IAC7C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,4BAA4B;IAC5C,uDAAuD;IACvD,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAC;IACzD,8BAA8B;IAC9B,QAAQ,CAAC,mBAAmB,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAC;IAC/D,QAAQ,CAAC,sBAAsB,CAAC,EAAE,SAAS,8BAA8B,EAAE,CAAC;IAC5E,QAAQ,CAAC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IAC7C,QAAQ,CAAC,uBAAuB,CAAC,EAAE,CAClC,MAAM,EAAE,8BAA8B,KAClC,IAAI,CAAC;IACV,QAAQ,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IACxC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAClD;AAED,MAAM,WAAW,+BAA+B;IAC/C,QAAQ,CAAC,GAAG,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,qBAAqB;IACrC,QAAQ,CAAC,UAAU,EAAE,WAAW,CAAC;IACjC,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAClC,sBAAsB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAChD,yBAAyB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IACnD,kBAAkB,CACjB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE;QACN,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;QAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;QAC3B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACtC,GACC,IAAI,CAAC;IACR,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9C,OAAO,IAAI,IAAI,CAAC;CAChB;AAiTD;;;GAGG;AACH,wBAAgB,2BAA2B,CAC1C,UAAU,EAAE,+BAA+B,EAC3C,OAAO,EAAE,qBAAqB,EAC9B,OAAO,GAAE,4BAAiC,GACxC,qBAAqB,CA0jBvB"}
+{"version":3,"file":"chart-workspace-toolbar.d.ts","sourceRoot":"","sources":["../../src/toolbar/chart-workspace-toolbar.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACX,gCAAgC,EAChC,wBAAwB,EACxB,8BAA8B,EAC9B,0BAA0B,EAC1B,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AAaxF,KAAK,qBAAqB,GAAG,wBAAwB,GACpD,0BAA0B,GAC1B,8BAA8B,GAC9B,gCAAgC,CAAC;AAElC,MAAM,WAAW,8BAA8B;IAC9C,6CAA6C;IAC7C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,4BAA4B;IAC5C,uDAAuD;IACvD,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAC;IACzD,8BAA8B;IAC9B,QAAQ,CAAC,mBAAmB,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAC;IAC/D,QAAQ,CAAC,sBAAsB,CAAC,EAAE,SAAS,8BAA8B,EAAE,CAAC;IAC5E,QAAQ,CAAC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IAC7C,QAAQ,CAAC,uBAAuB,CAAC,EAAE,CAClC,MAAM,EAAE,8BAA8B,KAClC,IAAI,CAAC;IACV,QAAQ,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IACxC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAClD;AAED,MAAM,WAAW,+BAA+B;IAC/C,QAAQ,CAAC,GAAG,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,qBAAqB;IACrC,QAAQ,CAAC,UAAU,EAAE,WAAW,CAAC;IACjC,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAClC,sBAAsB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAChD,yBAAyB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IACnD,kBAAkB,CACjB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE;QACN,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;QAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;QAC3B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACtC,GACC,IAAI,CAAC;IACR,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9C,OAAO,IAAI,IAAI,CAAC;CAChB;AAyVD;;;GAGG;AACH,wBAAgB,2BAA2B,CAC1C,UAAU,EAAE,+BAA+B,EAC3C,OAAO,EAAE,qBAAqB,EAC9B,OAAO,GAAE,4BAAiC,GACxC,qBAAqB,CA2jBvB"}

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

@@ -44,6 +44,31 @@ function createSection(label, end = false) {
     section.setAttribute('aria-label', label);
     return section;
 }
+function createSettingsRow(labelText, settingName) {
+    const row = document.createElement('div');
+    row.className = 'baron-chart-workspace-popover__row';
+    row.dataset.settingName = settingName;
+    const label = document.createElement('span');
+    label.className = 'baron-chart-workspace-popover__label';
+    label.textContent = labelText;
+    const control = document.createElement('div');
+    control.className = 'baron-chart-workspace-popover__control';
+    row.append(label, control);
+    return { row, control };
+}
+function createSegmentedControl(label, action) {
+    const control = document.createElement('div');
+    control.className = 'baron-chart-workspace-popover__segmented';
+    control.dataset.action = action;
+    control.setAttribute('role', 'group');
+    control.setAttribute('aria-label', label);
+    return control;
+}
+function selectSegment(buttons, activeValue) {
+    for (const [value, button] of buttons) {
+        button.setAttribute('aria-pressed', String(value === activeValue));
+    }
+}
 function createPopover(button, id, cleanupCallbacks) {
     const element = document.createElement('div');
     element.id = id;
@@ -403,71 +428,66 @@ export function createChartWorkspaceToolbar(containers, runtime, options = {}) {
     endSection.append(settingsButton);
     const settingsPopover = createPopover(settingsButton, `baron-workspace-settings-${toolbarId}`, cleanupCallbacks);
     openPopovers.push(settingsPopover);
+    const settingsList = document.createElement('div');
+    settingsList.className = 'baron-chart-workspace-popover__settings';
     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';
+        const { row, control } = createSettingsRow('复权', 'adjustment');
+        const segmented = createSegmentedControl('复权', 'host-settings');
         for (const action of options.settingsHostActions ?? []) {
-            const control = hostActionControls.get(action.actionId);
-            grid.append(control.button);
-            group.append(control.error);
+            const hostControl = hostActionControls.get(action.actionId);
+            hostControl.button.classList.add('baron-chart-workspace-popover__segment');
+            segmented.append(hostControl.button);
+            control.append(hostControl.error);
         }
-        group.prepend(title, grid);
-        settingsPopover.element.append(group);
+        control.prepend(segmented);
+        settingsList.append(row);
     }
-    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';
+        const { row, control } = createSettingsRow('价格轴', 'price-scale');
+        const segmented = createSegmentedControl('价格轴', 'price-scale');
+        const scaleButtons = new Map();
         for (const scale of descriptor.valueAxis.supportedScales) {
-            const option = document.createElement('option');
-            option.value = scale;
-            option.textContent = scale === 'linear' ? '线性' : '对数';
-            select.append(option);
+            const label = scale === 'linear' ? '线性' : '对数';
+            const button = createButton({
+                label: `${label}价格轴`,
+                text: label,
+                className: 'baron-chart-workspace-popover__segment',
+            });
+            button.dataset.priceScale = scale;
+            button.setAttribute('aria-pressed', String(scale === descriptor.valueAxis.activeScale));
+            scaleButtons.set(scale, button);
+            segmented.append(button);
         }
-        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);
+        for (const [scale, button] of scaleButtons) {
+            const changeScale = async () => {
+                if (scale === committedScale) {
+                    return;
+                }
+                try {
+                    await runtime.setValueAxisScale(scale);
+                    committedScale = scale;
+                    selectSegment(scaleButtons, committedScale);
+                }
+                catch (error) {
+                    selectSegment(scaleButtons, committedScale);
+                    throw error;
+                }
+            };
+            button.addEventListener('click', changeScale);
+            cleanupCallbacks.push(() => button.removeEventListener('click', changeScale));
+            dataControls.push(button);
+        }
+        control.append(segmented);
+        settingsList.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 { row, control } = createSettingsRow('主序列', 'main-series');
         const select = document.createElement('select');
         select.className = 'baron-chart-workspace-toolbar__select';
         select.dataset.action = 'main-series';
+        select.setAttribute('aria-label', '主序列');
         for (const presentation of mainSeries.presentations) {
             const option = document.createElement('option');
             option.value = presentation.type;
@@ -485,10 +505,10 @@ export function createChartWorkspaceToolbar(containers, runtime, options = {}) {
         select.addEventListener('change', changeMainSeries);
         cleanupCallbacks.push(() => select.removeEventListener('change', changeMainSeries));
         dataControls.push(select);
-        row.append(label, select);
-        chartSettingsGroup.append(row);
+        control.append(select);
+        settingsList.append(row);
     }
-    settingsPopover.element.append(chartSettingsGroup);
+    settingsPopover.element.append(settingsList);
     if (options.fullscreenControl !== 'hidden') {
         const fullscreenTarget = options.fullscreenTarget ?? containers.top.parentElement;
         const fullscreenButton = createButton({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baron1996/klinecharts-runtime",
-  "version": "0.9.20",
+  "version": "0.9.21",
   "description": "Web runtime for deterministic KLineCharts scenes.",
   "type": "module",
   "license": "Apache-2.0",
@@ -39,8 +39,8 @@
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@baron1996/kline-scene-schema": "0.9.20",
-    "@baron1996/klinecharts-adapter": "0.9.20",
+    "@baron1996/kline-scene-schema": "0.9.21",
+    "@baron1996/klinecharts-adapter": "0.9.21",
     "@js-temporal/polyfill": "0.5.1"
   }
 }