feat: Added highlighter brush

apps/image-editor/src/css/buttons.styl

@@ -22,6 +22,17 @@
   &.free .{prefix}-button.free svg > use.active
     display: block;
 
+/* HIHGLIGHT BUTTON */
+.tie-draw-highlights-select-button
+  &.line .{prefix}-button.line svg > use.normal,
+  &.free .{prefix}-button.free svg > use.normal
+    display: none;
+
+  &.line .{prefix}-button.line svg > use.active,
+  &.free .{prefix}-button.free svg > use.active
+    display: block;
+
+
 /* FLIP BUTTON */
 .tie-flip-button
   &.resetFlip .{prefix}-button.resetFlip,

apps/image-editor/src/css/submenu.styl

@@ -75,6 +75,7 @@
     .{prefix}-main.{prefix}-menu-mask .{prefix}-submenu > div.{prefix}-menu-mask,
     .{prefix}-main.{prefix}-menu-icon .{prefix}-submenu > div.{prefix}-menu-icon,
     .{prefix}-main.{prefix}-menu-draw .{prefix}-submenu > div.{prefix}-menu-draw,
+    .{prefix}-main.{prefix}-menu-highlights .{prefix}-submenu > div.{prefix}-menu-highlights,
     .{prefix}-main.{prefix}-menu-filter .{prefix}-submenu > div.{prefix}-menu-filter,
     .{prefix}-main.{prefix}-menu-zoom .{prefix}-submenu > div.{prefix}-menu-zoom
         display: table-cell;
@@ -87,6 +88,7 @@
     .{prefix}-main.{prefix}-menu-mask,
     .{prefix}-main.{prefix}-menu-icon,
     .{prefix}-main.{prefix}-menu-draw,
+    .{prefix}-main.{prefix}-menu-highlights,
     .{prefix}-main.{prefix}-menu-filter,
     .{prefix}-main.{prefix}-menu-zoom
       .{prefix}-submenu

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

@@ -20,6 +20,7 @@ export default {
       text: this._textAction(),
       mask: this._maskAction(),
       draw: this._drawAction(),
+      highlights: this._highlightsAction(),
       icon: this._iconAction(),
       filter: this._filterAction(),
       history: this._historyAction(),
@@ -261,6 +262,28 @@ export default {
     );
   },
 
