@x-viewer/core 0.9.0

package/dist/types/core/camera-controls/Constants.d.ts

@@ -0,0 +1,2 @@
+export declare const PI_2: number;
+export declare const PI_HALF: number;

package/dist/types/core/camera-controls/EventDispatcher.d.ts

@@ -0,0 +1,41 @@
+export type Listener = (event?: DispatcherEvent) => void;
+export interface DispatcherEvent {
+    type: string;
+    [key: string]: any;
+}
+export declare class EventDispatcher {
+    private _listeners;
+    /**
+     * Adds the specified event listener.
+     * @param type event name
+     * @param listener handler function
+     * @category Methods
+     */
+    addEventListener(type: string, listener: Listener): void;
+    /**
+     * Presence of the specified event listener.
+     * @param type event name
+     * @param listener handler function
+     * @category Methods
+     */
+    hasEventListener(type: string, listener: Listener): boolean;
+    /**
+     * Removes the specified event listener
+     * @param type event name
+     * @param listener handler function
+     * @category Methods
+     */
+    removeEventListener(type: string, listener: Listener): void;
+    /**
+     * Removes all event listeners
+     * @param type event name
+     * @category Methods
+     */
+    removeAllEventListeners(type?: string): void;
+    /**
+     * Fire an event type.
+     * @param event DispatcherEvent
+     * @category Methods
+     */
+    dispatchEvent(event: DispatcherEvent): void;
+}

package/dist/types/core/camera-controls/index.d.ts

@@ -0,0 +1,3 @@
+import { CameraControls } from "./CameraControls";
+export * from "./types";
+export default CameraControls;

package/dist/types/core/camera-controls/types.d.ts

