cardbuddy 0.6.0

package/dist/vendored/components/SelectionOverlay.vue

@@ -0,0 +1,105 @@
+<!--
+  节点覆盖层（DevTools 风格）：作为 .phone__screen（滚动容器）的直接子节点，绝对定位于
+  屏幕的 content 坐标系：这样它随卡片内容纵向滚动时自动贴合目标元素，无需手动跟随滚动。
+
+  位置/尺寸由 store.el 的 getBoundingClientRect() 相对屏幕计算而来，对任意元素类型
+  （canvas / input / button / div / span …）均生效。
+
+  本组件通过 props 复用：
+    - store：驱动覆盖层的响应式 store（默认选中态 store）；
+    - boxClass：覆盖层样式 class（默认选中态 ce-sel-overlay）。
+  （hover 参考线为独立组件 HoverGuides.vue，不再复用本组件。）
+-->
+<template>
+  <div
+    v-show="store.visible"
+    :class="boxClass"
+    :style="boxStyle"
+  ><svg width="100%" height="100%" style="display: block;" xmlns="http://www.w3.org/2000/svg"><rect id="controls_bounding_rect" x="0" y="0" width="100%" height="100%" fill="transparent" style="stroke: var(--accent);" stroke-width="1" stroke-dasharray="4"></rect></svg>
+  </div>
+</template>
+
+<script>
+import { selectionOverlay } from '@/runtime/selectionOverlay.js'
+
+export default {
+  name: 'SelectionOverlay',
+  props: {
+    // 驱动覆盖层的响应式 store（默认选中态；hover 参考线复用本组件时传 hoverGuide）
+    store: { type: Object, default: () => selectionOverlay },
+    // 覆盖层样式 class（选中态 = ce-sel-overlay；hover 参考线 = ce-guide-overlay）
+    boxClass: { type: String, default: 'ce-sel-overlay' },
+  },
+  data() {
+    return {
+      boxStyle: { top: '0px', left: '0px', width: '0px', height: '0px' },
+      _ro: null,
+      _onScroll: null,
+      _onResize: null,
+      _raf: 0,
+    }
+  },
+  watch: {
+    // 目标元素变化或显隐变化：重新定位（并接管对该元素的尺寸监听）
+    'store.el'() {
+      this.bindTarget()
+      this.schedule()
+    },
+  },
+  mounted() {
+    this._onScroll = () => this.schedule()
+    this._onResize = () => this.schedule()
+    // 滚动（含嵌套滚动）与窗口缩放都可能改变元素视口位置，重算即可，
+    // 因坐标基于 content 且覆盖层随滚动容器移动，重算值本身稳定，开销很小。
+    document.addEventListener('scroll', this._onScroll, { passive: true, capture: true })
+    window.addEventListener('resize', this._onResize)
+    this.bindTarget()
+    this.schedule()
+  },
+  beforeUnmount() {
+    document.removeEventListener('scroll', this._onScroll, { capture: true })
+    window.removeEventListener('resize', this._onResize)
+    if (this._ro) { this._ro.disconnect(); this._ro = null }
+    if (this._raf) cancelAnimationFrame(this._raf)
+  },
+  methods: {
+    /** 把 ResizeObserver 绑定到当前目标元素，元素自身尺寸变化（编辑文本/改样式）时自动重算 */
+    bindTarget() {
+      if (this._ro) { this._ro.disconnect(); this._ro = null }
+      const el = this.store.el
+      if (!el || typeof ResizeObserver === 'undefined') return
+      this._ro = new ResizeObserver(() => this.schedule())
+      this._ro.observe(el)
+    },
+    /** rAF 批处理，避免一帧内多次重算 */
+    schedule() {
+      if (this._raf) return
+      this._raf = requestAnimationFrame(() => {
+        this._raf = 0
+        this.recompute()
+      })
+    },
+    recompute() {
+      const el = this.store.el
+      if (!el || !this.store.visible) return
+      const container = el.closest('.phone__screen')
+      // 目标元素已脱离文档（如切换卡片后旧的 RenderTree 被卸载）：自动隐藏，避免残留
+      if (!container) {
+        this.store.visible = false
+        return
+      }
+      const cRect = container.getBoundingClientRect()
+      const eRect = el.getBoundingClientRect()
+      // content 坐标：减屏幕视口偏移 + 加屏幕滚动量（抵消滚动，使覆盖层粘在元素上）
+      const top = eRect.top - cRect.top + container.scrollTop
+      const left = eRect.left - cRect.left + container.scrollLeft
+      this.boxStyle = {
+        top: top + 'px',
+        left: left + 'px',
+        width: eRect.width + 'px',
+        height: eRect.height + 'px',
+      }
+    },
+  },
+}
+</script>