orcasvn-react-diagrams 0.1.80 → 0.1.81
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +14 -5
- package/dist/esm/index.js +14 -5
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -8863,6 +8863,14 @@ var ElementWrapper = React.forwardRef(function (_a, ref) {
|
|
|
8863
8863
|
return (React.createElement("svg", { className: cssClass, x: x, y: y, onClick: handleClick, onContextMenu: handleClick, onMouseDown: onMouseDown, ref: ref, style: { overflow: "visible" }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp }, children));
|
|
8864
8864
|
});
|
|
8865
8865
|
|
|
8866
|
+
var transformPositionToAnchoredPosition = function (position, elementSize, anchor) {
|
|
8867
|
+
var anchoredPosition = { x: position.x, y: position.y };
|
|
8868
|
+
if (anchor === exports.PositioningAnchor.Center) {
|
|
8869
|
+
anchoredPosition.x = position.x - elementSize.width / 2;
|
|
8870
|
+
anchoredPosition.y = position.y - elementSize.height / 2;
|
|
8871
|
+
}
|
|
8872
|
+
return anchoredPosition;
|
|
8873
|
+
};
|
|
8866
8874
|
var Element = React.forwardRef(function (props, forwardedRef) {
|
|
8867
8875
|
var _paperEventEmitterContext = React.useContext(paperEventEmitterContext);
|
|
8868
8876
|
// const elementObj = props.element;
|
|
@@ -8870,7 +8878,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
|
|
|
8870
8878
|
var _a = props.element, id = _a.id, cssClass = _a.cssClass; _a.textsPlaceHolderClassName; var portSlideRailSVGClassName = _a.portSlideRailSVGClassName, portMoveableAreas = _a.portMoveableAreas, portDirection = _a.portDirection, defaultPortSize = _a.defaultPortSize; _a.textsPlaceHolderFlexStyle; _a.textsPlaceHolderFlexboxPosition; var resizability = _a.resizability, renderShape = _a.renderShape;
|
|
8871
8879
|
var propPorts = props.element.ports;
|
|
8872
8880
|
//state for position
|
|
8873
|
-
var _b = React.useState(__assign({}, props.element.position)), position = _b[0], setPosition = _b[1];
|
|
8881
|
+
var _b = React.useState(__assign({}, transformPositionToAnchoredPosition(props.element.position, props.element.size, props.element.positionAnchor || exports.PositioningAnchor.TopLeft))), position = _b[0], setPosition = _b[1];
|
|
8874
8882
|
//state for size
|
|
8875
8883
|
var _c = React.useState(__assign({}, props.element.size)), size = _c[0], setSize = _c[1];
|
|
8876
8884
|
var _d = React.useState(), selectedPort = _d[0], setSelectedPort = _d[1];
|
|
@@ -8924,7 +8932,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
|
|
|
8924
8932
|
portsRef.current = newState;
|
|
8925
8933
|
return newState;
|
|
8926
8934
|
});
|
|
8927
|
-
}, [normalizePortPosition]);
|
|
8935
|
+
}, [normalizePortPosition, onPortMoved, id, _paperEventEmitterContext]);
|
|
8928
8936
|
// useLayoutEffect(() => {
|
|
8929
8937
|
// if (!hasNormalizedPortPositions.current && elementRef.current) {
|
|
8930
8938
|
// handlePortsState(portsRef.current);
|
|
@@ -8949,9 +8957,10 @@ var Element = React.forwardRef(function (props, forwardedRef) {
|
|
|
8949
8957
|
var elementAbsPosition = React.useMemo(function () { return getElementAbsPosition(); }, [getElementAbsPosition]);
|
|
8950
8958
|
//update element position
|
|
8951
8959
|
var updateElementPosition = React.useCallback(function (newPosition) {
|
|
8952
|
-
|
|
8960
|
+
var newPositionAdjusted = transformPositionToAnchoredPosition(newPosition, { width: size.width, height: size.height }, props.element.positionAnchor || exports.PositioningAnchor.TopLeft);
|
|
8961
|
+
setPosition(newPositionAdjusted);
|
|
8953
8962
|
props.element.position = { x: newPosition.x, y: newPosition.y };
|
|
8954
|
-
}, [props.element]);
|
|
8963
|
+
}, [props.element, size.width, size.height]);
|
|
8955
8964
|
//update element size
|
|
8956
8965
|
var updateElementSize = React.useCallback(function (newSize) {
|
|
8957
8966
|
setSize({ width: newSize.width, height: newSize.height });
|
|
@@ -10518,7 +10527,7 @@ var Paper = function (props) {
|
|
|
10518
10527
|
return (React.createElement("g", { id: "group-of-element-".concat(element.id), key: element.id },
|
|
10519
10528
|
React.createElement(ReactElement, { key: "element-".concat(element.id, "-").concat(element.version), element: element,
|
|
10520
10529
|
//id={element.id}
|
|
10521
|
-
|
|
10530
|
+
ref: function (refDOM) { return element.DOM = refDOM; },
|
|
10522
10531
|
//height={element.size.height}
|
|
10523
10532
|
//width={element.size.width}
|
|
10524
10533
|
//x={element.positionAnchor === PositioningAnchor.Center ? element.position.x - element.size.width / 2 : element.position.x}
|
package/dist/esm/index.js
CHANGED
|
@@ -8859,6 +8859,14 @@ var ElementWrapper = forwardRef(function (_a, ref) {
|
|
|
8859
8859
|
return (React.createElement("svg", { className: cssClass, x: x, y: y, onClick: handleClick, onContextMenu: handleClick, onMouseDown: onMouseDown, ref: ref, style: { overflow: "visible" }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp }, children));
|
|
8860
8860
|
});
|
|
8861
8861
|
|
|
8862
|
+
var transformPositionToAnchoredPosition = function (position, elementSize, anchor) {
|
|
8863
|
+
var anchoredPosition = { x: position.x, y: position.y };
|
|
8864
|
+
if (anchor === PositioningAnchor.Center) {
|
|
8865
|
+
anchoredPosition.x = position.x - elementSize.width / 2;
|
|
8866
|
+
anchoredPosition.y = position.y - elementSize.height / 2;
|
|
8867
|
+
}
|
|
8868
|
+
return anchoredPosition;
|
|
8869
|
+
};
|
|
8862
8870
|
var Element = forwardRef(function (props, forwardedRef) {
|
|
8863
8871
|
var _paperEventEmitterContext = useContext(paperEventEmitterContext);
|
|
8864
8872
|
// const elementObj = props.element;
|
|
@@ -8866,7 +8874,7 @@ var Element = forwardRef(function (props, forwardedRef) {
|
|
|
8866
8874
|
var _a = props.element, id = _a.id, cssClass = _a.cssClass; _a.textsPlaceHolderClassName; var portSlideRailSVGClassName = _a.portSlideRailSVGClassName, portMoveableAreas = _a.portMoveableAreas, portDirection = _a.portDirection, defaultPortSize = _a.defaultPortSize; _a.textsPlaceHolderFlexStyle; _a.textsPlaceHolderFlexboxPosition; var resizability = _a.resizability, renderShape = _a.renderShape;
|
|
8867
8875
|
var propPorts = props.element.ports;
|
|
8868
8876
|
//state for position
|
|
8869
|
-
var _b = useState(__assign({}, props.element.position)), position = _b[0], setPosition = _b[1];
|
|
8877
|
+
var _b = useState(__assign({}, transformPositionToAnchoredPosition(props.element.position, props.element.size, props.element.positionAnchor || PositioningAnchor.TopLeft))), position = _b[0], setPosition = _b[1];
|
|
8870
8878
|
//state for size
|
|
8871
8879
|
var _c = useState(__assign({}, props.element.size)), size = _c[0], setSize = _c[1];
|
|
8872
8880
|
var _d = useState(), selectedPort = _d[0], setSelectedPort = _d[1];
|
|
@@ -8920,7 +8928,7 @@ var Element = forwardRef(function (props, forwardedRef) {
|
|
|
8920
8928
|
portsRef.current = newState;
|
|
8921
8929
|
return newState;
|
|
8922
8930
|
});
|
|
8923
|
-
}, [normalizePortPosition]);
|
|
8931
|
+
}, [normalizePortPosition, onPortMoved, id, _paperEventEmitterContext]);
|
|
8924
8932
|
// useLayoutEffect(() => {
|
|
8925
8933
|
// if (!hasNormalizedPortPositions.current && elementRef.current) {
|
|
8926
8934
|
// handlePortsState(portsRef.current);
|
|
@@ -8945,9 +8953,10 @@ var Element = forwardRef(function (props, forwardedRef) {
|
|
|
8945
8953
|
var elementAbsPosition = useMemo(function () { return getElementAbsPosition(); }, [getElementAbsPosition]);
|
|
8946
8954
|
//update element position
|
|
8947
8955
|
var updateElementPosition = useCallback(function (newPosition) {
|
|
8948
|
-
|
|
8956
|
+
var newPositionAdjusted = transformPositionToAnchoredPosition(newPosition, { width: size.width, height: size.height }, props.element.positionAnchor || PositioningAnchor.TopLeft);
|
|
8957
|
+
setPosition(newPositionAdjusted);
|
|
8949
8958
|
props.element.position = { x: newPosition.x, y: newPosition.y };
|
|
8950
|
-
}, [props.element]);
|
|
8959
|
+
}, [props.element, size.width, size.height]);
|
|
8951
8960
|
//update element size
|
|
8952
8961
|
var updateElementSize = useCallback(function (newSize) {
|
|
8953
8962
|
setSize({ width: newSize.width, height: newSize.height });
|
|
@@ -10514,7 +10523,7 @@ var Paper = function (props) {
|
|
|
10514
10523
|
return (React.createElement("g", { id: "group-of-element-".concat(element.id), key: element.id },
|
|
10515
10524
|
React.createElement(ReactElement, { key: "element-".concat(element.id, "-").concat(element.version), element: element,
|
|
10516
10525
|
//id={element.id}
|
|
10517
|
-
|
|
10526
|
+
ref: function (refDOM) { return element.DOM = refDOM; },
|
|
10518
10527
|
//height={element.size.height}
|
|
10519
10528
|
//width={element.size.width}
|
|
10520
10529
|
//x={element.positionAnchor === PositioningAnchor.Center ? element.position.x - element.size.width / 2 : element.position.x}
|