feat: cropzone default option change (fix #101)

src/js/component/cropper.js

@@ -6,7 +6,7 @@ import snippet from 'tui-code-snippet';
 import fabric from 'fabric';
 import Component from '../interface/component';
 import Cropzone from '../extension/cropzone';
-import {keyCodes, componentNames} from '../consts';
+import {keyCodes, componentNames, CROPZONE_DEFAULT_OPTIONS} from '../consts';
 import {clamp, fixFloatingPoint} from '../util';
 
 const MOUSE_MOVE_THRESHOLD = 10;
@@ -92,12 +92,8 @@ class Cropper extends Component {
  strokeWidth: 0, // {@link https://github.com/kangax/fabric.js/issues/2860}
  cornerSize: 10,
  cornerColor: 'black',
- fill: 'transparent',
- hasRotatingPoint: false,
- hasBorders: false,
- lockScalingFlip: true,
- lockRotation: true
- }, this.graphics.cropSelectionStyle);
+ fill: 'transparent'
+ }, CROPZONE_DEFAULT_OPTIONS, this.graphics.cropSelectionStyle);
 
  canvas.discardActiveObject();
  canvas.add(this._cropzone);

src/js/component/shape.js

@@ -9,27 +9,20 @@ import consts from '../consts';
 import resizeHelper from '../helper/shapeResizeHelper';
 import {extend, inArray} from 'tui-code-snippet';
 
-const {rejectMessages, eventNames} = consts;
+const {rejectMessages, eventNames, SHAPE_DEFAULT_OPTIONS} = consts;
 const KEY_CODES = consts.keyCodes;
-
-const DEFAULT_TYPE = 'rect';
-const DEFAULT_WIDTH = 20;
-const DEFAULT_HEIGHT = 20;
-
-const DEFAULT_OPTIONS = {
+const SHAPE_INIT_OPTIONS = extend({
  strokeWidth: 1,
  stroke: '#000000',
  fill: '#ffffff',
  width: 1,
  height: 1,
  rx: 0,
- ry: 0,
- lockSkewingX: true,
- lockSkewingY: true,
- lockUniScaling: false,
- bringForward: true,
- isRegular: false
-};
+ ry: 0
+}, SHAPE_DEFAULT_OPTIONS);
+const DEFAULT_TYPE = 'rect';
+const DEFAULT_WIDTH = 20;
+const DEFAULT_HEIGHT = 20;
 
 const shapeType = ['rect', 'circle', 'triangle'];
 
@@ -63,7 +56,7 @@ class Shape extends Component {
  * @type {Object}
  * @private
  */
- this._options = extend({}, DEFAULT_OPTIONS);
+ this._options = extend({}, SHAPE_INIT_OPTIONS);
 
  /**
  * Whether the shape object is selected or not
@@ -259,7 +252,7 @@ class Shape extends Component {
  _extendOptions(options) {
  const selectionStyles = consts.fObjectOptions.SELECTION_STYLE;
 
- options = extend({}, DEFAULT_OPTIONS, this._options, selectionStyles, options);
+ options = extend({}, SHAPE_INIT_OPTIONS, this._options, selectionStyles, options);
 
  if (options.isRegular) {
  options.lockUniScaling = true;

src/js/consts.js

@@ -11,6 +11,31 @@ module.exports = {
  */
  HELP_MENUS: ['undo', 'redo', 'reset', 'delete', 'deleteAll'],
 
+ /**
+ * Shape default option
+ * @type {Object}
+ */
+ SHAPE_DEFAULT_OPTIONS: {
+ lockSkewingX: true,
+ lockSkewingY: true,
+ lockUniScaling: false,
+ bringForward: true,
+ isRegular: false
+ },
+
+ /**
+ * Cropzone default option
+ * @type {Object}
+ */
+ CROPZONE_DEFAULT_OPTIONS: {
+ hasRotatingPoint: false,
+ hasBorders: false,
+ lockScalingFlip: true,
+ lockRotation: true,
+ lockSkewingX: true,
+ lockSkewingY: true
+ },
+
  /**
  * Component names
  * @type {Object.<string, string>}

src/js/graphics.js

@@ -23,8 +23,7 @@ import TextDrawingMode from './drawingMode/text';
 import consts from './consts';
 import util from './util';
 
-const components = consts.componentNames;
-const events = consts.eventNames;
+const {componentNames: components, eventNames: events} = consts;
 
 const {drawingModes, fObjectOptions} = consts;
 const {extend, stamp, isArray, isString, forEachArray, forEachOwnProperties, CustomEvents} = snippet;

test/cropper.spec.js

@@ -25,6 +25,17 @@ describe('Cropper', () => {
  expect(cropper._cropzone).toBeDefined();
  });
 
+ it('should be applied predefined default options When creating a cropzone', () => {
+ const {CROPZONE_DEFAULT_OPTIONS} = consts;
+
+ cropper.start();
+ const cropzone = cropper._cropzone;
+
+ snippet.forEach(CROPZONE_DEFAULT_OPTIONS, (optionValue, optionName) => {
+ expect(cropzone[optionName]).toBe(optionValue);
+ });
+ });
+
  it('should add a cropzone to canvas', () => {
  spyOn(canvas, 'add');
  cropper.start();