@realsee/dnalogel
Version:
506 lines (505 loc) • 23 kB
JavaScript
var A = Object.defineProperty;
var R = Object.getOwnPropertySymbols;
var k = Object.prototype.hasOwnProperty, E = Object.prototype.propertyIsEnumerable;
var C = (d, m, t) => m in d ? A(d, m, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[m] = t, j = (d, m) => {
for (var t in m || (m = {}))
k.call(m, t) && C(d, t, m[t]);
if (R)
for (var t of R(m))
E.call(m, t) && C(d, t, m[t]);
return d;
};
var u = (d, m, t) => (C(d, typeof m != "symbol" ? m + "" : m, t), t);
var S = (d, m, t) => new Promise((e, o) => {
var i = (s) => {
try {
a(t.next(s));
} catch (n) {
o(n);
}
}, r = (s) => {
try {
a(t.throw(s));
} catch (n) {
o(n);
}
}, a = (s) => s.done ? e(s.value) : Promise.resolve(s.value).then(i, r);
a((t = t.apply(d, m)).next());
});
import { TagComputer as I } from "./TagComputer.js";
import { Group as y, Quaternion as V, Vector3 as b, Matrix4 as v } from "three";
import O from "../Components/TagContainer.js";
import x from "../Components/Tag/index.js";
import { CSS3DRenderPlugin as G } from "../../CSS3DRenderPlugin/index.js";
import { loadGLTF as F } from "../../shared-utils/three/GLTFLoader.js";
import { isMediaModelTag as D, isStickModelTag as _ } from "../utils/tag/tagCheck.js";
import { VideoPlane as L, ImagePlane as w } from "../utils/model/mediaPlane.js";
import { centerPoint as W } from "../../shared-utils/three/centerPoint.js";
import { arrayPositionToVector3 as g } from "../../shared-utils/positionToVector3.js";
import "../utils/tagPosition.js";
import "../utils/checkRange.js";
import "../../shared-utils/five/mode.js";
import "hammerjs";
import "@realsee/five";
import "../../vendor/@tweenjs/tween/dist/tween.esm.js.js";
import "../../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
import "../../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
import "three/examples/jsm/renderers/CSS3DRenderer";
import "../../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
import "../../shared-utils/util.js";
import "../../CSS3DRenderPlugin/utils/createResizeObserver.js";
import "../../CSS3DRenderPlugin/utils/even.js";
import "../../shared-utils/Subscribe.js";
import "../../CSS3DRenderPlugin/utils/three/CSS3DObject.js";
import "../../CSS3DRenderPlugin/utils/three/OpacityMesh.js";
import "../../shared-utils/three/getObjectVisible.js";
import "../../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
import "../../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
import "../../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
import "animejs";
import "../../shared-utils/isNil.js";
import "./TagUtil.js";
import "../typings/tag/TagConfig.js";
import "../../vendor/object-assign-deep/objectAssignDeep.js";
import "../tag.config.js";
import "../utils/planeNormal.js";
import "../utils/normalPositionToPositions.js";
import "./TagCache.js";
import "../../base/BasePlugin.js";
import "../../shared-utils/url/absoluteUrl.js";
import "../../vendor/svelte/store/index.js";
import "../../vendor/svelte/internal/index.js";
import "../../shared-utils/device.js";
import "../../shared-utils/five/FiveDomEvents.js";
import "../../shared-utils/five/calculateThreeMouse.js";
import "../utils/tag/adaptConfig.js";
import "../../shared-utils/typescript/entries.js";
import "../../shared-utils/url/getUrl.js";
import "../../shared-utils/five/transformPosition.js";
import "../../shared-utils/Utils/WorkUtil.js";
import "../../shared-utils/Utils/BaseUtil.js";
import "../../shared-utils/five/getFloorIndex.js";
import "../../shared-utils/safeObj.js";
import "../../shared-utils/three/loadTexture.js";
import "../../shared-utils/three/Quadrangle.js";
import "../../shared-utils/math/pointIsRectangle.js";
import "../../shared-utils/three/loadVideoTexture.js";
import "../Assets/Icon.js";
import "../../shared-utils/three/getPositionsByObjectFit.js";
import "../../shared-utils/three/FragmentTransparencyMaterial.js";
import "../../shared-utils/three/getNormal.js";
import "../Components/TagItem.js";
import "../utils/noTypecheck.js";
import "../Components/Common/TagPoint.js";
import "../Components/Common/Shadow.js";
import "../../vendor/svelte/transition/index.js";
import "../../vendor/svelte/easing/index.js";
import "../Components/Common/Icon/Icon.js";
import "../utils/getImageInfo.js";
import "../utils/px2rem.js";
import "../../vendor/classnames/index.js";
import "../Components/Tag/TextTag/index.js";
import "../Components/Tag/TextTag/TextTag.js";
import "../Components/Common/Line/Straight.js";
import "../../shared-utils/uuid.js";
import "../Components/Common/Text/FlyMText.js";
import "../Components/Common/Text/FlyText.js";
import "../utils/search.js";
import "../utils/constants.js";
import "../Components/Common/Arrow.js";
import "../utils/doUtil.js";
import "../../shared-utils/svelte/resizeObserver.js";
import "../../vendor/resize-observer-polyfill/dist/ResizeObserver.es.js";
import "../Components/Tag/TextTag/TextPlaneTag.js";
import "../Components/Common/Text/MText.js";
import "../Components/Tag/ImageTextTag.js";
import "../Components/Common/Line/Polyline.js";
import "../Components/Common/Media.js";
import "../../vendor/svelte-carousel/src/components/Carousel/Carousel.js";
import "../../vendor/svelte-carousel/src/components/Dots/Dots.js";
import "../../vendor/svelte-carousel/src/components/Dot/Dot.js";
import "../../vendor/svelte-carousel/src/components/Arrow/Arrow.js";
import "../../vendor/svelte-carousel/src/direction.js";
import "../../vendor/svelte-carousel/src/components/Progress/Progress.js";
import "../../vendor/svelte-carousel/src/actions/swipeable/swipeable.js";
import "../../vendor/svelte-carousel/src/actions/swipeable/event.js";
import "../../vendor/svelte-carousel/src/utils/event.js";
import "../../vendor/svelte-carousel/src/units.js";
import "../../vendor/svelte-carousel/src/actions/hoverable/hoverable.js";
import "../../vendor/svelte-carousel/src/actions/hoverable/event.js";
import "../../vendor/svelte-carousel/src/actions/tappable/tappable.js";
import "../../vendor/svelte-carousel/src/utils/math.js";
import "../../vendor/svelte-carousel/src/actions/tappable/event.js";
import "../../vendor/svelte-carousel/src/utils/page.js";
import "../../vendor/svelte-carousel/src/utils/clones.js";
import "../../vendor/svelte-carousel/src/utils/object.js";
import "../../vendor/svelte-carousel/src/components/Carousel/createCarousel.js";
import "../../vendor/easy-reactive/src/simply-reactive.js";
import "../../vendor/lodash.get/index.js";
import "../../_commonjsHelpers.js";
import "../../vendor/lodash.clonedeep/index.js";
import "../../vendor/easy-reactive/src/utils/subscription.js";
import "../../vendor/easy-reactive/src/utils/object.js";
import "../../vendor/lodash.isequal/index.js";
import "../../vendor/easy-reactive/src/utils/watcher.js";
import "../../vendor/svelte-carousel/src/utils/lazy.js";
import "../../vendor/svelte-carousel/src/utils/ProgressManager.js";
import "../../vendor/svelte-carousel/src/utils/interval.js";
import "../Components/Common/MediaItem.js";
import "../Components/Tag/MarketingTag.js";
import "../Components/Tag/AudioTag/index.js";
import "../Components/Tag/AudioTag/AudioTag.js";
import "../Components/Common/Audio.js";
import "../utils/audio/SharedAudio.js";
import "../../shared-utils/audio.js";
import "../Components/Common/Icon/audioIcon.js";
import "../Components/Tag/AudioTag/AudioPlaneTag.js";
import "../Components/Tag/MediaPlane.js";
import "../Components/Tag/LinkTag.js";
import "../Components/Tag/PanoramaTag.js";
import "../Components/Tag/CustomTag.js";
import "../../CSS3DRenderPlugin/Controller.js";
import "../../CSS3DRenderPlugin/utils/waitFiveModelLoaded.js";
import "@realsee/five/gltf-loader";
const q = /* @__PURE__ */ new Map(), $ = /* @__PURE__ */ new Map();
class Ti extends I {
constructor(t) {
super(t);
u(this, "rendererMap", /* @__PURE__ */ new Map());
u(this, "contentTypeMap", /* @__PURE__ */ new Map());
u(this, "group", new y());
u(this, "imagePlaneGroup", new y());
u(this, "gltfObjectGroup", new y());
/** 维护一个可用模型表，用于快速删除不应该在场景中的模型 */
u(this, "enabledModelTagSet", /* @__PURE__ */ new Set());
/** 临时状态 */
u(this, "temporaryState", { visible: !0 });
/** 点标签 */
u(this, "TagContainerSvelte");
/** 加载外部模型 */
u(this, "loadModel", (t) => S(this, null, function* () {
var a;
const e = t.data.modelUrl;
if (!e)
return;
t.loading = !0;
const o = F(e).then((s) => {
var p;
const n = Object.assign(s.scene, {
customID: t.id,
isTagModel: !0,
removeEventListener: this.getTagConfig(t).clickable === !1 ? () => {
} : this.addObjectClickHandler(t, s.scene, (h) => {
this.hooks.emit("click", { target: "TagModel", tag: t, event: h });
})
});
return n.visible = this.getCurrentVisibleState(t), new v().fromArray(t.matrix).decompose(n.position, n.quaternion, n.scale), n.updateWorldMatrix(!0, !0), n.visible = this.getVisible(t), (p = this.getTagConfig(t).modelConfig) != null && p.autoLookAtEnabled && n.lookAt(this.five.camera.position.clone().setY(n.position.y)), n;
});
t.model = { promise: o };
const i = yield o;
if (t.loading = !1, ((a = t.model) == null ? void 0 : a.promise) !== o || !this.tags.includes(t))
return;
t.model.object = i;
const r = this.gltfObjectGroup.children.find((s) => s.customID === t.id);
if (r && (this.gltfObjectGroup.remove(r), r.removeEventListener()), this.updateRender3DDomTag(), D(t)) {
if (this.getRenderType(t) === "Mesh" && !t.mediaPlane) {
const s = t.data.mediaPosition.map(g);
t.mediaPlane = new w(t.data.mediaData[0].url, t.data.mediaPosition.map(g), {
objectFit: t.data.objectFit
});
const n = new b().addVectors(s[0], s[2]).divideScalar(2);
t.mediaPlane.position.copy(n), i.add(t.mediaPlane);
}
this.getRenderType(t) !== "Mesh" && (i.updateTagCss3DObjectMatrix = () => this.updateTagCss3DObjectMatrix(t, i), i.updateTagCss3DObjectMatrix());
}
return this.gltfObjectGroup.add(i), i;
}));
this.group.name = "PanoTagPluginModelGroup", this.gltfObjectGroup.name = "PanoTagPluginGLTFObjectGroup", this.imagePlaneGroup.name = "ImagePlaneGroup", this.group.add(this.gltfObjectGroup), this.group.add(this.imagePlaneGroup);
}
/**
* @description 设置 contentType 的渲染器
* @param {string} contentType
* 如果是 `TagContentType` 中的类型，将会覆盖掉插件内部默认的渲染器,
* 如果是其他任意 str
* ing 如：'Foo'，则可以将类似 `{id: 1, contentType: 'Foo', position: [0,0,0]}` 的 tag 交给插件渲染
* @param config.usePoint 是否需要标签点, 默认为 false
* @note 优先级低于 tag.element
*/
registerRenderer(t, e, o) {
var i;
this.rendererMap.set(t, { renderer: e, usePoint: (i = o == null ? void 0 : o.usePoint) != null ? i : !1 });
}
bindRenderer(t, e) {
this.contentTypeMap.set(t, e);
}
clearTags() {
this.tags.length && (this.tags.forEach((t) => {
var e, o;
(o = (e = t.mediaPlane) == null ? void 0 : e.parent) == null || o.remove(t.mediaPlane);
}), this.tags = [], this.disposeAllCSS3DContainer(), this.updateRenderAllTags()), this.enabledModelTagSet.clear(), this.clearCache();
}
/**
* @description 更新所有标签
*/
updateRenderAllTags() {
this.enabledModelTagSet.clear(), this.tags.forEach((t) => t.stickType === "Model" && this.enabledModelTagSet.add(t.id)), this.updateRenderPointTag(), this.updateRender3DDomTag(), this.updateRenderModelTag(), this.updateRenderImagePlane(), this.updateRenderVideoPlane();
}
updateRenderVideoPlane() {
this.filterImagePlane.filter((e) => {
var o, i;
return ((i = (o = e.data.mediaData) == null ? void 0 : o[0]) == null ? void 0 : i.type) === "Video";
}).forEach((e) => {
var l;
const o = e.data.mediaData[0];
if (!o)
return;
const { url: i } = o;
if (!i)
return;
const r = this.getCurrentVisibleState(e), a = (() => !!(e.mediaPlane && !r))(), s = (() => !!(!e.mediaPlane && r))(), n = (() => !!(e.mediaPlane && e.mediaPlane.src !== i))();
if ((a || n) && e.mediaPlane && (this.imagePlaneGroup.remove(e.mediaPlane), e.mediaPlane.dispose(), e.mediaPlane.removeFromParent(), e.mediaPlane = void 0), s || n) {
const p = e.position.map(g), h = new L(i, p, {
videoCoverSrc: o.videoCoverUrl,
playButton: e.data.playIcon,
paused: !((l = e.data.autoplayConfig) != null && l.autoplayVideo),
objectFit: e.data.objectFit,
videoTextureMap: q,
ImageTextureMap: $,
domEvents: this.domEvents
});
h.onVideoReady = (c) => {
c.addEventListener("play", () => this.mediaStore.set({ currentMediaElement: h.videoInstance }));
};
const f = (c) => (this.five.on("renderFrame", c), () => this.five.off("renderFrame", c));
h.initialRenderHooks(f), e.mediaPlane = h, this.imagePlaneGroup.add(e.mediaPlane);
}
});
}
/**
* @description 渲染图片贴片
*/
updateRenderImagePlane() {
this.filterImagePlane.filter((e) => {
var o, i;
return ((i = (o = e.data.mediaData) == null ? void 0 : o[0]) == null ? void 0 : i.type) === "Image";
}).forEach((e) => {
const { url: o } = e.data.mediaData[0];
if (!o)
return;
const i = e.position.map(g), r = this.getCurrentVisibleState(e), a = (() => !!(e.mediaPlane && !r))(), s = (() => !!(!e.mediaPlane && r))(), n = (() => !!(e.mediaPlane && e.mediaPlane.src !== o))();
(a || n) && e.mediaPlane && (this.imagePlaneGroup.remove(e.mediaPlane), e.mediaPlane.dispose(), e.mediaPlane.removeFromParent(), e.mediaPlane = void 0), (s || n) && (e.mediaPlane = new w(o, i, { objectFit: e.data.objectFit }), this.getTagConfig(e).clickable !== !1 && this.domEvents.addAutoBindEventListener(
e.mediaPlane,
"click",
(l) => {
this.hooks.emit("click", { tag: e, target: "TagContent", event: l.origDomEvent });
},
{ noEmitWhenHide: !0 }
), this.imagePlaneGroup.add(e.mediaPlane));
});
}
/**
* @description 渲染3D贴片
*/
updateRender3DDomTag() {
this.filterCSS3DTag.forEach((e) => {
var o, i, r;
if (e.tag3DContentSvelte) {
const { svelteApp: a, css3DInstance: s, initialNormal: n, currentNormal: l } = e.tag3DContentSvelte;
if (a.$set({ tag: e, hooks: this.hooks, state: this.state, temporaryState: this.temporaryState }), !n.equals(l)) {
const p = new V().setFromUnitVectors(n, l);
s.css3DObject.setRotationFromQuaternion(p);
}
return;
} else {
if (D(e) && !((o = e.model) != null && o.object) || ((i = e.state) == null ? void 0 : i.visible) === !1 || !this.state.visible || !this.state.enabled)
return;
if (this.css3DRenderPlugin || (this.css3DRenderPlugin = G(this.five)), e.stickType === "3DPoint" && !e.normal)
return console.error("updateRenderPlaneTag: 三维点标签缺少法向量！");
const a = this.getPositions(e);
if (!a)
return;
const s = this.getTagNormal(e);
if (!s)
return;
const n = this.getTagConfig(e), l = j({ wrapperStyle: { zIndex: this.calculateTagZIndex(e).toString() } }, n.tag3DConfig);
if (this.getRenderType(e) === "BehindDom" || l.mode === "behind") {
l.mode = "behind", l.container = document.createElement("div");
const f = "black";
l.container.style.backgroundColor = f, l.container.style.border = `3px solid ${f}`, this.css3DRenderPlugin.hooks.on("render", () => {
var c;
if (p.css3DObject.opacityMesh && n.clickable !== !1) {
const P = this.addObjectClickHandler(e, p.css3DObject.opacityMesh, (T) => {
this.hooks.emit("click", { event: T, target: "TagContent", tag: e });
});
(c = this.store.css3DRenderDisposer.get(e.id)) == null || c.push(P);
}
});
}
const p = this.css3DRenderPlugin.create3DDomContainer(a, l);
if (!p)
return;
this.store.css3DRenderDisposer.set(e.id, [p.dispose]);
const h = new x({
target: p.container,
props: {
tag: e,
hooks: this.hooks,
/** 模型标签要等模型加载好之后再展示 */
state: this.state,
mediaStore: this.mediaStore,
temporaryState: this.temporaryState
}
});
e.tag3DContentSvelte = {
svelteApp: h,
domContainer: p,
css3DInstance: p,
initialNormal: s,
currentNormal: s,
dispose: () => {
h.$destroy(), p.dispose();
}
}, D(e) && ((r = e.model) != null && r.object) && this.updateTagCss3DObjectMatrix(e, e.model.object);
}
}), this.clearUnusedPanelTag();
}
/** 更新所有模型标签
*
* 1. 移除不应该在场景中的模型
* 2. 更新模型的可见性
*
* FIXME: 有性能问题，但是之前的逻辑都是这么写，暂时先这样吧
*/
updateRenderModelTag() {
const t = (i) => !this.enabledModelTagSet.has(i.customID), e = this.gltfObjectGroup.children.filter(t);
e.forEach((i) => i.removeEventListener()), this.gltfObjectGroup.remove(...e), this.tags.filter((i) => i.stickType === "Model").forEach((i) => {
var r;
(r = i.model) == null || r.promise.then((a) => {
a.visible = this.getCurrentVisibleState(i);
});
}), this.five.needsRender = !0;
}
updateTagModelVisible() {
this.tags.forEach((t) => {
var o;
const e = this.getCurrentVisibleState(t);
e === !0 && this.getRenderType(t) && !t.tag3DContentSvelte && this.updateRender3DDomTag(), t.mediaPlane ? t.mediaPlane.visible = e : t.tag3DContentSvelte && (t.tag3DContentSvelte.css3DInstance.setVisible(e), this.updateDomView()), (o = t.model) != null && o.object && (t.model.object.visible = e);
});
}
/** 更新标签中多媒体面片的位置
* @param tag 标签
* @param model 模型
*/
updateTagCss3DObjectMatrix(t, e) {
var P, T, M;
const o = (T = (P = this.getTagConfig(t).tag3DConfig) == null ? void 0 : P.ratio) != null ? T : 216e-5, i = (M = t.tag3DContentSvelte) == null ? void 0 : M.css3DInstance.css3DObject;
if (!i)
return;
const r = D(t) ? t.data.mediaPosition : t.position;
if (!r || r.length !== 4 || !Array.isArray(r[0]) || !Array.isArray(r[2]))
return;
e.updateWorldMatrix(!1, !1);
const a = e.matrixWorld, s = new b().fromArray(r[0]), n = new b().fromArray(r[2]), l = W(s, n).add(new b(0, 0, 5e-4)), p = new v().setPosition(l), h = new v().makeScale(o, o, o), f = new v().multiply(a).multiply(p).multiply(h);
f.decompose(i.position, i.quaternion, i.scale);
const c = i.opacityMesh;
c && f.decompose(c.position, c.quaternion, c.scale);
}
/** 添加模型标签 */
addMediaModelTag(t) {
return S(this, null, function* () {
const e = t.filter(_).map((o) => this.loadModel(o));
yield Promise.all(e), this.setVisible(), this.updateRenderAllTags();
});
}
/**
* @description 一个点的标签
*/
setPointTagPosition() {
const t = this.filterPointTag;
t.length !== 0 && t.forEach((e) => {
var a;
const o = this.getCurrentVisibleState(e), i = (a = e.__Object__) != null ? a : {
timeoutId: void 0,
inAnimation: !1
};
if (e.__Object__ = i, !o && e.screenPosition ? (i.inAnimation = !0, i.timeoutId = setTimeout(() => {
requestAnimationFrame(() => {
this.getCurrentVisibleState(e) || (i.inAnimation = !1, e.screenPosition = null, this.updateDomView());
});
}, 1e3)) : i.timeoutId && (clearTimeout(i.timeoutId), i.inAnimation = !1, i.timeoutId = void 0), !o && !i.inAnimation)
return;
const r = this.getTagProject(e);
r ? e.screenPosition = { leftPercent: (r.x + 1) / 2 * 100, topPercent: (-r.y + 1) / 2 * 100 } : e.screenPosition = null;
});
}
/**
* @description 渲染单个点的标签
*/
updateRenderPointTag() {
const t = this.filterPointTag;
this.setTagZIndex(t), this.setPointTagPosition(), this.updateDomView();
}
updatePointTagPosition() {
this.setPointTagPosition(), this.updateDomView();
}
updateTagContainerVisible() {
var t;
(t = this.TagContainerSvelte) == null || t.$set({
state: this.state,
temporaryState: this.temporaryState,
withAnimation: this.store.visibleWithAnimation
}), this.filterCSS3DTag.forEach((e) => {
var o, i, r, a, s;
(a = (i = (o = e.tag3DContentSvelte) == null ? void 0 : o.css3DInstance) == null ? void 0 : i.css3DObject) == null || a.setVisible((this.state.visible && ((r = e.state) == null ? void 0 : r.visible)) !== !1), (s = e.tag3DContentSvelte) == null || s.svelteApp.$set({
state: this.state,
temporaryState: this.temporaryState,
withAnimation: this.store.visibleWithAnimation
});
});
}
disposeAllCSS3DContainer() {
for (const [, t] of this.store.css3DRenderDisposer)
t == null || t.forEach((e) => e == null ? void 0 : e());
this.store.css3DRenderDisposer = /* @__PURE__ */ new Map();
}
/**
* @description 检查并销毁不用的3D贴片
*/
clearUnusedPanelTag() {
this.filter2DPointTag.forEach((t) => {
var e;
(e = t.tag3DContentSvelte) == null || e.css3DInstance.dispose(), t.tag3DContentSvelte = void 0;
});
for (const [t, e] of this.store.css3DRenderDisposer) {
const o = this.getTagById(t);
(!o || o.stickType === "2DPoint") && (e == null || e.forEach((i) => i == null ? void 0 : i()), this.store.css3DRenderDisposer.delete(t));
}
}
updateDomView(t = {}) {
var o, i;
const e = this.filterPointTag.filter((r) => r.state.visible);
if (this.TagContainerSvelte)
this.TagContainerSvelte.$set({ tags: e, state: this.state, temporaryState: this.temporaryState });
else {
const r = (o = this.five.getElement()) == null ? void 0 : o.parentElement;
if (!r)
return console.error("updateRenderPlaneTag: tag2DContainer not found");
this.TagContainerSvelte = new O({
target: r,
props: {
hooks: this.hooks,
tags: e,
state: this.state,
temporaryState: this.temporaryState,
mediaStore: this.mediaStore,
rendererMap: this.rendererMap,
contentTypeMap: this.contentTypeMap,
withAnimation: (i = t == null ? void 0 : t.withAnimation) != null ? i : this.store.visibleWithAnimation
}
});
}
}
}
export {
Ti as TagRender
};