@inweb/client 25.2.2

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;
+  };
+}

package/src/Viewer/Draggers/MeasureLineDragger/MeasureLineItem.ts

@@ -0,0 +1,248 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 * as utils from "./MeasureUtils";
+
+export class MeasureLineItem {
+  protected htmlElemStartPoint: HTMLElement;
+  protected htmlElemEndPoint: HTMLElement;
+  protected htmlElemLine: HTMLElement;
+  protected htmlElemTitle: HTMLElement;
+  protected startPoint: number[];
+  protected endPoint: number[];
+  protected unit: string;
+  protected scale: number;
+  protected size: number;
+  protected style: CSSStyleDeclaration;
+  protected viewer: any;
+  protected moduleInstance: any;
+  protected targetElement: HTMLElement;
+  protected isFinishDraw: boolean;
+
+  public lineThickness: number;
+
+  constructor(targetElement: HTMLElement, viewer: any, moduleInstance: any) {
+    this.htmlElemStartPoint = null;
+    this.htmlElemEndPoint = null;
+    this.htmlElemLine = null;
+    this.htmlElemTitle = null;
+
+    this.startPoint = null;
+    this.endPoint = null;
+
+    this.unit = "";
+    this.scale = 1.0;
+    this.size = 10.0;
+    this.lineThickness = 2;
+
+    this.style = {
+      border: "2px solid #FFFFFF",
+      background: "#009bff",
+      color: "white",
+      boxShadow: "0 0 10px rgba(0,0,0,0.5)",
+    } as CSSStyleDeclaration;
+
+    this.htmlElemStartPoint = utils.createHtmlElementIfNeed(this.htmlElemStartPoint, targetElement, "ruler-start");
+    this.htmlElemEndPoint = utils.createHtmlElementIfNeed(this.htmlElemEndPoint, targetElement, "ruler-end");
+    this.htmlElemLine = utils.createHtmlElementIfNeed(this.htmlElemLine, targetElement, "ruler-line");
+    this.htmlElemTitle = utils.createHtmlElementIfNeed(this.htmlElemTitle, targetElement, "ruler-value");
+
+    this.viewer = viewer;
+    this.moduleInstance = moduleInstance;
+    this.targetElement = targetElement;
+    this.isFinishDraw = false;
+  }
+
+  drawMeasureLine(): void {
+    const pointSize = this.size;
+    const rect = this.moduleInstance.canvas.getBoundingClientRect();
+
+    // draw start point
+    if (this.startPoint) {
+      this.htmlElemStartPoint = utils.createHtmlElementIfNeed(
+        this.htmlElemStartPoint,
+        this.targetElement,
+        "ruler-start"
+      );
+
+      const pScreenStart = utils.worldToScreen(this.startPoint, this.moduleInstance, this.viewer);
+      if (utils.isInsideRect(pScreenStart, rect.width, rect.height)) {
+        this.htmlElemStartPoint.style.display = "block";
+        this.htmlElemStartPoint.style.cursor = "pointer";
+        this.htmlElemStartPoint.style.position = "absolute";
+        this.htmlElemStartPoint.style.top = `${pScreenStart.y - pointSize / 2}px`;
+        this.htmlElemStartPoint.style.left = `${pScreenStart.x - pointSize / 2}px`;
+        this.htmlElemStartPoint.style.borderRadius = `${pointSize}px`;
+        this.htmlElemStartPoint.style.border = this.style.border;
+        this.htmlElemStartPoint.style.background = this.style.background;
+        this.htmlElemStartPoint.style.zIndex = "2";
+        this.htmlElemStartPoint.style.width = `${pointSize}px`;
+        this.htmlElemStartPoint.style.height = `${pointSize}px`;
+        this.htmlElemStartPoint.style.boxShadow = this.style.boxShadow;
+      } else {
+        this.htmlElemStartPoint.style.display = "none";
+      }
+    }
+
+    // draw end point
+    if (this.endPoint && this.isFinishDraw) {
+      this.htmlElemEndPoint = utils.createHtmlElementIfNeed(this.htmlElemEndPoint, this.targetElement, "ruler-end");
+
+      const pScreenEnd = utils.worldToScreen(this.endPoint, this.moduleInstance, this.viewer);
+
+      if (utils.isInsideRect(pScreenEnd, rect.width, rect.height)) {
+        this.htmlElemEndPoint.style.display = "block";
+        this.htmlElemEndPoint.style.cursor = "pointer";
+        this.htmlElemEndPoint.style.position = "absolute";
+        this.htmlElemEndPoint.style.top = `${pScreenEnd.y - pointSize / 2}px`;
+        this.htmlElemEndPoint.style.left = `${pScreenEnd.x - pointSize / 2}px`;
+        this.htmlElemEndPoint.style.borderRadius = `${pointSize}px`;
+        this.htmlElemEndPoint.style.border = this.style.border;
+        this.htmlElemEndPoint.style.background = this.style.background;
+        this.htmlElemEndPoint.style.zIndex = "2";
+        this.htmlElemEndPoint.style.width = `${pointSize}px`;
+        this.htmlElemEndPoint.style.height = `${pointSize}px`;
+        this.htmlElemEndPoint.style.boxShadow = this.style.boxShadow;
+      } else {
+        this.htmlElemEndPoint.style.display = "none";
+      }
+    }
+
+    if (this.endPoint && this.startPoint) {
+      const point1 = utils.worldToScreen(this.startPoint, this.moduleInstance, this.viewer);
+      const point2 = utils.worldToScreen(this.endPoint, this.moduleInstance, this.viewer);
+
+      const { p1, p2, angle, width } = utils.getDataForDrawLineWithFixed(point1, point2, rect.width, rect.height);
+
+      const dx = p2.x - p1.x;
+      const dy = p2.y - p1.y;
+
+      const height = this.lineThickness;
+      if (utils.isInsideRect(p1, rect.width, rect.height) && utils.isInsideRect(p2, rect.width, rect.height)) {
+        this.htmlElemLine = utils.createHtmlElementIfNeed(this.htmlElemLine, this.targetElement, "ruler-line");
+        this.htmlElemLine.style.display = "block";
+        this.htmlElemLine.style.cursor = "pointer";
+        this.htmlElemLine.style.position = "absolute";
+        this.htmlElemLine.style.top = `${p1.y}px`;
+        this.htmlElemLine.style.left = `${p1.x}px`;
+        this.htmlElemLine.style.width = `${width}px`;
+        this.htmlElemLine.style.transform = `rotate(${angle}deg)`;
+        this.htmlElemLine.style.transformOrigin = `0px ${height / 2}px`;
+        this.htmlElemLine.style.boxShadow = this.style.boxShadow;
+        this.htmlElemLine.style.border = "none";
+        this.htmlElemLine.style.background = this.style.background;
+        this.htmlElemLine.style.zIndex = "1";
+        this.htmlElemLine.style.height = `${height}px`;
+
+        const distance = `${this.getDistance()} ${this.unit}`;
+
+        const pX = p1.x + dx / 2;
+        const pY = p1.y + dy / 2;
+
+        const widthTitle = distance.length * 10;
+
+        this.htmlElemTitle = utils.createHtmlElementIfNeed(this.htmlElemTitle, this.targetElement, "ruler-value");
+        this.htmlElemTitle.style.display = "block";
+        this.htmlElemTitle.style.cursor = "pointer";
+        this.htmlElemTitle.style.font = "10px";
+        this.htmlElemTitle.style.color = "white";
+        this.htmlElemTitle.style.position = "Absolute";
+        this.htmlElemTitle.style.top = `${pY}px`;
+        this.htmlElemTitle.style.left = `${pX - widthTitle / 2}px`;
+        this.htmlElemTitle.style.width = `${widthTitle}px`;
+        this.htmlElemTitle.style.transformOrigin = "0px 0px";
+        this.htmlElemTitle.style.borderRadius = "5px";
+        this.htmlElemTitle.style.boxShadow = this.style.boxShadow;
+        this.htmlElemTitle.style.border = "none";
+        this.htmlElemTitle.style.background = this.style.background;
+        this.htmlElemTitle.style.zIndex = "3";
+        this.htmlElemTitle.style.padding = "2px";
+        this.htmlElemTitle.style.textAlign = "center";
+        this.htmlElemTitle.innerHTML = `${distance}`;
+      } else {
+        this.htmlElemLine.style.display = "none";
+        this.htmlElemTitle.style.display = "none";
+      }
+    }
+  }
+
+  getDistance(): number {
+    return utils.getDistance(this.startPoint, this.endPoint, this.moduleInstance) / this.scale;
+  }
+
+  setStartPoint(gePoint: number[]): void {
+    this.startPoint = gePoint;
+    this.drawMeasureLine();
+  }
+
+  setEndPoint(gePoint: number[], isFinish: boolean): void {
+    this.isFinishDraw = isFinish === undefined ? true : isFinish;
+    this.endPoint = gePoint;
+    this.drawMeasureLine();
+  }
+
+  update(): void {
+    this.drawMeasureLine();
+  }
+
+  setSize(size: number): void {
+    this.size = size;
+    this.drawMeasureLine();
+  }
+
+  clear(): void {
+    this.endPoint = null;
+    this.startPoint = null;
+    this.htmlElemStartPoint = utils.destroyHtmlElement(this.htmlElemStartPoint, this.targetElement);
+    this.htmlElemEndPoint = utils.destroyHtmlElement(this.htmlElemEndPoint, this.targetElement);
+    this.htmlElemLine = utils.destroyHtmlElement(this.htmlElemLine, this.targetElement);
+    this.htmlElemTitle = utils.destroyHtmlElement(this.htmlElemTitle, this.targetElement);
+  }
+
+  setUnit(unit: string): void {
+    this.unit = unit;
+    this.drawMeasureLine();
+  }
+
+  setConversionFactor(scale: number): void {
+    this.scale = scale;
+    this.drawMeasureLine();
+  }
+
+  setStyle(style: CSSStyleDeclaration): void {
+    this.style = style;
+    this.drawMeasureLine();
+  }
+
+  setSelectionReactor(reactor: any): void {
+    utils.onSetCallback(this.htmlElemStartPoint, reactor ? reactor.onStartPoint : null);
+    utils.onSetCallback(this.htmlElemEndPoint, reactor ? reactor.onEndPoint : null);
+    utils.onSetCallback(this.htmlElemTitle, reactor ? reactor.onTitle : null);
+  }
+
+  setSelectability(enable: boolean): void {
+    utils.onSetSelectivity(this.htmlElemStartPoint, enable);
+    utils.onSetSelectivity(this.htmlElemEndPoint, enable);
+    utils.onSetSelectivity(this.htmlElemLine, enable);
+    utils.onSetSelectivity(this.htmlElemTitle, enable);
+  }
+}

