@inweb/viewer-visualize 25.7.2 → 25.7.4

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

@@ -1,213 +0,0 @@
-import Konva from "konva";
-import { IMarkupColorable } from "../../IMarkupColorable";
-import { IMarkupCloud } from "../../IMarkupCloud";
-
-export class KonvaCloud implements IMarkupCloud, IMarkupColorable {
-  private _ref: Konva.Shape;
-
-  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 || !params.width || !params.height) return;
-
-    const arcRadius = 16;
-
-    this._ref = new Konva.Shape({
-      x: params.position.x,
-      y: params.position.y,
-      width: params.width ?? 200,
-      height: params.height ?? 200,
-      stroke: params.color ?? "#ff0000",
-      strokeWidth: params.lineWidth ?? 4,
-      draggable: true,
-      strokeScaleEnabled: false,
-      globalCompositeOperation: "source-over",
-      sceneFunc: (context, shape) => {
-        function calculateMidpoint(position, width, height) {
-          const midX = position.x + width / 2;
-          const midY = position.y + height / 2;
-          return { x: midX, y: midY };
-        }
-
-        const points = [
-          { x: 0, y: 0 },
-          { x: 0 + this._ref.width(), y: 0 },
-          { x: 0 + this._ref.width(), y: 0 + this._ref.height() },
-          { x: 0, y: 0 + this._ref.height() },
-          { x: 0, y: 0 },
-        ];
-
-        const midPoint = calculateMidpoint({ x: 0, y: 0 }, this._ref.width(), this._ref.height());
-
-        const baseArcLength = 30;
-        context.beginPath();
-        for (let iPoint = 0; iPoint < points.length - 1; iPoint++) {
-          let approxArcLength = baseArcLength;
-          const dx = points[iPoint + 1].x - points[iPoint].x;
-          const dy = points[iPoint + 1].y - points[iPoint].y;
-          const length = Math.sqrt(dx * dx + dy * dy);
-
-          const arcCount = Math.floor(length / approxArcLength);
-          const lengthMod = length % approxArcLength;
-          approxArcLength = baseArcLength + arcCount / lengthMod;
-
-          let pX = points[iPoint].x + dx / arcCount / 2;
-          let pY = points[iPoint].y + dy / arcCount / 2;
-          const pEndX = points[iPoint + 1].x;
-          const pEndY = points[iPoint + 1].y;
-          const endAngle = Math.atan((pEndY - pY) / (pEndX - pX));
-          const startAngle = endAngle + Math.PI;
-          const counterClockwise = pX > midPoint.x && pY > midPoint.y;
-          for (let iArc = 0; iArc < arcCount; iArc++) {
-            if (counterClockwise) {
-              context.arc(pX, pY, arcRadius, endAngle, startAngle);
-            } else {
-              context.arc(pX, pY, arcRadius, startAngle, endAngle);
-            }
-
-            pX += dx / arcCount;
-            pY += dy / arcCount;
-          }
-        }
-
-        context.closePath();
-        // (!) Konva specific method, it is very important
-        // it will apply are required styles
-        context.fillStrokeShape(shape);
-      },
-    });
-
-    this._ref.className = "Cloud";
-
-    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 = 100;
-      const minHeight = 100;
-
-      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.getSelfRect = () => {
-      return {
-        x: 0 - arcRadius,
-        y: 0 - arcRadius,
-        width: this._ref.width() + 2 * arcRadius,
-        height: this._ref.height() + 2 * arcRadius,
-      };
-    };
-
-    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 "cloud";
-  }
-
-  getColor(): string {
-    return this._ref.stroke() as string;
-  }
-
-  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;
-  }
-
-  getPosition() {
-    return this._ref.position();
-  }
-
-  setPosition(x: number, y: number) {
-    this._ref.position({ x, y });
-  }
-
-  getWidth(): number {
-    return this._ref.width();
-  }
-
-  setWidth(w: number) {
-    this._ref.width(w);
-  }
-
-  getHeigth(): number {
-    return this._ref.height();
-  }
-
-  setHeight(h: number) {
-    this._ref.height(h);
-  }
-
-  getLineWidth(): number {
-    return this._ref.strokeWidth();
-  }
-
-  setLineWidth(size: number) {
-    this._ref.strokeWidth(size);
-  }
-}

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

