@363045841yyt/klinechart 0.7.4 → 0.7.5

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>