@inweb/viewer-visualize 25.3.13

package/src/Viewer/Loaders/VsfXStreamingLoader.ts

@@ -0,0 +1,87 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { BaseLoader } from "./BaseLoader";
+import { UpdaterController, UpdateType } from "./UpdaterController";
+
+export class VsfXStreamingLoader extends BaseLoader {
+  override async load(): Promise<void> {
+    if (!this.viewer.visualizeJs) return;
+
+    const visLib = this.viewer.visLib();
+    const visViewer = visLib.getViewer();
+    const abortController = new AbortController();
+
+    const updaterController = new UpdaterController();
+    updaterController.initialize(this.viewer);
+
+    this.viewer._abortController = abortController;
+
+    let isFireDatabaseChunk = false;
+
+    const chunkLoadHandler = (progress, data) => {
+      if (!this.viewer.visualizeJs) return;
+
+      const status = visViewer.parseVsfx(data);
+      updaterController.update(UpdateType.kDelay);
+
+      this.viewer.emitEvent({ type: "geometryprogress", data: progress, model: this.model });
+
+      let state = false;
+      if (
+        status === visLib.DatabaseStreamStatus.ReadyServiceData ||
+        (status === visLib.DatabaseStreamStatus.Complete && !isFireDatabaseChunk)
+      ) {
+        isFireDatabaseChunk = true;
+        state = true;
+      }
+
+      if (state) {
+        updaterController.update(UpdateType.kForce);
+
+        this.viewer.syncOpenCloudVisualStyle(false);
+        this.viewer.syncOptions();
+        this.viewer.resize();
+
+        this.viewer.emitEvent({ type: "databasechunk", data, model: this.model });
+      } else {
+        this.viewer.emitEvent({ type: "geometrychunk", data, model: this.model });
+      }
+    };
+
+    console.time("File load time");
+    try {
+      this.viewer.emitEvent({ type: "geometrystart", model: this.model });
+
+      await this.model.partialDownloadResource(this.model.database, chunkLoadHandler, abortController.signal);
+      console.timeEnd("File load time");
+
+      updaterController.update(UpdateType.kNormal);
+
+      this.viewer.emitEvent({ type: "geometryend", model: this.model });
+    } catch (error) {
+      this.viewer.emitEvent({ type: "geometryerror", data: error, model: this.model });
+      throw error;
+    }
+  }
+}

package/src/Viewer/Markup/Api/IMarkupArrow.ts

@@ -0,0 +1,12 @@
+import { IMarkupObject } from "./IMarkupObject";
+
+export interface IMarkupArrow extends IMarkupObject {
+  getPoints(): { x: number; y: number }[];
+  setPoints(points: { x: number; y: number }[]);
+
+  getStartPoint(): { x: number; y: number };
+  setStartPoint(x: number, y: number);
+
+  getEndPoint(): { x: number; y: number };
+  setEndPoint(x: number, y: number);
+}

package/src/Viewer/Markup/Api/IMarkupCloud.ts

@@ -0,0 +1,15 @@
+import { IMarkupObject } from "./IMarkupObject";
+
+export interface IMarkupCloud extends IMarkupObject {
+  getPosition(): { x: number; y: number };
+  setPosition(x: number, y: number);
+
+  getWidth(): number;
+  setWidth(w: number);
+
+  getHeigth(): number;
+  setHeight(h: number);
+
+  getLineWidth(): number;
+  setLineWidth(size: number);
+}

package/src/Viewer/Markup/Api/IMarkupColorable.ts

@@ -0,0 +1,4 @@
+export interface IMarkupColorable {
+  getColor(): string;
+  setColor(hex: string): void;
+}

package/src/Viewer/Markup/Api/IMarkupEllipse.ts

@@ -0,0 +1,15 @@
+import { IMarkupObject } from "./IMarkupObject";
+
+export interface IMarkupEllipse extends IMarkupObject {
+  getPosition(): { x: number; y: number };
+  setPosition(x: number, y: number);
+
+  getRadiusX(): number;
+  setRadiusX(r: number);
+
+  getRadiusY(): number;
+  setRadiusY(r: number);
+
+  getLineWidth(): number;
+  setLineWidth(size: number);
+}

package/src/Viewer/Markup/Api/IMarkupImage.ts

@@ -0,0 +1,15 @@
+import { IMarkupObject } from "./IMarkupObject";
+
+export interface IMarkupImage extends IMarkupObject {
+  getPosition(): { x: number; y: number };
+  setPosition(x: number, y: number);
+
+  getSrc(): string;
+  setSrc(src: string);
+
+  getWidth(): number;
+  setWidth(w: number);
+
+  getHeight(): number;
+  setHeight(h: number);
+}

