fix: Update fabric.js to v3.3.2 & modify webpack externals configurat…

…ion (fix #129, #134, #219) (#234) * fix: Resolve jQuery vulnerability * fix: Change fabric import method named to default & correct webpack external config (fix #129, #219) * fix: Add fabric.js to external library into karma webpack config (fix #134) * fix: Add half stroke width to center added icon's left, top
nhn · Aug 2, 2019 · a50444c · a50444c
1 parent b366b5c
commit a50444c
Show file tree

Hide file tree

Showing 33 changed files with 48 additions and 38 deletions.
diff --git a/examples/example01-includeUi.html b/examples/example01-includeUi.html
@@ -16,7 +16,7 @@
     <body>
 
         <div id="tui-image-editor-container"></div>
-        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.js"></script>
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.js"></script>
         <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
         <script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.3/tui-color-picker.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>

diff --git a/examples/example02-useApiDirect.html b/examples/example02-useApiDirect.html
@@ -219,7 +219,7 @@
             </div>
             <div class="tui-image-editor"></div>
         </div>
-        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.js"></script>
         <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
         <script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.3/tui-color-picker.min.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

diff --git a/examples/example03-mobile.html b/examples/example03-mobile.html
@@ -171,7 +171,7 @@
             </ul>
             <p class="msg">Menu Scrolling <b>Left ⇔ Right</b></p>
         </div>
-        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.js"></script>
         <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
         <script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.3/tui-color-picker.min.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

diff --git a/karma.conf.js b/karma.conf.js
@@ -101,6 +101,7 @@ module.exports = function(config) {
             // reason for not using karma-jasmine-jquery framework is that including older jasmine-karma file
             // included jasmine-karma version is 2.0.5 and this version don't support ie8
             'node_modules/jasmine-jquery/lib/jasmine-jquery.js',
+            'node_modules/fabric/dist/fabric.js',
             'test/index.js',
             {
                 pattern: 'test/fixtures/*.jpg',
@@ -121,6 +122,9 @@ module.exports = function(config) {
         reporters: ['dots'],
         webpack: {
             devtool: 'inline-source-map',
+            externals: {
+                fabric: 'fabric'
+            },
             module: {
                 preLoaders: [
                     {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "file-saver": "^1.3.3",
     "istanbul-instrumenter-loader": "^1.0.0",
     "jasmine-core": "^2.4.1",
-    "jasmine-jquery": "^2.1.0",
+    "jasmine-jquery": "^2.1.1",
     "jquery": "^3.4.0",
     "jsdoc": "^3.5.4",
     "karma": "^1.3.0",
@@ -48,7 +48,7 @@
     "karma-es5-shim": "0.0.4",
     "karma-firefox-launcher": "^1.1.0",
     "karma-jasmine": "^1.0.2",
-    "karma-jquery": "^0.2.2",
+    "karma-jquery": "^0.2.4",
     "karma-junit-reporter": "^1.2.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webdriver-launcher": "git+https://github.com/nhn/karma-webdriver-launcher.git#v1.1.0",
@@ -75,7 +75,7 @@
     "doc:dev": "tuidoc --dev",
     "doc": "tuidoc",
     "tslint": "tslint index.d.ts",
-    "postinstall": "npm install --no-save --no-optional fabric@^2.7.0"
+    "postinstall": "npm install --no-save --no-optional fabric@^3.3.2"
   },
   "dependencies": {
     "core-js": "2.4.1",

diff --git a/src/js/component/cropper.js b/src/js/component/cropper.js
@@ -3,7 +3,7 @@
  * @fileoverview Image crop module (start cropping, end cropping)
  */
 import snippet from 'tui-code-snippet';
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 import Component from '../interface/component';
 import Cropzone from '../extension/cropzone';
 import {keyCodes, componentNames} from '../consts';

diff --git a/src/js/component/filter.js b/src/js/component/filter.js
@@ -4,7 +4,7 @@
  */
 import {isUndefined, extend, forEach, filter} from 'tui-code-snippet';
 import Promise from 'core-js/library/es6/promise';
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 import Component from '../interface/component';
 import Mask from '../extension/mask';
 import consts from '../consts';

diff --git a/src/js/component/freeDrawing.js b/src/js/component/freeDrawing.js
@@ -2,7 +2,7 @@
  * @author NHN Ent. FE Development Team <[email protected]>
  * @fileoverview Free drawing module, Set brush
  */
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 import Component from '../interface/component';
 import consts from '../consts';
 

diff --git a/src/js/component/icon.js b/src/js/component/icon.js
@@ -2,7 +2,7 @@
  * @author NHN Ent. FE Development Team <[email protected]>
  * @fileoverview Add icon module
  */
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 import snippet from 'tui-code-snippet';
 import Promise from 'core-js/library/es6/promise';
 import Component from '../interface/component';

diff --git a/src/js/component/line.js b/src/js/component/line.js
@@ -2,7 +2,7 @@
  * @author NHN Ent. FE Development Team <[email protected]>
  * @fileoverview Free drawing module, Set brush
  */
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 import Component from '../interface/component';
 import consts from '../consts';
 

diff --git a/src/js/component/rotation.js b/src/js/component/rotation.js
@@ -2,7 +2,7 @@
  * @author NHN Ent. FE Development Team <[email protected]>
  * @fileoverview Image rotation module
  */
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 import Promise from 'core-js/library/es6/promise';
 import Component from '../interface/component';
 import consts from '../consts';

diff --git a/src/js/component/shape.js b/src/js/component/shape.js
@@ -2,7 +2,7 @@
  * @author NHN Ent. FE Development Team <[email protected]>
  * @fileoverview Shape component
  */
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 import Promise from 'core-js/library/es6/promise';
 import Component from '../interface/component';
 import consts from '../consts';

diff --git a/src/js/component/text.js b/src/js/component/text.js
@@ -2,7 +2,7 @@
  * @author NHN Ent. FE Development Team <[email protected]>
  * @fileoverview Text module
  */
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 import snippet from 'tui-code-snippet';
 import Promise from 'core-js/library/es6/promise';
 import Component from '../interface/component';

diff --git a/src/js/extension/blur.js b/src/js/extension/blur.js
@@ -2,7 +2,7 @@
  * @author NHN Ent. FE Development Team <[email protected]>
  * @fileoverview Blur extending fabric.Image.filters.Convolute
  */
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 
 /**
  * Blur object

diff --git a/src/js/extension/colorFilter.js b/src/js/extension/colorFilter.js
@@ -2,7 +2,7 @@
  * @author NHN Ent. FE Development Team <[email protected]>
  * @fileoverview ColorFilter extending fabric.Image.filters.BaseFilter
  */
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 
 /**
  * ColorFilter object

diff --git a/src/js/extension/cropzone.js b/src/js/extension/cropzone.js
@@ -3,7 +3,7 @@
  * @fileoverview Cropzone extending fabric.Rect
  */
 import snippet from 'tui-code-snippet';
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 import {clamp} from '../util';
 
 const CORNER_TYPE_TOP_LEFT = 'tl';

diff --git a/src/js/extension/emboss.js b/src/js/extension/emboss.js
@@ -2,7 +2,7 @@
  * @author NHN Ent. FE Development Team <[email protected]>
  * @fileoverview Emboss extending fabric.Image.filters.Convolute
  */
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 
 /**
  * Emboss object

diff --git a/src/js/extension/mask.js b/src/js/extension/mask.js
@@ -2,7 +2,7 @@
  * @author NHN Ent. FE Development Team <[email protected]>
  * @fileoverview Mask extending fabric.Image.filters.Mask
  */
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 
 /**
  * Mask object

diff --git a/src/js/extension/sharpen.js b/src/js/extension/sharpen.js
@@ -2,7 +2,7 @@
  * @author NHN Ent. FE Development Team <[email protected]>
  * @fileoverview Sharpen extending fabric.Image.filters.Convolute
  */
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 
 /**
  * Sharpen object

diff --git a/src/js/graphics.js b/src/js/graphics.js
@@ -4,7 +4,7 @@
  */
 import snippet from 'tui-code-snippet';
 import Promise from 'core-js/library/es6/promise';
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 import ImageLoader from './component/imageLoader';
 import Cropper from './component/cropper';
 import Flip from './component/flip';

diff --git a/test/command.spec.js b/test/command.spec.js
@@ -4,7 +4,7 @@
  */
 import snippet from 'tui-code-snippet';
 import Promise from 'core-js/library/es6/promise';
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 import Invoker from '../src/js/invoker';
 import commandFactory from '../src/js/factory/command';
 import Graphics from '../src/js/graphics';

diff --git a/test/cropper.spec.js b/test/cropper.spec.js
@@ -3,7 +3,7 @@
  * @fileoverview Test cases of "src/js/component/cropper.js"
  */
 import snippet from 'tui-code-snippet';
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 import $ from 'jquery';
 import Cropper from '../src/js/component/cropper';
 import Graphics from '../src/js/graphics';

diff --git a/test/cropzone.spec.js b/test/cropzone.spec.js
@@ -2,7 +2,7 @@
  * @author NHN Ent. FE Development Team <[email protected]>
  * @fileoverview Test cases of "src/js/extension/cropzone.js"
  */
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 import Cropzone from '../src/js/extension/cropzone';
 
 describe('Cropzone', () => {

diff --git a/test/flip.spec.js b/test/flip.spec.js
@@ -2,7 +2,7 @@
  * @author NHN Ent. FE Development Team <[email protected]>
  * @fileoverview Test cases of "src/js/component/flip.js"
  */
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 import $ from 'jquery';
 import Graphics from '../src/js/graphics';
 import Flip from '../src/js/component/flip';

diff --git a/test/graphics.spec.js b/test/graphics.spec.js
@@ -3,7 +3,7 @@
  * @fileoverview Tests command with command-factory
  */
 import snippet from 'tui-code-snippet';
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 import Graphics from '../src/js/graphics';
 import consts from '../src/js/consts';
 

diff --git a/test/icon.spec.js b/test/icon.spec.js
@@ -2,7 +2,7 @@
  * @author NHN Ent. FE Development Team <[email protected]>
  * @fileoverview Test cases of "src/js/component/icon.js"
  */
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 import $ from 'jquery';
 import Graphics from '../src/js/graphics';
 import Icon from '../src/js/component/icon';
@@ -41,9 +41,10 @@ describe('Icon', () => {
         icon.add('arrow');
 
         const activeObj = canvas.getActiveObject();
+        const halfStrokeWidth = activeObj.strokeWidth / 2;
 
-        expect(activeObj.left).toEqual(centerPos.x);
-        expect(activeObj.top).toEqual(centerPos.y);
+        expect(activeObj.left + halfStrokeWidth).toEqual(centerPos.x);
+        expect(activeObj.top + halfStrokeWidth).toEqual(centerPos.y);
     });
 
     it('add() should create the arrow icon when parameter value is "arrow".', () => {

diff --git a/test/index.js b/test/index.js
@@ -3,7 +3,7 @@
  * @author NHN Ent. FE Development Lab <[email protected]>
  */
 import '../src';
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 
 fabric.Object.prototype.objectCaching = false;
 

diff --git a/test/line.spec.js b/test/line.spec.js
@@ -2,7 +2,7 @@
  * @author NHN Ent. FE Development Team <[email protected]>
  * @fileoverview Test cases of "src/js/component/line.js"
  */
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 import $ from 'jquery';
 import Graphics from '../src/js/graphics';
 import Line from '../src/js/component/line';

diff --git a/test/rotation.spec.js b/test/rotation.spec.js
@@ -2,7 +2,7 @@
  * @author NHN Ent. FE Development Team <[email protected]>
  * @fileoverview Test cases of "src/js/component/rotation.js"
  */
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 import $ from 'jquery';
 import Graphics from '../src/js/graphics';
 import Rotation from '../src/js/component/rotation';

diff --git a/test/shape.spec.js b/test/shape.spec.js
@@ -2,7 +2,7 @@
  * @author NHN Ent. FE Development Team <[email protected]>
  * @fileoverview Test cases of "src/js/component/line.js"
  */
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 import $ from 'jquery';
 import Graphics from '../src/js/graphics';
 import Shape from '../src/js/component/shape';

diff --git a/test/text.spec.js b/test/text.spec.js
@@ -2,7 +2,7 @@
  * @author NHN Ent. FE Development Team <[email protected]>
  * @fileoverview Test cases of "src/js/component/text.js"
  */
-import {fabric} from 'fabric';
+import fabric from 'fabric';
 import $ from 'jquery';
 import Graphics from '../src/js/graphics';
 import Text from '../src/js/component/text';

diff --git a/webpack.config.js b/webpack.config.js
@@ -30,7 +30,6 @@ module.exports = {
         filename: `${FILENAME}.js`
     },
     externals: {
-        'fabric.fabric': 'fabric',
         'tui-code-snippet': {
             'commonjs': 'tui-code-snippet',
             'commonjs2': 'tui-code-snippet',
@@ -42,6 +41,12 @@ module.exports = {
             'commonjs2': 'tui-color-picker',
             'amd': 'tui-color-picker',
             'root': ['tui', 'colorPicker']
+        },
+        'fabric': {
+            'commonjs': ['fabric', 'fabric'],
+            'commonjs2': ['fabric', 'fabric'],
+            'amd': 'fabric',
+            'root': 'fabric'
         }
     },
     module: {