@@ -1,150 +0,0 @@
-import Konva from "konva";
-import { IMarkupEllipse } from "../../IMarkupEllipse";
-import { IMarkupColorable } from "../../IMarkupColorable";
-
-export class KonvaEllipse implements IMarkupEllipse, IMarkupColorable {
-  private _ref: Konva.Ellipse;
-
-  constructor(
-    params: {
-      position: { x: number; y: number };
-      radius: { x: number; y: number };
-      lineWidth?: number;
-      color?: string;
-      id?: string;
-    },
-    ref = null
-  ) {
-    if (ref) {
-      this._ref = ref;
-      return;
-    }
-
-    if (!params.position) return;
-
-    this._ref = new Konva.Ellipse({
-      stroke: params.color ?? "#ff0000",
-      strokeWidth: params.lineWidth ?? 4,
-      globalCompositeOperation: "source-over",
-      lineCap: "round",
-      lineJoin: "round",
-      x: params.position.x,
-      y: params.position.y,
-      radiusX: params.radius.x,
-      radiusY: params.radius.y,
-      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 newRadiusX = this._ref.radiusX();
-      if (scaleByX) newRadiusX *= attrs.scaleX;
-      let newRadiusY = this._ref.radiusY();
-      if (scaleByY) newRadiusY *= attrs.scaleY;
-
-      const minRadiusX = 25;
-      const minRadiusY = 25;
-
-      if (newRadiusX < minRadiusX) newRadiusX = minRadiusX;
-      if (newRadiusY < minRadiusY) newRadiusY = minRadiusY;
-
-      if (e.evt.ctrlKey || e.evt.shiftKey) {
-        if (scaleByX) {
-          this._ref.radius({ x: newRadiusX, y: newRadiusX });
-        } else {
-          this._ref.radius({ x: newRadiusY, y: newRadiusY });
-        }
-      } else {
-        this._ref.radius({ x: newRadiusX, y: newRadiusY });
-      }
-
-      this._ref.scale({ x: 1, y: 1 });
-    });
-
-    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.radiusX(r);
-  }
-
-  getRadiusY(): number {
-    return this._ref.radiusY();
-  }
-
-  setRadiusY(r: number) {
-    this._ref.radiusY(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() as string;
-  }
-
-  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

@@ -1,149 +0,0 @@
-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; id?: string },
-    ref = null
-  ) {
-    if (ref) {
-      if (ref.height() === 0 || ref.width() === 0) return;
-
-      this._ref = ref;
-      this._canvasImage = ref.image();
-      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);
-      if (this._ref.height() === 0) this._ref.height(this._canvasImage.height);
-      if (this._ref.width() === 0) this._ref.width(this._canvasImage.width);
-      this._ratio = this._ref.height() === 0 || this._ref.width() === 0 ? 1 : this._ref.height() / this._ref.width();
-    };
-
-    this._canvasImage.src = params.src;
-
-    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;
-
-      if (e.evt.ctrlKey || e.evt.shiftKey) {
-        if (scaleByX) {
-          this._ref.width(newWidth);
-          this._ref.height(newWidth * this._ratio);
-        } else {
-          this._ref.width(newHeight / this._ratio);
-          this._ref.height(newHeight);
-        }
-      } else {
-        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());
-  }
-
-  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";
-  }
-
-  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

@@ -1,136 +0,0 @@
-import Konva from "konva";
-import { IMarkupLine, MarkupLineType } from "../../IMarkupLine";
-import { IMarkupColorable } from "../../IMarkupColorable";
-
-const LineTypeSpecs = new Map<string, number[]>([
-  ["solid", []],
-  ["dot", [30, 30, 0.001, 30]],
-  ["dash", [30, 30]],
-]);
-
-export class KonvaLine implements IMarkupLine, IMarkupColorable {
-  private _ref: Konva.Line;
-
-  constructor(
-    params: { points: { x: number; y: number }[]; type?: MarkupLineType; width?: number; color?: string; 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.on("transform", (e) => {
-      const attrs = e.target.attrs;
-
-      if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
-    });
-
-    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() as string;
-  }
-
-  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: MarkupLineType;
-    switch (typeSpecs) {
-      case LineTypeSpecs.get("dot"):
-        type = "dot";
-        break;
-      case LineTypeSpecs.get("dash"):
-        type = "dash";
-        break;
-      default:
-        type = "solid";
-        break;
-    }
-    return type;
-  }
-
-  setLineType(type: string) {
-    const specs = LineTypeSpecs.get(type);
-    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);
-  }
-}