@d5techs/3dgs-lib 1.4.0 → 1.4.1

package/dist/3dgs-lib.js

@@ -7125,6 +7125,12 @@ const _GSSplatRenderer = class _GSSplatRenderer {
     __publicField(this, "sortStateInitialized", false);
     __publicField(this, "sortFrequency", 1);
     __publicField(this, "frameCounter", 0);
+    // 编辑器状态
+    __publicField(this, "editorStateBuffer", null);
+    __publicField(this, "editorPipeline", null);
+    __publicField(this, "editorBindGroupLayout", null);
+    __publicField(this, "editorBindGroup", null);
+    __publicField(this, "editorEnabled", false);
     // 深度法线Pass依赖资源
     __publicField(this, "depthNormalPipeline", null);
     __publicField(this, "depthRT", null);
@@ -7485,6 +7491,7 @@ const _GSSplatRenderer = class _GSSplatRenderer {
         { binding: 2, resource: { buffer: this.sorter.getIndicesBuffer() } }
       ]
     });
+    if (this.editorEnabled) this.rebuildEditorBindGroup();
   }
   setCompactData(compactData) {
     const device = this.renderer.device;
@@ -7531,6 +7538,7 @@ const _GSSplatRenderer = class _GSSplatRenderer {
         { binding: 2, resource: { buffer: this.sorter.getIndicesBuffer() } }
       ]
     });
+    if (this.editorEnabled) this.rebuildEditorBindGroup();
   }
   render(pass) {
     if (this.splatCount === 0 || !this.bindGroup || !this.sorter) {
@@ -7574,8 +7582,13 @@ const _GSSplatRenderer = class _GSSplatRenderer {
       });
       this.sorter.sort();
     }
-    pass.setPipeline(this.pipeline);
-    pass.setBindGroup(0, this.bindGroup);
+    if (this.editorEnabled && this.editorPipeline && this.editorBindGroup) {
+      pass.setPipeline(this.editorPipeline);
+      pass.setBindGroup(0, this.editorBindGroup);
+    } else {
+      pass.setPipeline(this.pipeline);
+      pass.setBindGroup(0, this.bindGroup);
+    }
     pass.drawIndirect(this.sorter.getDrawIndirectBuffer(), 0);
   }
   getSplatCount() {
@@ -7824,7 +7837,358 @@ const _GSSplatRenderer = class _GSSplatRenderer {
       maxSplatCount: 0
     };
   }
