react-easy-diagram
Version:
<img src="https://github.com/tokarchyn/react-easy-diagram/blob/main/repo/logo-with-name.png?raw=true" alt="React Easy Diagram logo" height="50">
1,158 lines (1,138 loc) • 241 kB
JavaScript
import { observer } from 'mobx-react-lite';
import React, { useMemo, useContext, useRef, useEffect, useCallback, useState, useLayoutEffect } from 'react';
import { makeObservable, observable, computed, action, makeAutoObservable, reaction } from 'mobx';
import { useGesture } from '@use-gesture/react';
function isSuccess(result) {
return result.success;
}
function isError(result) {
return !result.success;
}
function successResult() {
return { success: true };
}
function successValueResult(value) {
return { success: true, value: value };
}
function errorResult(error) {
return { success: false, error: error };
}
function errorValueResult(value, error) {
return { success: false, error: error, value: value };
}
var addNodeCommand = function (node) { return ({
execute: function (rootStore) {
var result = rootStore.nodesStore.addNode(node, false);
if (isSuccess(result)) {
rootStore.selectionState.select(result.value, true);
}
},
}); };
function isPoint(value) {
return (Array.isArray(value) &&
value.length === 2 &&
value.every(function (v) { return Number.isFinite(v); }));
}
var distanceBetweenPoints = function (a, b) {
return Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2));
};
var roundPoint = function (point) {
return [Math.round(point[0]), Math.round(point[1])];
};
var addPoints = function () {
var _a;
var points = [];
for (var _i = 0; _i < arguments.length; _i++) {
points[_i] = arguments[_i];
}
return (_a = points.reduce(function (prev, curr) {
if (curr) {
return [
(prev ? prev[0] : 0) + curr[0],
(prev ? prev[1] : 0) + curr[1]
];
}
else {
return prev;
}
})) !== null && _a !== void 0 ? _a : [0, 0];
};
var subtractPoints = function () {
var points = [];
for (var _i = 0; _i < arguments.length; _i++) {
points[_i] = arguments[_i];
}
return points.reduce(function (prev, curr) {
return curr ? [prev[0] - curr[0], prev[1] - curr[1]] : prev;
});
};
var multiplyPoint = function (a, m) { return [
a[0] * m,
a[1] * m,
]; };
var arePointsEqual = function (a, b) {
return a === b || (isPoint(a) && isPoint(b) && a[0] === b[0] && a[1] === b[1]);
};
var cloneSelectedNodesCommand = {
execute: function (rootStore) {
var nodeStates = rootStore.selectionState.selectedNodes.map(function (node) {
var nodeState = node.export();
nodeState.id = undefined;
nodeState.label = nodeState.label;
nodeState.position = addPoints(nodeState.position, [50, 50]);
return nodeState;
});
rootStore.nodesStore.addNodes(nodeStates, false);
},
};
var removeSelectedCommand = {
execute: function (rootStore) {
removeSelectedLinksCommand.execute(rootStore);
removeSelectedNodesCommand.execute(rootStore);
},
};
var removeSelectedNodesCommand = {
execute: function (rootStore) {
rootStore.nodesStore.removeNodes(rootStore.selectionState.selectedNodes.map(function (n) { return n.id; }));
},
};
var removeSelectedLinksCommand = {
execute: function (rootStore) {
rootStore.linksStore.removeLinks(rootStore.selectionState.selectedLinks.map(function (n) { return n.id; }));
},
};
var Callbacks = /** @class */ (function () {
function Callbacks(rootStore) {
var _this = this;
Object.defineProperty(this, "_onNodesAddResult", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_onNodesRemoveResult", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_onNodePositionChanged", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_onNodeLabelChanged", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_onNodeTypeChanged", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_onNodeDataChanged", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_onNodeIsSelectionEnabledChanged", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_onNodeIsDragEnabledChanged", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_onDragStarted", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_onDrag", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_onDragEnded", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_onImportedStateRendered", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_onLinkValidation", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_onLinksAddResult", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_onLinksRemoveResult", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_onLinkingStarted", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_onLinkingEnded", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_rootStore", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "import", {
enumerable: true,
configurable: true,
writable: true,
value: function (callbacks) {
_this._onLinkValidation = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onLinkValidation;
_this._onNodesAddResult = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onNodesAddResult;
_this._onNodesRemoveResult = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onNodesRemoveResult;
_this._onNodePositionChanged = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onNodePositionChanged;
_this._onNodeLabelChanged = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onNodeLabelChanged;
_this._onNodeTypeChanged = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onNodeTypeChanged;
_this._onNodeDataChanged = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onNodeDataChanged;
_this._onNodeIsSelectionEnabledChanged = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onNodeIsSelectionEnabledChanged;
_this._onNodeIsDragEnabledChanged = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onNodeIsDragEnabledChanged;
_this._onDragStarted = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onDragStarted;
_this._onDrag = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onDrag;
_this._onDragEnded = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onDragEnded;
_this._onImportedStateRendered = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onImportedStateRendered;
_this._onLinksAddResult = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onLinksAddResult;
_this._onLinksRemoveResult = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onLinksRemoveResult;
_this._onLinkingStarted = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onLinkingStarted;
_this._onLinkingEnded = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onLinkingEnded;
}
});
Object.defineProperty(this, "export", {
enumerable: true,
configurable: true,
writable: true,
value: function () { return ({
onNodesAddResult: _this._onNodesAddResult,
onNodesRemoveResult: _this._onNodesRemoveResult,
onNodePositionChanged: _this._onNodePositionChanged,
onNodeLabelChanged: _this._onNodeLabelChanged,
onNodeTypeChanged: _this._onNodeTypeChanged,
onNodeDataChanged: _this._onNodeDataChanged,
onNodeIsSelectionEnabledChanged: _this._onNodeIsSelectionEnabledChanged,
onNodeIsDragEnabledChanged: _this._onNodeIsDragEnabledChanged,
onDragStarted: _this._onDragStarted,
onDrag: _this._onDrag,
onDragEnded: _this._onDragEnded,
onImportedStateRendered: _this._onImportedStateRendered,
onLinkValidation: _this._onLinkValidation,
onLinksAddResult: _this._onLinksAddResult,
onLinksRemoveResult: _this._onLinksRemoveResult,
onLinkingStarted: _this._onLinkingStarted,
onLinkingEnded: _this._onLinkingEnded,
}); }
});
Object.defineProperty(this, "linkValidation", {
enumerable: true,
configurable: true,
writable: true,
value: function (info) {
if (_this._onLinkValidation)
return _this._onLinkValidation(info, _this._rootStore);
else
return true;
}
});
Object.defineProperty(this, "nodesAdded", {
enumerable: true,
configurable: true,
writable: true,
value: function (info) {
if (_this._onNodesAddResult &&
(info.addedNodes.length > 0 || info.failedToAddNodes.length > 0)) {
_this._onNodesAddResult(info, _this._rootStore);
}
}
});
Object.defineProperty(this, "nodesRemoved", {
enumerable: true,
configurable: true,
writable: true,
value: function (info) {
if (_this._onNodesRemoveResult &&
(info.removedNodes.length > 0 || info.failedToRemoveNodeIds.length > 0)) {
_this._onNodesRemoveResult(info, _this._rootStore);
}
}
});
Object.defineProperty(this, "nodePositionChanged", {
enumerable: true,
configurable: true,
writable: true,
value: function (node, change) {
if (_this._onNodePositionChanged) {
_this._onNodePositionChanged({
oldValue: change.oldValue,
newValue: change.newValue,
node: node,
}, _this._rootStore);
}
}
});
Object.defineProperty(this, "nodeTypeChanged", {
enumerable: true,
configurable: true,
writable: true,
value: function (node, change) {
if (_this._onNodeTypeChanged) {
_this._onNodeTypeChanged({
oldValue: change.oldValue,
newValue: change.newValue,
node: node,
}, _this._rootStore);
}
}
});
Object.defineProperty(this, "nodeLabelChanged", {
enumerable: true,
configurable: true,
writable: true,
value: function (node, change) {
if (_this._onNodeLabelChanged) {
_this._onNodeLabelChanged({
oldValue: change.oldValue,
newValue: change.newValue,
node: node,
}, _this._rootStore);
}
}
});
Object.defineProperty(this, "nodeDataChanged", {
enumerable: true,
configurable: true,
writable: true,
value: function (node, change) {
if (_this._onNodeDataChanged) {
_this._onNodeDataChanged({
oldValue: change.oldValue,
newValue: change.newValue,
node: node,
}, _this._rootStore);
}
}
});
Object.defineProperty(this, "nodeIsSelectionEnabledChanged", {
enumerable: true,
configurable: true,
writable: true,
value: function (node, change) {
if (_this._onNodeIsSelectionEnabledChanged) {
_this._onNodeIsSelectionEnabledChanged({
oldValue: change.oldValue,
newValue: change.newValue,
node: node,
}, _this._rootStore);
}
}
});
Object.defineProperty(this, "nodeIsDragEnabledChanged", {
enumerable: true,
configurable: true,
writable: true,
value: function (node, change) {
if (_this._onNodeIsDragEnabledChanged) {
_this._onNodeIsDragEnabledChanged({
oldValue: change.oldValue,
newValue: change.newValue,
node: node,
}, _this._rootStore);
}
}
});
Object.defineProperty(this, "dragStarted", {
enumerable: true,
configurable: true,
writable: true,
value: function (info) {
if (_this._onDragStarted) {
_this._onDragStarted(info, _this._rootStore);
}
}
});
Object.defineProperty(this, "drag", {
enumerable: true,
configurable: true,
writable: true,
value: function (info) {
if (_this._onDrag) {
_this._onDrag(info, _this._rootStore);
}
}
});
Object.defineProperty(this, "dragEnded", {
enumerable: true,
configurable: true,
writable: true,
value: function (info) {
if (_this._onDragEnded) {
_this._onDragEnded(info, _this._rootStore);
}
}
});
Object.defineProperty(this, "importedStateRendered", {
enumerable: true,
configurable: true,
writable: true,
value: function () {
if (_this._rootStore.diagramSettings.zoomToFitSettings.callOnImportState) {
_this._rootStore.diagramState.zoomToFit();
}
if (_this._onImportedStateRendered) {
_this._onImportedStateRendered(_this._rootStore);
}
}
});
Object.defineProperty(this, "linksAdded", {
enumerable: true,
configurable: true,
writable: true,
value: function (info) {
if (_this._onLinksAddResult &&
(info.addedLinks.length > 0 || info.failedToAddLinks.length > 0)) {
_this._onLinksAddResult(info, _this._rootStore);
}
}
});
Object.defineProperty(this, "linksRemoved", {
enumerable: true,
configurable: true,
writable: true,
value: function (info) {
if (_this._onLinksRemoveResult &&
(info.removedLinks.length > 0 || info.failedToRemoveLinkIds.length > 0)) {
_this._onLinksRemoveResult(info, _this._rootStore);
}
}
});
Object.defineProperty(this, "linkingStarted", {
enumerable: true,
configurable: true,
writable: true,
value: function (info) {
if (_this._onLinkingStarted) {
_this._onLinkingStarted(info, _this._rootStore);
}
}
});
Object.defineProperty(this, "linkingEnded", {
enumerable: true,
configurable: true,
writable: true,
value: function (info) {
if (_this._onLinkingEnded) {
_this._onLinkingEnded(info, _this._rootStore);
}
}
});
this._rootStore = rootStore;
this.import();
}
return Callbacks;
}());
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
var SvgBackground = observer(function (_a) {
var diagramOffset = _a.diagramOffset, diagramZoom = _a.diagramZoom, settings = _a.settings;
var finalSettings = settings !== null && settings !== void 0 ? settings : defaultSettings$2;
var backgroundImage = useMemo(function () {
return finalSettings.imageGenerator
? finalSettings.imageGenerator(100 * diagramZoom, 100 * diagramZoom)
: undefined;
}, [finalSettings, finalSettings.imageGenerator, diagramZoom]);
return (React.createElement("div", { className: 'react_fast_diagram_Background', style: {
backgroundColor: finalSettings.color,
backgroundImage: backgroundImage,
backgroundPosition: diagramOffset[0] + "px " + diagramOffset[1] + "px",
} }));
});
var gridImageGenerator = function (width, height, sizeMultiplicator, linesColor, linesOpacity) {
linesColor = linesColor.replace('#', '%23');
return "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='" + width * sizeMultiplicator + "' height='" + height * sizeMultiplicator + "' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='" + linesColor + "' fill-opacity='" + linesOpacity + "'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")";
};
var createGridImageGenerator = function (sizeMultiplicator, linesColor, linesOpacity) { return function (width, height) {
return gridImageGenerator(width, height, sizeMultiplicator, linesColor, linesOpacity);
}; };
var dotsImageGenerator = function (width, height, sizeMultiplicator, dotsColor, dotsOpacity, dotsRadius) {
sizeMultiplicator = 0.1 * sizeMultiplicator;
dotsColor = dotsColor.replace('#', '%23');
return "url(\"data:image/svg+xml,%3Csvg width='" + width * sizeMultiplicator + "' height='" + height * sizeMultiplicator + "' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='" + dotsColor + "' fill-opacity='" + dotsOpacity + "' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='" + dotsRadius + "'/%3E%3Ccircle cx='13' cy='13' r='" + dotsRadius + "'/%3E%3C/g%3E%3C/svg%3E\")";
};
var createDotsImageGenerator = function (sizeMultiplicator, dotsColor, dotsOpacity, dotsRadius) { return function (width, height) {
return dotsImageGenerator(width, height, sizeMultiplicator, dotsColor, dotsOpacity, dotsRadius);
}; };
var crossesImageGenerator = function (width, height, sizeMultiplicator, color, opacity) {
color = color.replace('#', '%23');
return "url(\"data:image/svg+xml,%3Csvg width='" + width * sizeMultiplicator + "' height='" + height * sizeMultiplicator + "' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='" + color + "' fill-opacity='" + opacity + "'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")";
};
var createCrossesImageGenerator = function (sizeMultiplicator, color, opacity) { return function (width, height) {
return crossesImageGenerator(width, height, sizeMultiplicator, color, opacity);
}; };
var defaultSettings$2 = {
imageGenerator: createCrossesImageGenerator(0.2, '#858585', 0.1),
color: '#ffffff',
};
var createSvgBackground = function (settings) {
var finalSettings = __assign(__assign({}, defaultSettings$2), (settings ? settings : {}));
return {
component: SvgBackground,
settings: finalSettings,
};
};
var VisualComponentState = /** @class */ (function () {
function VisualComponentState(component) {
var _this = this;
Object.defineProperty(this, "_component", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_settings", {
enumerable: true,
configurable: true,
writable: true,
value: null
});
Object.defineProperty(this, "import", {
enumerable: true,
configurable: true,
writable: true,
value: function (newComponent) {
var _a;
if ('component' in newComponent) {
_this._component = newComponent.component;
_this._settings = (_a = newComponent.settings) !== null && _a !== void 0 ? _a : null;
}
else {
_this._component = newComponent;
_this._settings = null;
}
}
});
this.import(component);
makeObservable(this, {
_component: observable.ref,
_settings: observable.ref,
component: computed,
settings: computed,
import: action,
});
}
Object.defineProperty(VisualComponentState.prototype, "component", {
get: function () {
return this._component;
},
enumerable: false,
configurable: true
});
Object.defineProperty(VisualComponentState.prototype, "settings", {
get: function () {
return this._settings;
},
enumerable: false,
configurable: true
});
return VisualComponentState;
}());
var VisualComponentWithDefault = /** @class */ (function () {
function VisualComponentWithDefault(defaultComponent) {
var _this = this;
Object.defineProperty(this, "_innerComponent", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_defaultComponent", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "import", {
enumerable: true,
configurable: true,
writable: true,
value: function (newComponent) {
_this._innerComponent = newComponent
? new VisualComponentState(newComponent)
: _this._defaultComponent;
}
});
this._innerComponent = new VisualComponentState(defaultComponent);
this._defaultComponent = this._innerComponent;
makeAutoObservable(this);
}
Object.defineProperty(VisualComponentWithDefault.prototype, "component", {
get: function () {
return this._innerComponent.component;
},
enumerable: false,
configurable: true
});
Object.defineProperty(VisualComponentWithDefault.prototype, "settings", {
get: function () {
return this._innerComponent.settings;
},
enumerable: false,
configurable: true
});
return VisualComponentWithDefault;
}());
// Icons from https://material-ui.com/components/material-icons/
var RubbishBinIcon = function () { return (React.createElement("svg", { viewBox: '0 0 24 24' },
React.createElement("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z" }))); };
var CopyIcon = function () { return (React.createElement("svg", { viewBox: '0 0 24 24' },
React.createElement("path", { d: 'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z' }))); };
var FilterCenterFocusIcon = function () { return (React.createElement("svg", { viewBox: '0 0 24 24' },
React.createElement("path", { d: "M5 15H3v4c0 1.1.9 2 2 2h4v-2H5v-4zM5 5h4V3H5c-1.1 0-2 .9-2 2v4h2V5zm14-2h-4v2h4v4h2V5c0-1.1-.9-2-2-2zm0 16h-4v2h4c1.1 0 2-.9 2-2v-4h-2v4zM12 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" }))); };
var LockIcon = function () { return (React.createElement("svg", { viewBox: '0 0 24 24' },
React.createElement("path", { d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" }))); };
var UnlockIcon = function () { return (React.createElement("svg", { viewBox: '0 0 24 24' },
React.createElement("path", { d: "M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z" }))); };
function isNumber(value) {
return Number.isFinite(value);
}
function isObject(value) {
return value != null && typeof value == 'object' && !Array.isArray(value);
}
function isBoolean(value) {
return value != null && typeof value == 'boolean';
}
function clampValue(value, interval) {
return Math.min(Math.max(value, interval[0]), interval[1]);
}
function deepCopy(value) {
return JSON.parse(JSON.stringify(value));
}
function combineArrays() {
var arrays = [];
for (var _i = 0; _i < arguments.length; _i++) {
arrays[_i] = arguments[_i];
}
var combined = [];
arrays.forEach(function (a) { return a === null || a === void 0 ? void 0 : a.forEach(function (v) { return v && combined.push(v); }); });
return combined;
}
var MiniControlDefault = observer(function (_a) {
var _b = _a.rootStore, commandExecutor = _b.commandExecutor, diagramState = _b.diagramState, diagramSettings = _b.diagramSettings, selectionState = _b.selectionState, settings = _a.settings;
var finalSettings = settings !== null && settings !== void 0 ? settings : defaultSettings$1;
var className = useMemo(function () {
return combineArrays(['react_fast_diagram_MiniControl_Default'], finalSettings === null || finalSettings === void 0 ? void 0 : finalSettings.classes).join(' ');
}, [finalSettings]);
var style = useMemo(function () { return (__assign(__assign({}, getOffsetStyles(finalSettings)), finalSettings === null || finalSettings === void 0 ? void 0 : finalSettings.style)); }, [finalSettings]);
if (Object.values(finalSettings.buttons).every(function (v) { return v === false; }))
return null;
return (React.createElement("div", { className: className, style: style },
finalSettings.buttons.deleteSelection &&
selectionState.selectedItems.length > 0 && (React.createElement(Button, { size: finalSettings.buttonsSize, onClick: function () { return commandExecutor.execute(removeSelectedCommand); } },
React.createElement(RubbishBinIcon, null))),
finalSettings.buttons.cloneSelectedNodes &&
selectionState.selectedNodes.length > 0 && (React.createElement(Button, { size: finalSettings.buttonsSize, onClick: function () { return commandExecutor.execute(cloneSelectedNodesCommand); } },
React.createElement(CopyIcon, null))),
finalSettings.buttons.zoomIn && (React.createElement(Button, { size: finalSettings.buttonsSize, onClick: diagramState.zoomIn, children: '+' })),
finalSettings.buttons.zoomOut && (React.createElement(Button, { size: finalSettings.buttonsSize, onClick: diagramState.zoomOut, children: '-' })),
finalSettings.buttons.zoomToFit && (React.createElement(Button, { size: finalSettings.buttonsSize, onClick: diagramState.zoomToFit },
React.createElement(FilterCenterFocusIcon, null))),
finalSettings.buttons.lockUnlockPointerInteractions && (React.createElement(Button, { size: finalSettings.buttonsSize, onClick: function () {
if (diagramSettings.userInteraction.arePointerInteractionsDisabled)
diagramSettings.userInteraction.enableAllPointerInteractions(true);
else
diagramSettings.userInteraction.disableAllPointerInteractions(true);
} }, diagramSettings.userInteraction.arePointerInteractionsDisabled ? (React.createElement(LockIcon, null)) : (React.createElement(UnlockIcon, null))))));
});
function getOffsetStyles(settings) {
return {
top: settings.position == 'left-top' || settings.position == 'right-top'
? settings.parentOffset
: undefined,
right: settings.position == 'right-bottom' || settings.position == 'right-top'
? settings.parentOffset
: undefined,
bottom: settings.position == 'left-bottom' || settings.position == 'right-bottom'
? settings.parentOffset
: undefined,
left: settings.position == 'left-top' || settings.position == 'left-bottom'
? settings.parentOffset
: undefined,
};
}
var Button = function (props) { return (React.createElement("button", { onClick: props.onClick, className: 'react_fast_diagram_MiniControl_Btn', style: {
width: props.size + 'px',
height: props.size + 'px',
padding: 5,
} }, props.children)); };
var createDefaultMiniControl = function (settings) {
var finalSettings = __assign(__assign({}, defaultSettings$1), (settings ? settings : {}));
return {
component: MiniControlDefault,
settings: finalSettings,
};
};
var defaultSettings$1 = {
position: 'left-bottom',
buttonsSize: 30,
buttons: {
zoomIn: true,
zoomOut: true,
deleteSelection: true,
cloneSelectedNodes: true,
zoomToFit: true,
lockUnlockPointerInteractions: true,
},
parentOffset: 20,
};
var UserInteractionSettings = /** @class */ (function () {
function UserInteractionSettings() {
var _this = this;
Object.defineProperty(this, "_diagramZoom", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_diagramPan", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_nodeDrag", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_portConnection", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_nodeSelection", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_linkSelection", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_multiselectionKey", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_disableAllPointerInteractionsCounter", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "import", {
enumerable: true,
configurable: true,
writable: true,
value: function (obj) {
var _a, _b, _c, _d, _e, _f, _g;
_this._diagramZoom = (_a = obj === null || obj === void 0 ? void 0 : obj.diagramZoom) !== null && _a !== void 0 ? _a : true;
_this._diagramPan = (_b = obj === null || obj === void 0 ? void 0 : obj.diagramPan) !== null && _b !== void 0 ? _b : true;
_this._nodeDrag = (_c = obj === null || obj === void 0 ? void 0 : obj.nodeDrag) !== null && _c !== void 0 ? _c : true;
_this._portConnection = (_d = obj === null || obj === void 0 ? void 0 : obj.portConnection) !== null && _d !== void 0 ? _d : true;
_this._nodeSelection = (_e = obj === null || obj === void 0 ? void 0 : obj.nodeSelection) !== null && _e !== void 0 ? _e : true;
_this._linkSelection = (_f = obj === null || obj === void 0 ? void 0 : obj.linkSelection) !== null && _f !== void 0 ? _f : true;
_this._multiselectionKey = (_g = obj === null || obj === void 0 ? void 0 : obj.multiselectionKey) !== null && _g !== void 0 ? _g : 'shift';
_this._disableAllPointerInteractionsCounter =
(obj === null || obj === void 0 ? void 0 : obj.disableAllMouseAndTouchInteractions) ? 1 : 0;
}
});
Object.defineProperty(this, "disableAllPointerInteractions", {
enumerable: true,
configurable: true,
writable: true,
value: function (force) {
if (force === void 0) { force = false; }
_this._disableAllPointerInteractionsCounter = force
? 1
: _this._disableAllPointerInteractionsCounter + 1;
}
});
Object.defineProperty(this, "enableAllPointerInteractions", {
enumerable: true,
configurable: true,
writable: true,
value: function (force) {
if (force === void 0) { force = false; }
_this._disableAllPointerInteractionsCounter = force
? 0
: _this._disableAllPointerInteractionsCounter - 1;
}
});
Object.defineProperty(this, "isCallbackMultiselectionActivated", {
enumerable: true,
configurable: true,
writable: true,
value: function (shiftKey, altKey, ctrlKey, metaKey) {
switch (_this.multiselectionKey) {
case 'alt':
return altKey;
case 'ctrl':
return ctrlKey;
case 'meta':
return metaKey;
case 'shift':
return shiftKey;
default:
return false;
}
}
});
this.import();
makeAutoObservable(this);
}
Object.defineProperty(UserInteractionSettings.prototype, "diagramZoom", {
get: function () {
return this._diagramZoom;
},
set: function (value) {
this._diagramZoom = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(UserInteractionSettings.prototype, "diagramPan", {
get: function () {
return this._diagramPan;
},
set: function (value) {
this._diagramPan = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(UserInteractionSettings.prototype, "nodeDrag", {
get: function () {
return this._nodeDrag;
},
set: function (value) {
this._nodeDrag = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(UserInteractionSettings.prototype, "portConnection", {
get: function () {
return this._portConnection;
},
set: function (value) {
this._portConnection = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(UserInteractionSettings.prototype, "nodeSelection", {
get: function () {
return this._nodeSelection;
},
set: function (value) {
this._nodeSelection = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(UserInteractionSettings.prototype, "linkSelection", {
get: function () {
return this._linkSelection;
},
set: function (value) {
this._linkSelection = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(UserInteractionSettings.prototype, "multiselectionKey", {
get: function () {
return this._multiselectionKey;
},
set: function (value) {
this._multiselectionKey = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(UserInteractionSettings.prototype, "arePointerInteractionsDisabled", {
get: function () {
return this._disableAllPointerInteractionsCounter > 0;
},
enumerable: false,
configurable: true
});
return UserInteractionSettings;
}());
var DiagramSettings = /** @class */ (function () {
function DiagramSettings() {
var _this = this;
Object.defineProperty(this, "_backgroundComponentState", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_miniControlComponentState", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_zoomInterval", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_zoomToFitSettings", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_userInteraction", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "import", {
enumerable: true,
configurable: true,
writable: true,
value: function (obj) {
_this._backgroundComponentState.import(obj === null || obj === void 0 ? void 0 : obj.backgroundComponent);
_this._miniControlComponentState.import(obj === null || obj === void 0 ? void 0 : obj.miniControlComponent);
_this.setZoomInterval(obj === null || obj === void 0 ? void 0 : obj.zoomInterval);
_this._zoomToFitSettings = __assign(__assign({}, defaultZoomToFitSettings), obj === null || obj === void 0 ? void 0 : obj.zoomToFitSettings);
_this._userInteraction.import(obj === null || obj === void 0 ? void 0 : obj.userInteraction);
}
});
Object.defineProperty(this, "setZoomInterval", {
enumerable: true,
configurable: true,
writable: true,
value: function (value) {
_this._zoomInterval = value !== null && value !== void 0 ? value : defaultZoomInterval;
}
});
this._backgroundComponentState =
new VisualComponentWithDefault(createSvgBackground());
this._miniControlComponentState =
new VisualComponentWithDefault(createDefaultMiniControl());
this._userInteraction = new UserInteractionSettings();
this.import({
zoomInterval: defaultZoomInterval,
zoomToFitSettings: defaultZoomToFitSettings,
});
makeAutoObservable(this, {
// Probably some bug in mobx, without this annotation warning is thrown saying "cannot change _zoomInterval outside action"
setZoomInterval: action,
// @ts-ignore
_zoomInterval: observable.ref,
});
}
Object.defineProperty(DiagramSettings.prototype, "backgroundComponentState", {
get: function () {
return this._backgroundComponentState;
},
enumerable: false,
configurable: true
});
Object.defineProperty(DiagramSettings.prototype, "miniControlComponentState", {
get: function () {
return this._miniControlComponentState;
},
enumerable: false,
configurable: true
});
Object.defineProperty(DiagramSettings.prototype, "zoomInterval", {
get: function () {
return this._zoomInterval;
},
enumerable: false,
configurable: true
});
Object.defineProperty(DiagramSettings.prototype, "zoomToFitSettings", {
get: function () {
return this._zoomToFitSettings;
},
enumerable: false,
configurable: true
});
Object.defineProperty(DiagramSettings.prototype, "userInteraction", {
get: function () {
return this._userInteraction;
},
enumerable: false,
configurable: true
});
return DiagramSettings;
}());
var defaultZoomInterval = [0.1, 3];
var defaultZoomToFitSettings = {
padding: [30, 30],
zoomInterval: [0.1, 1.5],
callOnImportState: true,
};
var HtmlElementRefState = /** @class */ (function () {
function HtmlElementRefState(initValue, diagramState) {
var _this = this;
Object.defineProperty(this, "_diagramState", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_currentInternal", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_triggerSizePositionRecalculation", {
enumerable: true,
configurable: true,
writable: true,
value: 0
});
Object.defineProperty(this, "getDataAttribute", {
enumerable: true,
configurable: true,
writable: true,
value: function (name) {
if (_this.current) {
return _this.current.getAttribute(name);
}
return null;
}
});
Object.defineProperty(this, "recalculateSizeAndPosition", {
enumerable: true,
configurable: true,
writable: true,
value: function () {
_this._triggerSizePositionRecalculation += 1;
}
});
this._currentInternal = initValue;
makeAutoObservable(this, {
sizeExcludingZoom: computed({ keepAlive: true }),
positionExcludingZoom: computed({ keepAlive: true }),
boundingRect: computed({ keepAlive: true }),
});
this._diagramState = diagramState;
}
Object.defineProperty(HtmlElementRefState.prototype, "current", {
get: function () {
return this._currentInternal;
},
set: function (value) {
this._currentInternal = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(HtmlElementRefState.prototype, "sizeExcludingZoom", {
/**
* Size excluding diagram zoom.
*/
get: function () {
if (this.boundingRect && this.boundingRect.diagramZoom) {
return multiplyPoint(this.boundingRect.size, 1 / this.boundingRect.diagramZoom);
}
return null;
},
enumerable: false,
configurable: true
});
Object.defineProperty(HtmlElementRefState.prototype, "positionExcludingZoom", {
/**
* Position excluding diagram zoom.
*/
get: function () {
if (this.boundingRect && this.boundingRect.diagramZoom) {
return multiplyPoint(this.boundingRect.position, 1 / this.boundingRect.diagramZoom);
}
return null;
},
enumerable: false,
configurable: true
});
Object.defineProperty(HtmlElementRefState.prototype, "boundingRect", {
get: function () {