@realsee/dnalogel
Version:
73 lines (72 loc) • 2.03 kB
TypeScript
import type { Five } from '@realsee/five';
import Hammer from 'hammerjs';
import * as THREE from 'three';
import { Subscribe, type SubscribeEventMap } from '@realsee/five';
interface MagnifierEvent extends SubscribeEventMap {
wantsPanGesture: (event: (typeof Hammer)['Input']) => boolean;
}
/** 放大镜配置参数 */
export interface MagnifierParameter {
width?: number;
height?: number;
scale?: number;
/** 允许拖动放大镜 */
dragEnabled?: boolean;
/** renderWithPoint 时，是否应该自动更新放大镜的位置 */
autoFixPCPosition?: boolean;
/** 放大镜初始位置应该设置在容器的哪个位置 */
initialPosition?: {
left: string;
top: string;
};
}
export interface MagnifierState {
enabled: boolean;
}
export default class Magnifier {
width: number;
height: number;
containerDom?: Element;
hooks: Subscribe<MagnifierEvent>;
canvas: HTMLCanvasElement;
private five;
private scale;
private config;
private offset;
private context;
private renderCenter;
private hammer?;
private state;
private offsetRange?;
private isPanning;
constructor(five: Five, options: MagnifierParameter);
dispose(): void;
enable(): this;
disable(): this;
/** 把放大镜放到某一个容器中 */
appendTo(element: Element): this;
/** 清除放大镜渲染内容 */
clear(): this;
/** 放大传入点位周围的内容 */
renderWithPoint(point: THREE.Vector3): void;
/** 放大传入点位周围的内容 */
renderWithScreenPoint(point: {
x: number;
y: number;
}): void;
resetOffset(): void;
getCurrentState(): MagnifierState;
protected getRenderCenter(): THREE.Vector3 | {
x: number;
y: number;
};
private _appendTo;
private autoFixPCPosition;
private render;
private initStyle;
private getPanOffset;
private onPanstart;
private onPan;
private onPanend;
}
export {};