+  /**
+   * HIGHLIGHT_LINE Action
+   * @returns {Object} actions for ui draw
+   * @private
+   */
+  _highlightsAction() {
+    return extend(
+      {
+        setHighlightsMode: (type, settings) => {
+          this.stopDrawingMode();
+          this.startDrawingMode('HIGHLIGHT_LINE', settings);
+        },
+        setColor: (color) => {
+          this.setBrush({
+            color,
+          });
+        },
+      },
+      this._commonAction()
+    );
+  },
+
   /**
    * Mask Action
    * @returns {Object} actions for ui mask
@@ -566,6 +589,11 @@ export default {
             this.ui.changeMenu('draw', false, false);
             this.ui.draw.changeStandbyMode();
           }
+        } else if (obj.type === 'highlight-line') {
+          if (this.ui.submenu !== 'highlights') {
+            this.ui.changeMenu('highlights', false, false);
+            this.ui.highlights.changeStandbyMode();
+          }
         } else if (['i-text', 'text'].indexOf(obj.type) > -1) {
           if (this.ui.submenu !== 'text') {
             this.ui.changeMenu('text', false, false);

apps/image-editor/src/js/component/highlightLine.js

@@ -0,0 +1,207 @@
+import { fabric } from 'fabric';
+import extend from 'tui-code-snippet/object/extend';
+import Component from '@/interface/component';
+import ArrowLine from '@/extension/arrowLine';
+import { eventNames, componentNames, fObjectOptions } from '@/consts';
+
+/**
+ * Highlights
+ * @class Highlights
+ * @param {Graphics} graphics - Graphics instance
+ * @extends {Component}
+ * @ignore
+ */
+class HighlightLine extends Component {
+  constructor(graphics) {
+    super(componentNames.HIGHLIGHT_LINE, graphics);
+
+    /**
+     * Brush width
+     * @type {number}
+     * @private
+     */
+    this._width = 12;
+
+    /**
+     * fabric.Color instance for brush color
+     * @type {fabric.Color}
+     * @private
+     */
+    this._oColor = new fabric.Color('rgba(0, 0, 0, 0.5)');
+
+    /**
+     * Listeners
+     * @type {object.<string, function>}
+     * @private
+     */
+    this._listeners = {
+      mousedown: this._onFabricMouseDown.bind(this),
+      mousemove: this._onFabricMouseMove.bind(this),
+      mouseup: this._onFabricMouseUp.bind(this),
+    };
+  }
+
+  /**
+   * Start drawing Highlights mode
+   * @param {{width: ?number, color: ?string}} [setting] - Brush width & color
+   */
+  setHeadOption(setting) {
+    const {
+      arrowType = {
+        head: null,
+        tail: null,
+      },
+    } = setting;
+
+    this._arrowType = arrowType;
+  }
+
+  /**
+   * Start drawing Highlights mode
+   * @param {{width: ?number, color: ?string}} [setting] - Brush width & color
+   */
+  start(setting = {}) {
+    const canvas = this.getCanvas();
+
+    canvas.defaultCursor = 'pointer';
+    canvas.selection = false;
+
+    this.setHeadOption(setting);
+    this.setBrush(setting);
+
+    canvas.forEachObject((obj) => {
+      obj.set({
+        evented: false,
+      });
+    });
+
+    canvas.on({
+      'mouse:down': this._listeners.mousedown,
+    });
+  }
+
+  /**
+   * Set brush
+   * @param {{width: ?number, color: ?string}} [setting] - Brush width & color
+   */
+  setBrush(setting) {
+    const brush = this.getCanvas().freeDrawingBrush;
+
+    setting = setting || {};
+    this._width = setting.width || this._width;
+
+    if (setting.color) {
+      this._oColor = new fabric.Color(setting.color);
+    }
+    brush.width = this._width;
+    brush.color = this._oColor.toRgba();
+  }
+
+  /**
+   * End drawing Highlights mode
+   */
+  end() {
+    const canvas = this.getCanvas();
+
+    canvas.defaultCursor = 'default';
+    canvas.selection = true;
+
+    canvas.forEachObject((obj) => {
+      obj.set({
+        evented: true,
+      });
+    });
+
+    canvas.off('mouse:down', this._listeners.mousedown);
+  }
+
+  /**
+   * Mousedown event handler in fabric canvas
+   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object
+   * @private
+   */
+  _onFabricMouseDown(fEvent) {
+    const canvas = this.getCanvas();
+    const { x, y } = canvas.getPointer(fEvent.e);
+    const points = [x, y, x, y];
+
+    this._highlightLine = new ArrowLine(points, {
+      stroke: this._oColor.toRgba(),
+      strokeWidth: this._width,
+      arrowType: this._arrowType,
+      evented: false,
+    });
+    if (this._highlightLine.type === 'line') {
+      this._highlightLine.type = 'highlight-line';
+    }
+    this._highlightLine.set(fObjectOptions.SELECTION_STYLE);
+
+    canvas.add(this._highlightLine);
+
+    canvas.on({
+      'mouse:move': this._listeners.mousemove,
+      'mouse:up': this._listeners.mouseup,
+    });
+
+    this.fire(eventNames.ADD_OBJECT, this._createHighlightsEventObjectProperties());
+  }
+
+  /**
+   * Mousemove event handler in fabric canvas
+   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object
+   * @private
+   */
+  _onFabricMouseMove(fEvent) {
+    const canvas = this.getCanvas();
+    const pointer = canvas.getPointer(fEvent.e);
+
+    this._highlightLine.set({
+      x2: pointer.x,
+      y2: pointer.y,
+    });
+
+    this._highlightLine.setCoords();
+
+    canvas.renderAll();
+  }
+
+  /**
+   * Mouseup event handler in fabric canvas
+   * @private
+   */
+  _onFabricMouseUp() {
+    const canvas = this.getCanvas();
+
+    this.fire(eventNames.OBJECT_ADDED, this._createHighlightsEventObjectProperties());
+
+    this._highlightLine = null;
+
+    canvas.off({
+      'mouse:move': this._listeners.mousemove,
+      'mouse:up': this._listeners.mouseup,
+    });
+  }
+
+  /**
+   * create Highlights event object properties
+   * @returns {Object} properties Highlights object
+   * @private
+   */
+  _createHighlightsEventObjectProperties() {
+    const params = this.graphics.createObjectProperties(this._highlightLine);
+    const { x1, x2, y1, y2 } = this._highlightLine;
+
+    return extend({}, params, {
+      startPosition: {
+        x: x1,
+        y: y1,
+      },
+      endPosition: {
+        x: x2,
+        y: y2,
+      },
+    });
+  }
+}
+
+export default HighlightLine;

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

@@ -71,6 +71,8 @@ export const componentNames = keyMirror(
   'FLIP',
   'ROTATION',
   'FREE_DRAWING',
+  'HIGHLIGHT_DRAWING',
+  'HIGHLIGHT_LINE',
   'LINE',
   'TEXT',
   'ICON',
@@ -212,6 +214,8 @@ export const drawingModes = keyMirror(
   'CROPPER',
   'FREE_DRAWING',
   'LINE_DRAWING',
+  'HIGHLIGHT_DRAWING',
+  'HIGHLIGHT_LINE',
   'TEXT',
   'SHAPE',
   'ICON',
@@ -331,6 +335,12 @@ export const defaultDrawRangeValues = {
   value: 12,
 };
 
+export const defaultHighlightsRangeValues = {
+  min: 20,
+  max: 100,
+  value: 37,
+};
+
 export const defaultShapeStrokeValues = {
   realTimeEvent: true,
   min: 2,

apps/image-editor/src/js/drawingMode/highlightLine.js

@@ -0,0 +1,36 @@
+import DrawingMode from '@/interface/drawingMode';
+import { drawingModes, componentNames as components } from '@/consts';
+
+/**
+ * HighlightLineMode class
+ * @class
+ * @ignore
+ */
+class HighlightLineMode extends DrawingMode {
+  constructor() {
+    super(drawingModes.HIGHLIGHT_LINE);
+  }
+
+  /**
+   * start this drawing mode
+   * @param {Graphics} graphics - Graphics instance
+   * @param {{width: ?number, color: ?string}} [options] - Brush width & color
+   * @override
+   */
+  start(graphics, options) {
+    const lineDrawing = graphics.getComponent(components.HIGHLIGHT_LINE);
+    lineDrawing.start(options);
+  }
+
+  /**
+   * stop this drawing mode
+   * @param {Graphics} graphics - Graphics instance
+   * @override
+   */
+  end(graphics) {
+    const lineDrawing = graphics.getComponent(components.HIGHLIGHT_LINE);
+    lineDrawing.end();
+  }
+}
+
+export default HighlightLineMode;