From e1f5484e0253041f019e4dfa68e281352a5ff029 Mon Sep 17 00:00:00 2001
From: bottlefish <781230111@qq.com>
Date: Thu, 9 Jul 2026 00:51:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(prototype):=20=E6=9B=B4=E6=96=B0=E7=BA=BF?=
 =?UTF-8?q?=E7=BC=86=E7=89=A9=E7=90=86=E4=BA=A4=E4=BA=92=E5=8E=9F=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Assets/Prototype/2D线缆物理交互/.thumbnail    | Bin 2892 -> 2274 bytes
 .../2D线缆物理交互/Cable Physics.dc.html      | 374 +++++++-----------
 2 files changed, 135 insertions(+), 239 deletions(-)

diff --git a/Assets/Prototype/2D线缆物理交互/.thumbnail b/Assets/Prototype/2D线缆物理交互/.thumbnail
index 77f76a9a2e18420283dacc6f6c5b04c330a9a1f7..29f988293df3a7e81d5e9600c1b1ab0e92588ad4 100644
GIT binary patch
delta 1827
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
Mjt>+o!#~RX1@`AW=>Px#

literal 2892
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

diff --git a/Assets/Prototype/2D线缆物理交互/Cable Physics.dc.html b/Assets/Prototype/2D线缆物理交互/Cable Physics.dc.html
index db613bf95..1a4ebebef 100644
--- a/Assets/Prototype/2D线缆物理交互/Cable Physics.dc.html	
+++ b/Assets/Prototype/2D线缆物理交互/Cable Physics.dc.html	
@@ -26,37 +26,25 @@ a{color:#3D63DD;text-decoration:none}a:hover{color:#2B4BB5}
       </sc-for>
     </div>
   </div>
-  <div style="position:absolute;top:74px;right:28px;width:206px;padding:12px 14px;background:rgba(244,243,240,.92);border:1px solid rgba(38,38,42,.08);box-shadow:0 10px 28px rgba(40,38,32,.10);border-radius:8px;display:flex;flex-direction:column;gap:10px;pointer-events:auto">
-    <div style="display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:650;color:#26262A">
-      <span>重力</span>
-      <span style="font-variant-numeric:tabular-nums;color:#77746C">{{ gravityScaleText }}</span>
-    </div>
-    <input type="range" min="0.6" max="2.2" step="0.02" value="{{ gravityScale }}" onInput="{{ onGravityInput }}" style="width:100%;accent-color:#4B72E0">
-    <div style="display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:650;color:#26262A">
-      <span>阻尼</span>
-      <span style="font-variant-numeric:tabular-nums;color:#77746C">{{ motionDampingText }}</span>
-    </div>
-    <input type="range" min="0.86" max="0.99" step="0.005" value="{{ motionDamping }}" onInput="{{ onDampingInput }}" style="width:100%;accent-color:#4B72E0">
-  </div>
   <div style="position:absolute;bottom:22px;left:0;right:0;display:flex;justify-content:center;pointer-events:none">
     <div style="padding:8px 16px;border-radius:99px;background:{{ statusBg }};color:{{ statusFg }};font-size:12.5px;font-weight:550;white-space:nowrap;flex:none;transition:background .25s,color .25s">{{ status }}</div>
   </div>
 </div>
 </x-dc>
-<script type="text/x-dc" data-dc-script data-props="{&quot;maxStretch&quot;:{&quot;editor&quot;:&quot;range&quot;,&quot;default&quot;:1.5,&quot;min&quot;:1.5,&quot;max&quot;:4,&quot;step&quot;:0.1,&quot;tsType&quot;:&quot;number&quot;,&quot;section&quot;:&quot;物理&quot;,&quot;description&quot;:&quot;最大拉出长度（相对初始长度的倍数）&quot;},&quot;retractSpeed&quot;:{&quot;editor&quot;:&quot;range&quot;,&quot;default&quot;:0.09,&quot;min&quot;:0.02,&quot;max&quot;:0.3,&quot;step&quot;:0.01,&quot;tsType&quot;:&quot;number&quot;,&quot;section&quot;:&quot;物理&quot;,&quot;description&quot;:&quot;松手后回收速度&quot;},&quot;gravityScale&quot;:{&quot;editor&quot;:&quot;range&quot;,&quot;default&quot;:1.28,&quot;min&quot;:0.6,&quot;max&quot;:2.2,&quot;step&quot;:0.02,&quot;tsType&quot;:&quot;number&quot;,&quot;section&quot;:&quot;重量&quot;,&quot;description&quot;:&quot;线缆和插头的重力倍率&quot;},&quot;motionDamping&quot;:{&quot;editor&quot;:&quot;range&quot;,&quot;default&quot;:0.94,&quot;min&quot;:0.86,&quot;max&quot;:0.99,&quot;step&quot;:0.005,&quot;tsType&quot;:&quot;number&quot;,&quot;section&quot;:&quot;重量&quot;,&quot;description&quot;:&quot;数值越低越沉，越不飘&quot;}}">
+<script type="text/x-dc" data-dc-script data-props="{&quot;maxStretch&quot;:{&quot;editor&quot;:&quot;range&quot;,&quot;default&quot;:4,&quot;min&quot;:2,&quot;max&quot;:8,&quot;step&quot;:0.2,&quot;tsType&quot;:&quot;number&quot;,&quot;section&quot;:&quot;物理&quot;,&quot;description&quot;:&quot;最大拉出长度（相对初始长度的倍数）&quot;},&quot;retractSpeed&quot;:{&quot;editor&quot;:&quot;range&quot;,&quot;default&quot;:0.09,&quot;min&quot;:0.02,&quot;max&quot;:0.3,&quot;step&quot;:0.01,&quot;tsType&quot;:&quot;number&quot;,&quot;section&quot;:&quot;物理&quot;,&quot;description&quot;:&quot;松手后回收速度&quot;}}">
 class Component extends DCLogic {
-  state = { material: 'rubber', plugged: false, dragging: false, gravityScale: 1.28, motionDamping: 0.94 };
+  state = { material: 'rubber', plugged: false, dragging: false };
 
   presets = {
-    rubber:   { label: '橡胶粗缆', g: 2600, damp: 0.960, w: 17, iter: 30, smooth: 0.34, Lmin: 92, retract: 0.085,
+    rubber:   { label: '橡胶粗缆', g: 4400, damp: 0.965, w: 17, iter: 30, smooth: 0.34, Lmin: 90, retract: 0.085,
                 body: '#4B72E0', dark: '#2F4CA8', hi: 'rgba(255,255,255,.38)', kind: 'rubber' },
-    braided:  { label: '编织线',   g: 2000, damp: 0.972, w: 12, iter: 24, smooth: 0.20, Lmin: 92, retract: 0.10,
+    braided:  { label: '编织线',   g: 3600, damp: 0.975, w: 12, iter: 24, smooth: 0.20, Lmin: 95, retract: 0.10,
                 body: '#5C6070', dark: '#3B3E49', hi: '#A9AFBE', kind: 'braid' },
-    pixel:    { label: '像素风',   g: 1900, damp: 0.974, w: 15, iter: 24, smooth: 0.22, Lmin: 92, retract: 0.11,
+    pixel:    { label: '像素风',   g: 3400, damp: 0.975, w: 15, iter: 24, smooth: 0.22, Lmin: 95, retract: 0.11,
                 body: '#3D5BD9', dark: '#222E66', mid: '#6E8CF5', hi: '#B9C8FF', kind: 'pixel' }
   };
 
-  N = 42; plugLen = 58; dockOff = 41; exitGuardLen = 12; extraFeedLen = 300;
+  N = 42; plugLen = 58; dockOff = 41;
 
   componentDidMount() {
     this.canvas = this.canvasRef.current;
@@ -66,9 +54,9 @@ class Component extends DCLogic {
       this.W = this.canvas.clientWidth; this.H = this.canvas.clientHeight;
       this.canvas.width = this.W * dpr; this.canvas.height = this.H * dpr;
       this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-      this.anchor = { x: this.W * 0.5, y: Math.min(218, this.H * 0.32) };
-      this.LminScale = Math.min(1, Math.max(0.4, (this.H - this.anchor.y - 90) / 300));
-      this.hole = { x: this.W - 86, y: Math.max(260, this.H * 0.44) };
+      this.anchor = { x: this.W * 0.5, y: Math.max(260, this.H * 0.52) };
+      this.LminScale = Math.min(1, Math.max(0.4, (this.H - this.anchor.y - 80) / 160));
+      this.hole = { x: this.W - 86, y: Math.max(280, this.H * 0.5) };
     };
     this.fit();
     window.addEventListener('resize', this.fit);
@@ -81,7 +69,7 @@ class Component extends DCLogic {
     }
     this.pts = P;
     this.L = this.presets.rubber.Lmin;
-    this.pointer = null; this.reelSpin = 0; this.plugAng = Math.PI / 2; this.plugDir = { x: 0, y: 1 };
+    this.pointer = null; this.reelSpin = 0; this.plugAng = Math.PI / 2;
     const c = this.canvas;
     c.addEventListener('pointerdown', this.onDown);
     c.addEventListener('pointermove', this.onMove);
@@ -96,9 +84,9 @@ class Component extends DCLogic {
 
   pos(e) { const r = this.canvas.getBoundingClientRect(); return { x: e.clientX - r.left, y: e.clientY - r.top }; }
   plugCenter() {
-    const P = this.pts, a = P[this.N - 1];
-    const dir = this.plugDir || { x: Math.cos(this.plugAng ?? Math.PI / 2), y: Math.sin(this.plugAng ?? Math.PI / 2) };
-    const ux = dir.x, uy = dir.y;
+    const P = this.pts, a = P[this.N - 1], b = P[this.N - 2];
+    const d = Math.hypot(a.x - b.x, a.y - b.y) || 1;
+    const ux = (a.x - b.x) / d, uy = (a.y - b.y) / d;
     return { x: a.x + ux * this.plugLen * 0.5, y: a.y + uy * this.plugLen * 0.5, ux, uy };
   }
   onDown = (e) => {
@@ -129,18 +117,17 @@ class Component extends DCLogic {
   loop = () => {
     this.raf = requestAnimationFrame(this.loop);
     const m = this.presets[this.state.material];
-    const gravityScale = this.state.gravityScale ?? this.props.gravityScale ?? 1.28;
-    const motionDamping = this.state.motionDamping ?? this.props.motionDamping ?? 0.94;
     const Lmin = m.Lmin * (this.LminScale || 1);
-    const Lmax = Math.max(Lmin * (this.props.maxStretch ?? 2.8), Lmin + this.extraFeedLen * (this.LminScale || 1));
+    const dockD = Math.hypot((this.hole.x - this.dockOff) - this.anchor.x, this.hole.y - this.anchor.y);
+    const Lmax = Math.max(Lmin * (this.props.maxStretch ?? 4), dockD * 1.12);
     const retract = this.props.retractSpeed ?? m.retract;
     const P = this.pts, N = this.N, dt = 1 / 60;
     const dock = { x: this.hole.x - this.dockOff, y: this.hole.y };
 
     // --- drag target (heavy lerp) + unplug check
     if (this.state.dragging && this.pointer) {
-      this.dragT.x += (this.pointer.x - this.dragT.x) * 0.38;
-      this.dragT.y += (this.pointer.y - this.dragT.y) * 0.38;
+      this.dragT.x += (this.pointer.x - this.dragT.x) * 0.3;
+      this.dragT.y += (this.pointer.y - this.dragT.y) * 0.3;
       if (this.dragT.y > this.H - 18) this.dragT.y = this.H - 18;
       // clamp to CURRENT rope length — the pin can never overstretch the rope (kills taut-drag jitter);
       // length feeds out below, and the target follows it
@@ -163,16 +150,14 @@ class Component extends DCLogic {
 
     // --- verlet integrate
     const seg = this.L / (N - 1);
-    const exitGuardSegments = this.getExitGuardSegments(seg);
     const pinnedEnd = this.state.dragging || this.state.plugged;
-    for (let i = exitGuardSegments + 1; i < N; i++) {
+    for (let i = 1; i < N; i++) {
       const p = P[i];
-      const damp = Math.min(m.damp, motionDamping, (!pinnedEnd && i >= N - 3) ? 0.84 : 1);
-      const vx = (p.x - p.px) * damp, vy = (p.y - p.py) * damp;
+      const vx = (p.x - p.px) * m.damp, vy = (p.y - p.py) * m.damp;
       p.px = p.x; p.py = p.y;
-      p.x += vx; p.y += vy + m.g * gravityScale * dt * dt;
+      p.x += vx; p.y += vy + m.g * (i > N - 4 ? 1.8 : 1) * dt * dt;
     }
-    this.applyExitGuard(seg, exitGuardSegments);
+    P[0].x = this.anchor.x; P[0].y = this.anchor.y; P[0].px = P[0].x; P[0].py = P[0].y;
     if (this.state.dragging) { P[N - 1].x = this.dragT.x; P[N - 1].y = this.dragT.y; }
     else if (this.state.plugged) {
       P[N - 1].x += (dock.x - P[N - 1].x) * 0.5; P[N - 1].y += (dock.y - P[N - 1].y) * 0.5;
@@ -185,12 +170,16 @@ class Component extends DCLogic {
         const dx = b.x - a.x, dy = b.y - a.y;
         const d = Math.hypot(dx, dy) || 1e-6;
         const diff = (d - seg) / d;
-        const pinA = i <= exitGuardSegments;
-        const pinB = (i + 1 <= exitGuardSegments) || ((i === N - 2) && pinnedEnd);
+        const pinA = i === 0, pinB = (i === N - 2) && pinnedEnd;
         const wa = pinA ? 0 : (pinB ? 1 : 0.5), wb = pinB ? 0 : (pinA ? 1 : 0.5);
         a.x += dx * diff * wa; a.y += dy * diff * wa;
         b.x -= dx * diff * wb; b.y -= dy * diff * wb;
       }
+      // exit-stub guard: a short protected span leaves the stub pointing straight down,
+      // regardless of where the rest of the rope goes — no sharp kink / self-pierce at the mouth
+      P[1].x += (P[0].x - P[1].x) * 0.6;
+      if (P[1].y < P[0].y + 6) P[1].y = P[0].y + 6;
+      P[2].x += (P[0].x - P[2].x) * 0.2;
       if (this.state.plugged) {
         // orient plug horizontally into socket
         const e2 = P[N - 2];
@@ -198,67 +187,29 @@ class Component extends DCLogic {
       }
       // bending stiffness
       if (m.smooth > 0 && k % 3 === 0) {
-        for (let i = exitGuardSegments + 1; i < N - 1; i++) {
+        for (let i = 1; i < N - 1; i++) {
           if (i === N - 2 && pinnedEnd) continue;
           const p = P[i];
           const mx = (P[i - 1].x + P[i + 1].x) / 2, my = (P[i - 1].y + P[i + 1].y) / 2;
           p.x += (mx - p.x) * m.smooth * 0.5; p.y += (my - p.y) * m.smooth * 0.5;
         }
       }
-      this.stabilizePlugEnd(seg, pinnedEnd);
-      this.applyExitGuard(seg, exitGuardSegments);
     }
     // floor (pinned dragged end is exempt — no pin-vs-floor fight)
     const floor = this.H - 14;
-    for (let i = exitGuardSegments + 1; i < N; i++) {
+    for (let i = 1; i < N; i++) {
       if (i === N - 1 && this.state.dragging) continue;
-      if (P[i].y > floor) {
-        P[i].y = floor;
-        P[i].py = P[i].y;
-        P[i].px += (P[i].x - P[i].px) * 0.45;
-      }
+      if (P[i].y > floor) { P[i].y = floor; P[i].px += (P[i].x - P[i].px) * 0.5; }
     }
 
     this.draw(m, Lmin, Lmax);
   };
 
-  getExitGuardSegments(seg) {
-    return Math.max(1, Math.min(3, Math.round(this.exitGuardLen / Math.max(1, seg))));
-  }
-
-  applyExitGuard(seg, guardSegments) {
-    const P = this.pts, a = this.anchor;
-    for (let i = 0; i <= guardSegments && i < this.N; i++) {
-      const p = P[i];
-      p.x = a.x;
-      p.y = a.y + seg * i;
-      p.px = p.x;
-      p.py = p.y;
-    }
-  }
-
-  stabilizePlugEnd(seg, pinnedEnd) {
-    if (pinnedEnd || this.N < 6) return;
-    const P = this.pts, N = this.N;
-    const tail = P[N - 1], neck = P[N - 2], back = P[N - 5];
-    const dx = neck.x - back.x, dy = neck.y - back.y;
-    const d = Math.hypot(dx, dy) || 1;
-    const tx = dx / d, ty = dy / d;
-    const desiredX = neck.x + tx * seg;
-    const desiredY = neck.y + ty * seg;
-    const pull = 0.025;
-    const ox = (desiredX - tail.x) * pull;
-    const oy = (desiredY - tail.y) * pull;
-    tail.x += ox; tail.y += oy;
-    tail.px += ox; tail.py += oy;
-  }
-
-  drawCablePath(path, m, shadow, cap = 'round') {
-    const ctx = this.ctx;
-    ctx.lineCap = cap; ctx.lineJoin = 'round';
+  drawCablePath(ctx, path, m, shadow, cap) {
+    ctx.lineCap = cap || 'round'; ctx.lineJoin = 'round';
     if (shadow !== false) {
       ctx.save(); ctx.translate(0, 7);
-      ctx.strokeStyle = 'rgba(40,38,32,.10)'; ctx.lineWidth = m.w + 2; ctx.stroke(path); ctx.restore();
+      ctx.strokeStyle = 'rgba(40,38,32,.16)'; ctx.lineWidth = m.w + 2; ctx.stroke(path); ctx.restore();
     }
     if (m.kind === 'pixel') {
       // flat stepped bands — no gradients, hard edges
@@ -286,160 +237,109 @@ class Component extends DCLogic {
   }
 
   draw(m, Lmin, Lmax) {
-    this.clearCanvas();
-    this.drawReel(m, Lmin, Lmax);
-    this.drawExitStub(m);
-    if (!this.state.plugged) this.drawSocket(m);
-    this.drawMainCable(m);
-    this.drawFrontCableOverlay(m);
-    this.drawCablePlug(m);
-    if (this.state.plugged) this.drawSocket(m);
-  }
-
-  clearCanvas() {
-    this.ctx.clearRect(0, 0, this.W, this.H);
-  }
-
-  drawReel(m, Lmin, Lmax) {
-    const ctx = this.ctx, a = this.anchor;
-    const reelY = a.y - 128;
-    const frac = (this.L - Lmin) / (Lmax - Lmin);
+    const ctx = this.ctx, P = this.pts, N = this.N;
+    ctx.clearRect(0, 0, this.W, this.H);
 
+    // reel
+    const a = this.anchor;
     ctx.fillStyle = '#E8E6E1';
-    ctx.beginPath(); ctx.arc(a.x, reelY, 108, 0, 7); ctx.fill();
+    ctx.beginPath(); ctx.arc(a.x, a.y - 128, 108, 0, 7); ctx.fill();
     ctx.strokeStyle = '#DBD8D2'; ctx.lineWidth = 1.5;
-    ctx.beginPath(); ctx.arc(a.x, reelY, 74, 0, 7); ctx.stroke();
-
-    this.drawReelSpinMarker(reelY);
-
-    ctx.strokeStyle = m.body; ctx.lineWidth = 5; ctx.lineCap = 'round';
-    ctx.beginPath();
-    ctx.arc(a.x, reelY, 92, -Math.PI / 2, -Math.PI / 2 + Math.max(0.001, frac) * Math.PI * 2);
-    ctx.stroke();
-  }
-
-  drawReelSpinMarker(reelY) {
-    const ctx = this.ctx, a = this.anchor;
-    ctx.save(); ctx.translate(a.x, reelY); ctx.rotate(this.reelSpin);
+    ctx.beginPath(); ctx.arc(a.x, a.y - 128, 74, 0, 7); ctx.stroke();
+    // spin marker
+    ctx.save(); ctx.translate(a.x, a.y - 128); ctx.rotate(this.reelSpin);
     ctx.fillStyle = '#CFCCC5';
-    for (let i = 0; i < 3; i++) {
-      ctx.rotate(Math.PI * 2 / 3);
-      ctx.beginPath(); ctx.arc(74, 0, 5, 0, 7); ctx.fill();
-    }
+    for (let i = 0; i < 3; i++) { ctx.rotate(Math.PI * 2 / 3); ctx.beginPath(); ctx.arc(74, 0, 5, 0, 7); ctx.fill(); }
     ctx.restore();
-  }
+    // length gauge on reel
+    const frac = (this.L - Lmin) / (Lmax - Lmin);
+    ctx.strokeStyle = m.body; ctx.lineWidth = 5; ctx.lineCap = 'round';
+    ctx.beginPath(); ctx.arc(a.x, a.y - 128, 92, -Math.PI / 2, -Math.PI / 2 + Math.max(0.001, frac) * Math.PI * 2); ctx.stroke();
 
-  drawExitStub(m) {
-    const ctx = this.ctx, a = this.anchor;
+    // exit stub covers cable (cable is clipped out of the stub area → seamless single path)
     ctx.fillStyle = '#E8E6E1';
     ctx.beginPath(); ctx.roundRect(a.x - 20, a.y - 46, 40, 44, 8); ctx.fill();
     ctx.fillStyle = 'rgba(40,38,32,.28)';
     ctx.beginPath(); ctx.ellipse(a.x, a.y - 4, Math.min(16, m.w * 0.5 + 5), 4.5, 0, 0, 7); ctx.fill();
-  }
 
-  drawMainCable(m) {
-    const ctx = this.ctx;
-    ctx.save();
-    ctx.clip(this.buildExitStubMask(), 'evenodd');
-    this.drawCablePath(this.buildMainCablePath(), m);
-    ctx.restore();
-  }
+    if (!this.state.plugged) this.drawSocket(m);
 
-  buildMainCablePath() {
-    const a = this.anchor, P = this.pts, path = new Path2D();
+    const cctx = ctx;
+
+    // full cable — one seamless path, clipped so it passes under the stub
+    const path = new Path2D();
     path.moveTo(a.x, a.y - 5);
     path.lineTo(P[0].x, P[0].y);
-    this.appendCableCurve(path, 1, this.N - 1);
-    return path;
-  }
-
-  buildExitStubMask() {
-    const a = this.anchor, clip = new Path2D();
-    clip.rect(0, 0, this.W, this.H);
-    clip.roundRect(a.x - 20, a.y - 46, 40, 44, 8);
-    return clip;
-  }
-
-  drawFrontCableOverlay(m) {
-    const frontStartIndex = this.findFrontCableStartIndex();
-    if (frontStartIndex >= this.N - 1) return;
-    this.drawCablePath(this.buildFrontCablePath(frontStartIndex), m, false, 'butt');
-  }
-
-  buildFrontCablePath(startIndex) {
-    const P = this.pts, N = this.N;
-    const path = new Path2D();
-    path.moveTo(P[startIndex].x, P[startIndex].y);
-    this.appendCableCurve(path, startIndex + 1, N - 1);
-    return path;
-  }
-
-  findFrontCableStartIndex() {
-    const P = this.pts, N = this.N;
-    let bottomIndex = 1;
-    for (let i = 2; i < N - 1; i++) {
-      if (P[i].y > P[bottomIndex].y) bottomIndex = i;
-    }
-    return bottomIndex;
-  }
-
-  appendCableCurve(path, controlStart, endIndex) {
-    const P = this.pts;
-    for (let i = controlStart; i < endIndex; i++) {
+    for (let i = 1; i < N - 1; i++) {
       const mx = (P[i].x + P[i + 1].x) / 2, my = (P[i].y + P[i + 1].y) / 2;
       path.quadraticCurveTo(P[i].x, P[i].y, mx, my);
     }
-    path.lineTo(P[endIndex].x, P[endIndex].y);
-  }
+    path.lineTo(P[N - 1].x, P[N - 1].y);
+    const clip = new Path2D();
+    clip.rect(0, 0, this.W, this.H);
+    clip.roundRect(a.x - 20, a.y - 46, 40, 44, 8);
+    cctx.save();
+    cctx.clip(clip, 'evenodd');
+    this.drawCablePath(cctx, path, m);
+    cctx.restore();
 
-  drawCablePlug(m) {
-    const P = this.pts, e = P[this.N - 1];
-    this.updatePlugAngle();
-    this.drawPlug(e.x, e.y, this.plugAng, m);
-  }
-
-  updatePlugAngle() {
-    const dir = this.getPlugTargetDirection();
-    let ta = Math.atan2(dir.y, dir.x);
-    const da = Math.atan2(Math.sin(ta - this.plugAng), Math.cos(ta - this.plugAng));
-    if (!this.state.plugged && Math.abs(da) < 0.006) return;
-    let step = da * (this.state.plugged ? 0.4 : (this.state.dragging ? 0.18 : 0.12));
-    const MAXW = this.state.plugged ? 0.11 : (this.state.dragging ? 0.075 : 0.045);
-    if (step > MAXW) step = MAXW; else if (step < -MAXW) step = -MAXW;
-    this.plugAng += step;
-    this.plugDir.x = Math.cos(this.plugAng);
-    this.plugDir.y = Math.sin(this.plugAng);
-  }
-
-  getPlugTargetDirection() {
-    if (this.state.plugged) return { x: 1, y: 0 };
-
-    const P = this.pts, N = this.N, e = P[N - 1];
-    const prev = this.plugDir || { x: Math.cos(this.plugAng), y: Math.sin(this.plugAng) };
-    const seg = Math.max(1, this.L / Math.max(1, N - 1));
-    let sx = 0, sy = 0, total = 0;
-
-    for (let i = N - 2; i >= Math.max(0, N - 8); i--) {
-      const dx = e.x - P[i].x, dy = e.y - P[i].y;
-      const d = Math.hypot(dx, dy);
-      if (d < seg * 0.35) continue;
-      const w = Math.min(1.75, d / seg);
-      sx += dx / d * w;
-      sy += dy / d * w;
-      total += w;
+    // segment from the sag bottom to the plug re-drawn on top: when the cable overlaps
+    // itself, the run the player is holding reads closer to camera than the run coming
+    // off the reel. Both layers coincide at the sag bottom, so no visible seam.
+    let j = 0;
+    for (let i = 1; i < N; i++) if (P[i].y > P[j].y) j = i;
+    // only redraw when the tail run actually passes over the head run — no overlap,
+    // no overlay, no chance of a junction seam
+    let overlap = false;
+    if (j < N - 2) {
+      const rr = m.w + 6;
+      for (let s = j + 2; s < N && !overlap; s += 2) {
+        for (let t = 0; t < j - 2 && !overlap; t += 2) {
+          if (s - t >= 8 && Math.hypot(P[s].x - P[t].x, P[s].y - P[t].y) < rr) overlap = true;
+        }
+      }
+    }
+    if (overlap && j < N - 2) {
+      // start at an on-curve segment midpoint a couple points before the sag bottom, using
+      // the SAME midpoint construction as the main path — the overlay traces identical
+      // geometry, and a butt start cap adds nothing beyond it: no seam, no notch.
+      const j0 = Math.max(0, j - 2);
+      const tail = new Path2D();
+      tail.moveTo((P[j0].x + P[j0 + 1].x) / 2, (P[j0].y + P[j0 + 1].y) / 2);
+      for (let i = j0 + 1; i < N - 1; i++) {
+        const mx = (P[i].x + P[i + 1].x) / 2, my = (P[i].y + P[i + 1].y) / 2;
+        tail.quadraticCurveTo(P[i].x, P[i].y, mx, my);
+      }
+      tail.lineTo(P[N - 1].x, P[N - 1].y);
+      this.drawCablePath(cctx, tail, m, false, 'butt');
     }
 
-    const span = P[Math.max(0, N - 7)];
-    const spanLen = Math.hypot(e.x - span.x, e.y - span.y);
-    if (total <= 0.001 || spanLen < seg * 1.2) return prev;
+    // plug — angle taken from a point a fixed arc-length back along the rope; when the
+    // rope is compressed (points bunched at the end) the direction is unreliable, so
+    // hold the previous angle instead of flipping. Angular speed stays capped on top.
+    const e = P[N - 1];
+    let kk = N - 1, arc = 0;
+    while (kk > 0 && arc < 30) { arc += Math.hypot(P[kk].x - P[kk - 1].x, P[kk].y - P[kk - 1].y); kk--; }
+    const ref = P[kk], refD = Math.hypot(e.x - ref.x, e.y - ref.y);
+    let ta;
+    if (this.state.plugged) ta = 0;
+    else {
+      // when dragged taut, the cable is a straight line from anchor to plug — aim the
+      // plug along that line directly; local segment directions are noisy under tension
+      const ax = e.x - this.anchor.x, ay = e.y - this.anchor.y;
+      const taut = Math.hypot(ax, ay) / Math.max(1, this.L);
+      if (this.state.dragging && taut > 0.92) ta = Math.atan2(ay, ax);
+      else ta = refD > 9 ? Math.atan2(e.y - ref.y, e.x - ref.x) : this.plugAng;
+    }
+    const da = Math.atan2(Math.sin(ta - this.plugAng), Math.cos(ta - this.plugAng));
+    let step = da * (this.state.plugged ? 0.4 : 0.18);
+    const MAXW = 0.11;
+    if (step > MAXW) step = MAXW; else if (step < -MAXW) step = -MAXW;
+    this.plugAng += step;
+    this.drawPlug(cctx, e.x, e.y, this.plugAng, m);
 
-    let dx = sx / total, dy = sy / total;
-    const d = Math.hypot(dx, dy) || 1;
-    dx /= d; dy /= d;
-
-    const dot = dx * prev.x + dy * prev.y;
-    if (dot < -0.2 && spanLen < seg * 2.8) return prev;
-    return { x: dx, y: dy };
+    // plate drawn over the plug when connected — shaft disappears into the socket
+    if (this.state.plugged) this.drawSocket(m);
   }
 
   drawSocket(m) {
@@ -460,8 +360,8 @@ class Component extends DCLogic {
     ctx.beginPath(); ctx.arc(h.x + 26, h.y - 52, 4.5, 0, 7); ctx.fill();
   }
 
-  drawPlug(x, y, ang, m) {
-    const ctx = this.ctx;
+  drawPlug(ctx, x, y, ang, m) {
+    const px = m.kind === 'pixel';
     ctx.save(); ctx.translate(x, y); ctx.rotate(ang);
     ctx.lineCap = 'butt';
     // strain relief (cable-colored taper)
@@ -470,21 +370,31 @@ class Component extends DCLogic {
     ctx.moveTo(-14, -m.w * 0.5 - 1); ctx.lineTo(6, -m.w * 0.72 - 2);
     ctx.lineTo(6, m.w * 0.72 + 2); ctx.lineTo(-14, m.w * 0.5 + 1); ctx.closePath(); ctx.fill();
     // barrel
-    const g = ctx.createLinearGradient(0, -13, 0, 13);
-    g.addColorStop(0, '#B9BCC2'); g.addColorStop(0.28, '#F2F3F5'); g.addColorStop(0.55, '#8E9298'); g.addColorStop(1, '#5A5D63');
-    ctx.fillStyle = g;
+    if (px) { ctx.fillStyle = '#AEB3BC'; }
+    else {
+      const g = ctx.createLinearGradient(0, -13, 0, 13);
+      g.addColorStop(0, '#B9BCC2'); g.addColorStop(0.28, '#F2F3F5'); g.addColorStop(0.55, '#8E9298'); g.addColorStop(1, '#5A5D63');
+      ctx.fillStyle = g;
+    }
     ctx.beginPath(); ctx.roundRect(6, -13, 26, 26, 3); ctx.fill();
     // accent rings
     ctx.fillStyle = '#C2358F'; ctx.fillRect(32, -12, 5, 24);
     ctx.fillStyle = '#28B7A8'; ctx.fillRect(37, -12, 4, 24);
     // collar
-    const g2 = ctx.createLinearGradient(0, -10, 0, 10);
-    g2.addColorStop(0, '#D8DADE'); g2.addColorStop(0.5, '#F5F6F7'); g2.addColorStop(1, '#75787E');
-    ctx.fillStyle = g2;
+    if (px) { ctx.fillStyle = '#DDE0E4'; }
+    else {
+      const g2 = ctx.createLinearGradient(0, -10, 0, 10);
+      g2.addColorStop(0, '#D8DADE'); g2.addColorStop(0.5, '#F5F6F7'); g2.addColorStop(1, '#75787E');
+      ctx.fillStyle = g2;
+    }
     ctx.beginPath(); ctx.roundRect(41, -10, 6, 20, 1.5); ctx.fill();
     // gold shaft
-    const g3 = ctx.createLinearGradient(0, -7, 0, 7);
-    g3.addColorStop(0, '#8F6B12'); g3.addColorStop(0.3, '#F4D876'); g3.addColorStop(0.6, '#D9AE33'); g3.addColorStop(1, '#7A5A0E');
+    let g3;
+    if (px) { g3 = '#E0B23C'; }
+    else {
+      g3 = ctx.createLinearGradient(0, -7, 0, 7);
+      g3.addColorStop(0, '#8F6B12'); g3.addColorStop(0.3, '#F4D876'); g3.addColorStop(0.6, '#D9AE33'); g3.addColorStop(1, '#7A5A0E');
+    }
     ctx.fillStyle = g3;
     ctx.fillRect(47, -6.5, 20, 13);
     // notch rings
@@ -498,14 +408,6 @@ class Component extends DCLogic {
 
   canvasRef = React.createRef();
 
-  onGravityInput = (e) => {
-    this.setState({ gravityScale: Number(e.target.value) });
-  };
-
-  onDampingInput = (e) => {
-    this.setState({ motionDamping: Number(e.target.value) });
-  };
-
   renderVals() {
     const active = this.state.material;
     const materials = Object.keys(this.presets).map((id) => ({
@@ -518,12 +420,6 @@ class Component extends DCLogic {
     return {
       canvasRef: this.canvasRef,
       materials,
-      gravityScale: this.state.gravityScale,
-      gravityScaleText: this.state.gravityScale.toFixed(2),
-      motionDamping: this.state.motionDamping,
-      motionDampingText: this.state.motionDamping.toFixed(3),
-      onGravityInput: this.onGravityInput,
-      onDampingInput: this.onDampingInput,
       status: plugged ? '已连接 — 拖拽插头可拔出' : (this.state.dragging ? '拉扯会放出更多线，松手自动回收' : '拖拽插头试试 — 插进右侧插孔'),
       statusBg: plugged ? '#26402F' : '#E9E7E2',
       statusFg: plugged ? '#8FE0AE' : '#77746C'