@realsee/dnalogel 3.71.1 → 3.71.3-alpha.1

package/libs/PanoTagPlugin/controller/Tag/PlaneTag.d.ts

@@ -2,14 +2,21 @@ import type PanoTagPluginController from '..';
 import type { Tag, TagContentType, Tag as TagData, TagInstance } from '../..';
 import { BaseTag } from './BaseTag';
 import type { PartialObjectDeep } from '../../../typings/typings';
+import type { Vector3 } from 'three';
+import { Rectangle } from '../../../Sculpt/Objects/Rectangle';
 export type PlaneTagInterface<C extends TagContentType = TagContentType> = TagInstance<C, 'Plane'>;
 export declare class PlaneTag<C extends TagContentType = TagContentType> extends BaseTag<C, 'Plane'> {
     constructor(plugin: PanoTagPluginController, tagData: TagData);
+    rectanglePlane?: Rectangle;
     applyVisible(): void;
     set(tag: PartialObjectDeep<Tag<C, 'Plane'>>, deepMerge?: boolean): void;
     setData(...data: Parameters<InstanceType<typeof BaseTag<C, 'Plane'>>['setData']>): void;
     private loadModel;
+    private initialSculpt;
+    editorEnable(): void;
+    editorDisable(position?: Vector3[]): void;
     private renderVideoPlane;
     private renderImagePlane;
-    computeNormal(): import("three").Vector3;
+    private renderEmptyPlane;
+    computeNormal(): Vector3;
 }

package/libs/PanoTagPlugin/controller/Tag/PlaneTag.js

