@inweb/client 25.2.2 → 25.2.8

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

@@ -1,99 +1,130 @@
-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);
-  }
-}
+import Konva from "konva";
+import { IMarkupLine, LineType } from "../../IMarkupLine";
+import { IMarkupColorable } from "../../IMarkupColorable";
+
+const LineTypeSpecs = new Map<LineType, number[]>([
+  [LineType.Solid, []],
+  [LineType.Dot, [30, 30, 0.001, 30]],
+  [LineType.Dash, [30, 30]],
+]);
+
+export class KonvaLine implements IMarkupLine, IMarkupColorable {
+  private _ref: Konva.Line;
+
+  constructor(
+    params: { points: { x: number; y: number }[]; color: string; type: LineType; width: number; id?: string },
+    ref = null
+  ) {
+    if (ref) {
+      this._ref = ref;
+      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,
+      dash: LineTypeSpecs.get(params.type) || [],
+    });
+
+    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(): number[] {
+    return this._ref.points();
+  }
+
+  setLineWidth(size: number) {
+    this._ref.strokeWidth(size);
+  }
+
+  getLineWidth(): number {
+    return this._ref.strokeWidth();
+  }
+
+  getLineType(): string {
+    const typeSpecs = this._ref.dash() || [];
+    let type = "solid";
+    switch (typeSpecs) {
+      case LineTypeSpecs.get(LineType.Dot):
+        type = "dot";
+        break;
+      case LineTypeSpecs.get(LineType.Dash):
+        type = "dash";
+        break;
+    }
+    return type;
+  }
+
+  setLineType(type: string) {
+    const lineType = LineType[type];
+    if (lineType) {
+      const specs = LineTypeSpecs.get(lineType);
+      if (specs) this._ref.dash(specs);
+    }
+  }
+
+  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

@@ -1,113 +1,119 @@
-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();
-  }
-}
+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 };
+      color: string;
+      lineWidth: number;
+      width: number;
+      height: number;
+      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,
+      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

@@ -1,104 +1,110 @@
-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);
-  }
-}
+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;
+      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.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);
+  }
+}