@inweb/client 25.2.2

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

@@ -0,0 +1,119 @@
+import Konva from "konva";
+import { IMarkupArrow } from "../../IMarkupArrow";
+import { IMarkupColorable } from "../../IMarkupColorable";
+
+export class KonvaArrow implements IMarkupArrow, IMarkupColorable {
+  private _ref: Konva.Arrow;
+
+  constructor(
+    params: {
+      points: [];
+      pointerWidth: number;
+      pointerLength: number;
+      color: string;
+      lineWidth: number;
+    },
+    ref = null
+  ) {
+    if (ref) {
+      this._ref = ref;
+      this._ref.id(this._ref._id.toString());
+      return;
+    }
+
+    if (!params.points) return;
+
+    this._ref = new Konva.Arrow({
+      stroke: params.color ?? "#ff0000",
+      fill: params.color ?? "#ff0000",
+      strokeWidth: params.lineWidth ?? 4,
+      globalCompositeOperation: "source-over",
+      lineCap: "round",
+      lineJoin: "round",
+      points: params.points,
+      pointerWidth: params.pointerWidth,
+      pointerLength: params.pointerLength,
+      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(): number[] {
+    return this._ref.attrs.points;
+  }
+
+  setPoints(points: number[]) {
+    this._ref.points(points);
+  }
+
+  getPointerWidth(): number {
+    return this._ref.pointerWidth();
+  }
+
+  setPointerWidth(w: number) {
+    this._ref.pointerWidth(w);
+  }
+
+  getPointerLength(): number {
+    return this._ref.pointerLength();
+  }
+
+  setPointerLength(l: number) {
+    this._ref.pointerLength(l);
+  }
+
+  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,113 @@
+import Konva from "konva";
+import { IMarkupEllipse } from "../../IMarkupEllipse";
+import { IMarkupColorable } from "../../IMarkupColorable";
+
+export class KonvaEllipse implements IMarkupEllipse, IMarkupColorable {
+  private _ref: Konva.Ellipse;
+
+  constructor(
+    params: { pos: { x: number; y: number }; radius: { x: number; y: number }; color: string; lineWidth: number },
+    ref = null
+  ) {
+    if (ref) {
+      this._ref = ref;
+      this._ref.id(this._ref._id.toString());
+      return;
+    }
+
+    if (!params.pos) return;
+
+    this._ref = new Konva.Ellipse({
+      stroke: params.color ?? "#ff0000",
+      strokeWidth: params.lineWidth ?? 4,
+      globalCompositeOperation: "source-over",
+      lineCap: "round",
+      lineJoin: "round",
+      x: params.pos.x,
+      y: params.pos.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;
+  }
+}

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

@@ -0,0 +1,121 @@
+import Konva from "konva";
+import { IMarkupImage } from "../../IMarkupImage";
+
+export class KonvaImage implements IMarkupImage {
+  private _ref: Konva.Image;
+  private _canvasImage: HTMLImageElement;
+  private _ratio = 1;
+
+  constructor(params: { position: { x: number; y: number }; src: string; width: number; height: number }, ref = null) {
+    if (ref) {
+      if (ref.height() === 0 || ref.width() === 0) return;
+
+      this._ref = ref;
+      this._canvasImage = ref.image();
+      this._ref.id(this._ref._id.toString());
+      this._ratio = this._ref.height() / this._ref.width();
+      return;
+    }
+
+    if (!params.position || !params.src) return;
+    this._canvasImage = new Image();
+
+    this._ref = new Konva.Image({
+      x: params.position.x,
+      y: params.position.y,
+      image: this._canvasImage,
+      width: params.width,
+      height: params.height,
+      draggable: true,
+    });
+
+    this._canvasImage.onload = () => {
+      this._ref.image(this._canvasImage);
+      this._ratio = this._ref.height() === 0 || this._ref.width() === 0 ? 1 : this._ref.height() / this._ref.width();
+    };
+
+    this._canvasImage.src = params.src;
+
+    this._ref.id(this._ref._id.toString());
+  }
+
+  getSrc(): string {
+    return this._canvasImage.src;
+  }
+
+  setSrc(src: any) {
+    this._canvasImage.src = src;
+  }
+
+  getWidth(): number {
+    return this._ref.width();
+  }
+
+  setWidth(w: number) {
+    this._ref.width(w);
+    this._ref.height(w * this._ratio);
+  }
+
+  getHeight(): number {
+    return this._ref.height();
+  }
+
+  setHeight(h: number) {
+    this._ref.height(h);
+    this._ref.width(h / this._ratio);
+  }
+
+  ref() {
+    return this._ref;
+  }
+
+  id(): string {
+    return this._ref.id();
+  }
+
+  enableMouseEditing(value: boolean) {
+    this._ref.draggable(value);
+  }
+
+  type(): string {
+    return "image";
+  }
+
+  // we can break Liskov Substitution Principle, need to use separate IColorable
+  // getColor(): string {
+  //   return this._ref.fill();
+  // }
+
+  // setColor(hex: string) {
+  //   this._ref.fill(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(): { x: number; y: number } {
+    return this._ref.getPosition();
+  }
+
+  setPosition(x: number, y: number) {
+    this._ref.setPosition({ x, y });
+  }
+}

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

@@ -0,0 +1,99 @@
+import Konva from "konva";
+import { IMarkupLine } from "../../IMarkupLine";
+import { IMarkupColorable } from "../../IMarkupColorable";
+
+export class KonvaLine implements IMarkupLine, IMarkupColorable {
+  private _ref: Konva.Line;
+
+  constructor(params: { points: { x: number; y: number }[]; color: string; width: number }, ref = null) {
+    if (ref) {
+      this._ref = ref;
+      this._ref.id(this._ref._id.toString());
+      return;
+    }
+
+    if (!params.points) return;
+
+    const konvaPoints = [];
+    params.points.forEach((point) => konvaPoints.push(point.x, point.y));
+
+    this._ref = new Konva.Line({
+      stroke: params.color ?? "#ff0000",
+      strokeWidth: params.width ?? 4,
+      globalCompositeOperation: "source-over",
+      lineCap: "round",
+      lineJoin: "round",
+      points: konvaPoints,
+      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 "line";
+  }
+
+  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(): [] {
+    return this._ref.attrs.points;
+  }
+
+  setLineWidth(size: number) {
+    this._ref.strokeWidth(size);
+  }
+
+  getLineWidth(): number {
+    return this._ref.strokeWidth();
+  }
+
+  addPoints(points: [{ x: number; y: number }]) {
+    let newPoints = this._ref.points();
+    points.forEach((point) => {
+      newPoints = newPoints.concat([point.x, point.y]);
+    });
+
+    this._ref.points(newPoints);
+  }
+}

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

@@ -0,0 +1,113 @@
+import Konva from "konva";
+import { IMarkupRectangle } from "../../IMarkupRectangle";
+import { IMarkupColorable } from "../../IMarkupColorable";
+
+export class KonvaRectangle implements IMarkupRectangle, IMarkupColorable {
+  private _ref: Konva.Rect;
+
+  constructor(
+    params: { pos: { x: number; y: number }; color: string; lineWidth: number; width: number; height: number },
+    ref = null
+  ) {
+    if (ref) {
+      this._ref = ref;
+      this._ref.id(this._ref._id.toString());
+      return;
+    }
+
+    if (!params.pos) return;
+
+    this._ref = new Konva.Rect({
+      stroke: params.color ?? "#ff0000",
+      strokeWidth: params.lineWidth ?? 4,
+      globalCompositeOperation: "source-over",
+      lineCap: "round",
+      lineJoin: "round",
+      x: params.pos.x,
+      y: params.pos.y,
+      width: params.width,
+      height: params.height,
+      draggable: true,
+      strokeScaleEnabled: false,
+    });
+
+    this._ref.id(this._ref._id.toString());
+  }
+
+  getPosition(): { x: number; y: number } {
+    return this._ref.position();
+  }
+
+  getWidth(): number {
+    return this._ref.width();
+  }
+
+  getHeigth(): number {
+    return this._ref.height();
+  }
+
+  setWidth(w: number) {
+    this._ref.width(w);
+  }
+
+  setHeight(h: number) {
+    this._ref.height(h);
+  }
+
+  setPosition(x: number, y: number) {
+    this._ref.setPosition({ x, y });
+  }
+
+  ref() {
+    return this._ref;
+  }
+
+  id(): string {
+    return this._ref.id();
+  }
+
+  enableMouseEditing(value: boolean): void {
+    this._ref.draggable(value);
+  }
+
+  type(): string {
+    return "rectangle";
+  }
+
+  getColor(): string {
+    return this._ref.stroke();
+  }
+
+  setColor(hex: string): void {
+    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(): void {
+    this._ref.destroy();
+    this._ref = null;
+  }
+
+  setLineWidth(size: number): void {
+    this._ref.strokeWidth(size);
+  }
+
+  getLineWidth(): number {
+    return this._ref.strokeWidth();
+  }
+}

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

@@ -0,0 +1,104 @@
+import Konva from "konva";
+import { IMarkupText } from "../../IMarkupText";
+import { IMarkupColorable } from "../../IMarkupColorable";
+
+export class KonvaText implements IMarkupText, IMarkupColorable {
+  private _ref: Konva.Text;
+  private readonly TEXT_FONT_FAMILY = "Calibri";
+
+  constructor(
+    params: { position: { x: number; y: number }; text: string; fontSize: number; color: string; rotation: number },
+    ref = null
+  ) {
+    if (ref) {
+      this._ref = ref;
+      this._ref.id(this._ref._id.toString());
+      return;
+    }
+
+    if (!params || !params.text) return;
+
+    this._ref = new Konva.Text({
+      x: params.position.x,
+      y: params.position.y,
+      text: params.text,
+      fontSize: params.fontSize ?? 34,
+      fontFamily: this.TEXT_FONT_FAMILY,
+      fill: params.color ?? "#ff0000",
+      align: "left",
+      draggable: true,
+      rotation: params.rotation ?? 0,
+    });
+
+    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 "text";
+  }
+
+  getColor(): string {
+    return this._ref.fill();
+  }
+
+  setColor(hex: string) {
+    this._ref.fill(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;
+  }
+
+  getText(): string {
+    return this._ref.text();
+  }
+
+  setText(text: string): void {
+    this._ref.text(text);
+  }
+
+  getPosition(): { x: number; y: number } {
+    return this._ref.getPosition();
+  }
+
+  setPosition(x: number, y: number) {
+    this._ref.setPosition({ x, y });
+  }
+
+  getFontSize() {
+    return this._ref.fontSize();
+  }
+
+  setFontSize(size: number) {
+    this._ref.fontSize(size);
+  }
+}

package/src/Viewer/Markup/IMarkup.ts

@@ -0,0 +1,39 @@
+import { OdBaseDragger } from "../Draggers/Common/OdBaseDragger";
+import { Viewer } from "../Viewer";
+import { IMarkupObject } from "./Api/IMarkupObject";
+
+export enum MarkupType {
+  Unknown,
+  Konva = "Konva",
+  Visualize = "Visualize",
+}
+
+export enum MarkupMode {
+  Line = "Line",
+  Text = "Text",
+  Rectangle = "Rectangle",
+  Ellipse = "Ellipse",
+  Arrow = "Arrow",
+  Image = "Image",
+}
+
+export interface IMarkup {
+  lineWidth: number;
+
+  initialize(viewer: Viewer, canvas: HTMLCanvasElement, canvasEvents: string[]): void;
+  dispose(): void;
+
+  getDraggers(): Map<string, typeof OdBaseDragger>;
+  clearOverlay(): void;
+  getMarkupColor(): { r: number; g: number; b: number };
+  setMarkupColor(r: number, g: number, b: number): void;
+  colorizeAllMarkup(r: number, g: number, b: number): void;
+  drawViewpoint(viewpoint: any): void;
+  createViewpoint(): object;
+
+  createObject(type: string, params: any): IMarkupObject;
+  getObjects(): IMarkupObject[];
+  getSelectedObjects(): IMarkupObject[];
+  selectObjects(objects: IMarkupObject[]): void;
+  clearSelected(): void;
+}