rete-connection-plugin/build/connection-plugin.esm.js

Rete connection plugin ==== #### Rete.js plugin

/*!
* rete-connection-plugin v0.4.0 
* (c) 2019  
* Released under the ISC license.
*/
function ___$insertStyle(css) {
  if (!css) {
    return;
  }
  if (typeof window === 'undefined') {
    return;
  }

  var style = document.createElement('style');

  style.setAttribute('type', 'text/css');
  style.innerHTML = css;
  document.head.appendChild(style);

  return css;
}

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ("value" in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArrayLimit(arr, i) {
  var _arr = [];
  var _n = true;
  var _d = false;
  var _e = undefined;

  try {
    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance");
}

___$insertStyle(".connection {\n  overflow: visible !important; }\n  .connection .main-path {\n    fill: none;\n    stroke-width: 5px;\n    stroke: steelblue; }\n");

function toTrainCase(str) {
  return str.toLowerCase().replace(/ /g, '-');
}

function defaultPath(points, curvature) {
  var _points = _slicedToArray(points, 4),
      x1 = _points[0],
      y1 = _points[1],
      x2 = _points[2],
      y2 = _points[3];

  var hx1 = x1 + Math.abs(x2 - x1) * curvature;
  var hx2 = x2 - Math.abs(x2 - x1) * curvature;
  return "M ".concat(x1, " ").concat(y1, " C ").concat(hx1, " ").concat(y1, " ").concat(hx2, " ").concat(y2, " ").concat(x2, " ").concat(y2);
}
function renderPathData(emitter, points, connection) {
  var data = {
    points: points,
    connection: connection,
    d: ''
  };
  emitter.trigger('connectionpath', data);
  return data.d || defaultPath(points, 0.4);
}
function updateConnection(_ref) {
  var el = _ref.el,
      d = _ref.d;
  var path = el.querySelector('.connection path');
  if (!path) throw new Error('Path of connection was broken');
  path.setAttribute('d', d);
}
function renderConnection(_ref2) {
  var _svg$classList;

  var el = _ref2.el,
      d = _ref2.d,
      connection = _ref2.connection;
  var classed = !connection ? [] : ['input-' + toTrainCase(connection.input.name), 'output-' + toTrainCase(connection.output.name), 'socket-input-' + toTrainCase(connection.input.socket.name), 'socket-output-' + toTrainCase(connection.output.socket.name)];
  var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

  (_svg$classList = svg.classList).add.apply(_svg$classList, ['connection'].concat(classed));

  path.classList.add('main-path');
  path.setAttribute('d', d);
  svg.appendChild(path);
  el.appendChild(svg);
  updateConnection({
    el: el,
    d: d
  });
}

var Picker =
/*#__PURE__*/
function () {
  function Picker(editor) {
    _classCallCheck(this, Picker);

    this.el = document.createElement('div');
    this.editor = editor;
    this._output = null;
  }

  _createClass(Picker, [{
    key: "reset",
    value: function reset() {
      this.output = null;
    }
  }, {
    key: "pickOutput",
    value: function pickOutput(output) {
      if (output && !this.output) {
        this.output = output;
      }
    }
  }, {
    key: "pickInput",
    value: function pickInput(input) {
      var _this = this;

      if (this.output === null) {
        if (input.hasConnection()) {
          this.output = input.connections[0].output;
          editor.removeConnection(input.connections[0]);
        }

        return true;
      }

      if (!input.multipleConnections && input.hasConnection()) editor.removeConnection(input.connections[0]);
      if (!this.output.multipleConnections && this.output.hasConnection()) editor.removeConnection(this.output.connections[0]);

      if (this.output.connectedTo(input)) {
        var connection = input.connections.find(function (c) {
          return c.output === _this.output;
        });
        editor.removeConnection(connection);
      }

      editor.connect(this.output, input);
      this.reset();
    }
  }, {
    key: "pickConnection",
    value: function pickConnection(connection) {
      var output = connection.output;
      editor.removeConnection(connection);
      this.output = output;
    }
  }, {
    key: "getPoints",
    value: function getPoints() {
      var mouse = this.editor.view.area.mouse;
      var node = this.editor.view.nodes.get(this.output.node);

      var _node$getSocketPositi = node.getSocketPosition(this.output),
          _node$getSocketPositi2 = _slicedToArray(_node$getSocketPositi, 2),
          x1 = _node$getSocketPositi2[0],
          y1 = _node$getSocketPositi2[1];

      return [x1, y1, mouse.x, mouse.y];
    }
  }, {
    key: "updateConnection",
    value: function updateConnection$$1() {
      if (!this.output) return;
      var d = renderPathData(this.editor, this.getPoints());

      updateConnection({
        el: this.el,
        d: d
      });
    }
  }, {
    key: "renderConnection",
    value: function renderConnection$$1() {
      if (!this.output) return;
      var d = renderPathData(this.editor, this.getPoints());

      renderConnection({
        el: this.el,
        d: d,
        connection: null
      });
    }
  }, {
    key: "output",
    get: function get() {
      return this._output;
    },
    set: function set(val) {
      var area = this.editor.view.area;
      this._output = val;

      if (val !== null) {
        area.appendChild(this.el);
        this.renderConnection();
      } else if (this.el.parentElement) {
        area.removeChild(this.el);
        this.el.innerHTML = '';
      }
    }
  }]);

  return Picker;
}();

var Flow =
/*#__PURE__*/
function () {
  function Flow(picker) {
    _classCallCheck(this, Flow);

    this.picker = picker;
    this.locked = false;
  }

  _createClass(Flow, [{
    key: "act",
    value: function act() {
      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
          input = _ref.input,
          output = _ref.output;

      if (this.locked) return;
      if (input) this.picker.pickInput(input);else if (output) this.picker.pickOutput(output);else this.picker.reset();
    }
  }, {
    key: "once",
    value: function once(params) {
      this.act(params);
      this.prevent();
    }
  }, {
    key: "prevent",
    value: function prevent() {
      this.locked = true;
    }
  }, {
    key: "reset",
    value: function reset() {
      this.locked = false;
    }
  }]);

  return Flow;
}();

function install(editor) {
  editor.bind('connectionpath');
  var picker = new Picker(editor);
  var flow = new Flow(picker);
  editor.on('rendersocket', function (_ref2) {
    var el = _ref2.el,
        input = _ref2.input,
        output = _ref2.output;
    el._reteConnectionPlugin = {
      input: input,
      output: output
    };
    el.addEventListener('pointerdown', function (e) {
      editor.view.container.dispatchEvent(new PointerEvent('pointermove', e));
      e.stopPropagation();
      flow.once(el._reteConnectionPlugin);
    });
    el.addEventListener('click', function (e) {
      e.stopPropagation();
      flow.reset();
    });
  });
  window.addEventListener('pointerup', function (e) {
    var el = document.elementFromPoint(e.clientX, e.clientY);
    flow.act(el && el._reteConnectionPlugin);
  });
  window.addEventListener('pointermove', function () {
    return flow.reset();
  });
  editor.on('mousemove', function () {
    return picker.updateConnection();
  });
  editor.on('renderconnection', function (_ref3) {
    var el = _ref3.el,
        connection = _ref3.connection,
        points = _ref3.points;
    var d = renderPathData(editor, points, connection);
    el.addEventListener('contextmenu', function (e) {
      e.stopPropagation();
      e.preventDefault();
      picker.pickConnection(connection);
    });
    renderConnection({
      el: el,
      d: d,
      connection: connection
    });
  });
  editor.on('updateconnection', function (_ref4) {
    var el = _ref4.el,
        connection = _ref4.connection,
        points = _ref4.points;
    var d = renderPathData(editor, points, connection);
    updateConnection({
      el: el,
      connection: connection,
      d: d
    });
  });
}

var index$1 = {
  name: 'connection',
  install: install
};

export default index$1;
export { defaultPath };
//# sourceMappingURL=connection-plugin.esm.js.map