@@ -0,0 +1,112 @@
+import type * as _THREE from "three";
+export interface THREESubset {
+    Vector2: typeof _THREE.Vector2;
+    Vector3: typeof _THREE.Vector3;
+    Vector4: typeof _THREE.Vector4;
+    Quaternion: typeof _THREE.Quaternion;
+    Matrix4: typeof _THREE.Matrix4;
+    Spherical: typeof _THREE.Spherical;
+    Box3: typeof _THREE.Box3;
+    Sphere: typeof _THREE.Sphere;
+    Raycaster: typeof _THREE.Raycaster;
+    [key: string]: any;
+}
+export type Ref = {
+    value: number;
+};
+export declare const MOUSE_BUTTON: {
+    readonly LEFT: 1;
+    readonly RIGHT: 2;
+    readonly MIDDLE: 4;
+};
+export type MOUSE_BUTTON = (typeof MOUSE_BUTTON)[keyof typeof MOUSE_BUTTON];
+export declare const ACTION: Readonly<{
+    readonly NONE: 0;
+    readonly ROTATE: 1;
+    readonly TRUCK: 2;
+    readonly OFFSET: 4;
+    readonly DOLLY: 8;
+    readonly ZOOM: 16;
+    readonly TOUCH_ROTATE: 32;
+    readonly TOUCH_TRUCK: 64;
+    readonly TOUCH_OFFSET: 128;
+    readonly TOUCH_DOLLY: 256;
+    readonly TOUCH_ZOOM: 512;
+    readonly TOUCH_DOLLY_TRUCK: 1024;
+    readonly TOUCH_DOLLY_OFFSET: 2048;
+    readonly TOUCH_DOLLY_ROTATE: 4096;
+    readonly TOUCH_ZOOM_TRUCK: 8192;
+    readonly TOUCH_ZOOM_OFFSET: 16384;
+    readonly TOUCH_ZOOM_ROTATE: 32768;
+}>;
+export type ACTION = number;
+export interface PointerInput {
+    pointerId: number;
+    clientX: number;
+    clientY: number;
+    deltaX: number;
+    deltaY: number;
+    mouseButton: MOUSE_BUTTON | null;
+}
+/**
+ * @internal
+ */
+export type mouseButtonAction = typeof ACTION.ROTATE | typeof ACTION.TRUCK | typeof ACTION.OFFSET | typeof ACTION.DOLLY | typeof ACTION.ZOOM | typeof ACTION.NONE;
+/**
+ * @internal
+ */
+export type mouseWheelAction = typeof ACTION.ROTATE | typeof ACTION.TRUCK | typeof ACTION.OFFSET | typeof ACTION.DOLLY | typeof ACTION.ZOOM | typeof ACTION.NONE;
+/**
+ * @internal
+ */
+export type singleTouchAction = typeof ACTION.TOUCH_ROTATE | typeof ACTION.TOUCH_TRUCK | typeof ACTION.TOUCH_OFFSET | typeof ACTION.DOLLY | typeof ACTION.ZOOM | typeof ACTION.NONE;
+/**
+ * @internal
+ */
+export type multiTouchAction = typeof ACTION.TOUCH_DOLLY_ROTATE | typeof ACTION.TOUCH_DOLLY_TRUCK | typeof ACTION.TOUCH_DOLLY_OFFSET | typeof ACTION.TOUCH_ZOOM_ROTATE | typeof ACTION.TOUCH_ZOOM_TRUCK | typeof ACTION.TOUCH_ZOOM_OFFSET | typeof ACTION.TOUCH_DOLLY | typeof ACTION.TOUCH_ZOOM | typeof ACTION.TOUCH_ROTATE | typeof ACTION.TOUCH_TRUCK | typeof ACTION.TOUCH_OFFSET | typeof ACTION.NONE;
+export interface MouseButtons {
+    left: mouseButtonAction;
+    middle: mouseButtonAction;
+    right: mouseButtonAction;
+    wheel: mouseWheelAction;
+}
+export interface Touches {
+    one: singleTouchAction;
+    two: multiTouchAction;
+    three: multiTouchAction;
+}
+export interface FitToOptions {
+    cover: boolean;
+    paddingLeft: number;
+    paddingRight: number;
+    paddingBottom: number;
+    paddingTop: number;
+}
+export interface CameraControlsEventMap {
+    update: {
+        type: "update";
+    };
+    wake: {
+        type: "wake";
+    };
+    rest: {
+        type: "rest";
+    };
+    sleep: {
+        type: "sleep";
+    };
+    transitionstart: {
+        type: "transitionstart";
+    };
+    controlstart: {
+        type: "controlstart";
+    };
+    control: {
+        type: "control";
+    };
+    controlend: {
+        type: "controlend";
+    };
+}
+export declare function isPerspectiveCamera(camera: _THREE.Camera): camera is _THREE.PerspectiveCamera;
+export declare function isOrthographicCamera(camera: _THREE.Camera): camera is _THREE.OrthographicCamera;

package/dist/types/core/camera-controls/utils/extractClientCoordFromEvent.d.ts

@@ -0,0 +1,3 @@
+import type * as _THREE from "three";
+import type { PointerInput } from "../types";
+export declare function extractClientCoordFromEvent(pointers: PointerInput[], out: _THREE.Vector2): void;

package/dist/types/core/camera-controls/utils/math-utils.d.ts

@@ -0,0 +1,14 @@
+import type * as _THREE from "three";
+import type { Ref } from "../types";
+/**
+ * Degree to radius
+ */
+export declare const Deg2Rad: number;
+export declare function clamp(value: number, min: number, max: number): number;
+export declare function approxZero(number: number, error?: number): boolean;
+export declare function approxEquals(a: number, b: number, error?: number): boolean;
+export declare function roundToStep(value: number, step: number): number;
+export declare function infinityToMaxNumber(value: number): number;
+export declare function maxNumberToInfinity(value: number): number;
+export declare function smoothDamp(current: number, target: number, currentVelocityRef: Ref, smoothTime: number, maxSpeed: number | undefined, deltaTime: number): number;
+export declare function smoothDampVec3(current: _THREE.Vector3, target: _THREE.Vector3, currentVelocityRef: _THREE.Vector3, smoothTime: number, maxSpeed: number | undefined, deltaTime: number, out: _THREE.Vector3): _THREE.Vector3;

package/dist/types/core/camera-controls/utils/notSupportedInOrthographicCamera.d.ts

