@realsee/dnalogel
Version:
116 lines (115 loc) • 5.78 kB
JavaScript
var p = Object.defineProperty;
var P = (s, t, e) => t in s ? p(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
var a = (s, t, e) => (P(s, typeof t != "symbol" ? t + "" : t, e), e);
import w from "hammerjs";
import * as v from "three";
import { Subscribe as D } from "@realsee/five";
function l(s, t, e) {
const n = s[t], i = s[e];
n === void 0 || i === void 0 || (s[t] = i, s[e] = n);
}
function C(s, t, e) {
const n = e / 2;
for (let i = 1; i <= n; i++) {
const h = e - (i - 1);
for (let r = 1; r <= t; r++) {
const o = (i - 1) * t + r - 1, c = (h - 1) * t + r - 1;
l(s, o * 4 + 0, c * 4 + 0), l(s, o * 4 + 1, c * 4 + 1), l(s, o * 4 + 2, c * 4 + 2), l(s, o * 4 + 3, c * 4 + 3);
}
}
}
class H {
constructor(t, e) {
a(this, "width");
a(this, "height");
a(this, "containerDom");
a(this, "hooks", new D());
a(this, "canvas", document.createElement("canvas"));
a(this, "five");
a(this, "scale");
a(this, "config");
a(this, "offset", { x: 0, y: 0 });
a(this, "context");
a(this, "renderCenter", new v.Vector3());
a(this, "hammer");
a(this, "state", { enabled: !1 });
a(this, "onPan", (t) => {
if (!this.containerDom || this.hooks.emit("wantsPanGesture", t))
return;
const n = this.offset.x + t.deltaX, i = this.offset.y + t.deltaY;
this.canvas.style.boxShadow = "0 2px 30px 0 rgba(0,0,0,0.20)", this.canvas.style.transform = `translate3d(${n}px, ${i}px, 100px)`;
});
a(this, "onPanEnd", (t) => {
this.offset = { x: this.offset.x + t.deltaX, y: this.offset.y + t.deltaY }, this.canvas.style.boxShadow = "none";
});
var i, h, r;
if (!t.renderer)
throw new Error("Five Render 未初始化");
this.five = t, this.scale = (i = e == null ? void 0 : e.scale) != null ? i : 2, this.width = (h = e == null ? void 0 : e.width) != null ? h : 190, this.height = (r = e == null ? void 0 : e.height) != null ? r : 190, this.config = {
dragEnabled: (e == null ? void 0 : e.dragEnabled) || !1,
autoFixPCPosition: (e == null ? void 0 : e.autoFixPCPosition) || !1,
initialPosition: (e == null ? void 0 : e.initialPosition) || { left: "0", top: "0" }
};
const n = this.canvas.getContext("2d");
if (!n)
throw new Error("CANNOT CREATE CONTEXT2D");
this.context = n, this.config.dragEnabled && (this.hammer = new w(this.canvas), this.hammer.on("pan", this.onPan), this.hammer.on("panend", this.onPanEnd)), this.initStyle();
}
getCurrentState() {
return this.state;
}
dispose() {
var t;
this.clear(), this.disable(), (t = this.hammer) == null || t.destroy();
}
show() {
return this.canvas.style.visibility = "visible", this;
}
hide() {
return this.canvas.style.visibility = "hidden", this;
}
enable() {
var t;
if (!this.state.enabled)
return this.state.enabled = !0, (t = this.containerDom) == null || t.append(this.canvas), this;
}
disable() {
if (this.state.enabled)
return this.state.enabled = !1, this.canvas.remove(), this;
}
/** 把放大镜放到某一个容器中 */
appendTo(t) {
return this.containerDom && Array.from(this.containerDom.children).includes(this.canvas) && this.containerDom.removeChild(this.canvas), this.containerDom = t, this.state.enabled && t.append(this.canvas), this;
}
/** 清除放大镜渲染内容 */
clear() {
return this.context.clearRect(0, 0, this.canvas.width, this.canvas.height), this;
}
/** 放大传入点位周围的内容 */
renderWithPoint(t) {
this.containerDom && this.state.enabled && (this.renderCenter = t, this.render(), this.config.autoFixPCPosition && this.autoFixPCPosition());
}
autoFixPCPosition() {
if (!this.containerDom)
return;
const { width: t, height: e } = this, n = this.renderCenter.clone().project(this.five.camera), i = (n.x + 1) / 2 * this.containerDom.clientWidth, h = -(n.x - 1) / 2 * this.containerDom.clientWidth, r = -(n.y - 1) / 2 * this.containerDom.clientHeight;
i < 183 ? (this.canvas.style.top = -e / 2 + "px", this.canvas.style.left = "90px") : r < 183 ? (this.canvas.style.top = "90px", this.canvas.style.left = -t / 2 + "px") : h < 183 ? (this.canvas.style.top = -e / 2 + "px", this.canvas.style.left = -t - 90 + "px") : (this.canvas.style.left = -t / 2 + "px", this.canvas.style.top = -e - 90 + "px"), this.canvas.style.transform = `translate3d(${i}px, ${r}px, 10px)`, this.offset = { x: i, y: r };
}
render() {
if (!this.five.renderer || !this.containerDom)
return;
const { scale: t, context: e, width: n, height: i } = this, h = this.renderCenter.clone().project(this.five.camera), r = this.five.renderer.getSize(new v.Vector2()), o = 1, c = n / t, g = i / t, u = o * t, y = (h.x + 1) / 2 * r.x, b = (h.y + 1) / 2 * r.y, d = this.five.getPixels(y - c / 2, b - c / 2, c, g, u), f = Math.floor(n * o), x = Math.floor(i * o);
C(d, f, x);
const m = new ImageData(f, x);
m.data.set(d), e.putImageData(m, 0, 0);
}
initStyle() {
const t = this.canvas;
t.classList.add("five-plugin__magnifier"), t.style.position = "absolute", t.style.pointerEvents = "all", t.style.borderRadius = "50%", t.style.zIndex = "99";
const e = 1;
t.setAttribute("width", (this.width * e).toString()), t.setAttribute("height", (this.height * e).toString()), t.style.border = "2px solid rgba(255,255,255,0.20)", t.style.width = this.width + "px", t.style.height = this.height + "px", t.style.top = this.config.initialPosition.top, t.style.left = this.config.initialPosition.left, t.style.transform = "translate(0,0,100px)", t.style.visibility = "visible", this.config.dragEnabled && (this.canvas.style.cursor = "pointer");
}
}
export {
H as Magnifier
};