@inweb/viewer-visualize 25.3.13

package/src/Viewer/Draggers/Common/GestureManager.ts

@@ -0,0 +1,263 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2021, 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-2021 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 { OrbitAction } from "../Actions/OrbitAction";
+import { PanAction } from "../Actions/PanAction";
+import { ZoomAction } from "../Actions/ZoomAction";
+import { Point2d } from "./Geometry";
+import { OdBaseDragger } from "./OdBaseDragger";
+
+export enum GestureAction {
+  None,
+  Orbit,
+  Pan,
+  Zoom,
+}
+
+export class GestureManager extends OdBaseDragger {
+  private _previousEvents = new Map<number, PointerEvent>();
+  private _currentEvents = new Map<number, PointerEvent>();
+  private _lastGestureAction = GestureAction.None;
+  private _orbitAction: OrbitAction;
+  private _panAction: PanAction;
+  private _zoomAction: ZoomAction;
+
+  private _initialDistance: number;
+  private readonly _maxInitialDistanceDifference = 30 * window.devicePixelRatio;
+
+  private _isSingleTouchEnabled = false;
+
+  public get isSingleTouchEnabled(): boolean {
+    return this._isSingleTouchEnabled;
+  }
+
+  public set isSingleTouchEnabled(value: boolean) {
+    this._isSingleTouchEnabled = value;
+  }
+
+  public constructor(subject: Viewer) {
+    super(subject);
+
+    this._orbitAction = new OrbitAction(this.m_module, this.subject, this.beginInteractivity, this.endInteractivity);
+    this._panAction = new PanAction(
+      this.m_module,
+      this.subject,
+      this.beginInteractivity,
+      this.endInteractivity,
+      this.getViewParams,
+      this.setViewParams
+    );
+    this._zoomAction = new ZoomAction(this.m_module, this.subject);
+  }
+
+  private getMiddlePoint(events: Map<number, PointerEvent>): Point2d {
+    if (events.size !== 2) {
+      return undefined;
+    }
+
+    const keys = this.getKeys(events);
+    const point0 = this.relativeCoords(events.get(keys[0]));
+    const point1 = this.relativeCoords(events.get(keys[1]));
+
+    return {
+      x: Math.floor((point0.x + point1.x) / 2),
+      y: Math.floor((point0.y + point1.y) / 2),
+    };
+  }
+
+  private getFirstPoint(events: Map<number, PointerEvent>): Point2d {
+    if (events.size < 1) {
+      return undefined;
+    }
+
+    const keys = this.getKeys(events);
+    return this.relativeCoords(events.get(keys[0]));
+  }
+
+  private getDistance(events: Map<number, PointerEvent>): number {
+    if (events.size !== 2) {
+      return -1;
+    }
+
+    const keys = this.getKeys(events);
+    const point0 = this.relativeCoords(events.get(keys[0]));
+    const point1 = this.relativeCoords(events.get(keys[1]));
+
+    return Math.hypot(point0.x - point1.x, point0.y - point1.y);
+  }
+
+  private updateEvent(event: PointerEvent) {
+    const eventNotInCurrentEvents = !this._currentEvents.get(event.pointerId);
+    if (eventNotInCurrentEvents && this._currentEvents.size === 2) {
+      return;
+    }
+
+    const previousEvent = this._currentEvents.get(event.pointerId);
+    if (previousEvent) {
+      this._previousEvents.set(previousEvent.pointerId, previousEvent);
+    }
+
+    this._currentEvents.set(event.pointerId, event);
+
+    if (eventNotInCurrentEvents) {
+      this._initialDistance = this.getDistance(this._currentEvents);
+    }
+  }
+
+  private removeEvent(event: PointerEvent) {
+    this._currentEvents.delete(event.pointerId);
+    this._previousEvents.delete(event.pointerId);
+
+    if (this._currentEvents.size < 2) {
+      this._initialDistance = -1;
+    }
+  }
+
+  private getKeys(map: Map<number, PointerEvent>): number[] {
+    return Array.from(map.keys());
+  }
+
+  private analyzeGesture() {
+    if (this._currentEvents.size === 2) {
+      const currentDistance = this.getDistance(this._currentEvents);
+      const previousDistance = this.getDistance(this._previousEvents);
+
+      const currentDistanceEqualsInitialDistance =
+        Math.abs(this._initialDistance - currentDistance) <= this._maxInitialDistanceDifference;
+      if (currentDistanceEqualsInitialDistance) {
+        this.executePanAction(this.getMiddlePoint(this._currentEvents));
+      } else {
+        if (previousDistance !== -1 && currentDistance !== previousDistance) {
+          this.executeZoomAction(currentDistance, previousDistance);
+        }
+      }
+    } else if (this._currentEvents.size === 1 && this.isSingleTouchEnabled) {
+      this.executeOrbitAction(this.getFirstPoint(this._currentEvents));
+    }
+  }
+
+  private executeZoomAction(currentDistance: number, previousDistance: number) {
+    if (this._lastGestureAction !== GestureAction.Zoom) {
+      this.executeEndAction(this._lastGestureAction);
+      this._lastGestureAction = GestureAction.Zoom;
+      OdBaseDragger.isGestureActive = true;
+    }
+
+    const zoomSpeed = (currentDistance - previousDistance) / 700;
+    const zoomFactor = 1 + zoomSpeed;
+    const middlePoint = this.getMiddlePoint(this._currentEvents);
+    this._zoomAction.action(middlePoint.x, middlePoint.y, zoomFactor);
+    this.subject.update();
+  }
+
+  private executePanAction(currentPoint: Point2d) {
+    if (this._lastGestureAction !== GestureAction.Pan) {
+      this.executeEndAction(this._lastGestureAction);
+      this._lastGestureAction = GestureAction.Pan;
+      OdBaseDragger.isGestureActive = true;
+
+      this._panAction.beginAction(currentPoint.x, currentPoint.y);
+    }
+
+    this._panAction.action(currentPoint.x, currentPoint.y);
+    this.subject.update();
+  }
+
+  private executeOrbitAction(currentPoint: Point2d) {
+    if (this._lastGestureAction !== GestureAction.Orbit) {
+      this.executeEndAction(this._lastGestureAction);
+      this._lastGestureAction = GestureAction.Orbit;
+      OdBaseDragger.isGestureActive = true;
+
+      this._orbitAction.beginAction(currentPoint.x, currentPoint.y);
+    }
+
+    this._orbitAction.action(currentPoint.x, currentPoint.y);
+    this.subject.update();
+  }
+
+  private executeEndAction(gestureAction: GestureAction) {
+    if (gestureAction === GestureAction.Orbit) this._orbitAction.endAction();
+    if (gestureAction === GestureAction.Pan) this._panAction.endAction();
+    OdBaseDragger.isGestureActive = false;
+  }
+
+  private needIgnoreEvent(event: PointerEvent): boolean {
+    return (
+      !this.subject.options.enableZoomWheel || !this.subject.options.enableGestures || !this.eventIsTouchEvent(event)
+    );
+  }
+
+  private eventIsTouchEvent(event: PointerEvent): boolean {
+    return event.pointerType === "touch" || event.pointerType === "";
+  }
+
+  override pointerdown(event: PointerEvent) {
+    if (this.needIgnoreEvent(event)) {
+      return;
+    }
+
+    this.updateEvent(event);
+  }
+
+  override pointermove(event: PointerEvent) {
+    if (this.needIgnoreEvent(event)) {
+      return;
+    }
+
+    this.updateEvent(event);
+    this.analyzeGesture();
+  }
+
+  override pointerup(event: PointerEvent) {
+    if (this.needIgnoreEvent(event)) {
+      return;
+    }
+
+    this.removeEvent(event);
+
+    if (this._currentEvents.size < 2) {
+      this.executeEndAction(this._lastGestureAction);
+      OdBaseDragger.isGestureActive = false;
+    }
+
+    this._lastGestureAction = GestureAction.None;
+  }
+
+  override pointercancel(event: PointerEvent) {
+    if (this.needIgnoreEvent(event)) {
+      return;
+    }
+
+    this.pointerup(event);
+  }
+
+  pointerleave(event: PointerEvent) {
+    if (this.needIgnoreEvent(event)) {
+      return;
+    }
+
+    this.pointerup(event);
+  }
+}

