watermark-js-plus 0.9.11 → 0.9.13

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 (15) hide show
  1. package/dist/index.cjs.js +244 -237
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.cjs.min.js +1 -1
  4. package/dist/index.esm.js +244 -237
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/index.esm.min.js +1 -1
  7. package/dist/index.iife.js +244 -237
  8. package/dist/index.iife.js.map +1 -1
  9. package/dist/index.iife.min.js +1 -1
  10. package/dist/index.umd.js +244 -237
  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 +42 -0
  14. package/dist/types/src/core/watermark.d.ts +1 -16
  15. package/package.json +10 -10
package/dist/index.iife.js CHANGED
@@ -445,12 +445,13 @@ var WatermarkPlus = (function (exports) {
445
445
  }
446
446
  });
447
447
 
448
- // import { WatermarkOptions } from '../types'
449
448
  var WatermarkCanvas = /** @class */ (function () {
450
- function WatermarkCanvas() {
449
+ function WatermarkCanvas(args, options) {
450
+ this.props = args;
451
+ this.options = options;
452
+ this.canvas = WatermarkCanvas.createCanvas(this.options.width, this.options.height);
453
+ this.recommendOptions = generateRecommendOptions(this.canvas, this.options, this.props);
451
454
  }
452
- // constructor (args: Partial<WatermarkOptions> = {}) {
453
- // }
454
455
  /**
455
456
  * Create an HD canvas.
456
457
  * @param width - width of canvas
@@ -467,224 +468,25 @@ var WatermarkPlus = (function (exports) {
467
468
  (_a = canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.setTransform(ratio, 0, 0, ratio, 0, 0);
468
469
  return canvas;
469
470
  };
470
- return WatermarkCanvas;
471
- }());
472
-
473
- var GridLayout = /** @class */ (function () {
474
- function GridLayout(args, partialCanvas) {
475
- var _a, _b, _c, _d;
476
- this.options = args;
477
- this.partialWidth = this.options.width;
478
- this.partialHeight = this.options.height;
479
- this.rows = ((_a = this.options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.rows) || 1;
480
- this.cols = ((_b = this.options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.cols) || 1;
481
- this.matrix = ((_c = this.options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.matrix) || generateMatrix(this.rows, this.cols, 1);
482
- this.gap = ((_d = this.options.gridLayoutOptions) === null || _d === void 0 ? void 0 : _d.gap) || [0, 0];
483
- this.partialCanvas = partialCanvas;
484
- }
485
- GridLayout.prototype.draw = function () {
486
- var _a, _b;
487
- var layoutCanvas = WatermarkCanvas.createCanvas(this.partialWidth * this.cols + this.gap[0] * this.cols, this.partialHeight * this.rows + this.gap[1] * this.rows);
488
- var layoutContext = layoutCanvas.getContext('2d');
489
- for (var rowIndex = 0; rowIndex < this.rows; rowIndex++) {
490
- for (var colIndex = 0; colIndex < this.cols; colIndex++) {
491
- if (!((_b = (_a = this.matrix) === null || _a === void 0 ? void 0 : _a[rowIndex]) === null || _b === void 0 ? void 0 : _b[colIndex])) {
492
- continue;
493
- }
494
- 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);
495
- }
496
- }
497
- return layoutCanvas;
498
- };
499
- return GridLayout;
500
- }());
501
-
502
- var renderLayout = function (options, partialCanvas) {
503
- switch (options.layout) {
504
- case 'grid':
505
- return new GridLayout(options, partialCanvas).draw();
506
- default:
507
- return partialCanvas;
508
- }
509
- };
510
- var generateBackgroundSize = function (options) {
511
- var _a, _b, _c;
512
- switch (options.layout) {
513
- case 'grid':
514
- {
515
- var cols = ((_a = options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.cols) || 1;
516
- var rows = ((_b = options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.rows) || 1;
517
- var gap = ((_c = options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.gap) || [0, 0];
518
- return [
519
- options.width * cols + gap[0] * cols,
520
- options.height * rows + gap[1] * rows
521
- ];
522
- }
523
- default:
524
- return [
525
- options.width,
526
- options.height
527
- ];
528
- }
529
- };
530
-
531
- /**
532
- * Watermark class
533
- */
534
- var Watermark = /** @class */ (function () {
535
- /**
536
- * Watermark constructor
537
- * @param args - watermark args
538
- */
539
- function Watermark(args) {
540
- if (args === void 0) { args = {}; }
541
- this.parentElement = document.body;
542
- this.props = args;
543
- this.options = Object.assign({}, initialOptions, args);
544
- this.changeParentElement(this.options.parent);
545
- this.canvas = WatermarkCanvas.createCanvas(this.options.width, this.options.height);
546
- this.recommendOptions = generateRecommendOptions(this.canvas, this.options, this.props);
547
- bootstrap();
548
- }
549
- Watermark.prototype.changeOptions = function (args, mode) {
550
- if (args === void 0) { args = {}; }
551
- if (mode === void 0) { mode = 'overwrite'; }
552
- this.initConfigData(args, mode);
553
- };
554
471
  /**
555
- * Creating a watermark.
472
+ * Clean the canvas
473
+ * @param canvas
556
474
  */
557
- Watermark.prototype.create = function () {
558
- var _a, _b, _c, _d;
559
- return __awaiter(this, void 0, void 0, function () {
560
- var firstDraw, image, watermarkInnerDom, parentElementType, backgroundSize;
561
- return __generator(this, function (_e) {
562
- switch (_e.label) {
563
- case 0:
564
- if (!this.validateUnique()) {
565
- return [2 /*return*/];
566
- }
567
- if (!this.validateContent()) {
568
- return [2 /*return*/];
569
- }
570
- firstDraw = isUndefined(this.watermarkDom);
571
- return [4 /*yield*/, this.draw()];
572
- case 1:
573
- _e.sent();
574
- this.layoutCanvas = renderLayout(this.options, this.canvas);
575
- image = convertImage(this.layoutCanvas);
576
- this.clearCanvas();
577
- this.watermarkDom = document.createElement('div');
578
- watermarkInnerDom = document.createElement('div');
579
- this.watermarkDom.__WATERMARK__ = 'watermark';
580
- this.watermarkDom.__WATERMARK__INSTANCE__ = this;
581
- parentElementType = this.checkParentElementType();
582
- 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 ");
583
- backgroundSize = generateBackgroundSize(this.options);
584
- 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 ");
585
- this.watermarkDom.append(watermarkInnerDom);
586
- this.parentElement.appendChild(this.watermarkDom);
587
- if (this.options.mutationObserve) {
588
- try {
589
- this.bindMutationObserve();
590
- }
591
- catch (e) {
592
- (_b = (_a = this.options).onObserveError) === null || _b === void 0 ? void 0 : _b.call(_a);
593
- }
594
- }
595
- firstDraw && ((_d = (_c = this.options).onSuccess) === null || _d === void 0 ? void 0 : _d.call(_c));
596
- return [2 /*return*/];
597
- }
598
- });
599
- });
600
- };
601
- /**
602
- * Delete this watermark.
603
- */
604
- Watermark.prototype.destroy = function () {
605
- this.remove();
606
- this.watermarkDom = undefined;
607
- };
608
- Watermark.prototype.check = function () {
609
- return __awaiter(this, void 0, void 0, function () {
610
- return __generator(this, function (_a) {
611
- switch (_a.label) {
612
- case 0:
613
- if (!!document.body.contains(this.watermarkDom)) return [3 /*break*/, 2];
614
- this.remove();
615
- return [4 /*yield*/, this.create()];
616
- case 1:
617
- _a.sent();
618
- _a.label = 2;
619
- case 2: return [2 /*return*/];
620
- }
621
- });
622
- });
623
- };
624
- Watermark.prototype.remove = function () {
625
- var _a, _b, _c, _d, _e, _f, _g;
626
- (_b = (_a = this.options).onBeforeDestroy) === null || _b === void 0 ? void 0 : _b.call(_a);
627
- (_c = this.observer) === null || _c === void 0 ? void 0 : _c.disconnect();
628
- (_d = this.parentObserve) === null || _d === void 0 ? void 0 : _d.disconnect();
629
- if (!isUndefined(this.checkWatermarkElementRequestID)) {
630
- cancelAnimationFrame(this.checkWatermarkElementRequestID);
631
- }
632
- (_e = this.watermarkDom) === null || _e === void 0 ? void 0 : _e.remove();
633
- (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
634
- };
635
- Watermark.prototype.initConfigData = function (args, mode) {
636
- var _this = this;
637
- if (mode === void 0) { mode = 'overwrite'; }
638
- this.props = args;
639
- if (mode === 'overwrite') {
640
- this.options = Object.assign({}, initialOptions, args);
641
- }
642
- else {
643
- Object.keys(args).forEach(function (key) {
644
- _this.options[key] = args[key];
645
- });
646
- }
647
- this.changeParentElement(this.options.parent);
648
- this.canvas = WatermarkCanvas.createCanvas(this.options.width, this.options.height);
649
- this.recommendOptions = generateRecommendOptions(this.canvas, this.options, this.props);
650
- // document.body?.appendChild(this.canvas)
651
- };
652
- Watermark.prototype.changeParentElement = function (parent) {
653
- if (typeof parent === 'string') {
654
- var parentElement = document.querySelector(parent);
655
- parentElement && (this.parentElement = parentElement);
656
- }
657
- else {
658
- this.parentElement = parent;
475
+ WatermarkCanvas.clearCanvas = function (canvas) {
476
+ var ctx = canvas.getContext('2d');
477
+ if (ctx === null) {
478
+ throw new Error('get context error');
659
479
  }
480
+ ctx.restore();
481
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
660
482
  };
661
- Watermark.prototype.validateUnique = function () {
662
- var result = true;
663
- if (this.options.unique) {
664
- this.parentElement.childNodes.forEach(function (node) {
665
- if (!result) {
666
- return;
667
- }
668
- if (Object.hasOwnProperty.call(node, '__WATERMARK__')) {
669
- result = false;
670
- // throw new Error('duplicate watermark error')
671
- }
672
- });
673
- }
674
- return result;
483
+ WatermarkCanvas.prototype.getCanvas = function () {
484
+ return this.canvas;
675
485
  };
676
- Watermark.prototype.validateContent = function () {
677
- switch (this.options.contentType) {
678
- case 'image':
679
- return Object.hasOwnProperty.call(this.options, 'image');
680
- case 'multi-line-text':
681
- case 'rich-text':
682
- case 'text':
683
- return this.options.content.length > 0;
684
- }
685
- return false;
486
+ WatermarkCanvas.prototype.clear = function () {
487
+ WatermarkCanvas.clearCanvas(this.canvas);
686
488
  };
687
- Watermark.prototype.draw = function () {
489
+ WatermarkCanvas.prototype.draw = function () {
688
490
  var _this = this;
689
491
  var ctx = this.canvas.getContext('2d');
690
492
  if (ctx === null) {
@@ -725,7 +527,7 @@ var WatermarkPlus = (function (exports) {
725
527
  }
726
528
  });
727
529
  };
728
- Watermark.prototype.setStyle = function (ctx) {
530
+ WatermarkCanvas.prototype.setStyle = function (ctx) {
729
531
  var _a;
730
532
  var propName = 'fillStyle';
731
533
  if (this.options.textType === 'stroke') {
@@ -762,7 +564,7 @@ var WatermarkPlus = (function (exports) {
762
564
  this.options.extraDrawFunc(ctx);
763
565
  }
764
566
  };
765
- Watermark.prototype.createLinearGradient = function (ctx) {
567
+ WatermarkCanvas.prototype.createLinearGradient = function (ctx) {
766
568
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
767
569
  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));
768
570
  (_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) {
@@ -770,7 +572,7 @@ var WatermarkPlus = (function (exports) {
770
572
  });
771
573
  return gradient;
772
574
  };
773
- Watermark.prototype.createConicGradient = function (ctx) {
575
+ WatermarkCanvas.prototype.createConicGradient = function (ctx) {
774
576
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
775
577
  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));
776
578
  (_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) {
@@ -778,7 +580,7 @@ var WatermarkPlus = (function (exports) {
778
580
  });
779
581
  return gradient;
780
582
  };
781
- Watermark.prototype.createRadialGradient = function (ctx) {
583
+ WatermarkCanvas.prototype.createRadialGradient = function (ctx) {
782
584
  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;
783
585
  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));
784
586
  (_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) {
@@ -786,18 +588,18 @@ var WatermarkPlus = (function (exports) {
786
588
  });
787
589
  return gradient;
788
590
  };
789
- Watermark.prototype.createPattern = function (ctx) {
591
+ WatermarkCanvas.prototype.createPattern = function (ctx) {
790
592
  var _a, _b, _c, _d, _e, _f, _g, _h;
791
593
  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) || '');
792
594
  };
793
- Watermark.prototype.setText = function (ctx, params) {
595
+ WatermarkCanvas.prototype.setText = function (ctx, params) {
794
596
  var methodName = 'fillText';
795
597
  if (this.options.textType === 'stroke') {
796
598
  methodName = 'strokeText';
797
599
  }
798
600
  ctx[methodName] && ctx[methodName](params.text, params.x, params.y, params.maxWidth);
799
601
  };
800
- Watermark.prototype.drawText = function (ctx, resolve) {
602
+ WatermarkCanvas.prototype.drawText = function (ctx, resolve) {
801
603
  this.setText(ctx, {
802
604
  text: this.options.content,
803
605
  x: 0,
@@ -806,7 +608,7 @@ var WatermarkPlus = (function (exports) {
806
608
  });
807
609
  resolve(ctx.canvas);
808
610
  };
809
- Watermark.prototype.drawImage = function (ctx, resolve) {
611
+ WatermarkCanvas.prototype.drawImage = function (ctx, resolve) {
810
612
  var _this = this;
811
613
  loadImage(this.options.image).then(function (image) {
812
614
  var _a = _this.getImageRect(image), imageWidth = _a.width, imageHeight = _a.height;
@@ -815,7 +617,7 @@ var WatermarkPlus = (function (exports) {
815
617
  resolve(ctx.canvas);
816
618
  });
817
619
  };
818
- Watermark.prototype.drawMultiLineText = function (ctx, resolve) {
620
+ WatermarkCanvas.prototype.drawMultiLineText = function (ctx, resolve) {
819
621
  var _this = this;
820
622
  // image.width = this.options.width
821
623
  // image.height = this.options.height
@@ -840,7 +642,7 @@ var WatermarkPlus = (function (exports) {
840
642
  });
841
643
  resolve(ctx.canvas);
842
644
  };
843
- Watermark.prototype.drawRichText = function (ctx, resolve) {
645
+ WatermarkCanvas.prototype.drawRichText = function (ctx, resolve) {
844
646
  var _this = this;
845
647
  var obj = createCustomContentSVG(ctx, this.options);
846
648
  loadImage(convertSVGToImage(obj.element), obj.width, obj.height).then(function (image) {
@@ -849,7 +651,7 @@ var WatermarkPlus = (function (exports) {
849
651
  resolve(ctx.canvas);
850
652
  });
851
653
  };
852
- Watermark.prototype.getImageRect = function (image) {
654
+ WatermarkCanvas.prototype.getImageRect = function (image) {
853
655
  var rect = { width: this.options.imageWidth || 0, height: this.options.imageHeight || 0 };
854
656
  switch (true) {
855
657
  case rect.width !== 0 && rect.height === 0:
@@ -865,7 +667,7 @@ var WatermarkPlus = (function (exports) {
865
667
  }
866
668
  return rect;
867
669
  };
868
- Watermark.prototype.getDrawImagePosition = function (imageWidth, imageHeight) {
670
+ WatermarkCanvas.prototype.getDrawImagePosition = function (imageWidth, imageHeight) {
869
671
  var _a, _b;
870
672
  var result = {
871
673
  x: -imageWidth / 2,
@@ -909,6 +711,220 @@ var WatermarkPlus = (function (exports) {
909
711
  !isUndefined((_b = this.props) === null || _b === void 0 ? void 0 : _b.translateY) && (result.y = 0);
910
712
  return result;
911
713
  };
714
+ return WatermarkCanvas;
715
+ }());
716
+
717
+ var GridLayout = /** @class */ (function () {
718
+ function GridLayout(args, partialCanvas) {
719
+ var _a, _b, _c, _d;
720
+ this.options = args;
721
+ this.partialWidth = this.options.width;
722
+ this.partialHeight = this.options.height;
723
+ this.rows = ((_a = this.options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.rows) || 1;
724
+ this.cols = ((_b = this.options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.cols) || 1;
725
+ this.matrix = ((_c = this.options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.matrix) || generateMatrix(this.rows, this.cols, 1);
726
+ this.gap = ((_d = this.options.gridLayoutOptions) === null || _d === void 0 ? void 0 : _d.gap) || [0, 0];
727
+ this.partialCanvas = partialCanvas;
728
+ }
729
+ GridLayout.prototype.draw = function () {
730
+ var _a, _b;
731
+ var layoutCanvas = WatermarkCanvas.createCanvas(this.partialWidth * this.cols + this.gap[0] * this.cols, this.partialHeight * this.rows + this.gap[1] * this.rows);
732
+ var layoutContext = layoutCanvas.getContext('2d');
733
+ for (var rowIndex = 0; rowIndex < this.rows; rowIndex++) {
734
+ for (var colIndex = 0; colIndex < this.cols; colIndex++) {
735
+ if (!((_b = (_a = this.matrix) === null || _a === void 0 ? void 0 : _a[rowIndex]) === null || _b === void 0 ? void 0 : _b[colIndex])) {
736
+ continue;
737
+ }
738
+ 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);
739
+ }
740
+ }
741
+ return layoutCanvas;
742
+ };
743
+ return GridLayout;
744
+ }());
745
+
746
+ var renderLayout = function (options, partialCanvas) {
747
+ switch (options.layout) {
748
+ case 'grid':
749
+ return new GridLayout(options, partialCanvas).draw();
750
+ default:
751
+ return partialCanvas;
752
+ }
753
+ };
754
+ var generateBackgroundSize = function (options) {
755
+ var _a, _b, _c;
756
+ switch (options.layout) {
757
+ case 'grid':
758
+ {
759
+ var cols = ((_a = options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.cols) || 1;
760
+ var rows = ((_b = options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.rows) || 1;
761
+ var gap = ((_c = options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.gap) || [0, 0];
762
+ return [
763
+ options.width * cols + gap[0] * cols,
764
+ options.height * rows + gap[1] * rows
765
+ ];
766
+ }
767
+ default:
768
+ return [
769
+ options.width,
770
+ options.height
771
+ ];
772
+ }
773
+ };
774
+
775
+ /**
776
+ * Watermark class
777
+ */
778
+ var Watermark = /** @class */ (function () {
779
+ /**
780
+ * Watermark constructor
781
+ * @param args - watermark args
782
+ */
783
+ function Watermark(args) {
784
+ if (args === void 0) { args = {}; }
785
+ this.parentElement = document.body;
786
+ this.props = args;
787
+ this.options = Object.assign({}, initialOptions, args);
788
+ this.changeParentElement(this.options.parent);
789
+ this.watermarkCanvas = new WatermarkCanvas(this.props, this.options);
790
+ bootstrap();
791
+ }
792
+ Watermark.prototype.changeOptions = function (args, mode) {
793
+ if (args === void 0) { args = {}; }
794
+ if (mode === void 0) { mode = 'overwrite'; }
795
+ this.initConfigData(args, mode);
796
+ };
797
+ /**
798
+ * Creating a watermark.
799
+ */
800
+ Watermark.prototype.create = function () {
801
+ var _a, _b, _c, _d, _e, _f, _g;
802
+ return __awaiter(this, void 0, void 0, function () {
803
+ var firstDraw, image, watermarkInnerDom, parentElementType, backgroundSize;
804
+ return __generator(this, function (_h) {
805
+ switch (_h.label) {
806
+ case 0:
807
+ if (!this.validateUnique()) {
808
+ return [2 /*return*/];
809
+ }
810
+ if (!this.validateContent()) {
811
+ return [2 /*return*/];
812
+ }
813
+ firstDraw = isUndefined(this.watermarkDom);
814
+ return [4 /*yield*/, ((_a = this.watermarkCanvas) === null || _a === void 0 ? void 0 : _a.draw())];
815
+ case 1:
816
+ _h.sent();
817
+ this.layoutCanvas = renderLayout(this.options, (_b = this.watermarkCanvas) === null || _b === void 0 ? void 0 : _b.getCanvas());
818
+ image = convertImage(this.layoutCanvas);
819
+ (_c = this.watermarkCanvas) === null || _c === void 0 ? void 0 : _c.clear();
820
+ this.watermarkDom = document.createElement('div');
821
+ watermarkInnerDom = document.createElement('div');
822
+ this.watermarkDom.__WATERMARK__ = 'watermark';
823
+ this.watermarkDom.__WATERMARK__INSTANCE__ = this;
824
+ parentElementType = this.checkParentElementType();
825
+ 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 ");
826
+ backgroundSize = generateBackgroundSize(this.options);
827
+ 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 ");
828
+ this.watermarkDom.append(watermarkInnerDom);
829
+ this.parentElement.appendChild(this.watermarkDom);
830
+ if (this.options.mutationObserve) {
831
+ try {
832
+ this.bindMutationObserve();
833
+ }
834
+ catch (e) {
835
+ (_e = (_d = this.options).onObserveError) === null || _e === void 0 ? void 0 : _e.call(_d);
836
+ }
837
+ }
838
+ firstDraw && ((_g = (_f = this.options).onSuccess) === null || _g === void 0 ? void 0 : _g.call(_f));
839
+ return [2 /*return*/];
840
+ }
841
+ });
842
+ });
843
+ };
844
+ /**
845
+ * Delete this watermark.
846
+ */
847
+ Watermark.prototype.destroy = function () {
848
+ this.remove();
849
+ this.watermarkDom = undefined;
850
+ };
851
+ Watermark.prototype.check = function () {
852
+ return __awaiter(this, void 0, void 0, function () {
853
+ return __generator(this, function (_a) {
854
+ switch (_a.label) {
855
+ case 0:
856
+ if (!!document.body.contains(this.watermarkDom)) return [3 /*break*/, 2];
857
+ this.remove();
858
+ return [4 /*yield*/, this.create()];
859
+ case 1:
860
+ _a.sent();
861
+ _a.label = 2;
862
+ case 2: return [2 /*return*/];
863
+ }
864
+ });
865
+ });
866
+ };
867
+ Watermark.prototype.remove = function () {
868
+ var _a, _b, _c, _d, _e, _f, _g;
869
+ (_b = (_a = this.options).onBeforeDestroy) === null || _b === void 0 ? void 0 : _b.call(_a);
870
+ (_c = this.observer) === null || _c === void 0 ? void 0 : _c.disconnect();
871
+ (_d = this.parentObserve) === null || _d === void 0 ? void 0 : _d.disconnect();
872
+ if (!isUndefined(this.checkWatermarkElementRequestID)) {
873
+ cancelAnimationFrame(this.checkWatermarkElementRequestID);
874
+ }
875
+ (_e = this.watermarkDom) === null || _e === void 0 ? void 0 : _e.remove();
876
+ (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
877
+ };
878
+ Watermark.prototype.initConfigData = function (args, mode) {
879
+ var _this = this;
880
+ if (mode === void 0) { mode = 'overwrite'; }
881
+ this.props = args;
882
+ if (mode === 'overwrite') {
883
+ this.options = Object.assign({}, initialOptions, args);
884
+ }
885
+ else {
886
+ Object.keys(args).forEach(function (key) {
887
+ _this.options[key] = args[key];
888
+ });
889
+ }
890
+ this.changeParentElement(this.options.parent);
891
+ this.watermarkCanvas = new WatermarkCanvas(this.props, this.options);
892
+ };
893
+ Watermark.prototype.changeParentElement = function (parent) {
894
+ if (typeof parent === 'string') {
895
+ var parentElement = document.querySelector(parent);
896
+ parentElement && (this.parentElement = parentElement);
897
+ }
898
+ else {
899
+ this.parentElement = parent;
900
+ }
901
+ };
902
+ Watermark.prototype.validateUnique = function () {
903
+ var result = true;
904
+ if (this.options.unique) {
905
+ this.parentElement.childNodes.forEach(function (node) {
906
+ if (!result) {
907
+ return;
908
+ }
909
+ if (Object.hasOwnProperty.call(node, '__WATERMARK__')) {
910
+ result = false;
911
+ // throw new Error('duplicate watermark error')
912
+ }
913
+ });
914
+ }
915
+ return result;
916
+ };
917
+ Watermark.prototype.validateContent = function () {
918
+ switch (this.options.contentType) {
919
+ case 'image':
920
+ return Object.hasOwnProperty.call(this.options, 'image');
921
+ case 'multi-line-text':
922
+ case 'rich-text':
923
+ case 'text':
924
+ return this.options.content.length > 0;
925
+ }
926
+ return false;
927
+ };
912
928
  Watermark.prototype.checkParentElementType = function () {
913
929
  if (['html', 'body'].includes(this.parentElement.tagName.toLocaleLowerCase())) {
914
930
  return 'root';
@@ -992,15 +1008,6 @@ var WatermarkPlus = (function (exports) {
992
1008
  characterData: true // 节点内容或节点文本的变动。
993
1009
  });
994
1010
  };
995
- Watermark.prototype.clearCanvas = function () {
996
- var ctx = this.canvas.getContext('2d');
997
- if (ctx === null) {
998
- throw new Error('get context error');
999
- }
1000
- ctx.restore();
1001
- ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
1002
- // this.canvas.width = this.options.w
1003
- };
1004
1011
  return Watermark;
1005
1012
  }());
1006
1013