@inweb/markup 25.7.4

package/src/markup/Konva/KonvaEllipse.ts

@@ -0,0 +1,150 @@
+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/markup/Konva/KonvaImage.ts

@@ -0,0 +1,149 @@
+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/markup/Konva/KonvaLine.ts

@@ -0,0 +1,136 @@
+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);
+  }
+}