package/src/Viewer/Draggers/Common/OdBaseDragger.ts

@@ -0,0 +1,270 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2021, 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-2021 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+/* eslint-disable no-unused-vars */
+
+import { CANVAS_EVENTS } from "@inweb/viewer-core";
+import { Viewer } from "../../Viewer";
+import { Point2d } from "./Geometry";
+import { OdaGeAction } from "./OdaGeAction";
+
+const CLICK_DELTA = 5;
+
+const INTERACTIVITY_FPS = 24;
+
+/**
+ * A [Viewer]{@link Viewer} event that fires when the viewer needs to be updated.
+ *
+ * @property {string} type - `update`
+ * @event update
+ */
+
+/**
+ * A [Viewer]{@link Viewer} event that fires when the user selects an entity with the mouse.
+ *
+ * @property {string} type - `select`
+ * @property {OdTvSelectionSet} data - The set of selected entities. For more information, see
+ *   [OdTvSelectionSet](https://cloud.opendesign.com/docs/index.html#/vis/OdTvSelectionSet?id=odtvselectionset).
+ * @event select
+ */
+
+export class OdBaseDragger extends OdaGeAction {
+  protected subject: Viewer;
+  protected needInputText: boolean;
+  protected mouseDownPosition: Point2d;
+  protected autoSelect: boolean;
+  protected onmessage: (event: any) => boolean;
+  protected canvasEvents: string[];
+  protected isDragging: boolean;
+  protected press: boolean;
+
+  public name: string;
+
+  constructor(subject: Viewer) {
+    super(subject.visualizeJs);
+    this.subject = subject;
+    this.needInputText = false;
+    this.mouseDownPosition = { x: 0, y: 0 };
+    this.autoSelect = false;
+
+    this.onmessage = (event) => this.subject.emitEvent(event);
+    this.canvasEvents = CANVAS_EVENTS;
+  }
+
+  public initialize(): void {
+    this.canvasEvents = this.canvasEvents.filter((x) => typeof this[x] === "function");
+    this.canvasEvents.forEach((x) => (this[x] = this[x].bind(this)));
+    this.canvasEvents.forEach((x) => this.subject.on(x, this[x]));
+
+    this.getViewer().setEnableAutoSelect(!!this.autoSelect);
+  }
+
+  public dispose(): void {
+    this.canvasEvents.forEach((x) => this.subject.off(x, this[x]));
+  }
+
+  protected relativeCoords(event: MouseEvent): Point2d {
+    return { x: event.offsetX * window.devicePixelRatio, y: event.offsetY * window.devicePixelRatio };
+  }
+
+  protected pointerdown(ev: PointerEvent): void {
+    if (!ev.isPrimary || OdBaseDragger.isGestureActive) {
+      return;
+    }
+
+    (ev.target as HTMLElement).setPointerCapture(ev.pointerId);
+
+    const relCoord = this.relativeCoords(ev);
+    this.isDragging = true;
+    this.mouseDownPosition = { x: relCoord.x, y: relCoord.y };
+    this.start(relCoord.x, relCoord.y, ev.clientX, ev.clientY);
+    this.subject.update();
+  }
+
+  protected pointerup(ev: PointerEvent): void {
+    if (OdBaseDragger.needSkipPointerUp) {
+      return;
+    }
+
+    if (!ev.isPrimary) {
+      return;
+    }
+
+    (ev.target as HTMLElement).releasePointerCapture(ev.pointerId);
+
+    const relCoord = this.relativeCoords(ev);
+    this.end(relCoord.x, relCoord.y);
+    this.isDragging = false;
+    this.subject.update();
+  }
+
+  protected pointercancel(ev: PointerEvent): void {
+    if (!ev.isPrimary) {
+      return;
+    }
+
+    this.m_module.canvas.dispatchEvent(new PointerEvent("pointerup", ev));
+  }
+
+  protected pointermove(ev: PointerEvent): void {
+    if (!ev.isPrimary || OdBaseDragger.isGestureActive) {
+      return;
+    }
+
+    const relCoord = this.relativeCoords(ev);
+    this.drag(relCoord.x, relCoord.y, ev.movementX, ev.movementY);
+    if (this.isDragging) {
+      this.subject.update();
+    }
+  }
+
+  protected click(ev: MouseEvent): void {
+    const viewer = this.getViewer();
+    const relCoord = this.relativeCoords(ev);
+    const x = relCoord.x;
+    const y = relCoord.y;
+
+    const isNotDragging =
+      Math.abs(x - this.mouseDownPosition.x) < CLICK_DELTA && Math.abs(y - this.mouseDownPosition.y) < CLICK_DELTA;
+
+    if (viewer && viewer.getEnableAutoSelect() && isNotDragging) {
+      viewer.unselect();
+      viewer.select(x, y, x, y);
+      this.subject.update();
+
+      const selectionSet = viewer.getSelected();
+      const handles = this.subject.getSelected();
+      this.onmessage({ type: "select", data: selectionSet, handles });
+    }
+  }
+
+  protected dblclick(ev: MouseEvent): void {
+    const viewer = this.getViewer();
+    const relCoord = this.relativeCoords(ev);
+    const x = relCoord.x;
+    const y = relCoord.y;
+
+    const device = viewer.getActiveDevice();
+    const clickView = device.viewAt([x, y]);
+    if (clickView && !clickView.active) {
+      viewer.activeView = clickView;
+      clickView.delete();
+      this.subject.update();
+    } else {
+      if (viewer && viewer.getEnableAutoSelect()) {
+        const pSelected = viewer.getSelected();
+
+        if (!pSelected.isNull() && pSelected.numItems() !== 0) {
+          const itr = pSelected.getIterator();
+          const entity = itr.getEntity();
+          viewer.zoomToEntity(entity);
+
+          this.onmessage({ type: "zoomtoentity", data: entity });
+          this.subject.update();
+
+          this.deleteAll([itr, entity]);
+        }
+      }
+    }
+
+    device.delete();
+  }
+
+  protected start(x: number, y: number, absoluteX = 0, absoluteY = 0): void {}
+
+  protected drag(x: number, y: number, absoluteX = 0, absoluteY = 0): void {}
+
+  protected end(x: number, y: number): void {}
+
+  protected beginInteractivity = () => {
+    const viewer = this.getViewer();
+    const view = viewer.activeView;
+    if (view["beginInteractivity"]) {
+      view.beginInteractivity(INTERACTIVITY_FPS);
+      this.subject.update();
+    }
+    view.delete();
+  };
+
+  protected endInteractivity = () => {
+    const viewer = this.getViewer();
+    const view = viewer.activeView;
+    if (view["endInteractivity"]) {
+      view.endInteractivity();
+
+      const device = this.getViewer().getActiveDevice();
+      const canvas = this.m_module.canvas;
+      device.invalidate([0, 0, canvas.width, canvas.height]);
+      device.delete();
+      this.subject.update();
+    }
+    view.delete();
+  };
+
+  protected getActiveMarkupEntity(entityName: string): any {
+    return this.subject.addMarkupEntity(entityName);
+  }
+
+  private syncOverlayView(): any {
+    return this.subject.syncOverlay();
+  }
+
+  protected deleteAll(objects): void {
+    for (const obj of objects) {
+      obj?.delete?.();
+    }
+  }
+
+  public updatePreview(): void {}
+
+  private static _isGestureActive = false;
+
+  protected static set isGestureActive(value: boolean) {
+    if (OdBaseDragger._isGestureActive === value) {
+      return;
+    }
+
+    OdBaseDragger._isGestureActive = value;
+    if (OdBaseDragger._isGestureActive) {
+      OdBaseDragger.needSkipPointerUp = true;
+    }
+  }
+
+  protected static get isGestureActive() {
+    return OdBaseDragger._isGestureActive;
+  }
+
+  private static _needSkipPointerUp = false;
+
+  private static get needSkipPointerUp() {
+    if (OdBaseDragger._needSkipPointerUp) {
+      OdBaseDragger.needSkipPointerUp = false;
+      return true;
+    }
+
+    return false;
+  }
+
+  private static set needSkipPointerUp(value: boolean) {
+    OdBaseDragger._needSkipPointerUp = value;
+  }
+}

