@363045841yyt/klinechart 0.8.4 → 0.8.5

package/src/components/LeftToolbar.vue

@@ -139,6 +139,7 @@ import IconTablerShape from '~icons/tabler/shape'
 import IconTablerChartDots3 from '~icons/tabler/chart-dots-3'
 import IconTablerCaretUpDown from '~icons/tabler/caret-up-down'
 import IconTablerBrackets from '~icons/tabler/brackets'
+import IconTablerArrowsHorizontal from '~icons/tabler/arrows-horizontal'
 import {
   DEFAULT_SETTINGS,
   SETTINGS_STORAGE_KEY,
@@ -181,6 +182,7 @@ const primaryTools: ToolDef[] = [
       { id: 'disjoint-channel', title: '不相交通道', icon: IconTablerBrackets },
     ],
   },
+  { id: 'range-select', title: '导出区间数据', icon: IconTablerArrowsHorizontal },
 ]
 
 defineProps<{
@@ -482,5 +484,4 @@ onUnmounted(() => {
     height: 36px;
   }
 }
-
 </style>

package/src/components/SymbolSelector.vue

@@ -13,8 +13,16 @@
       <span v-if="loading" class="symbol-chip__spinner" aria-hidden="true" />
       <IconTablerAlertTriangle v-else-if="error" class="symbol-chip__warn" aria-hidden="true" />
     </button>
-    <Transition name="symbol-popover">
-      <div v-if="showPopup" class="symbol-popover" role="dialog" aria-label="切换合约">
+    <Teleport :to="teleportTarget">
+      <Transition name="symbol-popover">
+        <div
+          v-if="showPopup"
+          ref="popupRef"
+          class="symbol-popover"
+          :style="popupStyle"
+          role="dialog"
+          aria-label="切换合约"
+        >
         <div class="symbol-search">
           <span class="symbol-search__icon" aria-hidden="true">
             <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
@@ -95,14 +103,17 @@
             <span class="symbol-list__exchange">{{ item.exchange }}</span>
           </button>
         </div>
-      </div>
-    </Transition>
+        </div>
+      </Transition>
+    </Teleport>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
 import IconTablerAlertTriangle from '~icons/tabler/alert-triangle'
+import { useTeleportedPopup } from '../composables/useTeleportedPopup'
+import { useFullscreenTeleportTarget } from '../composables/useFullscreenTeleportTarget'
 
 export interface SymbolItem {
   code: string
@@ -126,6 +137,15 @@ const showPopup = ref(false)
 const searchQuery = ref('')
 const searchInputRef = ref<HTMLInputElement | null>(null)
 const chipWrapRef = ref<HTMLElement | null>(null)
+const popupRef = ref<HTMLElement | null>(null)
+
+const teleportTarget = useFullscreenTeleportTarget()
+
+const { popupStyle, startPositionSync, stopPositionSync } = useTeleportedPopup(
+  chipWrapRef,
+  popupRef,
+  8,
+)
 
 const currentSymbol = computed<SymbolItem | undefined>(() =>
   props.symbols.find((s) => s.code === props.symbol),
@@ -155,6 +175,14 @@ function togglePopup() {
   }
 }
 
+watch(showPopup, (val) => {
+  if (val) {
+    startPositionSync()
+  } else {
+    stopPositionSync()
+  }
+})
+
 function clearSearch() {
   searchQuery.value = ''
   searchInputRef.value?.focus()
@@ -170,7 +198,9 @@ function selectSymbol(item: SymbolItem) {
 }
 
 function onDocumentClick(e: MouseEvent) {
-  if (chipWrapRef.value && !chipWrapRef.value.contains(e.target as Node)) {
+  const chip = chipWrapRef.value
+  const popup = popupRef.value
+  if (chip && !chip.contains(e.target as Node) && !popup?.contains(e.target as Node)) {
     showPopup.value = false
   }
 }
@@ -238,9 +268,6 @@ watch(() => props.symbol, () => {
 }
 
 .symbol-popover {
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 0;
   z-index: 20;
   width: min(320px, calc(100vw - 24px));
   padding: 14px;

package/src/components/TopToolbar.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="top-toolbar">
+  <div
+    ref="toolbarRef"
+    class="top-toolbar"
+    @mousedown="onMouseDown"
+    @mousemove="onMouseMove"
+    @mouseup="onMouseUp"
+    @mouseleave="onMouseUp"
+  >
     <SymbolSelector
       v-if="displaySymbol"
       :symbol="displaySymbol"
@@ -38,7 +45,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import KLineLevelDropdown, { type KLineLevel } from './KLineLevelDropdown.vue'
 import KLineAdjustmentDropdown, { type KLineAdjustment } from './KLineAdjustmentDropdown.vue'
 import SymbolSelector from './SymbolSelector.vue'
@@ -47,6 +54,41 @@ import type { SymbolItem } from './SymbolSelector.vue'
 
 export type { SymbolItem }
 
+const toolbarRef = ref<HTMLElement | null>(null)
+
+let isDown = false
+let startX = 0
+let scrollLeft = 0
+
+function onMouseDown(e: MouseEvent) {
+  const el = toolbarRef.value
+  if (!el) return
+  isDown = true
+  startX = e.pageX - el.getBoundingClientRect().left
+  scrollLeft = el.scrollLeft
+  el.style.cursor = 'grabbing'
+  el.style.userSelect = 'none'
+}
+
+function onMouseMove(e: MouseEvent) {
+  if (!isDown) return
+  const el = toolbarRef.value
+  if (!el) return
+  e.preventDefault()
+  const x = e.pageX - el.getBoundingClientRect().left
+  const walk = x - startX
+  el.scrollLeft = scrollLeft - walk
+}
+
+function onMouseUp() {
+  if (!isDown) return
+  isDown = false
+  const el = toolbarRef.value
+  if (!el) return
+  el.style.cursor = ''
+  el.style.userSelect = ''
+}
+
 const props = defineProps<{
   symbol?: string
   kLineLevel?: string
@@ -115,6 +157,14 @@ function onSymbolSelectorChange(item: SymbolItem) {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
   box-sizing: border-box;
   user-select: none;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.top-toolbar::-webkit-scrollbar {
+  display: none;
 }
 
 .indicator-button {
@@ -168,5 +218,8 @@ function onSymbolSelectorChange(item: SymbolItem) {
   .indicator-button__text {
     display: none;
   }
+  .indicator-button {
+    height: 26px;
+  }
 }
 </style>

package/src/composables/chart/useChartTheme.ts

@@ -0,0 +1,86 @@
+/**
+ * Manages chart theme state (light/dark), computed CSS vars for theming,
+ * tooltip up/down colors, and auto theme detection via prefers-color-scheme.
+ * Handles settings persistence through ChartController.updateSettingsFacade.
+ */
+import { ref, computed, onUnmounted } from 'vue'
+import type { Ref } from 'vue'
+import {
+  resolveThemeColors,
+  themeToCssVars,
+  lightTheme,
+  darkTheme,
+  type ColorPresetSettings,
+} from '@363045841yyt/klinechart-core'
+import type { ChartSettings } from '@363045841yyt/klinechart-core/config'
+import type { ChartController } from '@363045841yyt/klinechart-core/controllers'
+
+export function useChartTheme(ctrl: Ref<ChartController | null>) {
+  const chartTheme = ref<'light' | 'dark'>('light')
+  const chartSettings = ref<ChartSettings>({})
+
+  const tooltipColors = computed(() => {
+    const isAsiaMarket = chartSettings.value.isAsiaMarket ?? false
+    const colors = resolveThemeColors(chartTheme.value, isAsiaMarket as boolean | undefined)
+    return {
+      upColor: colors.candleUpBody,
+      downColor: colors.candleDownBody,
+    }
+  })
+
+  const themeCssVars = computed(() => {
+    const theme = chartTheme.value === 'dark' ? darkTheme : lightTheme
+    const overrides = (chartSettings.value.colorPresetSettings as ColorPresetSettings | undefined)?.[
+      chartTheme.value
+    ]
+    if (overrides && Object.keys(overrides).length > 0) {
+      return themeToCssVars({ ...theme, colors: { ...theme.colors, ...overrides } })
+    }
+    return themeToCssVars(theme)
+  })
+
+  let autoThemeMediaQuery: MediaQueryList | null = null
+
+  function onSystemThemeChange(e: MediaQueryListEvent) {
+    ctrl.value?.setTheme(e.matches ? 'dark' : 'light')
+  }
+
+  function applyThemeFromSettings(themeSetting: string | undefined) {
+    const chartCtrl = ctrl.value
+    if (!chartCtrl || !themeSetting) return
+
+    if (themeSetting === 'auto') {
+      const mq = window.matchMedia('(prefers-color-scheme: dark)')
+      chartCtrl.setTheme(mq.matches ? 'dark' : 'light')
+      if (autoThemeMediaQuery !== mq) {
+        autoThemeMediaQuery?.removeEventListener('change', onSystemThemeChange)
+        autoThemeMediaQuery = mq
+        mq.addEventListener('change', onSystemThemeChange)
+      }
+    } else {
+      autoThemeMediaQuery?.removeEventListener('change', onSystemThemeChange)
+      autoThemeMediaQuery = null
+      chartCtrl.setTheme(themeSetting as 'light' | 'dark')
+    }
+  }
+
+  function handleSettingsChange(settings: ChartSettings) {
+    chartSettings.value = settings
+    applyThemeFromSettings(settings.theme as string)
+    ctrl.value?.updateSettingsFacade(settings)
+  }
+
+  onUnmounted(() => {
+    autoThemeMediaQuery?.removeEventListener('change', onSystemThemeChange)
+    autoThemeMediaQuery = null
+  })
+
+  return {
+    chartTheme,
+    chartSettings,
+    tooltipColors,
+    themeCssVars,
+    handleSettingsChange,
+    applyThemeFromSettings,
+  }
+}

package/src/composables/chart/useDrawingManager.ts

@@ -0,0 +1,67 @@
+/**
+ * Manages drawing interaction state (selected drawing, drawings list),
+ * tool activation, style updates, and deletion.
+ * Provides setupDrawing() to initialize DrawingInteractionController
+ * with lifecycle callbacks that sync back to Vue refs.
+ */
+import { ref, computed, shallowRef, type Ref } from 'vue'
+import {
+  DrawingInteractionController,
+  type ChartController,
+  type DrawingToolId,
+} from '@363045841yyt/klinechart-core/controllers'
+import type { DrawingObject, DrawingStyle } from '@363045841yyt/klinechart-core/plugin'
+
+export function useDrawingManager(ctrl: Ref<ChartController | null>) {
+  const drawingController = shallowRef<DrawingInteractionController | null>(null)
+  const selectedDrawingId = ref<string | null>(null)
+  const drawings = ref<DrawingObject[]>([])
+  const selectedDrawing = computed(() => {
+    const id = selectedDrawingId.value
+    if (!id) return null
+    return drawings.value.find((d) => d.id === id) ?? null
+  })
+
+  function handleSelectTool(toolId: string) {
+    drawingController.value?.setTool(toolId as DrawingToolId)
+  }
+
+  function onUpdateDrawingStyle(style: Partial<DrawingStyle>) {
+    const d = selectedDrawing.value
+    if (!d || !drawingController.value) return
+    drawingController.value.updateDrawingStyle(d.id, style)
+    drawings.value = drawingController.value.getDrawings()
+  }
+
+  function onDeleteDrawing() {
+    const d = selectedDrawing.value
+    if (!d || !drawingController.value) return
+    drawingController.value.removeDrawing(d.id)
+    drawings.value = drawingController.value.getDrawings()
+  }
+
+  function setupDrawing(chartCtrl: ChartController): void {
+    drawingController.value = new DrawingInteractionController(chartCtrl)
+    drawingController.value.setCallbacks({
+      onDrawingCreated: (drawing) => {
+        drawings.value = [...drawings.value, drawing]
+        selectedDrawingId.value = drawing.id
+      },
+      onToolChange: () => {},
+      onDrawingSelected: (drawing) => {
+        selectedDrawingId.value = drawing?.id ?? null
+      },
+    })
+  }
+
+  return {
+    drawingController,
+    selectedDrawingId,
+    selectedDrawing,
+    drawings,
+    handleSelectTool,
+    onUpdateDrawingStyle,
+    onDeleteDrawing,
+    setupDrawing,
+  }
+}

package/src/composables/chart/useIndicatorManager.ts

@@ -0,0 +1,307 @@
+/**
+ * Manages indicator state for both main-pane and sub-pane indicators.
+ * Provides pane layout construction, default param resolution,
+ * indicator toggle/update/reorder logic, and bridges signal subscriptions
+ * (ctrl.indicators, ctrl.subPanes) to Vue reactive refs.
+ */
+import { ref, computed, type Ref } from 'vue'
+import type {
+  ChartController,
+  PaneSpec,
+  IndicatorInstance,
+  SubIndicatorType,
+} from '@363045841yyt/klinechart-core/controllers'
+import { getRegisteredIndicatorDefinition } from '@363045841yyt/klinechart-core/indicators'
+import type { SemanticChartConfig } from '@363045841yyt/klinechart-core/semantic'
+
+interface SubPaneSlot {
+  id: string
+  indicatorId: SubIndicatorType
+  params: Record<string, unknown>
+}
+
+export function useIndicatorManager(
+  ctrl: Ref<ChartController | null>,
+  paneRatiosRef: Ref<Record<string, number>>,
+) {
+  const maxSubPanes = 4
+
+  const mainActiveIndicators = ref<string[]>([])
+
+  const subPanes = ref<SubPaneSlot[]>([])
+
+  const subActiveIndicators = computed(() => {
+    const ids: string[] = []
+    const seen = new Set<string>()
+    for (const pane of subPanes.value) {
+      if (!seen.has(pane.indicatorId)) {
+        seen.add(pane.indicatorId)
+        ids.push(pane.indicatorId)
+      }
+    }
+    return ids
+  })
+
+  const activeIndicators = computed(() => [
+    ...mainActiveIndicators.value,
+    ...subActiveIndicators.value,
+  ])
+
+  const indicatorParams = ref<Record<string, Record<string, unknown>>>({})
+
+  function buildPaneLayoutIntent(): PaneSpec[] {
+    const mainRatio = paneRatiosRef.value['main'] ?? 3
+    return subPanes.value.length === 0
+      ? [{ id: 'main', ratio: mainRatio, visible: true, role: 'price' }]
+      : [
+          { id: 'main', ratio: mainRatio, visible: true, role: 'price' },
+          ...subPanes.value.map((pane) => ({
+            id: pane.id,
+            ratio: paneRatiosRef.value[pane.id] ?? 1,
+            visible: true,
+            role: 'indicator' as const,
+          })),
+        ]
+  }
+
+  function getDefaultParams(
+    indicatorId: SubIndicatorType,
+  ): Record<string, number | boolean | string> {
+    if (indicatorId === 'VOLUME') return {}
+    const meta = getRegisteredIndicatorDefinition(indicatorId)
+    if (meta?.runtime?.defaultConfig) {
+      return { ...meta.runtime.defaultConfig } as Record<string, number | boolean | string>
+    }
+    return {}
+  }
+
+  function isSubPaneIndicator(id: string): boolean {
+    if (id === 'VOLUME') return true
+    const def = getRegisteredIndicatorDefinition(id)
+    return !!def && def.category !== 'main'
+  }
+
+  function addSubPane(
+    indicatorId: SubIndicatorType = 'VOLUME',
+    params?: Record<string, number | boolean | string>,
+  ): boolean {
+    if (subPanes.value.length >= maxSubPanes) {
+      return false
+    }
+
+    const mergedParams = params ?? getDefaultParams(indicatorId)
+
+    const paneId = ctrl.value?.addIndicator(indicatorId, 'sub', mergedParams)
+    if (!paneId) return false
+    return true
+  }
+
+  function removeSubPane(paneId: string): void {
+    ctrl.value?.removeIndicator(paneId)
+  }
+
+  function clearAllSubPanes(): void {
+    for (const pane of subPanes.value) {
+      ctrl.value?.removeIndicator(pane.id)
+    }
+  }
+
+  function initIndicatorsFromConfig(semanticConfig?: SemanticChartConfig): void {
+    const config = semanticConfig
+    const c = ctrl.value
+    if (!config || !c) return
+
+    const mainIndicators = config.indicators?.main
+    if (mainIndicators) {
+      for (const indicator of mainIndicators) {
+        if (indicator.enabled) {
+          c.addIndicator(
+            indicator.type,
+            'main',
+            indicator.params as Record<string, number | boolean | string>,
+          )
+        }
+      }
+    }
+  }
+
+  function switchSubIndicator(paneId: string, newIndicatorId: SubIndicatorType): void {
+    const nextParams = getDefaultParams(newIndicatorId)
+    ctrl.value?.replaceSubPaneIndicator(paneId, newIndicatorId, nextParams)
+  }
+
+  function handleIndicatorToggle(indicatorId: string, active: boolean) {
+    const c = ctrl.value
+    if (!c) return
+
+    const def = getRegisteredIndicatorDefinition(indicatorId)
+    const isMain = def && (def.category === 'main' || def.allowMainPane)
+    if (isMain) {
+      const existingIndicator = mainActiveIndicators.value.find((id) => id === indicatorId)
+      if (active && !existingIndicator) {
+        c.addIndicator(indicatorId, 'main', indicatorParams.value[indicatorId])
+      } else if (!active && existingIndicator) {
+        c.removeIndicator(indicatorId.toUpperCase())
+      }
+      return
+    }
+
+    if (isSubPaneIndicator(indicatorId)) {
+      if (active) {
+        const existingPane = subPanes.value.find((p) => p.indicatorId === indicatorId)
+        if (existingPane) return
+        if (subPanes.value.length >= maxSubPanes) return
+
+        const paneId = c.addIndicator(indicatorId, 'sub', indicatorParams.value[indicatorId])
+        if (!paneId && subPanes.value.length > 0) {
+          const lastPane = subPanes.value[subPanes.value.length - 1]
+          switchSubIndicator(lastPane.id, indicatorId as SubIndicatorType)
+        }
+      } else {
+        const panesToRemove = subPanes.value.filter((p) => p.indicatorId === indicatorId)
+        panesToRemove.forEach((pane) => {
+          c.removeIndicator(pane.id)
+        })
+      }
+    }
+  }
+
+  function handleUpdateParams(indicatorId: string, params: Record<string, unknown>) {
+    if (
+      indicatorId === 'MA' ||
+      indicatorId === 'BOLL' ||
+      indicatorId === 'EXPMA' ||
+      indicatorId === 'ENE'
+    ) {
+      ctrl.value?.updateIndicatorParams(indicatorId, params)
+      return
+    }
+    if (isSubPaneIndicator(indicatorId)) {
+      subPanes.value
+        .filter((p) => p.indicatorId === indicatorId)
+        .forEach((pane) => {
+          ctrl.value?.updateIndicatorParams(pane.id, params)
+        })
+    }
+  }
+
+  function handleReorderSubIndicators(orderedIndicatorIds: string[]) {
+    if (!orderedIndicatorIds.length || subPanes.value.length <= 1) return
+
+    const validOrder = orderedIndicatorIds.filter((id): id is SubIndicatorType =>
+      isSubPaneIndicator(id),
+    )
+    if (!validOrder.length) return
+
+    const paneByIndicator = new Map(subPanes.value.map((pane) => [pane.indicatorId, pane] as const))
+    const nextSubPanes: SubPaneSlot[] = []
+
+    for (const indicatorId of validOrder) {
+      const pane = paneByIndicator.get(indicatorId)
+      if (pane) {
+        nextSubPanes.push(pane)
+        paneByIndicator.delete(indicatorId)
+      }
+    }
+
+    if (nextSubPanes.length === 0) return
+
+    for (const pane of subPanes.value) {
+      if (paneByIndicator.has(pane.indicatorId)) {
+        nextSubPanes.push(pane)
+        paneByIndicator.delete(pane.indicatorId)
+      }
+    }
+
+    const currentSubIds = subPanes.value.map((p) => p.id)
+    const nextSubIds = nextSubPanes.map((p) => p.id)
+    if (currentSubIds.join('|') === nextSubIds.join('|')) return
+
+    subPanes.value = nextSubPanes
+
+    const c = ctrl.value
+    if (!c) return
+    c.updatePaneLayout(buildPaneLayoutIntent())
+  }
+
+  function setupIndicatorSubscriptions(chartCtrl: ChartController): () => void {
+    const unsubIndicators = chartCtrl.indicators.subscribe(() => {
+      const instances = chartCtrl.indicators.peek()
+
+      const mains = instances
+        .filter((i): i is IndicatorInstance & { role: 'main' } => i.role === 'main')
+        .map((i) => i.definitionId)
+      mainActiveIndicators.value = mains
+
+      const nextParams = { ...indicatorParams.value }
+      for (const inst of instances) {
+        if (inst.role === 'main' && inst.params && Object.keys(inst.params).length > 0) {
+          nextParams[inst.definitionId] = { ...inst.params }
+        }
+      }
+
+      chartCtrl.updateRendererConfig('mainIndicatorLegend', {
+        indicators: {
+          MA: { enabled: mains.includes('MA'), params: nextParams['MA'] || {} },
+          BOLL: { enabled: mains.includes('BOLL'), params: nextParams['BOLL'] || {} },
+          EXPMA: { enabled: mains.includes('EXPMA'), params: nextParams['EXPMA'] || {} },
+          ENE: { enabled: mains.includes('ENE'), params: nextParams['ENE'] || {} },
+        },
+      })
+
+      indicatorParams.value = nextParams
+    })
+
+    const unsubSubPanes = chartCtrl.subPanes.subscribe(() => {
+      const subPaneInfos = chartCtrl.subPanes.peek()
+      const signalIds = new Set(subPaneInfos.map((sp) => sp.paneId))
+
+      const merged = subPanes.value.filter((p) => signalIds.has(p.id))
+      const existingIds = new Set(merged.map((p) => p.id))
+      for (const sp of subPaneInfos) {
+        if (!existingIds.has(sp.paneId)) {
+          merged.push({
+            id: sp.paneId,
+            indicatorId: sp.indicatorId as SubIndicatorType,
+            params: sp.params,
+          })
+        }
+      }
+      subPanes.value = merged
+
+      const nextParams = { ...indicatorParams.value }
+      for (const sp of subPaneInfos) {
+        if (sp.params && Object.keys(sp.params).length > 0) {
+          nextParams[sp.indicatorId] = { ...sp.params }
+        }
+      }
+      indicatorParams.value = nextParams
+    })
+
+    return () => {
+      unsubIndicators()
+      unsubSubPanes()
+    }
+  }
+
+  return {
+    mainActiveIndicators,
+    subActiveIndicators,
+    activeIndicators,
+    indicatorParams,
+    subPanes,
+    maxSubPanes,
+    buildPaneLayoutIntent,
+    getDefaultParams,
+    isSubPaneIndicator,
+    addSubPane,
+    removeSubPane,
+    clearAllSubPanes,
+    initIndicatorsFromConfig,
+    switchSubIndicator,
+    handleIndicatorToggle,
+    handleUpdateParams,
+    handleReorderSubIndicators,
+    setupIndicatorSubscriptions,
+  }
+}