@363045841yyt/klinechart 0.7.4 → 0.7.5-alpha.2

package/src/__tests__/contract.test.ts

@@ -1,132 +1,132 @@
-/**
- * Contract test for @363045841yyt/klinechart.
- *
- * Phase 1D agent's brief: make these pass without weakening assertions,
- * preserving the legacy KMapPlugin.install signature.
- */
-
-import { describe, it, expect, vi, afterEach } from 'vitest'
-import { defineComponent, h, nextTick, ref, shallowRef } from 'vue'
-import { mount } from '@vue/test-utils'
-import * as VueAdapter from '../index'
-import { coreSignalToVueRef } from '../index'
-import { createMockChartController, createTestSignal } from './_mockController'
-
-describe('@363045841yyt/klinechart �?public API surface', () => {
-    it('exports createChart, useChart, useIndicatorSelector, KLineChart, KMapPlugin', () => {
-        expect(typeof VueAdapter.createChart).toBe('function')
-        expect(typeof VueAdapter.useChart).toBe('function')
-        expect(typeof VueAdapter.useIndicatorSelector).toBe('function')
-        expect(VueAdapter.KLineChart).toBeDefined()
-        expect(typeof VueAdapter.KMapPlugin.install).toBe('function')
-    })
-
-    it('KMapPlugin.install is callable with a mock app and registers KLineChart', () => {
-        const registered: Record<string, unknown> = {}
-        const mockApp = {
-            component(name: string, comp: unknown) {
-                registered[name] = comp
-            },
-        } as unknown as Parameters<typeof VueAdapter.KMapPlugin.install>[0]
-        VueAdapter.KMapPlugin.install(mockApp)
-        expect(registered.KLineChart).toBe(VueAdapter.KLineChart)
-    })
-})
-
-describe('@363045841yyt/klinechart �?SSR safety', () => {
-    it('module import does not touch window or document', () => {
-        // Import above ran in node env without jsdom. If it touched window, this
-        // file would not have loaded. Test documents the contract.
-        expect(true).toBe(true)
-    })
-})
-
-describe('@363045841yyt/klinechart �?useChart lifecycle', () => {
-    afterEach(() => {
-        // Reset the injected factory so other tests start clean.
-        VueAdapter.__setControllerFactory(null)
-    })
-
-    it('mounts on first render via template ref', async () => {
-        const mockController = createMockChartController({ data: [] })
-        const factorySpy = vi.fn(() => mockController)
-        VueAdapter.__setControllerFactory(factorySpy)
-
-        const HostComponent = defineComponent({
-            name: 'Host',
-            setup() {
-                const containerRef = ref<HTMLElement | null>(null)
-                const { chart } = VueAdapter.useChart(containerRef, { data: [] })
-                return { containerRef, chart }
-            },
-            render() {
-                return h('div', { ref: 'containerRef' })
-            },
-        })
-
-        const wrapper = mount(HostComponent, { attachTo: document.body })
-        await nextTick()
-
-        expect(factorySpy).toHaveBeenCalledTimes(1)
-        const factoryArg = factorySpy.mock.calls[0]?.[0]
-        expect(factoryArg?.container).toBeInstanceOf(HTMLElement)
-        expect(wrapper.vm.chart).toBe(mockController)
-
-        wrapper.unmount()
-    })
-
-    it('disposes on unmount', async () => {
-        const mockController = createMockChartController({ data: [] })
-        VueAdapter.__setControllerFactory(() => mockController)
-
-        const HostComponent = defineComponent({
-            name: 'Host',
-            setup() {
-                const containerRef = ref<HTMLElement | null>(null)
-                const { chart } = VueAdapter.useChart(containerRef, { data: [] })
-                return { containerRef, chart }
-            },
-            render() {
-                return h('div', { ref: 'containerRef' })
-            },
-        })
-
-        const wrapper = mount(HostComponent, { attachTo: document.body })
-        await nextTick()
-
-        expect(mockController.disposeCalls()).toBe(0)
-        wrapper.unmount()
-        // Allow lifecycle hooks to settle.
-        await nextTick()
-        expect(mockController.disposeCalls()).toBe(1)
-    })
-
-    it('reactivity bridge: signal change updates returned ref', async () => {
-        // Mount a tiny scoped component so coreSignalToVueRef can register
-        // its onScopeDispose cleanup. Without a setup scope the ref is still
-        // wired up correctly, but cleanup would not be automatic.
-        const signal = createTestSignal<number>(1)
-        const bridgedRef = shallowRef<{ value: number } | null>(null)
-
-        const HostComponent = defineComponent({
-            name: 'BridgeHost',
-            setup() {
-                const r = coreSignalToVueRef(signal)
-                bridgedRef.value = r as unknown as { value: number }
-                return () => h('div', String(r.value))
-            },
-        })
-
-        const wrapper = mount(HostComponent, { attachTo: document.body })
-        expect(bridgedRef.value?.value).toBe(1)
-        expect(wrapper.text()).toBe('1')
-
-        signal.set(42)
-        await nextTick()
-
-        expect(bridgedRef.value?.value).toBe(42)
-        expect(wrapper.text()).toBe('42')
-
-        wrapper.unmount()
-    })
-})
+/**
+ * Contract test for @363045841yyt/klinechart.
+ *
+ * Phase 1D agent's brief: make these pass without weakening assertions,
+ * preserving the legacy KMapPlugin.install signature.
+ */
+
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { defineComponent, h, nextTick, ref, shallowRef } from 'vue'
+import { mount } from '@vue/test-utils'
+import * as VueAdapter from '../index'
+import { coreSignalToVueRef } from '../index'
+import { createMockChartController, createTestSignal } from './_mockController'
+
+describe('@363045841yyt/klinechart �?public API surface', () => {
+    it('exports createChart, useChart, useIndicatorSelector, KLineChart, KMapPlugin', () => {
+        expect(typeof VueAdapter.createChart).toBe('function')
+        expect(typeof VueAdapter.useChart).toBe('function')
+        expect(typeof VueAdapter.useIndicatorSelector).toBe('function')
+        expect(VueAdapter.KLineChart).toBeDefined()
+        expect(typeof VueAdapter.KMapPlugin.install).toBe('function')
+    })
+
+    it('KMapPlugin.install is callable with a mock app and registers KLineChart', () => {
+        const registered: Record<string, unknown> = {}
+        const mockApp = {
+            component(name: string, comp: unknown) {
+                registered[name] = comp
+            },
+        } as unknown as Parameters<typeof VueAdapter.KMapPlugin.install>[0]
+        VueAdapter.KMapPlugin.install(mockApp)
+        expect(registered.KLineChart).toBe(VueAdapter.KLineChart)
+    })
+})
+
+describe('@363045841yyt/klinechart �?SSR safety', () => {
+    it('module import does not touch window or document', () => {
+        // Import above ran in node env without jsdom. If it touched window, this
+        // file would not have loaded. Test documents the contract.
+        expect(true).toBe(true)
+    })
+})
+
+describe('@363045841yyt/klinechart �?useChart lifecycle', () => {
+    afterEach(() => {
+        // Reset the injected factory so other tests start clean.
+        VueAdapter.__setControllerFactory(null)
+    })
+
+    it('mounts on first render via template ref', async () => {
+        const mockController = createMockChartController({ data: [] })
+        const factorySpy = vi.fn(() => mockController)
+        VueAdapter.__setControllerFactory(factorySpy)
+
+        const HostComponent = defineComponent({
+            name: 'Host',
+            setup() {
+                const containerRef = ref<HTMLElement | null>(null)
+                const { chart } = VueAdapter.useChart(containerRef, { data: [] })
+                return { containerRef, chart }
+            },
+            render() {
+                return h('div', { ref: 'containerRef' })
+            },
+        })
+
+        const wrapper = mount(HostComponent, { attachTo: document.body })
+        await nextTick()
+
+        expect(factorySpy).toHaveBeenCalledTimes(1)
+        const factoryArg = factorySpy.mock.calls[0]?.[0]
+        expect(factoryArg?.container).toBeInstanceOf(HTMLElement)
+        expect(wrapper.vm.chart).toBe(mockController)
+
+        wrapper.unmount()
+    })
+
+    it('disposes on unmount', async () => {
+        const mockController = createMockChartController({ data: [] })
+        VueAdapter.__setControllerFactory(() => mockController)
+
+        const HostComponent = defineComponent({
+            name: 'Host',
+            setup() {
+                const containerRef = ref<HTMLElement | null>(null)
+                const { chart } = VueAdapter.useChart(containerRef, { data: [] })
+                return { containerRef, chart }
+            },
+            render() {
+                return h('div', { ref: 'containerRef' })
+            },
+        })
+
+        const wrapper = mount(HostComponent, { attachTo: document.body })
+        await nextTick()
+
+        expect(mockController.disposeCalls()).toBe(0)
+        wrapper.unmount()
+        // Allow lifecycle hooks to settle.
+        await nextTick()
+        expect(mockController.disposeCalls()).toBe(1)
+    })
+
+    it('reactivity bridge: signal change updates returned ref', async () => {
+        // Mount a tiny scoped component so coreSignalToVueRef can register
+        // its onScopeDispose cleanup. Without a setup scope the ref is still
+        // wired up correctly, but cleanup would not be automatic.
+        const signal = createTestSignal<number>(1)
+        const bridgedRef = shallowRef<{ value: number } | null>(null)
+
+        const HostComponent = defineComponent({
+            name: 'BridgeHost',
+            setup() {
+                const r = coreSignalToVueRef(signal)
+                bridgedRef.value = r as unknown as { value: number }
+                return () => h('div', String(r.value))
+            },
+        })
+
+        const wrapper = mount(HostComponent, { attachTo: document.body })
+        expect(bridgedRef.value?.value).toBe(1)
+        expect(wrapper.text()).toBe('1')
+
+        signal.set(42)
+        await nextTick()
+
+        expect(bridgedRef.value?.value).toBe(42)
+        expect(wrapper.text()).toBe('42')
+
+        wrapper.unmount()
+    })
+})

