@inweb/markup 25.7.9 → 25.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/markup.js CHANGED
@@ -12347,31 +12347,37 @@
12347
12347
  },
12348
12348
  Line: {
12349
12349
  name: "Line",
12350
- initializer: (ref) => new KonvaLine(null, ref),
12350
+ initializer: (ref, params = null) => new KonvaLine(params, ref),
12351
+ zIndex: 1,
12351
12352
  },
12352
12353
  Text: {
12353
12354
  name: "Text",
12354
- initializer: (ref) => new KonvaText(null, ref),
12355
+ initializer: (ref, params = null) => new KonvaText(params, ref),
12355
12356
  },
12356
12357
  Rectangle: {
12357
12358
  name: "Rect",
12358
- initializer: (ref) => new KonvaRectangle(null, ref),
12359
+ initializer: (ref, params = null) => new KonvaRectangle(params, ref),
12360
+ zIndex: 1,
12359
12361
  },
12360
12362
  Ellipse: {
12361
12363
  name: "Ellipse",
12362
- initializer: (ref) => new KonvaEllipse(null, ref),
12364
+ initializer: (ref, params = null) => new KonvaEllipse(params, ref),
12365
+ zIndex: 1,
12363
12366
  },
12364
12367
  Arrow: {
12365
12368
  name: "Arrow",
12366
- initializer: (ref) => new KonvaArrow(null, ref),
12369
+ initializer: (ref, params = null) => new KonvaArrow(params, ref),
12370
+ zIndex: 1,
12367
12371
  },
12368
12372
  Image: {
12369
12373
  name: "Image",
12370
- initializer: (ref) => new KonvaImage(null, ref),
12374
+ initializer: (ref, params = null) => new KonvaImage(params, ref),
12375
+ zIndex: 0,
12371
12376
  },
12372
12377
  Cloud: {
12373
12378
  name: "Cloud",
12374
12379
  initializer: (ref) => new KonvaCloud(null, ref),
12380
+ zIndex: 1,
12375
12381
  },
12376
12382
  };
