@nodeject/ui-components
Version:
UI library for non-trivial components
123 lines (122 loc) • 5.76 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);
};
/**
* Wraps the HierarchyChart and the ContainerWidgetMenu components.
*/
import * as React from 'react';
import { useEffect, useState } from 'react';
import pz from 'panzoom';
import { NodeContainerTop } from './node-container-top';
import { WidgetMenu } from './widget-menu';
import * as containerWidgetStyles from './ContainerWidget.module.less';
export 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 = useState(Date.now().toString())[0];
var _a = useState(0), initialX = _a[0], setInitialX = _a[1];
var _b = useState(0), initialY = _b[0], setInitialY = _b[1];
var _c = useState(0.5), initialZoom = _c[0], setInitialZoom = _c[1];
var _d = useState(0.1), minZoom = _d[0], setMinZoom = _d[1];
var _e = useState(1), maxZoom = _e[0], setMaxZoom = _e[1];
var _f = useState({}), myPanzoom = _f[0], setPanzoom = _f[1];
var _g = useState(), isPanzoomEnabled = _g[0], setIsPanzoomEnabled = _g[1];
var _h = 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 = useState(__assign({ mode: widgetMenuProps.enableEditMode ? 'edit' : 'view' }, tree.props.options)), newOptions = _j[0], setNewOptions = _j[1];
useEffect(function () {
setNewOptions(__assign({ mode: widgetMenuProps.enableEditMode ? 'edit' : 'view' }, tree.props.options));
}, [widgetMenuProps.enableEditMode, tree.props.options]);
useEffect(function () {
isEditModeEnabled && isEditModeEnabled(enableEditMode);
}, [enableEditMode]);
useEffect(function () {
if (isPanzoomEnabled) {
startPanzoom();
}
return function () {
myPanzoom && disposePanzoom();
};
}, []);
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: pz(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(WidgetMenu, __assign({}, widgetMenuProps)),
topNodeData && (React.createElement(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))));
};