RubyGems - webxr - Versions diffs - 0.1.0 - Mend

webxr 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (54) hide show

checksums.yaml +7 -0
data/.rspec +3 -0
data/CHANGELOG.md +7 -0
data/README.md +138 -0
data/Rakefile +21 -0
data/examples/ar_demo.html +238 -0
data/examples/ar_hit_test.rb +157 -0
data/examples/basic_vr.rb +110 -0
data/examples/controller_input.rb +91 -0
data/examples/hand_tracking.rb +124 -0
data/examples/hello_webxr.html +288 -0
data/examples/inline_demo.html +261 -0
data/examples/server.rb +34 -0
data/examples/vr_scene_demo.html +330 -0
data/lib/webxr/ar/anchor.rb +83 -0
data/lib/webxr/ar/hit_test_result.rb +54 -0
data/lib/webxr/ar/hit_test_source.rb +34 -0
data/lib/webxr/ar/ray.rb +90 -0
data/lib/webxr/constants.rb +61 -0
data/lib/webxr/core/frame.rb +155 -0
data/lib/webxr/core/render_state.rb +47 -0
data/lib/webxr/core/session.rb +212 -0
data/lib/webxr/core/system.rb +122 -0
data/lib/webxr/errors.rb +18 -0
data/lib/webxr/events/input_source_event.rb +53 -0
data/lib/webxr/events/reference_space_event.rb +44 -0
data/lib/webxr/events/session_event.rb +56 -0
data/lib/webxr/geometry/pose.rb +49 -0
data/lib/webxr/geometry/rigid_transform.rb +73 -0
data/lib/webxr/geometry/view.rb +68 -0
data/lib/webxr/geometry/viewer_pose.rb +40 -0
data/lib/webxr/geometry/viewport.rb +55 -0
data/lib/webxr/hand/hand.rb +197 -0
data/lib/webxr/hand/joint_pose.rb +33 -0
data/lib/webxr/hand/joint_space.rb +74 -0
data/lib/webxr/helpers/input_helper.rb +142 -0
data/lib/webxr/helpers/rendering_helper.rb +94 -0
data/lib/webxr/helpers/session_manager.rb +105 -0
data/lib/webxr/input/gamepad.rb +115 -0
data/lib/webxr/input/gamepad_button.rb +36 -0
data/lib/webxr/input/input_source.rb +101 -0
data/lib/webxr/input/input_source_array.rb +86 -0
data/lib/webxr/js_wrapper.rb +116 -0
data/lib/webxr/layers/layer.rb +28 -0
data/lib/webxr/layers/webgl_binding.rb +69 -0
data/lib/webxr/layers/webgl_layer.rb +102 -0
data/lib/webxr/layers/webgl_sub_image.rb +59 -0
data/lib/webxr/spaces/bounded_reference_space.rb +43 -0
data/lib/webxr/spaces/reference_space.rb +51 -0
data/lib/webxr/spaces/space.rb +18 -0
data/lib/webxr/version.rb +5 -0
data/lib/webxr.rb +73 -0
data/webxr.gemspec +33 -0
metadata +111 -0

data/examples/inline_demo.html ADDED Viewed

