@nodeject/ui-components
Version:
UI library for non-trivial components
139 lines (138 loc) • 6.24 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
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);
};
/**
* Created by v-grfore on 03/01/2018.
* Wraps the HierarchyChart and the ContainerWidgetMenu components.
*/
import * as React from 'react';
var panzoom = require('panzoom');
import { NodeContainerTop } from '../node-container-top';
import { WidgetMenu } from './widget-menu';
import containerWidgetStyles from './ContainerWidget.module.less';
var ContainerWidget = /** @class */ (function (_super) {
__extends(ContainerWidget, _super);
function ContainerWidget() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.initialX = 0;
_this.initialY = 0;
_this.initialZoom = 0.5;
_this.minZoom = 0.1;
_this.maxZoom = 1;
_this.state = {
key: Date.now(),
initialX: _this.initialX,
initialY: _this.initialY,
initialZoom: _this.props.initialZoom
? _this.props.initialZoom
: _this.initialZoom,
minZoom: _this.props.minZoom ? _this.props.minZoom : _this.minZoom,
maxZoom: _this.props.maxZoom ? _this.props.maxZoom : _this.maxZoom,
panzoom: panzoom,
isPanzoomEnabled: _this.props.enablePanzoom,
enableEditMode: _this.props.hasRightsToEdit && _this.props.enableEditMode
};
_this.resetKey = function () {
var key = Date.now();
_this.setState({ key: key });
};
_this.rerender = function () {
_this.resetKey();
};
_this.enablePanzoomCallback = function () {
_this.state.panzoom.moveTo(_this.state.initialX, // initial x position
_this.state.initialY // initial y position
// this.state.initialZoom // initial zoom
);
};
_this.onPanzoomToggle = function (enablePanzoom) {
enablePanzoom ? _this.enablePanzoom() : _this.disposePanzoom();
};
_this.onEditModeToggle = function (enableEditMode) {
_this.setState({ enableEditMode: enableEditMode });
};
return _this;
}
ContainerWidget.prototype.componentDidMount = function () {
if (this.state.isPanzoomEnabled) {
this.enablePanzoom();
}
};
ContainerWidget.prototype.enablePanzoom = function () {
var _this = this;
this.setState({
panzoom: panzoom(this.refs.panzoom, {
smoothScroll: false,
zoomDoubleClickSpeed: 1,
maxZoom: this.state.maxZoom,
minZoom: this.state.minZoom
}),
isPanzoomEnabled: true
}, function () { return _this.enablePanzoomCallback(); });
this.resetKey();
};
ContainerWidget.prototype.disposePanzoom = function () {
this.setState({ panzoom: this.state.panzoom.dispose() });
};
ContainerWidget.prototype.componentWillUnmount = function () {
if (this.state.isPanzoomEnabled)
this.disposePanzoom();
};
ContainerWidget.prototype.render = function () {
var _this = this;
var widgetMenuProps = {
onPanzoomToggle: function (enablePanzoom) {
return _this.onPanzoomToggle(enablePanzoom);
},
onEditModeToggle: function (enableEditMode) {
return _this.onEditModeToggle(enableEditMode);
},
enablePanzoom: this.state.isPanzoomEnabled,
showPanzoomButton: this.props.showPanzoomButton,
showEditModeButton: this.props.hasRightsToEdit,
enableEditMode: this.state.enableEditMode,
debugMessages: this.props.debugMessages
};
// add props dynamically
var treeView = React.cloneElement(this.props.treeView, {
key: this.state.key,
isEditMode: this.state.enableEditMode,
panzoomController: this.state.panzoom,
rerender: this.rerender
});
// const hierarchyChart = <this.props.hierarchyChart.type {...this.props.hierarchyChart.props} isEditMode={this.state.enableEditMode} />
// Debug messages
this.props.debugMessages &&
console.log("___________________________\n Container Widget\n widgetMenuProps:\n " + JSON.stringify(widgetMenuProps));
return (React.createElement(React.Fragment, null,
React.createElement(WidgetMenu, __assign({}, widgetMenuProps)),
React.createElement("br", null),
React.createElement("br", null),
this.props.topNodeData && (React.createElement(NodeContainerTop, { nodeId: this.props.topNodeData.id, nodeTitle: this.props.topNodeData.nodeKind.text + " - " + this.props.topNodeData.title, onNodeSelected: this.props.topNodeData.onTopNodeSelected })),
React.createElement("div", { className: containerWidgetStyles.panzoomContainer },
React.createElement("div", { className: containerWidgetStyles.panzoom, ref: "panzoom" }, treeView))));
};
return ContainerWidget;
}(React.Component));
export { ContainerWidget };