@realsee/dnalogel
Version:
502 lines (501 loc) • 23.1 kB
JavaScript
var k = Object.defineProperty;
var R = Object.getOwnPropertySymbols;
var V = Object.prototype.hasOwnProperty, I = Object.prototype.propertyIsEnumerable;
var C = (c, l, t) => l in c ? k(c, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[l] = t, j = (c, l) => {
for (var t in l || (l = {}))
V.call(l, t) && C(c, t, l[t]);
if (R)
for (var t of R(l))
I.call(l, t) && C(c, t, l[t]);
return c;
};
var h = (c, l, t) => (C(c, typeof l != "symbol" ? l + "" : l, t), t);
var S = (c, l, 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(c, l)).next());
});
import { TagComputer as E } from "./TagComputer.js";
import { Group as y, Quaternion as O, Vector3 as b, Matrix4 as v } from "three";
import x from "../Components/TagContainer.js";
import G from "../Components/Tag/index.js";
import { CSS3DRenderPlugin as F } from "../../CSS3DRenderPlugin/index.js";
import { loadGLTF as _ } from "../../shared-utils/three/GLTFLoader.js";
import { isMediaModelTag as D, isStickModelTag as L } from "../utils/tag/tagCheck.js";
import { VideoPlane as w, ImagePlane as A } from "../utils/model/mediaPlane.js";
import { centerPoint as q } 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 "../../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 "animejs";
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 W = /* @__PURE__ */ new Map(), $ = /* @__PURE__ */ new Map();
class Ti extends E {
constructor(t) {
super(t);
h(this, "rendererMap", /* @__PURE__ */ new Map());
h(this, "contentTypeMap", /* @__PURE__ */ new Map());
h(this, "group", new y());
h(this, "imagePlaneGroup", new y());
h(this, "gltfObjectGroup", new y());
/** 维护一个可用模型表，用于快速删除不应该在场景中的模型 */
h(this, "enabledModelTagSet", /* @__PURE__ */ new Set());
/** 临时状态 */
h(this, "temporaryState", { visible: !0 });
/** 点标签 */
h(this, "TagContainerSvelte");
/** 加载外部模型 */
h(this, "loadModel", (t) => S(this, null, function* () {
var a;
const e = t.data.modelUrl;
if (!e)
return;
t.loading = !0;
const o = _(e).then((s) => {
var m;
const n = Object.assign(s.scene, {
customID: t.id,
isTagModel: !0,
removeEventListener: this.getTagConfig(t).clickable === !1 ? () => {
} : this.addObjectClickHandler(t, s.scene, (u) => {
this.hooks.emit("click", { target: "TagModel", tag: t, event: u });
})
});
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), (m = this.getTagConfig(t).modelConfig) != null && m.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 A(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.forEach((t) => {
var e, o;
(o = (e = t.mediaPlane) == null ? void 0 : e.parent) == null || o.remove(t.mediaPlane);
}), this.tags = [], this.enabledModelTagSet.clear(), this.clearCache(), this.disposeAllCSS3DContainer(), this.updateRenderAllTags();
}
/**
* @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 m, u, P;
const o = e.data.mediaData[0];
if (!o)
return;
const { url: i } = o;
if (!i)
return;
e.mediaPlane && !((u = (m = e.state) == null ? void 0 : m.visible) == null || u) && e.mediaPlane instanceof w && e.mediaPlane.pause();
const r = e.position.map(g), a = this.getCurrentVisibleState(e), s = (() => !!(e.mediaPlane && !a))(), n = (() => !!(!e.mediaPlane && a))(), p = (() => !!(e.mediaPlane && e.mediaPlane.src !== i))();
if ((s || p) && e.mediaPlane && (this.imagePlaneGroup.remove(e.mediaPlane), e.mediaPlane.dispose(), e.mediaPlane.removeFromParent(), e.mediaPlane = void 0), n || p) {
const d = new w(i, r, {
videoCoverSrc: o.videoCoverUrl,
playButton: e.data.playIcon,
paused: !((P = e.data.autoplayConfig) != null && P.autoplayVideo),
objectFit: e.data.objectFit,
videoTextureMap: W,
ImageTextureMap: $,
domEvents: this.domEvents
});
d.onVideoReady = (f) => {
f.addEventListener("play", () => this.mediaStore.set({ currentMediaElement: d.videoInstance }));
};
const T = (f) => (this.five.on("renderFrame", f), () => this.five.off("renderFrame", f));
d.initialRenderHooks(T), e.mediaPlane = d, 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 A(o, i, { objectFit: e.data.objectFit }), this.getTagConfig(e).clickable !== !1 && this.domEvents.addAutoBindEventListener(e.mediaPlane, "click", (p) => {
this.hooks.emit("click", { tag: e, target: "TagContent", event: p.origDomEvent });
}), 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: p } = e.tag3DContentSvelte;
if (a.$set({ tag: e, hooks: this.hooks, state: this.state, temporaryState: this.temporaryState }), !n.equals(p)) {
const m = new O().setFromUnitVectors(n, p);
s.css3DObject.setRotationFromQuaternion(m);
}
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 = F(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), p = j({ wrapperStyle: { zIndex: this.calculateTagZIndex(e).toString() } }, n.tag3DConfig);
if (this.getRenderType(e) === "BehindDom" || p.mode === "behind") {
p.mode = "behind", p.container = document.createElement("div");
const P = "black";
p.container.style.backgroundColor = P, p.container.style.border = `3px solid ${P}`, this.css3DRenderPlugin.hooks.on("render", () => {
var d;
if (m.css3DObject.opacityMesh && n.clickable !== !1) {
const T = this.addObjectClickHandler(e, m.css3DObject.opacityMesh, (f) => {
this.hooks.emit("click", { event: f, target: "TagContent", tag: e });
});
(d = this.store.css3DRenderDisposer.get(e.id)) == null || d.push(T);
}
});
}
const m = this.css3DRenderPlugin.create3DDomContainer(a, p);
if (!m)
return;
this.store.css3DRenderDisposer.set(e.id, [m.dispose]);
const u = new G({
target: m.container,
props: {
tag: e,
hooks: this.hooks,
/** 模型标签要等模型加载好之后再展示 */
state: this.state,
mediaStore: this.mediaStore,
temporaryState: this.temporaryState
}
});
e.tag3DContentSvelte = {
svelteApp: u,
domContainer: m,
css3DInstance: m,
initialNormal: s,
currentNormal: s,
dispose: () => {
u.$destroy(), m.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 T, f, M;
const o = (f = (T = this.getTagConfig(t).tag3DConfig) == null ? void 0 : T.ratio) != null ? f : 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]), p = q(s, n).add(new b(0, 0, 5e-4)), m = new v().setPosition(p), u = new v().makeScale(o, o, o), P = new v().multiply(a).multiply(m).multiply(u);
P.decompose(i.position, i.quaternion, i.scale);
const d = i.opacityMesh;
d && P.decompose(d.position, d.quaternion, d.scale);
}
/** 添加模型标签 */
addMediaModelTag(t) {
return S(this, null, function* () {
const e = t.filter(L).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;
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 x({
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
};