customized-fabric 1.6.7 → 1.6.9

Sign up to get free protection for your applications and to get access to all the features.
@@ -5,8 +5,8 @@ exports.CLIPART_OBJECT_ATTRIBUTES = {
5
5
  name: "Clipart",
6
6
  type: "CLIPART",
7
7
  stroke: {
8
- stroke: "#000000",
8
+ stroke: "#333",
9
9
  strokeDashArray: [5, 5],
10
- strokeWidth: 2,
10
+ strokeWidth: 1,
11
11
  },
12
12
  };
@@ -38,6 +38,5 @@ export default class Clipart extends fabric.Group {
38
38
  width?: number;
39
39
  height?: number;
40
40
  }) => void;
41
- loadCustomizedClipart?: (clipartUrl: string) => Promise<fabric.Image>;
42
41
  constructor(options?: IClipartOptions);
43
42
  }
@@ -23,19 +23,16 @@ const ClipartClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
23
23
  });
24
24
  this.imageObject = imageObject;
25
25
  const group = new fabric_1.fabric.Group([this.rectObject, this.imageObject]);
26
- group.setControlsVisibility({
27
- mt: false,
28
- mr: false,
29
- mb: false,
30
- ml: false,
31
- });
32
26
  this.set(group);
33
27
  this.on("scaling", () => {
34
- let width = this.width * this.scaleX;
35
- let height = this.height * this.scaleY;
36
- const imageScaleX = width / this.imageObject.width;
37
- const imageScaleY = height / this.imageObject.height;
38
- this.imageObject.set({ scaleX: imageScaleX, scaleY: imageScaleY });
28
+ const attributes = {
29
+ width: this.width * this.scaleX,
30
+ height: this.height * this.scaleY,
31
+ scaleX: 1,
32
+ scaleY: 1,
33
+ };
34
+ this.set(attributes);
35
+ this.rectObject?.set(attributes);
39
36
  this.fitImage(this.imageObject);
40
37
  this.canvas?.renderAll?.();
41
38
  });
@@ -66,7 +63,6 @@ const ClipartClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
66
63
  originX: "center",
67
64
  originY: "center",
68
65
  });
69
- image.scaleToWidth(this.width);
70
66
  this.remove(this.imageObject);
71
67
  this.imageObject = image;
72
68
  this.add(this.imageObject);
@@ -90,39 +86,35 @@ const ClipartClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
90
86
  },
91
87
  setSizes: function (options) {
92
88
  const { width, height } = options;
89
+ const attributes = {
90
+ scaleX: 1,
91
+ scaleY: 1,
92
+ };
93
93
  if (width) {
94
- const scaleX = width / (this?.imageObject?.width ?? this.width);
95
- this.imageObject.set({ scaleX, scaleY: scaleX });
94
+ attributes.width = width;
96
95
  }
97
96
  if (height) {
98
- const scaleY = height / (this?.imageObject?.height ?? this.height);
99
- this.imageObject.set({ scaleX: scaleY, scaleY });
97
+ attributes.height = height;
100
98
  }
99
+ this.set(attributes);
100
+ this.rectObject?.set(attributes);
101
101
  this.fitImage(this.imageObject);
102
102
  this.canvas?.renderAll?.();
103
103
  },
104
- fitImage: function (image) {
105
- const attributes = {
106
- scaleX: 1,
107
- scaleY: 1,
108
- width: (image.width ?? 0) * (image.scaleX ?? 1),
109
- height: (image.height ?? 0) * (image.scaleY ?? 1),
110
- };
111
- this.set(attributes);
112
- this.rectObject.set(attributes);
113
- },
114
- loadCustomizedClipart: async function (clipartUrl) {
115
- const image = await (0, utils_1.loadImageFromUrl)(clipartUrl);
116
- if (image.width && image.height) {
117
- image.scaleToWidth(this.width);
118
- image.set({
119
- originX: "center",
120
- originY: "center",
121
- top: this.top,
122
- left: this.left,
123
- angle: this.angle,
124
- });
125
- return image;
104
+ fitImage: function (image, cover = false) {
105
+ if (image) {
106
+ const imageScaleX = this.width / (image?.width ?? 1);
107
+ const imageScaleY = this.height / (image?.height ?? 1);
108
+ if (cover) {
109
+ imageScaleX < imageScaleY
110
+ ? image.set({ scaleX: imageScaleY, scaleY: imageScaleY })
111
+ : image.set({ scaleX: imageScaleX, scaleY: imageScaleX });
112
+ }
113
+ else {
114
+ imageScaleX > imageScaleY
115
+ ? image.set({ scaleX: imageScaleY, scaleY: imageScaleY })
116
+ : image.set({ scaleX: imageScaleX, scaleY: imageScaleX });
117
+ }
126
118
  }
127
119
  },
128
120
  });
