watermark-js-plus 0.9.12 → 0.10.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.
Files changed (18) hide show
  1. package/dist/index.cjs.js +294 -232
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.cjs.min.js +1 -1
  4. package/dist/index.esm.js +294 -233
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/index.esm.min.js +1 -1
  7. package/dist/index.iife.js +294 -232
  8. package/dist/index.iife.js.map +1 -1
  9. package/dist/index.iife.min.js +1 -1
  10. package/dist/index.umd.js +294 -232
  11. package/dist/index.umd.js.map +1 -1
  12. package/dist/index.umd.min.js +1 -1
  13. package/dist/types/src/core/canvas.d.ts +37 -0
  14. package/dist/types/src/core/image.d.ts +22 -0
  15. package/dist/types/src/core/watermark.d.ts +1 -15
  16. package/dist/types/src/index.d.ts +2 -1
  17. package/dist/types/src/types/index.d.ts +10 -4
  18. package/package.json +10 -10
package/dist/index.iife.js CHANGED
@@ -32,6 +32,17 @@ var WatermarkPlus = (function (exports) {
32
32
  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
33
33
  }
34
34
 
35
+ var __assign = function() {
36
+ __assign = Object.assign || function __assign(t) {
37
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
38
+ s = arguments[i];
39
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
40
+ }
41
+ return t;
42
+ };
43
+ return __assign.apply(this, arguments);
44
+ };
45
+
35
46
  function __awaiter(thisArg, _arguments, P, generator) {
36
47
  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
37
48
  return new (P || (P = Promise))(function (resolve, reject) {
@@ -445,12 +456,13 @@ var WatermarkPlus = (function (exports) {
445
456
  }
446
457
  });
447
458
 
448
- // import { WatermarkOptions } from '../types'
449
459
  var WatermarkCanvas = /** @class */ (function () {
450
- function WatermarkCanvas() {
460
+ function WatermarkCanvas(args, options) {
461
+ this.props = args;
462
+ this.options = options;
463
+ this.canvas = WatermarkCanvas.createCanvas(this.options.width, this.options.height);
464
+ this.recommendOptions = generateRecommendOptions(this.canvas, this.options, this.props);
451
465
  }
452
- // constructor (args: Partial<WatermarkOptions> = {}) {
453
- // }
454
466
  /**
455
467
  * Create an HD canvas.
456
468
  * @param width - width of canvas
@@ -479,224 +491,13 @@ var WatermarkPlus = (function (exports) {
479
491
  ctx.restore();
480
492
  ctx.clearRect(0, 0, canvas.width, canvas.height);
481
493
  };
482
- return WatermarkCanvas;
483
- }());
484
-
485
- var GridLayout = /** @class */ (function () {
486
- function GridLayout(args, partialCanvas) {
487
- var _a, _b, _c, _d;
488
- this.options = args;
489
- this.partialWidth = this.options.width;
490
- this.partialHeight = this.options.height;
491
- this.rows = ((_a = this.options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.rows) || 1;
492
- this.cols = ((_b = this.options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.cols) || 1;
493
- this.matrix = ((_c = this.options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.matrix) || generateMatrix(this.rows, this.cols, 1);
494
- this.gap = ((_d = this.options.gridLayoutOptions) === null || _d === void 0 ? void 0 : _d.gap) || [0, 0];
495
- this.partialCanvas = partialCanvas;
496
- }
497
- GridLayout.prototype.draw = function () {
498
- var _a, _b;
499
- var layoutCanvas = WatermarkCanvas.createCanvas(this.partialWidth * this.cols + this.gap[0] * this.cols, this.partialHeight * this.rows + this.gap[1] * this.rows);
500
- var layoutContext = layoutCanvas.getContext('2d');
501
- for (var rowIndex = 0; rowIndex < this.rows; rowIndex++) {
502
- for (var colIndex = 0; colIndex < this.cols; colIndex++) {
503
- if (!((_b = (_a = this.matrix) === null || _a === void 0 ? void 0 : _a[rowIndex]) === null || _b === void 0 ? void 0 : _b[colIndex])) {
504
- continue;
505
- }
506
- layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.drawImage(this.partialCanvas, this.partialWidth * colIndex + this.gap[0] * colIndex, this.partialHeight * rowIndex + this.gap[1] * rowIndex, this.partialWidth, this.partialHeight);
507
- }
508
- }
509
- return layoutCanvas;
494
+ WatermarkCanvas.prototype.getCanvas = function () {
495
+ return this.canvas;
510
496
  };
511
- return GridLayout;
512
- }());
513
-
514
- var renderLayout = function (options, partialCanvas) {
515
- switch (options.layout) {
516
- case 'grid':
517
- return new GridLayout(options, partialCanvas).draw();
518
- default:
519
- return partialCanvas;
520
- }
521
- };
522
- var generateBackgroundSize = function (options) {
523
- var _a, _b, _c;
524
- switch (options.layout) {
525
- case 'grid':
526
- {
527
- var cols = ((_a = options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.cols) || 1;
528
- var rows = ((_b = options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.rows) || 1;
529
- var gap = ((_c = options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.gap) || [0, 0];
530
- return [
531
- options.width * cols + gap[0] * cols,
532
- options.height * rows + gap[1] * rows
533
- ];
534
- }
535
- default:
536
- return [
537
- options.width,
538
- options.height
539
- ];
540
- }
541
- };
542
-
543
- /**
544
- * Watermark class
545
- */
546
- var Watermark = /** @class */ (function () {
547
- /**
548
- * Watermark constructor
549
- * @param args - watermark args
550
- */
551
- function Watermark(args) {
552
- if (args === void 0) { args = {}; }
553
- this.parentElement = document.body;
554
- this.props = args;
555
- this.options = Object.assign({}, initialOptions, args);
556
- this.changeParentElement(this.options.parent);
557
- this.canvas = WatermarkCanvas.createCanvas(this.options.width, this.options.height);
558
- this.recommendOptions = generateRecommendOptions(this.canvas, this.options, this.props);
559
- bootstrap();
560
- }
561
- Watermark.prototype.changeOptions = function (args, mode) {
562
- if (args === void 0) { args = {}; }
563
- if (mode === void 0) { mode = 'overwrite'; }
564
- this.initConfigData(args, mode);
497
+ WatermarkCanvas.prototype.clear = function () {
498
+ WatermarkCanvas.clearCanvas(this.canvas);
565
499
  };
566
- /**
567
- * Creating a watermark.
568
- */
569
- Watermark.prototype.create = function () {
570
- var _a, _b, _c, _d;
571
- return __awaiter(this, void 0, void 0, function () {
572
- var firstDraw, image, watermarkInnerDom, parentElementType, backgroundSize;
573
- return __generator(this, function (_e) {
574
- switch (_e.label) {
575
- case 0:
576
- if (!this.validateUnique()) {
577
- return [2 /*return*/];
578
- }
579
- if (!this.validateContent()) {
580
- return [2 /*return*/];
581
- }
582
- firstDraw = isUndefined(this.watermarkDom);
583
- return [4 /*yield*/, this.draw()];
584
- case 1:
585
- _e.sent();
586
- this.layoutCanvas = renderLayout(this.options, this.canvas);
587
- image = convertImage(this.layoutCanvas);
588
- WatermarkCanvas.clearCanvas(this.canvas);
589
- this.watermarkDom = document.createElement('div');
590
- watermarkInnerDom = document.createElement('div');
591
- this.watermarkDom.__WATERMARK__ = 'watermark';
592
- this.watermarkDom.__WATERMARK__INSTANCE__ = this;
593
- parentElementType = this.checkParentElementType();
594
- this.watermarkDom.style.cssText = "\n z-index: ".concat(this.options.zIndex, "!important;display:block!important;visibility:visible!important;transform:none!important;scale:none!important;\n ").concat(parentElementType === 'custom' ? 'top:0!important;bottom:0!important;left:0!important;right:0!important;height:100%!important;pointer-events:none!important;position:absolute!important;' : 'position:relative!important;', "\n ");
595
- backgroundSize = generateBackgroundSize(this.options);
596
- watermarkInnerDom.style.cssText = "\n display:block!important;visibility:visible!important;pointer-events:none;top:0;bottom:0;left:0;right:0;transform:none!important;scale:none!important;\n position:".concat(parentElementType === 'root' ? 'fixed' : 'absolute', "!important;-webkit-print-color-adjust:exact!important;width:100%!important;height:100%!important;\n z-index:").concat(this.options.zIndex, "!important;background-image:url(").concat(image, ")!important;background-repeat:").concat(this.options.backgroundRepeat, "!important;\n background-size:").concat(backgroundSize[0], "px ").concat(backgroundSize[1], "px!important;background-position:").concat(this.options.backgroundPosition, "!important;\n ");
597
- this.watermarkDom.append(watermarkInnerDom);
598
- this.parentElement.appendChild(this.watermarkDom);
599
- if (this.options.mutationObserve) {
600
- try {
601
- this.bindMutationObserve();
602
- }
603
- catch (e) {
604
- (_b = (_a = this.options).onObserveError) === null || _b === void 0 ? void 0 : _b.call(_a);
605
- }
606
- }
607
- firstDraw && ((_d = (_c = this.options).onSuccess) === null || _d === void 0 ? void 0 : _d.call(_c));
608
- return [2 /*return*/];
609
- }
610
- });
611
- });
612
- };
613
- /**
614
- * Delete this watermark.
615
- */
616
- Watermark.prototype.destroy = function () {
617
- this.remove();
618
- this.watermarkDom = undefined;
619
- };
620
- Watermark.prototype.check = function () {
621
- return __awaiter(this, void 0, void 0, function () {
622
- return __generator(this, function (_a) {
623
- switch (_a.label) {
624
- case 0:
625
- if (!!document.body.contains(this.watermarkDom)) return [3 /*break*/, 2];
626
- this.remove();
627
- return [4 /*yield*/, this.create()];
628
- case 1:
629
- _a.sent();
630
- _a.label = 2;
631
- case 2: return [2 /*return*/];
632
- }
633
- });
634
- });
635
- };
636
- Watermark.prototype.remove = function () {
637
- var _a, _b, _c, _d, _e, _f, _g;
638
- (_b = (_a = this.options).onBeforeDestroy) === null || _b === void 0 ? void 0 : _b.call(_a);
639
- (_c = this.observer) === null || _c === void 0 ? void 0 : _c.disconnect();
640
- (_d = this.parentObserve) === null || _d === void 0 ? void 0 : _d.disconnect();
641
- if (!isUndefined(this.checkWatermarkElementRequestID)) {
642
- cancelAnimationFrame(this.checkWatermarkElementRequestID);
643
- }
644
- (_e = this.watermarkDom) === null || _e === void 0 ? void 0 : _e.remove();
645
- (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
646
- };
647
- Watermark.prototype.initConfigData = function (args, mode) {
648
- var _this = this;
649
- if (mode === void 0) { mode = 'overwrite'; }
650
- this.props = args;
651
- if (mode === 'overwrite') {
652
- this.options = Object.assign({}, initialOptions, args);
653
- }
654
- else {
655
- Object.keys(args).forEach(function (key) {
656
- _this.options[key] = args[key];
657
- });
658
- }
659
- this.changeParentElement(this.options.parent);
660
- this.canvas = WatermarkCanvas.createCanvas(this.options.width, this.options.height);
661
- this.recommendOptions = generateRecommendOptions(this.canvas, this.options, this.props);
662
- // document.body?.appendChild(this.canvas)
663
- };
664
- Watermark.prototype.changeParentElement = function (parent) {
665
- if (typeof parent === 'string') {
666
- var parentElement = document.querySelector(parent);
667
- parentElement && (this.parentElement = parentElement);
668
- }
669
- else {
670
- this.parentElement = parent;
671
- }
672
- };
673
- Watermark.prototype.validateUnique = function () {
674
- var result = true;
675
- if (this.options.unique) {
676
- this.parentElement.childNodes.forEach(function (node) {
677
- if (!result) {
678
- return;
679
- }
680
- if (Object.hasOwnProperty.call(node, '__WATERMARK__')) {
681
- result = false;
682
- // throw new Error('duplicate watermark error')
683
- }
684
- });
685
- }
686
- return result;
687
- };
688
- Watermark.prototype.validateContent = function () {
689
- switch (this.options.contentType) {
690
- case 'image':
691
- return Object.hasOwnProperty.call(this.options, 'image');
692
- case 'multi-line-text':
693
- case 'rich-text':
694
- case 'text':
695
- return this.options.content.length > 0;
696
- }
697
- return false;
698
- };
699
- Watermark.prototype.draw = function () {
500
+ WatermarkCanvas.prototype.draw = function () {
700
501
  var _this = this;
701
502
  var ctx = this.canvas.getContext('2d');
702
503
  if (ctx === null) {
@@ -737,7 +538,7 @@ var WatermarkPlus = (function (exports) {
737
538
  }
738
539
  });
739
540
  };
740
- Watermark.prototype.setStyle = function (ctx) {
541
+ WatermarkCanvas.prototype.setStyle = function (ctx) {
741
542
  var _a;
742
543
  var propName = 'fillStyle';
743
544
  if (this.options.textType === 'stroke') {
@@ -774,7 +575,7 @@ var WatermarkPlus = (function (exports) {
774
575
  this.options.extraDrawFunc(ctx);
775
576
  }
776
577
  };
777
- Watermark.prototype.createLinearGradient = function (ctx) {
578
+ WatermarkCanvas.prototype.createLinearGradient = function (ctx) {
778
579
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
779
580
  var gradient = ctx.createLinearGradient(getValue((_c = (_b = (_a = this.options.advancedStyle) === null || _a === void 0 ? void 0 : _a.params) === null || _b === void 0 ? void 0 : _b.linear) === null || _c === void 0 ? void 0 : _c.x0, this.recommendOptions.advancedStyleParams.linear.x0), getValue((_f = (_e = (_d = this.options.advancedStyle) === null || _d === void 0 ? void 0 : _d.params) === null || _e === void 0 ? void 0 : _e.linear) === null || _f === void 0 ? void 0 : _f.y0, 0), getValue((_j = (_h = (_g = this.options.advancedStyle) === null || _g === void 0 ? void 0 : _g.params) === null || _h === void 0 ? void 0 : _h.linear) === null || _j === void 0 ? void 0 : _j.x1, this.recommendOptions.advancedStyleParams.linear.x1), getValue((_m = (_l = (_k = this.options.advancedStyle) === null || _k === void 0 ? void 0 : _k.params) === null || _l === void 0 ? void 0 : _l.linear) === null || _m === void 0 ? void 0 : _m.y1, 0));
780
581
  (_q = (_p = (_o = this.options) === null || _o === void 0 ? void 0 : _o.advancedStyle) === null || _p === void 0 ? void 0 : _p.colorStops) === null || _q === void 0 ? void 0 : _q.forEach(function (item) {
@@ -782,7 +583,7 @@ var WatermarkPlus = (function (exports) {
782
583
  });
783
584
  return gradient;
784
585
  };
785
- Watermark.prototype.createConicGradient = function (ctx) {
586
+ WatermarkCanvas.prototype.createConicGradient = function (ctx) {
786
587
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
787
588
  var gradient = ctx.createConicGradient(getValue((_d = (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.conic) === null || _d === void 0 ? void 0 : _d.startAngle, 0), getValue((_h = (_g = (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.advancedStyle) === null || _f === void 0 ? void 0 : _f.params) === null || _g === void 0 ? void 0 : _g.conic) === null || _h === void 0 ? void 0 : _h.x, this.recommendOptions.advancedStyleParams.conic.x), getValue((_m = (_l = (_k = (_j = this.options) === null || _j === void 0 ? void 0 : _j.advancedStyle) === null || _k === void 0 ? void 0 : _k.params) === null || _l === void 0 ? void 0 : _l.conic) === null || _m === void 0 ? void 0 : _m.y, this.recommendOptions.advancedStyleParams.conic.y));
788
589
  (_q = (_p = (_o = this.options) === null || _o === void 0 ? void 0 : _o.advancedStyle) === null || _p === void 0 ? void 0 : _p.colorStops) === null || _q === void 0 ? void 0 : _q.forEach(function (item) {
@@ -790,7 +591,7 @@ var WatermarkPlus = (function (exports) {
790
591
  });
791
592
  return gradient;
792
593
  };
793
- Watermark.prototype.createRadialGradient = function (ctx) {
594
+ WatermarkCanvas.prototype.createRadialGradient = function (ctx) {
794
595
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
795
596
  var gradient = ctx.createRadialGradient(getValue((_d = (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.radial) === null || _d === void 0 ? void 0 : _d.x0, this.recommendOptions.advancedStyleParams.radial.x0), getValue((_h = (_g = (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.advancedStyle) === null || _f === void 0 ? void 0 : _f.params) === null || _g === void 0 ? void 0 : _g.radial) === null || _h === void 0 ? void 0 : _h.y0, this.recommendOptions.advancedStyleParams.radial.y0), getValue((_m = (_l = (_k = (_j = this.options) === null || _j === void 0 ? void 0 : _j.advancedStyle) === null || _k === void 0 ? void 0 : _k.params) === null || _l === void 0 ? void 0 : _l.radial) === null || _m === void 0 ? void 0 : _m.r0, this.recommendOptions.advancedStyleParams.radial.r0), getValue((_r = (_q = (_p = (_o = this.options) === null || _o === void 0 ? void 0 : _o.advancedStyle) === null || _p === void 0 ? void 0 : _p.params) === null || _q === void 0 ? void 0 : _q.radial) === null || _r === void 0 ? void 0 : _r.x1, this.recommendOptions.advancedStyleParams.radial.x1), getValue((_v = (_u = (_t = (_s = this.options) === null || _s === void 0 ? void 0 : _s.advancedStyle) === null || _t === void 0 ? void 0 : _t.params) === null || _u === void 0 ? void 0 : _u.radial) === null || _v === void 0 ? void 0 : _v.y1, this.recommendOptions.advancedStyleParams.radial.y1), getValue((_z = (_y = (_x = (_w = this.options) === null || _w === void 0 ? void 0 : _w.advancedStyle) === null || _x === void 0 ? void 0 : _x.params) === null || _y === void 0 ? void 0 : _y.radial) === null || _z === void 0 ? void 0 : _z.r1, this.recommendOptions.advancedStyleParams.radial.r1));
796
597
  (_2 = (_1 = (_0 = this.options) === null || _0 === void 0 ? void 0 : _0.advancedStyle) === null || _1 === void 0 ? void 0 : _1.colorStops) === null || _2 === void 0 ? void 0 : _2.forEach(function (item) {
@@ -798,18 +599,18 @@ var WatermarkPlus = (function (exports) {
798
599
  });
799
600
  return gradient;
800
601
  };
801
- Watermark.prototype.createPattern = function (ctx) {
602
+ WatermarkCanvas.prototype.createPattern = function (ctx) {
802
603
  var _a, _b, _c, _d, _e, _f, _g, _h;
803
604
  return ctx.createPattern((_d = (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.pattern) === null || _d === void 0 ? void 0 : _d.image, ((_h = (_g = (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.advancedStyle) === null || _f === void 0 ? void 0 : _f.params) === null || _g === void 0 ? void 0 : _g.pattern) === null || _h === void 0 ? void 0 : _h.repetition) || '');
804
605
  };
805
- Watermark.prototype.setText = function (ctx, params) {
606
+ WatermarkCanvas.prototype.setText = function (ctx, params) {
806
607
  var methodName = 'fillText';
807
608
  if (this.options.textType === 'stroke') {
808
609
  methodName = 'strokeText';
809
610
  }
810
611
  ctx[methodName] && ctx[methodName](params.text, params.x, params.y, params.maxWidth);
811
612
  };
812
- Watermark.prototype.drawText = function (ctx, resolve) {
613
+ WatermarkCanvas.prototype.drawText = function (ctx, resolve) {
813
614
  this.setText(ctx, {
814
615
  text: this.options.content,
815
616
  x: 0,
@@ -818,7 +619,7 @@ var WatermarkPlus = (function (exports) {
818
619
  });
819
620
  resolve(ctx.canvas);
820
621
  };
821
- Watermark.prototype.drawImage = function (ctx, resolve) {
622
+ WatermarkCanvas.prototype.drawImage = function (ctx, resolve) {
822
623
  var _this = this;
823
624
  loadImage(this.options.image).then(function (image) {
824
625
  var _a = _this.getImageRect(image), imageWidth = _a.width, imageHeight = _a.height;
@@ -827,7 +628,7 @@ var WatermarkPlus = (function (exports) {
827
628
  resolve(ctx.canvas);
828
629
  });
829
630
  };
830
- Watermark.prototype.drawMultiLineText = function (ctx, resolve) {
631
+ WatermarkCanvas.prototype.drawMultiLineText = function (ctx, resolve) {
831
632
  var _this = this;
832
633
  // image.width = this.options.width
833
634
  // image.height = this.options.height
@@ -852,7 +653,7 @@ var WatermarkPlus = (function (exports) {
852
653
  });
853
654
  resolve(ctx.canvas);
854
655
  };
855
- Watermark.prototype.drawRichText = function (ctx, resolve) {
656
+ WatermarkCanvas.prototype.drawRichText = function (ctx, resolve) {
856
657
  var _this = this;
857
658
  var obj = createCustomContentSVG(ctx, this.options);
858
659
  loadImage(convertSVGToImage(obj.element), obj.width, obj.height).then(function (image) {
@@ -861,7 +662,7 @@ var WatermarkPlus = (function (exports) {
861
662
  resolve(ctx.canvas);
862
663
  });
863
664
  };
864
- Watermark.prototype.getImageRect = function (image) {
665
+ WatermarkCanvas.prototype.getImageRect = function (image) {
865
666
  var rect = { width: this.options.imageWidth || 0, height: this.options.imageHeight || 0 };
866
667
  switch (true) {
867
668
  case rect.width !== 0 && rect.height === 0:
@@ -877,7 +678,7 @@ var WatermarkPlus = (function (exports) {
877
678
  }
878
679
  return rect;
879
680
  };
880
- Watermark.prototype.getDrawImagePosition = function (imageWidth, imageHeight) {
681
+ WatermarkCanvas.prototype.getDrawImagePosition = function (imageWidth, imageHeight) {
881
682
  var _a, _b;
882
683
  var result = {
883
684
  x: -imageWidth / 2,
@@ -921,6 +722,223 @@ var WatermarkPlus = (function (exports) {
921
722
  !isUndefined((_b = this.props) === null || _b === void 0 ? void 0 : _b.translateY) && (result.y = 0);
922
723
  return result;
923
724
  };
725
+ return WatermarkCanvas;
726
+ }());
727
+
728
+ var GridLayout = /** @class */ (function () {
729
+ function GridLayout(args, partialCanvas) {
730
+ var _a, _b, _c, _d;
731
+ this.options = args;
732
+ this.partialWidth = this.options.width;
733
+ this.partialHeight = this.options.height;
734
+ this.rows = ((_a = this.options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.rows) || 1;
735
+ this.cols = ((_b = this.options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.cols) || 1;
736
+ this.matrix = ((_c = this.options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.matrix) || generateMatrix(this.rows, this.cols, 1);
737
+ this.gap = ((_d = this.options.gridLayoutOptions) === null || _d === void 0 ? void 0 : _d.gap) || [0, 0];
738
+ this.partialCanvas = partialCanvas;
739
+ }
740
+ GridLayout.prototype.draw = function () {
741
+ var _a, _b, _c, _d, _e, _f, _g, _h;
742
+ var layoutCanvas = WatermarkCanvas.createCanvas(((_a = this.options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.width) || (this.partialWidth * this.cols + this.gap[0] * this.cols), ((_b = this.options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.height) || (this.partialHeight * this.rows + this.gap[1] * this.rows));
743
+ var layoutContext = layoutCanvas.getContext('2d');
744
+ if ((_c = this.options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.backgroundImage) {
745
+ layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.drawImage((_d = this.options.gridLayoutOptions) === null || _d === void 0 ? void 0 : _d.backgroundImage, 0, 0, (_e = this.options.gridLayoutOptions) === null || _e === void 0 ? void 0 : _e.width, (_f = this.options.gridLayoutOptions) === null || _f === void 0 ? void 0 : _f.height);
746
+ }
747
+ for (var rowIndex = 0; rowIndex < this.rows; rowIndex++) {
748
+ for (var colIndex = 0; colIndex < this.cols; colIndex++) {
749
+ if (!((_h = (_g = this.matrix) === null || _g === void 0 ? void 0 : _g[rowIndex]) === null || _h === void 0 ? void 0 : _h[colIndex])) {
750
+ continue;
751
+ }
752
+ layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.drawImage(this.partialCanvas, this.partialWidth * colIndex + this.gap[0] * colIndex, this.partialHeight * rowIndex + this.gap[1] * rowIndex, this.partialWidth, this.partialHeight);
753
+ }
754
+ }
755
+ return layoutCanvas;
756
+ };
757
+ return GridLayout;
758
+ }());
759
+
760
+ var renderLayout = function (options, partialCanvas) {
761
+ switch (options.layout) {
762
+ case 'grid':
763
+ return new GridLayout(options, partialCanvas).draw();
764
+ default:
765
+ return partialCanvas;
766
+ }
767
+ };
768
+ var generateBackgroundSize = function (options) {
769
+ var _a, _b, _c;
770
+ switch (options.layout) {
771
+ case 'grid':
772
+ {
773
+ var cols = ((_a = options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.cols) || 1;
774
+ var rows = ((_b = options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.rows) || 1;
775
+ var gap = ((_c = options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.gap) || [0, 0];
776
+ return [
777
+ options.width * cols + gap[0] * cols,
778
+ options.height * rows + gap[1] * rows
779
+ ];
780
+ }
781
+ default:
782
+ return [
783
+ options.width,
784
+ options.height
785
+ ];
786
+ }
787
+ };
788
+
789
+ /**
790
+ * Watermark class
791
+ */
792
+ var Watermark = /** @class */ (function () {
793
+ /**
794
+ * Watermark constructor
795
+ * @param args - watermark args
796
+ */
797
+ function Watermark(args) {
798
+ if (args === void 0) { args = {}; }
799
+ this.parentElement = document.body;
800
+ this.props = args;
801
+ this.options = Object.assign({}, initialOptions, args);
802
+ this.changeParentElement(this.options.parent);
803
+ this.watermarkCanvas = new WatermarkCanvas(this.props, this.options);
804
+ bootstrap();
805
+ }
806
+ Watermark.prototype.changeOptions = function (args, mode) {
807
+ if (args === void 0) { args = {}; }
808
+ if (mode === void 0) { mode = 'overwrite'; }
809
+ this.initConfigData(args, mode);
810
+ };
811
+ /**
812
+ * Creating a watermark.
813
+ */
814
+ Watermark.prototype.create = function () {
815
+ var _a, _b, _c, _d, _e, _f, _g;
816
+ return __awaiter(this, void 0, void 0, function () {
817
+ var firstDraw, image, watermarkInnerDom, parentElementType, backgroundSize;
818
+ return __generator(this, function (_h) {
819
+ switch (_h.label) {
820
+ case 0:
821
+ if (!this.validateUnique()) {
822
+ return [2 /*return*/];
823
+ }
824
+ if (!this.validateContent()) {
825
+ return [2 /*return*/];
826
+ }
827
+ firstDraw = isUndefined(this.watermarkDom);
828
+ return [4 /*yield*/, ((_a = this.watermarkCanvas) === null || _a === void 0 ? void 0 : _a.draw())];
829
+ case 1:
830
+ _h.sent();
831
+ this.layoutCanvas = renderLayout(this.options, (_b = this.watermarkCanvas) === null || _b === void 0 ? void 0 : _b.getCanvas());
832
+ image = convertImage(this.layoutCanvas);
833
+ (_c = this.watermarkCanvas) === null || _c === void 0 ? void 0 : _c.clear();
834
+ this.watermarkDom = document.createElement('div');
835
+ watermarkInnerDom = document.createElement('div');
836
+ this.watermarkDom.__WATERMARK__ = 'watermark';
837
+ this.watermarkDom.__WATERMARK__INSTANCE__ = this;
838
+ parentElementType = this.checkParentElementType();
839
+ this.watermarkDom.style.cssText = "\n z-index: ".concat(this.options.zIndex, "!important;display:block!important;visibility:visible!important;transform:none!important;scale:none!important;\n ").concat(parentElementType === 'custom' ? 'top:0!important;bottom:0!important;left:0!important;right:0!important;height:100%!important;pointer-events:none!important;position:absolute!important;' : 'position:relative!important;', "\n ");
840
+ backgroundSize = generateBackgroundSize(this.options);
841
+ watermarkInnerDom.style.cssText = "\n display:block!important;visibility:visible!important;pointer-events:none;top:0;bottom:0;left:0;right:0;transform:none!important;scale:none!important;\n position:".concat(parentElementType === 'root' ? 'fixed' : 'absolute', "!important;-webkit-print-color-adjust:exact!important;width:100%!important;height:100%!important;\n z-index:").concat(this.options.zIndex, "!important;background-image:url(").concat(image, ")!important;background-repeat:").concat(this.options.backgroundRepeat, "!important;\n background-size:").concat(backgroundSize[0], "px ").concat(backgroundSize[1], "px!important;background-position:").concat(this.options.backgroundPosition, "!important;\n ");
842
+ this.watermarkDom.append(watermarkInnerDom);
843
+ this.parentElement.appendChild(this.watermarkDom);
844
+ if (this.options.mutationObserve) {
845
+ try {
846
+ this.bindMutationObserve();
847
+ }
848
+ catch (e) {
849
+ (_e = (_d = this.options).onObserveError) === null || _e === void 0 ? void 0 : _e.call(_d);
850
+ }
851
+ }
852
+ firstDraw && ((_g = (_f = this.options).onSuccess) === null || _g === void 0 ? void 0 : _g.call(_f));
853
+ return [2 /*return*/];
854
+ }
855
+ });
856
+ });
857
+ };
858
+ /**
859
+ * Delete this watermark.
860
+ */
861
+ Watermark.prototype.destroy = function () {
862
+ this.remove();
863
+ this.watermarkDom = undefined;
864
+ };
865
+ Watermark.prototype.check = function () {
866
+ return __awaiter(this, void 0, void 0, function () {
867
+ return __generator(this, function (_a) {
868
+ switch (_a.label) {
869
+ case 0:
870
+ if (!!document.body.contains(this.watermarkDom)) return [3 /*break*/, 2];
871
+ this.remove();
872
+ return [4 /*yield*/, this.create()];
873
+ case 1:
874
+ _a.sent();
875
+ _a.label = 2;
876
+ case 2: return [2 /*return*/];
877
+ }
878
+ });
879
+ });
880
+ };
881
+ Watermark.prototype.remove = function () {
882
+ var _a, _b, _c, _d, _e, _f, _g;
883
+ (_b = (_a = this.options).onBeforeDestroy) === null || _b === void 0 ? void 0 : _b.call(_a);
884
+ (_c = this.observer) === null || _c === void 0 ? void 0 : _c.disconnect();
885
+ (_d = this.parentObserve) === null || _d === void 0 ? void 0 : _d.disconnect();
886
+ if (!isUndefined(this.checkWatermarkElementRequestID)) {
887
+ cancelAnimationFrame(this.checkWatermarkElementRequestID);
888
+ }
889
+ (_e = this.watermarkDom) === null || _e === void 0 ? void 0 : _e.remove();
890
+ (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
891
+ };
892
+ Watermark.prototype.initConfigData = function (args, mode) {
893
+ var _this = this;
894
+ if (mode === void 0) { mode = 'overwrite'; }
895
+ this.props = args;
896
+ if (mode === 'overwrite') {
897
+ this.options = Object.assign({}, initialOptions, args);
898
+ }
899
+ else {
900
+ Object.keys(args).forEach(function (key) {
901
+ _this.options[key] = args[key];
902
+ });
903
+ }
904
+ this.changeParentElement(this.options.parent);
905
+ this.watermarkCanvas = new WatermarkCanvas(this.props, this.options);
906
+ };
907
+ Watermark.prototype.changeParentElement = function (parent) {
908
+ if (typeof parent === 'string') {
909
+ var parentElement = document.querySelector(parent);
910
+ parentElement && (this.parentElement = parentElement);
911
+ }
912
+ else {
913
+ this.parentElement = parent;
914
+ }
915
+ };
916
+ Watermark.prototype.validateUnique = function () {
917
+ var result = true;
918
+ if (this.options.unique) {
919
+ this.parentElement.childNodes.forEach(function (node) {
920
+ if (!result) {
921
+ return;
922
+ }
923
+ if (Object.hasOwnProperty.call(node, '__WATERMARK__')) {
924
+ result = false;
925
+ // throw new Error('duplicate watermark error')
926
+ }
927
+ });
928
+ }
929
+ return result;
930
+ };
931
+ Watermark.prototype.validateContent = function () {
932
+ switch (this.options.contentType) {
933
+ case 'image':
934
+ return Object.hasOwnProperty.call(this.options, 'image');
935
+ case 'multi-line-text':
936
+ case 'rich-text':
937
+ case 'text':
938
+ return this.options.content.length > 0;
939
+ }
940
+ return false;
941
+ };
924
942
  Watermark.prototype.checkParentElementType = function () {
925
943
  if (['html', 'body'].includes(this.parentElement.tagName.toLocaleLowerCase())) {
926
944
  return 'root';
@@ -1061,7 +1079,51 @@ var WatermarkPlus = (function (exports) {
1061
1079
  return BlindWatermark;
1062
1080
  }(Watermark));
1063
1081
 
1082
+ /**
1083
+ * ImageWatermark class
1084
+ */
1085
+ var ImageWatermark = /** @class */ (function () {
1086
+ /**
1087
+ * ImageWatermark constructor
1088
+ * @param args - image watermark args
1089
+ */
1090
+ function ImageWatermark(args) {
1091
+ if (args === void 0) { args = {}; }
1092
+ var _a;
1093
+ this.drew = false;
1094
+ this.props = args;
1095
+ this.options = Object.assign({}, initialOptions, args);
1096
+ this.watermarkCanvas = new WatermarkCanvas(this.props, this.options);
1097
+ this.originalSrc = (_a = this.props.dom) === null || _a === void 0 ? void 0 : _a.src;
1098
+ this.backgroundImage = this.getBackgroundImage();
1099
+ }
1100
+ ImageWatermark.prototype.create = function () {
1101
+ var _a, _b, _c, _d, _e;
1102
+ if (this.drew) {
1103
+ return;
1104
+ }
1105
+ (_a = this.watermarkCanvas) === null || _a === void 0 ? void 0 : _a.draw();
1106
+ this.options.layout = 'grid';
1107
+ this.options.gridLayoutOptions = __assign(__assign({}, this.options.gridLayoutOptions), { width: (_b = this.backgroundImage) === null || _b === void 0 ? void 0 : _b.width, height: (_c = this.backgroundImage) === null || _c === void 0 ? void 0 : _c.height, backgroundImage: this.backgroundImage });
1108
+ this.layoutCanvas = renderLayout(this.options, (_d = this.watermarkCanvas) === null || _d === void 0 ? void 0 : _d.getCanvas());
1109
+ this.options.dom.src = convertImage(this.layoutCanvas);
1110
+ (_e = this.watermarkCanvas) === null || _e === void 0 ? void 0 : _e.clear();
1111
+ this.drew = true;
1112
+ };
1113
+ ImageWatermark.prototype.destroy = function () {
1114
+ this.options.dom.src = this.originalSrc;
1115
+ this.drew = false;
1116
+ };
1117
+ ImageWatermark.prototype.getBackgroundImage = function () {
1118
+ if (this.options.dom) {
1119
+ return this.options.dom;
1120
+ }
1121
+ };
1122
+ return ImageWatermark;
1123
+ }());
1124
+
1064
1125
  exports.BlindWatermark = BlindWatermark;
1126
+ exports.ImageWatermark = ImageWatermark;
1065
1127
  exports.Watermark = Watermark;
1066
1128
 
1067
1129
  return exports;