@inweb/markup 25.7.4

package/src/markup/Konva/KonvaRectangle.ts

@@ -0,0 +1,149 @@
+import Konva from "konva";
+import { IMarkupRectangle } from "../IMarkupRectangle";
+import { IMarkupColorable } from "../IMarkupColorable";
+
+export class KonvaRectangle implements IMarkupRectangle, IMarkupColorable {
+  private _ref: Konva.Rect;
+
+  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) return;
+
+    this._ref = new Konva.Rect({
+      stroke: params.color ?? "#ff0000",
+      strokeWidth: params.lineWidth ?? 4,
+      globalCompositeOperation: "source-over",
+      lineCap: "round",
+      lineJoin: "round",
+      x: params.position.x,
+      y: params.position.y,
+      width: params.width ?? 200,
+      height: params.height ?? 200,
+      draggable: true,
+      strokeScaleEnabled: false,
+    });
+
+    this._ref.on("transform", (e) => {
+      const attrs = e.target.attrs;
+
+      if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+
+      const scaleByX = Math.abs(attrs.scaleX - 1) > 10e-6;
+      const scaleByY = Math.abs(attrs.scaleY - 1) > 10e-6;
+
+      let newWidth = this._ref.width();
+      if (scaleByX) newWidth *= attrs.scaleX;
+      let newHeight = this._ref.height();
+      if (scaleByY) newHeight *= attrs.scaleY;
+
+      const minWidth = 50;
+      const minHeight = 50;
+
+      if (newWidth < minWidth) newWidth = minWidth;
+      if (newHeight < minHeight) newHeight = minHeight;
+
+      if (scaleByX) {
+        this._ref.width(newWidth);
+      }
+
+      if (scaleByY) {
+        this._ref.height(newHeight);
+      }
+
+      this._ref.scale({ x: 1, y: 1 });
+    });
+
+    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() as string;
+  }
+
+  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/markup/Konva/KonvaText.ts

@@ -0,0 +1,141 @@
+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;
+      rotation?: number;
+      fontSize?: number;
+      color?: string;
+      id?: string;
+    },
+    ref = null
+  ) {
+    if (ref) {
+      this._ref = ref;
+      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.width(this._ref.getTextWidth());
+
+    this._ref.on("transform", (e) => {
+      const attrs = e.target.attrs;
+
+      if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
+
+      const scaleByX = Math.abs(attrs.scaleX - 1) > 10e-6;
+      const scaleByY = Math.abs(attrs.scaleY - 1) > 10e-6;
+
+      let newWidth = this._ref.width();
+      if (scaleByX) newWidth *= attrs.scaleX;
+      let newHeight = this._ref.height();
+      if (scaleByY) newHeight *= attrs.scaleY;
+
+      const minWidth = 50;
+
+      if (newWidth < minWidth) newWidth = minWidth;
+      if (newHeight < Math.round(this.getFontSize())) newHeight = Math.round(this.getFontSize());
+
+      if (scaleByX) {
+        this._ref.width(newWidth);
+      }
+
+      if (scaleByY) {
+        this._ref.height(newHeight);
+      }
+
+      this._ref.scale({ x: 1, y: 1 });
+    });
+
+    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() as string;
+  }
+
+  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/markup/Konva/MarkupColor.ts

@@ -0,0 +1,82 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 color.
+ */
+export class MarkupColor {
+  public R: number;
+  public G: number;
+  public B: number;
+
+  private _hex: string;
+
+  /**
+   * Color in #000000 format
+   */
+  get HexColor(): string {
+    return "#" + this._hex;
+  }
+
+  /**
+   * Color as object with r,g,b properties
+   */
+  get RGB(): { r: number; g: number; b: number } {
+    return { r: this.R, g: this.G, b: this.B };
+  }
+
+  /**
+   * Create an instance of Color
+   *
+   * @param r - Red color in [0,255] range
+   * @param g - Green color in [0,255] range
+   * @param b - Blue color in [0,255] range
+   */
+  constructor(r: number, g: number, b: number) {
+    this.setColor(r, g, b);
+  }
+
+  /**
+   * Set Color for current instance
+   *
+   * @param r - Red color in [0,255] range
+   * @param g - Green color in [0,255] range
+   * @param b - Blue color in [0,255] range
+   */
+  public setColor(r: number, g: number, b: number): void {
+    this.R = r;
+    this.G = g;
+    this.B = b;
+
+    this._hex = this.rgbToHex(r, g, b);
+  }
+
+  private rgbToHex(r: number, g: number, b: number): string {
+    const valueToHex = (c) => {
+      const hex = c.toString(16);
+      return hex === "0" ? "00" : hex;
+    };
+
+    return valueToHex(r) + valueToHex(g) + valueToHex(b);
+  }
+}