package/src/Viewer/Draggers/Common/OdaGeAction.ts

@@ -0,0 +1,146 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2021, 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-2021 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 { Matrix3d, OdTvPlane, Point3d, Vector3d } from "./Geometry";
+
+export type ViewParams = {
+  position: number[];
+  target: number[];
+  upVector: number[];
+  viewFieldWidth: number;
+  viewFieldHeight: number;
+  perspective: boolean;
+};
+
+export class OdaGeAction {
+  protected m_module;
+
+  constructor(module: any) {
+    this.m_module = module;
+  }
+
+  protected getViewer(): any {
+    return this.m_module.getViewer();
+  }
+
+  protected getModel(): any {
+    return this.getViewer().getMarkupModel();
+  }
+
+  protected copyPoint(point: Point3d): Point3d {
+    const p: Point3d = new this.m_module.Point3d();
+    p.set(point.x, point.y, point.z);
+    return p;
+  }
+
+  protected createVector3d(): Vector3d {
+    return new this.m_module.Vector3d();
+  }
+
+  protected createPoint3d(): Point3d {
+    return new this.m_module.Point3d();
+  }
+
+  protected createMatrix3d(): Matrix3d {
+    return new this.m_module.Matrix3d();
+  }
+
+  protected createPlane(): OdTvPlane {
+    return new this.m_module.OdTvPlane();
+  }
+
+  protected toVector(geVector): Vector3d {
+    return this.m_module.Vector3d.createFromArray(geVector);
+  }
+
+  protected toGeVector(v: Vector3d): number[] {
+    return [v.x, v.y, v.z];
+  }
+
+  protected toGePoint(point: Point3d): number[] {
+    return [point.x, point.y, point.z];
+  }
+
+  protected toPoint(gePoint: number[]): Point3d {
+    return this.m_module.Point3d.createFromArray(gePoint);
+  }
+
+  protected screenToWorld(x: number, y: number): Point3d {
+    return this.toPoint(this.m_module.getViewer().screenToWorld(x, y));
+  }
+
+  protected toDoubleArray(points: Point3d[]): number[] {
+    const p: number[] = [];
+    for (let i = 0; i < points.length; i++) {
+      p.push(points[i].x);
+      p.push(points[i].y);
+      p.push(points[i].z);
+    }
+    return p;
+  }
+
+  protected correctCameraTarget(): void {
+    const params = this.getViewParams();
+    const ext = this.m_module.getViewer().getActiveExtents();
+    const { min, max } = ext;
+    const target = this.toPoint(params.target);
+
+    const contains =
+      target.x >= min.x &&
+      target.y >= min.y &&
+      target.z >= min.z &&
+      target.x <= max.x &&
+      target.y <= max.y &&
+      target.z <= max.z;
+    if (!contains) {
+      params.target = ext.center();
+      this.setViewParams(params);
+    }
+  }
+
+  protected setViewParams = (params: ViewParams) => {
+    const extView = this.m_module.getViewer().getActiveTvExtendedView();
+    extView.setView(
+      params.position,
+      params.target,
+      params.upVector,
+      params.viewFieldWidth,
+      params.viewFieldHeight,
+      params.perspective
+    );
+    extView.delete?.();
+  };
+
+  protected getViewParams = () => {
+    const view = this.m_module.getViewer().activeView;
+    const obj = {
+      position: view.viewPosition,
+      target: view.viewTarget,
+      upVector: view.upVector,
+      viewFieldWidth: view.viewFieldWidth,
+      viewFieldHeight: view.viewFieldHeight,
+      perspective: view.perspective,
+    } as ViewParams;
+    view.delete?.();
+    return obj;
+  };
+}