@inweb/markup 25.7.8 → 25.7.10

package/lib/markup/IMarkup.d.ts

@@ -93,6 +93,13 @@ export interface IMarkup {
      * Create a viewpoint.
      */
     getViewpoint(): IViewpoint;
+    /**
+     * Enables mouse interactions to select or draw markups.
+     *
+     * @param mode - Edit mode. Matches the type of markup object being created or object
+     *   selecting mode. To exit edit mode provide this to `false`.
+     */
+    enableEditMode(mode: MarkupMode | false): this;
     /**
      * Create a Markup object.
      *

package/lib/markup/Konva/KonvaMarkup.d.ts

@@ -1,6 +1,6 @@
 import { IEventEmitter } from "@inweb/eventemitter2";
 import { ChangeActiveDraggerEvent, IViewpoint, PanEvent } from "@inweb/viewer-core";
-import { IMarkup } from "../IMarkup";
+import { IMarkup, MarkupMode } from "../IMarkup";
 import { IWorldTransform } from "../IWorldTransform";
 import { IMarkupObject } from "../IMarkupObject";
 import { MarkupLineType } from "../IMarkupLine";
@@ -49,6 +49,7 @@ export declare class KonvaMarkup implements IMarkup {
     colorizeSelectedMarkups(r: number, g: number, b: number): void;
     setViewpoint(viewpoint: IViewpoint): void;
     getViewpoint(): IViewpoint;
+    enableEditMode(mode: MarkupMode | false): this;
     createObject(type: string, params: any): IMarkupObject;
     getObjects(): IMarkupObject[];
     getSelectedObjects(): IMarkupObject[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/markup",
-  "version": "25.7.8",
+  "version": "25.7.10",
   "description": "JavaScript 2D markups",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -26,8 +26,8 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/eventemitter2": "~25.7.8",
-    "@inweb/viewer-core": "~25.7.8"
+    "@inweb/eventemitter2": "~25.7.10",
+    "@inweb/viewer-core": "~25.7.10"
   },
   "devDependencies": {
     "canvas": "^2.11.2",

package/src/markup/IMarkup.ts

@@ -132,6 +132,14 @@ export interface IMarkup {
    */
   getViewpoint(): IViewpoint;
 
+  /**
+   * Enables mouse interactions to select or draw markups.
+   *
+   * @param mode - Edit mode. Matches the type of markup object being created or object
+   *   selecting mode. To exit edit mode provide this to `false`.
+   */
+  enableEditMode(mode: MarkupMode | false): this;
+
   /**
    * Create a Markup object.
    *

package/src/markup/Konva/KonvaMarkup.ts

@@ -25,11 +25,12 @@ import Konva from "konva";
 import { IEventEmitter } from "@inweb/eventemitter2";
 import { ChangeActiveDraggerEvent, IViewpoint, PanEvent } from "@inweb/viewer-core";
 
-import { IMarkup } from "../IMarkup";
+import { IMarkup, MarkupMode } from "../IMarkup";
 import { IWorldTransform } from "../IWorldTransform";
-import { MarkupColor } from "./MarkupColor";
 import { IMarkupObject } from "../IMarkupObject";
 import { IMarkupColorable } from "../IMarkupColorable";
+import { MarkupLineType } from "../IMarkupLine";
+import { MarkupColor } from "./MarkupColor";
 import { KonvaLine } from "./KonvaLine";
 import { KonvaText } from "./KonvaText";
 import { KonvaRectangle } from "./KonvaRectangle";
@@ -37,13 +38,6 @@ import { KonvaEllipse } from "./KonvaEllipse";
 import { KonvaArrow } from "./KonvaArrow";
 import { KonvaImage } from "./KonvaImage";
 import { KonvaCloud } from "./KonvaCloud";
-import { IMarkupLine, MarkupLineType } from "../IMarkupLine";
-import { IMarkupArrow } from "../IMarkupArrow";
-import { IMarkupEllipse } from "../IMarkupEllipse";
-import { IMarkupRectangle } from "../IMarkupRectangle";
-import { IMarkupCloud } from "../IMarkupCloud";
-import { IMarkupImage } from "../IMarkupImage";
-import { IMarkupText } from "../IMarkupText";
 
 const MarkupMode2Konva = {
   SelectMarkup: {
@@ -90,7 +84,7 @@ export class KonvaMarkup implements IMarkup {
   private _container: HTMLElement;
   private _pointerEvents: string[];
   private _markupIsActive = false;
-  private _markupMode: string;
+  private _markupMode: MarkupMode;
   private _markupColor = new MarkupColor(255, 0, 0);
   private _konvaStage: Konva.Stage;
   private _konvaLayer: Konva.Layer;
@@ -193,14 +187,7 @@ export class KonvaMarkup implements IMarkup {
     this.removeTextInput();
     this.removeImageInput();
 
-    const konvaShape = MarkupMode2Konva[draggerName];
-    if (konvaShape) {
-      this._markupMode = draggerName;
-      this._markupIsActive = true;
-    } else {
-      this._markupIsActive = false;
-      this._konvaTransformer.nodes([]);
-    }
+    this.enableEditMode(draggerName as MarkupMode);
   };
 
   resizeContainer = (entries: ResizeObserverEntry[]) => {
@@ -296,6 +283,17 @@ export class KonvaMarkup implements IMarkup {
     return viewpoint;
   }
 
+  enableEditMode(mode: MarkupMode | false): this {
+    if (!mode || !MarkupMode2Konva[mode]) {
+      this.clearSelected();
+      this._markupIsActive = false;
+    } else {
+      this._markupMode = mode;
+      this._markupIsActive = true;
+    }
+    return this;
+  }
+
   createObject(type: string, params: any): IMarkupObject {
     let object = null;
     let zIndex = this._zIndex;
@@ -946,8 +944,9 @@ export class KonvaMarkup implements IMarkup {
     type?: MarkupLineType,
     width?: number,
     id?: string
-  ): IMarkupLine | void {
+  ): KonvaLine | void {
     if (!linePoints || linePoints.length === 0) return;
+
     const points: { x: number; y: number }[] = [];
     for (let i = 0; i < linePoints.length; i += 2) {
       points.push({ x: linePoints[i], y: linePoints[i + 1] });
@@ -1058,7 +1057,7 @@ export class KonvaMarkup implements IMarkup {
     textSize?: number,
     fontSize?: number,
     id?: string
-  ): IMarkupText | void {
+  ): KonvaText | void {
     const trNodes = this._konvaTransformer.nodes();
     if (trNodes.length > 0) {
       // in case of edit - remove old Konva.Text object
@@ -1099,7 +1098,7 @@ export class KonvaMarkup implements IMarkup {
     lineWidth?: number,
     color?: string,
     id?: string
-  ): IMarkupRectangle | void {
+  ): KonvaRectangle | void {
     if (!position) return;
 
     const konvaRectangle = new KonvaRectangle({
@@ -1122,7 +1121,7 @@ export class KonvaMarkup implements IMarkup {
     lineWidth?: number,
     color?: string,
     id?: string
-  ): IMarkupEllipse | void {
+  ): KonvaEllipse | void {
     if (!position) return;
 
     const konvaEllipse = new KonvaEllipse({
@@ -1143,7 +1142,7 @@ export class KonvaMarkup implements IMarkup {
     end: { x: number; y: number },
     color?: string,
     id?: string
-  ): IMarkupArrow | void {
+  ): KonvaArrow | void {
     if (!start || !end) return;
 
     const konvaArrow = new KonvaArrow({
@@ -1165,7 +1164,7 @@ export class KonvaMarkup implements IMarkup {
     lineWidth?: number,
     color?: string,
     id?: string
-  ): IMarkupCloud | void {
+  ): KonvaCloud | void {
     if (!position || !width || !height) return;
 
     const konvaCloud = new KonvaCloud({
@@ -1188,10 +1187,10 @@ export class KonvaMarkup implements IMarkup {
     width?: number,
     height?: number,
     id?: string
-  ): IMarkupImage | void {
+  ): KonvaImage | void {
     if (!position) return;
 
-    let konvaImage: IMarkupImage;
+    let konvaImage: KonvaImage;
 
     if (src) {
       konvaImage = new KonvaImage({