@@ -0,0 +1,2 @@
+import * as _THREE from "three";
+export declare function notSupportedInOrthographicCamera(camera: _THREE.OrthographicCamera | _THREE.PerspectiveCamera, message: string): camera is _THREE.OrthographicCamera;

package/dist/types/core/canvas/CanvasRender.d.ts

@@ -0,0 +1,52 @@
+import * as THREE from "three";
+import { DrawableData } from "./Constants";
+import { Drawable } from "./Drawable";
+import type { DrawableList } from "./DrawableList";
+import { Event } from "../../core/utils";
+import type { BaseViewer } from "../../core/viewers";
+/**
+ * @internal
+ */
+export type constructorReturnType<T> = new (...arg: any) => T;
+/**
+ * @internal
+ */
+export declare class CanvasRender extends Event {
+    private viewer;
+    private drawableLists;
+    private canvas?;
+    context?: CanvasRenderingContext2D;
+    private frustum;
+    private projScreenMatrix;
+    static _registerDrawableClass(drawable: constructorReturnType<Drawable>): void;
+    static createDrawable(data: DrawableData): Drawable<Record<string, unknown>>;
+    constructor(viewer: BaseViewer);
+    get is3d(): boolean;
+    get container(): HTMLElement;
+    get camera(): THREE.Camera;
+    get raycaster(): THREE.Raycaster;
+    private init;
+    private initCanvas;
+    private toHighDpr;
+    clearCanvas(): void;
+    addDrawableList(drawableList: DrawableList): void;
+    render(): void;
+    setSize(width: number, height: number): void;
+    getSortedDrawables(onlyVisible?: boolean): Drawable<Record<string, unknown>>[];
+    getDrawablesByDrawableListAndPosition(drawList: DrawableList, p: THREE.Vector3): Drawable<Record<string, unknown>> | undefined;
+    getDrawablesByPosition(p: THREE.Vector3): Drawable[];
+    getDrawableById(id: string): Drawable<Record<string, unknown>> | undefined;
+    measureTextLength(text: string, font: string): number;
+    /**
+     *
+     * @param option
+     * @returns
+     * @deprecated
+     */
+    /**
+     *
+     */
+    getImage(filter: (drawable: Drawable) => boolean): Promise<HTMLImageElement>;
+    getCanvas(): HTMLCanvasElement | undefined;
+    destroy(): void;
+}

package/dist/types/core/canvas/Constants.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Drawable data, including measurement data, markup data, etc.
+ */
+export interface DrawableData {
+    /**
+     * id is used by business logic to manage(find, update, delete, etc.) drawables
+     */
+    id: string;
+    /**
+     * Two dimension float array stores 2d or 3d points.
+     * e.g., You can use "[[1, 1], [2.5, 3]]" to represent a distance measurement result,
+     * "[1, 1]" is the first point, and "[2.5, 3]" is the second point.
+     */
+    points: number[][];
+    position?: number[];
+    rotation?: number[];
+    scale?: number[];
+    lineWidth?: number;
+    /**
+     * Line color is number array. e.g: [r, g, b, a]
+     */
+    lineColor?: number[];
+    /**
+     * Fill color is number array. e.g: [r, g, b, a]
+     */
+    fillColor?: number[];
+    /**
+     * Drawable dta type
+     */
+    type: string;
+}

package/dist/types/core/canvas/Drawable.d.ts

