粒子属性调整

src/views/CurveEditor.vue

@@ -1,29 +1,39 @@
 <template>
   <div class="ce">
-    <svg ref="svg" class="ce-svg" @dblclick="onDbl">
-      <!-- 网格线(0.25/0.5/0.75) -->
-      <g class="ce-grid">
-        <line v-for="g in [0.25,0.5,0.75]" :key="'v'+g" :x1="px(g)" y1="0" :x2="px(g)" :y2="py(0)" />
-        <line v-for="g in [0.25,0.5,0.75]" :key="'h'+g" x1="0" :y1="py(g)" :x2="px(1)" :y2="py(g)" />
-      </g>
-      <rect :x="px(0)" :y="py(1)" :width="px(1)-px(0)" :height="py(0)-py(1)" class="ce-frame" fill="none" />
-      <!-- 折线 -->
-      <polyline :points="polyPoints" class="ce-line" fill="none" />
-      <!-- 节点:可见圈 r=5 + 命中圈 r=9 -->
-      <g v-for="(pt,i) in pts" :key="i">
-        <circle :cx="px(pt.x)" :cy="py(pt.y)" r="5" class="ce-node" />
-        <circle :cx="px(pt.x)" :cy="py(pt.y)" r="9" class="ce-hit"
-          @pointerdown="onNodeDown($event,i)" @dblclick="onNodeDbl(i,$event)" />
-      </g>
-    </svg>
-    <div class="ce-nav"><span class="ce-tip">双击空白新建·双击节点删除·拖动节点调整</span></div>
+    <div class="ce-editor">
+      <svg ref="svg" class="ce-svg" @dblclick="onDbl">
+        <!-- 网格线(0.25/0.5/0.75) -->
+        <g class="ce-grid">
+          <line v-for="g in [0.25,0.5,0.75]" :key="'v'+g" :x1="px(g)" y1="0" :x2="px(g)" :y2="py(0)" />
+          <line v-for="g in [0.25,0.5,0.75]" :key="'h'+g" x1="0" :y1="py(g)" :x2="px(1)" :y2="py(g)" />
+        </g>
+        <rect :x="px(0)" :y="py(1)" :width="px(1)-px(0)" :height="py(0)-py(1)" class="ce-frame" fill="none" />
+        <!-- 折线 -->
+        <polyline :points="polyPoints" class="ce-line" fill="none" />
+        <!-- 节点:可见圈 r=5 + 命中圈 r=9 -->
+        <g v-for="(pt,i) in pts" :key="i">
+          <circle :cx="px(pt.x)" :cy="py(pt.y)" r="5" class="ce-node" />
+          <circle :cx="px(pt.x)" :cy="py(pt.y)" r="9" class="ce-hit"
+            @pointerdown="onNodeDown($event,i)" @dblclick="onNodeDbl(i,$event)" />
+        </g>
+      </svg>
+      <div class="ce-nav"><span class="ce-tip">双击空白新建·双击节点删除·拖动节点调整</span></div>
+    </div>
+    <button class="ce-reset" type="button" title="恢复默认曲线" @click="resetCurve">重置</button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
-const props = defineProps<{ modelValue: { x: number; y: number }[] }>()
+type CurvePoint = { x: number; y: number }
+
+const props = withDefaults(defineProps<{
+  modelValue: CurvePoint[]
+  defaultValue?: CurvePoint[]
+}>(), {
+  defaultValue: () => [{ x: 0, y: 0 }, { x: 1, y: 1 }],
+})
 const emit = defineEmits<{ (e: 'update:modelValue', v: { x: number; y: number }[]): void }>()
 
 const svg = ref<SVGSVGElement | null>(null)
@@ -49,6 +59,10 @@ function normalized(): { x: number; y: number }[] {
 }
 function set(v: { x: number; y: number }[]) { emit('update:modelValue', [...v].sort((a, b) => a.x - b.x)) }
 
+function resetCurve() {
+  set(props.defaultValue.map((point) => ({ ...point })))
+}
+
 const pts = computed(() => normalized())
 const polyPoints = computed(() => pts.value.map(p => `${px(p.x)},${py(p.y)}`).join(' '))
 
@@ -121,7 +135,13 @@ onUnmounted(() => { ro?.disconnect() })
 </script>
 
 <style scoped>
-.ce { width: 100%; }
+.ce { display: flex; align-items: flex-start; gap: 6px; width: 100%; }
+.ce-editor { flex: 1; min-width: 0; }
+.ce-reset {
+  flex: 0 0 auto; padding: 5px 7px; border: 1px solid #3b4b65; border-radius: 5px;
+  background: #242f42; color: #c4cee2; font-size: 10px; cursor: pointer;
+}
+.ce-reset:hover { border-color: #7774ff; background: #4f4dc2; color: #fff; }
 .ce-svg { width: 100%; height: 110px; display: block; border: 1px solid #2a2a3c; border-radius: 6px; background: #10101a; cursor: crosshair; touch-action: none; }
 .ce-grid line { stroke: #1e1e30; stroke-width: 1; }
 .ce-frame { stroke: #2e2e44; stroke-width: 1; }