@@ -6,9 +6,9 @@ exports.CURVED_TEXT_OBJECT_ATTRIBUTES = {
6
6
  type: "CURVED_TEXT",
7
7
  maxFontSize: 200,
8
8
  stroke: {
9
- stroke: "#000000",
9
+ stroke: "#333",
10
10
  strokeDashArray: [5, 5],
11
- strokeWidth: 2,
11
+ strokeWidth: 1,
12
12
  },
13
13
  };
14
14
  exports.PARENT_ATTRIBUTES = ["top", "left", "width", "height", "angle"];
@@ -5,9 +5,9 @@ exports.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES = {
5
5
  name: "Image placeholder",
6
6
  type: "IMAGE_PLACEHOLDER",
7
7
  stroke: {
8
- stroke: "#000000",
8
+ stroke: "#333",
9
9
  strokeDashArray: [5, 5],
10
- strokeWidth: 2,
10
+ strokeWidth: 1,
11
11
  },
12
12
  };
13
13
  exports.IMAGE_FILTER_TYPES = {
@@ -6,9 +6,9 @@ exports.TEXT_INPUT_OBJECT_ATTRIBUTES = {
6
6
  type: "TEXT_INPUT",
7
7
  maxFontSize: 200,
8
8
  stroke: {
9
- stroke: "#000000",
9
+ stroke: "#333",
10
10
  strokeDashArray: [5, 5],
11
- strokeWidth: 2,
11
+ strokeWidth: 1,
12
12
  },
13
13
  };
14
14
  exports.PARENT_ATTRIBUTES = ["top", "left", "width", "height", "angle"];
@@ -20,5 +20,5 @@ export declare const getObject: (object: any, options?: {
20
20
  }) => Clipart | ImagePlaceholder | CurvedText | TextInput | undefined;
21
21
  export declare const asyncGetObject: (object: any, options?: {
22
22
  isOriginal?: boolean;
23
- }) => Promise<fabric.Image | Clipart | ImagePlaceholder | CurvedText | TextInput | undefined>;
23
+ }) => Promise<Clipart | ImagePlaceholder | CurvedText | TextInput | undefined>;
24
24
  export default fabric;
@@ -176,10 +176,7 @@ const asyncGetObject = async (object, options) => {
176
176
  isOriginal: options?.isOriginal,
177
177
  });
178
178
  if (object?.clipartUrl) {
179
- const clipart = await clipartObject?.loadCustomizedClipart?.(object?.clipartUrl);
180
- if (clipart) {
181
- return clipart;
182
- }
179
+ await clipartObject?.loadImage?.(object?.clipartUrl);
183
180
  }
184
181
  return clipartObject;
185
182
  }
@@ -211,8 +208,8 @@ exports.asyncGetObject = asyncGetObject;
211
208
  fabric_1.fabric.Object.prototype.transparentCorners = false;
212
209
  fabric_1.fabric.Object.prototype.cornerColor = "transparent";
213
210
  fabric_1.fabric.Object.prototype.cornerStyle = "circle";
214
- fabric_1.fabric.Object.prototype.cornerStrokeColor = "black";
215
- fabric_1.fabric.Object.prototype.borderColor = "black";
211
+ fabric_1.fabric.Object.prototype.cornerStrokeColor = "#3b75cf";
212
+ fabric_1.fabric.Object.prototype.borderColor = "#3b75cf";
216
213
  fabric_1.fabric.Group.prototype.originX = "center";
217
214
  fabric_1.fabric.Group.prototype.originY = "center";
218
215
  fabric_1.fabric.ActiveSelection.prototype.originX = "center";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "customized-fabric",
3
- "version": "1.6.7",
3
+ "version": "1.6.9",
4
4
  "description": "Customized fabric",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",