@realsee/dnalogel
Version:
228 lines (227 loc) • 11 kB
JavaScript
var H = Object.defineProperty;
var k = (l, r, t) => r in l ? H(l, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[r] = t;
var s = (l, r, t) => (k(l, typeof r != "symbol" ? r + "" : r, t), t);
import I from "hammerjs";
import R from "../Modules/DeleteDom/index.js";
import S from "../utils/isNDCPointInScreen.js";
import G from "./BaseController.js";
import { Raycaster as T, Vector2 as u } from "three";
import { closestPointOnLine as U } from "../utils/math.js";
import { findClosestPoint as b } from "../utils/findClosestPoint.js";
import { getPointFromHammerEvent as w } from "../../shared-utils/getPointFromHammerEvent.js";
import M from "../Model/area.js";
import j from "../Model/polygon.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 "../Model/line.js";
import "../../shared-utils/uuid.js";
import "../utils/line.js";
import "@realsee/five/line";
import "../utils/constants.js";
import "@realsee/five";
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 "../utils/ndc2Screen.js";
import "../Model/polyline.js";
import "../utils/dom/areaDom.js";
import "../utils/geometryUtil.js";
import "../../vendor/@tweenjs/tween/dist/tween.esm.js.js";
import "../../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
import "../../shared-utils/positionToVector3.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 "../../shared-utils/three/IObject3D.js";
import "../utils/generatePolygonGeometry.js";
import "earcut";
const C = () => !1;
class Ut extends G {
constructor(t) {
super(t);
s(this, "type", "watch");
s(this, "deleteDom");
s(this, "choose");
// tmd 真没时间改了，先这样吧，理解万岁
s(this, "highlightedLines", []);
s(this, "highlightedArea");
s(this, "fiveElement");
s(this, "editPointState");
s(this, "hammer");
s(this, "onPanStart", (t) => {
var d;
if (this.model.getAllLines().length === 0 || !this.fiveElement)
return;
const i = w(t).point, e = (d = b(this.five, this.model.getAllPoints(), i, 20)) == null ? void 0 : d.point;
if (!e) {
this.editPointState = void 0;
return;
}
const n = this.model.polylines.find((c) => c.includes(e)), a = {
point: e,
associatedLines: n.lines
};
this.hook.emit("wantsDragLine", {
point: e.id,
lines: a.associatedLines.map(({ id: c }) => c)
}) || (this.editPointState = a, this.magnifier.appendTo(this.container), this.magnifier.enable(), this.group.add(this.mouseGroup));
});
s(this, "onPanEnd", () => {
this.editPointState && (this.editPointState.associatedLines.forEach((t) => t.mesh.setMaterial({ dashed: !1 })), this.highlightLines(this.editPointState.associatedLines), this.editPointState = void 0, this.magnifier.disable(), this.group.remove(this.mouseGroup));
});
s(this, "onPan", (t) => {
if (!this.editPointState || !this.fiveElement)
return;
const i = w(t).ndcPoint, e = new T();
e.setFromCamera(i, this.five.camera);
const [n] = this.five.model.intersectRaycaster(e);
n && this.onIntersectionUpdate(n);
});
s(this, "onIntersectionUpdate", (t, i) => {
if (this.editPointState) {
if (this.clearHighlightLines(), this.editPointState.point.position.copy(t.point), this.editPointState.associatedLines.forEach((e) => {
e.mesh.setPoints(e.points[0].position.clone(), e.points[1].position.clone()), e.lightMesh.setPoints(e.points[0].position.clone(), e.points[1].position.clone()), e.mesh.setMaterial({ dashed: !0 });
}), this.updateDistanceUI(), this.magnifier.renderWithPoint(t.point), this.mouseGroup.position.copy(t.point), i)
this.mouseGroup.quaternion.copy(i.quaternion);
else if (t.face) {
const n = t.face.normal.clone().multiplyScalar(0.05), p = t.point.clone().add(n).clone().add(n);
this.mouseGroup.lookAt(p);
}
this.five.needsRender = !0, this.hook.emit(
"selectedChange",
this.editPointState.associatedLines.map((e) => e)
);
}
});
s(this, "wantsPanGesture", () => {
if (this.editPointState)
return !1;
});
s(this, "wantsTapGesture", (t) => {
var A;
const i = this.model.areas.map((o) => t.intersectObject(o.polygon, !0)[0]).sort((o, h) => o.distance - h.distance), e = (A = i[0]) == null ? void 0 : A.object.parent;
if (e instanceof j) {
const o = this.model.areas.find((h) => h.polygon === e);
if (o) {
const { x: h, y: f } = i[0].point.clone().project(this.five.camera), m = `${(h + 1) / 2 * 100}%`, g = `${(-f + 1) / 2 * 100}%`;
return this.chooseArea(o, { left: m, top: g }), !1;
}
}
const [n] = this.five.model.intersectRaycaster(t);
if (!n)
return;
const a = this.five.camera, p = n.point.clone().project(a), d = this.container.clientWidth, c = this.container.clientHeight, L = new u(p.x * d, p.y * c), P = this.model.getAllLines().map((o) => {
const [h, f] = o.points, m = h.position.clone().project(a), g = f.position.clone().project(a);
if (!S(m) && !S(g))
return null;
const D = new u(m.x * d, m.y * c), E = new u(g.x * d, g.y * c);
return { id: o.id, points: [D, E] };
}).filter((o) => !!o);
if (P.length === 0)
return;
const v = P.map((o) => {
const h = U(L, o.points);
return { id: o.id, distance: h.distanceTo(L) };
}).sort((o, h) => o.distance - h.distance)[0];
if (v.distance > 20)
return;
const y = this.model.getAllLines().find(({ id: o }) => o === v.id);
if (y)
return this.chooseLine(y), !1;
});
s(this, "chooseLine", (t) => {
this.choose = "line";
const i = t.getPolyline().lines;
this.deleteDom.setLines(i).updatePosition().show(), this.highlightLines(i), this.five.needsRender = !0, this.hook.emit(
"selectedChange",
i.map((e) => e)
);
});
s(this, "chooseArea", (t, i) => {
this.choose = t, this.deleteDom.updatePosition(i.left, `calc(${i.top} - 20px)`).show(), this.highlightArea(t);
});
s(this, "polylineRemoved", (t) => {
t.lines.forEach((i) => this.removeLine(i)), this.hook.emit(
"selectedChange",
this.model.getAllLines().filter((i) => i.selected).map((i) => i)
);
});
s(this, "onCameraUpdate", () => {
this.updateDistanceUI(), this.highlightedLines.length > 0 && this.deleteDom.updatePosition();
});
s(this, "deleteArea", (t) => {
this.unHighlightArea(t), t.dispose(), this.deleteDom.hide();
});
s(this, "deleteLine", () => {
const t = this.highlightedLines[0], i = this.model.getPolylineByLine(t);
i && (this.model.removePolyline(i), this.highlightedLines = [], this.deleteDom.setLines([]).hide());
});
s(this, "cancelDeleteClickCallback", () => {
this.deleteDom.hide(), this.clearHighlightLines(), this.unHighlightArea();
});
this.deleteDom = new R(this.five, {
i18n: this.config.i18n,
onClick: () => {
this.choose === "line" ? this.deleteLine() : this.choose instanceof M && this.deleteArea(this.choose);
},
cancel: this.cancelDeleteClickCallback
}).appendTo(this.container), this.model.getAllLines().forEach((e) => {
e.distanceItem.appendTo(this.container), e.distanceItem.update(this.five), e.hook.on("selected", this.chooseLine), e.distanceItem.setCanSelect(!0), this.group.add(e.mesh);
}), this.model.getAllAreas().forEach((e) => {
e.areaItem.appendTo(this.container), e.areaItem.updateArea(this.five), e.hook.on("selected", this.chooseArea), e.areaItem.setCanSelect(!0), this.group.add(e.polygon), e.polyline.lines.forEach((n) => {
n.distanceItem.appendTo(this.container), n.distanceItem.update(this.five), this.group.add(n.mesh);
});
});
const i = this.five.getElement();
if (i) {
this.fiveElement = i;
const e = new I(i);
this.hammer = e, e.on("pan", this.onPan), e.on("panstart", this.onPanStart), e.on("panend", this.onPanEnd);
}
this.updateDistanceUI(), this.five.needsRender = !0, this.five.on("cameraUpdate", this.onCameraUpdate), this.five.on("wantsTapGesture", this.wantsTapGesture), this.five.on("wantsPanGesture", this.wantsPanGesture), this.five.on("wantsChangeMode", C), this.model.hook.on("polylineRemoved", this.polylineRemoved);
}
dispose() {
var t;
super.dispose(), this.deleteDom.dispose(), this.model.hook.off("polylineRemoved", this.polylineRemoved), this.model.getAllLines().forEach((i) => i.hook.off("selected", this.chooseLine)), this.five.off("cameraUpdate", this.onCameraUpdate), this.five.off("wantsPanGesture", this.wantsPanGesture), this.five.off("wantsTapGesture", this.wantsTapGesture), this.five.off("wantsChangeMode", C), this.five.needsRender = !0, this.hook.emit("selectedChange", []), (t = this.hammer) == null || t.destroy();
}
highlightLine(t) {
t.selected || (t.selected = !0, this.group.add(t.lightMesh), t.distanceItem.highlight(), this.five.needsRender = !0);
}
clearHighlightLines() {
this.group.children.length !== 0 && (this.unHighlightLines(this.highlightedLines), this.highlightedLines = []);
}
highlightArea(t) {
this.unHighlightLines(), this.unHighlightArea(), this.highlightLines(t.polyline.lines), this.five.needsRender = !0;
}
unHighlightArea(t) {
const i = t != null ? t : this.highlightedArea;
i && (this.unHighlightLines(i.polyline.lines), this.five.needsRender = !0);
}
highlightLines(t) {
this.unHighlightLines(), this.highlightedLines = t, t.forEach((i) => this.highlightLine(i));
}
unHighlightLines(t) {
this.unHighlightArea();
const i = t != null ? t : this.highlightedLines;
i && i.forEach((e) => {
e.selected = !1, e.distanceItem.unHighlight(), this.group.remove(e.lightMesh), this.five.needsRender = !0;
});
}
}
export {
Ut as default
};