@nodeject/ui-components
Version:
UI library for non-trivial components
127 lines (126 loc) • 6.07 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(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);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ContainerWidget = void 0;
/**
* Wraps the HierarchyChart and the ContainerWidgetMenu components.
*/
var React = require("react");
var react_1 = require("react");
var panzoom_1 = require("panzoom");
var node_container_top_1 = require("./node-container-top");
var widget_menu_1 = require("./widget-menu");
var containerWidgetStyles = require("./ContainerWidget.module.less");
var ContainerWidget = function (props) {
var debugMessages = props.debugMessages, hasRightsToEdit = props.hasRightsToEdit, isEditModeEnabled = props.isEditModeEnabled,
// initialX,
// initialY,
// initialZoom,
// maxZoom,
// minZoom,
showPanzoomButton = props.showPanzoomButton, topNodeData = props.topNodeData, tree = props.treeView;
// const ref = useRef(document.getElementById(tree.key.toString()))
var key = react_1.useState(Date.now().toString())[0];
var _a = react_1.useState(0), initialX = _a[0], setInitialX = _a[1];
var _b = react_1.useState(0), initialY = _b[0], setInitialY = _b[1];
var _c = react_1.useState(0.5), initialZoom = _c[0], setInitialZoom = _c[1];
var _d = react_1.useState(0.1), minZoom = _d[0], setMinZoom = _d[1];
var _e = react_1.useState(1), maxZoom = _e[0], setMaxZoom = _e[1];
var _f = react_1.useState({}), myPanzoom = _f[0], setPanzoom = _f[1];
var _g = react_1.useState(), isPanzoomEnabled = _g[0], setIsPanzoomEnabled = _g[1];
var _h = react_1.useState(hasRightsToEdit && props.enableEditMode), enableEditMode = _h[0], setEnableEditMode = _h[1];
var widgetMenuProps = {
onPanzoomToggle: function (enablePanzoom) { return onPanzoomToggle(enablePanzoom); },
onEditModeToggle: function (enableEditMode) { return onEditModeToggle(enableEditMode); },
enablePanzoom: isPanzoomEnabled,
showPanzoomButton: showPanzoomButton,
showEditModeButton: hasRightsToEdit,
enableEditMode: enableEditMode,
debugMessages: debugMessages
};
var _j = react_1.useState(__assign({ mode: widgetMenuProps.enableEditMode ? 'edit' : 'view' }, tree.props.options)), newOptions = _j[0], setNewOptions = _j[1];
react_1.useEffect(function () {
setNewOptions(__assign({ mode: widgetMenuProps.enableEditMode ? 'edit' : 'view' }, tree.props.options));
}, [widgetMenuProps.enableEditMode, tree.props.options]);
react_1.useEffect(function () {
isEditModeEnabled && isEditModeEnabled(enableEditMode);
}, [enableEditMode]);
react_1.useEffect(function () {
if (isPanzoomEnabled) {
startPanzoom();
}
return function () {
myPanzoom && disposePanzoom();
};
}, []);
react_1.useEffect(function () {
myPanzoom && enablePanzoomCallback();
}, [myPanzoom]);
var enablePanzoomCallback = function () {
if (myPanzoom) {
myPanzoom.panzoom.moveTo &&
myPanzoom.panzoom.moveTo(initialX, // initial x position
initialY // initial y position
// initialZoom // initial zoom
);
}
};
var startPanzoom = function () {
var domNodePanzoom = document.getElementById(treeView.key.toString());
if (!domNodePanzoom) {
throw new Error('Make sure you add props.id to the container of the tree');
}
domNodePanzoom &&
setPanzoom({
panzoom: panzoom_1.default(domNodePanzoom, {
smoothScroll: false,
zoomDoubleClickSpeed: 1,
maxZoom: maxZoom,
minZoom: minZoom,
bounds: {
top: 0,
bottom: 0,
right: 0,
left: 0
}
}),
isPanzoomEnabled: true
});
};
var disposePanzoom = function () {
myPanzoom && myPanzoom.panzoom && setPanzoom(myPanzoom.panzoom.dispose());
};
var onPanzoomToggle = function (enablePanzoom) {
enablePanzoom ? startPanzoom() : disposePanzoom();
};
var onEditModeToggle = function (enableEditMode) {
setEnableEditMode(enableEditMode);
};
var schedioTreeProps = {
cytoGraph: tree.props.cytoGraph,
moveNodeTo: tree.props.moveNodeTo,
NodeContainer: tree.props.NodeContainer,
options: newOptions
};
// add props dynamically
var treeView = React.cloneElement(tree, __assign(__assign({ id: key.toString(), key: key }, schedioTreeProps), { panzoomController: myPanzoom }));
// Debug messages
props.debugMessages &&
console.log("___________________________\n Container Widget\n widgetMenuProps:\n " + JSON.stringify(widgetMenuProps));
return (React.createElement("div", { className: containerWidgetStyles.containerWidget },
React.createElement(widget_menu_1.WidgetMenu, __assign({}, widgetMenuProps)),
topNodeData && (React.createElement(node_container_top_1.NodeContainerTop, { nodeId: topNodeData.id, nodeTitle: topNodeData.nodeKind.text + " - " + topNodeData.title, onNodeSelected: topNodeData.onTopNodeSelected })),
React.createElement("div", { className: containerWidgetStyles.panzoomContainer },
React.createElement("div", { className: containerWidgetStyles.panzoom }, treeView))));
};
exports.ContainerWidget = ContainerWidget;