package/src/Viewer/Markup/Api/IMarkupLine.ts

@@ -0,0 +1,13 @@
+import { IMarkupObject } from "./IMarkupObject";
+
+export interface IMarkupLine extends IMarkupObject {
+  getPoints(): number[];
+
+  getLineWidth(): number;
+  setLineWidth(size: number);
+
+  getLineType(): string;
+  setLineType(type: string);
+
+  addPoints(points: [{ x: number; y: number }]);
+}

package/src/Viewer/Markup/Api/IMarkupObject.ts

@@ -0,0 +1,15 @@
+export interface IMarkupObject {
+  // link to library object (Konva, Vis...)
+  ref(): any;
+  id(): string;
+  enableMouseEditing(value: boolean);
+  type(): string;
+
+  getRotation(): number;
+  setRotation(degrees: number): void;
+
+  getZIndex(): number;
+  setZIndex(zIndex: number): void;
+
+  delete();
+}

package/src/Viewer/Markup/Api/IMarkupRectangle.ts

@@ -0,0 +1,15 @@
+import { IMarkupObject } from "./IMarkupObject";
+
+export interface IMarkupRectangle extends IMarkupObject {
+  getPosition(): { x: number; y: number };
+  setPosition(x: number, y: number);
+
+  getWidth(): number;
+  setWidth(w: number);
+
+  getHeigth(): number;
+  setHeight(h: number);
+
+  getLineWidth(): number;
+  setLineWidth(size: number);
+}

package/src/Viewer/Markup/Api/IMarkupText.ts

@@ -0,0 +1,12 @@
+import { IMarkupObject } from "./IMarkupObject";
+
+export interface IMarkupText extends IMarkupObject {
+  getText(): string;
+  setText(text: string): void;
+
+  getPosition(): { x: number; y: number };
+  setPosition(x: number, y: number);
+
+  getFontSize();
+  setFontSize(size: number);
+}

package/src/Viewer/Markup/Api/Impl/Konva/KonvaArrow.ts

@@ -0,0 +1,117 @@
+import Konva from "konva";
+import { IMarkupArrow } from "../../IMarkupArrow";
+import { IMarkupColorable } from "../../IMarkupColorable";
+
+export class KonvaArrow implements IMarkupArrow, IMarkupColorable {
+  private _ref: Konva.Arrow;
+
+  constructor(
+    params: {
+      start: { x: number; y: number };
+      end: { x: number; y: number };
+      color?: string;
+      id?: string;
+    },
+    ref = null
+  ) {
+    if (ref) {
+      this._ref = ref;
+      return;
+    }
+
+    if (!params.start || !params.end) return;
+
+    this._ref = new Konva.Arrow({
+      stroke: params.color ?? "#ff0000",
+      fill: params.color ?? "#ff0000",
+      strokeWidth: 4,
+      globalCompositeOperation: "source-over",
+      lineCap: "round",
+      lineJoin: "round",
+      points: [params.start.x, params.start.y, params.end.x, params.end.y],
+      draggable: true,
+      strokeScaleEnabled: false,
+    });
+
+    this._ref.id(this._ref._id.toString());
+  }
+
+  ref() {
+    return this._ref;
+  }
+
+  id(): string {
+    return this._ref.id();
+  }
+
+  enableMouseEditing(value: boolean) {
+    this._ref.draggable(value);
+  }
+
+  type(): string {
+    return "arrow";
+  }
+
+  getColor(): string {
+    return this._ref.stroke();
+  }
+
+  setColor(hex: string) {
+    this._ref.stroke(hex);
+  }
+
+  getRotation(): number {
+    return this._ref.rotation();
+  }
+
+  setRotation(degrees: number): void {
+    this._ref.rotation(degrees);
+  }
+
+  getZIndex(): number {
+    return this._ref.zIndex();
+  }
+
+  setZIndex(zIndex: number): void {
+    this._ref.zIndex(zIndex);
+  }
+
+  delete() {
+    this._ref.destroy();
+    this._ref = null;
+  }
+
+  getPoints(): { x: number; y: number }[] {
+    const points = this._ref.points();
+    return [
+      { x: points[0], y: points[1] },
+      { x: points[2], y: points[3] },
+    ];
+  }
+
+  setPoints(points: { x: number; y: number }[]) {
+    if (points.length === 2) {
+      this._ref.points([points[0].x, points[0].y, points[1].x, points[1].y]);
+    }
+  }
+
+  getStartPoint(): { x: number; y: number } {
+    const points = this._ref.points();
+    return { x: points[0], y: points[1] };
+  }
+
+  setStartPoint(x: number, y: number) {
+    const points = this._ref.points();
+    this._ref.points([x, y, points[2], points[3]]);
+  }
+
+  getEndPoint(): { x: number; y: number } {
+    const points = this._ref.points();
+    return { x: points[2], y: points[3] };
+  }
+
+  setEndPoint(x: number, y: number) {
+    const points = this._ref.points();
+    this._ref.points([points[0], points[1], x, y]);
+  }
+}