@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>WebXR Ruby - Inline Demo (No VR Required)</title>
+  <style>
+    body {
+      margin: 0;
+      background: #1a1a2e;
+      color: white;
+      font-family: system-ui, sans-serif;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-height: 100vh;
+      padding: 20px;
+    }
+    h1 { color: #e94560; margin-bottom: 10px; }
+    p { color: #aaa; margin-bottom: 20px; }
+    #xr-canvas {
+      width: 800px;
+      height: 450px;
+      max-width: 100%;
+      border: 2px solid #e94560;
+      border-radius: 8px;
+    }
+    button {
+      background: #e94560;
+      color: white;
+      border: none;
+      padding: 1rem 2rem;
+      font-size: 1.2rem;
+      border-radius: 8px;
+      cursor: pointer;
+      margin: 1rem 0.5rem;
+      transition: background 0.3s;
+    }
+    button:hover { background: #ff6b6b; }
+    button:disabled { background: #444; cursor: not-allowed; }
+    #log {
+      margin-top: 1rem;
+      padding: 1rem;
+      background: #0f0f23;
+      border-radius: 8px;
+      text-align: left;
+      max-height: 150px;
+      overflow-y: auto;
+      font-family: monospace;
+      font-size: 0.85rem;
+      width: 800px;
+      max-width: 100%;
+    }
+    .log-entry { margin: 0.25rem 0; }
+    .info { color: #4ecdc4; }
+    .success { color: #7bed9f; }
+  </style>
+</head>
+<body>
+  <h1>WebXR Ruby - Inline Demo</h1>
+  <p>This demo works without VR headset or emulator (uses WebXR inline mode)</p>
+  <canvas id="xr-canvas"></canvas>
+  <div>
+    <button id="start-btn">Start Inline Session</button>
+    <button id="stop-btn" disabled>Stop Session</button>
+  </div>
+  <div id="log"></div>
+  <script type="module">
+    const canvas = document.getElementById("xr-canvas");
+    const startBtn = document.getElementById("start-btn");
+    const stopBtn = document.getElementById("stop-btn");
+    const logDiv = document.getElementById("log");
+    let currentSession = null;
+    let gl = null;
+    function log(message, type = "") {
+      const entry = document.createElement("div");
+      entry.className = `log-entry ${type}`;
+      const time = new Date().toLocaleTimeString();
+      entry.textContent = `[${time}] ${message}`;
+      logDiv.appendChild(entry);
+      logDiv.scrollTop = logDiv.scrollHeight;
+      console.log(message);
+    }
+    async function init() {
+      // Setup WebGL
+      gl = canvas.getContext("webgl2", { xrCompatible: true });
+      if (!gl) {
+        gl = canvas.getContext("webgl", { xrCompatible: true });
+      }
+      if (!gl) {
+        log("WebGL not supported!", "error");
+        return;
+      }
+      log("WebGL context created", "success");
+      // Check WebXR
+      if (!navigator.xr) {
+        log("WebXR not available - showing regular WebGL demo");
+        startRegularDemo();
+        return;
+      }
+      log("WebXR API detected", "info");
+      // Check inline support (should always be supported)
+      try {
+        const supported = await navigator.xr.isSessionSupported("inline");
+        if (supported) {
+          log("Inline session supported", "success");
+          startBtn.disabled = false;
+        } else {
+          log("Inline session not supported - showing regular demo");
+          startRegularDemo();
+        }
+      } catch (e) {
+        log("Error checking support: " + e.message);
+        startRegularDemo();
+      }
+    }
+    function startRegularDemo() {
+      log("Running regular WebGL animation...", "info");
+      startBtn.style.display = "none";
+      stopBtn.style.display = "none";
+      let hue = 0;
+      function render() {
+        hue = (hue + 0.5) % 360;
+        const rgb = hslToRgb(hue / 360, 0.6, 0.4);
+        gl.clearColor(rgb[0], rgb[1], rgb[2], 1.0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        requestAnimationFrame(render);
+      }
+      render();
+    }
+    async function startInlineSession() {
+      try {
+        log("Starting inline XR session...");
+        startBtn.disabled = true;
+        currentSession = await navigator.xr.requestSession("inline");
+        log("Inline session started!", "success");
+        stopBtn.disabled = false;
+        // Create XR-compatible layer
+        const layer = new XRWebGLLayer(currentSession, gl);
+        currentSession.updateRenderState({
+          baseLayer: layer,
+          inlineVerticalFieldOfView: Math.PI / 2 // 90 degrees
+        });
+        log(`Layer: ${layer.framebufferWidth}x${layer.framebufferHeight}`);
+        // Get viewer reference space
+        const refSpace = await currentSession.requestReferenceSpace("viewer");
+        log("Viewer reference space acquired", "info");
+        // Handle session end
+        currentSession.addEventListener("end", () => {
+          log("Session ended");
+          currentSession = null;
+          startBtn.disabled = false;
+          stopBtn.disabled = true;
+        });
+        // Render loop
+        let frameCount = 0;
+        let hue = 0;
+        function onFrame(time, frame) {
+          if (!currentSession) return;
+          currentSession.requestAnimationFrame(onFrame);
+          frameCount++;
+          const pose = frame.getViewerPose(refSpace);
+          if (!pose) return;
+          // Bind framebuffer (null for inline = draw to canvas)
+          gl.bindFramebuffer(gl.FRAMEBUFFER, layer.framebuffer);
+          // Animated color
+          hue = (hue + 0.3) % 360;
+          const rgb = hslToRgb(hue / 360, 0.6, 0.4);
+          gl.clearColor(rgb[0], rgb[1], rgb[2], 1.0);
+          gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+          // Process each view
+          for (const view of pose.views) {
+            const viewport = layer.getViewport(view);
+            gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
+            // In a real app, render 3D content using:
+            // - view.projectionMatrix
+            // - view.transform.matrix
+          }
+          if (frameCount % 60 === 0) {
+            log(`Frame ${frameCount} - Color: hsl(${Math.round(hue)}, 60%, 40%)`);
+          }
+        }
+        currentSession.requestAnimationFrame(onFrame);
+        log("Render loop started", "success");
+      } catch (e) {
+        log("Error: " + e.message);
+        startBtn.disabled = false;
+      }
+    }
+    async function stopSession() {
+      if (currentSession) {
+        await currentSession.end();
+        log("Session stopped");
+      }
+    }
+    // HSL to RGB
+    function hslToRgb(h, s, l) {
+      let r, g, b;
+      if (s === 0) {
+        r = g = b = l;
+      } else {
+        const hue2rgb = (p, q, t) => {
+          if (t < 0) t += 1;
+          if (t > 1) t -= 1;
+          if (t < 1/6) return p + (q - p) * 6 * t;
+          if (t < 1/2) return q;
+          if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+          return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1/3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1/3);
+      }
+      return [r, g, b];
+    }
+    // Event listeners
+    startBtn.addEventListener("click", startInlineSession);
+    stopBtn.addEventListener("click", stopSession);
+    // Initialize
+    init();
+    log("Demo initialized", "info");
+  </script>
+</body>
+</html>

data/examples/server.rb ADDED Viewed

@@ -0,0 +1,34 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+require "webrick"
+port = ENV.fetch("PORT", 8000).to_i
+document_root = __dir__
+server = WEBrick::HTTPServer.new(
+  Port: port,
+  DocumentRoot: document_root,
+  Logger: WEBrick::Log.new($stdout, WEBrick::Log::INFO),
+  AccessLog: [[File.open(File::NULL, "w"), WEBrick::AccessLog::COMMON_LOG_FORMAT]]
+)
+puts "\n"
+puts "=" * 50
+puts "  WebXR Ruby Examples Server"
+puts "=" * 50
+puts "\n"
+puts "  Serving files from: #{document_root}"
+puts "\n"
+puts "  Open in browser:"
+puts "    http://localhost:#{port}/hello_webxr.html"
+puts "    http://localhost:#{port}/ar_demo.html"
+puts "\n"
+puts "  Press Ctrl+C to stop"
+puts "=" * 50
+puts "\n"
+trap("INT") { server.shutdown }
+trap("TERM") { server.shutdown }
+server.start

data/examples/vr_scene_demo.html ADDED Viewed

@@ -0,0 +1,330 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>WebXR Ruby - 3D VR Scene Demo</title>
+  <style>
+    body {
+      margin: 0;
+      background: #000;
+      overflow: hidden;
+    }
+    canvas {
+      display: block;
+    }
+    #info {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      color: white;
+      font-family: system-ui, sans-serif;
+      font-size: 14px;
+      background: rgba(0,0,0,0.7);
+      padding: 15px;
+      border-radius: 8px;
+      z-index: 100;
+      max-width: 300px;
+      pointer-events: none;
+    }
+    #info h2 {
+      margin: 0 0 10px 0;
+      color: #e94560;
+    }
+    #info p {
+      margin: 5px 0;
+      color: #ccc;
+    }
+    #vr-button {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: #e94560;
+      color: white;
+      border: none;
+      padding: 15px 30px;
+      font-size: 18px;
+      border-radius: 8px;
+      cursor: pointer;
+      z-index: 100;
+    }
+    #vr-button:hover { background: #ff6b6b; }
+    #vr-button:disabled { background: #444; cursor: not-allowed; }
+    #log {
+      position: absolute;
+      bottom: 80px;
+      left: 10px;
+      color: #4ecdc4;
+      font-family: monospace;
+      font-size: 12px;
+      background: rgba(0,0,0,0.7);
+      padding: 10px;
+      border-radius: 8px;
+      max-height: 150px;
+      overflow-y: auto;
+      z-index: 100;
+      width: 280px;
+      pointer-events: none;
+    }
+  </style>
+  <script type="importmap">
+    {
+      "imports": {
+        "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
+        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
+      }
+    }
+  </script>
+</head>
+<body>
+  <div id="info">
+    <h2>WebXR 3D Scene</h2>
+    <p>Drag to rotate view</p>
+    <p>Scroll to zoom</p>
+    <p>VR: Install WebXR Emulator or use VR headset</p>
+  </div>
+  <button id="vr-button" disabled>Enter VR</button>
+  <div id="log"></div>
+  <script type="module">
+    import * as THREE from 'three';
+    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+    const logDiv = document.getElementById("log");
+    const vrButton = document.getElementById("vr-button");
+    function log(msg) {
+      const entry = document.createElement("div");
+      entry.textContent = `[${new Date().toLocaleTimeString()}] ${msg}`;
+      logDiv.appendChild(entry);
+      logDiv.scrollTop = logDiv.scrollHeight;
+      console.log(msg);
+    }
+    // Scene setup
+    const scene = new THREE.Scene();
+    // Starfield background
+    const starGeometry = new THREE.BufferGeometry();
+    const starCount = 2000;
+    const starPositions = new Float32Array(starCount * 3);
+    for (let i = 0; i < starCount * 3; i += 3) {
+      starPositions[i] = (Math.random() - 0.5) * 100;
+      starPositions[i + 1] = (Math.random() - 0.5) * 100;
+      starPositions[i + 2] = (Math.random() - 0.5) * 100;
+    }
+    starGeometry.setAttribute("position", new THREE.BufferAttribute(starPositions, 3));
+    const starMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.1 });
+    const stars = new THREE.Points(starGeometry, starMaterial);
+    scene.add(stars);
+    // Floor grid
+    const gridHelper = new THREE.GridHelper(20, 20, 0x444444, 0x222222);
+    gridHelper.position.y = -1;
+    scene.add(gridHelper);
+    // Central glowing cube
+    const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
+    const cubeMaterial = new THREE.MeshStandardMaterial({
+      color: 0xe94560,
+      emissive: 0xe94560,
+      emissiveIntensity: 0.3,
+      metalness: 0.8,
+      roughness: 0.2
+    });
+    const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
+    cube.position.y = 0.5;
+    scene.add(cube);
+    // Floating spheres
+    const spheres = [];
+    const sphereColors = [0x4ecdc4, 0xffe66d, 0x7bed9f, 0xa55eea, 0x00d2d3];
+    for (let i = 0; i < 5; i++) {
+      const sphereGeometry = new THREE.SphereGeometry(0.3, 32, 32);
+      const sphereMaterial = new THREE.MeshStandardMaterial({
+        color: sphereColors[i],
+        emissive: sphereColors[i],
+        emissiveIntensity: 0.2,
+        metalness: 0.5,
+        roughness: 0.3
+      });
+      const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
+      sphere.userData = {
+        angle: (i / 5) * Math.PI * 2,
+        radius: 2 + i * 0.3,
+        speed: 0.5 + i * 0.1,
+        yOffset: Math.sin(i) * 0.5
+      };
+      spheres.push(sphere);
+      scene.add(sphere);
+    }
+    // Torus knot
+    const torusGeometry = new THREE.TorusKnotGeometry(0.5, 0.15, 100, 16);
+    const torusMaterial = new THREE.MeshStandardMaterial({
+      color: 0xff6b6b,
+      emissive: 0xff6b6b,
+      emissiveIntensity: 0.2,
+      metalness: 0.7,
+      roughness: 0.3
+    });
+    const torus = new THREE.Mesh(torusGeometry, torusMaterial);
+    torus.position.set(3, 1, -2);
+    scene.add(torus);
+    // Lights
+    const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
+    scene.add(ambientLight);
+    const pointLight = new THREE.PointLight(0xffffff, 1, 50);
+    pointLight.position.set(5, 5, 5);
+    scene.add(pointLight);
+    const pointLight2 = new THREE.PointLight(0x4ecdc4, 0.5, 30);
+    pointLight2.position.set(-5, 3, -5);
+    scene.add(pointLight2);
+    // Camera
+    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    camera.position.set(0, 2, 5);
+    console.log("Camera set to:", camera.position.x, camera.position.y, camera.position.z);
+    // Renderer
+    const renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    document.body.appendChild(renderer.domElement);
+    // Orbit controls for non-VR
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.05;
+    log(`Camera before: (${camera.position.x}, ${camera.position.y}, ${camera.position.z})`);
+    log("OrbitControls initialized - drag to rotate, scroll to zoom");
+    // Debug: log when controls are used
+    let lastLogTime = 0;
+    controls.addEventListener('change', () => {
+      const now = Date.now();
+      if (now - lastLogTime > 1000) {
+        const pos = camera.position;
+        log(`Camera: (${pos.x.toFixed(1)}, ${pos.y.toFixed(1)}, ${pos.z.toFixed(1)})`);
+        lastLogTime = now;
+      }
+    });
+    // Handle resize
+    window.addEventListener("resize", () => {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    });
+    // Animation
+    let time = 0;
+    function animate() {
+      time += 0.016;
+      // Rotate cube
+      cube.rotation.x += 0.01;
+      cube.rotation.y += 0.015;
+      // Animate spheres in orbit
+      spheres.forEach((sphere, i) => {
+        const data = sphere.userData;
+        data.angle += 0.01 * data.speed;
+        sphere.position.x = Math.cos(data.angle) * data.radius;
+        sphere.position.z = Math.sin(data.angle) * data.radius;
+        sphere.position.y = 1 + Math.sin(time * data.speed + i) * 0.5 + data.yOffset;
+      });
+      // Rotate torus
+      torus.rotation.x += 0.005;
+      torus.rotation.y += 0.01;
+      // Slowly rotate stars
+      stars.rotation.y += 0.0002;
+      controls.update();
+    }
+    // Render loop
+    function render() {
+      requestAnimationFrame(render);
+      animate();
+      renderer.render(scene, camera);
+    }
+    render();
+    log("3D scene initialized");
+    // WebXR VR support
+    async function checkVR() {
+      if (!navigator.xr) {
+        log("WebXR not available");
+        vrButton.textContent = "WebXR Not Available";
+        return;
+      }
+      try {
+        const supported = await navigator.xr.isSessionSupported("immersive-vr");
+        if (supported) {
+          log("VR supported!");
+          vrButton.disabled = false;
+          vrButton.textContent = "Enter VR";
+        } else {
+          log("VR not supported (install WebXR Emulator)");
+          vrButton.textContent = "VR Not Supported";
+        }
+      } catch (e) {
+        log("VR check error: " + e.message);
+      }
+    }
+    vrButton.addEventListener("click", async () => {
+      if (!renderer.xr.isPresenting) {
+        try {
+          // Enable XR for VR session
+          renderer.xr.enabled = true;
+          const session = await navigator.xr.requestSession("immersive-vr", {
+            requiredFeatures: ["local-floor"]
+          });
+          renderer.xr.setReferenceSpaceType("local-floor");
+          await renderer.xr.setSession(session);
+          // Use XR animation loop
+          renderer.setAnimationLoop(() => {
+            animate();
+            renderer.render(scene, camera);
+          });
+          log("Entered VR!");
+          vrButton.textContent = "Exit VR";
+          session.addEventListener("end", () => {
+            log("Exited VR");
+            vrButton.textContent = "Enter VR";
+            renderer.xr.enabled = false;
+            renderer.setAnimationLoop(null);
+            render(); // Resume normal render loop
+          });
+        } catch (e) {
+          log("VR Error: " + e.message);
+        }
+      } else {
+        renderer.xr.getSession().end();
+      }
+    });
+    checkVR();
+    log("Ready - drag to rotate, scroll to zoom");
+  </script>
+</body>
+</html>

