saagie-ui/src/react/projects/pipeline/utils/extendSVGPath/index.js

Saagie UI from Saagie Design System

/* eslint-disable */
/** svg.path.js - v0.6.0 - 2014-08-15
 * http://otm.github.io/svg.path.js/
 * Copyright (c) 2014 Nils Lagerkvist; Licensed under the  MIT license /
 */
function extendSVGPath () {
  const slice = Function.prototype.call.bind(Array.prototype.slice);

  SVG.extend(SVG.Path, {
    M(p) {
      p = (arguments.length === 1) ? [p.x, p.y] : slice(arguments);

      this.addSegment('M', p, this._redrawEnabled);

      if (this._segments.length === 1) {
        return this.plot(`M${p[0]} ${p[1]}`);
      }

      return this;
    },
    m(p) {
      p = (arguments.length === 1) ? [p.x, p.y] : slice(arguments);

      this.addSegment('m', p, this._redrawEnabled);

      if (this._segments.length === 1) {
        return this.plot(`m${p[0]} ${p[1]}`);
      }

      return this;
    },
    // TODO: Solve
    L(p) {
      p = (arguments.length === 1) ? [p.x, p.y] : slice(arguments);

      return this.addSegment('L', p, this._redrawEnabled);
    },
    l(p) {
      p = (arguments.length === 1) ? [p.x, p.y] : slice(arguments);

      return this.addSegment('l', p, this._redrawEnabled);
    },
    H(x) {
      return this.addSegment('H', [x], this._redrawEnabled);
    },
    h(x) {
      return this.addSegment('h', [x], this._redrawEnabled);
    },
    V(y) {
      return this.addSegment('V', [y], this._redrawEnabled);
    },
    v(y) {
      return this.addSegment('v', [y], this._redrawEnabled);
    },
    C(p1, p2, p) {
      p = (arguments.length === 3) ? [p1.x, p1.y, p2.x, p2.y, p.x, p.y] : slice(arguments);

      return this.addSegment('C', p, this._redrawEnabled);
    },
    c(p1, p2, p) {
      p = (arguments.length === 3) ? [p1.x, p1.y, p2.x, p2.y, p.x, p.y] : slice(arguments);

      return this.addSegment('c', p, this._redrawEnabled);
    },
    S(p2, p) {
      p = (arguments.length === 2) ? [p2.x, p2.y, p.x, p.y] : slice(arguments);

      return this.addSegment('S', p, this._redrawEnabled);
    },
    s(p2, p) {
      p = (arguments.length === 2) ? [p2.x, p2.y, p.x, p.y] : slice(arguments);

      return this.addSegment('s', p, this._redrawEnabled);
    },
    // Q x1 y1, x y
    Q(p1, p) {
      p = (arguments.length === 2) ? [p1.x, p1.y, p.x, p.y] : slice(arguments);

      return this.addSegment('Q', p, this._redrawEnabled);
    },
    q(p1, p) {
      p = (arguments.length === 2) ? [p1.x, p1.y, p.x, p.y] : slice(arguments);

      return this.addSegment('q', p, this._redrawEnabled);
    },
    T(p) {
      p = (arguments.length === 1) ? [p.x, p.y] : slice(arguments);

      return this.addSegment('T', p, this._redrawEnabled);
    },
    t(p) {
      p = (arguments.length === 1) ? [p.x, p.y] : slice(arguments);

      return this.addSegment('t', p, this._redrawEnabled);
    },
    A(rx, ry, xAxisRotation, largeArcFlag, sweepFlag, p) {
      p = (arguments.length === 6) ? [rx, ry, xAxisRotation, largeArcFlag, sweepFlag, p.x, p.y] : slice(arguments);

      return this.addSegment('A', p, this._redrawEnabled);
    },
    a(rx, ry, xAxisRotation, largeArcFlag, sweepFlag, p) {
      p = (arguments.length === 6) ? [rx, ry, xAxisRotation, largeArcFlag, sweepFlag, p.x, p.y] : slice(arguments);

      return this.addSegment('a', p, this._redrawEnabled);
    },
    Z() {
      return this.addSegment('Z', [], this._redrawEnabled);
    },
    // TODO: Add check that first element is moveto
    addSegment(movement, coordinates, redraw) {
      const segment = {
        type: movement,
        coords: coordinates,
      };

      if (!this._segments) {
        this._segments = [];
      }

      this._segments.push(segment);

      if (redraw !== false) {
        this._drawSegment(segment);
      }

      return this;
    },
    clearPath() {
      if (this._segments) {
        this._segments.length = 0;
      }
      this._lastSegment = null;
      return this.plot();
    },
    getSegmentCount() {
      return this._segments.length;
    },
    getSegment(index) {
      return this._segments[index];
    },
    removeSegment(index) {
      this._segments.splice(index, 1);
      return this.redraw();
    },
    replaceSegment(index, segment) {
      this._segments.splice(index, 1, segment);
      return this.redraw();
    },
    /**
		 * Easing:
		 *	<>: ease in and out
		 *	>: ease out
		 *	<: ease in
		 *	-: linear
		 *	=: external control
		 *	a function
		 */
    drawAnimated(options) {
      options = options || {};
      options.duration = options.duration || '1000';
      options.easing = options.easing || '<>';
      options.delay = options.delay || 0;

      const length = this.length();

      this.stroke({
        width: 2,
        dasharray: `${length} ${length}`,
        dashoffset: length,
      });

      const fx = this.animate(options.duration, options.easing, options.delay);

      fx.stroke({
        dashoffset: 0,
      });

      return this;
    },
    update(redraw) {
      if (redraw === true) { this._redrawEnabled = false; }

      if (redraw === false) { this._redrawEnabled = true; }

      return !!this._redrawEnabled;
    },
    redraw() {
      // reset
      this._lastSegment = null;
      this.attr('d', '');

      return this._drawSegment(this._segments);
    },
    _drawSegment(segment) {
      let str = ''; let
        lastSegment = this._lastSegment;

      if (!Array.isArray(segment)) {
        segment = [segment];
      }

      for (let i = 0; i < segment.length; i += 1) {
        if (lastSegment === segment[i].type) {
          str += ` ${segment[i].coords.join(' ')}`;
        } else {
          str += ` ${segment[i].type}${segment[i].coords.join(' ')}`;
        }
        lastSegment = segment[i].type;
      }

      this._lastSegment = lastSegment;

      return this.attr('d', (this.attr('d') || '') + str);
    },
  });
};

export default extendSVGPath;