@@ -0,0 +1,98 @@
+import * as THREE from "three";
+import { DrawableData } from "./Constants";
+import { Event } from "../../core/utils";
+/**
+ * @internal
+ */
+export declare abstract class Drawable<DrawableEvents extends Record<string, unknown> = Record<string, unknown>> extends Event<DrawableEvents> {
+    protected readonly DEFAULT_LINE_WIDTH = 1;
+    protected readonly DEFAULT_STROKE_STYLE: number[];
+    protected readonly DEFAULT_FILL_STYLE: number[];
+    id: string;
+    protected lineWidth: number;
+    protected lineColor: number[];
+    protected fillColor: number[];
+    /**
+     * points is world position, not screen position
+     * @protected
+     */
+    protected points: THREE.Vector3[];
+    userData: Record<any, any>;
+    protected tolerance: number;
+    /**
+     * @description is drawable visible, used for hide/show
+     */
+    visible: boolean;
+    /**
+     * @description is selected drawable, used for highlight
+     */
+    selected: boolean;
+    /**
+     * render order, the bigger number is on the top
+     */
+    renderOrder: number;
+    needsFrustumCulled: boolean;
+    protected editPointSize: number;
+    protected editPointFillColor: string;
+    protected editPointStrokeColor: string;
+    protected matrix: THREE.Matrix4;
+    protected ctx?: CanvasRenderingContext2D;
+    constructor(id?: string);
+    setTolerance(t: number): void;
+    /**
+     * Render the drawable on the canvas.
+     * @param ctx The canvas rendering context.
+     * @param camera The camera used for rendering.
+     */
+    render(ctx: CanvasRenderingContext2D, camera: THREE.Camera): void;
+    getData(): DrawableData;
+    setData(data: DrawableData): void;
+    getVertexes(): THREE.Vector3[];
+    setLineWidth(lineWidth?: number): void;
+    setLineColor(color?: number[]): void;
+    setFillColor(color?: number[]): void;
+    isSelected(): boolean;
+    getCenter(): THREE.Vector3;
+    transToScreenCoord(vector: THREE.Vector3, camera: THREE.Camera): THREE.Vector2;
+    /**
+     *
+     * @param ctx
+     * @param camera
+     * @describe just for debug bounds
+     */
+    protected drawBounds(ctx: CanvasRenderingContext2D, camera: THREE.Camera): void;
+    /**
+     *
+     * @param ctx
+     * @param camera
+     * @describe just for debug
+     */
+    private drawCenter;
+    /**
+     *
+     * @param p is world position
+     * @param raycaster just for 3d intersect
+     * @returns boolean
+     * @describe is point interact drawable, use to select drawable, the same as threejs object raycast
+     */
+    abstract isPointInPath(p: THREE.Vector3, raycaster?: THREE.Raycaster): boolean;
+    getBounds(): THREE.Box3;
+    /**
+     *
+     * @param ctx
+     * @param camera
+     * @describe abstract draw method
+     */
+    abstract draw(ctx: CanvasRenderingContext2D, camera: THREE.Camera): void;
+    /**
+     *
+     * @param ctx
+     * @param camera
+     * @describe abstract drawSelect method
+     */
+    abstract drawSelect(ctx: CanvasRenderingContext2D, camera: THREE.Camera): void;
+    /**
+     * @describe class type for serialize
+     */
+    abstract getClassType(): string;
+}

package/dist/types/core/canvas/DrawableList.d.ts

@@ -0,0 +1,40 @@
+import * as THREE from "three";
+import { DrawableData } from "./Constants";
+import { Drawable } from "./Drawable";
+import { Event } from "../../core/utils";
+/**
+ * Drawable list events.
+ */
+type DrawableListEvents = {
+    /**
+     * Triggerd when a drawable is added.
+     */
+    add: DrawableData;
+    /**
+     * Triggerd when a drawable is updated.
+     */
+    update: DrawableData;
+    /**
+     * Triggerd when a drawable is removed.
+     */
+    remove: DrawableData;
+};
+/**
+ * A group of Drawlables for a certain category
+ * @internal
+ */
+export declare class DrawableList extends Event<DrawableListEvents> {
+    private category;
+    private drawableMap;
+    constructor(category: string);
+    addDrawable(drawable: Drawable): void;
+    updateDrawable(drawable: Drawable, newData: DrawableData): void;
+    removeDrawable(drawable: Drawable): void;
+    getDrawableById(id: string): Drawable<Record<string, unknown>> | undefined;
+    clear(): void;
+    getDrawables(): Map<string, Drawable<Record<string, unknown>>>;
+    getDrawableDatas(): DrawableData[];
+    setDrawableDatas(drawableDatas: DrawableData[]): void;
+    getDrawableByPosition(p: THREE.Vector3, raycaster?: THREE.Raycaster): Drawable<Record<string, unknown>> | undefined;
+}
+export {};

