@realsee/dnalogel
Version:
148 lines (147 loc) • 8.16 kB
JavaScript
var b = Object.defineProperty;
var S = (n, s, e) => s in n ? b(n, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[s] = e;
var t = (n, s, e) => (S(n, typeof s != "symbol" ? s + "" : s, e), e);
import { Model as y } from "../Model/index.js";
import D from "../Model/line.js";
import T from "./BaseController.js";
import M from "../Modules/DeleteDom/index.js";
import { Vector2 as m } from "three";
import v from "../utils/isNDCPointInScreen.js";
import { closestPointOnLine as G } from "../utils/math.js";
import { Polyline as L } from "../Model/polyline.js";
import W from "../Modules/rangePiece/index.js";
import "@realsee/five";
import "../../shared-utils/uuid.js";
import "../utils/line.js";
import "@realsee/five/line";
import "../utils/constants.js";
import "../utils/dom/distanceItem.js";
import "../utils/dom/base.js";
import "../../shared-utils/three/centerPoint.js";
import "../Model/point.js";
import "../utils/ironbox.js";
import "../Modules/DeleteDom/_Assets/delete.svg.js";
import "../Modules/DeleteDom/_Assets/delete_bg.png.js";
import "../Modules/DeleteDom/_Assets/delete_hover_bg.png.js";
import "../../vendor/@tweenjs/tween/dist/tween.esm.js.js";
import "../Modules/rangePiece/html.js";
import "../../shared-utils/animationFrame/index.js";
import "../../shared-utils/noop.js";
import "../utils/calculateThreeMouse.js";
import "../utils/mouseGroup.js";
class re extends T {
constructor(e) {
super(e);
t(this, "state", "watching");
t(this, "polyline");
t(this, "hasAppendDashed", !1);
t(this, "mobileStartPoint", null);
t(this, "mobileNowPoint", null);
t(this, "highlightedLines", []);
t(this, "deleteDom");
t(this, "rangePieceController");
t(this, "disposers", []);
t(this, "onWantsTapGesture", (e) => {
if (this.state === "editing")
return !1;
const [i] = this.five.model.intersectRaycaster(e);
if (!i)
return;
const h = this.five.camera, p = i.point.clone().project(h), a = this.container.clientWidth, l = this.container.clientHeight, g = new m(p.x * a, p.y * l), f = this.model.getAllLines().map((o) => {
const [r, C] = o.points, d = r.position.clone().project(h), c = C.position.clone().project(h);
if (!v(d) && !v(c))
return null;
const w = new m(d.x * a, d.y * l), k = new m(c.x * a, c.y * l);
return { id: o.id, points: [w, k] };
}).filter((o) => !!o);
if (f.length === 0)
return;
const u = f.map((o) => {
const r = G(g, o.points);
return { id: o.id, distance: r.distanceTo(g) };
}).sort((o, r) => o.distance - r.distance)[0];
if (u.distance > 20)
return;
const P = this.model.getAllLines().find(({ id: o }) => o === u.id);
if (P)
return this.chooseLine(P), !1;
});
/** 编辑时取消走点,watch时可以走 */
t(this, "onWantsToMoveToPano", () => this.state === "watching");
/** 移动全景时更新 distanceItem 在屏幕上的位置 */
t(this, "onCameraUpdate", () => {
this.updateDistanceUI(), this.dashed.distanceItem.update(this.five);
});
/** mobile态时更新虚线 */
t(this, "updateMobileDashed", () => {
!this.mobileStartPoint || !this.mobileNowPoint || (this.dashed.setPoints(this.mobileStartPoint.position, this.mobileNowPoint.position), this.dashed.distanceItem.update(this.five), this.hook.emit("editedDashedLineChange", this.dashed));
});
/** mobile态时更新放大镜 */
t(this, "updateMagnifier", (e) => {
this.magnifier.containerDom !== this.container && this.magnifier.appendTo(this.container), this.magnifier.getCurrentState().enabled || this.magnifier.enable(), requestAnimationFrame(() => this.magnifier.renderWithPoint(e.position)), this.five.needsRender = !0;
});
t(this, "onGetStartPoint", (e) => {
this.mobileStartPoint = e, this.polyline = new L({ model: this.model }), this.polyline.hook.on("lineAdded", () => this.hook.emit("editedPolylineChange", this.polyline)), this.polyline.hook.on("lineRemoved", () => this.hook.emit("editedPolylineChange", this.polyline));
});
t(this, "onGetEndPoint", () => {
const e = this.mobileNowPoint;
if (this.removeLine(this.dashed), this.hasAppendDashed = !1, this.mobileStartPoint && e) {
const i = new D(this.mobileStartPoint, e, this.model);
this.polyline.addLine(i), i.distanceItem.appendTo(this.container), i.distanceItem.update(this.five), i.hook.on("selected", this.chooseLine), this.disposers.push(() => i.hook.off("selected", this.chooseLine)), this.group.add(i.mesh), this.model.addPolyline(this.polyline);
}
this.mobileStartPoint = null, this.mobileNowPoint = null, this.five.needsRender = !0;
});
t(this, "onNowPointChange", (e) => {
if (this.state === "watching") {
this.mobileNowPoint = e, this.updateMagnifier(e);
return;
}
this.hasAppendDashed || (this.dashed.distanceItem.appendTo(this.container), this.group.add(this.dashed.mesh), this.hasAppendDashed = !0), this.five.needsRender = !0, this.mobileNowPoint = e, this.updateMobileDashed(), this.updateMagnifier(e), this.five.needsRender = !0;
});
t(this, "onWillChangeState", (e, i) => {
this.state = i, this.state === "watching" ? this.five.helperVisible = !0 : this.five.helperVisible = !1;
});
t(this, "chooseLine", (e) => {
const i = e.getPolyline().lines;
this.highlightLines(i), this.five.needsRender = !0, this.hook.emit(
"selectedChange",
i.map((h) => h)
);
});
t(this, "deleteDomClickCallback", () => {
this.highlightedLines.forEach((e) => {
this.removeLine(e);
const i = this.model.getPolylineByLine(e);
this.model.removePolyline(i);
}), this.highlightedLines = [], this.deleteDom.setLines([]).hide();
});
t(this, "cancelDeleteClickCallback", () => {
this.clearHighlightLines();
});
this.model = new y(this.config), this.polyline = new L({ model: this.model }), this.rangePieceController = new W(e), this.deleteDom = new M(this.five, {
i18n: this.config.i18n,
onClick: this.deleteDomClickCallback,
cancel: this.cancelDeleteClickCallback
}).appendTo(this.container), this.five.on("cameraUpdate", this.onCameraUpdate), this.five.on("wantsTapGesture", this.onWantsTapGesture), this.five.on("wantsToMoveToPano", this.onWantsToMoveToPano), this.five.helperVisible = !1, this.hook.emit("editedDashedLineChange", null), this.hook.on("getStartPoint", this.onGetStartPoint), this.hook.on("getEndPoint", this.onGetEndPoint), this.hook.on("nowPointChange", this.onNowPointChange), this.hook.on("willChangeState", this.onWillChangeState), this.five.refresh();
}
dispose() {
super.dispose(), this.disposers.forEach((e) => e()), this.five.helperVisible = !0, this.rangePieceController.dispose(), this.group.remove(this.mouseGroup), this.dashed.remove(), this.perpendicularDashed.remove(), this.five.off("cameraUpdate", this.onCameraUpdate), this.five.off("wantsTapGesture", this.onWantsTapGesture), this.five.off("wantsToMoveToPano", this.onWantsToMoveToPano), this.hook.off("getStartPoint", this.onGetStartPoint), this.hook.off("getEndPoint", this.onGetEndPoint), this.hook.off("nowPointChange", this.onNowPointChange), this.hook.off("willChangeState", this.onWillChangeState), this.hook.emit("selectedChange", []), this.five.needsRender = !0;
}
highlightLine(e) {
e.selected || (e.selected = !0, this.group.add(e.lightMesh), e.distanceItem.highlight(), this.five.needsRender = !0);
}
clearHighlightLines() {
this.group.children.length !== 0 && (this.deleteDom.setLines([]).hide(), this.model.getAllLines().forEach((e) => {
e.selected = !1, e.distanceItem.unHighlight(), this.group.remove(e.lightMesh);
}), this.highlightedLines = [], this.five.needsRender = !0);
}
getEditingLines() {
return this.model.polylines;
}
highlightLines(e) {
this.clearHighlightLines(), this.highlightedLines = e, this.deleteDom.setLines(e).updatePosition().show(), e.forEach((i) => this.highlightLine(i));
}
}
export {
re as default
};