@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
112 lines • 6.09 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MiniMap = void 0;
const react_1 = __importStar(require("react"));
const react_flow_renderer_1 = require("react-flow-renderer");
const utils_1 = require("../minimap/utils");
let minimapCalcConf = {
navigationOn: false,
minimapElement: null,
flowElement: null,
};
/** An improved mini-map for react-flow that supports navigation via the mini-map. */
exports.MiniMap = (0, react_1.memo)((_a) => {
var _b;
var { flowInstance, enableNavigation = false, maskColor = "#ddddddbb", nodeClassName = utils_1.miniMapUtils.nodeClassName, nodeColor = utils_1.miniMapUtils.nodeColor, nodeStrokeColor = utils_1.miniMapUtils.borderColor, wrapperProps } = _a, minimapProps = __rest(_a, ["flowInstance", "enableNavigation", "maskColor", "nodeClassName", "nodeColor", "nodeStrokeColor", "wrapperProps"]);
const minimapWrapper = react_1.default.useRef(null);
(0, react_1.useEffect)(() => {
const minimapDiv = minimapWrapper.current;
if (enableNavigation && flowInstance && minimapDiv) {
minimapCalcConf = {
navigationOn: false,
minimapElement: minimapDiv.querySelector(".react-flow__minimap"),
flowElement: minimapDiv.closest(".react-flow"),
};
}
}, [flowInstance, enableNavigation]);
// sets the visible area of the canvas based on mouse movement on the mini-map
const handleMiniMapMouseMove = (event) => {
var _a, _b;
const minimapConfig = (_b = (_a = minimapCalcConf.minimapElement) === null || _a === void 0 ? void 0 : _a.getAttribute("viewBox")) === null || _b === void 0 ? void 0 : _b.split(" ");
if (minimapCalcConf.navigationOn &&
minimapCalcConf.minimapElement &&
minimapCalcConf.flowElement &&
flowInstance &&
minimapConfig) {
const minimapBounds = minimapCalcConf.minimapElement.getBoundingClientRect();
const canvasBounds = minimapCalcConf.flowElement.getBoundingClientRect();
const instanceState = flowInstance.toObject();
const minimapCoordinates = {
x0: parseInt(minimapConfig[0]),
y0: parseInt(minimapConfig[1]),
x1: parseInt(minimapConfig[2]) + parseInt(minimapConfig[0]),
y1: parseInt(minimapConfig[3]) + parseInt(minimapConfig[1]),
};
const minimapClick = {
x: event.clientX - minimapBounds.left,
y: event.clientY - minimapBounds.top,
};
const canvasPosition = {
x: ((minimapCoordinates.x1 - minimapCoordinates.x0) / minimapBounds.width) * minimapClick.x * -1 -
minimapCoordinates.x0,
y: ((minimapCoordinates.y1 - minimapCoordinates.y0) / minimapBounds.height) * minimapClick.y * -1 -
minimapCoordinates.y0,
};
const canvasNewState = {
zoom: instanceState.zoom,
x: canvasPosition.x * instanceState.zoom + canvasBounds.width / 2,
y: canvasPosition.y * instanceState.zoom + canvasBounds.height / 2,
};
flowInstance.setTransform(canvasNewState);
}
};
// sets the view for the user when clicked and finish navigation
const handleMiniMapMouseUp = (event) => {
handleMiniMapMouseMove(event);
minimapCalcConf.navigationOn = false;
};
// enables the mini-map fake drag effect see "handleMiniMapMouseMove" above.
const handleMiniMapMouseDown = () => {
if (enableNavigation && flowInstance) {
minimapCalcConf.navigationOn = true;
}
};
return (react_1.default.createElement("div", Object.assign({ ref: minimapWrapper, onMouseDown: handleMiniMapMouseDown, onMouseUp: handleMiniMapMouseUp, onMouseMove: handleMiniMapMouseMove, onMouseLeave: handleMiniMapMouseUp }, wrapperProps, { style: flowInstance && enableNavigation
? Object.assign(Object.assign({}, ((_b = wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style) !== null && _b !== void 0 ? _b : {})), { cursor: "grab" }) : wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style }),
react_1.default.createElement(react_flow_renderer_1.MiniMap, Object.assign({ maskColor: maskColor, nodeClassName: nodeClassName, nodeColor: nodeColor, nodeStrokeColor: nodeStrokeColor }, minimapProps))));
});
//# sourceMappingURL=MiniMap.js.map