package/dist/types/core/canvas/MarkerDrawable.d.ts

@@ -0,0 +1,30 @@
+import * as THREE from "three";
+import { DrawableData } from "./Constants";
+import { PathDrawable } from "./PathDrawable";
+export interface MarkerDrawableConfig {
+    width?: number;
+    height?: number;
+    imageUrl?: string;
+}
+export interface MarkerDrawableData extends DrawableData {
+    rotation2D: number;
+    width: number;
+    height: number;
+    imageUrl: string;
+}
+export declare class MarkerDrawable extends PathDrawable {
+    rotation2D: number;
+    image: HTMLImageElement;
+    width: number;
+    height: number;
+    needsFrustumCulled: boolean;
+    constructor(id: string, cfg?: MarkerDrawableConfig);
+    setImage(imageUrl: string): void;
+    setRotation(rotation: number): void;
+    getVertexes(): THREE.Vector3[];
+    drawBounds(ctx: CanvasRenderingContext2D, camera: THREE.Camera): void;
+    draw(ctx: CanvasRenderingContext2D, camera: THREE.Camera): void;
+    getData(): MarkerDrawableData;
+    setData(data: MarkerDrawableData): void;
+    getClassType(): string;
+}

package/dist/types/core/canvas/PathDrawable.d.ts

@@ -0,0 +1,39 @@
+import * as THREE from "three";
+import { DrawableData } from "./Constants";
+import { Drawable } from "./Drawable";
+export declare class PathDrawable extends Drawable {
+    position: THREE.Vector3;
+    rotation: THREE.Euler;
+    scale: THREE.Vector3;
+    matrix: THREE.Matrix4;
+    matrixNeedsUpdate: boolean;
+    constructor(id: string, points?: THREE.Vector3[]);
+    setPoints(points: THREE.Vector3[]): void;
+    setPosition(x: number, y: number, z: number): void;
+    getPosition(): THREE.Vector3;
+    setRotation(x: number, y: number, z: number): void;
+    getRotation(): THREE.Euler;
+    setScale(scaleX: number, scaleY: number, scaleZ: number): void;
+    getScale(): THREE.Vector3;
+    /**
+     *
+     * @param p The point to check if it is inside the path.
+     * @description Check if a point is inside the path defined by the points of this drawable.can override this method to implement custom logic.
+     * @returns {boolean} True if the point is inside the path, false otherwise.
+     */
+    isPointInPath(p: THREE.Vector3): boolean;
+    getPointsBarycenter(): THREE.Vector3;
+    calculateMatrix(): void;
+    getCenter(): THREE.Vector3;
+    draw(ctx: CanvasRenderingContext2D, camera: THREE.Camera): void;
+    /**
+     * Draw the selection outline for this drawable.
+     * @param ctx The canvas rendering context.
+     * @param camera The camera used for rendering.
+     */
+    drawSelect(ctx: CanvasRenderingContext2D, camera: THREE.Camera): void;
+    getVertexes(): THREE.Vector3[];
+    getData(): DrawableData;
+    setData(data: DrawableData): void;
+    getClassType(): string;
+}

package/dist/types/core/canvas/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./CanvasRender";
+export * from "./DrawableList";
+export * from "./Drawable";
+export * from "./PathDrawable";
+export * from "./MarkerDrawable";
+export * from "./Constants";

package/dist/types/core/compare/BaseDxfCompareHelper.d.ts

