vue-diagram-editor-improved
Version:
Highly customizable diagram editor support for Vue.js
1,540 lines (1,453 loc) • 70.6 kB
JavaScript
/*!
* vue-diagram-editor v1.2.8 | (c) 2021-2025 Maksim Kutishchev
* Released under the Apache 2 License.
* https://vue-diagram-editor.js.org
*/
module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 7);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
module.exports = require("ulid");
/***/ }),
/* 1 */
/***/ (function(module, exports) {
module.exports = require("lodash/isEqual");
/***/ }),
/* 2 */
/***/ (function(module, exports) {
module.exports = require("vue");
/***/ }),
/* 3 */
/***/ (function(module, exports) {
module.exports = require("lodash/cloneDeep");
/***/ }),
/* 4 */
/***/ (function(module, exports) {
module.exports = require("svg-pan-zoom");
/***/ }),
/* 5 */
/***/ (function(module, exports) {
module.exports = require("lodash/throttle");
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
// extracted by mini-css-extract-plugin
/***/ }),
/* 7 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, "Diagram", function() { return /* reexport */ Diagram; });
__webpack_require__.d(__webpack_exports__, "Node", function() { return /* reexport */ Node_Node; });
__webpack_require__.d(__webpack_exports__, "Link", function() { return /* reexport */ Link_Link; });
__webpack_require__.d(__webpack_exports__, "Size", function() { return /* reexport */ Size; });
__webpack_require__.d(__webpack_exports__, "Coordinates", function() { return /* reexport */ Coordinates; });
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/cache-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Diagram.vue?vue&type=template&id=250e0153
var render = function render() {
var _vm = this,
_c = _vm._self._c
return _c(
"div",
{ staticClass: "diagram-editor__wrapper" },
[
_c("DiagramRoot", {
ref: "diagram",
attrs: {
width: _vm.width,
height: _vm.height,
"grid-snap": _vm.gridSnap,
"zoom-enabled": _vm.zoomEnabled,
"node-color": _vm.nodeColor,
"node-pulsable": _vm.nodePulsable,
"node-deletable": _vm.nodeDeletable,
"node-pulse-color": _vm.nodePulseColor,
"before-delete-node": _vm.beforeDeleteNode,
"before-delete-link": _vm.beforeDeleteLink,
"port-disabled": _vm.portDisabled,
"port-available": _vm.portAvailable,
pan: _vm.pan,
"prevent-mouse-events-default": _vm.preventMouseEventsDefault,
},
on: {
"select-node": function ($event) {
return _vm.$emit("select-node", $event)
},
"deleted-node": function ($event) {
return _vm.$emit("deleted-node", $event)
},
"deleted-link": function ($event) {
return _vm.$emit("deleted-link", $event)
},
"updated-node": function ($event) {
return _vm.$emit("updated-node", $event)
},
"click-port": function ($event) {
return _vm.$emit("click-port", $event)
},
"created-link": function ($event) {
return _vm.$emit("created-link", $event)
},
},
scopedSlots: _vm._u(
[
{
key: "default",
fn: function (scopedParams) {
return [_vm._t("node", null, null, scopedParams)]
},
},
],
null,
true
),
}),
],
1
)
}
var staticRenderFns = []
render._withStripped = true
// CONCATENATED MODULE: ./src/components/Diagram.vue?vue&type=template&id=250e0153
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/cache-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DiagramRoot.vue?vue&type=template&id=20c2cfd5
var DiagramRootvue_type_template_id_20c2cfd5_render = function render() {
var _vm = this,
_c = _vm._self._c
return _c(
"svg",
{
ref: "diagramRoot",
staticClass: "diagram-editor__svg-content",
attrs: {
id: `diagram-root-${_vm.uniqId}`,
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 " + _vm.width / 1.2 + " " + _vm.height / 1.2,
width: _vm.width,
height: _vm.height,
preserveAspectRatio: "xMinYMin meet",
},
},
[
_c(
"g",
{
ref: "viewPort",
staticClass: "svg-pan-zoom_viewport",
attrs: { x: "50", y: "50" },
},
[
_c("defs", [
_c(
"pattern",
{
attrs: {
id: `diagram-small-grid-${_vm.uniqId}`,
width: "16",
height: "16",
patternUnits: "userSpaceOnUse",
},
},
[
_c("path", {
attrs: {
d: "M 16 0 L 0 0 0 16",
fill: "none",
stroke: "#ccc",
"stroke-width": "0.5",
},
}),
]
),
_c(
"pattern",
{
attrs: {
id: `diagram-grid-${_vm.uniqId}`,
width: "80",
height: "80",
patternUnits: "userSpaceOnUse",
},
},
[
_c("rect", {
attrs: {
width: "80",
height: "80",
fill: `url(#diagram-small-grid-${_vm.uniqId})`,
},
}),
_c("path", {
attrs: {
d: "M 80 0 L 0 0 0 80",
fill: "none",
stroke: "#ccc",
"stroke-width": "1",
},
}),
]
),
]),
_c("rect", {
ref: "grid",
attrs: {
x: "-5000px",
y: "-5000px",
width: "10000px",
height: "10000px",
fill: `url(#diagram-grid-${_vm.uniqId})`,
},
on: { mousedown: _vm.clearSelection },
}),
_vm._l(_vm.links, function (link) {
return _c("DiagramLink", {
key: link.id,
attrs: {
id: link.id,
link: link,
"node-start": _vm.nodes[link.start_id],
"node-end": _vm.nodes[link.end_id],
selected: _vm.selectedLink === link.id,
},
on: {
mousedown: function ($event) {
return _vm.selectLink(link.id)
},
"type-changed": _vm.handleLinkTypeChange,
},
})
}),
_vm._l(_vm.nodes, function (node) {
return _c("DiagramNode", {
key: node.id,
attrs: {
node: node,
color: _vm.nodeColor,
"pulse-color": _vm.nodePulseColor,
pulsable: _vm.nodePulsable,
deletable: _vm.nodeDeletable,
dragging: _vm.draggedNode === node.id,
selected: _vm.selectedNode === node.id,
"port-disabled": _vm.portDisabled,
"port-available": _vm.portAvailable,
"active-port": _vm.activePort,
"hovered-port": _vm.hoveredPort,
},
on: {
delete: _vm.deleteNode,
"drag-start": _vm.onNodeDragStart,
"resize-start": _vm.onNodeResizeStart,
"hovered-port": _vm.setHoveredPort,
"active-port": _vm.setActivePort,
},
scopedSlots: _vm._u(
[
{
key: "default",
fn: function (scopedParams) {
return [
_vm._t("default", null, { node: node }, scopedParams),
]
},
},
],
null,
true
),
})
}),
_vm.newLink
? _c("line", {
staticStyle: { stroke: "rgb(255,0,0)", "stroke-width": "2" },
attrs: {
x1: _vm.newLink.x1,
y1: _vm.newLink.y1,
x2: _vm.newLink.x2,
y2: _vm.newLink.y2,
"pointer-events": "none",
},
})
: _vm._e(),
],
2
),
]
)
}
var DiagramRootvue_type_template_id_20c2cfd5_staticRenderFns = []
DiagramRootvue_type_template_id_20c2cfd5_render._withStripped = true
// CONCATENATED MODULE: ./src/components/DiagramRoot.vue?vue&type=template&id=20c2cfd5
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/cache-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DiagramNode.vue?vue&type=template&id=6da56cf5
var DiagramNodevue_type_template_id_6da56cf5_render = function render() {
var _vm = this,
_c = _vm._self._c
return _c(
"g",
{ attrs: { id: _vm.node.id } },
[
_vm.pulsable(_vm.node)
? _c("rect", {
staticClass: "diagram--editor__pulse",
attrs: {
fill: _vm.pulseColor(_vm.node),
stroke: _vm.pulseColor(_vm.node),
x: _vm.node.x,
y: _vm.node.y,
rx: "3",
ry: "3",
width: _vm.node.width,
height: _vm.node.height,
},
})
: _vm._e(),
_c("rect", {
attrs: {
fill: _vm.node.color ? _vm.node.color : _vm.color(_vm.node),
stroke: "#000000",
"stroke-width": _vm.selected ? 1 : 0,
x: _vm.node.x,
y: _vm.node.y,
rx: "3",
ry: "3",
width: _vm.node.width,
height: _vm.node.height,
},
}),
_c("DiagramNodeTitle", {
attrs: {
x: _vm.node.x + 2,
y: _vm.node.y + 2,
width: _vm.node.size.width - 4,
title: _vm.node.title,
category: _vm.node.category,
state: _vm.node.state,
performer: _vm.node.performer,
color: _vm.node.color,
dragging: _vm.dragging,
deletable: _vm.node.deletable,
},
on: { delete: _vm.deleteNode },
nativeOn: {
mousedown: function ($event) {
$event.stopPropagation()
return _vm.onDragStart.apply(null, arguments)
},
},
}),
_c("rect", {
staticClass: "node-light-background",
attrs: {
fill: "#ffffff",
x: _vm.node.x + 2,
y: _vm.node.y + 20,
rx: "3",
ry: "3",
width: _vm.node.width - 4,
height: _vm.node.height - 22,
},
}),
_c(
"foreignObject",
{
attrs: {
x: _vm.node.x + 2,
y: _vm.node.y + 20,
width: _vm.slotWidth,
height: _vm.slotHeight,
},
},
[
_c(
"body",
{
staticClass: "diagram-editor__node-body",
attrs: { xmlns: "http://www.w3.org/1999/xhtml" },
},
[
_vm._t("default", null, {
width: _vm.slotWidth,
height: _vm.slotHeight,
}),
],
2
),
]
),
_c(
"svg",
{
attrs: {
x: _vm.node.x - 4,
y: _vm.node.y + _vm.node.height - _vm.portsHeight - 2,
width: _vm.node.width + 8,
height: _vm.portsHeight,
},
},
[
_vm._l(_vm.portsIn, function ([port, portData], portIndex) {
return _c("DiagramPort", {
key: _vm.node.id + "_in_" + port,
attrs: {
id: _vm.node.id + "_in_" + port,
title: _vm.getPortTitle(portData),
width:
portIndex + 1 > _vm.portsOut.length
? _vm.node.width
: _vm.node.width / 2,
x: 0,
y: portIndex * 18,
type: portData.type,
isExecution: portIndex === 0,
value: portData.value,
disabled: _vm.portsInDisabled[port],
available: _vm.portsInAvailable[port],
hovered: _vm.isHoveredPort("in", port),
align: "start",
},
on: {
mousedown: function ($event) {
return _vm.mouseDownPort("in", port, $event)
},
mouseenter: function ($event) {
return _vm.mouseEnterPort("in", port, $event)
},
mouseleave: function ($event) {
return _vm.mouseLeavePort("in", port, $event)
},
},
})
}),
_vm._l(_vm.portsOut, function ([port, portData], portIndex) {
return _c("DiagramPort", {
key: _vm.node.id + "_out_" + port,
attrs: {
id: _vm.node.id + "_out_" + port,
title: _vm.getPortTitle(portData),
width: _vm.node.width + 8,
x: 0,
y: portIndex * 18,
disabled: _vm.portsOutDisabled[port],
available: _vm.portsOutAvailable[port],
hovered: _vm.isHoveredPort("out", port),
type: portData.type,
isExecution: portIndex === 0,
value: portData.value,
align: "end",
},
on: {
mousedown: function ($event) {
return _vm.mouseDownPort("out", port, $event)
},
mouseenter: function ($event) {
return _vm.mouseEnterPort("out", port, $event)
},
mouseleave: function ($event) {
return _vm.mouseLeavePort("out", port, $event)
},
},
})
}),
],
2
),
_c(
"svg",
{
attrs: {
width: "10",
height: "10",
x: _vm.node.x + _vm.node.width - 10,
y: _vm.node.y + _vm.node.height - 10,
},
on: { mousedown: _vm.onResizeStart },
},
[
_c("path", {
staticStyle: { cursor: "nwse-resize" },
attrs: { d: "M 0,10 10,0 v 10 z", fill: "#000" },
}),
]
),
],
1
)
}
var DiagramNodevue_type_template_id_6da56cf5_staticRenderFns = []
DiagramNodevue_type_template_id_6da56cf5_render._withStripped = true
// CONCATENATED MODULE: ./src/components/DiagramNode.vue?vue&type=template&id=6da56cf5
// EXTERNAL MODULE: external "ulid"
var external_ulid_ = __webpack_require__(0);
// CONCATENATED MODULE: ./src/models/Coordinates.js
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
class Coordinates {
constructor(_ref) {
var {
x = 10,
y = 10
} = _ref;
_defineProperty(this, "x", null);
_defineProperty(this, "y", null);
this.x = Number(x);
this.y = Number(y);
}
}
// CONCATENATED MODULE: ./src/models/Size.js
function Size_defineProperty(e, r, t) { return (r = Size_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function Size_toPropertyKey(t) { var i = Size_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function Size_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
class Size {
constructor(_ref) {
var {
width = 150,
height = 150
} = _ref;
Size_defineProperty(this, "width", null);
Size_defineProperty(this, "height", null);
this.width = Number(width);
this.height = Number(height);
}
}
// CONCATENATED MODULE: ./src/models/Node.js
function Node_defineProperty(e, r, t) { return (r = Node_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function Node_toPropertyKey(t) { var i = Node_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function Node_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
class Node_Node {
constructor(attr) {
Node_defineProperty(this, "id", null);
Node_defineProperty(this, "title", null);
Node_defineProperty(this, "category", null);
Node_defineProperty(this, "state", null);
Node_defineProperty(this, "performer", null);
Node_defineProperty(this, "deletable", null);
Node_defineProperty(this, "color", null);
Node_defineProperty(this, "size", null);
Node_defineProperty(this, "coordinates", null);
Node_defineProperty(this, "data", {});
Node_defineProperty(this, "portsIn", {});
Node_defineProperty(this, "portsOut", {});
this.id = Node_Node.prepareProp('id', attr.id);
this.title = attr.title;
this.category = Node_Node.prepareProp('category', attr.category);
this.state = Node_Node.prepareProp('state', attr.state);
this.performer = Node_Node.prepareProp('performer', attr.performer);
this.deletable = Node_Node.prepareProp('deletable', attr.deletable);
this.coordinates = Node_Node.prepareProp('coordinates', attr.coordinates);
this.color = Node_Node.prepareProp('color', attr.color);
this.size = Node_Node.prepareProp('size', attr.size);
this.data = Node_Node.prepareProp('data', attr.data);
this.portsIn = Node_Node.prepareProp('portsIn', attr.portsIn);
this.portsOut = Node_Node.prepareProp('portsOut', attr.portsOut);
}
static prepareProp(name, value) {
switch (name) {
case 'id':
return value || Object(external_ulid_["ulid"])();
case 'coordinates':
return new Coordinates(value || {});
case 'size':
return new Size(value || {});
case 'portsIn':
case 'portsOut':
return Object.entries(value || {}).reduce((acc, _ref) => {
var [key, val] = _ref;
acc[key] = {
type: val.type || 'text',
value: val.value || ''
};
return acc;
}, {});
case 'data':
return value || {};
case 'category':
return value || "default";
case 'color':
return value || "#4249FF";
case 'state':
return value || null;
case 'performer':
return value || "CPU";
case 'deletable':
return value !== false;
default:
return value;
}
}
get portsHeight() {
return Math.max(Object.keys(this.portsIn).length, Object.keys(this.portsOut).length) * Node_Node.PORT_HEIGHT;
}
get width() {
return this.size.width;
}
get height() {
return this.size.height;
}
get x() {
return this.coordinates.x;
}
get y() {
return this.coordinates.y;
}
get x1() {
return this.coordinates.x + this.size.width;
}
get y1() {
return this.coordinates.y + this.size.height;
}
getPortCoordinates(type, name) {
if (!['in', 'out'].includes(type)) throw new Error('Undefined port type ' + type);
var ports = Object.keys(type === 'in' ? this.portsIn : this.portsOut);
var index = ports.findIndex(portName => portName === name);
if (index === -1) {
throw new Error("\"".concat(type, "\" port with name \"").concat(name, "\" is undefined!"));
}
return {
x: this.x + (type === 'out' ? this.width : 1),
y: this.y + this.height - (this.portsHeight - 2) + index * Node_Node.PORT_HEIGHT + 1
};
}
static intersect(a, b) {
return !(a.x > b.x1 || b.x > a.x1 || a.y > b.y1 || b.y > a.y1);
}
}
Node_defineProperty(Node_Node, "PORT_HEIGHT", 18);
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/cache-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DiagramPort.vue?vue&type=template&id=561efff4&functional=true
var DiagramPortvue_type_template_id_561efff4_functional_true_render = function render(_c, _vm) {
return _c(
"svg",
{
attrs: {
x: _vm.props.x,
y: _vm.props.y,
width: _vm.props.width,
height: "16",
},
},
[
!_vm.props.isExecution
? _c(
"rect",
_vm._g(
{
attrs: {
fill: _vm.$options.fill(
_vm.props.available,
_vm.props.hovered
),
x: _vm.props.align === "start" ? 0 : _vm.props.width - 10,
y: "0",
rx: "5",
ry: "5",
cursor: _vm.props.disabled ? "default" : "pointer",
width: "10",
height: "10",
},
},
_vm.listeners
)
)
: _c(
"rect",
_vm._g(
{
attrs: {
fill: "rgb(66, 73, 255)",
x: _vm.props.align === "start" ? 0 : _vm.props.width - 10,
y: "0",
rx: "0",
ry: "0",
cursor: _vm.props.disabled ? "default" : "pointer",
width: "10",
height: "10",
},
},
_vm.listeners
)
),
_c(
"text",
{
attrs: {
x: _vm.props.align === "start" ? 12 : _vm.props.width - 12,
y: "9",
"font-size": "8pt",
"text-anchor": _vm.props.align,
},
},
[
_vm._v(
"\n " +
_vm._s(_vm.props.title) +
_vm._s("<" + _vm.props.type + ">") +
"\n "
),
]
),
]
)
}
var DiagramPortvue_type_template_id_561efff4_functional_true_staticRenderFns = []
DiagramPortvue_type_template_id_561efff4_functional_true_render._withStripped = true
// CONCATENATED MODULE: ./src/components/DiagramPort.vue?vue&type=template&id=561efff4&functional=true
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DiagramPort.vue?vue&type=script&lang=js
/* harmony default export */ var DiagramPortvue_type_script_lang_js = ({
fill(available, hovered) {
if (available) {
return hovered ? '#04ff00' : '#f00';
}
return hovered ? '#888' : '#444';
}
});
// CONCATENATED MODULE: ./src/components/DiagramPort.vue?vue&type=script&lang=js
/* harmony default export */ var components_DiagramPortvue_type_script_lang_js = (DiagramPortvue_type_script_lang_js);
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
/* globals __VUE_SSR_CONTEXT__ */
// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.
function normalizeComponent(
scriptExports,
render,
staticRenderFns,
functionalTemplate,
injectStyles,
scopeId,
moduleIdentifier /* server only */,
shadowMode /* vue-cli only */
) {
// Vue.extend constructor export interop
var options =
typeof scriptExports === 'function' ? scriptExports.options : scriptExports
// render functions
if (render) {
options.render = render
options.staticRenderFns = staticRenderFns
options._compiled = true
}
// functional template
if (functionalTemplate) {
options.functional = true
}
// scopedId
if (scopeId) {
options._scopeId = 'data-v-' + scopeId
}
var hook
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__
}
// inject component styles
if (injectStyles) {
injectStyles.call(this, context)
}
// register component module identifier for async chunk inferrence
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier)
}
}
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook
} else if (injectStyles) {
hook = shadowMode
? function () {
injectStyles.call(
this,
(options.functional ? this.parent : this).$root.$options.shadowRoot
)
}
: injectStyles
}
if (hook) {
if (options.functional) {
// for template-only hot-reload because in that case the render fn doesn't
// go through the normalizer
options._injectStyles = hook
// register for functional component in vue file
var originalRender = options.render
options.render = function renderWithStyleInjection(h, context) {
hook.call(context)
return originalRender(h, context)
}
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate
options.beforeCreate = existing ? [].concat(existing, hook) : [hook]
}
}
return {
exports: scriptExports,
options: options
}
}
// CONCATENATED MODULE: ./src/components/DiagramPort.vue
/* normalize component */
var component = normalizeComponent(
components_DiagramPortvue_type_script_lang_js,
DiagramPortvue_type_template_id_561efff4_functional_true_render,
DiagramPortvue_type_template_id_561efff4_functional_true_staticRenderFns,
true,
null,
null,
null
)
/* hot reload */
if (false) { var api; }
component.options.__file = "src/components/DiagramPort.vue"
/* harmony default export */ var DiagramPort = (component.exports);
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/cache-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DiagramNodeTitle.vue?vue&type=template&id=51477eda
var DiagramNodeTitlevue_type_template_id_51477eda_render = function render() {
var _vm = this,
_c = _vm._self._c
return _c(
"svg",
{
style: { cursor: _vm.dragging ? "grabbing" : "grab" },
attrs: { x: _vm.x, y: _vm.y, width: _vm.width, height: "16" },
on: {
mouseenter: function ($event) {
_vm.hover = true
},
mouseleave: function ($event) {
_vm.hover = false
},
},
},
[
_c("rect", {
attrs: {
fill: "#000",
"fill-opacity": _vm.titleFillOpacity,
x: "0",
y: "0",
rx: "3",
ry: "3",
width: _vm.width,
height: "16",
},
}),
_c(
"svg",
{
attrs: {
x: "0",
y: "0",
width: _vm.deletable ? _vm.width - 17 : _vm.width,
height: "16",
},
},
[
_c("title", [_vm._v(_vm._s(_vm.title) + " " + _vm._s(_vm.category))]),
_vm.loading
? _c("g", { attrs: { transform: "translate(8, 8)" } }, [
_c(
"circle",
{
attrs: {
r: "4",
cx: "0",
cy: "0",
fill: "none",
stroke: "#fff",
"stroke-width": "2",
"stroke-dasharray": "10",
"stroke-dashoffset": "2",
},
},
[
_c("animateTransform", {
attrs: {
attributeName: "transform",
type: "rotate",
from: "0 0 0",
to: "360 0 0",
dur: "2s",
repeatCount: "indefinite",
},
}),
],
1
),
])
: _vm._e(),
_c(
"text",
{
attrs: {
x: _vm.loading ? 20 : 2,
y: "13",
"font-size": "15",
"font-weight": "normal",
fill: "#fff",
},
},
[
_vm._v(
"\n " +
_vm._s(_vm.title + " <" + _vm.category + ">") +
"\n "
),
]
),
]
),
_vm.deletable
? _c(
"svg",
{
staticClass: "diagram-editor__delete",
attrs: { x: _vm.width - 15, y: "1", width: "14", height: "14" },
on: {
click: function ($event) {
return _vm.$emit("delete")
},
},
},
[
_c("rect", {
attrs: {
x: "0",
y: "0",
width: "14",
height: "14",
rx: "2",
ry: "2",
},
}),
_c("line", { attrs: { x1: 1, y1: 1, x2: 13, y2: 13 } }),
_c("line", { attrs: { x1: 13, y1: 1, x2: 1, y2: 13 } }),
]
)
: _vm._e(),
]
)
}
var DiagramNodeTitlevue_type_template_id_51477eda_staticRenderFns = []
DiagramNodeTitlevue_type_template_id_51477eda_render._withStripped = true
// CONCATENATED MODULE: ./src/components/DiagramNodeTitle.vue?vue&type=template&id=51477eda
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DiagramNodeTitle.vue?vue&type=script&lang=js
/* harmony default export */ var DiagramNodeTitlevue_type_script_lang_js = ({
name: 'DiagramNodeTitle',
props: {
x: {
type: Number,
required: true
},
y: {
type: Number,
required: true
},
width: {
type: Number,
required: true
},
title: {
type: String,
required: true
},
category: {
type: String,
default: 'default'
},
deletable: {
type: Boolean,
default: true
},
color: {
type: String,
default: '#4249FF'
},
dragging: {
type: Boolean,
default: false
},
state: {
type: String,
default: 'default'
}
},
data() {
return {
hover: false,
loading: (this === null || this === void 0 ? void 0 : this.state) === 'running'
};
},
watch: {
state(newValue) {
this.loading = newValue === 'running';
}
},
computed: {
titleFillOpacity() {
return this.hover ? 0.7 : 0.5;
}
}
});
// CONCATENATED MODULE: ./src/components/DiagramNodeTitle.vue?vue&type=script&lang=js
/* harmony default export */ var components_DiagramNodeTitlevue_type_script_lang_js = (DiagramNodeTitlevue_type_script_lang_js);
// CONCATENATED MODULE: ./src/components/DiagramNodeTitle.vue
/* normalize component */
var DiagramNodeTitle_component = normalizeComponent(
components_DiagramNodeTitlevue_type_script_lang_js,
DiagramNodeTitlevue_type_template_id_51477eda_render,
DiagramNodeTitlevue_type_template_id_51477eda_staticRenderFns,
false,
null,
null,
null
)
/* hot reload */
if (false) { var DiagramNodeTitle_api; }
DiagramNodeTitle_component.options.__file = "src/components/DiagramNodeTitle.vue"
/* harmony default export */ var DiagramNodeTitle = (DiagramNodeTitle_component.exports);
// EXTERNAL MODULE: external "lodash/isEqual"
var isEqual_ = __webpack_require__(1);
var isEqual_default = /*#__PURE__*/__webpack_require__.n(isEqual_);
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DiagramNode.vue?vue&type=script&lang=js
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { DiagramNodevue_type_script_lang_js_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function DiagramNodevue_type_script_lang_js_defineProperty(e, r, t) { return (r = DiagramNodevue_type_script_lang_js_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function DiagramNodevue_type_script_lang_js_toPropertyKey(t) { var i = DiagramNodevue_type_script_lang_js_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function DiagramNodevue_type_script_lang_js_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/* harmony default export */ var DiagramNodevue_type_script_lang_js = ({
name: "DiagramNode",
components: {
DiagramNodeTitle: DiagramNodeTitle,
DiagramPort: DiagramPort
},
props: {
node: {
type: Node_Node,
required: true
},
color: {
type: Function,
required: true
},
pulseColor: {
type: Function,
required: true
},
pulsable: {
type: Function,
required: true
},
portDisabled: {
type: Function,
required: true
},
portAvailable: {
type: Function,
required: true
},
deletable: {
type: Function,
required: true
},
activePort: {
type: Object,
default: null
},
hoveredPort: {
type: Object,
default: null
},
selected: {
type: Boolean,
default: false
},
dragging: {
type: Boolean,
default: false
}
},
data() {
return {
nodeStrokeWidth: 0,
titleFillOpacity: 0.25
};
},
computed: {
portsIn() {
return Object.entries(this.node.portsIn);
},
portsOut() {
return Object.entries(this.node.portsOut);
},
portsInDisabled() {
return Object.keys(this.node.portsIn).reduce((acc, port) => _objectSpread(_objectSpread({}, acc), {}, {
[port]: this.portDisabled({
id: this.node.id,
type: 'in',
port
})
}), {});
},
portsOutDisabled() {
return Object.keys(this.node.portsOut).reduce((acc, port) => _objectSpread(_objectSpread({}, acc), {}, {
[port]: this.portDisabled({
id: this.node.id,
type: 'out',
port
})
}), {});
},
portsInAvailable() {
return Object.keys(this.node.portsIn).reduce((acc, port) => _objectSpread(_objectSpread({}, acc), {}, {
[port]: this.activePort && this.isAvailablePort('in', port)
}), {});
},
portsOutAvailable() {
return Object.keys(this.node.portsOut).reduce((acc, port) => _objectSpread(_objectSpread({}, acc), {}, {
[port]: this.activePort && this.isAvailablePort('out', port)
}), {});
},
portsHeight() {
return this.node.portsHeight;
},
slotWidth() {
return this.node.size.width - 4;
},
slotHeight() {
return this.node.size.height - 22;
},
nodeDeletable() {
return this.deletable(this.node);
}
},
methods: {
isAvailablePort(type, port) {
var data = {
id: this.node.id,
type,
port
};
var activePort = _objectSpread({}, this.activePort);
var hoveredPort = this.hoveredPort ? _objectSpread({}, this.hoveredPort) : null;
var hoveredIsActive = hoveredPort ? isEqual_default()(activePort, hoveredPort) : false;
return !hoveredIsActive && !isEqual_default()(activePort, data) && this.portAvailable(_objectSpread(_objectSpread({}, data), {}, {
activePort: _objectSpread({}, this.activePort)
}));
},
deleteNode() {
this.$emit("delete", this.node.id);
},
getPortTitle(portData) {
return portData.value.toString();
},
onDragStart(e) {
this.$emit('drag-start', {
node: this.node,
eX: e.x,
eY: e.y
});
},
onResizeStart(e) {
this.$emit('resize-start', {
node: this.node,
eX: e.x,
eY: e.y
});
},
isHoveredPort(type, port) {
return this.hoveredPort && this.node.id === this.hoveredPort.id && port === this.hoveredPort.port && type === this.hoveredPort.type;
},
mouseDownPort(type, port) {
var portIsDisabled = type === 'in' ? this.portsInDisabled[port] : this.portsOutDisabled[port];
if (!portIsDisabled) {
this.$emit('active-port', {
id: this.node.id,
port: port,
type: type
});
}
},
mouseEnterPort(type, port) {
this.$emit('hovered-port', {
id: this.node.id,
port: port,
type: type
});
},
mouseLeavePort() {
this.$emit('hovered-port', null);
}
}
});
// CONCATENATED MODULE: ./src/components/DiagramNode.vue?vue&type=script&lang=js
/* harmony default export */ var components_DiagramNodevue_type_script_lang_js = (DiagramNodevue_type_script_lang_js);
// CONCATENATED MODULE: ./src/components/DiagramNode.vue
/* normalize component */
var DiagramNode_component = normalizeComponent(
components_DiagramNodevue_type_script_lang_js,
DiagramNodevue_type_template_id_6da56cf5_render,
DiagramNodevue_type_template_id_6da56cf5_staticRenderFns,
false,
null,
null,
null
)
/* hot reload */
if (false) { var DiagramNode_api; }
DiagramNode_component.options.__file = "src/components/DiagramNode.vue"
/* harmony default export */ var DiagramNode = (DiagramNode_component.exports);
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/cache-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DiagramLink.vue?vue&type=template&id=71e2b2ed
var DiagramLinkvue_type_template_id_71e2b2ed_render = function render() {
var _vm = this,
_c = _vm._self._c
return _c(
"g",
{
on: {
mouseenter: function ($event) {
_vm.hovered = true
},
mouseleave: function ($event) {
_vm.hovered = false
},
mousedown: function ($event) {
return _vm.$emit("mousedown", $event)
},
},
},
[
_c("path", {
style: _vm.largeStrokeStyle,
attrs: { d: _vm.curve, "stroke-width": "8", fill: "none" },
}),
_c("path", {
style: _vm.strokeStyle,
attrs: { d: _vm.curve, "stroke-width": "2", fill: "none" },
}),
]
)
}
var DiagramLinkvue_type_template_id_71e2b2ed_staticRenderFns = []
DiagramLinkvue_type_template_id_71e2b2ed_render._withStripped = true
// CONCATENATED MODULE: ./src/components/DiagramLink.vue?vue&type=template&id=71e2b2ed
// CONCATENATED MODULE: ./src/models/Link.js
function Link_defineProperty(e, r, t) { return (r = Link_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function Link_toPropertyKey(t) { var i = Link_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function Link_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
class Link_Link {
constructor(props) {
Link_defineProperty(this, "id", null);
Link_defineProperty(this, "start_id", null);
Link_defineProperty(this, "start_port", null);
Link_defineProperty(this, "end_id", null);
Link_defineProperty(this, "end_port", null);
Link_defineProperty(this, "type", null);
this.id = props.id || Object(external_ulid_["ulid"])();
if (!props.start_id) throw new Error('start_id is empty!');
this.start_id = props.start_id;
this.start_port = props.start_port || 'default';
if (!props.end_id) throw new Error('end_id is empty!');
this.end_id = props.end_id;
this.end_port = props.end_port || 'default';
this.type = props.type || 'default';
}
}
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DiagramLink.vue?vue&type=script&lang=js
/* harmony default export */ var DiagramLinkvue_type_script_lang_js = ({
name: "DiagramLink",
props: {
link: {
type: Link_Link,
required: true
},
nodeStart: {
type: Node_Node,
required: true
},
nodeEnd: {
type: Node_Node,
required: true
},
selected: {
type: Boolean,
default: false
}
},
data: () => ({
hovered: false
}),
computed: {
startCoordinates() {
return this.nodeStart.getPortCoordinates('out', this.link.start_port);
},
endCoordinates() {
return this.nodeEnd.getPortCoordinates('in', this.link.end_port);
},
x1() {
return this.startCoordinates.x - 2;
},
y1() {
return this.startCoordinates.y;
},
x2() {
return this.endCoordinates.x + 1;
},
y2() {
return this.endCoordinates.y;
},
isExecutionFlow() {
var startPortIndex = this.getPortIndex('out', this.link.start_port);
var endPortIndex = this.getPortIndex('in', this.link.end_port);
return startPortIndex === 0 && endPortIndex === 0;
},
curve() {
var x1 = Math.trunc(this.x1),
y1 = Math.trunc(this.y1),
x2 = Math.trunc(this.x2),
y2 = Math.trunc(this.y2);
var distance = Math.trunc(4 * Math.sqrt(Math.abs(x1 - x2))) + 10;
return "M".concat(x1, ",").concat(y1, " C").concat(x1 + distance, ",").concat(y1, " ").concat(x2 - distance, ",").concat(y2, " ").concat(x2, ",").concat(y2);
},
largeStrokeStyle() {
if (this.selected) {
return this.hovered ? 'stroke:rgba(0,0,255,0.6);' : 'stroke:rgba(0,0,255,0.4);';
}
return this.hovered ? 'stroke:rgba(255,0,0,0.5);' : 'stroke:rgba(255,0,0,0.0);';
},
strokeStyle() {
return this.isExecutionFlow ? 'stroke:rgb(0,80,255);' : 'stroke:rgb(0,0,0);';
}
},
watch: {
isExecutionFlow: {
immediate: true,
handler(isExecution) {
var newType = isExecution ? 'execution' : 'default';
if (this.link.type !== newType && this.isExecutionFlow) {
this.link.type = newType;
this.$emit('type-changed', {
linkId: this.link.id,
type: newType
});
}
}
}
},
methods: {
getPortIndex(type, portName) {
var node = type === 'out' ? this.nodeStart : this.nodeEnd;
var ports = type === 'out' ? node.portsOut : node.portsIn;
var portEntries = Object.entries(ports);
for (var i = 0; i < portEntries.length; i++) {
var [port, _] = portEntries[i];
if (port === portName) {
return i;
}
}
return -1;
}
}
});
// CONCATENATED MODULE: ./src/components/DiagramLink.vue?vue&type=script&lang=js
/* harmony default export */ var components_DiagramLinkvue_type_script_lang_js = (DiagramLinkvue_type_script_lang_js);
// CONCATENATED MODULE: ./src/components/DiagramLink.vue
/* normalize component */
var DiagramLink_component = normalizeComponent(
components_DiagramLinkvue_type_script_lang_js,
DiagramLinkvue_type_template_id_71e2b2ed_render,
DiagramLinkvue_type_template_id_71e2b2ed_staticRenderFns,
false,
null,
null,