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