ding-image-editor 3.15.3

package/src/js/component/zoom.js

@@ -0,0 +1,708 @@
+import { fabric } from 'fabric';
+import Component from '@/interface/component';
+import { clamp } from '@/util';
+import { componentNames, eventNames, keyCodes, zoomModes } from '@/consts';
+
+const MOUSE_MOVE_THRESHOLD = 10;
+const DEFAULT_SCROLL_OPTION = {
+  left: 0,
+  top: 0,
+  width: 0,
+  height: 0,
+  stroke: '#000000',
+  strokeWidth: 0,
+  fill: '#000000',
+  opacity: 0.4,
+  evented: false,
+  selectable: false,
+  hoverCursor: 'auto',
+};
+const DEFAULT_VERTICAL_SCROLL_RATIO = {
+  SIZE: 0.0045,
+  MARGIN: 0.003,
+  BORDER_RADIUS: 0.003,
+};
+const DEFAULT_HORIZONTAL_SCROLL_RATIO = {
+  SIZE: 0.0066,
+  MARGIN: 0.0044,
+  BORDER_RADIUS: 0.003,
+};
+const DEFAULT_ZOOM_LEVEL = 1.0;
+const {
+  ZOOM_CHANGED,
+  ADD_TEXT,
+  TEXT_EDITING,
+  OBJECT_MODIFIED,
+  KEY_DOWN,
+  KEY_UP,
+  HAND_STARTED,
+  HAND_STOPPED,
+} = eventNames;
+
+/**
+ * Zoom components
+ * @param {Graphics} graphics - Graphics instance
+ * @extends {Component}
+ * @class Zoom
+ * @ignore
+ */
+class Zoom extends Component {
+  constructor(graphics) {
+    super(componentNames.ZOOM, graphics);
+
+    /**
+     * zoomArea
+     * @type {?fabric.Rect}
+     * @private
+     */
+    this.zoomArea = null;
+
+    /**
+     * Start point of zoom area
+     * @type {?{x: number, y: number}}
+     */
+    this._startPoint = null;
+
+    /**
+     * Center point of every zoom
+     * @type {Array.<{prevZoomLevel: number, zoomLevel: number, x: number, y: number}>}
+     */
+    this._centerPoints = [];
+
+    /**
+     * Zoom level (default: 100%(1.0), max: 400%(4.0))
+     * @type {number}
+     */
+    this.zoomLevel = DEFAULT_ZOOM_LEVEL;
+
+    /**
+     * Zoom mode ('normal', 'zoom', 'hand')
+     * @type {string}
+     */
+    this.zoomMode = zoomModes.DEFAULT;
+
+    /**
+     * Listeners
+     * @type {Object.<string, Function>}
+     * @private
+     */
+    this._listeners = {
+      startZoom: this._onMouseDownWithZoomMode.bind(this),
+      moveZoom: this._onMouseMoveWithZoomMode.bind(this),
+      stopZoom: this._onMouseUpWithZoomMode.bind(this),
+      startHand: this._onMouseDownWithHandMode.bind(this),
+      moveHand: this._onMouseMoveWithHandMode.bind(this),
+      stopHand: this._onMouseUpWithHandMode.bind(this),
+      zoomChanged: this._changeScrollState.bind(this),
+      keydown: this._startHandModeWithSpaceBar.bind(this),
+      keyup: this._endHandModeWithSpaceBar.bind(this),
+    };
+
+    const canvas = this.getCanvas();
+
+    /**
+     * Width:Height ratio (ex. width=1.5, height=1 -> aspectRatio=1.5)
+     * @private
+     */
+    this.aspectRatio = canvas.width / canvas.height;
+
+    /**
+     * vertical scroll bar
+     * @type {fabric.Rect}
+     * @private
+     */
+    this._verticalScroll = new fabric.Rect(DEFAULT_SCROLL_OPTION);
+
+    /**
+     * horizontal scroll bar
+     * @type {fabric.Rect}
+     * @private
+     */
+    this._horizontalScroll = new fabric.Rect(DEFAULT_SCROLL_OPTION);
+
+    canvas.on(ZOOM_CHANGED, this._listeners.zoomChanged);
+
+    this.graphics.on(ADD_TEXT, this._startTextEditingHandler.bind(this));
+    this.graphics.on(TEXT_EDITING, this._startTextEditingHandler.bind(this));
+    this.graphics.on(OBJECT_MODIFIED, this._stopTextEditingHandler.bind(this));
+  }
+
+  /**
+   * Attach zoom keyboard events
+   */
+  attachKeyboardZoomEvents() {
+    fabric.util.addListener(document, KEY_DOWN, this._listeners.keydown);
+    fabric.util.addListener(document, KEY_UP, this._listeners.keyup);
+  }
+
+  /**
+   * Detach zoom keyboard events
+   */
+  detachKeyboardZoomEvents() {
+    fabric.util.removeListener(document, KEY_DOWN, this._listeners.keydown);
+    fabric.util.removeListener(document, KEY_UP, this._listeners.keyup);
+  }
+
+  /**
+   * Handler when you started editing text
+   * @private
+   */
+  _startTextEditingHandler() {
+    this.isTextEditing = true;
+  }
+
+  /**
+   * Handler when you stopped editing text
+   * @private
+   */
+  _stopTextEditingHandler() {
+    this.isTextEditing = false;
+  }
+
+  /**
+   * Handler who turns on hand mode when the space bar is down
+   * @param {KeyboardEvent} e - Event object
+   * @private
+   */
+  _startHandModeWithSpaceBar(e) {
+    if (this.withSpace || this.isTextEditing) {
+      return;
+    }
+
+    if (e.keyCode === keyCodes.SPACE) {
+      this.withSpace = true;
+      this.startHandMode();
+    }
+  }
+
+  /**
+   * Handler who turns off hand mode when space bar is up
+   * @param {KeyboardEvent} e - Event object
+   * @private
+   */
+  _endHandModeWithSpaceBar(e) {
+    if (e.keyCode === keyCodes.SPACE) {
+      this.withSpace = false;
+      this.endHandMode();
+    }
+  }
+
+  /**
+   * Start zoom-in mode
+   */
+  startZoomInMode() {
+    if (this.zoomArea) {
+      return;
+    }
+    this.endHandMode();
+    this.zoomMode = zoomModes.ZOOM;
+
+    const canvas = this.getCanvas();
+
+    this._changeObjectsEventedState(false);
+
+    this.zoomArea = new fabric.Rect({
+      left: 0,
+      top: 0,
+      width: 0.5,
+      height: 0.5,
+      stroke: 'black',
+      strokeWidth: 1,
+      fill: 'transparent',
+      hoverCursor: 'zoom-in',
+    });
+
+    canvas.discardActiveObject();
+    canvas.add(this.zoomArea);
+    canvas.on('mouse:down', this._listeners.startZoom);
+    canvas.selection = false;
+    canvas.defaultCursor = 'zoom-in';
+  }
+
+  /**
+   * End zoom-in mode
+   */
+  endZoomInMode() {
+    this.zoomMode = zoomModes.DEFAULT;
+
+    const canvas = this.getCanvas();
+    const { startZoom, moveZoom, stopZoom } = this._listeners;
+
+    canvas.selection = true;
+    canvas.defaultCursor = 'auto';
+    canvas.off({
+      'mouse:down': startZoom,
+      'mouse:move': moveZoom,
+      'mouse:up': stopZoom,
+    });
+
+    this._changeObjectsEventedState(true);
+
+    canvas.remove(this.zoomArea);
+    this.zoomArea = null;
+  }
+
+  /**
+   * Start zoom drawing mode
+   */
+  start() {
+    this.zoomArea = null;
+    this._startPoint = null;
+    this._startHandPoint = null;
+  }
+
+  /**
+   * Stop zoom drawing mode
+   */
+  end() {
+    this.endZoomInMode();
+    this.endHandMode();
+  }
+
+  /**
+   * Start hand mode
+   */
+  startHandMode() {
+    this.endZoomInMode();
+    this.zoomMode = zoomModes.HAND;
+
+    const canvas = this.getCanvas();
+
+    this._changeObjectsEventedState(false);
+
+    canvas.discardActiveObject();
+    canvas.off('mouse:down', this._listeners.startHand);
+    canvas.on('mouse:down', this._listeners.startHand);
+    canvas.selection = false;
+    canvas.defaultCursor = 'grab';
+
+    canvas.fire(HAND_STARTED);
+  }
+
+  /**
+   * Stop hand mode
+   */
+  endHandMode() {
+    this.zoomMode = zoomModes.DEFAULT;
+    const canvas = this.getCanvas();
+
+    this._changeObjectsEventedState(true);
+
+    canvas.off('mouse:down', this._listeners.startHand);
+    canvas.selection = true;
+    canvas.defaultCursor = 'auto';
+
+    this._startHandPoint = null;
+
+    canvas.fire(HAND_STOPPED);
+  }
+
+  /**
+   * onMousedown handler in fabric canvas
+   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event
+   * @private
+   */
+  _onMouseDownWithZoomMode({ target, e }) {
+    if (target) {
+      return;
+    }
+
+    const canvas = this.getCanvas();
+
+    canvas.selection = false;
+
+    this._startPoint = canvas.getPointer(e);
+    this.zoomArea.set({ width: 0, height: 0 });
+
+    const { moveZoom, stopZoom } = this._listeners;
+    canvas.on({
+      'mouse:move': moveZoom,
+      'mouse:up': stopZoom,
+    });
+  }
+
+  /**
+   * onMousemove handler in fabric canvas
+   * @param {{e: MouseEvent}} fEvent - Fabric event
+   * @private
+   */
+  _onMouseMoveWithZoomMode({ e }) {
+    const canvas = this.getCanvas();
+    const pointer = canvas.getPointer(e);
+    const { x, y } = pointer;
+    const { zoomArea, _startPoint } = this;
+    const deltaX = Math.abs(x - _startPoint.x);
+    const deltaY = Math.abs(y - _startPoint.y);
+
+    if (deltaX + deltaY > MOUSE_MOVE_THRESHOLD) {
+      canvas.remove(zoomArea);
+      zoomArea.set(this._calcRectDimensionFromPoint(x, y));
+      canvas.add(zoomArea);
+    }
+  }
+
+  /**
+   * Get rect dimension setting from Canvas-Mouse-Position(x, y)
+   * @param {number} x - Canvas-Mouse-Position x
+   * @param {number} y - Canvas-Mouse-Position Y
+   * @returns {{left: number, top: number, width: number, height: number}}
+   * @private
+   */
+  _calcRectDimensionFromPoint(x, y) {
+    const canvas = this.getCanvas();
+    const canvasWidth = canvas.getWidth();
+    const canvasHeight = canvas.getHeight();
+    const { x: startX, y: startY } = this._startPoint;
+    const { min } = Math;
+
+    const left = min(startX, x);
+    const top = min(startY, y);
+    const width = clamp(x, startX, canvasWidth) - left; // (startX <= x(mouse) <= canvasWidth) - left
+    const height = clamp(y, startY, canvasHeight) - top; // (startY <= y(mouse) <= canvasHeight) - top
+
+    return { left, top, width, height };
+  }
+
+  /**
+   * onMouseup handler in fabric canvas
+   * @private
+   */
+  _onMouseUpWithZoomMode() {
+    let { zoomLevel } = this;
+    const { zoomArea } = this;
+    const { moveZoom, stopZoom } = this._listeners;
+    const canvas = this.getCanvas();
+    const center = this._getCenterPoint();
+    const { x, y } = center;
+
+    if (!this._isMaxZoomLevel()) {
+      this._centerPoints.push({
+        x,
+        y,
+        prevZoomLevel: zoomLevel,
+        zoomLevel: zoomLevel + 1,
+      });
+      zoomLevel += 1;
+      canvas.zoomToPoint({ x, y }, zoomLevel);
+
+      this._fireZoomChanged(canvas, zoomLevel);
+
+      this.zoomLevel = zoomLevel;
+    }
+
+    canvas.off({
+      'mouse:move': moveZoom,
+      'mouse:up': stopZoom,
+    });
+
+    canvas.remove(zoomArea);
+    this._startPoint = null;
+  }
+
+  /**
+   * Get center point
+   * @returns {{x: number, y: number}}
+   * @private
+   */
+  _getCenterPoint() {
+    const { left, top, width, height } = this.zoomArea;
+    const { x, y } = this._startPoint;
+    const { aspectRatio } = this;
+
+    if (width < MOUSE_MOVE_THRESHOLD && height < MOUSE_MOVE_THRESHOLD) {
+      return { x, y };
+    }
+
+    return width > height
+      ? { x: left + (aspectRatio * height) / 2, y: top + height / 2 }
+      : { x: left + width / 2, y: top + width / aspectRatio / 2 };
+  }
+
+  /**
+   * Zoom the canvas
+   * @param {{x: number, y: number}} center - center of zoom
+   * @param {?number} zoomLevel - zoom level
+   */
+  zoom({ x, y }, zoomLevel = this.zoomLevel) {
+    const canvas = this.getCanvas();
+    const centerPoints = this._centerPoints;
+
+    for (let i = centerPoints.length - 1; i >= 0; i -= 1) {
+      if (centerPoints[i].zoomLevel < zoomLevel) {
+        break;
+      }
+
+      const { x: prevX, y: prevY, prevZoomLevel } = centerPoints.pop();
+
+      canvas.zoomToPoint({ x: prevX, y: prevY }, prevZoomLevel);
+      this.zoomLevel = prevZoomLevel;
+    }
+
+    canvas.zoomToPoint({ x, y }, zoomLevel);
+    if (!this._isDefaultZoomLevel(zoomLevel)) {
+      this._centerPoints.push({
+        x,
+        y,
+        zoomLevel,
+        prevZoomLevel: this.zoomLevel,
+      });
+    }
+    this.zoomLevel = zoomLevel;
+
+    this._fireZoomChanged(canvas, zoomLevel);
+  }
+
+  /**
+   * Zoom out one step
+   */
+  zoomOut() {
+    const centerPoints = this._centerPoints;
+
+    if (!centerPoints.length) {
+      return;
+    }
+
+    const canvas = this.getCanvas();
+    const point = centerPoints.pop();
+    const { x, y, prevZoomLevel } = point;
+
+    if (this._isDefaultZoomLevel(prevZoomLevel)) {
+      canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
+    } else {
+      canvas.zoomToPoint({ x, y }, prevZoomLevel);
+    }
+
+    this.zoomLevel = prevZoomLevel;
+
+    this._fireZoomChanged(canvas, this.zoomLevel);
+  }
+
+  /**
+   * Zoom reset
+   */
+  resetZoom() {
+    const canvas = this.getCanvas();
+
+    canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
+
+    this.zoomLevel = DEFAULT_ZOOM_LEVEL;
+    this._centerPoints = [];
+
+    this._fireZoomChanged(canvas, this.zoomLevel);
+  }
+
+  /**
+   * Whether zoom level is max (5.0)
+   * @returns {boolean}
+   * @private
+   */
+  _isMaxZoomLevel() {
+    return this.zoomLevel >= 5.0;
+  }
+
+  /**
+   * Move point of zoom
+   * @param {{x: number, y: number}} delta - move amount
+   * @private
+   */
+  _movePointOfZoom({ x: deltaX, y: deltaY }) {
+    const centerPoints = this._centerPoints;
+
+    if (!centerPoints.length) {
+      return;
+    }
+
+    const canvas = this.getCanvas();
+    const { zoomLevel } = this;
+
+    const point = centerPoints.pop();
+    const { x: originX, y: originY, prevZoomLevel } = point;
+    const x = originX - deltaX;
+    const y = originY - deltaY;
+
+    canvas.zoomToPoint({ x: originX, y: originY }, prevZoomLevel);
+    canvas.zoomToPoint({ x, y }, zoomLevel);
+    centerPoints.push({ x, y, prevZoomLevel, zoomLevel });
+
+    this._fireZoomChanged(canvas, zoomLevel);
+  }
+
+  /**
+   * onMouseDown handler in fabric canvas
+   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event
+   * @private
+   */
+  _onMouseDownWithHandMode({ target, e }) {
+    if (target) {
+      return;
+    }
+
+    const canvas = this.getCanvas();
+
+    if (this.zoomLevel <= DEFAULT_ZOOM_LEVEL) {
+      return;
+    }
+
+    canvas.selection = false;
+
+    this._startHandPoint = canvas.getPointer(e);
+
+    const { moveHand, stopHand } = this._listeners;
+    canvas.on({
+      'mouse:move': moveHand,
+      'mouse:up': stopHand,
+    });
+  }
+
+  /**
+   * onMouseMove handler in fabric canvas
+   * @param {{e: MouseEvent}} fEvent - Fabric event
+   * @private
+   */
+  _onMouseMoveWithHandMode({ e }) {
+    const canvas = this.getCanvas();
+    const { x, y } = canvas.getPointer(e);
+    const deltaX = x - this._startHandPoint.x;
+    const deltaY = y - this._startHandPoint.y;
+
+    this._movePointOfZoom({ x: deltaX, y: deltaY });
+  }
+
+  /**
+   * onMouseUp handler in fabric canvas
+   * @private
+   */
+  _onMouseUpWithHandMode() {
+    const canvas = this.getCanvas();
+    const { moveHand, stopHand } = this._listeners;
+
+    canvas.off({
+      'mouse:move': moveHand,
+      'mouse:up': stopHand,
+    });
+
+    this._startHandPoint = null;
+  }
+
+  /**
+   * onChangeZoom handler in fabric canvas
+   * @private
+   */
+  _changeScrollState({ viewport, zoomLevel }) {
+    const canvas = this.getCanvas();
+
+    canvas.remove(this._verticalScroll);
+    canvas.remove(this._horizontalScroll);
+
+    if (this._isDefaultZoomLevel(zoomLevel)) {
+      return;
+    }
+
+    const canvasWidth = canvas.width;
+    const canvasHeight = canvas.height;
+
+    const { tl, tr, bl } = viewport;
+    const viewportWidth = tr.x - tl.x;
+    const viewportHeight = bl.y - tl.y;
+
+    const horizontalScrollWidth = (viewportWidth * viewportWidth) / canvasWidth;
+    const horizontalScrollHeight = viewportHeight * DEFAULT_HORIZONTAL_SCROLL_RATIO.SIZE;
+    const horizontalScrollLeft = clamp(
+      tl.x + (tl.x / canvasWidth) * viewportWidth,
+      tl.x,
+      tr.x - horizontalScrollWidth
+    );
+    const horizontalScrollMargin = viewportHeight * DEFAULT_HORIZONTAL_SCROLL_RATIO.MARGIN;
+    const horizontalScrollBorderRadius =
+      viewportHeight * DEFAULT_HORIZONTAL_SCROLL_RATIO.BORDER_RADIUS;
+
+    this._horizontalScroll.set({
+      left: horizontalScrollLeft,
+      top: bl.y - horizontalScrollHeight - horizontalScrollMargin,
+      width: horizontalScrollWidth,
+      height: horizontalScrollHeight,
+      rx: horizontalScrollBorderRadius,
+      ry: horizontalScrollBorderRadius,
+    });
+
+    const verticalScrollWidth = viewportWidth * DEFAULT_VERTICAL_SCROLL_RATIO.SIZE;
+    const verticalScrollHeight = (viewportHeight * viewportHeight) / canvasHeight;
+    const verticalScrollTop = clamp(
+      tl.y + (tl.y / canvasHeight) * viewportHeight,
+      tr.y,
+      bl.y - verticalScrollHeight
+    );
+    const verticalScrollMargin = viewportWidth * DEFAULT_VERTICAL_SCROLL_RATIO.MARGIN;
+    const verticalScrollBorderRadius = viewportWidth * DEFAULT_VERTICAL_SCROLL_RATIO.BORDER_RADIUS;
+
+    this._verticalScroll.set({
+      left: tr.x - verticalScrollWidth - verticalScrollMargin,
+      top: verticalScrollTop,
+      width: verticalScrollWidth,
+      height: verticalScrollHeight,
+      rx: verticalScrollBorderRadius,
+      ry: verticalScrollBorderRadius,
+    });
+
+    this._addScrollBar();
+  }
+
+  /**
+   * Change objects 'evented' state
+   * @param {boolean} [evented=true] - objects 'evented' state
+   */
+  _changeObjectsEventedState(evented = true) {
+    const canvas = this.getCanvas();
+
+    canvas.forEachObject((obj) => {
+      // {@link http://fabricjs.com/docs/fabric.Object.html#evented}
+      obj.evented = evented;
+    });
+  }
+
+  /**
+   * Add scroll bar and set remove timer
+   */
+  _addScrollBar() {
+    const canvas = this.getCanvas();
+
+    canvas.add(this._horizontalScroll);
+    canvas.add(this._verticalScroll);
+
+    if (this.scrollBarTid) {
+      clearTimeout(this.scrollBarTid);
+    }
+
+    this.scrollBarTid = setTimeout(() => {
+      canvas.remove(this._horizontalScroll);
+      canvas.remove(this._verticalScroll);
+    }, 3000);
+  }
+
+  /**
+   * Check zoom level is default zoom level (1.0)
+   * @param {number} zoomLevel - zoom level
+   * @returns {boolean} - whether zoom level is 1.0
+   */
+  _isDefaultZoomLevel(zoomLevel) {
+    return zoomLevel === DEFAULT_ZOOM_LEVEL;
+  }
+
+  /**
+   * Fire 'zoomChanged' event
+   * @param {fabric.Canvas} canvas - fabric canvas
+   * @param {number} zoomLevel - 'zoomChanged' event params
+   */
+  _fireZoomChanged(canvas, zoomLevel) {
+    canvas.fire(ZOOM_CHANGED, { viewport: canvas.calcViewportBoundaries(), zoomLevel });
+  }
+
+  /**
+   * Get zoom mode
+   */
+  get mode() {
+    return this.zoomMode;
+  }
+}
+
+export default Zoom;