package/src/Viewer/Markup/Api/Impl/Konva/KonvaCloud.ts

@@ -0,0 +1,208 @@
+import Konva from "konva";
+import { IMarkupColorable } from "../../IMarkupColorable";
+import { IMarkupCloud } from "../../IMarkupCloud";
+
+export class KonvaCloud implements IMarkupCloud, IMarkupColorable {
+  private _ref: Konva.Shape;
+
+  constructor(
+    params: {
+      position: { x: number; y: number };
+      width?: number;
+      height?: number;
+      lineWidth?: number;
+      color?: string;
+      id?: string;
+    },
+    ref = null
+  ) {
+    if (ref) {
+      this._ref = ref;
+      return;
+    }
+
+    if (!params.position || !params.width || !params.height) return;
+
+    const arcRadius = 16;
+
+    this._ref = new Konva.Shape({
+      x: params.position.x,
+      y: params.position.y,
+      width: params.width ?? 200,
+      height: params.height ?? 200,
+      stroke: params.color ?? "#ff0000",
+      strokeWidth: params.lineWidth ?? 5,
+      draggable: true,
+      strokeScaleEnabled: false,
+      globalCompositeOperation: "source-over",
+      sceneFunc: (context, shape) => {
+        function calculateMidpoint(position, width, height) {
+          const midX = position.x + width / 2;
+          const midY = position.y + height / 2;
+          return { x: midX, y: midY };
+        }
+
+        const points = [
+          { x: 0, y: 0 },
+          { x: 0 + this._ref.width(), y: 0 },
+          { x: 0 + this._ref.width(), y: 0 + this._ref.height() },
+          { x: 0, y: 0 + this._ref.height() },
+          { x: 0, y: 0 },
+        ];
+
+        const midPoint = calculateMidpoint({ x: 0, y: 0 }, this._ref.width(), this._ref.height());
+
+        const baseArcLength = 30;
+        context.beginPath();
+        for (let iPoint = 0; iPoint < points.length - 1; iPoint++) {
+          let approxArcLength = baseArcLength;
+          const dx = points[iPoint + 1].x - points[iPoint].x;
+          const dy = points[iPoint + 1].y - points[iPoint].y;
+          const length = Math.sqrt(dx * dx + dy * dy);
+
+          const arcCount = Math.floor(length / approxArcLength);
+          const lengthMod = length % approxArcLength;
+          approxArcLength = baseArcLength + arcCount / lengthMod;
+
+          let pX = points[iPoint].x + dx / arcCount / 2;
+          let pY = points[iPoint].y + dy / arcCount / 2;
+          const pEndX = points[iPoint + 1].x;
+          const pEndY = points[iPoint + 1].y;
+          const endAngle = Math.atan((pEndY - pY) / (pEndX - pX));
+          const startAngle = endAngle + Math.PI;
+          const counterClockwise = pX > midPoint.x && pY > midPoint.y;
+          for (let iArc = 0; iArc < arcCount; iArc++) {
+            if (counterClockwise) {
+              context.arc(pX, pY, arcRadius, endAngle, startAngle);
+            } else {
+              context.arc(pX, pY, arcRadius, startAngle, endAngle);
+            }
+
+            pX += dx / arcCount;
+            pY += dy / arcCount;
+          }
+        }
+
+        context.closePath();
+        // (!) Konva specific method, it is very important
+        // it will apply are required styles
+        context.fillStrokeShape(shape);
+      },
+    });
+
+    this._ref.className = "Cloud";
+
+    this._ref.on("transform", (e) => {
+      const attrs = e.target.attrs;
+
+      const minWidth = 100;
+      const minHeight = 100;
+
+      const newWidth = this._ref.width() * attrs.scaleX;
+      const newHeight = this._ref.height() * attrs.scaleY;
+
+      if (newWidth < minWidth || newHeight < minHeight) {
+        this._ref.scale({ x: 1, y: 1 });
+        return;
+      }
+
+      if (Math.abs(attrs.scaleX - 1) > 10e-6) {
+        this._ref.width(newWidth);
+      }
+
+      if (Math.abs(attrs.scaleY - 1) > 10e-6) {
+        this._ref.height(newHeight);
+      }
+
+      this._ref.scale({ x: 1, y: 1 });
+    });
+
+    this._ref.getSelfRect = () => {
+      return {
+        x: 0 - arcRadius,
+        y: 0 - arcRadius,
+        width: this._ref.width() + 2 * arcRadius,
+        height: this._ref.height() + 2 * arcRadius,
+      };
+    };
+
+    this._ref.id(this._ref._id.toString());
+  }
+
+  ref() {
+    return this._ref;
+  }
+
+  id(): string {
+    return this._ref.id();
+  }
+
+  enableMouseEditing(value: boolean) {
+    this._ref.draggable(value);
+  }
+
+  type(): string {
+    return "cloud";
+  }
+
+  getColor(): string {
+    return this._ref.stroke();
+  }
+
+  setColor(hex: string) {
+    this._ref.stroke(hex);
+  }
+
+  getRotation(): number {
+    return this._ref.rotation();
+  }
+
+  setRotation(degrees: number): void {
+    this._ref.rotation(degrees);
+  }
+
+  getZIndex(): number {
+    return this._ref.zIndex();
+  }
+
+  setZIndex(zIndex: number): void {
+    this._ref.zIndex(zIndex);
+  }
+
+  delete() {
+    this._ref.destroy();
+    this._ref = null;
+  }
+
+  getPosition() {
+    return this._ref.position();
+  }
+
+  setPosition(x: number, y: number) {
+    this._ref.position({ x, y });
+  }
+
+  getWidth(): number {
+    return this._ref.width();
+  }
+
+  setWidth(w: number) {
+    this._ref.width(w);
+  }
+
+  getHeigth(): number {
+    return this._ref.height();
+  }
+
+  setHeight(h: number) {
+    this._ref.height(h);
+  }
+
+  getLineWidth(): number {
+    return this._ref.strokeWidth();
+  }
+
+  setLineWidth(size: number) {
+    this._ref.strokeWidth(size);
+  }
+}