@@ -0,0 +1,104 @@
+import * as THREE from "three";
+import { ProgressBar } from "../components";
+import { DxfCompareConfig, Model2dConfig, Viewer2dConfig } from "../../core/Configs";
+import { DxfChange, DxfLoader } from "../../core/dxf";
+import { FontManager } from "../../core/font";
+import { Viewer2d } from "../../core/viewers/Viewer2d";
+/**
+ * Dxf compare helper with one viewport.
+ * @example
+ * ``` html
+ * <div id="app">
+ *     <div id="myCanvas" style="width: 100%; height: 100%; display: inline-block;"></div>
+ * </div>
+ * ```
+ * ``` typescript
+ * const viewerCfg = { containerId: "myCanvas" };
+ * const modelCfg1 = { modelId: "id_1", src: "http://www.abc.com/sample1.dxf" };
+ * const modelCfg2 = { modelId: "id_2", src: "http://www.abc.com/sample2.dxf" };
+ * const fontFiles = ["http://www.abc.com/hztxt.shx", "http://www.abc.com/simplex.shx"];
+ *
+ * const compareHelper = new BaseDxfCompareHelper(viewerCfg);
+ * await compareHelper.setFont(fontFiles);
+ * await compareHelper.compare(modelCfg1, modelCfg2);
+ * ```
+ */
+export declare class BaseDxfCompareHelper {
+    /**
+     * Viewer2d of DxfCompareHelper.
+     */
+    viewer: Viewer2d;
+    protected fontManager?: FontManager;
+    protected loader: DxfLoader;
+    protected loadingManager?: THREE.LoadingManager;
+    protected changes?: Record<string, DxfChange>;
+    protected container: HTMLElement;
+    protected spinner?: HTMLDivElement;
+    protected jobCount: number;
+    protected loadingProgressBar?: ProgressBar;
+    constructor(viewerCfg: Viewer2dConfig);
+    protected initSpinner(): void;
+    /**
+     * @description {en} Sets font.
+     * This needs to be called before loading a dxf, it won't affect any loaded text.
+     * It accepts shx or typeface formats. For typeface, it only support passing in 1 font file in the array for now.
+     * @description {zh} 设置字体。
+     * 需要在加载dxf之前调用，不会影响已加载的文字。
+     * 支持shx或typeface格式。对于typeface，目前只支持传入1个字体文件。
+     * @param urls
+     * - {en} font file urls.
+     * - {zh} 字体文件链接。
+     * @example
+     * ```typescript
+     * compareHelper.setFont(["https://example.com/xxx.shx"]);
+     * ```
+     */
+    setFont(urls: string[]): Promise<void>;
+    /**
+     * Compares two dxf files. Note that:
+     * - It only compares model spaces.
+     * - It shouldn't load anything else before and after compare.
+     * @param modelCfg1 The first dxf to be compared
+     * @param modelCfg2 The second dxf to be compared
+     * @param onProgress loading progress
+     */
+    compare(modelCfg1: Model2dConfig, modelCfg2: Model2dConfig, compareCfg?: DxfCompareConfig, onProgress?: (event: ProgressEvent) => void): Promise<void>;
+    /**
+     * @description {en} Gets compare changes.
+     * @description {zh} 获取对比变动.
+     * @returns
+     * - {en} Compare changes.
+     * - {zh} 对比变动列表。
+     * @example
+     * ``` typescript
+     * const changes = compareHelper.getChanges();
+     * console.log(changes);
+     * ```
+     */
+    getChanges(): Record<number, DxfChange> | undefined;
+    /**
+     * @description {en} Zooms to a compare change.
+     * @description {zh} 聚焦到图纸的一处变动。
+     * @param changeId
+     * - {en} Change id, which is an incremental integer starts from 1.
+     * - {zh} 变动id，该id是从数字1开始自增的整数。
+     * @example
+     * ``` typescript
+     * const changeId = 1;
+     * compareHelper.zoomToChange(changeId);
+     * ```
+     */
+    zoomToChange(changeId: number): void;
+    /**
+     * Sets spinner visibility
+     */
+    protected setSpinnerVisibility(visible: boolean): void;
+    /**
+     * Increases job count, and show spinner accordingly
+     */
+    protected increaseJobCount(): void;
+    /**
+     * Decreases job count, and hide spinner accordingly
+     */
+    protected decreaseJobCount(): void;
+}

package/dist/types/core/compare/CompareDrawable.d.ts