package/src/components/DrawingStyleToolbar.vue

@@ -1,199 +1,199 @@
-<template>
-  <div
-    class="drawing-style-toolbar"
-    @pointerdown.stop
-    @pointermove.stop
-    @pointerup.stop
-  >
-    <div class="toolbar-item color-item" title="颜色">
-      <span class="color-swatch" :style="{ background: drawing.style.stroke ?? '#2962ff' }"></span>
-      <input
-        type="color"
-        class="color-input"
-        :value="drawing.style.stroke ?? '#2962ff'"
-        @input="onColorChange(($event.target as HTMLInputElement).value)"
-      />
-    </div>
-
-    <select
-      class="toolbar-select"
-      :value="drawing.style.strokeWidth ?? 1"
-      @change="onWidthChange(Number(($event.target as HTMLSelectElement).value))"
-      title="线宽"
-    >
-      <option :value="1">1px</option>
-      <option :value="2">2px</option>
-      <option :value="3">3px</option>
-      <option :value="4">4px</option>
-    </select>
-
-    <select
-      class="toolbar-select"
-      :value="drawing.style.strokeStyle ?? 'solid'"
-      @change="onLineStyleChange(($event.target as HTMLSelectElement).value as 'solid' | 'dashed' | 'dotted')"
-      title="线型"
-    >
-      <option value="solid">实线</option>
-      <option value="dashed">虚线</option>
-      <option value="dotted">点线</option>
-    </select>
-
-    <button type="button" class="toolbar-btn delete-btn" title="删除" @click="$emit('delete')">
-      <svg class="delete-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <path d="M3 6h18" />
-        <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
-        <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
-      </svg>
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue'
-
-export interface DrawingStyle {
-  stroke?: string
-  strokeWidth?: number
-  strokeStyle?: 'solid' | 'dashed' | 'dotted'
-  fill?: string
-}
-
-export interface DrawingObject {
-  id: string
-  type: string
-  points: { x: number; y: number }[]
-  style: DrawingStyle
-}
-
-const props = defineProps<{
-  drawing: DrawingObject
-}>()
-
-const emit = defineEmits<{
-  (e: 'updateStyle', style: Partial<DrawingStyle>): void
-  (e: 'delete'): void
-}>()
-
-function onKeyDown(e: KeyboardEvent) {
-  if (e.key === 'Delete') {
-    e.preventDefault()
-    emit('delete')
-  }
-}
-
-onMounted(() => document.addEventListener('keydown', onKeyDown))
-onUnmounted(() => document.removeEventListener('keydown', onKeyDown))
-
-function onColorChange(color: string) {
-  emit('updateStyle', { stroke: color })
-}
-
-function onWidthChange(width: number) {
-  emit('updateStyle', { strokeWidth: width })
-}
-
-function onLineStyleChange(style: 'solid' | 'dashed' | 'dotted') {
-  emit('updateStyle', { strokeStyle: style })
-}
-</script>
-
-<style scoped>
-.drawing-style-toolbar {
-  position: absolute;
-  left: 50%;
-  top: 8px;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
-  height: 32px;
-  background: rgba(250, 251, 252, 0.88);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  border: 1px solid #e5e7eb;
-  border-radius: 6px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-  z-index: 100;
-  user-select: none;
-  pointer-events: auto;
-}
-
-.toolbar-item {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.color-item {
-  position: relative;
-  width: 24px;
-  height: 24px;
-}
-
-.color-swatch {
-  display: block;
-  width: 100%;
-  height: 100%;
-  border: 1px solid #d1d5db;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.color-input {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-}
-
-.toolbar-select {
-  height: 24px;
-  padding: 0 4px;
-  border: 1px solid #d1d5db;
-  border-radius: 4px;
-  background: #fff;
-  color: #374151;
-  font-size: 12px;
-  cursor: pointer;
-  outline: none;
-}
-
-.toolbar-select:hover {
-  border-color: #9ca3af;
-}
-
-.toolbar-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  background: transparent;
-  color: #6b7280;
-  cursor: pointer;
-  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
-}
-
-.toolbar-btn:hover {
-  border-color: #d1d5db;
-  background: #f3f4f6;
-  color: #374151;
-}
-
-.delete-btn:hover {
-  color: #dc2626;
-  border-color: #fca5a5;
-  background: #fef2f2;
-}
-
-.delete-icon {
-  width: 14px;
-  height: 14px;
-}
-</style>
+<template>
+  <div
+    class="drawing-style-toolbar"
+    @pointerdown.stop
+    @pointermove.stop
+    @pointerup.stop
+  >
+    <div class="toolbar-item color-item" title="颜色">
+      <span class="color-swatch" :style="{ background: drawing.style.stroke ?? '#2962ff' }"></span>
+      <input
+        type="color"
+        class="color-input"
+        :value="drawing.style.stroke ?? '#2962ff'"
+        @input="onColorChange(($event.target as HTMLInputElement).value)"
+      />
+    </div>
+
+    <select
+      class="toolbar-select"
+      :value="drawing.style.strokeWidth ?? 1"
+      @change="onWidthChange(Number(($event.target as HTMLSelectElement).value))"
+      title="线宽"
+    >
+      <option :value="1">1px</option>
+      <option :value="2">2px</option>
+      <option :value="3">3px</option>
+      <option :value="4">4px</option>
+    </select>
+
+    <select
+      class="toolbar-select"
+      :value="drawing.style.strokeStyle ?? 'solid'"
+      @change="onLineStyleChange(($event.target as HTMLSelectElement).value as 'solid' | 'dashed' | 'dotted')"
+      title="线型"
+    >
+      <option value="solid">实线</option>
+      <option value="dashed">虚线</option>
+      <option value="dotted">点线</option>
+    </select>
+
+    <button type="button" class="toolbar-btn delete-btn" title="删除" @click="$emit('delete')">
+      <svg class="delete-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M3 6h18" />
+        <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+        <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
+
+export interface DrawingStyle {
+  stroke?: string
+  strokeWidth?: number
+  strokeStyle?: 'solid' | 'dashed' | 'dotted'
+  fill?: string
+}
+
+export interface DrawingObject {
+  id: string
+  type: string
+  points: { x: number; y: number }[]
+  style: DrawingStyle
+}
+
+const props = defineProps<{
+  drawing: DrawingObject
+}>()
+
+const emit = defineEmits<{
+  (e: 'updateStyle', style: Partial<DrawingStyle>): void
+  (e: 'delete'): void
+}>()
+
+function onKeyDown(e: KeyboardEvent) {
+  if (e.key === 'Delete') {
+    e.preventDefault()
+    emit('delete')
+  }
+}
+
+onMounted(() => document.addEventListener('keydown', onKeyDown))
+onUnmounted(() => document.removeEventListener('keydown', onKeyDown))
+
+function onColorChange(color: string) {
+  emit('updateStyle', { stroke: color })
+}
+
+function onWidthChange(width: number) {
+  emit('updateStyle', { strokeWidth: width })
+}
+
+function onLineStyleChange(style: 'solid' | 'dashed' | 'dotted') {
+  emit('updateStyle', { strokeStyle: style })
+}
+</script>
+
+<style scoped>
+.drawing-style-toolbar {
+  position: absolute;
+  left: 50%;
+  top: 8px;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  height: 32px;
+  background: rgba(250, 251, 252, 0.88);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  z-index: 100;
+  user-select: none;
+  pointer-events: auto;
+}
+
+.toolbar-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.color-item {
+  position: relative;
+  width: 24px;
+  height: 24px;
+}
+
+.color-swatch {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.color-input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+}
+
+.toolbar-select {
+  height: 24px;
+  padding: 0 4px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  background: #fff;
+  color: #374151;
+  font-size: 12px;
+  cursor: pointer;
+  outline: none;
+}
+
+.toolbar-select:hover {
+  border-color: #9ca3af;
+}
+
+.toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
+}
+
+.toolbar-btn:hover {
+  border-color: #d1d5db;
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.delete-btn:hover {
+  color: #dc2626;
+  border-color: #fca5a5;
+  background: #fef2f2;
+}
+
+.delete-icon {
+  width: 14px;
+  height: 14px;
+}
+</style>