@inweb/markup 25.7.4

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@inweb/markup",
+  "version": "25.7.4",
+  "description": "JavaScript 2D markups",
+  "homepage": "https://cloud.opendesign.com/docs/index.html",
+  "license": "SEE LICENSE IN LICENSE",
+  "author": "Open Design Alliance",
+  "keywords": [
+    "opendesign",
+    "opencloud",
+    "inweb",
+    "markup"
+  ],
+  "sideEffects": false,
+  "main": "dist/markup.js",
+  "module": "dist/markup.module.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "dist",
+    "lib/**/*.d.ts",
+    "src"
+  ],
+  "scripts": {
+    "build": "rollup -c rollup.config.js",
+    "test": "karma start karma.conf.js",
+    "docs": "typedoc"
+  },
+  "dependencies": {
+    "@inweb/eventemitter2": "~25.7.4",
+    "@inweb/viewer-core": "~25.7.4"
+  },
+  "devDependencies": {
+    "canvas": "^2.11.2",
+    "konva": "^9.2.0"
+  },
+  "peerDependencies": {
+    "canvas": "^2.11.2",
+    "konva": "^9.2.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,35 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, 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-2024 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+export { IMarkup, MarkupMode } from "./markup/IMarkup";
+export { IMarkupArrow } from "./markup/IMarkupArrow";
+export { IMarkupCloud } from "./markup/IMarkupCloud";
+export { IMarkupColorable } from "./markup/IMarkupColorable";
+export { IMarkupEllipse } from "./markup/IMarkupEllipse";
+export { IMarkupImage } from "./markup/IMarkupImage";
+export { IMarkupLine, MarkupLineType } from "./markup/IMarkupLine";
+export { IMarkupObject } from "./markup/IMarkupObject";
+export { IMarkupRectangle } from "./markup/IMarkupRectangle";
+export { IMarkupText } from "./markup/IMarkupText";
+export { IWorldTransform } from "./markup/IWorldTransform";
+export { KonvaMarkup as Markup } from "./markup/Konva/KonvaMarkup";

package/src/markup/IMarkup.ts

@@ -0,0 +1,173 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, 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-2024 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 { IEventEmitter } from "@inweb/eventemitter2";
+import { IViewpoint } from "@inweb/viewer-core";
+import { IWorldTransform } from "./IWorldTransform";
+import { IMarkupObject } from "./IMarkupObject";
+
+/**
+ * Defines type of markup object. For `VisualizeJS` markup only the `Line` and `Text` markup
+ * objects are supported.
+ */
+export enum MarkupMode {
+  SelectMarkup = "SelectMarkup",
+  Line = "Line",
+  Text = "Text",
+  Rectangle = "Rectangle",
+  Ellipse = "Ellipse",
+  Arrow = "Arrow",
+  Image = "Image",
+  Cloud = "Cloud",
+}
+
+/**
+ * 2D markup core interface.
+ */
+export interface IMarkup {
+  /**
+   * Line width of the markup objects. Default is 4.
+   */
+  lineWidth: number;
+
+  /**
+   * Type of the markup line. Available types: `solid`, `dot`, `dash`. Default is `solid`.
+   */
+  lineType: string;
+
+  /**
+   * Font size of the markup text. Default is 34 px.
+   */
+  fontSize: number;
+
+  /**
+   * Start method to init Markup support for the Viewer instance.
+   *
+   * @param canvas -
+   *   {@link https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement | HTMLCanvasElement}
+   *   used to operate on.
+   * @param canvasEvents - List of `canvas` events that the markup should redirect to the `viewer`.
+   * @param viewer - `Viewer` instance viewer that receives `canvas` events.
+   * @param worldTransformer - Transformer of screen space into world space and vice versa. If
+   *   a transformer is defined, viewpoint objects will be stored in world coordinates,
+   *   otherwise in screen coordinates.
+   */
+  initialize(
+    canvas: HTMLCanvasElement,
+    canvasEvents: string[],
+    viewer?: IEventEmitter,
+    worldTransformer?: IWorldTransform
+  ): void;
+
+  /**
+   * Releases all resources allocated by this `Markup` instance. Call this method before
+   * release the `Markup` instance.
+   */
+  dispose(): void;
+
+  /**
+   * Create markup overlay.
+   */
+  syncOverlay(): void;
+
+  /**
+   * Clear markup overlay.
+   */
+  clearOverlay(): void;
+
+  /**
+   * Set markup color.
+   *
+   * @param r - `Red` part of color.
+   * @param g - `Green` part of color.
+   * @param b - `Blue` part of color.
+   */
+  setMarkupColor(r: number, g: number, b: number): void;
+
+  /**
+   * Get markup color.
+   *
+   * @returns Color with `RGB` values.
+   */
+  getMarkupColor(): { r: number; g: number; b: number };
+
+  /**
+   * Colorize all markup entities with the specified color.
+   *
+   * @param r - `Red` part of color.
+   * @param g - `Green` part of color.
+   * @param b - `Blue` part of color.
+   */
+  colorizeAllMarkup(r: number, g: number, b: number): void;
+
+  /**
+   * Colorize all selected markup entities with the specified color.
+   *
+   * @param r - `Red` part of color.
+   * @param g - `Green` part of color.
+   * @param b - `Blue` part of color.
+   */
+  colorizeSelectedMarkups(r: number, g: number, b: number): void;
+
+  /**
+   * Draw a viewpoint. To get a list of available model viewpoints, use the
+   *
+   * @param viewpoint - Viewpoint data.
+   */
+  setViewpoint(viewpoint: IViewpoint): void;
+
+  /**
+   * Create a viewpoint.
+   */
+  getViewpoint(): IViewpoint;
+
+  /**
+   * Create a Markup object.
+   *
+   * @param type - string identificator of Markup object type.
+   * @param params - Markup object parameters.
+   */
+  createObject(type: string, params: any): IMarkupObject;
+
+  /**
+   * Get Markup objects.
+   */
+  getObjects(): IMarkupObject[];
+
+  /**
+   * Get selected Markup objects.
+   */
+  getSelectedObjects(): IMarkupObject[];
+
+  /**
+   * Select Markup objects.
+   *
+   * @param objects
+   */
+  selectObjects(objects: IMarkupObject[]): void;
+
+  /**
+   * Clear Markup objects selection.
+   */
+  clearSelected(): void;
+}

package/src/markup/IMarkupArrow.ts

@@ -0,0 +1,69 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, 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-2024 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 { IMarkupObject } from "./IMarkupObject";
+
+/**
+ * Arrow Markup object
+ */
+export interface IMarkupArrow extends IMarkupObject {
+  /**
+   * Get points of current Arrow
+   *
+   * @returns {{ x: number; y: number }} array of points
+   */
+  getPoints(): { x: number; y: number }[];
+
+  /**
+   * Set points of the Arrow
+   *
+   * @param {{ x: number; y: number }} points - array of points
+   */
+  setPoints(points: { x: number; y: number }[]);
+
+  /**
+   * Get Start Point of the Arrow
+   */
+  getStartPoint(): { x: number; y: number };
+
+  /**
+   * Set Start point of the Arrow
+   *
+   * @param x - value of X coordinate
+   * @param y - value of Y coordinate
+   */
+  setStartPoint(x: number, y: number);
+
+  /**
+   * Get End point of the Arrow
+   */
+  getEndPoint(): { x: number; y: number };
+
+  /**
+   * Set End point of the Arrow
+   *
+   * @param x - value of X coordinate
+   * @param y - value of Y coordinate
+   */
+  setEndPoint(x: number, y: number);
+}

package/src/markup/IMarkupCloud.ts

@@ -0,0 +1,78 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, 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-2024 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 { IMarkupObject } from "./IMarkupObject";
+
+/**
+ * Cloud Markup object
+ */
+export interface IMarkupCloud extends IMarkupObject {
+  /**
+   * Get position of the Cloud
+   */
+  getPosition(): { x: number; y: number };
+
+  /**
+   * Set position of the Cloud
+   *
+   * @param x - value of X coordinate
+   * @param y - value of Y coordinate
+   */
+  setPosition(x: number, y: number);
+
+  /**
+   * Get width of the Cloud. Default value is 200
+   */
+  getWidth(): number;
+
+  /**
+   * Set width of the Cloud
+   *
+   * @param w - value of width. Default value is 200
+   */
+  setWidth(w: number);
+
+  /**
+   * Get height of the Cloud. Default value is 200
+   */
+  getHeigth(): number;
+
+  /**
+   * Set height of the Cloud
+   *
+   * @param h - value of height. Default value is 200
+   */
+  setHeight(h: number);
+
+  /**
+   * Get line width of the Cloud. Defailt value is 4
+   */
+  getLineWidth(): number;
+
+  /**
+   * Set line width of the Cloud
+   *
+   * @param size - value of width. Defailt value is 4
+   */
+  setLineWidth(size: number);
+}

package/src/markup/IMarkupColorable.ts

@@ -0,0 +1,39 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, 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-2024 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Markup Colorable
+ */
+export interface IMarkupColorable {
+  /**
+   * Get color of the Markup instance
+   */
+  getColor(): string;
+
+  /**
+   * Set color of the Markup instance
+   *
+   * @param hex - color in #hex format. Default: `#ff0000`
+   */
+  setColor(hex: string): void;
+}

package/src/markup/IMarkupEllipse.ts

@@ -0,0 +1,78 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, 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-2024 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 { IMarkupObject } from "./IMarkupObject";
+
+/**
+ * Ellipse Markup object
+ */
+export interface IMarkupEllipse extends IMarkupObject {
+  /**
+   * Get position of the Ellipse
+   */
+  getPosition(): { x: number; y: number };
+
+  /**
+   * Set position of the Ellipse
+   *
+   * @param x - value of X coordinate
+   * @param y - value of Y coordinate
+   */
+  setPosition(x: number, y: number);
+
+  /**
+   * Get X radius of the Ellipse
+   */
+  getRadiusX(): number;
+
+  /**
+   * Set X radius of the Ellipse
+   *
+   * @param r - value of X radius of the Ellipse
+   */
+  setRadiusX(r: number);
+
+  /**
+   * Get Y radius of the Ellipse
+   */
+  getRadiusY(): number;
+
+  /**
+   * Set Y radius of the Ellipse
+   *
+   * @param r - value of Y radius of the Ellipse
+   */
+  setRadiusY(r: number);
+
+  /**
+   * Get line width of the Ellipse. Defailt is 4
+   */
+  getLineWidth(): number;
+
+  /**
+   * Set line width of the Ellipse. Default is 4
+   *
+   * @param size - value of width
+   */
+  setLineWidth(size: number);
+}

package/src/markup/IMarkupImage.ts

@@ -0,0 +1,78 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, 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-2024 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 { IMarkupObject } from "./IMarkupObject";
+
+/**
+ * Image Markup object
+ */
+export interface IMarkupImage extends IMarkupObject {
+  /**
+   * Get position of the Image
+   */
+  getPosition(): { x: number; y: number };
+
+  /**
+   * Set position of the Image
+   *
+   * @param x - value of X coordinate
+   * @param y - value of Y coordinate
+   */
+  setPosition(x: number, y: number);
+
+  /**
+   * Get source of the Image. Provides base64 string
+   */
+  getSrc(): string;
+
+  /**
+   * Set source of the Image
+   *
+   * @param src - string in base64 format
+   */
+  setSrc(src: string);
+
+  /**
+   * Get width of the Image
+   */
+  getWidth(): number;
+
+  /**
+   * Set width of the Image
+   *
+   * @param w - value of width. Height will be automatically updated according to ratio of the Image
+   */
+  setWidth(w: number);
+
+  /**
+   * Get height of the Image
+   */
+  getHeight(): number;
+
+  /**
+   * Set height of the Image
+   *
+   * @param h - value of height. Width will be automatically updated according to ratio of the Image
+   */
+  setHeight(h: number);
+}

package/src/markup/IMarkupLine.ts

@@ -0,0 +1,70 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2024, 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-2024 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 { IMarkupObject } from "./IMarkupObject";
+
+/**
+ * Type of the markup line.
+ */
+export type MarkupLineType = "solid" | "dot" | "dash";
+
+/**
+ * Line Markup object
+ */
+export interface IMarkupLine extends IMarkupObject {
+  /**
+   * Get points of the Line
+   */
+  getPoints(): number[];
+
+  /**
+   * Get Line width. Default value is 4
+   */
+  getLineWidth(): number;
+
+  /**
+   * Set Line width. Default value is 4
+   *
+   * @param size - value of width
+   */
+  setLineWidth(size: number);
+
+  /**
+   * Get Type of the Line. Available values: `solid`, `dot`, `dash`. Default is `solid`
+   */
+  getLineType(): string;
+
+  /**
+   * Set Type of the Line. Available values: `solid`, `dot`, `dash`. Default is `solid`
+   *
+   * @param type
+   */
+  setLineType(type: string);
+
+  /**
+   * Add points to the Line
+   *
+   * @param {{ x: number; y: number }} points array of points
+   */
+  addPoints(points: [{ x: number; y: number }]);
+}