+  // ============================================
+  // 编辑器状态管理
+  // ============================================
+  /**
+   * 启用编辑器模式，传入每个 splat 的状态数据
+   */
+  setEditorState(stateData) {
+    var _a2;
+    if (this.splatCount === 0 || !this.splatBuffer) return;
+    const device = this.renderer.device;
+    const bufSize = Math.ceil(stateData.byteLength / 4) * 4;
+    if (!this.editorStateBuffer || this.editorStateBuffer.size < bufSize) {
+      (_a2 = this.editorStateBuffer) == null ? void 0 : _a2.destroy();
+      this.editorStateBuffer = device.createBuffer({
+        size: bufSize,
+        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+      });
+    }
+    const aligned = this.alignStateData(stateData);
+    device.queue.writeBuffer(this.editorStateBuffer, 0, aligned);
+    if (!this.editorPipeline) {
+      this.createEditorPipeline();
+    }
+    this.rebuildEditorBindGroup();
+    this.editorEnabled = true;
+  }
+  /**
+   * 更新编辑器状态数据
+   */
+  updateEditorState(stateData) {
+    if (!this.editorStateBuffer || !this.editorEnabled) return;
+    const aligned = this.alignStateData(stateData);
+    this.renderer.device.queue.writeBuffer(this.editorStateBuffer, 0, aligned);
+  }
+  alignStateData(data) {
+    const alignedSize = Math.ceil(data.byteLength / 4) * 4;
+    const buf = new ArrayBuffer(alignedSize);
+    new Uint8Array(buf).set(data);
+    return buf;
+  }
+  /**
+   * 禁用编辑器模式
+   */
+  clearEditorState() {
+    this.editorEnabled = false;
+    this.editorBindGroup = null;
+    if (this.editorStateBuffer) {
+      this.editorStateBuffer.destroy();
+      this.editorStateBuffer = null;
+    }
+  }
+  createEditorPipeline() {
+    const device = this.renderer.device;
+    const editorShaderCode = this.buildEditorShader();
+    const shaderModule = device.createShaderModule({ code: editorShaderCode });
+    this.editorBindGroupLayout = device.createBindGroupLayout({
+      entries: [
+        { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+        { binding: 1, visibility: GPUShaderStage.VERTEX, buffer: { type: "read-only-storage" } },
+        { binding: 2, visibility: GPUShaderStage.VERTEX, buffer: { type: "read-only-storage" } },
+        { binding: 3, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "read-only-storage" } }
+      ]
+    });
+    const pipelineLayout = device.createPipelineLayout({
+      bindGroupLayouts: [this.editorBindGroupLayout]
+    });
+    this.editorPipeline = device.createRenderPipeline({
+      layout: pipelineLayout,
+      vertex: { module: shaderModule, entryPoint: "vs_editor" },
+      fragment: {
+        module: shaderModule,
+        entryPoint: "fs_editor",
+        targets: [{
+          format: this.renderer.format,
+          blend: {
+            color: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+            alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" }
+          }
+        }]
+      },
+      primitive: { topology: "triangle-strip" },
+      depthStencil: {
+        format: this.renderer.depthFormat,
+        depthWriteEnabled: true,
+        depthCompare: "always"
+      }
+    });
+  }
+  rebuildEditorBindGroup() {
+    if (!this.editorBindGroupLayout || !this.splatBuffer || !this.sorter || !this.editorStateBuffer) return;
+    this.editorBindGroup = this.renderer.device.createBindGroup({
+      layout: this.editorBindGroupLayout,
+      entries: [
+        { binding: 0, resource: { buffer: this.uniformBuffer } },
+        { binding: 1, resource: { buffer: this.splatBuffer } },
+        { binding: 2, resource: { buffer: this.sorter.getIndicesBuffer() } },
+        { binding: 3, resource: { buffer: this.editorStateBuffer } }
+      ]
+    });
+  }
+  buildEditorShader() {
+    return (
+      /* wgsl */
+      `
+const SQRT_8: f32 = 2.82842712475;
+const SH_C0: f32 = 0.28209479177387814;
+const SH_C1: f32 = 0.4886025119029199;
+const SH_C2_0: f32 = 1.0925484305920792;
+const SH_C2_1: f32 = -1.0925484305920792;
+const SH_C2_2: f32 = 0.31539156525252005;
+const SH_C2_3: f32 = -1.0925484305920792;
+const SH_C2_4: f32 = 0.5462742152960396;
+const SH_C3_0: f32 = -0.5900435899266435;
+const SH_C3_1: f32 = 2.890611442640554;
+const SH_C3_2: f32 = -0.4570457994644658;
+const SH_C3_3: f32 = 0.3731763325901154;
+const SH_C3_4: f32 = -0.4570457994644658;
+const SH_C3_5: f32 = 1.4453057213202769;
+const SH_C3_6: f32 = -0.5900435899266435;
+const LOW_PASS_FILTER: f32 = 0.3;
+const ALPHA_CULL_THRESHOLD: f32 = 0.00392156863;
+const GAUSSIAN_K: f32 = 4.0;
+const EXP_NEG_K: f32 = 0.01831563888873418;
+const INV_ONE_MINUS_EXP_NEG_K: f32 = 1.01865736036377408;
+
+const STATE_SELECTED: u32 = 1u;
+const STATE_HIDDEN: u32 = 2u;
+const STATE_DELETED: u32 = 4u;
+
+struct Uniforms {
+  view: mat4x4<f32>,
+  proj: mat4x4<f32>,
+  model: mat4x4<f32>,
+  cameraPos: vec3<f32>,
+  _pad: f32,
+  screenSize: vec2<f32>,
+  _pad2: vec2<f32>,
+}
+
+struct Splat {
+  mean: vec3<f32>, _pad0: f32,
+  scale: vec3<f32>, _pad1: f32,
+  rotation: vec4<f32>,
+  colorDC: vec3<f32>,
+  opacity: f32,
+  sh1: array<f32, 9>,
+  sh2: array<f32, 15>,
+  sh3: array<f32, 21>,
+  _pad2: array<f32, 3>,
+}
+
+fn evalSH(splat: Splat, dir: vec3<f32>) -> vec3<f32> {
+  let x = dir.x; let y = dir.y; let z = dir.z;
+  var result = vec3<f32>(0.0);
+  result += (-SH_C1 * y) * vec3<f32>(splat.sh1[0], splat.sh1[1], splat.sh1[2]);
+  result += ( SH_C1 * z) * vec3<f32>(splat.sh1[3], splat.sh1[4], splat.sh1[5]);
+  result += (-SH_C1 * x) * vec3<f32>(splat.sh1[6], splat.sh1[7], splat.sh1[8]);
+  let xx = x * x; let yy = y * y; let zz = z * z;
+  let xy = x * y; let yz = y * z; let xz = x * z;
+  result += (SH_C2_0 * xy)                    * vec3<f32>(splat.sh2[0],  splat.sh2[1],  splat.sh2[2]);
+  result += (SH_C2_1 * yz)                    * vec3<f32>(splat.sh2[3],  splat.sh2[4],  splat.sh2[5]);
+  result += (SH_C2_2 * (2.0 * zz - xx - yy)) * vec3<f32>(splat.sh2[6],  splat.sh2[7],  splat.sh2[8]);
+  result += (SH_C2_3 * xz)                    * vec3<f32>(splat.sh2[9],  splat.sh2[10], splat.sh2[11]);
+  result += (SH_C2_4 * (xx - yy))             * vec3<f32>(splat.sh2[12], splat.sh2[13], splat.sh2[14]);
+  result += (SH_C3_0 * y * (3.0 * xx - yy))             * vec3<f32>(splat.sh3[0],  splat.sh3[1],  splat.sh3[2]);
+  result += (SH_C3_1 * xy * z)                           * vec3<f32>(splat.sh3[3],  splat.sh3[4],  splat.sh3[5]);
+  result += (SH_C3_2 * y * (4.0 * zz - xx - yy))        * vec3<f32>(splat.sh3[6],  splat.sh3[7],  splat.sh3[8]);
+  result += (SH_C3_3 * z * (2.0 * zz - 3.0 * xx - 3.0 * yy)) * vec3<f32>(splat.sh3[9],  splat.sh3[10], splat.sh3[11]);
+  result += (SH_C3_4 * x * (4.0 * zz - xx - yy))        * vec3<f32>(splat.sh3[12], splat.sh3[13], splat.sh3[14]);
+  result += (SH_C3_5 * z * (xx - yy))                    * vec3<f32>(splat.sh3[15], splat.sh3[16], splat.sh3[17]);
+  result += (SH_C3_6 * x * (xx - 3.0 * yy))             * vec3<f32>(splat.sh3[18], splat.sh3[19], splat.sh3[20]);
+  return result;
+}
+
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+@group(0) @binding(1) var<storage, read> splats: array<Splat>;
+@group(0) @binding(2) var<storage, read> sortedIndices: array<u32>;
+@group(0) @binding(3) var<storage, read> splatState: array<u32>;
+
+fn getState(splatIndex: u32) -> u32 {
+  let wordIndex = splatIndex / 4u;
+  let byteIndex = splatIndex % 4u;
+  return (splatState[wordIndex] >> (byteIndex * 8u)) & 0xFFu;
+}
+
+struct VertexOutput {
+  @builtin(position) position: vec4<f32>,
+  @location(0) fragPos: vec2<f32>,
+  @location(1) color: vec3<f32>,
+  @location(2) opacity: f32,
+  @location(3) @interpolate(flat) stateFlags: u32,
+}
+
+const QUAD_POSITIONS = array<vec2<f32>, 4>(
+  vec2<f32>(-1.0, -1.0), vec2<f32>(-1.0, 1.0),
+  vec2<f32>(1.0, -1.0), vec2<f32>(1.0, 1.0),
+);
+
+fn computeClipFactor(alpha: f32) -> f32 {
+  if alpha <= ALPHA_CULL_THRESHOLD { return 0.0; }
+  let threshold = 1.0 / (255.0 * alpha);
+  if threshold >= 1.0 { return 0.0; }
+  let targetExp = threshold * (1.0 - EXP_NEG_K) + EXP_NEG_K;
+  if targetExp >= 1.0 { return 0.0; }
+  let A = -log(targetExp) / GAUSSIAN_K;
+  return min(1.0, sqrt(A));
+}
+
+fn quatToMat3(q: vec4<f32>) -> mat3x3<f32> {
+  let r = q.x; let x = q.y; let y = q.z; let z = q.w;
+  return mat3x3<f32>(
+    vec3<f32>(1.0 - 2.0 * (y * y + z * z), 2.0 * (x * y + r * z), 2.0 * (x * z - r * y)),
+    vec3<f32>(2.0 * (x * y - r * z), 1.0 - 2.0 * (x * x + z * z), 2.0 * (y * z + r * x)),
+    vec3<f32>(2.0 * (x * z + r * y), 2.0 * (y * z - r * x), 1.0 - 2.0 * (x * x + y * y))
+  );
+}
+
+fn computeCovariance3D(scale: vec3<f32>, rotation: vec4<f32>) -> mat3x3<f32> {
+  let R = quatToMat3(rotation);
+  let S = mat3x3<f32>(vec3<f32>(scale.x, 0.0, 0.0), vec3<f32>(0.0, scale.y, 0.0), vec3<f32>(0.0, 0.0, scale.z));
+  let M = R * S;
+  return M * transpose(M);
+}
+
+fn projectCovariance(cov3d: mat3x3<f32>, viewCenter: vec4<f32>, focal: vec2<f32>, modelViewMat: mat4x4<f32>) -> vec3<f32> {
+  let v = viewCenter.xyz;
+  let s = 1.0 / (v.z * v.z);
+  let J = mat3x3<f32>(
+    vec3<f32>(focal.x / v.z, 0.0, 0.0),
+    vec3<f32>(0.0, focal.y / v.z, 0.0),
+    vec3<f32>(-(focal.x * v.x) * s, -(focal.y * v.y) * s, 0.0)
+  );
+  let W = mat3x3<f32>(
+    vec3<f32>(modelViewMat[0][0], modelViewMat[0][1], modelViewMat[0][2]),
+    vec3<f32>(modelViewMat[1][0], modelViewMat[1][1], modelViewMat[1][2]),
+    vec3<f32>(modelViewMat[2][0], modelViewMat[2][1], modelViewMat[2][2])
+  );
+  let T = J * W;
+  let cov2d = T * cov3d * transpose(T);
+  return vec3<f32>(cov2d[0][0], cov2d[0][1], cov2d[1][1]);
+}
+
+struct ExtentResult { basis: vec4<f32>, adjustedOpacity: f32, }
+
+fn computeExtentBasisAA(cov2dIn: vec3<f32>, opacity: f32, viewportSize: vec2<f32>) -> ExtentResult {
+  var result: ExtentResult;
+  var cov2d = cov2dIn;
+  var alpha = opacity;
+  cov2d.x += LOW_PASS_FILTER;
+  cov2d.z += LOW_PASS_FILTER;
+  let a = cov2d.x; let d = cov2d.z; let b = cov2d.y;
+  let mid = 0.5 * (a + d);
+  let radius = length(vec2<f32>((a - d) * 0.5, b));
+  let lambda1 = mid + radius;
+  let lambda2 = mid - radius;
+  if lambda2 <= 0.0 { result.basis = vec4<f32>(0.0); result.adjustedOpacity = 0.0; return result; }
+  let vmin = min(1024.0, min(viewportSize.x, viewportSize.y));
+  let l1 = min(2.0 * sqrt(2.0 * lambda1), vmin);
+  let l2 = min(2.0 * sqrt(2.0 * lambda2), vmin);
+  if l1 < 0.5 && l2 < 0.5 { result.basis = vec4<f32>(0.0); result.adjustedOpacity = 0.0; return result; }
+  let diagVec = normalize(vec2<f32>(b, lambda1 - a));
+  result.basis = vec4<f32>(diagVec * l1, vec2<f32>(diagVec.y, -diagVec.x) * l2);
+  result.adjustedOpacity = alpha;
+  return result;
+}
+
+@vertex
+fn vs_editor(@builtin(vertex_index) vertexIndex: u32, @builtin(instance_index) instanceIndex: u32) -> VertexOutput {
+  var output: VertexOutput;
+  let splatIndex = sortedIndices[instanceIndex];
+  let splat = splats[splatIndex];
+  let quadPos = QUAD_POSITIONS[vertexIndex];
+
+  let state = getState(splatIndex);
+  output.stateFlags = state;
+
+  // 隐藏和删除的 splat 直接剔除
+  if (state & STATE_HIDDEN) != 0u || (state & STATE_DELETED) != 0u {
+    output.position = vec4<f32>(0.0, 0.0, 2.0, 1.0); return output;
+  }
+
+  if splat.opacity < ALPHA_CULL_THRESHOLD { output.position = vec4<f32>(0.0, 0.0, 2.0, 1.0); return output; }
+  let quatNormSqr = dot(splat.rotation, splat.rotation);
+  if quatNormSqr < 1e-6 { output.position = vec4<f32>(0.0, 0.0, 2.0, 1.0); return output; }
+
+  let worldPos = uniforms.model * vec4<f32>(splat.mean, 1.0);
+  let viewPos = uniforms.view * worldPos;
+  let clipPos = uniforms.proj * viewPos;
+  if viewPos.z >= 0.0 { output.position = vec4<f32>(0.0, 0.0, 2.0, 1.0); return output; }
+  let pW = 1.0 / (clipPos.w + 0.0000001);
+  let ndcPos = clipPos * pW;
+  let clipBound = 1.3;
+  if abs(ndcPos.x) > clipBound || abs(ndcPos.y) > clipBound || ndcPos.z < -0.2 || ndcPos.z > 1.0 {
+    output.position = vec4<f32>(0.0, 0.0, 2.0, 1.0); return output;
+  }
+
+  let cov3d = computeCovariance3D(splat.scale, splat.rotation);
+  let focal = vec2<f32>(abs(uniforms.proj[0][0]) * 0.5 * uniforms.screenSize.x, abs(uniforms.proj[1][1]) * 0.5 * uniforms.screenSize.y);
+  let modelViewMat = uniforms.view * uniforms.model;
+  let cov2d = projectCovariance(cov3d, viewPos, focal, modelViewMat);
+  let extentResult = computeExtentBasisAA(cov2d, splat.opacity, uniforms.screenSize);
+  let basis = extentResult.basis;
+  let adjustedOpacity = extentResult.adjustedOpacity;
+  if basis.x == 0.0 && basis.y == 0.0 && basis.z == 0.0 && basis.w == 0.0 {
+    output.position = vec4<f32>(0.0, 0.0, 2.0, 1.0); return output;
+  }
+  let maxExtentPixels = max(length(basis.xy), length(basis.zw));
+  let pixelToClip = 2.0 * vec2<f32>(clipPos.w, clipPos.w) / uniforms.screenSize;
+  let splatExtentClip = vec2<f32>(maxExtentPixels, maxExtentPixels) * pixelToClip;
+  if any((abs(clipPos.xy) - splatExtentClip) > vec2<f32>(clipPos.w, clipPos.w)) {
+    output.position = vec4<f32>(0.0, 0.0, 2.0, 1.0); return output;
+  }
+  let clipFactor = computeClipFactor(adjustedOpacity);
+  if clipFactor <= 0.0 { output.position = vec4<f32>(0.0, 0.0, 2.0, 1.0); return output; }
+  let basisViewport = vec2<f32>(1.0 / uniforms.screenSize.x, 1.0 / uniforms.screenSize.y);
+  let basisVector1 = basis.xy * clipFactor;
+  let basisVector2 = basis.zw * clipFactor;
+  let ndcOffset = (quadPos.x * basisVector1 + quadPos.y * basisVector2) * basisViewport * 2.0;
+  output.position = vec4<f32>(ndcPos.xy + ndcOffset, ndcPos.z, 1.0);
+  output.fragPos = quadPos * clipFactor;
+  let shDir = normalize(vec3<f32>(
+    dot(worldPos.xyz - uniforms.cameraPos, uniforms.model[0].xyz),
+    dot(worldPos.xyz - uniforms.cameraPos, uniforms.model[1].xyz),
+    dot(worldPos.xyz - uniforms.cameraPos, uniforms.model[2].xyz)
+  ));
+  output.color = splat.colorDC + evalSH(splat, shDir);
+  output.opacity = adjustedOpacity;
+  return output;
+}
+
+@fragment
+fn fs_editor(input: VertexOutput) -> @location(0) vec4<f32> {
+  if input.opacity <= 0.0 { discard; }
+  let A = dot(input.fragPos, input.fragPos);
+  if A > 1.0 { discard; }
+  let weight = (exp(-GAUSSIAN_K * A) - EXP_NEG_K) * INV_ONE_MINUS_EXP_NEG_K;
+  let opacity = weight * input.opacity;
+  if opacity < ALPHA_CULL_THRESHOLD { discard; }
+  var color = max(input.color, vec3<f32>(0.0));
+
+  // 选中高亮：叠加橙色调
+  if (input.stateFlags & STATE_SELECTED) != 0u {
+    color = mix(color, vec3<f32>(1.0, 0.5, 0.1), 0.4);
+  }
+
+  return vec4<f32>(color * opacity, opacity);
+}
+`
+    );
+  }
   destroy() {
+    this.clearEditorState();
     if (this.splatBuffer) {
       this.splatBuffer.destroy();
       this.splatBuffer = null;
@@ -13594,7 +13958,7 @@ class HotspotManager {
     const device = this.renderer.device;
     const segments = 48;
     const outerRadius = this.indicatorBaseRadius;
-    const innerRadius = outerRadius * 0.92;
+    const innerRadius = outerRadius * 0.78;
     const vertexCount = segments * 2;
     const vertexData = new Float32Array(vertexCount * 6);
     for (let i = 0; i < segments; i++) {
@@ -13662,7 +14026,7 @@ class HotspotManager {
   showIndicator() {
     if (!this.indicatorMesh || this.indicatorAdded) return;
     const material = {
-      baseColorFactor: [1, 1, 1, 0.85],
+      baseColorFactor: [0, 0.75, 1, 0.95],
       baseColorTexture: null,
       metallicFactor: 0,
       roughnessFactor: 1,
@@ -14210,6 +14574,1490 @@ class HotspotManager {
     this.hotspots = [];
   }
 }
+var State = /* @__PURE__ */ ((State2) => {
+  State2[State2["selected"] = 1] = "selected";
+  State2[State2["hidden"] = 2] = "hidden";
+  State2[State2["deleted"] = 4] = "deleted";
+  return State2;
+})(State || {});
+class SplatState {
+  constructor(count) {
+    __publicField(this, "count");
+    __publicField(this, "data");
+    __publicField(this, "_numSelected", 0);
+    __publicField(this, "_numHidden", 0);
+    __publicField(this, "_numDeleted", 0);
+    this.count = count;
+    this.data = new Uint8Array(count);
+  }
+  get numSelected() {
+    return this._numSelected;
+  }
+  get numHidden() {
+    return this._numHidden;
+  }
+  get numDeleted() {
+    return this._numDeleted;
+  }
+  recalcCounts() {
+    let sel = 0, hid = 0, del = 0;
+    for (let i = 0; i < this.count; i++) {
+      const v = this.data[i];
+      if (v & 1) sel++;
+      if (v & 2) hid++;
+      if (v & 4) del++;
+    }
+    this._numSelected = sel;
+    this._numHidden = hid;
+    this._numDeleted = del;
+  }
+  clear() {
+    this.data.fill(0);
+    this._numSelected = 0;
+    this._numHidden = 0;
+    this._numDeleted = 0;
+  }
+}
+class EditHistory {
+  constructor(onChange) {
+    __publicField(this, "history", []);
+    __publicField(this, "cursor", 0);
+    __publicField(this, "onChange");
+    this.onChange = onChange;
+  }
+  add(op) {
+    var _a2, _b2, _c;
+    while (this.cursor < this.history.length) {
+      (_b2 = (_a2 = this.history.pop()) == null ? void 0 : _a2.destroy) == null ? void 0 : _b2.call(_a2);
+    }
+    this.history.push(op);
+    op.do();
+    this.cursor++;
+    (_c = this.onChange) == null ? void 0 : _c.call(this);
+  }
+  canUndo() {
+    return this.cursor > 0;
+  }
+  canRedo() {
+    return this.cursor < this.history.length;
+  }
+  undo() {
+    var _a2;
+    if (!this.canUndo()) return;
+    this.history[--this.cursor].undo();
+    (_a2 = this.onChange) == null ? void 0 : _a2.call(this);
+  }
+  redo() {
+    var _a2;
+    if (!this.canRedo()) return;
+    this.history[this.cursor++].do();
+    (_a2 = this.onChange) == null ? void 0 : _a2.call(this);
+  }
+  clear() {
+    var _a2;
+    this.history.forEach((op) => {
+      var _a3;
+      return (_a3 = op.destroy) == null ? void 0 : _a3.call(op);
+    });
+    this.history = [];
+    this.cursor = 0;
+    (_a2 = this.onChange) == null ? void 0 : _a2.call(this);
+  }
+}
+class StateOp {
+  constructor(name, state, indices, mask, op) {
+    __publicField(this, "name");
+    __publicField(this, "state");
+    __publicField(this, "indices");
+    __publicField(this, "mask");
+    __publicField(this, "op");
+    this.name = name;
+    this.state = state;
+    this.indices = indices;
+    this.mask = mask;
+    this.op = op;
+  }
+  apply(op) {
+    const d = this.state.data;
+    const { mask, indices } = this;
+    switch (op) {
+      case 0:
+        for (let i = 0; i < indices.length; i++) d[indices[i]] |= mask;
+        break;
+      case 1:
+        for (let i = 0; i < indices.length; i++) d[indices[i]] &= ~mask;
+        break;
+      case 2:
+        for (let i = 0; i < indices.length; i++) d[indices[i]] ^= mask;
+        break;
+    }
+  }
+  do() {
+    this.apply(this.op);
+    this.state.recalcCounts();
+  }
+  undo() {
+    const undoOp = this.op === 2 ? 2 : this.op === 0 ? 1 : 0;
+    this.apply(undoOp);
+    this.state.recalcCounts();
+  }
+}
+class SelectOp {
+  constructor(state, op, predicate) {
+    __publicField(this, "name", "select");
+    __publicField(this, "inner");
+    const d = state.data;
+    const indices = [];
+    if (op === "add") {
+      for (let i = 0; i < state.count; i++) {
+        if (predicate(i) && d[i] === 0) indices.push(i);
+      }
+      this.inner = new StateOp(
+        "selectAdd",
+        state,
+        new Uint32Array(indices),
+        State.selected,
+        0
+        /* SET */
+      );
+    } else if (op === "remove") {
+      for (let i = 0; i < state.count; i++) {
+        if (predicate(i) && d[i] === State.selected) indices.push(i);
+      }
+      this.inner = new StateOp(
+        "selectRemove",
+        state,
+        new Uint32Array(indices),
+        State.selected,
+        1
+        /* CLEAR */
+      );
+    } else {
+      for (let i = 0; i < state.count; i++) {
+        if (d[i] === State.selected !== predicate(i)) indices.push(i);
+      }
+      this.inner = new StateOp(
+        "selectSet",
+        state,
+        new Uint32Array(indices),
+        State.selected,
+        2
+        /* TOGGLE */
+      );
+    }
+  }
+  do() {
+    this.inner.do();
+  }
+  undo() {
+    this.inner.undo();
+  }
+}
+class SelectAllOp {
+  constructor(state) {
+    __publicField(this, "name", "selectAll");
+    __publicField(this, "inner");
+    const indices = [];
+    for (let i = 0; i < state.count; i++) {
+      if (state.data[i] === 0) indices.push(i);
+    }
+    this.inner = new StateOp(
+      "selectAll",
+      state,
+      new Uint32Array(indices),
+      State.selected,
+      0
+      /* SET */
+    );
+  }
+  do() {
+    this.inner.do();
+  }
+  undo() {
+    this.inner.undo();
+  }
+}
+class SelectNoneOp {
+  constructor(state) {
+    __publicField(this, "name", "selectNone");
+    __publicField(this, "inner");
+    const indices = [];
+    for (let i = 0; i < state.count; i++) {
+      if (state.data[i] === State.selected) indices.push(i);
+    }
+    this.inner = new StateOp(
+      "selectNone",
+      state,
+      new Uint32Array(indices),
+      State.selected,
+      1
+      /* CLEAR */
+    );
+  }
+  do() {
+    this.inner.do();
+  }
+  undo() {
+    this.inner.undo();
+  }
+}
+class SelectInvertOp {
+  constructor(state) {
+    __publicField(this, "name", "selectInvert");
+    __publicField(this, "inner");
+    const indices = [];
+    for (let i = 0; i < state.count; i++) {
+      if ((state.data[i] & (State.hidden | State.deleted)) === 0) indices.push(i);
+    }
+    this.inner = new StateOp(
+      "selectInvert",
+      state,
+      new Uint32Array(indices),
+      State.selected,
+      2
+      /* TOGGLE */
+    );
+  }
+  do() {
+    this.inner.do();
+  }
+  undo() {
+    this.inner.undo();
+  }
+}
+class DeleteSelectionOp {
+  constructor(state) {
+    __publicField(this, "name", "deleteSelection");
+    __publicField(this, "inner");
+    const indices = [];
+    for (let i = 0; i < state.count; i++) {
+      if (state.data[i] === State.selected) indices.push(i);
+    }
+    this.inner = new StateOp(
+      "deleteSelection",
+      state,
+      new Uint32Array(indices),
+      State.deleted,
+      0
+      /* SET */
+    );
+  }
+  do() {
+    this.inner.do();
+  }
+  undo() {
+    this.inner.undo();
+  }
+}
+class HideSelectionOp {
+  constructor(state) {
+    __publicField(this, "name", "hideSelection");
+    __publicField(this, "inner");
+    const indices = [];
+    for (let i = 0; i < state.count; i++) {
+      if (state.data[i] === State.selected) indices.push(i);
+    }
+    this.inner = new StateOp(
+      "hideSelection",
+      state,
+      new Uint32Array(indices),
+      State.hidden,
+      0
+      /* SET */
+    );
+  }
+  do() {
+    this.inner.do();
+  }
+  undo() {
+    this.inner.undo();
+  }
+}
+class UnhideAllOp {
+  constructor(state) {
+    __publicField(this, "name", "unhideAll");
+    __publicField(this, "inner");
+    const indices = [];
+    for (let i = 0; i < state.count; i++) {
+      if ((state.data[i] & (State.hidden | State.deleted)) === State.hidden) indices.push(i);
+    }
+    this.inner = new StateOp(
+      "unhideAll",
+      state,
+      new Uint32Array(indices),
+      State.hidden,
+      1
+      /* CLEAR */
+    );
+  }
+  do() {
+    this.inner.do();
+  }
+  undo() {
+    this.inner.undo();
+  }
+}
+class ToolManager {
+  constructor(onToolChanged) {
+    __publicField(this, "tools", /* @__PURE__ */ new Map());
+    __publicField(this, "_active", null);
+    __publicField(this, "onToolChanged");
+    this.onToolChanged = onToolChanged;
+  }
+  get active() {
+    return this._active;
+  }
+  register(name, tool) {
+    this.tools.set(name, tool);
+  }
+  activate(name) {
+    var _a2, _b2, _c;
+    if (name === this._active) {
+      if (name) this.activate(null);
+      return;
+    }
+    if (this._active) {
+      (_a2 = this.tools.get(this._active)) == null ? void 0 : _a2.deactivate();
+    }
+    this._active = name;
+    if (this._active) {
+      (_b2 = this.tools.get(this._active)) == null ? void 0 : _b2.activate();
+    }
+    (_c = this.onToolChanged) == null ? void 0 : _c.call(this, this._active);
+  }
+  deactivateAll() {
+    this.activate(null);
+  }
+}
+class RectSelection {
+  constructor(parent, onSelect) {
+    __publicField(this, "parent");
+    __publicField(this, "svg");
+    __publicField(this, "rect");
+    __publicField(this, "onSelect");
+    __publicField(this, "start", { x: 0, y: 0 });
+    __publicField(this, "end", { x: 0, y: 0 });
+    __publicField(this, "dragId");
+    __publicField(this, "dragMoved", false);
+    this.parent = parent;
+    this.onSelect = onSelect;
+    this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    this.svg.classList.add("tool-svg");
+    this.svg.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:none;z-index:10;";
+    parent.appendChild(this.svg);
+    this.rect = document.createElementNS(this.svg.namespaceURI, "rect");
+    this.rect.setAttribute("fill", "rgba(255,102,0,0.15)");
+    this.rect.setAttribute("stroke", "#f60");
+    this.rect.setAttribute("stroke-width", "1.5");
+    this.svg.appendChild(this.rect);
+    this.pointerdown = this.pointerdown.bind(this);
+    this.pointermove = this.pointermove.bind(this);
+    this.pointerup = this.pointerup.bind(this);
+  }
+  activate() {
+    this.svg.style.display = "block";
+    this.parent.style.cursor = "crosshair";
+    this.parent.addEventListener("pointerdown", this.pointerdown);
+    this.parent.addEventListener("pointermove", this.pointermove);
+    this.parent.addEventListener("pointerup", this.pointerup);
+  }
+  deactivate() {
+    if (this.dragId !== void 0) this.dragEnd();
+    this.svg.style.display = "none";
+    this.parent.style.cursor = "";
+    this.parent.removeEventListener("pointerdown", this.pointerdown);
+    this.parent.removeEventListener("pointermove", this.pointermove);
+    this.parent.removeEventListener("pointerup", this.pointerup);
+  }
+  updateRect() {
+    const x = Math.min(this.start.x, this.end.x);
+    const y = Math.min(this.start.y, this.end.y);
+    this.rect.setAttribute("x", x.toString());
+    this.rect.setAttribute("y", y.toString());
+    this.rect.setAttribute("width", Math.abs(this.start.x - this.end.x).toString());
+    this.rect.setAttribute("height", Math.abs(this.start.y - this.end.y).toString());
+  }
+  pointerdown(e) {
+    if (this.dragId !== void 0) return;
+    if (e.pointerType === "mouse" ? e.button !== 0 : !e.isPrimary) return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.dragId = e.pointerId;
+    this.dragMoved = false;
+    this.parent.setPointerCapture(this.dragId);
+    this.start.x = this.end.x = e.offsetX;
+    this.start.y = this.end.y = e.offsetY;
+    this.updateRect();
+    this.svg.style.pointerEvents = "none";
+    this.rect.style.display = "block";
+  }
+  pointermove(e) {
+    if (e.pointerId !== this.dragId) return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.dragMoved = true;
+    this.end.x = e.offsetX;
+    this.end.y = e.offsetY;
+    this.updateRect();
+  }
+  dragEnd() {
+    if (this.dragId !== void 0) {
+      this.parent.releasePointerCapture(this.dragId);
+      this.dragId = void 0;
+    }
+    this.rect.style.display = "none";
+  }
+  pointerup(e) {
+    if (e.pointerId !== this.dragId) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const w = this.parent.clientWidth;
+    const h = this.parent.clientHeight;
+    const selectOp = e.shiftKey ? "add" : e.ctrlKey ? "remove" : "set";
+    if (this.dragMoved) {
+      this.onSelect(selectOp, {
+        startX: Math.min(this.start.x, this.end.x) / w,
+        startY: Math.min(this.start.y, this.end.y) / h,
+        endX: Math.max(this.start.x, this.end.x) / w,
+        endY: Math.max(this.start.y, this.end.y) / h
+      });
+    } else {
+      const px = e.offsetX / w;
+      const py = e.offsetY / h;
+      const r = 4 / Math.max(w, h);
+      this.onSelect(selectOp, {
+        startX: px - r,
+        startY: py - r,
+        endX: px + r,
+        endY: py + r
+      });
+    }
+    this.dragEnd();
+  }
+}
+class LassoSelection {
+  constructor(parent, maskCanvas, maskCtx, onMaskSelect) {
+    __publicField(this, "parent");
+    __publicField(this, "svg");
+    __publicField(this, "polygon");
+    __publicField(this, "maskCanvas");
+    __publicField(this, "maskCtx");
+    __publicField(this, "onMaskSelect");
+    __publicField(this, "points", []);
+    __publicField(this, "currentPoint", null);
+    __publicField(this, "lastPointTime", 0);
+    __publicField(this, "dragId");
+    this.parent = parent;
+    this.maskCanvas = maskCanvas;
+    this.maskCtx = maskCtx;
+    this.onMaskSelect = onMaskSelect;
+    this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    this.svg.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:none;z-index:10;";
+    parent.appendChild(this.svg);
+    this.polygon = document.createElementNS(this.svg.namespaceURI, "polygon");
+    this.polygon.setAttribute("fill", "rgba(255,102,0,0.15)");
+    this.polygon.setAttribute("stroke", "#f60");
+    this.polygon.setAttribute("stroke-width", "1.5");
+    this.svg.appendChild(this.polygon);
+    this.pointerdown = this.pointerdown.bind(this);
+    this.pointermove = this.pointermove.bind(this);
+    this.pointerup = this.pointerup.bind(this);
+  }
+  activate() {
+    this.svg.style.display = "block";
+    this.parent.style.cursor = "crosshair";
+    this.parent.addEventListener("pointerdown", this.pointerdown);
+    this.parent.addEventListener("pointermove", this.pointermove);
+    this.parent.addEventListener("pointerup", this.pointerup);
+  }
+  deactivate() {
+    if (this.dragId !== void 0) this.dragEnd();
+    this.svg.style.display = "none";
+    this.parent.style.cursor = "";
+    this.parent.removeEventListener("pointerdown", this.pointerdown);
+    this.parent.removeEventListener("pointermove", this.pointermove);
+    this.parent.removeEventListener("pointerup", this.pointerup);
+    this.points = [];
+    this.paint();
+  }
+  dist(a, b) {
+    return Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);
+  }
+  paint() {
+    const all = this.currentPoint ? [...this.points, this.currentPoint] : this.points;
+    this.polygon.setAttribute("points", all.map((p) => `${p.x},${p.y}`).join(" "));
+  }
+  update(e) {
+    this.currentPoint = { x: e.offsetX, y: e.offsetY };
+    const last = this.points[this.points.length - 1];
+    const distance = last ? this.dist(this.currentPoint, last) : 0;
+    const millis = Date.now() - this.lastPointTime;
+    if (this.dragId !== void 0 && (this.points.length === 0 || distance > 20 || millis > 500 && distance > 2 || millis > 200 && distance > 10)) {
+      this.points.push(this.currentPoint);
+      this.lastPointTime = Date.now();
+    }
+    this.paint();
+  }
+  commitSelection(e) {
+    const { maskCanvas: canvas, maskCtx: ctx, parent } = this;
+    if (canvas.width !== parent.clientWidth || canvas.height !== parent.clientHeight) {
+      canvas.width = parent.clientWidth;
+      canvas.height = parent.clientHeight;
+    }
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.beginPath();
+    ctx.fillStyle = "#f60";
+    this.points.forEach((p, i) => i === 0 ? ctx.moveTo(p.x, p.y) : ctx.lineTo(p.x, p.y));
+    ctx.closePath();
+    ctx.fill();
+    const op = e.shiftKey ? "add" : e.ctrlKey ? "remove" : "set";
+    this.onMaskSelect(op, canvas, ctx);
+  }
+  pointerdown(e) {
+    if (this.dragId !== void 0) return;
+    if (e.pointerType === "mouse" ? e.button !== 0 : !e.isPrimary) return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.dragId = e.pointerId;
+    this.parent.setPointerCapture(this.dragId);
+    this.update(e);
+  }
+  pointermove(e) {
+    if (this.dragId !== void 0) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    this.update(e);
+  }
+  dragEnd() {
+    if (this.dragId !== void 0) {
+      this.parent.releasePointerCapture(this.dragId);
+      this.dragId = void 0;
+    }
+  }
+  pointerup(e) {
+    if (e.pointerId !== this.dragId) return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.commitSelection(e);
+    this.dragEnd();
+    this.points = [];
+    this.paint();
+  }
+}
+class PolygonSelection {
+  constructor(parent, maskCanvas, maskCtx, onMaskSelect) {
+    __publicField(this, "parent");
+    __publicField(this, "svg");
+    __publicField(this, "polyline");
+    __publicField(this, "maskCanvas");
+    __publicField(this, "maskCtx");
+    __publicField(this, "onMaskSelect");
+    __publicField(this, "points", []);
+    __publicField(this, "currentPoint", null);
+    this.parent = parent;
+    this.maskCanvas = maskCanvas;
+    this.maskCtx = maskCtx;
+    this.onMaskSelect = onMaskSelect;
+    this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    this.svg.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:none;z-index:10;";
+    parent.appendChild(this.svg);
+    this.polyline = document.createElementNS(this.svg.namespaceURI, "polyline");
+    this.polyline.setAttribute("fill", "rgba(255,102,0,0.15)");
+    this.polyline.setAttribute("stroke", "#f60");
+    this.polyline.setAttribute("stroke-width", "1.5");
+    this.svg.appendChild(this.polyline);
+    this.pointerdown = this.pointerdown.bind(this);
+    this.pointermove = this.pointermove.bind(this);
+    this.pointerup = this.pointerup.bind(this);
+    this.dblclick = this.dblclick.bind(this);
+  }
+  activate() {
+    this.svg.style.display = "block";
+    this.parent.style.cursor = "crosshair";
+    this.parent.addEventListener("pointerdown", this.pointerdown);
+    this.parent.addEventListener("pointermove", this.pointermove);
+    this.parent.addEventListener("pointerup", this.pointerup);
+    this.parent.addEventListener("dblclick", this.dblclick);
+  }
+  deactivate() {
+    this.svg.style.display = "none";
+    this.parent.style.cursor = "";
+    this.parent.removeEventListener("pointerdown", this.pointerdown);
+    this.parent.removeEventListener("pointermove", this.pointermove);
+    this.parent.removeEventListener("pointerup", this.pointerup);
+    this.parent.removeEventListener("dblclick", this.dblclick);
+    this.points = [];
+    this.paint();
+  }
+  dist(a, b) {
+    return Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);
+  }
+  isClosed() {
+    return this.points.length > 1 && !!this.currentPoint && this.dist(this.currentPoint, this.points[0]) < 8;
+  }
+  paint() {
+    const all = [...this.points, this.currentPoint].filter(Boolean);
+    this.polyline.setAttribute("points", all.map((p) => `${p.x},${p.y}`).join(" "));
+    this.polyline.setAttribute("stroke", this.isClosed() ? "#fa6" : "#f60");
+  }
+  commitSelection(e) {
+    const { maskCanvas: canvas, maskCtx: ctx, parent } = this;
+    if (canvas.width !== parent.clientWidth || canvas.height !== parent.clientHeight) {
+      canvas.width = parent.clientWidth;
+      canvas.height = parent.clientHeight;
+    }
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.beginPath();
+    ctx.fillStyle = "#f60";
+    this.points.forEach((p, i) => i === 0 ? ctx.moveTo(p.x, p.y) : ctx.lineTo(p.x, p.y));
+    ctx.closePath();
+    ctx.fill();
+    const op = e.shiftKey ? "add" : e.ctrlKey ? "remove" : "set";
+    this.onMaskSelect(op, canvas, ctx);
+    this.points = [];
+    this.paint();
+  }
+  pointerdown(e) {
+    if (this.points.length > 0 || (e.pointerType === "mouse" ? e.button === 0 : e.isPrimary)) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
+  pointermove(e) {
+    this.currentPoint = { x: e.offsetX, y: e.offsetY };
+    if (this.points.length > 0) this.paint();
+  }
+  pointerup(e) {
+    if (e.pointerType === "mouse" ? e.button !== 0 : !e.isPrimary) return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (this.isClosed()) {
+      this.commitSelection(e);
+    } else if (this.currentPoint && (this.points.length === 0 || this.dist(this.points[this.points.length - 1], this.currentPoint) > 0)) {
+      this.points.push(this.currentPoint);
+    }
+  }
+  dblclick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (this.points.length > 2) {
+      this.commitSelection(e);
+    }
+  }
+}
+class BrushSelection {
+  constructor(parent, maskCanvas, maskCtx, onMaskSelect) {
+    __publicField(this, "parent");
+    __publicField(this, "svg");
+    __publicField(this, "circle");
+    __publicField(this, "maskCanvas");
+    __publicField(this, "maskCtx");
+    __publicField(this, "onMaskSelect");
+    __publicField(this, "radius", 40);
+    __publicField(this, "prev", { x: 0, y: 0 });
+    __publicField(this, "dragId");
+    this.parent = parent;
+    this.maskCanvas = maskCanvas;
+    this.maskCtx = maskCtx;
+    this.onMaskSelect = onMaskSelect;
+    this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    this.svg.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:none;z-index:10;";
+    parent.appendChild(this.svg);
+    this.circle = document.createElementNS(this.svg.namespaceURI, "circle");
+    this.circle.setAttribute("r", this.radius.toString());
+    this.circle.setAttribute("fill", "none");
+    this.circle.setAttribute("stroke", "#f60");
+    this.circle.setAttribute("stroke-width", "1.5");
+    this.circle.setAttribute("stroke-dasharray", "4 2");
+    this.svg.appendChild(this.circle);
+    this.pointerdown = this.pointerdown.bind(this);
+    this.pointermove = this.pointermove.bind(this);
+    this.pointerup = this.pointerup.bind(this);
+    this.wheel = this.wheel.bind(this);
+  }
+  activate() {
+    this.svg.style.display = "block";
+    this.parent.style.cursor = "none";
+    this.parent.addEventListener("pointerdown", this.pointerdown);
+    this.parent.addEventListener("pointermove", this.pointermove);
+    this.parent.addEventListener("pointerup", this.pointerup);
+    this.parent.addEventListener("wheel", this.wheel);
+  }
+  deactivate() {
+    if (this.dragId !== void 0) this.dragEnd();
+    this.svg.style.display = "none";
+    this.maskCanvas.style.display = "none";
+    this.parent.style.cursor = "";
+    this.parent.removeEventListener("pointerdown", this.pointerdown);
+    this.parent.removeEventListener("pointermove", this.pointermove);
+    this.parent.removeEventListener("pointerup", this.pointerup);
+    this.parent.removeEventListener("wheel", this.wheel);
+  }
+  update(e) {
+    const x = e.offsetX, y = e.offsetY;
+    this.circle.setAttribute("cx", x.toString());
+    this.circle.setAttribute("cy", y.toString());
+    if (this.dragId !== void 0) {
+      this.maskCtx.beginPath();
+      this.maskCtx.strokeStyle = "rgba(255,102,0,0.5)";
+      this.maskCtx.lineCap = "round";
+      this.maskCtx.lineWidth = this.radius * 2;
+      this.maskCtx.moveTo(this.prev.x, this.prev.y);
+      this.maskCtx.lineTo(x, y);
+      this.maskCtx.stroke();
+      this.prev.x = x;
+      this.prev.y = y;
+    }
+  }
+  pointerdown(e) {
+    if (this.dragId !== void 0) return;
+    if (e.pointerType === "mouse" ? e.button !== 0 : !e.isPrimary) return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.dragId = e.pointerId;
+    this.parent.setPointerCapture(this.dragId);
+    const { maskCanvas: canvas, maskCtx: ctx, parent } = this;
+    if (canvas.width !== parent.clientWidth || canvas.height !== parent.clientHeight) {
+      canvas.width = parent.clientWidth;
+      canvas.height = parent.clientHeight;
+    }
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    canvas.style.display = "block";
+    this.prev.x = e.offsetX;
+    this.prev.y = e.offsetY;
+    this.update(e);
+  }
+  pointermove(e) {
+    if (this.dragId !== void 0) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    this.update(e);
+  }
+  dragEnd() {
+    if (this.dragId !== void 0) {
+      this.parent.releasePointerCapture(this.dragId);
+      this.dragId = void 0;
+    }
+  }
+  pointerup(e) {
+    if (e.pointerId !== this.dragId) return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.dragEnd();
+    const op = e.shiftKey ? "add" : e.ctrlKey ? "remove" : "set";
+    this.onMaskSelect(op, this.maskCanvas, this.maskCtx);
+    this.maskCanvas.style.display = "none";
+  }
+  wheel(e) {
+    const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+    if (delta > 0) {
+      this.radius = Math.max(1, this.radius / 1.05);
+    } else {
+      this.radius = Math.min(500, this.radius * 1.05);
+    }
+    this.circle.setAttribute("r", this.radius.toString());
+    e.preventDefault();
+    e.stopPropagation();
+  }
+}
+class FloodSelection {
+  constructor(parent, maskCanvas, maskCtx, onMaskSelect, getOffscreenImage) {
+    __publicField(this, "parent");
+    __publicField(this, "maskCanvas");
+    __publicField(this, "maskCtx");
+    __publicField(this, "onMaskSelect");
+    __publicField(this, "getOffscreenImage");
+    __publicField(this, "thresholdEl");
+    __publicField(this, "threshold", 0.2);
+    __publicField(this, "clicked", false);
+    __publicField(this, "imageData", null);
+    this.parent = parent;
+    this.maskCanvas = maskCanvas;
+    this.maskCtx = maskCtx;
+    this.onMaskSelect = onMaskSelect;
+    this.getOffscreenImage = getOffscreenImage;
+    this.thresholdEl = document.createElement("div");
+    this.thresholdEl.style.cssText = "position:absolute;bottom:60px;left:50%;transform:translateX(-50%);background:rgba(20,20,35,0.9);color:#e0e0e0;padding:8px 16px;border-radius:8px;font-size:13px;display:none;z-index:20;gap:8px;align-items:center;";
+    this.thresholdEl.innerHTML = `
+      <label style="margin-right:8px;">阈值:</label>
+      <input type="range" min="0.01" max="0.99" step="0.01" value="${this.threshold}" style="width:120px;vertical-align:middle;">
+      <span style="margin-left:8px;min-width:40px;">${this.threshold.toFixed(2)}</span>
+    `;
+    parent.appendChild(this.thresholdEl);
+    const slider = this.thresholdEl.querySelector("input");
+    const span = this.thresholdEl.querySelector("span");
+    slider.addEventListener("input", () => {
+      this.threshold = parseFloat(slider.value);
+      span.textContent = this.threshold.toFixed(2);
+    });
+    slider.addEventListener("pointerdown", (e) => e.stopPropagation());
+    this.pointerdown = this.pointerdown.bind(this);
+    this.pointermove = this.pointermove.bind(this);
+    this.pointerup = this.pointerup.bind(this);
+  }
+  activate() {
+    this.parent.style.cursor = "crosshair";
+    this.thresholdEl.style.display = "flex";
+    this.parent.addEventListener("pointerdown", this.pointerdown);
+    this.parent.addEventListener("pointermove", this.pointermove);
+    this.parent.addEventListener("pointerup", this.pointerup);
+  }
+  deactivate() {
+    this.parent.style.cursor = "";
+    this.thresholdEl.style.display = "none";
+    this.parent.removeEventListener("pointerdown", this.pointerdown);
+    this.parent.removeEventListener("pointermove", this.pointermove);
+    this.parent.removeEventListener("pointerup", this.pointerup);
+  }
+  pointerdown(e) {
+    if (e.pointerType === "mouse" ? e.button === 0 : e.isPrimary) {
+      this.clicked = true;
+    }
+  }
+  pointermove(_e) {
+    this.clicked = false;
+  }
+  pointerup(e) {
+    if (!this.clicked || !(e.pointerType === "mouse" ? e.button === 0 : e.isPrimary)) return;
+    this.clicked = false;
+    const width = this.parent.clientWidth;
+    const height = this.parent.clientHeight;
+    const point = { x: Math.floor(e.offsetX), y: Math.floor(e.offsetY) };
+    const data = this.getOffscreenImage(width, height);
+    if (!data) return;
+    const { maskCanvas: canvas, maskCtx: ctx } = this;
+    if (canvas.width !== width || canvas.height !== height) {
+      canvas.width = width;
+      canvas.height = height;
+      this.imageData = ctx.createImageData(width, height);
+    }
+    if (!this.imageData) this.imageData = ctx.createImageData(width, height);
+    const PIXEL = 4;
+    const startIdx = (point.y * width + point.x) * PIXEL;
+    const pickedAlpha = data[startIdx + 3];
+    const d = this.imageData.data;
+    d.fill(102);
+    const stack = [{ ...point }];
+    const thresholdByte = this.threshold * 255;
+    while (stack.length > 0) {
+      const cur = stack.pop();
+      const idx = (cur.y * width + cur.x) * PIXEL;
+      if (Math.abs(data[idx + 3] - pickedAlpha) < thresholdByte) {
+        d[idx + 0] = 255;
+        d[idx + 2] = 0;
+        d[idx + 3] = 255;
+        if (cur.x > 0 && d[idx - PIXEL + 3] === 102) stack.push({ x: cur.x - 1, y: cur.y });
+        if (cur.x < width - 1 && d[idx + PIXEL + 3] === 102) stack.push({ x: cur.x + 1, y: cur.y });
+        if (cur.y > 0 && d[idx - width * PIXEL + 3] === 102) stack.push({ x: cur.x, y: cur.y - 1 });
+        if (cur.y < height - 1 && d[idx + width * PIXEL + 3] === 102) stack.push({ x: cur.x, y: cur.y + 1 });
+      } else {
+        d[idx + 3] = 0;
+      }
+    }
+    ctx.putImageData(this.imageData, 0, 0);
+    const op = e.shiftKey ? "add" : e.ctrlKey ? "remove" : "set";
+    this.onMaskSelect(op, canvas, ctx);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+  }
+}
+class EyedropperSelection {
+  constructor(parent, onColorMatch) {
+    __publicField(this, "parent");
+    __publicField(this, "onColorMatch");
+    __publicField(this, "thresholdEl");
+    __publicField(this, "threshold", 0.2);
+    __publicField(this, "pointerId", null);
+    this.parent = parent;
+    this.onColorMatch = onColorMatch;
+    this.thresholdEl = document.createElement("div");
+    this.thresholdEl.style.cssText = "position:absolute;bottom:60px;left:50%;transform:translateX(-50%);background:rgba(20,20,35,0.9);color:#e0e0e0;padding:8px 16px;border-radius:8px;font-size:13px;display:none;z-index:20;gap:8px;align-items:center;";
+    this.thresholdEl.innerHTML = `
+      <label style="margin-right:8px;">阈值:</label>
+      <input type="range" min="0" max="1" step="0.01" value="${this.threshold}" style="width:120px;vertical-align:middle;">
+      <span style="margin-left:8px;min-width:40px;">${this.threshold.toFixed(2)}</span>
+    `;
+    parent.appendChild(this.thresholdEl);
+    const slider = this.thresholdEl.querySelector("input");
+    const span = this.thresholdEl.querySelector("span");
+    slider.addEventListener("input", () => {
+      this.threshold = parseFloat(slider.value);
+      span.textContent = this.threshold.toFixed(2);
+    });
+    slider.addEventListener("pointerdown", (e) => e.stopPropagation());
+    this.pointerdown = this.pointerdown.bind(this);
+    this.pointermove = this.pointermove.bind(this);
+    this.pointerup = this.pointerup.bind(this);
+  }
+  activate() {
+    this.parent.style.cursor = "crosshair";
+    this.thresholdEl.style.display = "flex";
+    this.parent.addEventListener("pointerdown", this.pointerdown);
+    this.parent.addEventListener("pointermove", this.pointermove);
+    this.parent.addEventListener("pointerup", this.pointerup);
+  }
+  deactivate() {
+    this.parent.style.cursor = "";
+    this.thresholdEl.style.display = "none";
+    if (this.pointerId !== null) {
+      this.parent.releasePointerCapture(this.pointerId);
+      this.pointerId = null;
+    }
+    this.parent.removeEventListener("pointerdown", this.pointerdown);
+    this.parent.removeEventListener("pointermove", this.pointermove);
+    this.parent.removeEventListener("pointerup", this.pointerup);
+  }
+  pointerdown(e) {
+    if (this.pointerId !== null) return;
+    if (e.pointerType === "mouse" ? e.button !== 0 : !e.isPrimary) return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.pointerId = e.pointerId;
+    this.parent.setPointerCapture(this.pointerId);
+  }
+  pointermove(e) {
+    if (e.pointerId === this.pointerId) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
+  pointerup(e) {
+    if (e.pointerId !== this.pointerId) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const w = this.parent.clientWidth || 1;
+    const h = this.parent.clientHeight || 1;
+    const op = e.shiftKey ? "add" : e.ctrlKey ? "remove" : "set";
+    this.onColorMatch(op, {
+      x: Math.max(0, Math.min(1, e.offsetX / w)),
+      y: Math.max(0, Math.min(1, e.offsetY / h))
+    }, this.threshold);
+    this.parent.releasePointerCapture(this.pointerId);
+    this.pointerId = null;
+  }
+}
+function exportEditedPLY(positions, scales, rotations, colors, opacities, shCoeffs, state) {
+  const totalCount = state.count;
+  let keepCount = 0;
+  for (let i = 0; i < totalCount; i++) {
+    if (!(state.data[i] & State.deleted)) keepCount++;
+  }
+  const hasSH = shCoeffs !== null && shCoeffs.length > 0;
+  const shPerSplat = hasSH ? Math.floor(shCoeffs.length / totalCount) : 0;
+  const shNames = [];
+  if (hasSH) {
+    for (let i = 0; i < shPerSplat; i++) {
+      shNames.push(`f_rest_${i}`);
+    }
+  }
+  let header = "ply\n";
+  header += "format binary_little_endian 1.0\n";
+  header += `element vertex ${keepCount}
+`;
+  header += "property float x\n";
+  header += "property float y\n";
+  header += "property float z\n";
+  header += "property float nx\n";
+  header += "property float ny\n";
+  header += "property float nz\n";
+  header += "property float f_dc_0\n";
+  header += "property float f_dc_1\n";
+  header += "property float f_dc_2\n";
+  for (const name of shNames) {
+    header += `property float ${name}
+`;
+  }
+  header += "property float opacity\n";
+  header += "property float scale_0\n";
+  header += "property float scale_1\n";
+  header += "property float scale_2\n";
+  header += "property float rot_0\n";
+  header += "property float rot_1\n";
+  header += "property float rot_2\n";
+  header += "property float rot_3\n";
+  header += "end_header\n";
+  const headerBytes = new TextEncoder().encode(header);
+  const floatsPerSplat = 3 + 3 + 3 + shPerSplat + 1 + 3 + 4;
+  const bytesPerSplat = floatsPerSplat * 4;
+  const totalBytes = headerBytes.byteLength + keepCount * bytesPerSplat;
+  const buffer = new ArrayBuffer(totalBytes);
+  const headerView = new Uint8Array(buffer);
+  headerView.set(headerBytes);
+  const SH_C02 = 0.28209479177387814;
+  const dataView = new DataView(buffer);
+  let offset = headerBytes.byteLength;
+  for (let i = 0; i < totalCount; i++) {
+    if (state.data[i] & State.deleted) continue;
+    const i3 = i * 3;
+    const i4 = i * 4;
+    dataView.setFloat32(offset, positions[i3], true);
+    offset += 4;
+    dataView.setFloat32(offset, positions[i3 + 2], true);
+    offset += 4;
+    dataView.setFloat32(offset, positions[i3 + 1], true);
+    offset += 4;
+    dataView.setFloat32(offset, 0, true);
+    offset += 4;
+    dataView.setFloat32(offset, 0, true);
+    offset += 4;
+    dataView.setFloat32(offset, 0, true);
+    offset += 4;
+    dataView.setFloat32(offset, (colors[i3] - 0.5) / SH_C02, true);
+    offset += 4;
+    dataView.setFloat32(offset, (colors[i3 + 1] - 0.5) / SH_C02, true);
+    offset += 4;
+    dataView.setFloat32(offset, (colors[i3 + 2] - 0.5) / SH_C02, true);
+    offset += 4;
+    if (hasSH) {
+      const shBase = i * shPerSplat;
+      for (let j = 0; j < shPerSplat; j++) {
+        dataView.setFloat32(offset, shCoeffs[shBase + j], true);
+        offset += 4;
+      }
+    }
+    const alpha = opacities[i];
+    const clampedAlpha = Math.max(1e-6, Math.min(1 - 1e-6, alpha));
+    const logitOpacity = Math.log(clampedAlpha / (1 - clampedAlpha));
+    dataView.setFloat32(offset, logitOpacity, true);
+    offset += 4;
+    dataView.setFloat32(offset, Math.log(Math.max(1e-8, scales[i3])), true);
+    offset += 4;
+    dataView.setFloat32(offset, Math.log(Math.max(1e-8, scales[i3 + 2])), true);
+    offset += 4;
+    dataView.setFloat32(offset, Math.log(Math.max(1e-8, scales[i3 + 1])), true);
+    offset += 4;
+    dataView.setFloat32(offset, -rotations[i4], true);
+    offset += 4;
+    dataView.setFloat32(offset, rotations[i4 + 1], true);
+    offset += 4;
+    dataView.setFloat32(offset, rotations[i4 + 3], true);
+    offset += 4;
+    dataView.setFloat32(offset, rotations[i4 + 2], true);
+    offset += 4;
+  }
+  return buffer;
+}
+class SplatEditor {
+  constructor(camera, gsRenderer, container, callbacks = {}) {
+    __publicField(this, "camera");
+    __publicField(this, "gsRenderer");
+    __publicField(this, "container");
+    __publicField(this, "splatState");
+    __publicField(this, "editHistory");
+    __publicField(this, "toolManager");
+    __publicField(this, "compactData", null);
+    __publicField(this, "callbacks");
+    __publicField(this, "maskCanvas");
+    __publicField(this, "maskCtx");
+    __publicField(this, "toolOverlay");
+    __publicField(this, "projectedPositions", null);
+    __publicField(this, "projDirty", true);
+    __publicField(this, "_active", false);
+    __publicField(this, "overlayCleanup", []);
+    // ============================================
+    // 键盘快捷键
+    // ============================================
+    __publicField(this, "_keyHandler", null);
+    this.camera = camera;
+    this.gsRenderer = gsRenderer;
+    this.container = container;
+    this.callbacks = callbacks;
+  }
+  get active() {
+    return this._active;
+  }
+  get state() {
+    return this.splatState;
+  }
+  get history() {
+    return this.editHistory;
+  }
+  get tools() {
+    return this.toolManager;
+  }
+  /**
+   * 设置 compact 数据引用（用于导出和颜色匹配）
+   */
+  setCompactData(data) {
+    this.compactData = data;
+  }
+  /**
+   * 进入编辑模式
+   */
+  enter() {
+    if (this._active) return;
+    this._active = true;
+    const count = this.gsRenderer.getSplatCount();
+    this.splatState = new SplatState(count);
+    this.editHistory = new EditHistory(() => {
+      var _a2, _b2;
+      this.onStateChanged();
+      (_b2 = (_a2 = this.callbacks).onHistoryChanged) == null ? void 0 : _b2.call(_a2, this.editHistory.canUndo(), this.editHistory.canRedo());
+    });
+    this.toolOverlay = document.createElement("div");
+    this.toolOverlay.id = "editor-tool-overlay";
+    this.toolOverlay.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;display:none;z-index:5;";
+    this.container.appendChild(this.toolOverlay);
+    this.setupOverlayEventForwarding();
+    this.maskCanvas = document.createElement("canvas");
+    this.maskCanvas.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:none;z-index:6;";
+    this.container.appendChild(this.maskCanvas);
+    this.maskCtx = this.maskCanvas.getContext("2d");
+    const containerPos = getComputedStyle(this.container).position;
+    if (containerPos === "static" || containerPos === "") {
+      this.container.style.position = "relative";
+    }
+    this.toolManager = new ToolManager((name) => {
+      var _a2, _b2;
+      this.toolOverlay.style.display = name ? "block" : "none";
+      (_b2 = (_a2 = this.callbacks).onToolChanged) == null ? void 0 : _b2.call(_a2, name);
+    });
+    this.toolManager.register("rect", new RectSelection(
+      this.toolOverlay,
+      (op, rect) => this.selectByRect(op, rect)
+    ));
+    this.toolManager.register("lasso", new LassoSelection(
+      this.toolOverlay,
+      this.maskCanvas,
+      this.maskCtx,
+      (op, canvas, ctx) => this.selectByMask(op, canvas, ctx)
+    ));
+    this.toolManager.register("polygon", new PolygonSelection(
+      this.toolOverlay,
+      this.maskCanvas,
+      this.maskCtx,
+      (op, canvas, ctx) => this.selectByMask(op, canvas, ctx)
+    ));
+    this.toolManager.register("brush", new BrushSelection(
+      this.toolOverlay,
+      this.maskCanvas,
+      this.maskCtx,
+      (op, canvas, ctx) => this.selectByMask(op, canvas, ctx)
+    ));
+    this.toolManager.register("flood", new FloodSelection(
+      this.toolOverlay,
+      this.maskCanvas,
+      this.maskCtx,
+      (op, canvas, ctx) => this.selectByMask(op, canvas, ctx),
+      (_w, _h) => null
+      // offscreen rendering not available yet
+    ));
+    this.toolManager.register("eyedropper", new EyedropperSelection(
+      this.toolOverlay,
+      (op, pt, threshold) => this.selectByColor(op, pt, threshold)
+    ));
+    this.gsRenderer.setEditorState(this.splatState.data);
+    this._keyHandler = this._onKeyDown.bind(this);
+    window.addEventListener("keydown", this._keyHandler);
+    this.projDirty = true;
+  }
+  /**
+   * 退出编辑模式，将编辑结果永久写入渲染数据
+   */
+  exit() {
+    var _a2, _b2;
+    if (!this._active) return;
+    this._active = false;
+    window.removeEventListener("keydown", this._keyHandler);
+    this.toolManager.deactivateAll();
+    this.overlayCleanup.forEach((fn) => fn());
+    this.overlayCleanup = [];
+    (_a2 = this.toolOverlay) == null ? void 0 : _a2.remove();
+    (_b2 = this.maskCanvas) == null ? void 0 : _b2.remove();
+    this.applyEditsToRenderer();
+    this.editHistory.clear();
+    this.gsRenderer.clearEditorState();
+    this.projectedPositions = null;
+    this.compactData = null;
+  }
+  /**
+   * 将编辑结果写回渲染器：从 CompactSplatData 中剔除被标记为 deleted 的 splat，
+   * 用精简数据重建 GPU 缓冲区。
+   */
+  applyEditsToRenderer() {
+    var _a2, _b2;
+    if (!this.compactData || this.splatState.numDeleted === 0) return;
+    const { count, data } = this.splatState;
+    const src = this.compactData;
+    const keepCount = count - this.splatState.numDeleted;
+    if (keepCount <= 0) return;
+    const hasSH = !!src.shCoeffs;
+    const shStride = hasSH ? src.shCoeffs.length / src.count : 0;
+    const positions = new Float32Array(keepCount * 3);
+    const scales = new Float32Array(keepCount * 3);
+    const rotations = new Float32Array(keepCount * 4);
+    const colors = new Float32Array(keepCount * 3);
+    const opacities = new Float32Array(keepCount);
+    const shCoeffs = hasSH ? new Float32Array(keepCount * shStride) : void 0;
+    let dst = 0;
+    for (let i = 0; i < count; i++) {
+      if (data[i] & State.deleted) continue;
+      const i3 = i * 3, d3 = dst * 3;
+      positions[d3] = src.positions[i3];
+      positions[d3 + 1] = src.positions[i3 + 1];
+      positions[d3 + 2] = src.positions[i3 + 2];
+      scales[d3] = src.scales[i3];
+      scales[d3 + 1] = src.scales[i3 + 1];
+      scales[d3 + 2] = src.scales[i3 + 2];
+      const i4 = i * 4, d4 = dst * 4;
+      rotations[d4] = src.rotations[i4];
+      rotations[d4 + 1] = src.rotations[i4 + 1];
+      rotations[d4 + 2] = src.rotations[i4 + 2];
+      rotations[d4 + 3] = src.rotations[i4 + 3];
+      colors[d3] = src.colors[i3];
+      colors[d3 + 1] = src.colors[i3 + 1];
+      colors[d3 + 2] = src.colors[i3 + 2];
+      opacities[dst] = src.opacities[i];
+      if (hasSH) {
+        const srcOff = i * shStride, dstOff = dst * shStride;
+        for (let s = 0; s < shStride; s++) {
+          shCoeffs[dstOff + s] = src.shCoeffs[srcOff + s];
+        }
+      }
+      dst++;
+    }
+    const newData = {
+      count: keepCount,
+      positions,
+      scales,
+      rotations,
+      colors,
+      opacities,
+      ...hasSH ? { shCoeffs } : {}
+    };
+    this.gsRenderer.setCompactData(newData);
+    (_b2 = (_a2 = this.callbacks).onApplyEdits) == null ? void 0 : _b2.call(_a2, newData);
+  }
+  // ============================================
+  // 选择操作
+  // ============================================
+  selectAll() {
+    this.editHistory.add(new SelectAllOp(this.splatState));
+  }
+  selectNone() {
+    this.editHistory.add(new SelectNoneOp(this.splatState));
+  }
+  selectInvert() {
+    this.editHistory.add(new SelectInvertOp(this.splatState));
+  }
+  deleteSelection() {
+    if (this.splatState.numSelected === 0) return;
+    this.editHistory.add(new DeleteSelectionOp(this.splatState));
+  }
+  hideSelection() {
+    if (this.splatState.numSelected === 0) return;
+    this.editHistory.add(new HideSelectionOp(this.splatState));
+  }
+  unhideAll() {
+    this.editHistory.add(new UnhideAllOp(this.splatState));
+  }
+  undo() {
+    this.editHistory.undo();
+  }
+  redo() {
+    this.editHistory.redo();
+  }
+  // ============================================
+  // 导出
+  // ============================================
+  exportPLY() {
+    if (!this.compactData) return null;
+    const { positions, scales, rotations, colors, opacities, shCoeffs } = this.compactData;
+    return exportEditedPLY(positions, scales, rotations, colors, opacities, shCoeffs ?? null, this.splatState);
+  }
+  downloadPLY(filename = "edited.ply") {
+    const buffer = this.exportPLY();
+    if (!buffer) return;
+    const blob = new Blob([buffer], { type: "application/octet-stream" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+  // ============================================
+  // 内部：选择逻辑
+  // ============================================
+  selectByRect(op, rect) {
+    this.ensureProjection();
+    const proj = this.projectedPositions;
+    this.splatState.count;
+    const editOp = new SelectOp(this.splatState, op, (i) => {
+      const bx = i * 3;
+      const sx = proj[bx], sy = proj[bx + 1], sz = proj[bx + 2];
+      if (sz <= 0 || sz >= 1) return false;
+      return sx >= rect.startX && sx <= rect.endX && sy >= rect.startY && sy <= rect.endY;
+    });
+    this.editHistory.add(editOp);
+  }
+  selectByMask(op, canvas, ctx) {
+    this.ensureProjection();
+    const proj = this.projectedPositions;
+    const w = canvas.width;
+    const h = canvas.height;
+    const imageData = ctx.getImageData(0, 0, w, h);
+    const pixels = imageData.data;
+    const editOp = new SelectOp(this.splatState, op, (i) => {
+      const bx = i * 3;
+      const sx = proj[bx], sy = proj[bx + 1], sz = proj[bx + 2];
+      if (sz <= 0 || sz >= 1) return false;
+      const px = Math.floor(sx * w);
+      const py = Math.floor(sy * h);
+      if (px < 0 || px >= w || py < 0 || py >= h) return false;
+      const idx = (py * w + px) * 4;
+      return pixels[idx + 3] > 0;
+    });
+    this.editHistory.add(editOp);
+  }
+  selectByColor(op, _normalizedPoint, threshold) {
+    if (!this.compactData) return;
+    this.ensureProjection();
+    const proj = this.projectedPositions;
+    const { colors } = this.compactData;
+    const w = this.container.clientWidth;
+    const h = this.container.clientHeight;
+    const px = Math.floor(_normalizedPoint.x * w);
+    const py = Math.floor(_normalizedPoint.y * h);
+    let bestIdx = -1;
+    let bestDist = Infinity;
+    for (let i = 0; i < this.splatState.count; i++) {
+      const bx = i * 3;
+      const sz = proj[bx + 2];
+      if (sz <= 0 || sz >= 1) continue;
+      if (this.splatState.data[i] & (State.hidden | State.deleted)) continue;
+      const spx = proj[bx] * w;
+      const spy = proj[bx + 1] * h;
+      const d = (spx - px) ** 2 + (spy - py) ** 2;
+      if (d < bestDist) {
+        bestDist = d;
+        bestIdx = i;
+      }
+    }
+    if (bestIdx < 0) return;
+    const refR = colors[bestIdx * 3];
+    const refG = colors[bestIdx * 3 + 1];
+    const refB = colors[bestIdx * 3 + 2];
+    const editOp = new SelectOp(this.splatState, op, (i) => {
+      if (this.splatState.data[i] & (State.hidden | State.deleted)) return false;
+      const ci = i * 3;
+      const dr = colors[ci] - refR;
+      const dg = colors[ci + 1] - refG;
+      const db = colors[ci + 2] - refB;
+      return Math.sqrt(dr * dr + dg * dg + db * db) < threshold;
+    });
+    this.editHistory.add(editOp);
+  }
+  // ============================================
+  // 投影
+  // ============================================
+  /**
+   * 每帧调用，标记投影需要更新
+   */
+  markProjectionDirty() {
+    this.projDirty = true;
+  }
+  ensureProjection() {
+    const cpuPositions = this.gsRenderer.getCPUPositions();
+    if (!cpuPositions) return;
+    const count = this.splatState.count;
+    if (!this.projectedPositions || this.projectedPositions.length !== count * 3) {
+      this.projectedPositions = new Float32Array(count * 3);
+    }
+    const viewMat = this.camera.viewMatrix;
+    const projMat = this.camera.projectionMatrix;
+    const modelMat = this.gsRenderer.getModelMatrix();
+    const out = this.projectedPositions;
+    for (let i = 0; i < count; i++) {
+      const i3 = i * 3;
+      const x = cpuPositions[i3], y = cpuPositions[i3 + 1], z = cpuPositions[i3 + 2];
+      const wx = modelMat[0] * x + modelMat[4] * y + modelMat[8] * z + modelMat[12];
+      const wy = modelMat[1] * x + modelMat[5] * y + modelMat[9] * z + modelMat[13];
+      const wz = modelMat[2] * x + modelMat[6] * y + modelMat[10] * z + modelMat[14];
+      const vx = viewMat[0] * wx + viewMat[4] * wy + viewMat[8] * wz + viewMat[12];
+      const vy = viewMat[1] * wx + viewMat[5] * wy + viewMat[9] * wz + viewMat[13];
+      const vz = viewMat[2] * wx + viewMat[6] * wy + viewMat[10] * wz + viewMat[14];
+      const vw = viewMat[3] * wx + viewMat[7] * wy + viewMat[11] * wz + viewMat[15];
+      const cx = projMat[0] * vx + projMat[4] * vy + projMat[8] * vz + projMat[12] * vw;
+      const cy = projMat[1] * vx + projMat[5] * vy + projMat[9] * vz + projMat[13] * vw;
+      const cz = projMat[2] * vx + projMat[6] * vy + projMat[10] * vz + projMat[14] * vw;
+      const cw = projMat[3] * vx + projMat[7] * vy + projMat[11] * vz + projMat[15] * vw;
+      if (cw <= 0) {
+        out[i3] = -2;
+        out[i3 + 1] = -2;
+        out[i3 + 2] = -1;
+        continue;
+      }
+      const invW = 1 / cw;
+      out[i3] = (cx * invW + 1) * 0.5;
+      out[i3 + 1] = (1 - cy * invW) * 0.5;
+      out[i3 + 2] = cz * invW;
+    }
+    this.projDirty = false;
+  }
+  // ============================================
+  // 状态变更通知
+  // ============================================
+  onStateChanged() {
+    var _a2, _b2;
+    this.gsRenderer.updateEditorState(this.splatState.data);
+    (_b2 = (_a2 = this.callbacks).onStateChanged) == null ? void 0 : _b2.call(_a2);
+  }
+  // ============================================
+  // 覆盖层事件转发（保持相机控制可用）
+  // ============================================
+  setupOverlayEventForwarding() {
+    const overlay = this.toolOverlay;
+    const canvas = this.container.querySelector("canvas");
+    if (!canvas) return;
+    const addForward = (event, handler, options) => {
+      overlay.addEventListener(event, handler, options);
+      this.overlayCleanup.push(
+        () => overlay.removeEventListener(event, handler, options)
+      );
+    };
+    addForward("wheel", (e) => {
+      canvas.dispatchEvent(new WheelEvent("wheel", e));
+      e.preventDefault();
+    }, { passive: false });
+    addForward("mousedown", (e) => {
+      if (e.button !== 0) {
+        canvas.dispatchEvent(new MouseEvent("mousedown", e));
+      }
+    });
+    addForward("mousemove", (e) => {
+      if (e.buttons & 6) {
+        canvas.dispatchEvent(new MouseEvent("mousemove", e));
+      }
+    });
+    addForward("mouseup", (e) => {
+      if (e.button !== 0) {
+        canvas.dispatchEvent(new MouseEvent("mouseup", e));
+      }
+    });
+    addForward("contextmenu", (e) => {
+      e.preventDefault();
+    });
+  }
+  _onKeyDown(e) {
+    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+    if (e.ctrlKey && e.key === "z") {
+      e.preventDefault();
+      if (e.shiftKey) this.redo();
+      else this.undo();
+    } else if (e.ctrlKey && e.key === "y") {
+      e.preventDefault();
+      this.redo();
+    } else if (e.ctrlKey && e.key === "a") {
+      e.preventDefault();
+      this.selectAll();
+    } else if (e.key === "Delete" || e.key === "Backspace") {
+      e.preventDefault();
+      this.deleteSelection();
+    }
+  }
+}
 class App {
   constructor(canvas) {
     __publicField(this, "canvas");
@@ -14228,6 +16076,8 @@ class App {
     __publicField(this, "animationId", 0);
     // 是否使用移动端渲染器
     __publicField(this, "useMobileRenderer", false);
+    // 最近加载的 CompactSplatData（用于编辑器导出）
+    __publicField(this, "lastCompactData", null);
     // 绑定的事件处理函数
     __publicField(this, "boundOnResize");
     this.canvas = canvas;
@@ -14337,6 +16187,7 @@ class App {
         if (onProgress) onProgress(90, "upload");
         gsRenderer.setCompactData(compactData);
         if (onProgress) onProgress(100, "upload");
+        this.lastCompactData = compactData;
         this.sceneManager.setGSRenderer(gsRenderer);
         this.hotspotManager.setGSRenderer(gsRenderer);
         return compactData.count;
@@ -14352,6 +16203,7 @@ class App {
         if (onProgress) onProgress(90, "upload");
         gsRenderer.setCompactData(compactData);
         if (onProgress) onProgress(100, "upload");
+        this.lastCompactData = compactData;
         this.sceneManager.setGSRenderer(gsRenderer);
         this.hotspotManager.setGSRenderer(gsRenderer);
         return compactData.count;
@@ -14456,6 +16308,7 @@ class App {
         this.useMobileRenderer = false;
       }
       gsRenderer.setCompactData(compactData);
+      this.lastCompactData = compactData;
       this.sceneManager.setGSRenderer(gsRenderer);
       this.hotspotManager.setGSRenderer(gsRenderer);
       if (onProgress) onProgress(100, "upload");
@@ -14720,6 +16573,12 @@ class App {
   isUsingMobileRenderer() {
     return this.useMobileRenderer;
   }
+  getLastCompactData() {
+    return this.lastCompactData;
+  }
+  setLastCompactData(data) {
+    this.lastCompactData = data;
+  }
   // ============================================
   // 热点管理
   // ============================================
@@ -14882,6 +16741,7 @@ export {
   Camera,
   DEFAULT_MATERIAL,
   DEFAULT_OBJ_MATERIAL,
+  EditHistory,
   GLBLoader,
   GSSplatRenderer,
   GSSplatRendererMobile,
@@ -14902,8 +16762,12 @@ export {
   SceneAidsRenderer,
   SceneManager,
   SplatBoundingBoxProvider,
+  SplatEditor,
+  SplatState,
   SplatTransformProxy,
+  State,
   TextureCache,
+  ToolManager,
   TransformGizmo,
   ViewportGizmo,
   calculateTextureDimensions,
@@ -14915,6 +16779,7 @@ export {
   deserializeSOG,
   deserializeSplat,
   destroyCompressedTextures,
+  exportEditedPLY,
   getRecommendedDPR,
   isMobileDevice,
   isWebGPUSupported,