data/lib/webxr/ar/anchor.rb ADDED Viewed

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+module WebXR
+  module AR
+    # XRAnchor - An anchor in the real world
+    # Anchors are used to place virtual content at fixed positions in AR
+    class Anchor < JSWrapper
+      # @param js_anchor [JS::Object] The XRAnchor JavaScript object
+      def initialize(js_anchor)
+        super(js_anchor)
+        @deleted = false
+      end
+      # Get the anchor's coordinate space
+      # @return [Space]
+      def anchor_space
+        Space.new(js_prop(:anchorSpace))
+      end
+      # Delete the anchor
+      # After deletion, the anchor cannot be used
+      # @return [void]
+      def delete
+        js_call(:delete)
+        @deleted = true
+      end
+      # Check if the anchor has been deleted
+      # @return [Boolean]
+      def deleted?
+        @deleted
+      end
+      # Request persistent handle for this anchor
+      # Allows the anchor to be restored in future sessions
+      # @return [String] The persistent handle
+      def request_persistent_handle
+        promise = js_call(:requestPersistentHandle)
+        js_await(promise).to_s
+      end
+    end
+    # XRAnchorSet - A set of anchors
+    class AnchorSet < JSWrapper
+      include Enumerable
+      # @param js_anchor_set [JS::Object] The XRAnchorSet JavaScript object
+      def initialize(js_anchor_set)
+        super(js_anchor_set)
+      end
+      # Get the number of anchors
+      # @return [Integer]
+      def size
+        js_int(:size) || 0
+      end
+      alias length size
+      # Iterate over all anchors
+      # @yield [Anchor] Each anchor in the set
+      # @return [Enumerator, void]
+      def each(&block)
+        return enum_for(:each) unless block_given?
+        js_call(:forEach, ->(js_anchor) { yield Anchor.new(js_anchor) })
+      end
+      # Check if the set is empty
+      # @return [Boolean]
+      def empty?
+        size.zero?
+      end
+      # Convert to array
+      # @return [Array<Anchor>]
+      def to_a
+        anchors = []
+        each { |anchor| anchors << anchor }
+        anchors
+      end
+    end
+  end
+end