feat: Fabric update from 4.20. to 5.2.4

README.md

@@ -184,7 +184,7 @@ For more information on PR's steps, please see links in the Contributing section
 
 ## 🔩 Dependency
 
-- [fabric.js](https://github.com/fabricjs/fabric.js/releases) = 4.2.0
+- [fabric.js](https://github.com/fabricjs/fabric.js/releases) = 5.2.4
 - [tui.code-snippet](https://github.com/nhn/tui.code-snippet/releases/tag/v1.5.0) >= 1.5.0
 - [tui.color-picker](https://github.com/nhn/tui.color-picker/releases/tag/v2.2.6) >= 2.2.6
 

apps/image-editor/examples/example02-useApiDirect.html

@@ -356,7 +356,7 @@
     </div>
     <script
       type="text/javascript"
-      src="https://api-storage.cloud.toast.com/v1/AUTH_e18353c4ea5746c097143946d0644e61/toast-ui-cdn/tui-image-editor/v3.11.0/example/fabric-v4.2.0.js"
+      src="https://api-storage.cloud.toast.com/v1/AUTH_e18353c4ea5746c097143946d0644e61/toast-ui-cdn/tui-image-editor/v3.11.0/example/fabric-v5.2.4.js"
     ></script>
     <script
       type="text/javascript"

apps/image-editor/examples/example03-mobile.html

@@ -225,7 +225,7 @@
     </div>
     <script
       type="text/javascript"
-      src="https://api-storage.cloud.toast.com/v1/AUTH_e18353c4ea5746c097143946d0644e61/toast-ui-cdn/tui-image-editor/v3.11.0/example/fabric-v4.2.0.js"
+      src="https://api-storage.cloud.toast.com/v1/AUTH_e18353c4ea5746c097143946d0644e61/toast-ui-cdn/tui-image-editor/v3.11.0/example/fabric-v5.2.4.js"
     ></script>
     <script
       type="text/javascript"

apps/image-editor/package.json

@@ -45,7 +45,7 @@
     "not ie <= 9"
   ],
   "dependencies": {
-    "fabric": "^4.2.0",
+    "fabric": "^5.2.4",
     "tui-code-snippet": "^2.3.3",
     "tui-color-picker": "^2.2.6"
   }

apps/image-editor/src/js/graphics.js

@@ -1227,11 +1227,11 @@ class Graphics {
 
   /**
    * "object:selected" canvas event handler
-   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event
+   * @param {{selected: fabric.Object, deselected: fabric.Object, e: MouseEvent}} fEvent - Fabric event
    * @private
    */
   _onObjectSelected(fEvent) {
-    const { target } = fEvent;
+    const [target] = fEvent.selected;
     const params = this.createObjectProperties(target);
 
     this.fire(events.OBJECT_ACTIVATED, params);
@@ -1268,16 +1268,16 @@ class Graphics {
   }
 
   /**
-   * "selction:created" canvas event handler
-   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event
+   * "selection:created" canvas event handler
+   * @param {{selected: fabric.Object, e: MouseEvent}} fEvent - Fabric event
    * @private
    */
   _onSelectionCreated(fEvent) {
-    const { target } = fEvent;
+    const [target] = fEvent.selected;
     const params = this.createObjectProperties(target);
 
     this.fire(events.OBJECT_ACTIVATED, params);
-    this.fire(events.SELECTION_CREATED, fEvent.target);
+    this.fire(events.SELECTION_CREATED, target);
   }
 
   /**

apps/image-editor/tests/__snapshots__/shape.spec.js.snap

@@ -40,7 +40,7 @@ Object {
   "strokeWidth": 0,
   "top": 36.82,
   "type": "image",
-  "version": "4.6.0",
+  "version": "5.2.4",
   "visible": true,
   "width": 128.03,
 }
@@ -86,7 +86,7 @@ Object {
   "strokeWidth": 0,
   "top": 40,
   "type": "image",
-  "version": "4.6.0",
+  "version": "5.2.4"
   "visible": true,
   "width": 200,
 }

apps/image-editor/tests/__snapshots__/text.spec.js.snap

@@ -25,6 +25,7 @@ Object {
   "overline": false,
   "paintFirst": "fill",
   "path": null,
+  "pathAlign": "baseline",
   "pathSide": "left",
   "pathStartOffset": 0,
   "scaleX": 1,
@@ -40,12 +41,14 @@ Object {
   "strokeMiterLimit": 4,
   "strokeUniform": false,
   "strokeWidth": 1,
+  "styles": Array [],
   "styles": Object {},
   "text": "testString",
   "textAlign": "left",
   "textBackgroundColor": "",
   "top": 20,
   "type": "i-text",
+  "version": "5.2.4",
   "underline": false,
   "version": "4.6.0",
   "visible": true,

apps/react-image-editor/package.json

@@ -29,7 +29,7 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
-    "fabric": "^4.2.0",
+    "fabric": "^5.2.4",
     "tui-image-editor": "^3.15.2"
   }
 }

apps/vue-image-editor/README.md

@@ -46,7 +46,7 @@ npm install --save @toast-ui/vue-image-editor
 > **If you install other packages**, you may lose dependency on fabric. You need to **reinstall the fabric**.
 
     ```
-    npm install --no-save --no-optional fabric@~4.2.0
+    npm install --no-save --no-optional fabric@~5.2.4
     ```
 
 ## 🔡 Usage

apps/vue-image-editor/package.json

@@ -28,7 +28,7 @@
     "vue": "^2.6.14"
   },
   "dependencies": {
-    "fabric": "^4.2.0",
+    "fabric": "^5.2.4",
     "tui-image-editor": "^3.15.2"
   }
 }

bower.json

@@ -23,7 +23,7 @@
     "webpack.*.js"
   ],
   "dependencies": {
-    "fabric": "4.2.0",
+    "fabric": "5.2.4",
     "tui-code-snippet": "^1.5.0",
     "tui-color-picker": "^2.2.0"
   },