basicprimitivesreact
Version:
Data visualization diagramming components library for dependencies visualization and analysis that implements organizational chart, family chart, inheritance, dependency trees, and business ownership diagrams provides a reach feature set for automatic lay
810 lines (807 loc) • 37.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _basicprimitives = require("basicprimitives");
var _Graphics = _interopRequireDefault(require("./Graphics"));
var _Templates = require("./Templates");
require("resize-observer-polyfill/dist/ResizeObserver.global");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _readOnlyError(r) { throw new TypeError('"' + r + '" is read-only'); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } // The following code is ResizeObserver Polyfill
// It is added to the rendered page to track size changes of control placeholder
// npm install resize-observer-polyfill --save-dev
var BaseDiagram = /*#__PURE__*/function (_Component) {
function BaseDiagram(props, TaskManagerFactory, EventArgs) {
var _this;
_classCallCheck(this, BaseDiagram);
_this = _callSuper(this, BaseDiagram, [props]);
_this.TaskManagerFactory = TaskManagerFactory;
_this.EventArgs = EventArgs;
var config = props.config,
centerOnCursor = props.centerOnCursor;
var highlightItem = config.highlightItem,
cursorItem = config.cursorItem,
selectedItems = config.selectedItems;
_this.state = {
config: config,
viewportSize: {
width: 0,
height: 0
},
contentPosition: {
x: 0,
y: 0
},
centerOnCursor: centerOnCursor,
highlightItem: highlightItem,
cursorItem: cursorItem,
selectedItems: (selectedItems || []).slice()
};
var viewportSize = _this.state.viewportSize;
_this.onRefreshViewport = _this.onRefreshViewport.bind(_this);
_this.onSizeChanged = _this.onSizeChanged.bind(_this);
_this.onScroll = _this.onScroll.bind(_this);
_this.onMouseMove = _this.onMouseMove.bind(_this);
_this.onClick = _this.onClick.bind(_this);
_this.onCheckboxChange = _this.onCheckboxChange.bind(_this);
_this.onKeyDown = _this.onKeyDown.bind(_this);
_this.onFrameClick = _this.onFrameClick.bind(_this);
_this.onFrameMouseMove = _this.onFrameMouseMove.bind(_this);
_this.getOptions = _this.getOptions.bind(_this);
_this.getGraphics = _this.getGraphics.bind(_this);
_this.getLayout = _this.getLayout.bind(_this);
_this.setLayout = _this.setLayout.bind(_this);
_this.getEventArgs = _this.getEventArgs.bind(_this);
_this.centerOnCursor = _this.centerOnCursor.bind(_this);
_this.onItemRender = _this.onItemRender.bind(_this);
_this.onHighlightRender = _this.onHighlightRender.bind(_this);
_this.onCursorRender = _this.onCursorRender.bind(_this);
_this.controlPanelRef = /*#__PURE__*/_react["default"].createRef();
_this.frameMousePanelRef = /*#__PURE__*/_react["default"].createRef();
_this.framePlaceholderRef = /*#__PURE__*/_react["default"].createRef();
_this.titlesMousePanelRef = /*#__PURE__*/_react["default"].createRef();
_this.titlesPlaceholderRef = /*#__PURE__*/_react["default"].createRef();
_this.scrollPanelRef = /*#__PURE__*/_react["default"].createRef();
_this.mousePanelRef = /*#__PURE__*/_react["default"].createRef();
_this.placeholderRef = /*#__PURE__*/_react["default"].createRef();
_this.calloutPlaceholderRef = /*#__PURE__*/_react["default"].createRef();
_this.layoutOptions = {};
_this.templatesHash = {};
_this.graphics = new _Graphics["default"](viewportSize);
_this.templates = {
AnnotationLabelTemplate: _Templates.AnnotationLabelTemplate,
ButtonsTemplate: _Templates.ButtonsTemplate,
CheckBoxTemplate: _Templates.CheckBoxTemplate,
CursorTemplate: _Templates.CursorTemplate,
DotHighlightTemplate: _Templates.DotHighlightTemplate,
GroupTitleTemplate: _Templates.GroupTitleTemplate,
HighlightTemplate: _Templates.HighlightTemplate,
ItemTemplate: _Templates.ItemTemplate,
UserTemplate: _Templates.UserTemplate,
CustomRenderTemplate: _Templates.CustomRenderTemplate,
LabelAnnotationTemplate: _Templates.LabelAnnotationTemplate,
LevelTitleTemplate: _Templates.LevelTitleTemplate,
LevelBackgroundTemplate: _Templates.LevelBackgroundTemplate,
EndPointTemplate: _Templates.EndPointTemplate
};
_this.tasks = TaskManagerFactory(_this.getOptions, _this.getGraphics, _this.getLayout, _this.setLayout, _this.templates);
return _this;
}
_inherits(BaseDiagram, _Component);
return _createClass(BaseDiagram, [{
key: "componentDidMount",
value: function componentDidMount() {
this.observer = new ResizeObserver(this.onSizeChanged);
this.observer.observe(this.controlPanelRef.current);
this.centerOnCursor();
this.fixPixelAlignment();
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
// destroy timer
clearTimeout(this.timer);
this.timer = null;
// destroy observer
this.observer.disconnect();
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
this.centerOnCursor();
}
}, {
key: "centerOnCursor",
value: function centerOnCursor() {
var centerOnCursor = this.state.centerOnCursor;
if (centerOnCursor) {
/* scroll to offset */
var centerOnCursorTask = this.tasks.getTask("CenterOnCursorTask");
var placeholderOffset = centerOnCursorTask.getPlaceholderOffset();
var scrollLeft = placeholderOffset.x,
scrollTop = placeholderOffset.y;
this.scrollPanelRef.current.scrollLeft = scrollLeft;
this.scrollPanelRef.current.scrollTop = scrollTop;
}
}
}, {
key: "fixPixelAlignment",
value: function fixPixelAlignment() {
var current = this.controlPanelRef.current;
var pixelAlignmentFix = (0, _basicprimitives.getFixOfPixelAlignment)(current);
current.style.marginLeft = pixelAlignmentFix.width + "px";
current.style.marginTop = pixelAlignmentFix.height + "px";
}
}, {
key: "onSizeChanged",
value: function onSizeChanged() {
var _getInnerSize = (0, _basicprimitives.getInnerSize)(this.controlPanelRef.current),
width = _getInnerSize.width,
height = _getInnerSize.height;
this.setState({
viewportSize: {
width: width,
height: height
},
centerOnCursor: true
});
}
}, {
key: "onScroll",
value: function onScroll() {
if (this.timer == null) {
this.timer = setTimeout(this.onRefreshViewport, 200);
}
}
}, {
key: "onRefreshViewport",
value: function onRefreshViewport() {
clearTimeout(this.timer);
this.timer = null;
var _this$scrollPanelRef$ = this.scrollPanelRef.current,
scrollTop = _this$scrollPanelRef$.scrollTop,
scrollLeft = _this$scrollPanelRef$.scrollLeft;
this.setState({
contentPosition: {
x: Math.floor(scrollLeft),
y: Math.floor(scrollTop)
},
centerOnCursor: false
});
}
}, {
key: "onFrameMouseMove",
value: function onFrameMouseMove(event) {
var placeholderOffset = (0, _basicprimitives.getElementOffset)(this.frameMousePanelRef.current),
x = event.pageX - placeholderOffset.left,
y = event.pageY - placeholderOffset.top,
projectItemsToFrameTask = this.tasks.getTask("ProjectItemsToFrameTask"),
highlightItemOptionTask = this.tasks.getTask("HighlightItemOptionTask");
if (highlightItemOptionTask.hasHighlightEnabled()) {
var itemId = projectItemsToFrameTask.getTreeItemForMousePosition(x, y, highlightItemOptionTask.getGravityRadius());
this.setHighlightItem(event, itemId);
}
}
}, {
key: "onFrameClick",
value: function onFrameClick(event) {
var placeholderOffset = (0, _basicprimitives.getElementOffset)(this.frameMousePanelRef.current),
x = event.pageX - placeholderOffset.left,
y = event.pageY - placeholderOffset.top,
projectItemsToFrameTask = this.tasks.getTask("ProjectItemsToFrameTask"),
cursorItemOptionTask = this.tasks.getTask("CursorItemOptionTask"),
highlightItemOptionTask = this.tasks.getTask("HighlightItemOptionTask"),
newCursorItemId = projectItemsToFrameTask.getTreeItemForMousePosition(x, y, highlightItemOptionTask.getGravityRadius());
if (newCursorItemId !== null) {
if (cursorItemOptionTask.hasCursorEnabled()) {
this.setCursorItem(event, newCursorItemId);
this.controlPanelRef.current.focus();
}
}
}
}, {
key: "onMouseMove",
value: function onMouseMove(event) {
var placeholderOffset = (0, _basicprimitives.getElementOffset)(this.mousePanelRef.current),
x = event.pageX - placeholderOffset.left,
y = event.pageY - placeholderOffset.top,
createTransformTask = this.tasks.getTask("CreateTransformTask"),
highlightItemOptionTask = this.tasks.getTask("HighlightItemOptionTask");
if (highlightItemOptionTask.hasHighlightEnabled()) {
var itemId = createTransformTask.getTreeItemForMousePosition(x, y, highlightItemOptionTask.getGravityRadius());
this.setHighlightItem(event, itemId);
}
}
}, {
key: "getEventArgs",
value: function getEventArgs(oldTreeItemId, newTreeItemId, name) {
var result = new this.EventArgs(),
combinedContextsTask = this.tasks.getTask("CombinedContextsTask"),
alignDiagramTask = this.tasks.getTask("AlignDiagramTask"),
oldItemConfig = combinedContextsTask.getConfig(oldTreeItemId),
newItemConfig = combinedContextsTask.getConfig(newTreeItemId),
itemPosition,
offset,
panelOffset;
if (oldItemConfig && oldItemConfig.id != null) {
result.oldContext = oldItemConfig;
}
if (newItemConfig && newItemConfig.id != null) {
result.context = newItemConfig;
if (newItemConfig.parent !== null) {
result.parentItem = combinedContextsTask.getConfig(newItemConfig.parent);
}
panelOffset = (0, _basicprimitives.getElementOffset)(this.mousePanelRef.current);
offset = (0, _basicprimitives.getElementOffset)(this.scrollPanelRef.current);
itemPosition = alignDiagramTask.getItemPosition(newTreeItemId);
result.position = new _basicprimitives.Rect(itemPosition.actualPosition).translate(panelOffset.left, panelOffset.top).translate(-offset.left, -offset.top);
}
if (name != null) {
result.name = name;
}
return result;
}
}, {
key: "setHighlightItem",
value: function setHighlightItem(event, newHighlightItemId) {
var eventArgs,
cancel = false;
var _this$props = this.props,
onHighlightChanging = _this$props.onHighlightChanging,
onHighlightChanged = _this$props.onHighlightChanged;
var highlightItem = this.state.highlightItem;
if (newHighlightItemId !== highlightItem) {
eventArgs = this.getEventArgs(highlightItem, newHighlightItemId);
if (onHighlightChanging != null) {
if (!onHighlightChanging(event, eventArgs)) {
cancel = true;
this.setState({
highlightItem: newHighlightItemId
});
}
} else {
this.setState({
highlightItem: newHighlightItemId
});
}
;
if (!cancel) {
if (onHighlightChanged != null) {
onHighlightChanged(event, eventArgs);
}
}
}
}
}, {
key: "setCursorItem",
value: function setCursorItem(event, newCursorItemId) {
var eventArgs,
cancel = false;
var _this$props2 = this.props,
onCursorChanging = _this$props2.onCursorChanging,
onCursorChanged = _this$props2.onCursorChanged;
var cursorItem = this.state.cursorItem;
if (newCursorItemId !== cursorItem) {
eventArgs = this.getEventArgs(cursorItem, newCursorItemId);
if (onCursorChanging != null) {
if (!onCursorChanging(event, eventArgs)) {
cancel = true;
this.setState({
cursorItem: newCursorItemId,
centerOnCursor: true
});
}
} else {
this.setState({
cursorItem: newCursorItemId,
centerOnCursor: true
});
}
if (!cancel) {
if (onCursorChanged != null) {
onCursorChanged(event, eventArgs);
}
}
}
}
}, {
key: "onClick",
value: function onClick(event) {
var placeholderOffset = (0, _basicprimitives.getElementOffset)(this.mousePanelRef.current),
x = event.pageX - placeholderOffset.left,
y = event.pageY - placeholderOffset.top,
createTransformTask = this.tasks.getTask("CreateTransformTask"),
cursorItemOptionTask = this.tasks.getTask("CursorItemOptionTask"),
highlightItemOptionTask = this.tasks.getTask("HighlightItemOptionTask"),
newCursorItemId = createTransformTask.getTreeItemForMousePosition(x, y, highlightItemOptionTask.getGravityRadius()),
target;
target = event.target;
if (newCursorItemId !== null) {
if (target.getAttribute("name") === "checkbox" || target.getAttribute("name") === "selectiontext") {//ignore jslint
} else {
if (cursorItemOptionTask.hasCursorEnabled()) {
this.setCursorItem(event, newCursorItemId);
this.controlPanelRef.current.focus();
}
}
}
}
}, {
key: "onCheckboxChange",
value: function onCheckboxChange(event) {
var _this$props3 = this.props,
onSelectionChanging = _this$props3.onSelectionChanging,
onSelectionChanged = _this$props3.onSelectionChanged;
var selectedItems = this.state.selectedItems;
var newSelectedItems = [];
var target = event.target;
var itemid = target.getAttribute("data-id");
var checked = event.target.checked;
var cancel = false;
if (itemid != null) {
if (checked) {
newSelectedItems = [].concat(_toConsumableArray(selectedItems), [itemid]);
} else {
// eslint-disable-next-line
newSelectedItems = selectedItems.filter(function (id) {
return id != itemid;
}); // User type may not mach string value in data attribute
}
if (onSelectionChanging != null) {
cancel = onSelectionChanging(event, selectedItems, newSelectedItems);
}
if (!cancel) {
this.setState({
selectedItems: newSelectedItems
});
if (onSelectionChanged != null) {
onSelectionChanged(event, selectedItems, newSelectedItems);
}
}
}
}
}, {
key: "onKeyDown",
value: function onKeyDown(event) {
var highlightItemTask = this.tasks.getTask("HighlightItemTask"),
highlightItemOptionTask = this.tasks.getTask("HighlightItemOptionTask"),
cursorItemTask = this.tasks.getTask("CursorItemTask"),
cursorItemOptionTask = this.tasks.getTask("CursorItemOptionTask"),
alignDiagramTask = this.tasks.getTask('AlignDiagramTask'),
createTransformTask = this.tasks.getTask('CreateTransformTask'),
transform = createTransformTask.getTransform(),
navigationItem = null,
newNavigationItem,
direction = null,
accepted;
if (highlightItemOptionTask.hasHighlightEnabled() && cursorItemOptionTask.hasCursorEnabled()) {
navigationItem = highlightItemTask.getHighlightTreeItem();
if (navigationItem === null) {
navigationItem = cursorItemTask.getCursorTreeItem();
}
} else if (highlightItemOptionTask.hasHighlightEnabled()) {
navigationItem = highlightItemTask.getHighlightTreeItem();
} else if (cursorItemOptionTask.hasCursorEnabled()) {
navigationItem = cursorItemTask.getCursorTreeItem();
}
if (navigationItem != null) {
switch (event.which) {
case 13:
/*Enter*/
if (cursorItemOptionTask.hasCursorEnabled()) {
this.setCursorItem(event, navigationItem);
event.preventDefault();
this.controlPanelRef.current.focus();
}
break;
case 40:
/*Down*/
direction = _basicprimitives.OrientationType.Bottom;
break;
case 38:
/*Up*/
direction = _basicprimitives.OrientationType.Top;
break;
case 37:
/*Left*/
direction = _basicprimitives.OrientationType.Left;
break;
case 39:
/*Right*/
direction = _basicprimitives.OrientationType.Right;
break;
default:
break;
}
if (direction != null) {
accepted = false;
while (!accepted) {
accepted = true;
direction = transform.getOrientation(direction);
newNavigationItem = alignDiagramTask.getNextItem(navigationItem, direction);
if (newNavigationItem != null) {
event.preventDefault();
if (highlightItemOptionTask.hasHighlightEnabled()) {
this.setHighlightItem(event, newNavigationItem);
} else if (cursorItemOptionTask.hasCursorEnabled()) {
this.setCursorItem(event, newNavigationItem);
}
}
}
this.controlPanelRef.current.focus();
}
}
}
}, {
key: "onItemRender",
value: function onItemRender(data) {
var templateName = data.templateName;
var template = this.templatesHash[templateName];
return template.onItemRender(data);
}
}, {
key: "onHighlightRender",
value: function onHighlightRender(data) {
var templateName = data.templateName;
var template = this.templatesHash[templateName];
return template.onHighlightRender(data);
}
}, {
key: "onCursorRender",
value: function onCursorRender(data) {
var templateName = data.templateName;
var template = this.templatesHash[templateName];
return template.onCursorRender(data);
}
}, {
key: "getOptions",
value: function getOptions() {
var config = this.props.config;
var templates = config.templates || [];
var effectiveTemplates = templates.map(function (template) {
var onItemRender = template.onItemRender,
onHighlightRender = template.onHighlightRender,
onCursorRender = template.onCursorRender;
return _objectSpread(_objectSpread({}, template), {}, {
itemTemplate: !onItemRender ? null : "<p>This template is not being used in React</p>",
highlightTemplate: !onHighlightRender ? null : "<p>This template is not being used in React</p>",
cursorTemplate: !onCursorRender ? null : "<p>This template is not being used in React</p>"
});
});
this.templatesHash = templates.reduce(function (agg, template) {
var name = template.name;
agg[name] = template;
return agg;
}, {});
var _this$state = this.state,
highlightItem = _this$state.highlightItem,
cursorItem = _this$state.cursorItem,
selectedItems = _this$state.selectedItems;
return _objectSpread(_objectSpread({}, config), {}, {
templates: effectiveTemplates,
highlightItem: highlightItem,
cursorItem: cursorItem,
selectedItems: selectedItems,
onItemRender: this.onItemRender,
onCursorRender: this.onCursorRender,
onHighlightRender: this.onHighlightRender
});
}
}, {
key: "getGraphics",
value: function getGraphics() {
return this.graphics;
}
}, {
key: "getLayout",
value: function getLayout() {
var _this$state2 = this.state,
centerOnCursor = _this$state2.centerOnCursor,
viewportSize = _this$state2.viewportSize,
contentPosition = _this$state2.contentPosition;
return {
forceCenterOnCursor: centerOnCursor,
scrollPanelSize: new _basicprimitives.Size(viewportSize),
placeholderOffset: new _basicprimitives.Point(contentPosition)
};
}
}, {
key: "setLayout",
value: function setLayout(layoutOptions) {
var autoSize = layoutOptions.autoSize,
controlSize = layoutOptions.controlSize,
scale = layoutOptions.scale,
frameMousePanelRect = layoutOptions.frameMousePanelRect,
framePlaceholderSize = layoutOptions.framePlaceholderSize,
titlesMousePanelRect = layoutOptions.titlesMousePanelRect,
titlesPlaceholderSize = layoutOptions.titlesPlaceholderSize,
scrollPanelRect = layoutOptions.scrollPanelRect,
mousePanelSize = layoutOptions.mousePanelSize,
placeholderSize = layoutOptions.placeholderSize;
this.layoutOptions = {
autoSize: autoSize,
controlSize: new _basicprimitives.Size(controlSize),
scale: scale,
frameMousePanelRect: new _basicprimitives.Rect(frameMousePanelRect),
framePlaceholderSize: new _basicprimitives.Size(framePlaceholderSize),
titlesMousePanelRect: new _basicprimitives.Rect(titlesMousePanelRect),
titlesPlaceholderSize: new _basicprimitives.Size(titlesPlaceholderSize),
scrollPanelRect: new _basicprimitives.Rect(scrollPanelRect),
mousePanelSize: new _basicprimitives.Size(mousePanelSize),
placeholderSize: new _basicprimitives.Size(placeholderSize)
};
}
/**
* This method returns item position relative to the control's element.
*
* @returns {Rect} Returns item position
*/
}, {
key: "getItemPosition",
value: function getItemPosition(itemId) {
var combinedContextsTask = this.tasks.getTask("CombinedContextsTask"),
alignDiagramTask = this.tasks.getTask("AlignDiagramTask"),
itemConfig = combinedContextsTask.getConfig(itemId),
itemPosition,
result,
offset,
panelOffset;
if (itemConfig && itemConfig.id != null) {
panelOffset = (0, _basicprimitives.getElementOffset)(this.mousePanelRef.current);
offset = (0, _basicprimitives.getElementOffset)(this.controlPanelRef.current);
itemPosition = alignDiagramTask.getItemPosition(itemId);
result = new _basicprimitives.Rect(itemPosition.actualPosition).translate(panelOffset.left, panelOffset.top).translate(-offset.left, -offset.top);
}
return result;
}
}, {
key: "getComponentOffset",
value: function getComponentOffset() {
return (0, _basicprimitives.getElementOffset)(this.controlPanelRef.current);
}
}, {
key: "render",
value: function render() {
var graphics = this.graphics;
this.tasks.process('OptionsTask', null, false);
var _this$graphics$placeh = this.graphics.placeholders,
placeholder = _this$graphics$placeh.placeholder,
calloutplaceholder = _this$graphics$placeh.calloutplaceholder,
frameplaceholder = _this$graphics$placeh.frameplaceholder,
titlesplaceholder = _this$graphics$placeh.titlesplaceholder;
var placeholderRectCSS = placeholder.rect.getCSS();
var _this$layoutOptions = this.layoutOptions,
autoSize = _this$layoutOptions.autoSize,
controlSize = _this$layoutOptions.controlSize,
scale = _this$layoutOptions.scale,
frameMousePanelRect = _this$layoutOptions.frameMousePanelRect,
titlesMousePanelRect = _this$layoutOptions.titlesMousePanelRect,
scrollPanelRect = _this$layoutOptions.scrollPanelRect,
mousePanelSize = _this$layoutOptions.mousePanelSize;
/* set CSS scale of content */
var scaletext = "scale(" + scale + "," + scale + ")";
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
/* root control panel */
ref: this.controlPanelRef,
onKeyDown: this.onKeyDown,
style: _objectSpread({
position: "relative",
overflow: "hidden",
top: "0px",
left: "0px",
width: "100%",
height: "100%",
padding: "0px",
marginBottom: "0px",
marginRight: "0px"
}, autoSize ? controlSize.getCSS() : {}),
tabIndex: "0"
}, frameplaceholder && /*#__PURE__*/_react["default"].createElement("div", {
ref: this.frameMousePanelRef,
onMouseMove: this.onFrameMouseMove,
onClick: this.onFrameClick,
style: _objectSpread({
position: "absolute",
overflow: "hidden"
}, frameMousePanelRect.getCSS())
}, /*#__PURE__*/_react["default"].createElement("div", {
ref: this.framePlaceholderRef,
style: _objectSpread(_objectSpread({}, frameplaceholder.rect.getCSS()), {}, {
position: "absolute",
overflow: "hidden",
"transformOrigin": "0 0",
"transform": scaletext,
"msTransform": scaletext,
/* IE 9 */
"WebkitTransform": scaletext,
/* Safari and Chrome */
"OTransform": scaletext,
/* Opera */
"MozTransform": scaletext /* Firefox */
})
}, graphics.map(this, "frameplaceholder", function (layerKey, elements) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: layerKey,
style: {
position: "absolute",
overflow: "visible",
left: "0px",
top: "0px"
}
}, elements);
}))), titlesplaceholder && /*#__PURE__*/_react["default"].createElement("div", {
ref: this.titlesMousePanelRef,
onMouseMove: this.onFrameMouseMove,
onClick: this.onFrameClick,
style: _objectSpread({
position: "absolute",
overflow: "hidden"
}, titlesMousePanelRect.getCSS())
}, /*#__PURE__*/_react["default"].createElement("div", {
ref: this.titlesPlaceholderRef,
style: _objectSpread(_objectSpread({}, titlesplaceholder.rect.getCSS()), {}, {
position: "absolute",
overflow: "hidden",
"transformOrigin": "0 0",
"transform": scaletext,
"msTransform": scaletext,
/* IE 9 */
"WebkitTransform": scaletext,
/* Safari and Chrome */
"OTransform": scaletext,
/* Opera */
"MozTransform": scaletext /* Firefox */
})
}, graphics.map(this, "titlesplaceholder", function (layerKey, elements, isMouseTransparent) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: layerKey,
style: _objectSpread({
position: "absolute",
overflow: "visible",
left: "0px",
top: "0px"
}, isMouseTransparent ? {
pointerEvents: "none"
} : {})
}, elements);
}))), /*#__PURE__*/_react["default"].createElement("div", {
ref: this.scrollPanelRef,
onScroll: this.onScroll,
style: _objectSpread(_objectSpread({
position: "absolute",
overflow: "auto",
WebkitOverflowScrolling: "touch"
}, scrollPanelRect.getCSS()), {}, {
border: scrollPanelRect.x > 0 ? "1px dotted #dddddd" : ""
})
}, /*#__PURE__*/_react["default"].createElement("div", {
ref: this.mousePanelRef,
onMouseMove: this.onMouseMove,
onClick: this.onClick,
onChange: this.onCheckboxChange,
style: _objectSpread({
position: "absolute",
overflow: "hidden"
}, mousePanelSize.getCSS())
}, /*#__PURE__*/_react["default"].createElement("div", {
ref: this.placeholderRef,
style: _objectSpread(_objectSpread({}, placeholderRectCSS), {}, {
position: "absolute",
overflow: "hidden",
"transformOrigin": "0 0",
"transform": scaletext,
"msTransform": scaletext,
/* IE 9 */
"WebkitTransform": scaletext,
/* Safari and Chrome */
"OTransform": scaletext,
/* Opera */
"MozTransform": scaletext /* Firefox */
})
}, graphics.map(this, "placeholder", function (layerKey, elements, isMouseTransparent) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: layerKey,
style: _objectSpread({
position: "absolute",
overflow: "visible",
left: "0px",
top: "0px"
}, isMouseTransparent ? {
pointerEvents: "none"
} : {})
}, elements);
}), calloutplaceholder && /*#__PURE__*/_react["default"].createElement("div", {
key: "Callout",
ref: this.calloutPlaceholderRef,
style: {
position: "absolute",
overflow: "visible",
left: calloutplaceholder.rect.x + "px",
top: calloutplaceholder.rect.y + "px",
pointerEvents: "none"
}
}, graphics.map(this, "calloutplaceholder", function (layerKey, elements) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: layerKey,
style: {
position: "absolute",
overflow: "visible",
pointerEvents: "none"
}
}, elements);
})))))));
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(nextProps, state) {
var nextConfig = nextProps.config,
centerOnCursor = nextProps.centerOnCursor;
var config = state.config;
if (config !== nextConfig) {
var highlightItem = nextConfig.highlightItem,
cursorItem = nextConfig.cursorItem,
selectedItems = nextConfig.selectedItems;
return {
config: nextConfig,
highlightItem: highlightItem,
cursorItem: cursorItem,
selectedItems: (selectedItems || []).slice(),
centerOnCursor: centerOnCursor
};
}
return null;
}
}]);
}(_react.Component);
_defineProperty(BaseDiagram, "propTypes", {
centerOnCursor: _propTypes["default"].bool,
// eslint-disable-line react/no-unused-prop-types
onHighlightChanging: _propTypes["default"].func,
// eslint-disable-line react/no-unused-prop-types
onHighlightChanged: _propTypes["default"].func,
// eslint-disable-line react/no-unused-prop-types
onCursorChanging: _propTypes["default"].func,
// eslint-disable-line react/no-unused-prop-types
onCursorChanged: _propTypes["default"].func,
// eslint-disable-line react/no-unused-prop-types
onSelectionChanging: _propTypes["default"].func,
// eslint-disable-line react/no-unused-prop-types
onSelectionChanged: _propTypes["default"].func // eslint-disable-line react/no-unused-prop-types
});
_defineProperty(BaseDiagram, "defaultProps", {
centerOnCursor: true,
onHighlightChanging: null,
onHighlightChanged: null,
onCursorChanging: null,
onCursorChanged: null,
onSelectionChanging: null,
onSelectionChanged: null
});
var _default = exports["default"] = BaseDiagram;