package/src/Viewer/Draggers/MeasureLineDragger/MeasureUtils.ts

@@ -0,0 +1,182 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { Point2d } from "../Common/Geometry";
+
+export function createHtmlElementIfNeed(
+  element: HTMLElement,
+  targetElement: HTMLElement,
+  dataTestId: string
+): HTMLElement {
+  if (!element) {
+    element = document.createElement("div");
+    element.setAttribute("data-testid", dataTestId);
+
+    targetElement.appendChild(element);
+  }
+  return element;
+}
+
+export function destroyHtmlElement(element: HTMLElement, targetElement: HTMLElement) {
+  if (element) {
+    targetElement.removeChild(element);
+  }
+  return null;
+}
+
+export function worldToScreen(gePoint: number[], moduleInstance, viewer): Point2d {
+  const worldPoint = moduleInstance.Point3d.createFromArray(gePoint);
+  const avp = viewer.activeView;
+  const mtx = avp.worldToDeviceMatrix;
+
+  const devicePoint = worldPoint.transformBy(mtx);
+
+  const res = { x: devicePoint.x / window.devicePixelRatio, y: devicePoint.y / window.devicePixelRatio };
+
+  mtx.delete();
+  worldPoint.delete();
+  devicePoint.delete();
+  avp.delete();
+  return res;
+}
+
+export function getDistance(gePoint1: number[], gePoint2: number[], moduleInstance: any) {
+  const tvPoint1 = moduleInstance.Point3d.createFromArray(gePoint1);
+  const tvPoint2 = moduleInstance.Point3d.createFromArray(gePoint2);
+
+  const distance = tvPoint1.distanceTo(tvPoint2).toFixed(2);
+
+  tvPoint1.delete();
+  tvPoint2.delete();
+
+  return distance;
+}
+
+export function getAngle(geStart: number[], geOrigin: number[], geEnd: number[], moduleInstance: any): number {
+  const tvStart = moduleInstance.Point3d.createFromArray(geStart);
+  const tvOrigin = moduleInstance.Point3d.createFromArray(geOrigin);
+  const tvEnd = moduleInstance.Point3d.createFromArray(geEnd);
+
+  const s1 = tvStart.sub(tvOrigin);
+  const s2 = tvEnd.sub(tvOrigin);
+
+  const v1 = s1.asVector();
+  const v2 = s2.asVector();
+
+  const angle = (180 * v1.angleTo(v2)) / Math.PI;
+
+  return angle;
+}
+
+export function getDataForDrawLine(p1: Point2d, p2: Point2d) {
+  const dx = p2.x - p1.x;
+  const dy = p2.y - p1.y;
+  let angle = (180 * Math.atan(dy / dx)) / Math.PI;
+  if (dx < 0) {
+    angle -= 180;
+  }
+  const width = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
+  return { angle, width };
+}
+
+function normalizeFloat(value: number): number {
+  return value < 0 ? Math.ceil(value) : Math.floor(value);
+}
+
+const lineSegmentsIntersect = (p1: Point2d, p2: Point2d, p3: Point2d, p4: Point2d): false | Point2d => {
+  const a_dx = p2.x - p1.x;
+  const a_dy = p2.y - p1.y;
+  const b_dx = p4.x - p3.x;
+  const b_dy = p4.y - p3.y;
+  const s = (-a_dy * (p1.x - p3.x) + a_dx * (p1.y - p3.y)) / (-b_dx * a_dy + a_dx * b_dy);
+  const t = (+b_dx * (p1.y - p3.y) - b_dy * (p1.x - p3.x)) / (-b_dx * a_dy + a_dx * b_dy);
+  return s >= 0 && s <= 1 && t >= 0 && t <= 1
+    ? {
+        x: normalizeFloat(p1.x + t * a_dx),
+        y: normalizeFloat(p1.y + t * a_dy),
+      }
+    : false;
+};
+
+function checkSegmentsIntersect(p1: Point2d, p2: Point2d, p3: Point2d, p4: Point2d, res: Point2d[]): void {
+  const r = lineSegmentsIntersect(p1, p2, p3, p4);
+  if (r) {
+    res.push(r);
+  }
+}
+
+export function isInsideRect(p: Point2d, width: number, height: number): boolean {
+  return p.x <= width && p.x >= 0 && p.y <= height && p.y >= 0;
+}
+
+export function getDataForDrawLineWithFixed(p1: Point2d, p2: Point2d, width: number, height: number) {
+  const pLU = { x: 0, y: 0 };
+  const pRU = { x: width, y: 0 };
+
+  const pLB = { x: 0, y: height };
+  const pRB = { x: width, y: height };
+
+  const intersects: Point2d[] = [];
+
+  checkSegmentsIntersect(p1, p2, pLU, pRU, intersects);
+  checkSegmentsIntersect(p1, p2, pLU, pLB, intersects);
+  checkSegmentsIntersect(p1, p2, pLB, pRB, intersects);
+  checkSegmentsIntersect(p1, p2, pRB, pRU, intersects);
+
+  let fixedP1: Point2d = null;
+  let fixedP2: Point2d = null;
+
+  if (intersects.length === 0) {
+    fixedP1 = p1;
+    fixedP2 = p2;
+  } else if (intersects.length === 1) {
+    if (isInsideRect(p1, width, height)) {
+      fixedP1 = p1;
+      fixedP2 = intersects[0];
+    } else {
+      fixedP1 = intersects[0];
+      fixedP2 = p2;
+    }
+  } else {
+    fixedP1 = intersects[0];
+    fixedP2 = intersects[1];
+  }
+
+  const dx = fixedP2.x - fixedP1.x;
+  const dy = fixedP2.y - fixedP1.y;
+  let angle = (180 * Math.atan(dy / dx)) / Math.PI;
+  if (dx < 0) {
+    angle -= 180;
+  }
+  const size = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
+  return { angle, width: size, p1: fixedP1, p2: fixedP2 };
+}
+
+export function onSetCallback(element: HTMLElement, cb: () => void): void {
+  if (element) {
+    element.onclick = cb ? () => cb() : () => {};
+  }
+}
+
+export function onSetSelectivity(element: HTMLElement, enable: boolean): void {
+  element.style.pointerEvents = enable ? "auto" : "none";
+}