@inweb/viewer-visualize 25.3.13

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

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

@@ -0,0 +1,166 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { OdBaseDragger } from "../Common/OdBaseDragger";
+import { MeasureLineItem } from "./MeasureLineItem";
+
+function renameUnit(table, unit) {
+  return table[unit] || unit;
+}
+
+export class MeasureLineDragger extends OdBaseDragger {
+  protected lineThickness: number;
+  protected gripingRadius: number;
+  protected firstPoint: number[];
+  protected secondPoint: number[];
+  protected renameUnitTable: any;
+  protected items: MeasureLineItem[];
+  protected m_overlayElement: HTMLElement;
+  protected previewMeasureLine: MeasureLineItem;
+
+  constructor(subject: Viewer) {
+    super(subject);
+    this.lineThickness = 2;
+    this.press = false;
+    this.gripingRadius = 5.0;
+    this.firstPoint = null;
+    this.secondPoint = null;
+
+    this.renameUnitTable = {
+      Millimeters: "mm",
+      Centimeters: "cm",
+      Meters: "m",
+      Feet: "ft",
+      Inches: "in",
+      Yards: "yd",
+      Kilometers: "km",
+      Miles: "mi",
+      Micrometers: "µm",
+      MicroInches: "µin",
+      Undefined: " ",
+    };
+
+    this.items = [];
+
+    this.canvasEvents.push("resize");
+  }
+
+  override initialize(): void {
+    super.initialize();
+
+    this.m_overlayElement = document.createElement("div");
+    this.m_overlayElement.style.background = "rgba(0,0,0,0)";
+    this.m_overlayElement.style.position = "fixed";
+    this.m_overlayElement.style.zIndex = "1";
+    this.m_overlayElement.style.pointerEvents = "none";
+    document.body.appendChild(this.m_overlayElement);
+
+    this.resize();
+  }
+
+  override dispose(): void {
+    super.dispose();
+    this.m_overlayElement.remove();
+  }
+
+  override updatePreview(): void {
+    this.items.forEach((item) => item.update());
+  }
+
+  resize(): void {
+    const rect = this.m_module.canvas.getBoundingClientRect();
+
+    this.m_overlayElement.style.top = `${rect.top}px`;
+    this.m_overlayElement.style.left = `${rect.left}px`;
+    this.m_overlayElement.style.width = `${rect.width}px`;
+    this.m_overlayElement.style.height = `${rect.height}px`;
+  }
+
+  getSnapPointRadius(): number {
+    const view = this.getViewer().activeView;
+    const corners = view.viewDcCorners();
+
+    const pt1 = corners.lowerLeft;
+    const pt2 = corners.upperRight;
+
+    pt2[0] -= pt1[0];
+    pt2[1] -= pt1[1];
+
+    return Math.min(pt2[0], pt2[1]) / 120;
+  }
+
+  override drag(x: number, y: number): void {
+    this.createNewMeasureIfNeed();
+    const point = this.getViewer().getSnapPoint(x, y, this.gripingRadius);
+
+    if (this.isDragging) {
+      if (point) {
+        if (this.firstPoint) {
+          this.secondPoint = point;
+          this.previewMeasureLine.setStartPoint(this.firstPoint);
+          this.previewMeasureLine.setEndPoint(this.secondPoint, true);
+        } else {
+          this.firstPoint = point;
+          this.previewMeasureLine.setStartPoint(this.firstPoint);
+        }
+      } else {
+        this.secondPoint = null;
+        this.previewMeasureLine.clear();
+        this.previewMeasureLine.setStartPoint(this.firstPoint);
+        this.previewMeasureLine.setEndPoint(this.getViewer().screenToWorld(x, y), false);
+      }
+    } else {
+      if (point) {
+        this.previewMeasureLine.setStartPoint(point);
+      } else {
+        this.previewMeasureLine.clear();
+      }
+    }
+  }
+
+  override end(): void {
+    if (this.firstPoint && this.secondPoint) {
+      const newLineMeasure = this.createMeasureLine();
+      newLineMeasure.setStartPoint(this.firstPoint);
+      newLineMeasure.setEndPoint(this.secondPoint, true);
+    }
+    this.firstPoint = null;
+    this.secondPoint = null;
+    this.previewMeasureLine.clear();
+  }
+
+  createNewMeasureIfNeed(): void {
+    if (!this.previewMeasureLine) {
+      this.previewMeasureLine = this.createMeasureLine();
+    }
+  }
+
+  createMeasureLine(): MeasureLineItem {
+    const viewer = this.m_module.getViewer();
+    const item = new MeasureLineItem(this.m_overlayElement, viewer, this.m_module);
+    item.lineThickness = this.lineThickness || item.lineThickness;
+    item.setUnit(renameUnit(this.renameUnitTable, viewer.getUnit()));
+    this.items.push(item);
+    return item;
+  }
+}