@projectstorm/react-diagrams-core
Version:
This workspace houses the default models
72 lines • 2.56 kB
JavaScript
import * as React from 'react';
import _forEach from 'lodash/forEach';
import { PeformanceWidget } from '@projectstorm/react-canvas-core';
import styled from '@emotion/styled';
import ResizeObserver from 'resize-observer-polyfill';
var S;
(function (S) {
S.Node = styled.div `
position: absolute;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
user-select: none;
cursor: move;
pointer-events: all;
`;
})(S || (S = {}));
export class NodeWidget extends React.Component {
constructor(props) {
super(props);
this.ref = React.createRef();
}
componentWillUnmount() {
var _a;
this.ob.disconnect();
this.ob = null;
(_a = this.listener) === null || _a === void 0 ? void 0 : _a.deregister();
this.listener = null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (this.listener && this.props.node !== prevProps.node) {
this.listener.deregister();
this.installSelectionListener();
}
}
installSelectionListener() {
this.listener = this.props.node.registerListener({
selectionChanged: (event) => {
this.forceUpdate();
}
});
}
updateSize(width, height) {
this.props.node.updateDimensions({ width, height });
//now mark the links as dirty
try {
_forEach(this.props.node.getPorts(), (port) => {
port.updateCoords(this.props.diagramEngine.getPortCoords(port));
});
}
catch (ex) { }
}
componentDidMount() {
// @ts-ignore
this.ob = new ResizeObserver((entities) => {
const bounds = entities[0].contentRect;
this.updateSize(bounds.width, bounds.height);
});
const b = this.ref.current.getBoundingClientRect();
this.updateSize(b.width, b.height);
this.ob.observe(this.ref.current);
this.installSelectionListener();
}
render() {
return (React.createElement(PeformanceWidget, { model: this.props.node, serialized: this.props.node.serialize() }, () => {
return (React.createElement(S.Node, { className: "node", ref: this.ref, "data-nodeid": this.props.node.getID(), style: {
top: this.props.node.getY(),
left: this.props.node.getX()
} }, this.props.diagramEngine.generateWidgetForNode(this.props.node)));
}));
}
}
//# sourceMappingURL=NodeWidget.js.map