var b = Object.defineProperty;
var g = (t, e, i) => e in t ? b(t, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[e] = i;
var u = (t, e, i) => g(t, typeof e != "symbol" ? e + "" : e, i);
import { defineComponent as d, computed as y, ref as p, onMounted as M, onBeforeUnmount as w, createElementBlock as P, openBlock as S } from "vue";
import "@babylonjs/loaders/glTF";
import { Engine as _, Scene as D, ArcRotateCamera as E, Vector3 as R, VideoDome as V, PhotoDome as k, PointerEventTypes as T } from "@babylonjs/core";
import { upgradeVrVideo as B } from "./version.mjs";
import { nextTick as C } from "process";
import { useWatch as x } from "./hooks/useWatch.mjs";
const L = d({ name: "ShjVrVideo" }), j = /* @__PURE__ */ d({
  ...L,
  props: {
    option: {},
    sources: {},
    useEvents: {}
  },
  setup(t, { expose: e }) {
    const i = y(() => B(t.option)), c = p(), h = p();
    class f {
      constructor(n, o) {
        u(this, "scene");
        u(this, "engine");
        this.canvas = n, this.option = o, this.engine = new _(this.canvas, !0, {}, !1), h.value = !0, window.addEventListener("resize", () => {
          this.engine.resize();
        }), this.scene = this.createScene();
      }
      createScene() {
        const n = new D(this.engine), o = new E(
          "Camera",
          -Math.PI / 2,
          Math.PI / 2,
          5,
          R.Zero(),
          n
        );
        o.attachControl(c.value, !0), o.useAutoRotationBehavior = this.option.base.cameraAutoRotation, o.inputs.attached.mousewheel.detachControl();
        const l = new V(
          "",
          this.option.base.url,
          {
            resolution: this.option.base.resolution || 32,
            clickToPlay: this.option.base.clickToPlay,
            autoPlay: this.option.base.autoPlay,
            loop: this.option.base.loop,
            poster: this.option.base.poster,
            useDirectMapping: !1,
            halfDomeMode: this.option.base.halfDomeMode
            // false=360° true=180°
          },
          n
        );
        if (this.option.base.isReversal && (o.angularSensibilityX = -o.angularSensibilityX, o.angularSensibilityY = -o.angularSensibilityY), this.option.base.videoMode && (l.videoMode = k[this.option.base.videoMode]), l.fovMultiplier = this.option.base.defaultFov || 1, this.option.base.isScale) {
          let s = l.fovMultiplier;
          n.onPointerObservable.add((m) => {
            l !== void 0 && (s += m.event.wheelDelta * -5e-4, s < 0 && (s = 0), s > 2 && (s = 2), l.fovMultiplier = s);
          }, T.POINTERWHEEL);
        }
        return setTimeout(() => {
          h.value = !1;
        }, 200), n;
      }
      run() {
        return this.engine.runRenderLoop(() => {
          this.scene.render();
        }), this;
      }
      dispose() {
        this.scene && this.engine && (this.scene.dispose(), this.engine.dispose());
      }
    }
    const a = p(), r = () => {
      a.value && a.value.dispose(), a.value = new f(c.value, i.value).run();
    };
    return M(() => {
      C(() => {
        r();
      });
    }), w(() => {
      a.value && a.value.dispose();
    }), x({ option: i.value }, r), e({
      refresh: () => r(),
      refreshView: () => r(),
      refreshData: () => r()
    }), (v, n) => (S(), P("canvas", {
      ref_key: "canvasRef",
      ref: c,
      class: "babylon-canvas"
    }, null, 512));
  }
});
export {
  j as default
};
