0909eve
This commit is contained in:
parent
11f4fec721
commit
09e6ff720e
24
src/App.vue
24
src/App.vue
@ -886,36 +886,14 @@ function deleteSelected() {
|
|||||||
<div class="world" :style="worldStyle" ref="worldRef">
|
<div class="world" :style="worldStyle" ref="worldRef">
|
||||||
<!-- 导线(SVG 覆盖层) -->
|
<!-- 导线(SVG 覆盖层) -->
|
||||||
<svg class="wires" :width="state.worldSize" :height="state.worldSize" @mousemove="onViewportMouseMoveTrack">
|
<svg class="wires" :width="state.worldSize" :height="state.worldSize" @mousemove="onViewportMouseMoveTrack">
|
||||||
<!-- 定义阴影与每条导线的渐变高光 -->
|
|
||||||
<defs>
|
|
||||||
<filter id="wireShadow" x="-20%" y="-20%" width="140%" height="140%">
|
|
||||||
<feDropShadow dx="0" dy="1" stdDeviation="1" flood-color="#000" flood-opacity="0.12" />
|
|
||||||
</filter>
|
|
||||||
<template v-for="w in wires">
|
|
||||||
<linearGradient :id="'wireGrad-' + w.id" gradientUnits="userSpaceOnUse"
|
|
||||||
:x1="getConnectionPointWorldPos(getInstance(w.a.instId)!, w.a.cpIndex).x"
|
|
||||||
:y1="getConnectionPointWorldPos(getInstance(w.a.instId)!, w.a.cpIndex).y"
|
|
||||||
:x2="getConnectionPointWorldPos(getInstance(w.b.instId)!, w.b.cpIndex).x"
|
|
||||||
:y2="getConnectionPointWorldPos(getInstance(w.b.instId)!, w.b.cpIndex).y">
|
|
||||||
<stop offset="0%" stop-color="#f3f4f6" />
|
|
||||||
<stop offset="100%" stop-color="#6b7280" />
|
|
||||||
</linearGradient>
|
|
||||||
</template>
|
|
||||||
</defs>
|
|
||||||
<g>
|
<g>
|
||||||
<!-- 分层导线:底层暗色,顶层渐变高光,圆角端点,更有质感 -->
|
<g v-for="w in wires" :key="w.id" class="wire-group"
|
||||||
<g v-for="w in wires" :key="w.id" class="wire-group" filter="url(#wireShadow)"
|
|
||||||
@click.stop="(e) => removeWire(w.id, e)">
|
@click.stop="(e) => removeWire(w.id, e)">
|
||||||
<line class="wire-base" :x1="getConnectionPointWorldPos(getInstance(w.a.instId)!, w.a.cpIndex).x"
|
<line class="wire-base" :x1="getConnectionPointWorldPos(getInstance(w.a.instId)!, w.a.cpIndex).x"
|
||||||
:y1="getConnectionPointWorldPos(getInstance(w.a.instId)!, w.a.cpIndex).y"
|
:y1="getConnectionPointWorldPos(getInstance(w.a.instId)!, w.a.cpIndex).y"
|
||||||
:x2="getConnectionPointWorldPos(getInstance(w.b.instId)!, w.b.cpIndex).x"
|
:x2="getConnectionPointWorldPos(getInstance(w.b.instId)!, w.b.cpIndex).x"
|
||||||
:y2="getConnectionPointWorldPos(getInstance(w.b.instId)!, w.b.cpIndex).y" stroke-linecap="round"
|
:y2="getConnectionPointWorldPos(getInstance(w.b.instId)!, w.b.cpIndex).y" stroke-linecap="round"
|
||||||
vector-effect="non-scaling-stroke" />
|
vector-effect="non-scaling-stroke" />
|
||||||
<line class="wire-highlight" :x1="getConnectionPointWorldPos(getInstance(w.a.instId)!, w.a.cpIndex).x"
|
|
||||||
:y1="getConnectionPointWorldPos(getInstance(w.a.instId)!, w.a.cpIndex).y"
|
|
||||||
:x2="getConnectionPointWorldPos(getInstance(w.b.instId)!, w.b.cpIndex).x"
|
|
||||||
:y2="getConnectionPointWorldPos(getInstance(w.b.instId)!, w.b.cpIndex).y"
|
|
||||||
:stroke="'url(#wireGrad-' + w.id + ')'" stroke-linecap="round" vector-effect="non-scaling-stroke" />
|
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
<!-- 预览线:当选中一个端点时,显示到鼠标或吸附端点的线 -->
|
<!-- 预览线:当选中一个端点时,显示到鼠标或吸附端点的线 -->
|
||||||
|
|||||||
@ -1,8 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
|
|
||||||
import { elements, type CircuitElement, type Preset } from '../elements'
|
|
||||||
|
|
||||||
// 1) 左侧面板元件清单(显式导入)
|
|
||||||
type PaletteItem = CircuitElement
|
|
||||||
const palette: PaletteItem[] = [...elements]
|
|
||||||
</script>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user