12377
12383
  /**
@@ -12397,15 +12403,7 @@
12397
12403
  .join(" ");
12398
12404
  this.removeTextInput();
12399
12405
  this.removeImageInput();
12400
- const konvaShape = MarkupMode2Konva[draggerName];
12401
- if (konvaShape) {
12402
- this._markupMode = draggerName;
12403
- this._markupIsActive = true;
12404
- }
12405
- else {
12406
- this._markupIsActive = false;
12407
- this._konvaTransformer.nodes([]);
12408
- }
12406
+ this.enableEditMode(draggerName);
12409
12407
  };
12410
12408
  this.resizeContainer = (entries) => {
12411
12409
  var _a, _b;
@@ -12418,7 +12416,7 @@
12418
12416
  this.pan = (event) => {
12419
12417
  const dX = event.dX / window.devicePixelRatio;
12420
12418
  const dY = event.dY / window.devicePixelRatio;
12421
- Object.keys(MarkupMode2Konva).forEach((mode) => this.konvaLayerFind(mode).forEach((ref) => ref.move({ x: dX, y: dY })));
12419
+ this.getObjects().forEach((obj) => obj.ref().move({ x: dX, y: dY }));
12422
12420
  };
12423
12421
  this.redirectToViewer = (event) => {
12424
12422
  if (this._viewer)
@@ -12475,8 +12473,8 @@
12475
12473
  clearOverlay() {
12476
12474
  this.removeTextInput();
12477
12475
  this.removeImageInput();
12478
- this._konvaTransformer.nodes([]);
12479
- Object.keys(MarkupMode2Konva).forEach((mode) => this.konvaLayerFind(mode).forEach((ref) => ref.destroy()));
12476
+ this.clearSelected();
12477
+ this.getObjects().forEach((obj) => obj.ref().destroy());
12480
12478
  }
12481
12479
  getMarkupColor() {
12482
12480
  return this._markupColor.RGB;
@@ -12484,24 +12482,21 @@
12484
12482
  setMarkupColor(r, g, b) {
12485
12483
  this._markupColor.setColor(r, g, b);
12486
12484
  }
12487
- colorizeAllMarkup(r = 255, g = 0, b = 0) {
12488
- const hex = new MarkupColor(r, g, b).HexColor;
12489
- Object.keys(MarkupMode2Konva).forEach((mode) => {
12490
- this.konvaLayerFind(mode).forEach((ref) => {
12491
- const konvaShape = MarkupMode2Konva[mode];
12492
- const konvaObj = konvaShape.initializer(ref);
12493
- if (konvaObj.setColor)
12494
- konvaObj.setColor(hex);
12495
- });
12485
+ colorizeAllMarkup(r, g, b) {
12486
+ const hexColor = new MarkupColor(r, g, b).HexColor;
12487
+ this.getObjects().forEach((obj) => {
12488
+ const colorable = obj;
12489
+ if (colorable && colorable.setColor)
12490
+ colorable.setColor(hexColor);
12496
12491
  });
12497
12492
  this._konvaLayer.draw();
12498
12493
  }
12499
12494
  colorizeSelectedMarkups(r, g, b) {
12495
+ const hexColor = new MarkupColor(r, g, b).HexColor;
12500
12496
  this.getSelectedObjects().forEach((obj) => {
12501
12497
  const colorable = obj;
12502
- if (colorable && colorable.setColor) {
12503
- colorable.setColor(new MarkupColor(r, g, b).HexColor);
12504
- }
12498
+ if (colorable && colorable.setColor)
12499
+ colorable.setColor(hexColor);
12505
12500
  });
12506
12501
  }
12507
12502
  setViewpoint(viewpoint) {
@@ -12529,100 +12524,47 @@
12529
12524
  viewpoint.description = new Date().toDateString();
12530
12525
  return viewpoint;
12531
12526
  }
12532
- createObject(type, params) {
12533
- let object = null;
12534
- let zIndex = this._zIndex;
12535
- // TODO: factory?
12536
- switch (type.toLocaleLowerCase()) {
12537
- case "line":
12538
- object = new KonvaLine(params);
12539
- zIndex = 1;
12540
- break;
12541
- case "text":
12542
- object = new KonvaText(params);
12543
- break;
12544
- case "rectangle":
12545
- object = new KonvaRectangle(params);
12546
- zIndex = 1;
12547
- break;
12548
- case "ellipse":
12549
- object = new KonvaEllipse(params);
12550
- zIndex = 1;
12551
- break;
12552
- case "arrow":
12553
- object = new KonvaArrow(params);
12554
- break;
12555
- case "image":
12556
- object = new KonvaImage(params);
12557
- zIndex = 0;
12558
- break;
12559
- case "cloud":
12560
- object = new KonvaCloud(params);
12561
- zIndex = 1;
12562
- break;
12563
- default:
12564
- throw new Error("Markup CreateObject - unsupported type has been detected.");
12527
+ enableEditMode(mode) {
12528
+ if (!mode || !MarkupMode2Konva[mode]) {
12529
+ this.clearSelected();
12530
+ this._markupIsActive = false;
12565
12531
  }
12532
+ else {
12533
+ this._markupMode = mode;
12534
+ this._markupIsActive = true;
12535
+ }
12536
+ return this;
12537
+ }
12538
+ createObject(type, params) {
12539
+ var _a;
12540
+ const konvaShape = MarkupMode2Konva[type];
12541
+ if (!konvaShape || !konvaShape.initializer)
12542
+ throw new Error(`Markup CreateObject - unsupported markup type ${type}`);
12543
+ const object = konvaShape.initializer(null, params);
12566
12544
  this.addObject(object);
12567
- // Set zIndex only when shape has been added to Layer else we will get "Konva warning: Node has no parent. zIndex parameter is ignored."
12568
- object.setZIndex(zIndex);
12545
+ // Set zIndex only when shape has been added to Layer else we will get
12546
+ // "Konva warning: Node has no parent. zIndex parameter is ignored."
12547
+ object.setZIndex((_a = konvaShape.zIndex) !== null && _a !== void 0 ? _a : this._zIndex);
12569
12548
  this._zIndex++;
12570
12549
  return object;
12571
12550
  }
12572
12551
  getObjects() {
12573
12552
  const objects = [];
12574
- this.konvaLayerFind("Line").forEach((line) => {
12575
- objects.push(new KonvaLine(null, line));
12576
- });
12577
- this.konvaLayerFind("Text").forEach((text) => {
12578
- objects.push(new KonvaText(null, text));
12579
- });
12580
- this.konvaLayerFind("Rectangle").forEach((rectangle) => {
12581
- objects.push(new KonvaRectangle(null, rectangle));
12582
- });
12583
- this.konvaLayerFind("Ellipse").forEach((ellipse) => {
12584
- objects.push(new KonvaEllipse(null, ellipse));
12585
- });
12586
- this.konvaLayerFind("Arrow").forEach((arrow) => {
12587
- objects.push(new KonvaArrow(null, arrow));
12588
- });
12589
- this.konvaLayerFind("Image").forEach((image) => {
12590
- objects.push(new KonvaImage(null, image));
12591
- });
12592
- this.konvaLayerFind("Cloud").forEach((cloud) => {
12593
- objects.push(new KonvaCloud(null, cloud));
12553
+ Object.keys(MarkupMode2Konva).forEach((type) => {
12554
+ const konvaShape = MarkupMode2Konva[type];
12555
+ this.konvaLayerFind(type).forEach((ref) => objects.push(konvaShape.initializer(ref)));
12594
12556
  });
12595
12557
  return objects;
12596
12558
  }
12597
12559
  getSelectedObjects() {
12598
- const objects = [];
12599
- this._konvaTransformer.nodes().forEach((obj) => {
12600
- const konvaShapeName = obj.className;
12601
- switch (konvaShapeName) {
12602
- case "Line":
12603
- objects.push(new KonvaLine(null, obj));
12604
- break;
12605
- case "Text":
12606
- objects.push(new KonvaText(null, obj));
12607
- break;
12608
- case "Rect":
12609
- objects.push(new KonvaRectangle(null, obj));
12610
- break;
12611
- case "Ellipse":
12612
- objects.push(new KonvaEllipse(null, obj));
12613
- break;
12614
- case "Arrow":
12615
- objects.push(new KonvaArrow(null, obj));
12616
- break;
12617
- case "Image":
12618
- objects.push(new KonvaImage(null, obj));
12619
- break;
12620
- case "Cloud":
12621
- objects.push(new KonvaCloud(null, obj));
12622
- break;
12623
- }
12624
- });
12625
- return objects;
12560
+ return this._konvaTransformer
12561
+ .nodes()
12562
+ .map((ref) => {
12563
+ const name = ref.className;
12564
+ const konvaShape = Object.values(MarkupMode2Konva).find((shape) => shape.name === name);
12565
+ return konvaShape ? konvaShape.initializer(ref) : null;
12566
+ })
12567
+ .filter((x) => x);
12626
12568
  }
12627
12569
  selectObjects(objects) {
12628
12570
  const selectedObjs = this._konvaTransformer.nodes().concat(objects.map((x) => x.ref()));
@@ -12681,8 +12623,8 @@
12681
12623
  addObject(object) {
12682
12624
  this._konvaLayer.add(object.ref());
12683
12625
  }
12684
- konvaLayerFind(markupShape) {
12685
- const konvaShape = MarkupMode2Konva[markupShape];
12626
+ konvaLayerFind(type) {
12627
+ const konvaShape = MarkupMode2Konva[type];
12686
12628
  if (konvaShape && konvaShape.initializer) {
12687
12629
  // for "draggable" Konva uses Rectangles in Transformer. We need only Shapes from layer.
12688
12630
  return this._konvaLayer.find(konvaShape.name).filter((ref) => ref.parent === this._konvaLayer);