fix: add custom icon error (#53)

nhn · Oct 4, 2018 · 692a8b0 · 692a8b0
1 parent dcfb7ee
commit 692a8b0
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 26 deletions.
diff --git a/src/js/component/icon.js b/src/js/component/icon.js
@@ -61,47 +61,55 @@ class Icon extends Component {
  const canvas = this.getCanvas();
  const path = this._pathMap[type];
  const selectionStyle = consts.fObjectOptions.SELECTION_STYLE;
+ const isDefaultIconPath = Object.keys(consts.defaultIconPath).indexOf(type) >= 0;
+ const useDragAddIcon = this.useDragAddIcon && isDefaultIconPath;
+ const icon = path ? this._createIcon(path) : null;
 
- if (!path) {
+ if (!icon) {
  reject(rejectMessages.invalidParameters);
  }
 
- const icon = this._createIcon(path);
-
  icon.set(snippet.extend({
  type: 'icon',
  fill: this._oColor
  }, selectionStyle, options, this.graphics.controlStyle));
 
- if (this.useDragAddIcon) {
- canvas.add(icon).setActiveObject(icon);
- canvas.on({
- 'mouse:move': fEvent => {
- canvas.selection = false;
-
- this.fire(events.ICON_CREATE_RESIZE, {
- moveOriginPointer: canvas.getPointer(fEvent.e)
- });
- },
- 'mouse:up': fEvent => {
- this.fire(events.ICON_CREATE_END, {
- moveOriginPointer: canvas.getPointer(fEvent.e)
- });
-
- canvas.defaultCursor = 'default';
- canvas.off('mouse:up');
- canvas.off('mouse:move');
- canvas.selection = true;
- }
- });
- } else {
- canvas.add(icon).setActiveObject(icon);
+ canvas.add(icon).setActiveObject(icon);
+
+ if (useDragAddIcon) {
+ this._addWithDrag(canvas);
  }
 
  resolve(this.graphics.createObjectProperties(icon));
  });
  }
 
+ /**
+ * Added icon drag
+ * @param {fabric.Canvas} canvas - Canvas instance
+ */
+ _addWithDrag(canvas) {
+ canvas.on({
+ 'mouse:move': fEvent => {
+ canvas.selection = false;
+
+ this.fire(events.ICON_CREATE_RESIZE, {
+ moveOriginPointer: canvas.getPointer(fEvent.e)
+ });
+ },
+ 'mouse:up': fEvent => {
+ this.fire(events.ICON_CREATE_END, {
+ moveOriginPointer: canvas.getPointer(fEvent.e)
+ });
+
+ canvas.defaultCursor = 'default';
+ canvas.off('mouse:up');
+ canvas.off('mouse:move');
+ canvas.selection = true;
+ }
+ });
+ }
+
  /**
  * Register icon paths
  * @param {{key: string, value: string}} pathInfos - Path infos

diff --git a/test/icon.spec.js b/test/icon.spec.js
@@ -66,6 +66,31 @@ describe('Icon', () => {
  expect(icon._createIcon).toHaveBeenCalledWith(path);
  });
 
+ it('`_addWithDrag()` should be executed when `useDragAddIcon` is true.', () => {
+ const defaultIconKey = 'icon-arrow';
+ icon._pathMap[defaultIconKey] = true;
+
+ spyOn(icon, '_createIcon').and.returnValue(new fabric.Object({}));
+ spyOn(icon, '_addWithDrag');
+ spyOn(icon, 'useDragAddIcon').and.returnValue(true);
+
+ icon.add(defaultIconKey);
+
+ expect(icon._addWithDrag).toHaveBeenCalled();
+ });
+
+ it('`_addWithDrag()` should be not executed when target icon is not default icon.', () => {
+ const nonDefaultIconKey = 'non-default-icon';
+
+ spyOn(icon, '_createIcon').and.returnValue(new fabric.Object({}));
+ spyOn(icon, '_addWithDrag');
+ spyOn(icon, 'useDragAddIcon').and.returnValue(true);
+
+ icon.add(nonDefaultIconKey);
+
+ expect(icon._addWithDrag).not.toHaveBeenCalled();
+ });
+
  it('setColor() should change color of next inserted icon.', () => {
  let activeObj;
  const color = '#ffffff';