package/src/Viewer/Markup/Api/Impl/Konva/KonvaEllipse.ts

@@ -0,0 +1,118 @@
+import Konva from "konva";
+import { IMarkupEllipse } from "../../IMarkupEllipse";
+import { IMarkupColorable } from "../../IMarkupColorable";
+
+export class KonvaEllipse implements IMarkupEllipse, IMarkupColorable {
+  private _ref: Konva.Ellipse;
+
+  constructor(
+    params: {
+      position: { x: number; y: number };
+      radius: { x: number; y: number };
+      lineWidth?: number;
+      color?: string;
+      id?: string;
+    },
+    ref = null
+  ) {
+    if (ref) {
+      this._ref = ref;
+      return;
+    }
+
+    if (!params.position) return;
+
+    this._ref = new Konva.Ellipse({
+      stroke: params.color ?? "#ff0000",
+      strokeWidth: params.lineWidth ?? 4,
+      globalCompositeOperation: "source-over",
+      lineCap: "round",
+      lineJoin: "round",
+      x: params.position.x,
+      y: params.position.y,
+      radiusX: params.radius.x,
+      radiusY: params.radius.y,
+      draggable: true,
+      strokeScaleEnabled: false,
+    });
+
+    this._ref.id(this._ref._id.toString());
+  }
+
+  getPosition(): { x: number; y: number } {
+    return this._ref.position();
+  }
+
+  setPosition(x: number, y: number) {
+    this._ref.setPosition({ x, y });
+  }
+
+  getRadiusX(): number {
+    return this._ref.radiusX();
+  }
+
+  setRadiusX(r: number) {
+    this._ref.radius({ x: r, y: this._ref.radiusY() });
+  }
+
+  getRadiusY(): number {
+    return this._ref.radiusY();
+  }
+
+  setRadiusY(r: number) {
+    this._ref.radius({ x: this._ref.radiusX(), y: r });
+  }
+
+  getLineWidth(): number {
+    return this._ref.strokeWidth();
+  }
+
+  setLineWidth(size: number) {
+    this._ref.strokeWidth(size);
+  }
+
+  ref() {
+    return this._ref;
+  }
+
+  id(): string {
+    return this._ref.id();
+  }
+
+  enableMouseEditing(value: boolean) {
+    this._ref.draggable(value);
+  }
+
+  type(): string {
+    return "ellipse";
+  }
+
+  getColor(): string {
+    return this._ref.stroke();
+  }
+
+  setColor(hex: string) {
+    this._ref.stroke(hex);
+  }
+
+  getRotation(): number {
+    return this._ref.rotation();
+  }
+
+  setRotation(degrees: number): void {
+    this._ref.rotation(degrees);
+  }
+
+  getZIndex(): number {
+    return this._ref.zIndex();
+  }
+
+  setZIndex(zIndex: number): void {
+    this._ref.zIndex(zIndex);
+  }
+
+  delete() {
+    this._ref.destroy();
+    this._ref = null;
+  }
+}