@inweb/markup 25.8.19 → 25.8.20

package/lib/markup/Konva/KonvaEllipse.d.ts

@@ -2,11 +2,11 @@ import { IMarkupEllipse } from "../IMarkupEllipse";
 export declare class KonvaEllipse implements IMarkupEllipse {
     private _ref;
     constructor(params: {
-        position: {
+        position?: {
             x: number;
             y: number;
         };
-        radius: {
+        radius?: {
             x: number;
             y: number;
         };

package/lib/markup/Konva/KonvaImage.d.ts

@@ -4,12 +4,14 @@ export declare class KonvaImage implements IMarkupImage {
     private _canvasImage;
     private _ratio;
     private readonly EPSILON;
+    private readonly BASE64_NOT_FOUND;
+    private readonly BASE64_HEADER_START;
     constructor(params: {
-        position: {
+        position?: {
             x: number;
             y: number;
         };
-        src: string;
+        src?: string;
         width?: number;
         height?: number;
         maxWidth?: number;

package/lib/markup/Konva/KonvaLine.d.ts

@@ -2,7 +2,7 @@ import { IMarkupLine, MarkupLineType } from "../IMarkupLine";
 export declare class KonvaLine implements IMarkupLine {
     private _ref;
     constructor(params: {
-        points: {
+        points?: {
             x: number;
             y: number;
         }[];

package/lib/markup/Konva/KonvaRectangle.d.ts

@@ -2,7 +2,7 @@ import { IMarkupRectangle } from "../IMarkupRectangle";
 export declare class KonvaRectangle implements IMarkupRectangle {
     private _ref;
     constructor(params: {
-        position: {
+        position?: {
             x: number;
             y: number;
         };

package/lib/markup/Konva/KonvaText.d.ts

@@ -3,11 +3,11 @@ export declare class KonvaText implements IMarkupText {
     private _ref;
     private readonly TEXT_FONT_FAMILY;
     constructor(params: {
-        position: {
+        position?: {
             x: number;
             y: number;
         };
-        text: string;
+        text?: string;
         rotation?: number;
         fontSize?: number;
         color?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/markup",
-  "version": "25.8.19",
+  "version": "25.8.20",
   "description": "JavaScript 2D markups",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -26,8 +26,8 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/eventemitter2": "~25.8.19",
-    "@inweb/viewer-core": "~25.8.19"
+    "@inweb/eventemitter2": "~25.8.20",
+    "@inweb/viewer-core": "~25.8.20"
   },
   "devDependencies": {
     "konva": "^9.2.0"

package/src/markup/Konva/KonvaArrow.ts

@@ -29,8 +29,8 @@ export class KonvaArrow implements IMarkupArrow {
 
   constructor(
     params: {
-      start: { x: number; y: number };
-      end: { x: number; y: number };
+      start?: { x: number; y: number };
+      end?: { x: number; y: number };
       color?: string;
       id?: string;
     },
@@ -41,7 +41,9 @@ export class KonvaArrow implements IMarkupArrow {
       return;
     }
 
-    if (!params || !params.start || !params.end) return;
+    if (!params) params = {};
+    if (!params.start) params.start = { x: 50, y: 50 };
+    if (!params.end) params.end = { x: 100, y: 100 };
 
     this._ref = new Konva.Arrow({
       stroke: params.color ?? "#ff0000",

package/src/markup/Konva/KonvaCloud.ts

@@ -6,7 +6,7 @@ export class KonvaCloud implements IMarkupCloud {
 
   constructor(
     params: {
-      position: { x: number; y: number };
+      position?: { x: number; y: number };
       width?: number;
       height?: number;
       lineWidth?: number;
@@ -20,7 +20,8 @@ export class KonvaCloud implements IMarkupCloud {
       return;
     }
 
-    if (!params || !params.position) return;
+    if (!params) params = {};
+    if (!params.position) params.position = { x: 100, y: 100 };
 
     const arcRadius = 16;
 

package/src/markup/Konva/KonvaEllipse.ts

@@ -6,8 +6,8 @@ export class KonvaEllipse implements IMarkupEllipse {
 
   constructor(
     params: {
-      position: { x: number; y: number };
-      radius: { x: number; y: number };
+      position?: { x: number; y: number };
+      radius?: { x: number; y: number };
       lineWidth?: number;
       color?: string;
       id?: string;
@@ -19,7 +19,9 @@ export class KonvaEllipse implements IMarkupEllipse {
       return;
     }
 
-    if (!params || !params.position || !params.radius) return;
+    if (!params) params = {};
+    if (!params.position) params.position = { x: 100, y: 100 };
+    if (!params.radius) params.radius = { x: 25, y: 25 };
 
     this._ref = new Konva.Ellipse({
       stroke: params.color ?? "#ff0000",

package/src/markup/Konva/KonvaImage.ts

@@ -6,11 +6,14 @@ export class KonvaImage implements IMarkupImage {
   private _canvasImage: HTMLImageElement;
   private _ratio = 1;
   private readonly EPSILON = 10e-6;
+  private readonly BASE64_NOT_FOUND =
+    "data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAADsAAAA7AF5KHG9AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAmhJREFUWIXtlr9rVEEQxz+H8RQUJIdeIopYm0vkCg0GBBtbG1NF7Kxt7dR/IGIw/uhTaBNLERURg2kCEUyCYCPi70b0InjGS57FzOZN3r19d+9HJIVfWO52dma/s7Mz8xa2KAaBCWAR+AkECWOmSOIdwC1gtQOpHc+NfQ8wClQ8+1d0vcdH/lQ3bSIRGAZ2pTjAqNovANXIWlXlAXA2zvi2Ln4AjqYgtagYEutENSLvjRoOImFv5iB32Ae8UrLXwFBk3h9ndF0VJnKSO9gTu3yKu5Z1LKnS8YIcABgw5Ks692JZFXcXRJ46Aq6kikCnHNi/mQ50WwVtfaIoBzL3gRk2drSscJ2wrc4VvUoe2wn/41/iBfoVLRnBGnDSY3AAKacy8AmYR+o7K1zCl6wgrgpOAc/MuhvfgMuk+1JGHQgSBcAloKXy78AjYBppJk5/noTulseBMZ23iD/piHFkEdgTQzKk+5wHjmHC3cmBg0BD5xcSTrFXyQPgIWFtDwMvab+2N8DpbhyY1v/3E8gdDgNfVX9SCVZ0/gW4B0wB71S2BpxLcuCM/jaQSHSDEeAX4VMuAG4gTzyHbcAVXXO6GxxwIX+vvxe7JHcYQ07nHqklj96UIW/YhSWzMKcep8VVtf8B1Dw6h4DfhB+sdbgn2R+gnoEc5NR3dZ+3QJ9H74HqXLPCGlJyTfI9y3YCs0owq3OLOpKkLeBI1HhSDT/mdKIPiUCARMTlQx34TMLjtww8IczmO8AJ/N/2JNSQXAiQ671JePePge0+wzJSQq4FFzlaenIvucUAkiQLhC/mLGNZ9xgn5s63BP4CCk0QDtm4BhoAAAAASUVORK5CYII=";
+  private readonly BASE64_HEADER_START = "data:image/";
 
   constructor(
     params: {
-      position: { x: number; y: number };
-      src: string;
+      position?: { x: number; y: number };
+      src?: string;
       width?: number;
       height?: number;
       maxWidth?: number;
@@ -20,7 +23,9 @@ export class KonvaImage implements IMarkupImage {
     ref = null
   ) {
     if (ref) {
-      // if (ref.height() === 0 || ref.width() === 0) return;
+      if (!ref.src || !ref.src.startsWith(this.BASE64_HEADER_START)) ref.src = this.BASE64_NOT_FOUND;
+      if (ref.height() <= this.EPSILON) ref.height(32);
+      if (ref.width() <= this.EPSILON) ref.width(32);
 
       this._ref = ref;
       this._canvasImage = ref.image();
@@ -28,22 +33,16 @@ export class KonvaImage implements IMarkupImage {
         this._ref.height() <= this.EPSILON || this._ref.width() <= this.EPSILON
           ? 1
           : this._ref.height() / this._ref.width();
+
       return;
     }
 
-    if (!params || !params.position || !params.src) return;
+    if (!params) params = {};
+    if (!params.position) params.position = { x: 50, y: 50 };
+    if (!params.src || !params.src.startsWith(this.BASE64_HEADER_START)) params.src = this.BASE64_NOT_FOUND;
 
     this._canvasImage = new Image();
 
-    this._ref = new Konva.Image({
-      x: params.position.x,
-      y: params.position.y,
-      image: this._canvasImage,
-      width: params.width ?? 0,
-      height: params.height ?? 0,
-      draggable: true,
-    });
-
     this._canvasImage.onload = () => {
       this._ref.image(this._canvasImage);
       if (this._ref.height() <= this.EPSILON) this._ref.height(this._canvasImage.height);
@@ -74,8 +73,22 @@ export class KonvaImage implements IMarkupImage {
       }
     };
 
+    this._canvasImage.onerror = () => {
+      this._canvasImage.onerror = function () {};
+      this._canvasImage.src = this.BASE64_NOT_FOUND;
+    };
+
     this._canvasImage.src = params.src;
 
+    this._ref = new Konva.Image({
+      x: params.position.x,
+      y: params.position.y,
+      image: this._canvasImage,
+      width: params.width ?? 0,
+      height: params.height ?? 0,
+      draggable: true,
+    });
+
     this._ref.on("transform", (e) => {
       const attrs = e.target.attrs;
 

package/src/markup/Konva/KonvaLine.ts

@@ -12,7 +12,7 @@ export class KonvaLine implements IMarkupLine {
 
   constructor(
     params: {
-      points: { x: number; y: number }[];
+      points?: { x: number; y: number }[];
       type?: MarkupLineType;
       width?: number;
       color?: string;
@@ -25,7 +25,12 @@ export class KonvaLine implements IMarkupLine {
       return;
     }
 
-    if (!params || !params.points) return;
+    if (!params) params = {};
+    if (!params.points)
+      params.points = [
+        { x: 50, y: 50 },
+        { x: 100, y: 100 },
+      ];
 
     const konvaPoints = [];
     params.points.forEach((point) => konvaPoints.push(point.x, point.y));

package/src/markup/Konva/KonvaRectangle.ts

@@ -6,7 +6,7 @@ export class KonvaRectangle implements IMarkupRectangle {
 
   constructor(
     params: {
-      position: { x: number; y: number };
+      position?: { x: number; y: number };
       width?: number;
       height?: number;
       lineWidth?: number;
@@ -20,7 +20,8 @@ export class KonvaRectangle implements IMarkupRectangle {
       return;
     }
 
-    if (!params || !params.position) return;
+    if (!params) params = {};
+    if (!params.position) params.position = { x: 100, y: 100 };
 
     this._ref = new Konva.Rect({
       stroke: params.color ?? "#ff0000",

package/src/markup/Konva/KonvaText.ts

@@ -7,8 +7,8 @@ export class KonvaText implements IMarkupText {
 
   constructor(
     params: {
-      position: { x: number; y: number };
-      text: string;
+      position?: { x: number; y: number };
+      text?: string;
       rotation?: number;
       fontSize?: number;
       color?: string;
@@ -21,7 +21,9 @@ export class KonvaText implements IMarkupText {
       return;
     }
 
-    if (!params || !params.position || !params.text) return;
+    if (!params) params = {};
+    if (!params.position) params.position = { x: 100, y: 100 };
+    if (!params.text) params.text = "default";
 
     this._ref = new Konva.Text({
       x: params.position.x,