@@ -0,0 +1,18 @@
+import * as THREE from "three";
+import { Drawable } from "../../core/canvas";
+/**
+ * @internal
+ */
+export declare class CompareDrawable extends Drawable {
+    boxes: THREE.Box3[];
+    lineSegments: THREE.Vector3[][];
+    constructor(id: string, boxes: THREE.Box3[]);
+    private calculateCloudLineSegments;
+    draw(ctx: CanvasRenderingContext2D, camera: THREE.Camera): void;
+    private drawBox;
+    static getControlPointByTwoPoints(p1: THREE.Vector2, p2: THREE.Vector2): THREE.Vector2;
+    drawSelect(ctx: CanvasRenderingContext2D, camera: THREE.Camera): void;
+    isPointInPath(p: THREE.Vector3): boolean;
+    getBounds(): THREE.Box3;
+    getClassType(): string;
+}

package/dist/types/core/compare/DxfCompareHelper.d.ts

@@ -0,0 +1,69 @@
+import { BaseDxfCompareHelper } from "./BaseDxfCompareHelper";
+import { DxfCompareConfig, Model2dConfig, Viewer2dConfig } from "../../core/Configs";
+import { Viewer2d } from "../../core/viewers/Viewer2d";
+/**
+ * Dxf compare helper with two viewports.
+ * @example
+ * ``` html
+ * <div id="app">
+ *     <div id="myCanvas1" style="width: 50%; height: 100%; display: inline-block;"></div>
+ *     <div id="myCanvas2" style="width: 50%; height: 100%; display: inline-block; padding-left: 1px;"></div>
+ * </div>
+ * ```
+ * ``` typescript
+ * const viewerCfg1 = { containerId: "myCanvas1" };
+ * const viewerCfg2 = { containerId: "myCanvas2" };
+ * const modelCfg1 = { modelId: "id_1", src: "http://www.abc.com/sample1.dxf" };
+ * const modelCfg2 = { modelId: "id_2", src: "http://www.abc.com/sample2.dxf" };
+ * const fontFiles = ["http://www.abc.com/hztxt.shx", "http://www.abc.com/simplex.shx"];
+ *
+ * const compareHelper = new DxfCompareHelper(viewerCfg1, viewerCfg2);
+ * await compareHelper.setFont(fontFiles);
+ * await compareHelper.compare(modelCfg1, modelCfg2);
+ * compareHelper.enableSyncCamera(true);
+ * ```
+ */
+export declare class DxfCompareHelper extends BaseDxfCompareHelper {
+    /**
+     * The second Viewer2d of DxfCompareHelper.
+     */
+    viewer2: Viewer2d;
+    /**
+     * Enables to synchronize camera position when another camera is moved.
+     */
+    protected syncCamera: boolean;
+    constructor(viewerCfg1: Viewer2dConfig, viewerCfg2: Viewer2dConfig);
+    protected initSyncCameraEvent(): void;
+    /**
+     * @description {en} Enables to synchronize camera position when another camera is moved.
+     * @description {zh} 设置开启或关闭同步相机视角。
+     * @example
+     * ```typescript
+     * compareHelper.enableSyncCamera(true);
+     * ```
+     */
+    enableSyncCamera(enable: boolean): void;
+    private syncCameraControls;
+    /**
+     * Compares two dxf files. Note that:
+     * - It only compares model spaces.
+     * - It shouldn't load anything else before and after compare.
+     * @param modelCfg1 The first dxf to be compared
+     * @param modelCfg2 The second dxf to be compared
+     * @param onProgress loading progress
+     */
+    compare(modelCfg1: Model2dConfig, modelCfg2: Model2dConfig, compareCfg?: DxfCompareConfig, onProgress?: (event: ProgressEvent) => void): Promise<void>;
+    /**
+     * @description {en} Zooms to a compare change.
+     * @description {zh} 聚焦到图纸的一处变动。
+     * @param changeId
+     * - {en} Change id, which is an incremental integer starts from 1.
+     * - {zh} 变动id，该id是从数字1开始自增的整数。
+     * @example
+     * ``` typescript
+     * const changeId = 1;
+     * compareHelper.zoomToChange(changeId);
+     * ```
+     */
+    zoomToChange(changeId: number): void;
+}