@@ -1,44 +1,44 @@
-var T = Object.defineProperty, b = Object.defineProperties;
-var k = Object.getOwnPropertyDescriptors;
-var v = Object.getOwnPropertySymbols;
-var R = Object.prototype.hasOwnProperty, V = Object.prototype.propertyIsEnumerable;
-var P = (d, e, t) => e in d ? T(d, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[e] = t, g = (d, e) => {
-  for (var t in e || (e = {}))
-    R.call(e, t) && P(d, t, e[t]);
-  if (v)
-    for (var t of v(e))
-      V.call(e, t) && P(d, t, e[t]);
-  return d;
-}, y = (d, e) => b(d, k(e));
-var D = (d, e, t) => new Promise((s, a) => {
-  var p = (n) => {
+var I = Object.defineProperty, F = Object.defineProperties;
+var T = Object.getOwnPropertyDescriptors;
+var y = Object.getOwnPropertySymbols;
+var j = Object.prototype.hasOwnProperty, k = Object.prototype.propertyIsEnumerable;
+var b = (l, i, t) => i in l ? I(l, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[i] = t, v = (l, i) => {
+  for (var t in i || (i = {}))
+    j.call(i, t) && b(l, t, i[t]);
+  if (y)
+    for (var t of y(i))
+      k.call(i, t) && b(l, t, i[t]);
+  return l;
+}, S = (l, i) => F(l, T(i));
+var D = (l, i, t) => new Promise((e, o) => {
+  var n = (s) => {
     try {
-      o(t.next(n));
-    } catch (i) {
-      a(i);
+      r(t.next(s));
+    } catch (d) {
+      o(d);
     }
-  }, r = (n) => {
+  }, m = (s) => {
     try {
-      o(t.throw(n));
-    } catch (i) {
-      a(i);
+      r(t.throw(s));
+    } catch (d) {
+      o(d);
     }
-  }, o = (n) => n.done ? s(n.value) : Promise.resolve(n.value).then(p, r);
-  o((t = t.apply(d, e)).next());
+  }, r = (s) => s.done ? e(s.value) : Promise.resolve(s.value).then(n, m);
+  r((t = t.apply(l, i)).next());
 });
-import { CONST as F } from "../../../shared-utils/constants.js";
-import { CSS3DObjectPlus as M } from "../../../shared-utils/CSS3DRender/CSS3DObject.js";
-import { anyPositionToVector3 as E, arrayPositionToVector3 as S } from "../../../shared-utils/positionToVector3.js";
+import { CONST as R } from "../../../shared-utils/constants.js";
+import { CSS3DObjectPlus as E } from "../../../shared-utils/CSS3DRender/CSS3DObject.js";
+import { anyPositionToVector3 as V, arrayPositionToVector3 as u } from "../../../shared-utils/positionToVector3.js";
 import "three";
-import { planeNormal as w } from "../../utils/planeNormal.js";
-import { VideoPlane as L, ImagePlane as j } from "../../utils/model/mediaPlane.js";
-import N from "../../Components/Tag/index.js";
-import { BaseTag as A } from "./BaseTag.js";
+import { planeNormal as M } from "../../utils/planeNormal.js";
+import { VideoPlane as O, ImagePlane as w } from "../../utils/model/mediaPlane.js";
+import G from "../../Components/Tag/index.js";
+import { BaseTag as L } from "./BaseTag.js";
 import "../../../shared-utils/tag.js";
 import "../../../vendor/hammerjs/hammer.js";
 import "../../../shared-utils/three/PointSelector/index.js";
 import "../../../shared-utils/three/CSS3DRenderer/index.js";
-import { initialCSS3DRender as G } from "../../../shared-utils/CSS3DRender/index.js";
+import { initialCSS3DRender as N } from "../../../shared-utils/CSS3DRender/index.js";
 import "@realsee/five/line";
 import "../../../shared-utils/three/core/Five_LineMaterial2.js";
 import "../../../shared-utils/three/core/Sphere.js";
@@ -47,7 +47,10 @@ import "../../../vendor/@tweenjs/tween/dist/tween.esm.js.js";
 import "../../../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
 import "../../../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
 import { waitFiveModelLoaded as C } from "../../../shared-utils/five/fiveModelLoad.js";
+import { uuid as A } from "../../../shared-utils/uuid.js";
 import "../../../shared-utils/five/FivePuppet.js";
+import { Sculpt as B } from "../../../Sculpt/index.js";
+import { Rectangle as x } from "../../../Sculpt/Objects/Rectangle/index.js";
 import "../../../shared-utils/even.js";
 import "../../../shared-utils/CSS3DRender/OpacityMesh.js";
 import "../../../shared-utils/three/centerPoint.js";
@@ -67,7 +70,6 @@ import "../../Components/Tag/TextTag/TextTag.js";
 import "../../Components/Common/Line/Straight.js";
 import "../../../vendor/svelte/transition/index.js";
 import "../../../vendor/svelte/easing/index.js";
-import "../../../shared-utils/uuid.js";
 import "../../Components/Common/Shadow.js";
 import "../../Components/Common/Text/FlyMText.js";
 import "../../Components/Common/Text/FlyText.js";
@@ -201,43 +203,136 @@ import "../../../shared-utils/five/getFloorIndex.js";
 import "../../../shared-utils/safeObj.js";
 import "../../utils/Cache.js";
 import "../../../shared-utils/promise/withResolvers.js";
-const B = /* @__PURE__ */ new Map(), O = /* @__PURE__ */ new Map();
-class to extends A {
-  constructor(e, t) {
-    super(e, t), this.state.unfolded = !0, this.loadModel();
+import "../../../Sculpt/utils/Modules/Global.js";
+import "../../../Sculpt/utils/Modules/Cursor.js";
+import "../../../Sculpt/utils/Modules/DeleteButtonBgBorder.js";
+import "../../../Sculpt/utils/Modules/DeleteIconSVG.js";
+import "../../../Object3DHelperPlugin/Controller.js";
+import "../../../base/BasePlugin.js";
+import "../../../shared-utils/Object3DHelper/Helper/MoveHelper.js";
+import "../../../shared-utils/Object3DHelper/Base/BaseHelper.js";
+import "../../../shared-utils/Object3DHelper/utils/setObjectQuaternion.js";
+import "../../../shared-utils/three/boundingBox.js";
+import "../../../shared-utils/Object3DHelper/Helper/Objects/ArrowGroup.js";
+import "../../../shared-utils/Object3DHelper/utils/direction.js";
+import "../../../shared-utils/Object3DHelper/Constants/RenderOrder.js";
+import "../../../shared-utils/Object3DHelper/Constants/color.js";
+import "../../../shared-utils/Object3DHelper/utils/calculateScaleByCamera.js";
+import "../../../shared-utils/Object3DHelper/utils/getPoseFromCamera.js";
+import "../../../shared-utils/clamp.js";
+import "../../../shared-utils/Object3DHelper/utils/getOrthographicCameraDirection.js";
+import "../../../shared-utils/Object3DHelper/Helper/RotateHelper.js";
+import "../../../shared-utils/Object3DHelper/Helper/HTML/tipsDom.js";
+import "../../../shared-utils/Object3DHelper/Helper/HTML/utils/createElement.js";
+import "../../../shared-utils/Object3DHelper/Helper/CSS3DScaleHelper.js";
+import "../../../shared-utils/Object3DHelper/Helper/HTML/rectangleScaleDom.js";
+import "../../../shared-utils/Object3DHelper/utils/cameraHooks.js";
+import "../../../shared-utils/Object3DHelper/Helper/BoundingBoxHelper.js";
+import "../../../shared-utils/Object3DHelper/Controller/MoveController.js";
+import "../../../shared-utils/Object3DHelper/Base/BaseController.js";
+import "../../../shared-utils/Object3DHelper/utils/solidGuide.js";
+import "../../../shared-utils/Object3DHelper/utils/getMouseRaycaster.js";
+import "../../../shared-utils/Object3DHelper/utils/calculateThreeMouse.js";
+import "../../../Object3DHelperPlugin/FiveControllerWrapper.js";
+import "../../../shared-utils/Object3DHelper/index.js";
+import "../../../shared-utils/Object3DHelper/Controller/RotateController.js";
+import "../../../shared-utils/math/rad2Deg.js";
+import "../../../shared-utils/math/deg2Rad.js";
+import "../../../shared-utils/Object3DHelper/Controller/CSS3DScaleController.js";
+import "../../../shared-utils/Object3DHelper/Controller/RectangleScaleController.js";
+import "../../../shared-utils/three/vectorIsEqual.js";
+import "../../../shared-utils/Object3DHelper/Controller/BoundingBoxController.js";
+import "../../../shared-utils/Object3DHelper/Helper/ScaleHelper.js";
+import "../../../shared-utils/Object3DHelper/Controller/ScaleController.js";
+import "../../../shared-utils/threex/domevents/index.js";
+import "../../../shared-utils/five/FiveDomEvents.js";
+import "../../../shared-utils/five/calculateThreeMouse.js";
+import "../../../shared-utils/three/recurveFindObject.js";
+import "../../../Sculpt/Objects/Polyline/index.js";
+import "../../../Sculpt/Meshes/Polyline.js";
+import "../../../Sculpt/Meshes/LineWithDots.js";
+import "../../../Sculpt/Meshes/Point.js";
+import "../../../shared-utils/three/closeVectors.js";
+import "../../../Sculpt/Objects/Base/index.js";
+import "../../../vendor/hotkeys-js/dist/hotkeys.esm.js";
+import "../../../Sculpt/Objects/Polyline/Editor.js";
+import "../../../Sculpt/Objects/Line/Editor.js";
+import "../../../Sculpt/Objects/Base/Editor.js";
+import "../../../shared-utils/three/vector3ToArray.js";
+import "../../../Sculpt/Objects/Point/index.js";
+import "../../../Sculpt/Objects/Point/Editor.js";
+import "../../../Sculpt/Objects/Polygon/index.js";
+import "../../../Sculpt/Meshes/Area.js";
+import "../../../Sculpt/Meshes/PolygonWithEdge.js";
+import "../../../Sculpt/Meshes/Polygon.js";
+import "../../../shared-utils/three/generatePolygonGeometry.js";
+import "../../../shared-utils/three/earcut3D.js";
+import "../../../vendor/earcut/src/earcut.js";
+import "../../../PanoMeasurePlugin/utils/isIntersecting.js";
+import "../../../Sculpt/utils/three/ColoredMesh.js";
+import "../../../shared-utils/three/geometryUtil.js";
+import "../../../Sculpt/Objects/Polygon/Editor.js";
+import "../../../Sculpt/Objects/Prism/index.js";
+import "../../../Sculpt/Meshes/Prism.js";
+import "../../../shared-utils/three/core/PrismGeometry.js";
+import "../../../shared-utils/three/core/polygonVertex.js";
+import "../../../shared-utils/three/core/PrismAnimationGeometry.js";
+import "../../../Sculpt/Editors/PrismMeshEditor.js";
+import "../../../Sculpt/Objects/Circle/index.js";
+import "../../../Sculpt/Editors/CircleMeshEditor.js";
+import "../../../Sculpt/Meshes/CircleWithEdge.js";
+import "../../../Sculpt/Meshes/Circle.js";
+import "../../../Sculpt/utils/radiusToSegments.js";
+import "../../../Sculpt/Objects/Cylinder/index.js";
+import "../../../Sculpt/Meshes/Cylinder.js";
+import "../../../Sculpt/Editors/CylinderMeshEditor.js";
+import "../../../Sculpt/Objects/Box/index.js";
+import "../../../Sculpt/Editors/BoxMeshEditor.js";
+import "../../../Sculpt/Meshes/Box.js";
+import "../../../Sculpt/Meshes/RectangleWithEdge.js";
+import "../../../Sculpt/Meshes/Rectangle.js";
+import "../../../Sculpt/utils/three/RectangleGeometry.js";
+import "../../../shared-utils/forReverseEach.js";
+import "../../../Sculpt/Objects/Line/index.js";
+import "../../../Sculpt/Editors/RectangleMeshEditor.js";
+import "../../../Sculpt/utils/sortPositionsByCameraPosition.js";
+const H = /* @__PURE__ */ new Map(), $ = /* @__PURE__ */ new Map();
+class qr extends L {
+  constructor(i, t) {
+    super(i, t), this.state.unfolded = !0, this.loadModel();
   }
   applyVisible() {
-    var t, s, a, p, r, o;
-    this.computeRenderType() === "Mesh" ? ((s = (t = this.data.mediaData) == null ? void 0 : t[0]) == null ? void 0 : s.type) === "Video" ? this.renderVideoPlane() : ((p = (a = this.data.mediaData) == null ? void 0 : a[0]) == null ? void 0 : p.type) === "Image" && this.renderImagePlane() : ((r = this.tag3DContentSvelte) == null || r.svelteApp.$set({ tag: this, state: this.plugin.state, temporaryState: this.plugin.temporaryState }), (o = this.tag3DContentSvelte) != null && o.css3DInstance && (this.tag3DContentSvelte.css3DInstance.visible = this.visible, this.five.needsRender = !0));
+    var t, e, o, n, m, r;
+    this.computeRenderType() === "Mesh" ? (this.initialSculpt(), ((e = (t = this.data.mediaData) == null ? void 0 : t[0]) == null ? void 0 : e.type) === "Video" ? this.renderVideoPlane() : ((n = (o = this.data.mediaData) == null ? void 0 : o[0]) == null ? void 0 : n.type) === "Image" ? this.renderImagePlane() : this.renderEmptyPlane()) : ((m = this.tag3DContentSvelte) == null || m.svelteApp.$set({ tag: this, state: this.plugin.state, temporaryState: this.plugin.temporaryState }), (r = this.tag3DContentSvelte) != null && r.css3DInstance && (this.tag3DContentSvelte.css3DInstance.visible = this.visible, this.five.needsRender = !0));
   }
-  set(e, t = !0) {
-    super.set(e, t), C(this.five).then(() => {
-      this.tag3DContentSvelte && (e.data ? this.tag3DContentSvelte.svelteApp.$set({ tag: this, state: this.plugin.state, temporaryState: this.plugin.temporaryState }) : e.position && this.loadModel());
+  set(i, t = !0) {
+    super.set(i, t), C(this.five).then(() => {
+      this.tag3DContentSvelte && (i.data ? this.tag3DContentSvelte.svelteApp.$set({ tag: this, state: this.plugin.state, temporaryState: this.plugin.temporaryState }) : i.position && this.loadModel());
     });
   }
-  setData(...e) {
-    var s, a, p, r, o;
-    super.setData(...e), this.computeRenderType() === "Mesh" ? ((a = (s = this.data.mediaData) == null ? void 0 : s[0]) == null ? void 0 : a.type) === "Video" ? this.renderVideoPlane() : ((r = (p = this.data.mediaData) == null ? void 0 : p[0]) == null ? void 0 : r.type) === "Image" && this.renderImagePlane() : (o = this.tag3DContentSvelte) == null || o.svelteApp.$set({ tag: this });
+  setData(...i) {
+    var e, o, n, m, r;
+    super.setData(...i), this.computeRenderType() === "Mesh" ? ((o = (e = this.data.mediaData) == null ? void 0 : e[0]) == null ? void 0 : o.type) === "Video" ? this.renderVideoPlane() : ((m = (n = this.data.mediaData) == null ? void 0 : n[0]) == null ? void 0 : m.type) === "Image" ? this.renderImagePlane() : this.renderEmptyPlane() : (r = this.tag3DContentSvelte) == null || r.svelteApp.$set({ tag: this });
   }
   loadModel() {
     return D(this, null, function* () {
-      var t, s, a, p, r, o;
+      var t, e, o, n, m, r;
       if (yield C(this.five), this.computeRenderType() === "Mesh")
-        ((s = (t = this.data.mediaData) == null ? void 0 : t[0]) == null ? void 0 : s.type) === "Video" ? this.renderVideoPlane() : ((p = (a = this.data.mediaData) == null ? void 0 : a[0]) == null ? void 0 : p.type) === "Image" && this.renderImagePlane();
+        this.initialSculpt(), ((e = (t = this.data.mediaData) == null ? void 0 : t[0]) == null ? void 0 : e.type) === "Video" ? this.renderVideoPlane() : ((n = (o = this.data.mediaData) == null ? void 0 : o[0]) == null ? void 0 : n.type) === "Image" ? this.renderImagePlane() : this.renderEmptyPlane();
       else {
-        G(this.five);
-        const n = this.position.map(E);
-        (o = (r = this.tag3DContentSvelte) == null ? void 0 : r.dispose) == null || o.call(r);
-        const i = document.createElement("div");
-        i.classList.add("tag-media-container");
-        const h = g({ mode: "front", cornerPoints: n, container: i }, this.config.tag3DConfig), l = this.computeRenderType() === "BehindDom" || h.mode === "behind" ? "behind" : "front", m = new M(y(g({}, h), { mode: l })), u = this.computeNormal();
-        m.position.add(u.clone().setLength(F.Z_FIGHTING_OFFSET)), this.plugin.group.add(m);
-        let c;
-        m.mode === "behind" && this.config.clickable !== !1 && (c = this.addObjectClickHandler(this, m, (I) => {
-          this.plugin.hooks.emit("click", { event: I, target: "TagContent", tag: this });
+        N(this.five);
+        const s = this.position.map(V);
+        (r = (m = this.tag3DContentSvelte) == null ? void 0 : m.dispose) == null || r.call(m);
+        const d = document.createElement("div");
+        d.classList.add("tag-media-container");
+        const g = v({ mode: "front", cornerPoints: s, container: d }, this.config.tag3DConfig), P = this.computeRenderType() === "BehindDom" || g.mode === "behind" ? "behind" : "front", p = new E(S(v({}, g), { mode: P })), a = this.computeNormal();
+        p.position.add(a.clone().setLength(R.Z_FIGHTING_OFFSET)), this.plugin.group.add(p);
+        let f;
+        p.mode === "behind" && this.config.clickable !== !1 && (f = this.addObjectClickHandler(this, p, (c) => {
+          this.plugin.hooks.emit("click", { event: c, target: "TagContent", tag: this });
         }));
-        const f = new N({
-          target: i,
+        const h = new G({
+          target: d,
           props: {
             tag: this,
             hooks: this.plugin.hooks,
@@ -248,81 +343,132 @@ class to extends A {
           }
         });
         this.tag3DContentSvelte = {
-          svelteApp: f,
+          svelteApp: h,
           domContainer: {
-            css3DObject: m
+            css3DObject: p
           },
-          css3DInstance: m,
-          initialNormal: u,
-          currentNormal: u,
+          css3DInstance: p,
+          initialNormal: a,
+          currentNormal: a,
           dispose: () => {
-            f.$destroy(), m.dispose(), c == null || c();
+            h.$destroy(), p.dispose(), f == null || f();
           }
         }, this.five.needsRender = !0;
       }
     });
   }
+  initialSculpt() {
+    if (this.rectanglePlane)
+      return;
+    const i = new B(this.five, void 0, {
+      magnifier: null
+    });
+    i.clear(), i.group.removeFromParent();
+    const t = A(), e = new x({
+      id: t,
+      type: "Rectangle",
+      points: this.position.map(u),
+      style: {
+        color: 2203620,
+        opacity: 0.1,
+        lineColor: 6737907
+      }
+    });
+    e.visible = !1, this.plugin.imagePlaneGroup.add(e), this.rectanglePlane = e, e.editor.hooks.on("objectUpdate", () => {
+      var o;
+      (o = this.mediaPlane) == null || o.changePointsOrParams({ cornerPoints: e.data.points.map(u) });
+    });
+  }
+  editorEnable() {
+    this.rectanglePlane || this.initialSculpt(), this.rectanglePlane.visible = !0, this.rectanglePlane.editor.enable();
+  }
+  editorDisable(i) {
+    var e;
+    this.rectanglePlane.visible = !1;
+    const t = i || this.position.map(u);
+    (e = this.mediaPlane) == null || e.changePointsOrParams({ cornerPoints: t }), this.rectanglePlane.setData({
+      points: t
+    }), this.rectanglePlane.editor.hooks.off("objectUpdate"), this.rectanglePlane.editor.disable();
+  }
   renderVideoPlane() {
-    var o;
-    const e = this.data.mediaData[0];
-    if (!e)
+    var d, g, P;
+    const i = this.data.mediaData[0];
+    if (!i)
       return;
-    const { url: t } = e;
+    const { url: t } = i;
     if (!t)
       return;
-    const s = this.currentVisible, a = (() => !!(this.mediaPlane && !s))(), p = (() => !!(!this.mediaPlane && s))(), r = (() => !!(this.mediaPlane && this.mediaPlane.src !== t))();
-    if ((a || r) && this.mediaPlane && (this.plugin.imagePlaneGroup.remove(this.mediaPlane), this.mediaPlane.dispose(), this.mediaPlane.removeFromParent(), this.mediaPlane = void 0), p || r) {
-      const n = this.position.map(S), i = new L(t, n, {
-        videoCoverSrc: e.videoCoverUrl,
+    const e = (d = this.data.objectFit) != null ? d : "contain", o = this.currentVisible, n = (() => !!(this.mediaPlane && !o))(), m = (() => !!(!this.mediaPlane && o))(), r = (() => !!(this.mediaPlane && (this.mediaPlane.src !== t || this.mediaPlane.objectFit !== e)))();
+    (n || r) && this.mediaPlane && (this.plugin.imagePlaneGroup.remove(this.mediaPlane), this.mediaPlane.dispose(), this.mediaPlane.removeFromParent(), this.mediaPlane = void 0);
+    const s = (() => !!(this.mediaPlane && this.mediaPlane.objectFit && this.mediaPlane.objectFit !== e))();
+    if (m || r) {
+      let p = this.position.map(u);
+      this.rectanglePlane && (p = this.rectanglePlane.data.points.map(u));
+      const a = new O(t, p, {
+        videoCoverSrc: i.videoCoverUrl,
         playButton: this.data.playIcon,
-        paused: !((o = this.data.autoplayConfig) != null && o.autoplayVideo),
+        paused: !((g = this.data.autoplayConfig) != null && g.autoplayVideo),
         objectFit: this.data.objectFit,
-        videoTextureMap: B,
-        ImageTextureMap: O,
+        videoTextureMap: H,
+        ImageTextureMap: $,
         domEvents: this.plugin.domEvents
       });
-      this.plugin.domEvents.addAutoBindEventListener(
-        i,
-        "click",
-        (l) => {
-          var m;
-          !((m = i.videoInstance) != null && m.paused) && i.videoInstance.muted === !1 && this.plugin.hooks.emit("playStateChange", { event: l, state: "playing", tag: this, mediaInstance: i.videoInstance });
-        }
-      ), i.onVideoReady = (l) => {
-        l.addEventListener("play", (m) => {
-          this.plugin.mediaStore.set({ currentMediaElement: i.videoInstance }), this.plugin.hooks.emit("playStateChange", { event: m, state: "playing", tag: this, mediaInstance: i.videoInstance });
-        }), l.addEventListener("pause", (m) => {
-          this.plugin.hooks.emit("playStateChange", { event: m, state: "paused", tag: this, mediaInstance: i.videoInstance });
-        }), l.addEventListener("ended", (m) => {
-          this.plugin.hooks.emit("playStateChange", { event: m, state: "paused", tag: this, mediaInstance: i.videoInstance });
+      this.plugin.domEvents.addAutoBindEventListener(a, "click", (h) => {
+        var c;
+        !((c = a.videoInstance) != null && c.paused) && a.videoInstance.muted === !1 && this.plugin.hooks.emit("playStateChange", {
+          event: h,
+          state: "playing",
+          tag: this,
+          mediaInstance: a.videoInstance
+        });
+      }), a.onVideoReady = (h) => {
+        h.addEventListener("play", (c) => {
+          this.plugin.mediaStore.set({ currentMediaElement: a.videoInstance }), this.plugin.hooks.emit("playStateChange", { event: c, state: "playing", tag: this, mediaInstance: a.videoInstance });
+        }), h.addEventListener("pause", (c) => {
+          this.plugin.hooks.emit("playStateChange", { event: c, state: "paused", tag: this, mediaInstance: a.videoInstance });
+        }), h.addEventListener("ended", (c) => {
+          this.plugin.hooks.emit("playStateChange", { event: c, state: "paused", tag: this, mediaInstance: a.videoInstance });
         });
       };
-      const h = (l) => (this.five.on("renderFrame", l), () => this.five.off("renderFrame", l));
-      i.initialRenderHooks(h), this.mediaPlane = i, this.play = () => i.play(), this.pause = () => i.pause(), this.plugin.imagePlaneGroup.add(this.mediaPlane);
+      const f = (h) => (this.five.on("renderFrame", h), () => this.five.off("renderFrame", h));
+      a.initialRenderHooks(f), this.mediaPlane = a, this.play = () => a.play(), this.pause = () => a.pause(), this.plugin.imagePlaneGroup.add(this.mediaPlane);
+    }
+    if (s) {
+      const p = this.rectanglePlane.data.points.map(u);
+      (P = this.mediaPlane) == null || P.changePointsOrParams({ cornerPoints: p, params: { objectFit: e } });
     }
     this.five.needsRender = !0;
   }
   renderImagePlane() {
-    const e = this.data.mediaData[0];
-    if (!e)
+    var g, P;
+    const i = this.data.mediaData[0], t = (g = this.data.objectFit) != null ? g : "contain";
+    if (!i)
       return;
-    const { url: t } = e;
-    if (!t)
+    const { url: e } = i;
+    if (!e)
       return;
-    const s = this.position.map(S), a = this.currentVisible, p = (() => !!(this.mediaPlane && !a))(), r = (() => !!(!this.mediaPlane && a))(), o = (() => !!(this.mediaPlane && this.mediaPlane.src !== t))();
-    (p || o) && this.mediaPlane && (this.plugin.imagePlaneGroup.remove(this.mediaPlane), this.mediaPlane.dispose(), this.mediaPlane.removeFromParent(), this.mediaPlane = void 0), (r || o) && (this.mediaPlane = new j(t, s, { objectFit: this.data.objectFit }), this.getConfig().clickable !== !1 && this.plugin.domEvents.addAutoBindEventListener(
+    let o = this.position.map(u);
+    const n = this.currentVisible, m = (() => !!(this.mediaPlane && !n))(), r = (() => !!(!this.mediaPlane && n))(), s = (() => !!(this.mediaPlane && this.mediaPlane.src !== e))(), d = (() => !!(this.mediaPlane && this.mediaPlane.objectFit && this.mediaPlane.objectFit !== t))();
+    if ((m || s) && this.mediaPlane && (this.plugin.imagePlaneGroup.remove(this.mediaPlane), this.mediaPlane.dispose(), this.mediaPlane.removeFromParent(), this.mediaPlane = void 0), (r || s) && (this.rectanglePlane && (o = this.rectanglePlane.data.points.map(u)), this.mediaPlane = new w(e, o, { objectFit: this.data.objectFit }), this.getConfig().clickable !== !1 && this.plugin.domEvents.addAutoBindEventListener(
       this.mediaPlane,
       "click",
-      (n) => {
-        this.plugin.hooks.emit("click", { tag: this, target: "TagContent", event: n.origDomEvent });
+      (p) => {
+        this.plugin.hooks.emit("click", { tag: this, target: "TagContent", event: p.origDomEvent });
       },
       { noEmitWhenHide: !0 }
-    ), this.plugin.imagePlaneGroup.add(this.mediaPlane)), this.five.needsRender = !0;
+    ), this.plugin.imagePlaneGroup.add(this.mediaPlane)), d) {
+      const p = this.rectanglePlane.data.points.map(u);
+      (P = this.mediaPlane) == null || P.changePointsOrParams({ cornerPoints: p, params: { objectFit: t } });
+    }
+    this.five.needsRender = !0;
+  }
+  renderEmptyPlane() {
+    this.mediaPlane && (this.plugin.imagePlaneGroup.remove(this.mediaPlane), this.mediaPlane.dispose(), this.mediaPlane.removeFromParent(), this.mediaPlane = void 0);
   }
   computeNormal() {
-    return w(this.position);
+    return M(this.position);
   }
 }
 export {
-  to as PlaneTag
+  qr as PlaneTag
 };