leafer-x-watermark 1.1.1 → 1.3.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/index.d.mts +8 -3
- package/dist/index.mjs +143 -131
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as _leafer_ui_interface from '@leafer-ui/interface';
|
|
1
2
|
import { IRectData, IUI, IRectInputData, IObject, IJSONOptions } from '@leafer-ui/interface';
|
|
2
3
|
import { RectData, Rect } from '@leafer-ui/core';
|
|
3
4
|
|
|
@@ -42,7 +43,7 @@ interface IProcessDataType extends IRectData {
|
|
|
42
43
|
height: number;
|
|
43
44
|
};
|
|
44
45
|
updateFill: () => void;
|
|
45
|
-
regenerateImage: () =>
|
|
46
|
+
regenerateImage: () => void;
|
|
46
47
|
}
|
|
47
48
|
interface IWatermark extends IWatermarkAttrData, IUI {
|
|
48
49
|
__: IProcessDataType;
|
|
@@ -57,7 +58,7 @@ declare class ProcessorData extends RectData implements IProcessDataType {
|
|
|
57
58
|
width: number;
|
|
58
59
|
height: number;
|
|
59
60
|
};
|
|
60
|
-
setTileContent(value: string):
|
|
61
|
+
setTileContent(value: string): void;
|
|
61
62
|
_tileMode?: boolean;
|
|
62
63
|
setTileMode(value: boolean): void;
|
|
63
64
|
_tileSize?: number;
|
|
@@ -72,7 +73,11 @@ declare class ProcessorData extends RectData implements IProcessDataType {
|
|
|
72
73
|
__getData(): IObject;
|
|
73
74
|
__getInputData(names?: string[] | IObject, options?: IJSONOptions): IObject;
|
|
74
75
|
private createTileItem;
|
|
75
|
-
regenerateImage():
|
|
76
|
+
regenerateImage(): void;
|
|
77
|
+
_simpleExport(ui: IUI): {
|
|
78
|
+
url: string;
|
|
79
|
+
bounds: _leafer_ui_interface.IBoundsData;
|
|
80
|
+
};
|
|
76
81
|
}
|
|
77
82
|
declare class Watermark<TConstructorData = IWatermarkInputData> extends Rect<TConstructorData> implements IWatermark {
|
|
78
83
|
get __tag(): string;
|
package/dist/index.mjs
CHANGED
|
@@ -1,123 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
const { get, scale, copy } = MatrixHelper;
|
|
4
|
-
const { getFloorScale } = MathHelper;
|
|
5
|
-
const { abs } = Math;
|
|
6
|
-
const originalCreatePattern = PaintImage.createPattern.bind(PaintImage);
|
|
7
|
-
function normalizeStagger(stagger) {
|
|
8
|
-
if (typeof stagger === "number") {
|
|
9
|
-
return { type: "x", offset: stagger };
|
|
10
|
-
}
|
|
11
|
-
return { type: stagger.type || "x", offset: stagger.offset || 0 };
|
|
12
|
-
}
|
|
13
|
-
function createStaggerCanvas(image, imgWidth, imgHeight, xGap, yGap, stagger, opacity, smooth) {
|
|
14
|
-
const unitWidth = imgWidth + xGap;
|
|
15
|
-
const unitHeight = imgHeight + yGap;
|
|
16
|
-
const isXStagger = stagger.type === "x";
|
|
17
|
-
const patternWidth = isXStagger ? unitWidth : unitWidth * 2;
|
|
18
|
-
const patternHeight = isXStagger ? unitHeight * 2 : unitHeight;
|
|
19
|
-
const canvas = Platform.origin.createCanvas(
|
|
20
|
-
Math.max(Math.floor(patternWidth), 1),
|
|
21
|
-
Math.max(Math.floor(patternHeight), 1)
|
|
22
|
-
);
|
|
23
|
-
const ctx = canvas.getContext("2d");
|
|
24
|
-
if (opacity && opacity < 1)
|
|
25
|
-
ctx.globalAlpha = opacity;
|
|
26
|
-
ctx.imageSmoothingEnabled = smooth !== false;
|
|
27
|
-
const imgView = image.view;
|
|
28
|
-
const drawImg = (x, y) => {
|
|
29
|
-
ctx.drawImage(imgView, 0, 0, image.width, image.height, x, y, imgWidth, imgHeight);
|
|
30
|
-
};
|
|
31
|
-
const offset = stagger.offset / 100 * (isXStagger ? unitWidth : unitHeight);
|
|
32
|
-
if (isXStagger) {
|
|
33
|
-
drawImg(0, 0);
|
|
34
|
-
drawImg(offset, unitHeight);
|
|
35
|
-
if (offset + imgWidth > unitWidth) {
|
|
36
|
-
drawImg(offset - unitWidth, unitHeight);
|
|
37
|
-
}
|
|
38
|
-
} else {
|
|
39
|
-
drawImg(0, 0);
|
|
40
|
-
drawImg(unitWidth, offset);
|
|
41
|
-
if (offset + imgHeight > unitHeight) {
|
|
42
|
-
drawImg(unitWidth, offset - unitHeight);
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
return canvas;
|
|
46
|
-
}
|
|
47
|
-
function createPatternWithStagger(paint, ui, canvas, renderOptions) {
|
|
48
|
-
const originPaint = paint.originPaint;
|
|
49
|
-
const rawStagger = originPaint?.stagger;
|
|
50
|
-
if (rawStagger === void 0 || rawStagger === 0) {
|
|
51
|
-
originalCreatePattern(paint, ui, canvas, renderOptions);
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
const stagger = normalizeStagger(rawStagger);
|
|
55
|
-
if (stagger.offset === 0) {
|
|
56
|
-
originalCreatePattern(paint, ui, canvas, renderOptions);
|
|
57
|
-
return;
|
|
58
|
-
}
|
|
59
|
-
let { scaleX, scaleY } = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions);
|
|
60
|
-
const id = `${scaleX}-${scaleY}-stagger-${stagger.type}-${stagger.offset}`;
|
|
61
|
-
if (paint.patternId !== id && !ui.destroyed) {
|
|
62
|
-
const { image, data } = paint;
|
|
63
|
-
const { transform, gap } = data;
|
|
64
|
-
const fixScale = PaintImage.getPatternFixScale(paint, scaleX, scaleY);
|
|
65
|
-
let imageMatrix;
|
|
66
|
-
let xGap = 0;
|
|
67
|
-
let yGap = 0;
|
|
68
|
-
let { width, height } = image;
|
|
69
|
-
if (fixScale) {
|
|
70
|
-
scaleX *= fixScale;
|
|
71
|
-
scaleY *= fixScale;
|
|
72
|
-
}
|
|
73
|
-
width *= scaleX;
|
|
74
|
-
height *= scaleY;
|
|
75
|
-
if (gap) {
|
|
76
|
-
xGap = gap.x * scaleX / abs(data.scaleX || 1);
|
|
77
|
-
yGap = gap.y * scaleY / abs(data.scaleY || 1);
|
|
78
|
-
}
|
|
79
|
-
const unitWidth = width + xGap;
|
|
80
|
-
const unitHeight = height + yGap;
|
|
81
|
-
const isXStagger = stagger.type === "x";
|
|
82
|
-
const patternWidth = isXStagger ? unitWidth : unitWidth * 2;
|
|
83
|
-
const patternHeight = isXStagger ? unitHeight * 2 : unitHeight;
|
|
84
|
-
if (transform || scaleX !== 1 || scaleY !== 1) {
|
|
85
|
-
const matrixScaleX = scaleX * getFloorScale(patternWidth);
|
|
86
|
-
const matrixScaleY = scaleY * getFloorScale(patternHeight);
|
|
87
|
-
imageMatrix = get();
|
|
88
|
-
if (transform)
|
|
89
|
-
copy(imageMatrix, transform);
|
|
90
|
-
scale(imageMatrix, 1 / matrixScaleX, 1 / matrixScaleY);
|
|
91
|
-
}
|
|
92
|
-
const imageCanvas = createStaggerCanvas(
|
|
93
|
-
image,
|
|
94
|
-
width,
|
|
95
|
-
height,
|
|
96
|
-
xGap,
|
|
97
|
-
yGap,
|
|
98
|
-
stagger,
|
|
99
|
-
data.opacity,
|
|
100
|
-
ui.leafer?.config.smooth
|
|
101
|
-
);
|
|
102
|
-
const pattern = image.getPattern(
|
|
103
|
-
imageCanvas,
|
|
104
|
-
data.repeat || "repeat",
|
|
105
|
-
imageMatrix,
|
|
106
|
-
paint
|
|
107
|
-
);
|
|
108
|
-
paint.style = pattern;
|
|
109
|
-
paint.patternId = id;
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
function installStaggerPattern() {
|
|
113
|
-
PaintImage.createPattern = createPatternWithStagger;
|
|
114
|
-
}
|
|
115
|
-
function processStaggerData(paint) {
|
|
116
|
-
if (paint.stagger !== void 0) {
|
|
117
|
-
return normalizeStagger(paint.stagger);
|
|
118
|
-
}
|
|
119
|
-
return null;
|
|
120
|
-
}
|
|
1
|
+
import { Debug, dataProcessor, boundsType, registerUI, Plugin, RectData, isObject, UICreator, Rect, MatrixHelper, MathHelper, PaintImage, Platform } from '@leafer-ui/core';
|
|
121
2
|
|
|
122
3
|
var __defProp = Object.defineProperty;
|
|
123
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -129,8 +10,7 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
129
10
|
if (kind && result) __defProp(target, key, result);
|
|
130
11
|
return result;
|
|
131
12
|
};
|
|
132
|
-
|
|
133
|
-
const debug = Debug.get("leafer-x-watermark");
|
|
13
|
+
const console = Debug.get("leafer-x-watermark");
|
|
134
14
|
class ProcessorData extends RectData {
|
|
135
15
|
_tileContent = "";
|
|
136
16
|
_cachedUrl;
|
|
@@ -219,7 +99,7 @@ class ProcessorData extends RectData {
|
|
|
219
99
|
around: "center"
|
|
220
100
|
});
|
|
221
101
|
}
|
|
222
|
-
|
|
102
|
+
regenerateImage() {
|
|
223
103
|
const leaf = this.__leaf;
|
|
224
104
|
const { _tileContent } = this;
|
|
225
105
|
const { width, height } = leaf;
|
|
@@ -233,25 +113,37 @@ class ProcessorData extends RectData {
|
|
|
233
113
|
try {
|
|
234
114
|
itemData = JSON.parse(_tileContent);
|
|
235
115
|
} catch (e) {
|
|
236
|
-
|
|
116
|
+
console.error("Invalid tileContent JSON:", e);
|
|
237
117
|
return;
|
|
238
118
|
}
|
|
239
119
|
const tempItem = this.createTileItem(itemData);
|
|
240
|
-
const bounds =
|
|
120
|
+
const { url, bounds } = this._simpleExport(tempItem);
|
|
241
121
|
if (!width || !height) {
|
|
242
122
|
leaf.width = bounds.width;
|
|
243
123
|
leaf.height = bounds.height;
|
|
244
124
|
}
|
|
245
|
-
const exportWidth = 1e3;
|
|
246
|
-
const { data: url } = await tempItem.export("png", {
|
|
247
|
-
blob: false,
|
|
248
|
-
size: { width: exportWidth }
|
|
249
|
-
});
|
|
250
125
|
this._cachedUrl = url;
|
|
251
|
-
this._cachedBounds =
|
|
126
|
+
this._cachedBounds = bounds;
|
|
252
127
|
tempItem.destroy();
|
|
253
128
|
this.updateFill();
|
|
254
129
|
}
|
|
130
|
+
_simpleExport(ui) {
|
|
131
|
+
const exportWidth = 1e3;
|
|
132
|
+
const bounds = ui.getBounds("render", "local");
|
|
133
|
+
const scaleRatio = exportWidth / bounds.width;
|
|
134
|
+
const scaledWidth = Math.floor(bounds.width * scaleRatio);
|
|
135
|
+
const scaledHeight = Math.floor(bounds.height * scaleRatio);
|
|
136
|
+
const canvas = UICreator.get("Canvas", {
|
|
137
|
+
x: 0,
|
|
138
|
+
y: 0,
|
|
139
|
+
width: scaledWidth,
|
|
140
|
+
height: scaledHeight
|
|
141
|
+
});
|
|
142
|
+
canvas.draw(ui, void 0, scaleRatio);
|
|
143
|
+
const url = canvas.canvas.toDataURL("image/png");
|
|
144
|
+
canvas.destroy();
|
|
145
|
+
return { url, bounds };
|
|
146
|
+
}
|
|
255
147
|
}
|
|
256
148
|
let Watermark = class extends Rect {
|
|
257
149
|
get __tag() {
|
|
@@ -262,6 +154,7 @@ let Watermark = class extends Rect {
|
|
|
262
154
|
}
|
|
263
155
|
constructor(data) {
|
|
264
156
|
super(data);
|
|
157
|
+
console.log(this.tileURL);
|
|
265
158
|
}
|
|
266
159
|
};
|
|
267
160
|
__decorateClass([
|
|
@@ -296,4 +189,123 @@ Watermark = __decorateClass([
|
|
|
296
189
|
], Watermark);
|
|
297
190
|
Plugin.add("leafer-x-watermark");
|
|
298
191
|
|
|
192
|
+
const { get, scale, copy } = MatrixHelper;
|
|
193
|
+
const { getFloorScale } = MathHelper;
|
|
194
|
+
const { abs } = Math;
|
|
195
|
+
const originalCreatePattern = PaintImage.createPattern.bind(PaintImage);
|
|
196
|
+
function normalizeStagger(stagger) {
|
|
197
|
+
if (typeof stagger === "number") {
|
|
198
|
+
return { type: "x", offset: stagger };
|
|
199
|
+
}
|
|
200
|
+
return { type: stagger.type || "x", offset: stagger.offset || 0 };
|
|
201
|
+
}
|
|
202
|
+
function createStaggerCanvas(image, imgWidth, imgHeight, xGap, yGap, stagger, opacity, smooth) {
|
|
203
|
+
const unitWidth = imgWidth + xGap;
|
|
204
|
+
const unitHeight = imgHeight + yGap;
|
|
205
|
+
const isXStagger = stagger.type === "x";
|
|
206
|
+
const patternWidth = isXStagger ? unitWidth : unitWidth * 2;
|
|
207
|
+
const patternHeight = isXStagger ? unitHeight * 2 : unitHeight;
|
|
208
|
+
const canvas = Platform.origin.createCanvas(
|
|
209
|
+
Math.max(Math.floor(patternWidth), 1),
|
|
210
|
+
Math.max(Math.floor(patternHeight), 1)
|
|
211
|
+
);
|
|
212
|
+
const ctx = canvas.getContext("2d");
|
|
213
|
+
if (opacity && opacity < 1)
|
|
214
|
+
ctx.globalAlpha = opacity;
|
|
215
|
+
ctx.imageSmoothingEnabled = smooth !== false;
|
|
216
|
+
const imgView = image.view;
|
|
217
|
+
const drawImg = (x, y) => {
|
|
218
|
+
ctx.drawImage(imgView, 0, 0, image.width, image.height, x, y, imgWidth, imgHeight);
|
|
219
|
+
};
|
|
220
|
+
const offset = stagger.offset / 100 * (isXStagger ? unitWidth : unitHeight);
|
|
221
|
+
if (isXStagger) {
|
|
222
|
+
drawImg(0, 0);
|
|
223
|
+
drawImg(offset, unitHeight);
|
|
224
|
+
if (offset + imgWidth > unitWidth) {
|
|
225
|
+
drawImg(offset - unitWidth, unitHeight);
|
|
226
|
+
}
|
|
227
|
+
} else {
|
|
228
|
+
drawImg(0, 0);
|
|
229
|
+
drawImg(unitWidth, offset);
|
|
230
|
+
if (offset + imgHeight > unitHeight) {
|
|
231
|
+
drawImg(unitWidth, offset - unitHeight);
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
return canvas;
|
|
235
|
+
}
|
|
236
|
+
function createPatternWithStagger(paint, ui, canvas, renderOptions) {
|
|
237
|
+
const originPaint = paint.originPaint;
|
|
238
|
+
const rawStagger = originPaint?.stagger;
|
|
239
|
+
if (rawStagger === void 0 || rawStagger === 0) {
|
|
240
|
+
originalCreatePattern(paint, ui, canvas, renderOptions);
|
|
241
|
+
return;
|
|
242
|
+
}
|
|
243
|
+
const stagger = normalizeStagger(rawStagger);
|
|
244
|
+
if (stagger.offset === 0) {
|
|
245
|
+
originalCreatePattern(paint, ui, canvas, renderOptions);
|
|
246
|
+
return;
|
|
247
|
+
}
|
|
248
|
+
let { scaleX, scaleY } = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions);
|
|
249
|
+
const id = `${scaleX}-${scaleY}-stagger-${stagger.type}-${stagger.offset}`;
|
|
250
|
+
if (paint.patternId !== id && !ui.destroyed) {
|
|
251
|
+
const { image, data } = paint;
|
|
252
|
+
const { transform, gap } = data;
|
|
253
|
+
const fixScale = PaintImage.getPatternFixScale(paint, scaleX, scaleY);
|
|
254
|
+
let imageMatrix;
|
|
255
|
+
let xGap = 0;
|
|
256
|
+
let yGap = 0;
|
|
257
|
+
let { width, height } = image;
|
|
258
|
+
if (fixScale) {
|
|
259
|
+
scaleX *= fixScale;
|
|
260
|
+
scaleY *= fixScale;
|
|
261
|
+
}
|
|
262
|
+
width *= scaleX;
|
|
263
|
+
height *= scaleY;
|
|
264
|
+
if (gap) {
|
|
265
|
+
xGap = gap.x * scaleX / abs(data.scaleX || 1);
|
|
266
|
+
yGap = gap.y * scaleY / abs(data.scaleY || 1);
|
|
267
|
+
}
|
|
268
|
+
const unitWidth = width + xGap;
|
|
269
|
+
const unitHeight = height + yGap;
|
|
270
|
+
const isXStagger = stagger.type === "x";
|
|
271
|
+
const patternWidth = isXStagger ? unitWidth : unitWidth * 2;
|
|
272
|
+
const patternHeight = isXStagger ? unitHeight * 2 : unitHeight;
|
|
273
|
+
if (transform || scaleX !== 1 || scaleY !== 1) {
|
|
274
|
+
const matrixScaleX = scaleX * getFloorScale(patternWidth);
|
|
275
|
+
const matrixScaleY = scaleY * getFloorScale(patternHeight);
|
|
276
|
+
imageMatrix = get();
|
|
277
|
+
if (transform)
|
|
278
|
+
copy(imageMatrix, transform);
|
|
279
|
+
scale(imageMatrix, 1 / matrixScaleX, 1 / matrixScaleY);
|
|
280
|
+
}
|
|
281
|
+
const imageCanvas = createStaggerCanvas(
|
|
282
|
+
image,
|
|
283
|
+
width,
|
|
284
|
+
height,
|
|
285
|
+
xGap,
|
|
286
|
+
yGap,
|
|
287
|
+
stagger,
|
|
288
|
+
data.opacity,
|
|
289
|
+
ui.leafer?.config.smooth
|
|
290
|
+
);
|
|
291
|
+
const pattern = image.getPattern(
|
|
292
|
+
imageCanvas,
|
|
293
|
+
data.repeat || "repeat",
|
|
294
|
+
imageMatrix,
|
|
295
|
+
paint
|
|
296
|
+
);
|
|
297
|
+
paint.style = pattern;
|
|
298
|
+
paint.patternId = id;
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
function installStaggerPattern() {
|
|
302
|
+
PaintImage.createPattern = createPatternWithStagger;
|
|
303
|
+
}
|
|
304
|
+
function processStaggerData(paint) {
|
|
305
|
+
if (paint.stagger !== void 0) {
|
|
306
|
+
return normalizeStagger(paint.stagger);
|
|
307
|
+
}
|
|
308
|
+
return null;
|
|
309
|
+
}
|
|
310
|
+
|
|
299
311
|
export { ProcessorData, Watermark, installStaggerPattern, normalizeStagger, processStaggerData };
|