@363045841yyt/klinechart 0.7.1 → 0.7.3-alpha.0

package/src/components/MarkerTooltip.vue

@@ -0,0 +1,155 @@
+<template>
+  <div
+    v-if="marker"
+    :ref="onRef"
+    class="marker-tooltip"
+    :class="[{ 'use-anchor': useAnchor }, anchorPlacementClass]"
+    :style="useAnchor ? undefined : { left: `${pos.x + 12}px`, top: `${pos.y + 12}px` }"
+  >
+    <div class="marker-tooltip__title">{{ title }}</div>
+    <div v-if="hasMetadata" class="marker-tooltip__content">
+      <div v-for="(value, key) in metadata" :key="key" class="row">
+        <span>{{ key }}</span>
+        <span>{{ formatValue(value) }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
+
+interface MarkerEntity {
+  markerType: string
+  metadata: Record<string, unknown>
+}
+
+interface CustomMarkerEntity {
+  date: string
+  shape: string
+  label?: { text: string }
+  metadata: Record<string, unknown>
+}
+
+const MARKER_TYPE_LABELS: Record<string, string> = {
+  support: '支撑位',
+  resistance: '阻力位',
+  top: '顶部',
+  bottom: '底部',
+}
+
+const props = defineProps<{
+  marker: MarkerEntity | CustomMarkerEntity | null
+  pos: { x: number; y: number }
+  useAnchor?: boolean
+  anchorPlacement?: 'right-bottom' | 'left-bottom'
+  setEl?: (el: HTMLDivElement | null) => void
+}>()
+
+const useAnchor = computed(() => props.useAnchor === true)
+const anchorPlacementClass = computed(() =>
+  props.anchorPlacement === 'left-bottom' ? 'anchor-left-bottom' : 'anchor-right-bottom',
+)
+
+function onRef(el: Element | ComponentPublicInstance | null) {
+  props.setEl?.(el as HTMLDivElement | null)
+}
+
+const isCustomMarker = computed(() => {
+  return props.marker && 'date' in props.marker
+})
+
+const title = computed(() => {
+  if (!props.marker) return ''
+  if (isCustomMarker.value) {
+    const custom = props.marker as CustomMarkerEntity
+    return custom.label?.text || custom.shape
+  }
+  const standard = props.marker as MarkerEntity
+  return MARKER_TYPE_LABELS[standard.markerType] || standard.markerType
+})
+
+const metadata = computed(() => {
+  if (!props.marker) return {}
+  if (isCustomMarker.value) {
+    const custom = props.marker as CustomMarkerEntity
+    return {
+      日期: custom.date,
+      ...custom.metadata,
+    }
+  }
+  return (props.marker as MarkerEntity).metadata
+})
+
+const hasMetadata = computed(() => {
+  return Object.keys(metadata.value).length > 0
+})
+
+function formatValue(value: unknown): string {
+  if (typeof value === 'number') {
+    return value.toFixed(2)
+  }
+  return String(value)
+}
+</script>
+
+<style scoped>
+.marker-tooltip {
+  position: absolute;
+  z-index: 10;
+  min-width: 180px;
+  max-width: 260px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
+  color: rgba(0, 0, 0, 0.78);
+  font-size: 12px;
+  line-height: 1.4;
+  pointer-events: none;
+  backdrop-filter: blur(6px);
+}
+
+.marker-tooltip__title {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.marker-tooltip__content {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2px;
+}
+
+.marker-tooltip__content .row {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.marker-tooltip__content .row span:first-child {
+  color: rgba(0, 0, 0, 0.56);
+}
+
+@supports (anchor-name: --kmap-anchor) and (position-anchor: --kmap-anchor) {
+  .marker-tooltip.use-anchor {
+    position: absolute;
+    position-anchor: --marker-tooltip-anchor;
+    left: anchor(left);
+    top: anchor(top);
+  }
+
+  .marker-tooltip.use-anchor.anchor-right-bottom {
+    transform: translate(12px, 12px);
+  }
+
+  .marker-tooltip.use-anchor.anchor-left-bottom {
+    transform: translate(calc(-100% - 12px), 12px);
+  }
+}
+</style>

package/src/components/index.ts

@@ -0,0 +1,7 @@
+export { default as DrawingStyleToolbar } from './DrawingStyleToolbar.vue'
+export { default as IndicatorParams } from './IndicatorParams.vue'
+export { default as IndicatorSelector } from './IndicatorSelector.vue'
+export { default as KLineChartVue } from './KLineChart.vue'
+export { default as KLineTooltip } from './KLineTooltip.vue'
+export { default as LeftToolbar } from './LeftToolbar.vue'
+export { default as MarkerTooltip } from './MarkerTooltip.vue'

package/src/composables/useFullscreenTeleportTarget.ts

@@ -0,0 +1,18 @@
+import { inject, provide, computed, type Ref, type InjectionKey } from 'vue'
+
+const FULLSCREEN_TARGET_KEY: InjectionKey<Ref<HTMLElement | null>> =
+  Symbol('fullscreen-teleport-target')
+
+export function provideFullscreenTeleportTarget(targetRef: Ref<HTMLElement | null>): void {
+  provide(FULLSCREEN_TARGET_KEY, targetRef)
+}
+
+export function useFullscreenTeleportTarget() {
+  // null = no provider in ancestor tree (degraded scenario)
+  const targetRef = inject(FULLSCREEN_TARGET_KEY, null)
+
+  return computed<HTMLElement | string>(() => {
+    // targetRef null → no provider; targetRef.value null → container not mounted yet
+    return targetRef?.value ?? 'body'
+  })
+}

package/src/debug/canvasProfiler.ts

@@ -0,0 +1,296 @@
+type MetricEntry = {
+    count: number
+    totalTime: number
+}
+
+type MetricBucket = Record<string, MetricEntry>
+
+type CanvasProfilerMetrics = {
+    ctxMethods: MetricBucket
+    ctxProps: MetricBucket
+    canvasProps: MetricBucket
+    ctxMethodSources: Record<string, MetricBucket>
+}
+
+type CanvasProfilerReportRow = {
+    name: string
+    count: number
+    totalTime: string
+    averageTime: string
+}
+
+declare global {
+    interface Window {
+        __KMAP_CANVAS_PROFILER_INSTALLED__?: boolean
+        __KMAP_CANVAS_PROFILER_METRICS__?: CanvasProfilerMetrics
+        showCanvasReport?: () => void
+        resetCanvasReport?: () => void
+    }
+}
+
+function createBucket(): MetricBucket {
+    return Object.create(null) as MetricBucket
+}
+
+function createMetrics(): CanvasProfilerMetrics {
+    return {
+        ctxMethods: createBucket(),
+        ctxProps: createBucket(),
+        canvasProps: createBucket(),
+        ctxMethodSources: Object.create(null) as Record<string, MetricBucket>,
+    }
+}
+
+function record(bucket: MetricBucket, name: string, duration: number): void {
+    const entry = bucket[name] ??= { count: 0, totalTime: 0 }
+    entry.count += 1
+    entry.totalTime += duration
+}
+
+function recordMethodSource(metrics: CanvasProfilerMetrics, methodName: string, source: string, duration: number): void {
+    const bucket = metrics.ctxMethodSources[methodName] ??= createBucket()
+    record(bucket, source, duration)
+}
+
+function toRows(bucket: MetricBucket): CanvasProfilerReportRow[] {
+    return Object.entries(bucket)
+        .filter(([, entry]) => entry.count > 0)
+        .map(([name, entry]) => ({
+            name,
+            count: entry.count,
+            totalTime: entry.totalTime.toFixed(2),
+            averageTime: (entry.totalTime / entry.count).toFixed(4),
+        }))
+        .sort((a, b) => Number(b.totalTime) - Number(a.totalTime))
+}
+
+/** 全局开关：是否启用 Canvas Profiler 插桩 */
+let isProfilerEnabled = false
+
+/** 保存原始方法用于卸载 */
+const originalMethods = new Map<string, (...args: unknown[]) => unknown>()
+const originalSetters = new Map<string, PropertyDescriptor>()
+
+/** 启用/禁用 Canvas Profiler */
+export function setCanvasProfilerEnabled(enabled: boolean): void {
+    isProfilerEnabled = enabled
+    if (enabled) {
+        if (typeof window !== 'undefined' && !window.__KMAP_CANVAS_PROFILER_INSTALLED__) {
+            installCanvasProfiler()
+        }
+    } else {
+        uninstallCanvasProfiler()
+    }
+}
+
+/** 获取 Canvas Profiler 启用状态 */
+export function isCanvasProfilerEnabled(): boolean {
+    return isProfilerEnabled
+}
+
+function getRelevantStackFrame(): string {
+    // 如果未启用，直接返回空字符串避免开销
+    if (!isProfilerEnabled) return 'disabled'
+
+    const stack = new Error().stack
+    if (!stack) return 'unknown'
+
+    const frames = stack
+        .split('\n')
+        .map((line) => line.trim())
+        .filter(Boolean)
+
+    for (const frame of frames) {
+        if (
+            frame.includes('canvasProfiler')
+            || frame.includes('CanvasRenderingContext2D')
+            || frame === 'Error'
+        ) {
+            continue
+        }
+
+        const normalized = frame.replace(/^at\s+/, '')
+        const srcMatch = normalized.match(/((?:src|node_modules)[^\s)]+):(\d+):(\d+)/)
+        if (srcMatch) {
+            return `${srcMatch[1]}:${srcMatch[2]}`
+        }
+
+        const parenMatch = normalized.match(/\(([^)]+):(\d+):(\d+)\)$/)
+        if (parenMatch) {
+            return `${parenMatch[1]}:${parenMatch[2]}`
+        }
+
+        return normalized
+    }
+
+    return 'unknown'
+}
+
+function wrapMethod(
+    proto: object,
+    name: string,
+    metrics: CanvasProfilerMetrics,
+    options?: { captureSource?: boolean }
+): void {
+    const key = `${proto.constructor?.name ?? 'proto'}:${name}`
+    if (originalMethods.has(key)) return
+
+    const original = Reflect.get(proto, name)
+    if (typeof original !== 'function') return
+
+    originalMethods.set(key, original as (...args: unknown[]) => unknown)
+
+    Reflect.set(proto, name, function (this: object, ...args: unknown[]) {
+        // 快速路径：如果 profiler 未启用，直接调用原方法
+        if (!isProfilerEnabled) {
+            return original.apply(this, args)
+        }
+        const source = options?.captureSource ? getRelevantStackFrame() : null
+        const start = performance.now()
+        const result = original.apply(this, args)
+        const duration = performance.now() - start
+        record(metrics.ctxMethods, name, duration)
+        if (source) {
+            recordMethodSource(metrics, name, source, duration)
+        }
+        return result
+    })
+}
+
+function wrapSetter(proto: object, prop: string, bucket: MetricBucket): void {
+    const descriptor = Object.getOwnPropertyDescriptor(proto, prop)
+    if (!descriptor?.set || !descriptor.configurable) return
+
+    const key = `${proto.constructor?.name ?? 'proto'}:${prop}`
+    if (originalSetters.has(key)) return
+
+    originalSetters.set(key, descriptor)
+
+    Object.defineProperty(proto, prop, {
+        configurable: true,
+        enumerable: descriptor.enumerable ?? false,
+        get: descriptor.get,
+        set(this: object, value: unknown) {
+            // 快速路径：如果 profiler 未启用，直接调用原 setter
+            if (!isProfilerEnabled) {
+                descriptor.set!.call(this, value)
+                return
+            }
+            const start = performance.now()
+            descriptor.set!.call(this, value)
+            record(bucket, prop, performance.now() - start)
+        },
+    })
+}
+
+export function installCanvasProfiler(): void {
+    if (typeof window === 'undefined') return
+    if (window.__KMAP_CANVAS_PROFILER_INSTALLED__) return
+
+    const ctxProto = CanvasRenderingContext2D?.prototype
+    const canvasProto = HTMLCanvasElement?.prototype
+    if (!ctxProto || !canvasProto) return
+
+    const metrics = createMetrics()
+
+    wrapMethod(ctxProto, 'fillText', metrics, { captureSource: true })
+    wrapMethod(ctxProto, 'measureText', metrics, { captureSource: true })
+    wrapMethod(ctxProto, 'drawImage', metrics)
+    wrapMethod(ctxProto, 'save', metrics)
+    wrapMethod(ctxProto, 'restore', metrics)
+    wrapMethod(ctxProto, 'clip', metrics)
+    wrapMethod(ctxProto, 'setTransform', metrics)
+    wrapMethod(ctxProto, 'scale', metrics)
+
+    wrapSetter(ctxProto, 'font', metrics.ctxProps)
+    wrapSetter(ctxProto, 'filter', metrics.ctxProps)
+    wrapSetter(ctxProto, 'shadowBlur', metrics.ctxProps)
+    wrapSetter(ctxProto, 'lineWidth', metrics.ctxProps)
+
+    wrapSetter(canvasProto, 'width', metrics.canvasProps)
+    wrapSetter(canvasProto, 'height', metrics.canvasProps)
+
+    window.__KMAP_CANVAS_PROFILER_METRICS__ = metrics
+    window.__KMAP_CANVAS_PROFILER_INSTALLED__ = true
+
+    window.showCanvasReport = () => {
+        const currentMetrics = window.__KMAP_CANVAS_PROFILER_METRICS__
+        if (!currentMetrics) return
+
+        console.group('[kmap] Canvas profiler report')
+        console.log('ctx methods')
+        console.table(toRows(currentMetrics.ctxMethods))
+        console.log('ctx props')
+        console.table(toRows(currentMetrics.ctxProps))
+        console.log('canvas props')
+        console.table(toRows(currentMetrics.canvasProps))
+
+        for (const methodName of ['fillText', 'measureText']) {
+            const bucket = currentMetrics.ctxMethodSources[methodName]
+            if (!bucket) continue
+            console.log(`${methodName} sources`)
+            console.table(toRows(bucket).slice(0, 20))
+        }
+
+        console.groupEnd()
+    }
+
+    window.resetCanvasReport = () => {
+        window.__KMAP_CANVAS_PROFILER_METRICS__ = createMetrics()
+    }
+
+    console.info('[kmap] Canvas profiler enabled. Use window.showCanvasReport() and window.resetCanvasReport().')
+}
+
+/** 卸载 Canvas Profiler，恢复原始方法 */
+export function uninstallCanvasProfiler(): void {
+    if (typeof window === 'undefined') return
+    if (!window.__KMAP_CANVAS_PROFILER_INSTALLED__) return
+
+    const ctxProto = CanvasRenderingContext2D?.prototype
+    const canvasProto = HTMLCanvasElement?.prototype
+
+    // 恢复原始方法
+    originalMethods.forEach((original, key) => {
+        const match = key.match(/^(.+):(.+)$/)
+        if (!match) return
+        const [, protoName, methodName] = match
+
+        let proto: object | null = null
+        if (protoName === 'CanvasRenderingContext2D') {
+            proto = ctxProto
+        } else if (protoName === 'HTMLCanvasElement') {
+            proto = canvasProto
+        }
+        if (proto) {
+            Reflect.set(proto, methodName, original)
+        }
+    })
+    originalMethods.clear()
+
+    // 恢复原始 setter
+    originalSetters.forEach((descriptor, key) => {
+        const match = key.match(/^(.+):(.+)$/)
+        if (!match) return
+        const [, protoName, propName] = match
+
+        let proto: object | null = null
+        if (protoName === 'CanvasRenderingContext2D') {
+            proto = ctxProto
+        } else if (protoName === 'HTMLCanvasElement') {
+            proto = canvasProto
+        }
+        if (proto && descriptor.configurable) {
+            Object.defineProperty(proto, propName, descriptor)
+        }
+    })
+    originalSetters.clear()
+
+    // 清理全局状态
+    window.__KMAP_CANVAS_PROFILER_INSTALLED__ = false
+    window.__KMAP_CANVAS_PROFILER_METRICS__ = undefined
+    window.showCanvasReport = undefined
+    window.resetCanvasReport = undefined
+
+    console.info('[kmap] Canvas profiler disabled.')
+}