@inweb/viewer-visualize/src/Viewer/Draggers/OdZoomWheelDragger.ts

JavaScript library for rendering CAD and BIM files in a browser using VisualizeJS

///////////////////////////////////////////////////////////////////////////////
// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
// All rights reserved.
//
// This software and its documentation and related materials are owned by
// the Alliance. The software may only be incorporated into application
// programs owned by members of the Alliance, subject to a signed
// Membership Agreement and Supplemental Software License Agreement with the
// Alliance. The structure and organization of this software are the valuable
// trade secrets of the Alliance and its suppliers. The software is also
// protected by copyright law and international treaty provisions. Application
// programs incorporating this software must include the following statement
// with their copyright notices:
//
//   This application incorporates Open Design Alliance software pursuant to a
//   license agreement with Open Design Alliance.
//   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
//   All rights reserved.
//
// By use of this software, its documentation or related materials, you
// acknowledge and accept the above terms.
///////////////////////////////////////////////////////////////////////////////

import { Viewer } from "../Viewer";
import { OdBaseDragger } from "./Common/OdBaseDragger";
import { ZoomAction } from "./Actions/ZoomAction";

const INTERACTIVITY_TIME_OUT = 100;

export class OdZoomWheelDragger extends OdBaseDragger {
  private _zoomAction: ZoomAction;

  private _endInteractivityTimeOutId;

  private _isEnableInteractivityMode: boolean;

  constructor(subject: Viewer) {
    super(subject);

    // ignore all events except "wheel" so as not to interfere with other handlers
    this.canvasEvents = ["wheel"];
    this._zoomAction = new ZoomAction(this.m_module, this.subject);
    this._endInteractivityTimeOutId = undefined;
    this._isEnableInteractivityMode = false;
  }

  wheel(event) {
    if (!this.subject.options.enableZoomWheel) {
      return;
    }

    event = event || window.event;
    event.preventDefault();

    const zoomIn = this.subject.options.reverseZoomWheel ? 0.925 : 1 / 0.925;
    const zoomOut = this.subject.options.reverseZoomWheel ? 1 / 0.925 : 0.925;

    const viewer = this.getViewer();
    if (viewer) {
      const zoomFactor = event.deltaY > 0 ? zoomIn : zoomOut;

      this._zoomAction.action(
        event.offsetX * window.devicePixelRatio,
        event.offsetY * window.devicePixelRatio,
        zoomFactor,
        event.offsetX,
        event.offsetY
      );

      if (!this._isEnableInteractivityMode) {
        this._isEnableInteractivityMode = true;
        this.beginInteractivity();
      }

      if (this._endInteractivityTimeOutId) {
        clearTimeout(this._endInteractivityTimeOutId);
      }

      if (!this._isEnableInteractivityMode) {
        this._isEnableInteractivityMode = true;
        this.beginInteractivity();
      }

      if (this._endInteractivityTimeOutId) {
        clearTimeout(this._endInteractivityTimeOutId);
      }

      this.subject.update(true);

      this._endInteractivityTimeOutId = setTimeout(() => {
        this._endInteractivityTimeOutId = undefined;
        this.endInteractivity();
        this._isEnableInteractivityMode = false;
      }, INTERACTIVITY_TIME_OUT);
    }
  }

  override dispose(): void {
    if (this._endInteractivityTimeOutId) {
      clearTimeout(this._endInteractivityTimeOutId);
      this.endInteractivity();
      this._isEnableInteractivityMode = false;
    }
  }
}