watermark-js-plus 0.9.8 → 0.9.10

package/dist/index.cjs.js

@@ -446,24 +446,26 @@ var bootstrap = (function () {
 
 var GridLayout = /** @class */ (function () {
     function GridLayout(args, partialCanvas) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         this.options = args;
         this.partialWidth = this.options.width;
         this.partialHeight = this.options.height;
         this.rows = ((_a = this.options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.rows) || 1;
         this.cols = ((_b = this.options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.cols) || 1;
         this.matrix = ((_c = this.options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.matrix) || generateMatrix(this.rows, this.cols, 1);
+        this.gap = ((_d = this.options.gridLayoutOptions) === null || _d === void 0 ? void 0 : _d.gap) || [0, 0];
         this.partialCanvas = partialCanvas;
     }
     GridLayout.prototype.draw = function () {
-        var layoutCanvas = Watermark.createCanvas(this.partialWidth * this.rows, this.partialHeight * this.cols);
+        var _a, _b;
+        var layoutCanvas = Watermark.createCanvas(this.partialWidth * this.cols + this.gap[0] * this.cols, this.partialHeight * this.rows + this.gap[1] * this.rows);
         var layoutContext = layoutCanvas.getContext('2d');
         for (var rowIndex = 0; rowIndex < this.rows; rowIndex++) {
             for (var colIndex = 0; colIndex < this.cols; colIndex++) {
-                if (!this.matrix[rowIndex][colIndex]) {
+                if (!((_b = (_a = this.matrix) === null || _a === void 0 ? void 0 : _a[rowIndex]) === null || _b === void 0 ? void 0 : _b[colIndex])) {
                     continue;
                 }
-                layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.drawImage(this.partialCanvas, this.partialWidth * rowIndex, this.partialHeight * colIndex, this.partialWidth, this.partialHeight);
+                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);
             }
         }
         return layoutCanvas;
@@ -479,6 +481,26 @@ var renderLayout = function (options, partialCanvas) {
             return partialCanvas;
     }
 };
+var generateBackgroundSize = function (options) {
+    var _a, _b, _c;
+    switch (options.layout) {
+        case 'grid':
+            {
+                var cols = ((_a = options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.cols) || 1;
+                var rows = ((_b = options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.rows) || 1;
+                var gap = ((_c = options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.gap) || [0, 0];
+                return [
+                    options.width * cols + gap[0] * cols,
+                    options.height * rows + gap[1] * rows
+                ];
+            }
+        default:
+            return [
+                options.width,
+                options.height
+            ];
+    }
+};
 
 /**
  * Watermark class
@@ -523,11 +545,11 @@ var Watermark = /** @class */ (function () {
      * Creating a watermark.
      */
     Watermark.prototype.create = function () {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d;
         return __awaiter(this, void 0, void 0, function () {
-            var firstDraw, image, watermarkInnerDom, parentElementType;
-            return __generator(this, function (_g) {
-                switch (_g.label) {
+            var firstDraw, image, watermarkInnerDom, parentElementType, backgroundSize;
+            return __generator(this, function (_e) {
+                switch (_e.label) {
                     case 0:
                         if (!this.validateUnique()) {
                             return [2 /*return*/];
@@ -538,7 +560,7 @@ var Watermark = /** @class */ (function () {
                         firstDraw = isUndefined(this.watermarkDom);
                         return [4 /*yield*/, this.draw()];
                     case 1:
-                        _g.sent();
+                        _e.sent();
                         this.layoutCanvas = renderLayout(this.options, this.canvas);
                         image = convertImage(this.layoutCanvas);
                         this.clearCanvas();
@@ -548,7 +570,8 @@ var Watermark = /** @class */ (function () {
                         this.watermarkDom.__WATERMARK__INSTANCE__ = this;
                         parentElementType = this.checkParentElementType();
                         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    ");
-                        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(this.options.width * (((_a = this.options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.rows) || 1), "px ").concat(this.options.height * (((_b = this.options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.cols) || 1), "px!important;background-position:").concat(this.options.backgroundPosition, "!important;\n    ");
+                        backgroundSize = generateBackgroundSize(this.options);
+                        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    ");
                         this.watermarkDom.append(watermarkInnerDom);
                         this.parentElement.appendChild(this.watermarkDom);
                         if (this.options.mutationObserve) {
@@ -556,10 +579,10 @@ var Watermark = /** @class */ (function () {
                                 this.bindMutationObserve();
                             }
                             catch (e) {
-                                (_d = (_c = this.options).onObserveError) === null || _d === void 0 ? void 0 : _d.call(_c);
+                                (_b = (_a = this.options).onObserveError) === null || _b === void 0 ? void 0 : _b.call(_a);
                             }
                         }
-                        firstDraw && ((_f = (_e = this.options).onSuccess) === null || _f === void 0 ? void 0 : _f.call(_e));
+                        firstDraw && ((_d = (_c = this.options).onSuccess) === null || _d === void 0 ? void 0 : _d.call(_c));
                         return [2 /*return*/];
                 }
             });
@@ -569,15 +592,8 @@ var Watermark = /** @class */ (function () {
      * Delete this watermark.
      */
     Watermark.prototype.destroy = function () {
-        var _a, _b, _c, _d, _e, _f, _g;
-        (_b = (_a = this.options).onBeforeDestroy) === null || _b === void 0 ? void 0 : _b.call(_a);
-        (_c = this.observer) === null || _c === void 0 ? void 0 : _c.disconnect();
-        (_d = this.parentObserve) === null || _d === void 0 ? void 0 : _d.disconnect();
-        if (!isUndefined(this.checkWatermarkElementRequestID)) {
-            cancelAnimationFrame(this.checkWatermarkElementRequestID);
-        }
-        (_e = this.watermarkDom) === null || _e === void 0 ? void 0 : _e.remove();
-        (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
+        this.remove();
+        this.watermarkDom = undefined;
     };
     Watermark.prototype.check = function () {
         return __awaiter(this, void 0, void 0, function () {
@@ -585,7 +601,7 @@ var Watermark = /** @class */ (function () {
                 switch (_a.label) {
                     case 0:
                         if (!!document.body.contains(this.watermarkDom)) return [3 /*break*/, 2];
-                        this.destroy();
+                        this.remove();
                         return [4 /*yield*/, this.create()];
                     case 1:
                         _a.sent();
@@ -595,6 +611,17 @@ var Watermark = /** @class */ (function () {
             });
         });
     };
+    Watermark.prototype.remove = function () {
+        var _a, _b, _c, _d, _e, _f, _g;
+        (_b = (_a = this.options).onBeforeDestroy) === null || _b === void 0 ? void 0 : _b.call(_a);
+        (_c = this.observer) === null || _c === void 0 ? void 0 : _c.disconnect();
+        (_d = this.parentObserve) === null || _d === void 0 ? void 0 : _d.disconnect();
+        if (!isUndefined(this.checkWatermarkElementRequestID)) {
+            cancelAnimationFrame(this.checkWatermarkElementRequestID);
+        }
+        (_e = this.watermarkDom) === null || _e === void 0 ? void 0 : _e.remove();
+        (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
+    };
     Watermark.prototype.initConfigData = function (args, mode) {
         var _this = this;
         if (mode === void 0) { mode = 'overwrite'; }
@@ -884,7 +911,7 @@ var Watermark = /** @class */ (function () {
                 switch (_a.label) {
                     case 0:
                         if (!!document.body.contains(this.watermarkDom)) return [3 /*break*/, 2];
-                        this.destroy();
+                        this.remove();
                         return [4 /*yield*/, this.create()];
                     case 1:
                         _a.sent();
@@ -907,7 +934,7 @@ var Watermark = /** @class */ (function () {
                 switch (_a.label) {
                     case 0:
                         if (!(mutationsList.length > 0)) return [3 /*break*/, 2];
-                        this.destroy();
+                        this.remove();
                         return [4 /*yield*/, this.create()];
                     case 1:
                         _a.sent();
@@ -936,7 +963,7 @@ var Watermark = /** @class */ (function () {
                         if (!((item === null || item === void 0 ? void 0 : item.target) === this.watermarkDom ||
                             ((_a = item === null || item === void 0 ? void 0 : item.removedNodes) === null || _a === void 0 ? void 0 : _a[0]) === this.watermarkDom ||
                             (item.type === 'childList' && item.target === this.parentElement && item.target.lastChild !== this.watermarkDom))) return [3 /*break*/, 3];
-                        this.destroy();
+                        this.remove();
                         return [4 /*yield*/, this.create()];
                     case 2:
                         _b.sent();