leafer-x-watermark 1.1.0 → 1.1.1
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 +21 -10
- package/dist/index.mjs +95 -96
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -33,9 +33,16 @@ interface IProcessDataType extends IRectData {
|
|
|
33
33
|
_tileContent?: string;
|
|
34
34
|
_tileMode?: boolean;
|
|
35
35
|
_tileSize?: number;
|
|
36
|
-
_tileGap?: number;
|
|
37
|
-
_tileStagger?:
|
|
36
|
+
_tileGap?: number | ITileGap;
|
|
37
|
+
_tileStagger?: IStagger;
|
|
38
38
|
_tileRotation?: number;
|
|
39
|
+
_cachedUrl?: string;
|
|
40
|
+
_cachedBounds?: {
|
|
41
|
+
width: number;
|
|
42
|
+
height: number;
|
|
43
|
+
};
|
|
44
|
+
updateFill: () => void;
|
|
45
|
+
regenerateImage: () => Promise<void>;
|
|
39
46
|
}
|
|
40
47
|
interface IWatermark extends IWatermarkAttrData, IUI {
|
|
41
48
|
__: IProcessDataType;
|
|
@@ -45,19 +52,27 @@ interface IWatermarkInputData extends IWatermarkAttrData, IRectInputData {
|
|
|
45
52
|
declare class ProcessorData extends RectData implements IProcessDataType {
|
|
46
53
|
__leaf: Watermark;
|
|
47
54
|
_tileContent?: string;
|
|
48
|
-
|
|
55
|
+
_cachedUrl?: string;
|
|
56
|
+
_cachedBounds?: {
|
|
57
|
+
width: number;
|
|
58
|
+
height: number;
|
|
59
|
+
};
|
|
60
|
+
setTileContent(value: string): Promise<void>;
|
|
49
61
|
_tileMode?: boolean;
|
|
50
62
|
setTileMode(value: boolean): void;
|
|
51
63
|
_tileSize?: number;
|
|
52
64
|
setTileSize(value: number): void;
|
|
53
|
-
_tileGap?: number;
|
|
65
|
+
_tileGap?: number | ITileGap;
|
|
54
66
|
setTileGap(value: number): void;
|
|
55
|
-
_tileStagger?:
|
|
67
|
+
_tileStagger?: IStagger;
|
|
56
68
|
setTileStagger(value: number): void;
|
|
57
69
|
_tileRotation?: number;
|
|
58
70
|
setTileRotation(value: number): void;
|
|
71
|
+
updateFill(): void;
|
|
59
72
|
__getData(): IObject;
|
|
60
73
|
__getInputData(names?: string[] | IObject, options?: IJSONOptions): IObject;
|
|
74
|
+
private createTileItem;
|
|
75
|
+
regenerateImage(): Promise<void>;
|
|
61
76
|
}
|
|
62
77
|
declare class Watermark<TConstructorData = IWatermarkInputData> extends Rect<TConstructorData> implements IWatermark {
|
|
63
78
|
get __tag(): string;
|
|
@@ -73,12 +88,8 @@ declare class Watermark<TConstructorData = IWatermarkInputData> extends Rect<TCo
|
|
|
73
88
|
tileRotation: number;
|
|
74
89
|
width: number;
|
|
75
90
|
height: number;
|
|
76
|
-
|
|
77
|
-
private _cachedBounds?;
|
|
91
|
+
get tileURL(): string;
|
|
78
92
|
constructor(data?: TConstructorData);
|
|
79
|
-
private createTileItem;
|
|
80
|
-
regenerateImage(): void;
|
|
81
|
-
updateFill(): void;
|
|
82
93
|
}
|
|
83
94
|
|
|
84
95
|
declare function normalizeStagger(stagger: IStagger): INormalizedStagger;
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { MatrixHelper, MathHelper, PaintImage, Platform, Debug, dataProcessor, boundsType, registerUI, Plugin, RectData,
|
|
1
|
+
import { MatrixHelper, MathHelper, PaintImage, Platform, Debug, dataProcessor, boundsType, registerUI, Plugin, RectData, isObject, UICreator, Rect } from '@leafer-ui/core';
|
|
2
2
|
|
|
3
3
|
const { get, scale, copy } = MatrixHelper;
|
|
4
4
|
const { getFloorScale } = MathHelper;
|
|
@@ -132,35 +132,76 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
132
132
|
installStaggerPattern();
|
|
133
133
|
const debug = Debug.get("leafer-x-watermark");
|
|
134
134
|
class ProcessorData extends RectData {
|
|
135
|
-
_tileContent;
|
|
135
|
+
_tileContent = "";
|
|
136
|
+
_cachedUrl;
|
|
137
|
+
_cachedBounds;
|
|
136
138
|
setTileContent(value) {
|
|
137
139
|
this._tileContent = value;
|
|
138
|
-
this.
|
|
140
|
+
return this.regenerateImage();
|
|
139
141
|
}
|
|
140
|
-
_tileMode;
|
|
142
|
+
_tileMode = true;
|
|
141
143
|
setTileMode(value) {
|
|
142
144
|
this._tileMode = value;
|
|
143
|
-
this.
|
|
145
|
+
this.updateFill();
|
|
144
146
|
}
|
|
145
|
-
_tileSize;
|
|
147
|
+
_tileSize = 100;
|
|
146
148
|
setTileSize(value) {
|
|
147
149
|
this._tileSize = value;
|
|
148
|
-
this.
|
|
150
|
+
this.updateFill();
|
|
149
151
|
}
|
|
150
|
-
_tileGap;
|
|
152
|
+
_tileGap = 0;
|
|
151
153
|
setTileGap(value) {
|
|
152
154
|
this._tileGap = value;
|
|
153
|
-
this.
|
|
155
|
+
this.updateFill();
|
|
154
156
|
}
|
|
155
|
-
_tileStagger;
|
|
157
|
+
_tileStagger = 0;
|
|
156
158
|
setTileStagger(value) {
|
|
157
159
|
this._tileStagger = value;
|
|
158
|
-
this.
|
|
160
|
+
this.updateFill();
|
|
159
161
|
}
|
|
160
|
-
_tileRotation;
|
|
162
|
+
_tileRotation = 0;
|
|
161
163
|
setTileRotation(value) {
|
|
162
164
|
this._tileRotation = value;
|
|
163
|
-
this.
|
|
165
|
+
this.updateFill();
|
|
166
|
+
}
|
|
167
|
+
updateFill() {
|
|
168
|
+
const leaf = this.__leaf;
|
|
169
|
+
const { _tileMode, _tileSize, _tileGap, _tileStagger, _tileRotation } = this;
|
|
170
|
+
if (!this._cachedUrl || !this._cachedBounds || _tileSize <= 0) {
|
|
171
|
+
leaf.fill = void 0;
|
|
172
|
+
return;
|
|
173
|
+
}
|
|
174
|
+
const { width: boundsWidth, height: boundsHeight } = this._cachedBounds;
|
|
175
|
+
if (!_tileMode) {
|
|
176
|
+
leaf.fill = {
|
|
177
|
+
type: "image",
|
|
178
|
+
url: this._cachedUrl,
|
|
179
|
+
mode: "stretch"
|
|
180
|
+
};
|
|
181
|
+
} else {
|
|
182
|
+
const scale = _tileSize / 100;
|
|
183
|
+
const sizeWidth = boundsWidth * scale;
|
|
184
|
+
const sizeHeight = boundsHeight * scale;
|
|
185
|
+
let xGap, yGap;
|
|
186
|
+
if (isObject(_tileGap)) {
|
|
187
|
+
xGap = _tileGap.x;
|
|
188
|
+
yGap = _tileGap.y;
|
|
189
|
+
} else {
|
|
190
|
+
xGap = yGap = _tileGap;
|
|
191
|
+
}
|
|
192
|
+
const gapX = xGap / 100 * sizeWidth;
|
|
193
|
+
const gapY = yGap / 100 * sizeHeight;
|
|
194
|
+
leaf.fill = {
|
|
195
|
+
type: "image",
|
|
196
|
+
url: this._cachedUrl,
|
|
197
|
+
mode: "repeat",
|
|
198
|
+
gap: { x: gapX, y: gapY },
|
|
199
|
+
size: { width: sizeWidth, height: sizeHeight },
|
|
200
|
+
stagger: _tileStagger,
|
|
201
|
+
rotation: _tileRotation,
|
|
202
|
+
align: "center"
|
|
203
|
+
};
|
|
204
|
+
}
|
|
164
205
|
}
|
|
165
206
|
__getData() {
|
|
166
207
|
const data = super.__getData();
|
|
@@ -172,97 +213,55 @@ class ProcessorData extends RectData {
|
|
|
172
213
|
delete data.fill;
|
|
173
214
|
return data;
|
|
174
215
|
}
|
|
175
|
-
}
|
|
176
|
-
let Watermark = class extends Rect {
|
|
177
|
-
get __tag() {
|
|
178
|
-
return "Watermark";
|
|
179
|
-
}
|
|
180
|
-
// 缓存导出的图片和尺寸信息
|
|
181
|
-
_cachedUrl;
|
|
182
|
-
_cachedBounds;
|
|
183
|
-
constructor(data) {
|
|
184
|
-
super(data);
|
|
185
|
-
this.regenerateImage();
|
|
186
|
-
}
|
|
187
216
|
createTileItem(itemData) {
|
|
188
217
|
return UICreator.get("Group", {
|
|
189
218
|
children: [itemData],
|
|
190
|
-
// rotation: this.tileRotation,
|
|
191
219
|
around: "center"
|
|
192
220
|
});
|
|
193
221
|
}
|
|
194
|
-
regenerateImage() {
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
}
|
|
221
|
-
this._cachedUrl = url;
|
|
222
|
-
this._cachedBounds = { width: bounds.width, height: bounds.height };
|
|
223
|
-
tempItem.destroy();
|
|
224
|
-
this.updateFill();
|
|
222
|
+
async regenerateImage() {
|
|
223
|
+
const leaf = this.__leaf;
|
|
224
|
+
const { _tileContent } = this;
|
|
225
|
+
const { width, height } = leaf;
|
|
226
|
+
if (!_tileContent) {
|
|
227
|
+
this._cachedUrl = void 0;
|
|
228
|
+
this._cachedBounds = void 0;
|
|
229
|
+
leaf.fill = void 0;
|
|
230
|
+
return;
|
|
231
|
+
}
|
|
232
|
+
let itemData;
|
|
233
|
+
try {
|
|
234
|
+
itemData = JSON.parse(_tileContent);
|
|
235
|
+
} catch (e) {
|
|
236
|
+
debug.error("Invalid tileContent JSON:", e);
|
|
237
|
+
return;
|
|
238
|
+
}
|
|
239
|
+
const tempItem = this.createTileItem(itemData);
|
|
240
|
+
const bounds = tempItem.getBounds("box", "local");
|
|
241
|
+
if (!width || !height) {
|
|
242
|
+
leaf.width = bounds.width;
|
|
243
|
+
leaf.height = bounds.height;
|
|
244
|
+
}
|
|
245
|
+
const exportWidth = 1e3;
|
|
246
|
+
const { data: url } = await tempItem.export("png", {
|
|
247
|
+
blob: false,
|
|
248
|
+
size: { width: exportWidth }
|
|
225
249
|
});
|
|
250
|
+
this._cachedUrl = url;
|
|
251
|
+
this._cachedBounds = { width: bounds.width, height: bounds.height };
|
|
252
|
+
tempItem.destroy();
|
|
253
|
+
this.updateFill();
|
|
226
254
|
}
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
type: "image",
|
|
238
|
-
url: this._cachedUrl,
|
|
239
|
-
mode: "stretch"
|
|
240
|
-
};
|
|
241
|
-
} else {
|
|
242
|
-
const scale = tileSize / 100;
|
|
243
|
-
const sizeWidth = boundsWidth * scale;
|
|
244
|
-
const sizeHeight = boundsHeight * scale;
|
|
245
|
-
let xGap, yGap;
|
|
246
|
-
if (isObject(tileGap)) {
|
|
247
|
-
xGap = tileGap.x;
|
|
248
|
-
yGap = tileGap.y;
|
|
249
|
-
} else {
|
|
250
|
-
xGap = yGap = tileGap;
|
|
251
|
-
}
|
|
252
|
-
const gapX = xGap / 100 * sizeWidth;
|
|
253
|
-
const gapY = yGap / 100 * sizeHeight;
|
|
254
|
-
this.fill = {
|
|
255
|
-
type: "image",
|
|
256
|
-
url: this._cachedUrl,
|
|
257
|
-
mode: "repeat",
|
|
258
|
-
gap: { x: gapX, y: gapY },
|
|
259
|
-
size: { width: sizeWidth, height: sizeHeight },
|
|
260
|
-
stagger: tileStagger,
|
|
261
|
-
rotation: this.tileRotation,
|
|
262
|
-
align: "center"
|
|
263
|
-
};
|
|
264
|
-
}
|
|
265
|
-
});
|
|
255
|
+
}
|
|
256
|
+
let Watermark = class extends Rect {
|
|
257
|
+
get __tag() {
|
|
258
|
+
return "Watermark";
|
|
259
|
+
}
|
|
260
|
+
get tileURL() {
|
|
261
|
+
return this.__._cachedUrl;
|
|
262
|
+
}
|
|
263
|
+
constructor(data) {
|
|
264
|
+
super(data);
|
|
266
265
|
}
|
|
267
266
|
};
|
|
268
267
|
__decorateClass([
|