完成阶段3-4

src/views/Stage.vue

@@ -83,6 +83,8 @@ let world: Container | null = null
 let originGfx: Graphics | null = null
 let boneGfx: Graphics | null = null
 let shapeGfx: Graphics | null = null
+let forceFieldGfx: Graphics | null = null
+let attractionGfx: Graphics | null = null
 let gizmoGfx: Graphics | null = null
 let axisGfx: Graphics | null = null
 let axisLabelLayer: Container | null = null // 文字图层,不随 world 缩放,避免放大变糊
@@ -110,6 +112,10 @@ function createLayers() {
   world.addChild(originGfx)
   shapeGfx = new Graphics() // 发射器形状范围(绿圆/蓝矩形/锥形)
   world.addChild(shapeGfx)
+  forceFieldGfx = new Graphics() // 选中系统的全局力场范围
+  world.addChild(forceFieldGfx)
+  attractionGfx = new Graphics() // 选中系统的全局吸附范围
+  world.addChild(attractionGfx)
   gizmoGfx = new Graphics() // root 变换 gizmo 手柄
   world.addChild(gizmoGfx)
   boneGfx = new Graphics()
@@ -234,6 +240,10 @@ function onWheel(e: WheelEvent) {
 // 鼠标左键长按拖动画布(平移)
 function onPanDown(e: PointerEvent) {
   if (e.button !== 0) return
+  // 吸附点优先于力场；重叠时拖动红色吸附圆。
+  if (onAttractionDown(e)) return
+  // 力场使用全局坐标，按住圆内任意位置时优先拖动力场中心。
+  if (onForceFieldDown(e)) return
   // gizmo 工具激活且选中系统 → 拖拽根节点变换;否则画布平移
   if (activeTool.value && store.systems.length) {
     onGizmoDown(e)
@@ -253,6 +263,76 @@ function onPanDown(e: PointerEvent) {
   window.addEventListener('pointercancel', up)
 }
 
+function pointerToWorldMath(clientX: number, clientY: number) {
+  const rect = holder.value!.getBoundingClientRect()
+  const scale = Math.max(0.0001, store.editor.viewScale)
+  const screenX = clientX - rect.left
+  const screenY = clientY - rect.top
+  return {
+    x: (screenX - app!.screen.width / 2 - store.editor.viewX) / scale,
+    y: -(screenY - app!.screen.height * 0.5 - store.editor.viewY) / scale,
+  }
+}
+
+/** 命中当前选中系统的力场圆时开始拖拽；返回 true 表示事件已被力场接管。 */
+function onForceFieldDown(e: PointerEvent) {
+  const sys = store.systems.find((item) => item.id === store.activeId)
+  const cfg = sys?.config
+  if (!cfg?.forceField || cfg.forceRadius <= 0) return false
+  const startPointer = pointerToWorldMath(e.clientX, e.clientY)
+  const distance = Math.hypot(startPointer.x - cfg.forceCenterX, startPointer.y - cfg.forceCenterY)
+  if (distance > cfg.forceRadius) return false
+  const startX = cfg.forceCenterX
+  const startY = cfg.forceCenterY
+  if (holder.value) holder.value.style.cursor = 'grabbing'
+  const move = (event: PointerEvent) => {
+    const pointer = pointerToWorldMath(event.clientX, event.clientY)
+    cfg.forceCenterX = startX + pointer.x - startPointer.x
+    cfg.forceCenterY = startY + pointer.y - startPointer.y
+  }
+  const up = () => {
+    if (holder.value) holder.value.style.cursor = ''
+    window.removeEventListener('pointermove', move)
+    window.removeEventListener('pointerup', up)
+    window.removeEventListener('pointercancel', up)
+  }
+  window.addEventListener('pointermove', move)
+  window.addEventListener('pointerup', up)
+  window.addEventListener('pointercancel', up)
+  e.preventDefault()
+  return true
+}
+
+/** 命中吸附圆（半径为 0 时使用屏幕 12px 热区）时拖动全局吸附点。 */
+function onAttractionDown(e: PointerEvent) {
+  const sys = store.systems.find((item) => item.id === store.activeId)
+  const cfg = sys?.config
+  if (!cfg?.attraction) return false
+  const startPointer = pointerToWorldMath(e.clientX, e.clientY)
+  const hitRadius = Math.max(cfg.attractionRadius, 12 / Math.max(0.0001, store.editor.viewScale))
+  const distance = Math.hypot(startPointer.x - cfg.attractionCenterX, startPointer.y - cfg.attractionCenterY)
+  if (distance > hitRadius) return false
+  const startX = cfg.attractionCenterX
+  const startY = cfg.attractionCenterY
+  if (holder.value) holder.value.style.cursor = 'grabbing'
+  const move = (event: PointerEvent) => {
+    const pointer = pointerToWorldMath(event.clientX, event.clientY)
+    cfg.attractionCenterX = startX + pointer.x - startPointer.x
+    cfg.attractionCenterY = startY + pointer.y - startPointer.y
+  }
+  const up = () => {
+    if (holder.value) holder.value.style.cursor = ''
+    window.removeEventListener('pointermove', move)
+    window.removeEventListener('pointerup', up)
+    window.removeEventListener('pointercancel', up)
+  }
+  window.addEventListener('pointermove', move)
+  window.addEventListener('pointerup', up)
+  window.addEventListener('pointercancel', up)
+  e.preventDefault()
+  return true
+}
+
 // root gizmo 拖拽:位移 / 旋转 / 缩放(改当前选中系统的 config,由 loop 实时应用)
 function onGizmoDown(e: PointerEvent) {
   const sys = store.systems.find((s) => s.id === store.activeId)
@@ -413,6 +493,55 @@ function drawShapeRange() {
   }
 }
 
+/** 绘制当前选中系统的全局力场；不应用粒子系统 root 变换。 */
+function drawForceField() {
+  if (!forceFieldGfx) return
+  const g = forceFieldGfx
+  g.clear()
+  const sys = store.systems.find((item) => item.id === store.activeId)
+  const cfg = sys?.config
+  if (!cfg?.forceField || cfg.forceRadius <= 0) return
+  const x = cfg.forceCenterX
+  const y = -cfg.forceCenterY
+  const color = cfg.forceStrength >= 0 ? 0x58c7ff : 0xff6b7a
+  g.lineStyle(2, color, 0.85)
+  g.beginFill(color, 0.08)
+  g.drawCircle(x, y, cfg.forceRadius)
+  g.endFill()
+  g.lineStyle(1, color, 0.7)
+  g.moveTo(x - 9, y); g.lineTo(x + 9, y)
+  g.moveTo(x, y - 9); g.lineTo(x, y + 9)
+  g.beginFill(color, 0.95)
+  g.drawCircle(x, y, 4)
+  g.endFill()
+}
+
+/** 绘制全局吸附点与吸附完成半径；半径为 0 时显示为红色点。 */
+function drawAttraction() {
+  if (!attractionGfx) return
+  const g = attractionGfx
+  g.clear()
+  const sys = store.systems.find((item) => item.id === store.activeId)
+  const cfg = sys?.config
+  if (!cfg?.attraction) return
+  const x = cfg.attractionCenterX
+  const y = -cfg.attractionCenterY
+  const radius = Math.max(0, cfg.attractionRadius)
+  const color = 0xff4d5f
+  if (radius > 0) {
+    g.lineStyle(2, color, 0.95)
+    g.beginFill(color, 0.09)
+    g.drawCircle(x, y, radius)
+    g.endFill()
+  }
+  g.lineStyle(1, color, 0.85)
+  g.moveTo(x - 10, y); g.lineTo(x + 10, y)
+  g.moveTo(x, y - 10); g.lineTo(x, y + 10)
+  g.beginFill(color, 1)
+  g.drawCircle(x, y, radius > 0 ? 4 : 6)
+  g.endFill()
+}
+
 // 根变换 gizmo 手柄:当前选中系统,按 activeTool 绘制(位移/旋转/缩放)。中心 = root 位置。
 // 手柄几何在 root 局部坐标系定义(原点 = root 中心,ly 数学上正),经 root 缩放+旋转+平移到 root 中心,
 // 与 drawShapeRange 的变换一致 → 手柄随 root 旋转/缩放/位移实时变化。
@@ -569,6 +698,8 @@ function loop() {
     }
     drawOrigin()
     drawShapeRange()
+    drawForceField()
+    drawAttraction()
     drawGizmo()
     drawBones(collected)
     if (info.value) { info.value.systems = store.systems.length; info.value.particles = total }