orcasvn-react-diagrams 0.1.73 → 0.1.76
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 +112 -110
- package/dist/esm/index.js +112 -110
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -1351,65 +1351,6 @@ var PORT_PLACEHOLDER_DEFAULT_STROKE = 'green';
|
|
|
1351
1351
|
var PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH = 20;
|
|
1352
1352
|
var PORT_DEFAULT_SIZE = 20;
|
|
1353
1353
|
|
|
1354
|
-
var Logger = /** @class */ (function () {
|
|
1355
|
-
function Logger() {
|
|
1356
|
-
this.level = 'info';
|
|
1357
|
-
this.customLogger = null;
|
|
1358
|
-
}
|
|
1359
|
-
Logger.prototype.setLevel = function (level) {
|
|
1360
|
-
this.level = level;
|
|
1361
|
-
};
|
|
1362
|
-
Logger.prototype.setCustomLogger = function (logger) {
|
|
1363
|
-
this.customLogger = logger;
|
|
1364
|
-
};
|
|
1365
|
-
Logger.prototype.log = function (level, message) {
|
|
1366
|
-
var _a;
|
|
1367
|
-
var optionalParams = [];
|
|
1368
|
-
for (var _i = 2; _i < arguments.length; _i++) {
|
|
1369
|
-
optionalParams[_i - 2] = arguments[_i];
|
|
1370
|
-
}
|
|
1371
|
-
var levels = ['error', 'warn', 'info', 'debug'];
|
|
1372
|
-
if (this.level && levels.indexOf(level) <= levels.indexOf(this.level)) {
|
|
1373
|
-
if (this.customLogger) {
|
|
1374
|
-
this.customLogger.apply(this, __spreadArray([level, message], optionalParams, false));
|
|
1375
|
-
}
|
|
1376
|
-
else {
|
|
1377
|
-
console[level] ? (_a = console)[level].apply(_a, __spreadArray([message], optionalParams, false)) : console.log.apply(console, __spreadArray([message], optionalParams, false));
|
|
1378
|
-
}
|
|
1379
|
-
}
|
|
1380
|
-
};
|
|
1381
|
-
Logger.prototype.error = function (msg) {
|
|
1382
|
-
var optionalParams = [];
|
|
1383
|
-
for (var _i = 1; _i < arguments.length; _i++) {
|
|
1384
|
-
optionalParams[_i - 1] = arguments[_i];
|
|
1385
|
-
}
|
|
1386
|
-
this.log.apply(this, __spreadArray(['error', msg], optionalParams, false));
|
|
1387
|
-
};
|
|
1388
|
-
Logger.prototype.warn = function (msg) {
|
|
1389
|
-
var optionalParams = [];
|
|
1390
|
-
for (var _i = 1; _i < arguments.length; _i++) {
|
|
1391
|
-
optionalParams[_i - 1] = arguments[_i];
|
|
1392
|
-
}
|
|
1393
|
-
this.log.apply(this, __spreadArray(['warn', msg], optionalParams, false));
|
|
1394
|
-
};
|
|
1395
|
-
Logger.prototype.info = function (msg) {
|
|
1396
|
-
var optionalParams = [];
|
|
1397
|
-
for (var _i = 1; _i < arguments.length; _i++) {
|
|
1398
|
-
optionalParams[_i - 1] = arguments[_i];
|
|
1399
|
-
}
|
|
1400
|
-
this.log.apply(this, __spreadArray(['info', msg], optionalParams, false));
|
|
1401
|
-
};
|
|
1402
|
-
Logger.prototype.debug = function (msg) {
|
|
1403
|
-
var optionalParams = [];
|
|
1404
|
-
for (var _i = 1; _i < arguments.length; _i++) {
|
|
1405
|
-
optionalParams[_i - 1] = arguments[_i];
|
|
1406
|
-
}
|
|
1407
|
-
this.log.apply(this, __spreadArray(['debug', msg], optionalParams, false));
|
|
1408
|
-
};
|
|
1409
|
-
return Logger;
|
|
1410
|
-
}());
|
|
1411
|
-
var logger = new Logger();
|
|
1412
|
-
|
|
1413
1354
|
/**
|
|
1414
1355
|
* Created by Alex Bol on 2/18/2017.
|
|
1415
1356
|
*/
|
|
@@ -7211,6 +7152,65 @@ var getElementRotationInfo = function (element) {
|
|
|
7211
7152
|
return rotationAngle;
|
|
7212
7153
|
};
|
|
7213
7154
|
|
|
7155
|
+
var Logger = /** @class */ (function () {
|
|
7156
|
+
function Logger() {
|
|
7157
|
+
this.level = 'info';
|
|
7158
|
+
this.customLogger = null;
|
|
7159
|
+
}
|
|
7160
|
+
Logger.prototype.setLevel = function (level) {
|
|
7161
|
+
this.level = level;
|
|
7162
|
+
};
|
|
7163
|
+
Logger.prototype.setCustomLogger = function (logger) {
|
|
7164
|
+
this.customLogger = logger;
|
|
7165
|
+
};
|
|
7166
|
+
Logger.prototype.log = function (level, message) {
|
|
7167
|
+
var _a;
|
|
7168
|
+
var optionalParams = [];
|
|
7169
|
+
for (var _i = 2; _i < arguments.length; _i++) {
|
|
7170
|
+
optionalParams[_i - 2] = arguments[_i];
|
|
7171
|
+
}
|
|
7172
|
+
var levels = ['error', 'warn', 'info', 'debug'];
|
|
7173
|
+
if (this.level && levels.indexOf(level) <= levels.indexOf(this.level)) {
|
|
7174
|
+
if (this.customLogger) {
|
|
7175
|
+
this.customLogger.apply(this, __spreadArray([level, message], optionalParams, false));
|
|
7176
|
+
}
|
|
7177
|
+
else {
|
|
7178
|
+
console[level] ? (_a = console)[level].apply(_a, __spreadArray([message], optionalParams, false)) : console.log.apply(console, __spreadArray([message], optionalParams, false));
|
|
7179
|
+
}
|
|
7180
|
+
}
|
|
7181
|
+
};
|
|
7182
|
+
Logger.prototype.error = function (msg) {
|
|
7183
|
+
var optionalParams = [];
|
|
7184
|
+
for (var _i = 1; _i < arguments.length; _i++) {
|
|
7185
|
+
optionalParams[_i - 1] = arguments[_i];
|
|
7186
|
+
}
|
|
7187
|
+
this.log.apply(this, __spreadArray(['error', msg], optionalParams, false));
|
|
7188
|
+
};
|
|
7189
|
+
Logger.prototype.warn = function (msg) {
|
|
7190
|
+
var optionalParams = [];
|
|
7191
|
+
for (var _i = 1; _i < arguments.length; _i++) {
|
|
7192
|
+
optionalParams[_i - 1] = arguments[_i];
|
|
7193
|
+
}
|
|
7194
|
+
this.log.apply(this, __spreadArray(['warn', msg], optionalParams, false));
|
|
7195
|
+
};
|
|
7196
|
+
Logger.prototype.info = function (msg) {
|
|
7197
|
+
var optionalParams = [];
|
|
7198
|
+
for (var _i = 1; _i < arguments.length; _i++) {
|
|
7199
|
+
optionalParams[_i - 1] = arguments[_i];
|
|
7200
|
+
}
|
|
7201
|
+
this.log.apply(this, __spreadArray(['info', msg], optionalParams, false));
|
|
7202
|
+
};
|
|
7203
|
+
Logger.prototype.debug = function (msg) {
|
|
7204
|
+
var optionalParams = [];
|
|
7205
|
+
for (var _i = 1; _i < arguments.length; _i++) {
|
|
7206
|
+
optionalParams[_i - 1] = arguments[_i];
|
|
7207
|
+
}
|
|
7208
|
+
this.log.apply(this, __spreadArray(['debug', msg], optionalParams, false));
|
|
7209
|
+
};
|
|
7210
|
+
return Logger;
|
|
7211
|
+
}());
|
|
7212
|
+
var logger = new Logger();
|
|
7213
|
+
|
|
7214
7214
|
/**
|
|
7215
7215
|
* Check if position 1 is within the radius r of position 2
|
|
7216
7216
|
* @returns boolean
|
|
@@ -7870,14 +7870,14 @@ var SelectionFrame = function (props) {
|
|
|
7870
7870
|
}
|
|
7871
7871
|
};
|
|
7872
7872
|
React.useEffect(function () {
|
|
7873
|
-
logger.debug('SelectionFrame: circleHandleMouseDown triggered', {
|
|
7874
|
-
|
|
7875
|
-
|
|
7876
|
-
|
|
7877
|
-
|
|
7878
|
-
|
|
7879
|
-
|
|
7880
|
-
});
|
|
7873
|
+
// logger.debug('SelectionFrame: circleHandleMouseDown triggered', {
|
|
7874
|
+
// draggingCircle,
|
|
7875
|
+
// startX,
|
|
7876
|
+
// startY,
|
|
7877
|
+
// width,
|
|
7878
|
+
// height,
|
|
7879
|
+
// propMovingRate
|
|
7880
|
+
// });
|
|
7881
7881
|
var circleHandleMouseMove = function (event) {
|
|
7882
7882
|
var mouseEvent = event;
|
|
7883
7883
|
if (draggingCircle) {
|
|
@@ -7925,12 +7925,12 @@ var SelectionFrame = function (props) {
|
|
|
7925
7925
|
container.addEventListener('mousemove', circleHandleMouseMove);
|
|
7926
7926
|
container.addEventListener('mouseup', circleHandleMouseUp);
|
|
7927
7927
|
//logging the start of the circle handle mouse move
|
|
7928
|
-
logger.debug('SelectionFrame: circleHandleMouseMove started', container);
|
|
7928
|
+
//logger.debug('SelectionFrame: circleHandleMouseMove started', container);
|
|
7929
7929
|
return function () {
|
|
7930
7930
|
container.removeEventListener('mousemove', circleHandleMouseMove);
|
|
7931
7931
|
container.removeEventListener('mouseup', circleHandleMouseUp);
|
|
7932
7932
|
//logging the end of the circle handle mouse move
|
|
7933
|
-
logger.debug('SelectionFrame: circleHandleMouseMove ended', container);
|
|
7933
|
+
//logger.debug('SelectionFrame: circleHandleMouseMove ended', container);
|
|
7934
7934
|
};
|
|
7935
7935
|
}, [draggingCircle, width, height, objectX, objectY, lastMoveTime, propContainer, getMousePosition, propMovingRate, propOnResize, propResizability, startX, startY]);
|
|
7936
7936
|
var rectangleSize = Math.max(width, height);
|
|
@@ -8860,7 +8860,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
|
|
|
8860
8860
|
var _paperEventEmitterContext = React.useContext(paperEventEmitterContext);
|
|
8861
8861
|
// const elementObj = props.element;
|
|
8862
8862
|
var beingSelected = props.beingSelected, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, onMouseUp = props.onMouseUp, onMouseDown = props.onMouseDown, onMouseLeave = props.onMouseLeave, onMouseMove = props.onMouseMove, onMoving = props.onMoving, onMoved = props.onMoved, onResized = props.onResized, onPortMoved = props.onPortMoved, onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onClick = props.onClick, onContextMenu = props.onContextMenu, onPortContextMenu = props.onPortContextMenu, onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onManuallyTriggerRenderPort = props.onManuallyTriggerRenderPort, draggingByDefault = props.draggingByDefault, parentDOM = props.parentDOM;
|
|
8863
|
-
var _a = props.element, id = _a.id, cssClass = _a.cssClass
|
|
8863
|
+
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;
|
|
8864
8864
|
var propPorts = props.element.ports;
|
|
8865
8865
|
//state for position
|
|
8866
8866
|
var _b = React.useState(__assign({}, props.element.position)), position = _b[0], setPosition = _b[1];
|
|
@@ -8884,10 +8884,6 @@ var Element = React.forwardRef(function (props, forwardedRef) {
|
|
|
8884
8884
|
var newPosition = correctPortPositionInElement(tempNewPosition, size.width, size.height, portMoveableAreas, portSlideRailSVGClassName, elementRef.current || undefined);
|
|
8885
8885
|
return newPosition || tempNewPosition;
|
|
8886
8886
|
}, [size.width, size.height, portMoveableAreas, portSlideRailSVGClassName]);
|
|
8887
|
-
//set port ref when ports state is changed
|
|
8888
|
-
React.useLayoutEffect(function () {
|
|
8889
|
-
portsRef.current = ports;
|
|
8890
|
-
}, [ports]);
|
|
8891
8887
|
//Handle ports state when propPorts is changed
|
|
8892
8888
|
var handlePortsState = React.useCallback(function (newPorts) {
|
|
8893
8889
|
setPorts(function (prev) {
|
|
@@ -8903,17 +8899,31 @@ var Element = React.forwardRef(function (props, forwardedRef) {
|
|
|
8903
8899
|
}
|
|
8904
8900
|
//Handle the case new port is created and the ref of the port is not defined
|
|
8905
8901
|
if (!newPortState.ref) {
|
|
8906
|
-
var newPosition = normalizePortPosition(newPortState.position);
|
|
8907
8902
|
// onPortMoved?.(p, id, newPortState.position, newPosition)
|
|
8908
8903
|
// _paperEventEmitterContext.emitPortMoved(p, id, newPortState.position, newPosition)
|
|
8909
|
-
newPortState.position = newPosition;
|
|
8910
8904
|
newPortState.ref = React.createRef();
|
|
8911
8905
|
}
|
|
8906
|
+
//if (!newPortState.hasNormalizedPosition && elementRef.current) {
|
|
8907
|
+
var newPosition = normalizePortPosition(newPortState.position);
|
|
8908
|
+
newPortState.position = newPosition;
|
|
8909
|
+
if (!checkSamePosition(newPortState.position, newPosition, 0)) {
|
|
8910
|
+
onPortMoved === null || onPortMoved === void 0 ? void 0 : onPortMoved(p, id, newPortState.position, newPosition);
|
|
8911
|
+
_paperEventEmitterContext.emitPortMoved(p, id, newPortState.position, newPosition);
|
|
8912
|
+
}
|
|
8913
|
+
//newPortState.hasNormalizedPosition = true;
|
|
8914
|
+
//}
|
|
8912
8915
|
return newPortState;
|
|
8913
8916
|
});
|
|
8917
|
+
portsRef.current = newState;
|
|
8914
8918
|
return newState;
|
|
8915
8919
|
});
|
|
8916
8920
|
}, [normalizePortPosition]);
|
|
8921
|
+
// useLayoutEffect(() => {
|
|
8922
|
+
// if (!hasNormalizedPortPositions.current && elementRef.current) {
|
|
8923
|
+
// handlePortsState(portsRef.current);
|
|
8924
|
+
// hasNormalizedPortPositions.current = true;
|
|
8925
|
+
// }
|
|
8926
|
+
// });
|
|
8917
8927
|
var getParentAbsolutePosition = React.useCallback(function () {
|
|
8918
8928
|
return props.element.parentElement ? getAbsolutePosition(props.element.parentElement) : undefined;
|
|
8919
8929
|
}, [props.element.parentElement]);
|
|
@@ -8992,29 +9002,29 @@ var Element = React.forwardRef(function (props, forwardedRef) {
|
|
|
8992
9002
|
eventListener.off();
|
|
8993
9003
|
};
|
|
8994
9004
|
}, [_paperEventEmitterContext]);
|
|
8995
|
-
|
|
8996
|
-
|
|
8997
|
-
|
|
8998
|
-
|
|
8999
|
-
|
|
9000
|
-
|
|
9001
|
-
|
|
9002
|
-
|
|
9003
|
-
|
|
9004
|
-
|
|
9005
|
-
|
|
9006
|
-
|
|
9007
|
-
|
|
9008
|
-
|
|
9009
|
-
|
|
9010
|
-
|
|
9011
|
-
|
|
9012
|
-
|
|
9013
|
-
|
|
9014
|
-
|
|
9015
|
-
|
|
9016
|
-
|
|
9017
|
-
}, [_paperEventEmitterContext, id, normalizePortPosition, size, portMoveableAreas, portSlideRailSVGClassName, handlePortsState, props.element.ports])
|
|
9005
|
+
// useEffect(() => {
|
|
9006
|
+
// //listen element resize to update position of the ports by element size.
|
|
9007
|
+
// const eleResizeListener = _paperEventEmitterContext.onElementResized(id, () => {
|
|
9008
|
+
// //let isChanged = false;
|
|
9009
|
+
// const newPorts = portsRef.current.map(port => {
|
|
9010
|
+
// const newPosition = normalizePortPosition({ x: port.position.x, y: port.position.y })
|
|
9011
|
+
// //Check port moved
|
|
9012
|
+
// if (port.position.x !== newPosition.x || port.position.y !== newPosition.y) {
|
|
9013
|
+
// //isChanged = true;
|
|
9014
|
+
// _paperEventEmitterContext.emitPortMoved(port, id, port.position, newPosition)
|
|
9015
|
+
// }
|
|
9016
|
+
// port.position = newPosition;
|
|
9017
|
+
// return port;
|
|
9018
|
+
// })
|
|
9019
|
+
// handlePortsState(newPorts);
|
|
9020
|
+
// // if (isChanged) {
|
|
9021
|
+
// // onPortsChanged?.(newPorts, id);
|
|
9022
|
+
// // }
|
|
9023
|
+
// })
|
|
9024
|
+
// return () => {
|
|
9025
|
+
// eleResizeListener.off();
|
|
9026
|
+
// }
|
|
9027
|
+
// }, [_paperEventEmitterContext, id, normalizePortPosition, size, portMoveableAreas, portSlideRailSVGClassName, handlePortsState, props.element.ports])
|
|
9018
9028
|
//list to port added
|
|
9019
9029
|
React.useEffect(function () {
|
|
9020
9030
|
var _a, _b;
|
|
@@ -9075,7 +9085,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
|
|
|
9075
9085
|
}, [_paperEventEmitterContext]);
|
|
9076
9086
|
var handleSelectedPort = React.useCallback(function (portId, e) {
|
|
9077
9087
|
e.stopPropagation();
|
|
9078
|
-
logger.debug('Port selected', portId, e);
|
|
9088
|
+
//logger.debug('Port selected', portId, e);
|
|
9079
9089
|
var port = ports.find(function (p) { return p.id === portId; });
|
|
9080
9090
|
if (!port)
|
|
9081
9091
|
return;
|
|
@@ -9123,7 +9133,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
|
|
|
9123
9133
|
var handlePortMouseDown = React.useCallback(function (portId, e) {
|
|
9124
9134
|
e.stopPropagation();
|
|
9125
9135
|
//log debugger
|
|
9126
|
-
logger.debug('Port mouse down', portId, e);
|
|
9136
|
+
//logger.debug('Port mouse down', portId, e);
|
|
9127
9137
|
var port = portsRef.current.find(function (p) { return p.id === portId; });
|
|
9128
9138
|
if (!port)
|
|
9129
9139
|
return;
|
|
@@ -9329,14 +9339,6 @@ var Element = React.forwardRef(function (props, forwardedRef) {
|
|
|
9329
9339
|
// }
|
|
9330
9340
|
// return element;
|
|
9331
9341
|
// }
|
|
9332
|
-
//Re-render port again after rendered to automation rotate port
|
|
9333
|
-
//Because elementRef.current equals null in first render so automation rotate port is incorrect.
|
|
9334
|
-
//TODO: check if this is still needed -> Still needed
|
|
9335
|
-
// useLayoutEffect(() => {
|
|
9336
|
-
// if (elementRef.current) {
|
|
9337
|
-
// handlePortsState(portsRef.current);
|
|
9338
|
-
// }
|
|
9339
|
-
// }, [handlePortsState])
|
|
9340
9342
|
//cache render ports
|
|
9341
9343
|
var renderedPorts = React.useMemo(function () {
|
|
9342
9344
|
return ports === null || ports === void 0 ? void 0 : ports.map(function (p, index) {
|
|
@@ -9361,7 +9363,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
|
|
|
9361
9363
|
});
|
|
9362
9364
|
}, [id, texts, container, elementAbsPosition, handleTextChanged]);
|
|
9363
9365
|
//log element render
|
|
9364
|
-
logger.debug('Rendering Element', id, position.x, position.y, size.width, size.height, cssClass, portPlaceholderShape, children, container, getParentAbsolutePosition(), textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName, texts, ports, portSlideRailSVGClassName, portMoveableAreas, portDirection, defaultPortSize);
|
|
9366
|
+
//logger.debug('Rendering Element', id, position.x, position.y, size.width, size.height, cssClass, portPlaceholderShape, children, container, getParentAbsolutePosition(), textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName, texts, ports, portSlideRailSVGClassName, portMoveableAreas, portDirection, defaultPortSize);
|
|
9365
9367
|
return (React.createElement(ElementWrapper, { key: "ElementWrapper", ref: elementRef, x: position.x, y: position.y, cssClass: cssClass, onClick: function (e) { return onClick ? onClick(id, e, elementRef.current) : true; }, onMouseMove: handleElementMouseMove, onMouseLeave: handleElementMouseLeave, onMouseDown: handleElementMouseDown, onMouseUp: handleElementMouseUp, onContextMenu: function (e) { return onContextMenu ? onContextMenu(id, e, elementRef.current) : true; } }, renderShape === null || renderShape === void 0 ? void 0 :
|
|
9366
9368
|
renderShape(props),
|
|
9367
9369
|
!!container && !!beingSelected &&
|
package/dist/esm/index.js
CHANGED
|
@@ -1347,65 +1347,6 @@ var PORT_PLACEHOLDER_DEFAULT_STROKE = 'green';
|
|
|
1347
1347
|
var PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH = 20;
|
|
1348
1348
|
var PORT_DEFAULT_SIZE = 20;
|
|
1349
1349
|
|
|
1350
|
-
var Logger = /** @class */ (function () {
|
|
1351
|
-
function Logger() {
|
|
1352
|
-
this.level = 'info';
|
|
1353
|
-
this.customLogger = null;
|
|
1354
|
-
}
|
|
1355
|
-
Logger.prototype.setLevel = function (level) {
|
|
1356
|
-
this.level = level;
|
|
1357
|
-
};
|
|
1358
|
-
Logger.prototype.setCustomLogger = function (logger) {
|
|
1359
|
-
this.customLogger = logger;
|
|
1360
|
-
};
|
|
1361
|
-
Logger.prototype.log = function (level, message) {
|
|
1362
|
-
var _a;
|
|
1363
|
-
var optionalParams = [];
|
|
1364
|
-
for (var _i = 2; _i < arguments.length; _i++) {
|
|
1365
|
-
optionalParams[_i - 2] = arguments[_i];
|
|
1366
|
-
}
|
|
1367
|
-
var levels = ['error', 'warn', 'info', 'debug'];
|
|
1368
|
-
if (this.level && levels.indexOf(level) <= levels.indexOf(this.level)) {
|
|
1369
|
-
if (this.customLogger) {
|
|
1370
|
-
this.customLogger.apply(this, __spreadArray([level, message], optionalParams, false));
|
|
1371
|
-
}
|
|
1372
|
-
else {
|
|
1373
|
-
console[level] ? (_a = console)[level].apply(_a, __spreadArray([message], optionalParams, false)) : console.log.apply(console, __spreadArray([message], optionalParams, false));
|
|
1374
|
-
}
|
|
1375
|
-
}
|
|
1376
|
-
};
|
|
1377
|
-
Logger.prototype.error = function (msg) {
|
|
1378
|
-
var optionalParams = [];
|
|
1379
|
-
for (var _i = 1; _i < arguments.length; _i++) {
|
|
1380
|
-
optionalParams[_i - 1] = arguments[_i];
|
|
1381
|
-
}
|
|
1382
|
-
this.log.apply(this, __spreadArray(['error', msg], optionalParams, false));
|
|
1383
|
-
};
|
|
1384
|
-
Logger.prototype.warn = function (msg) {
|
|
1385
|
-
var optionalParams = [];
|
|
1386
|
-
for (var _i = 1; _i < arguments.length; _i++) {
|
|
1387
|
-
optionalParams[_i - 1] = arguments[_i];
|
|
1388
|
-
}
|
|
1389
|
-
this.log.apply(this, __spreadArray(['warn', msg], optionalParams, false));
|
|
1390
|
-
};
|
|
1391
|
-
Logger.prototype.info = function (msg) {
|
|
1392
|
-
var optionalParams = [];
|
|
1393
|
-
for (var _i = 1; _i < arguments.length; _i++) {
|
|
1394
|
-
optionalParams[_i - 1] = arguments[_i];
|
|
1395
|
-
}
|
|
1396
|
-
this.log.apply(this, __spreadArray(['info', msg], optionalParams, false));
|
|
1397
|
-
};
|
|
1398
|
-
Logger.prototype.debug = function (msg) {
|
|
1399
|
-
var optionalParams = [];
|
|
1400
|
-
for (var _i = 1; _i < arguments.length; _i++) {
|
|
1401
|
-
optionalParams[_i - 1] = arguments[_i];
|
|
1402
|
-
}
|
|
1403
|
-
this.log.apply(this, __spreadArray(['debug', msg], optionalParams, false));
|
|
1404
|
-
};
|
|
1405
|
-
return Logger;
|
|
1406
|
-
}());
|
|
1407
|
-
var logger = new Logger();
|
|
1408
|
-
|
|
1409
1350
|
/**
|
|
1410
1351
|
* Created by Alex Bol on 2/18/2017.
|
|
1411
1352
|
*/
|
|
@@ -7207,6 +7148,65 @@ var getElementRotationInfo = function (element) {
|
|
|
7207
7148
|
return rotationAngle;
|
|
7208
7149
|
};
|
|
7209
7150
|
|
|
7151
|
+
var Logger = /** @class */ (function () {
|
|
7152
|
+
function Logger() {
|
|
7153
|
+
this.level = 'info';
|
|
7154
|
+
this.customLogger = null;
|
|
7155
|
+
}
|
|
7156
|
+
Logger.prototype.setLevel = function (level) {
|
|
7157
|
+
this.level = level;
|
|
7158
|
+
};
|
|
7159
|
+
Logger.prototype.setCustomLogger = function (logger) {
|
|
7160
|
+
this.customLogger = logger;
|
|
7161
|
+
};
|
|
7162
|
+
Logger.prototype.log = function (level, message) {
|
|
7163
|
+
var _a;
|
|
7164
|
+
var optionalParams = [];
|
|
7165
|
+
for (var _i = 2; _i < arguments.length; _i++) {
|
|
7166
|
+
optionalParams[_i - 2] = arguments[_i];
|
|
7167
|
+
}
|
|
7168
|
+
var levels = ['error', 'warn', 'info', 'debug'];
|
|
7169
|
+
if (this.level && levels.indexOf(level) <= levels.indexOf(this.level)) {
|
|
7170
|
+
if (this.customLogger) {
|
|
7171
|
+
this.customLogger.apply(this, __spreadArray([level, message], optionalParams, false));
|
|
7172
|
+
}
|
|
7173
|
+
else {
|
|
7174
|
+
console[level] ? (_a = console)[level].apply(_a, __spreadArray([message], optionalParams, false)) : console.log.apply(console, __spreadArray([message], optionalParams, false));
|
|
7175
|
+
}
|
|
7176
|
+
}
|
|
7177
|
+
};
|
|
7178
|
+
Logger.prototype.error = function (msg) {
|
|
7179
|
+
var optionalParams = [];
|
|
7180
|
+
for (var _i = 1; _i < arguments.length; _i++) {
|
|
7181
|
+
optionalParams[_i - 1] = arguments[_i];
|
|
7182
|
+
}
|
|
7183
|
+
this.log.apply(this, __spreadArray(['error', msg], optionalParams, false));
|
|
7184
|
+
};
|
|
7185
|
+
Logger.prototype.warn = function (msg) {
|
|
7186
|
+
var optionalParams = [];
|
|
7187
|
+
for (var _i = 1; _i < arguments.length; _i++) {
|
|
7188
|
+
optionalParams[_i - 1] = arguments[_i];
|
|
7189
|
+
}
|
|
7190
|
+
this.log.apply(this, __spreadArray(['warn', msg], optionalParams, false));
|
|
7191
|
+
};
|
|
7192
|
+
Logger.prototype.info = function (msg) {
|
|
7193
|
+
var optionalParams = [];
|
|
7194
|
+
for (var _i = 1; _i < arguments.length; _i++) {
|
|
7195
|
+
optionalParams[_i - 1] = arguments[_i];
|
|
7196
|
+
}
|
|
7197
|
+
this.log.apply(this, __spreadArray(['info', msg], optionalParams, false));
|
|
7198
|
+
};
|
|
7199
|
+
Logger.prototype.debug = function (msg) {
|
|
7200
|
+
var optionalParams = [];
|
|
7201
|
+
for (var _i = 1; _i < arguments.length; _i++) {
|
|
7202
|
+
optionalParams[_i - 1] = arguments[_i];
|
|
7203
|
+
}
|
|
7204
|
+
this.log.apply(this, __spreadArray(['debug', msg], optionalParams, false));
|
|
7205
|
+
};
|
|
7206
|
+
return Logger;
|
|
7207
|
+
}());
|
|
7208
|
+
var logger = new Logger();
|
|
7209
|
+
|
|
7210
7210
|
/**
|
|
7211
7211
|
* Check if position 1 is within the radius r of position 2
|
|
7212
7212
|
* @returns boolean
|
|
@@ -7866,14 +7866,14 @@ var SelectionFrame = function (props) {
|
|
|
7866
7866
|
}
|
|
7867
7867
|
};
|
|
7868
7868
|
useEffect(function () {
|
|
7869
|
-
logger.debug('SelectionFrame: circleHandleMouseDown triggered', {
|
|
7870
|
-
|
|
7871
|
-
|
|
7872
|
-
|
|
7873
|
-
|
|
7874
|
-
|
|
7875
|
-
|
|
7876
|
-
});
|
|
7869
|
+
// logger.debug('SelectionFrame: circleHandleMouseDown triggered', {
|
|
7870
|
+
// draggingCircle,
|
|
7871
|
+
// startX,
|
|
7872
|
+
// startY,
|
|
7873
|
+
// width,
|
|
7874
|
+
// height,
|
|
7875
|
+
// propMovingRate
|
|
7876
|
+
// });
|
|
7877
7877
|
var circleHandleMouseMove = function (event) {
|
|
7878
7878
|
var mouseEvent = event;
|
|
7879
7879
|
if (draggingCircle) {
|
|
@@ -7921,12 +7921,12 @@ var SelectionFrame = function (props) {
|
|
|
7921
7921
|
container.addEventListener('mousemove', circleHandleMouseMove);
|
|
7922
7922
|
container.addEventListener('mouseup', circleHandleMouseUp);
|
|
7923
7923
|
//logging the start of the circle handle mouse move
|
|
7924
|
-
logger.debug('SelectionFrame: circleHandleMouseMove started', container);
|
|
7924
|
+
//logger.debug('SelectionFrame: circleHandleMouseMove started', container);
|
|
7925
7925
|
return function () {
|
|
7926
7926
|
container.removeEventListener('mousemove', circleHandleMouseMove);
|
|
7927
7927
|
container.removeEventListener('mouseup', circleHandleMouseUp);
|
|
7928
7928
|
//logging the end of the circle handle mouse move
|
|
7929
|
-
logger.debug('SelectionFrame: circleHandleMouseMove ended', container);
|
|
7929
|
+
//logger.debug('SelectionFrame: circleHandleMouseMove ended', container);
|
|
7930
7930
|
};
|
|
7931
7931
|
}, [draggingCircle, width, height, objectX, objectY, lastMoveTime, propContainer, getMousePosition, propMovingRate, propOnResize, propResizability, startX, startY]);
|
|
7932
7932
|
var rectangleSize = Math.max(width, height);
|
|
@@ -8856,7 +8856,7 @@ var Element = forwardRef(function (props, forwardedRef) {
|
|
|
8856
8856
|
var _paperEventEmitterContext = useContext(paperEventEmitterContext);
|
|
8857
8857
|
// const elementObj = props.element;
|
|
8858
8858
|
var beingSelected = props.beingSelected, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, onMouseUp = props.onMouseUp, onMouseDown = props.onMouseDown, onMouseLeave = props.onMouseLeave, onMouseMove = props.onMouseMove, onMoving = props.onMoving, onMoved = props.onMoved, onResized = props.onResized, onPortMoved = props.onPortMoved, onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onClick = props.onClick, onContextMenu = props.onContextMenu, onPortContextMenu = props.onPortContextMenu, onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onManuallyTriggerRenderPort = props.onManuallyTriggerRenderPort, draggingByDefault = props.draggingByDefault, parentDOM = props.parentDOM;
|
|
8859
|
-
var _a = props.element, id = _a.id, cssClass = _a.cssClass
|
|
8859
|
+
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;
|
|
8860
8860
|
var propPorts = props.element.ports;
|
|
8861
8861
|
//state for position
|
|
8862
8862
|
var _b = useState(__assign({}, props.element.position)), position = _b[0], setPosition = _b[1];
|
|
@@ -8880,10 +8880,6 @@ var Element = forwardRef(function (props, forwardedRef) {
|
|
|
8880
8880
|
var newPosition = correctPortPositionInElement(tempNewPosition, size.width, size.height, portMoveableAreas, portSlideRailSVGClassName, elementRef.current || undefined);
|
|
8881
8881
|
return newPosition || tempNewPosition;
|
|
8882
8882
|
}, [size.width, size.height, portMoveableAreas, portSlideRailSVGClassName]);
|
|
8883
|
-
//set port ref when ports state is changed
|
|
8884
|
-
useLayoutEffect(function () {
|
|
8885
|
-
portsRef.current = ports;
|
|
8886
|
-
}, [ports]);
|
|
8887
8883
|
//Handle ports state when propPorts is changed
|
|
8888
8884
|
var handlePortsState = useCallback(function (newPorts) {
|
|
8889
8885
|
setPorts(function (prev) {
|
|
@@ -8899,17 +8895,31 @@ var Element = forwardRef(function (props, forwardedRef) {
|
|
|
8899
8895
|
}
|
|
8900
8896
|
//Handle the case new port is created and the ref of the port is not defined
|
|
8901
8897
|
if (!newPortState.ref) {
|
|
8902
|
-
var newPosition = normalizePortPosition(newPortState.position);
|
|
8903
8898
|
// onPortMoved?.(p, id, newPortState.position, newPosition)
|
|
8904
8899
|
// _paperEventEmitterContext.emitPortMoved(p, id, newPortState.position, newPosition)
|
|
8905
|
-
newPortState.position = newPosition;
|
|
8906
8900
|
newPortState.ref = React.createRef();
|
|
8907
8901
|
}
|
|
8902
|
+
//if (!newPortState.hasNormalizedPosition && elementRef.current) {
|
|
8903
|
+
var newPosition = normalizePortPosition(newPortState.position);
|
|
8904
|
+
newPortState.position = newPosition;
|
|
8905
|
+
if (!checkSamePosition(newPortState.position, newPosition, 0)) {
|
|
8906
|
+
onPortMoved === null || onPortMoved === void 0 ? void 0 : onPortMoved(p, id, newPortState.position, newPosition);
|
|
8907
|
+
_paperEventEmitterContext.emitPortMoved(p, id, newPortState.position, newPosition);
|
|
8908
|
+
}
|
|
8909
|
+
//newPortState.hasNormalizedPosition = true;
|
|
8910
|
+
//}
|
|
8908
8911
|
return newPortState;
|
|
8909
8912
|
});
|
|
8913
|
+
portsRef.current = newState;
|
|
8910
8914
|
return newState;
|
|
8911
8915
|
});
|
|
8912
8916
|
}, [normalizePortPosition]);
|
|
8917
|
+
// useLayoutEffect(() => {
|
|
8918
|
+
// if (!hasNormalizedPortPositions.current && elementRef.current) {
|
|
8919
|
+
// handlePortsState(portsRef.current);
|
|
8920
|
+
// hasNormalizedPortPositions.current = true;
|
|
8921
|
+
// }
|
|
8922
|
+
// });
|
|
8913
8923
|
var getParentAbsolutePosition = useCallback(function () {
|
|
8914
8924
|
return props.element.parentElement ? getAbsolutePosition(props.element.parentElement) : undefined;
|
|
8915
8925
|
}, [props.element.parentElement]);
|
|
@@ -8988,29 +8998,29 @@ var Element = forwardRef(function (props, forwardedRef) {
|
|
|
8988
8998
|
eventListener.off();
|
|
8989
8999
|
};
|
|
8990
9000
|
}, [_paperEventEmitterContext]);
|
|
8991
|
-
useEffect(
|
|
8992
|
-
|
|
8993
|
-
|
|
8994
|
-
|
|
8995
|
-
|
|
8996
|
-
|
|
8997
|
-
|
|
8998
|
-
|
|
8999
|
-
|
|
9000
|
-
|
|
9001
|
-
|
|
9002
|
-
|
|
9003
|
-
|
|
9004
|
-
|
|
9005
|
-
|
|
9006
|
-
|
|
9007
|
-
|
|
9008
|
-
|
|
9009
|
-
|
|
9010
|
-
|
|
9011
|
-
|
|
9012
|
-
|
|
9013
|
-
}, [_paperEventEmitterContext, id, normalizePortPosition, size, portMoveableAreas, portSlideRailSVGClassName, handlePortsState, props.element.ports])
|
|
9001
|
+
// useEffect(() => {
|
|
9002
|
+
// //listen element resize to update position of the ports by element size.
|
|
9003
|
+
// const eleResizeListener = _paperEventEmitterContext.onElementResized(id, () => {
|
|
9004
|
+
// //let isChanged = false;
|
|
9005
|
+
// const newPorts = portsRef.current.map(port => {
|
|
9006
|
+
// const newPosition = normalizePortPosition({ x: port.position.x, y: port.position.y })
|
|
9007
|
+
// //Check port moved
|
|
9008
|
+
// if (port.position.x !== newPosition.x || port.position.y !== newPosition.y) {
|
|
9009
|
+
// //isChanged = true;
|
|
9010
|
+
// _paperEventEmitterContext.emitPortMoved(port, id, port.position, newPosition)
|
|
9011
|
+
// }
|
|
9012
|
+
// port.position = newPosition;
|
|
9013
|
+
// return port;
|
|
9014
|
+
// })
|
|
9015
|
+
// handlePortsState(newPorts);
|
|
9016
|
+
// // if (isChanged) {
|
|
9017
|
+
// // onPortsChanged?.(newPorts, id);
|
|
9018
|
+
// // }
|
|
9019
|
+
// })
|
|
9020
|
+
// return () => {
|
|
9021
|
+
// eleResizeListener.off();
|
|
9022
|
+
// }
|
|
9023
|
+
// }, [_paperEventEmitterContext, id, normalizePortPosition, size, portMoveableAreas, portSlideRailSVGClassName, handlePortsState, props.element.ports])
|
|
9014
9024
|
//list to port added
|
|
9015
9025
|
useEffect(function () {
|
|
9016
9026
|
var _a, _b;
|
|
@@ -9071,7 +9081,7 @@ var Element = forwardRef(function (props, forwardedRef) {
|
|
|
9071
9081
|
}, [_paperEventEmitterContext]);
|
|
9072
9082
|
var handleSelectedPort = useCallback(function (portId, e) {
|
|
9073
9083
|
e.stopPropagation();
|
|
9074
|
-
logger.debug('Port selected', portId, e);
|
|
9084
|
+
//logger.debug('Port selected', portId, e);
|
|
9075
9085
|
var port = ports.find(function (p) { return p.id === portId; });
|
|
9076
9086
|
if (!port)
|
|
9077
9087
|
return;
|
|
@@ -9119,7 +9129,7 @@ var Element = forwardRef(function (props, forwardedRef) {
|
|
|
9119
9129
|
var handlePortMouseDown = useCallback(function (portId, e) {
|
|
9120
9130
|
e.stopPropagation();
|
|
9121
9131
|
//log debugger
|
|
9122
|
-
logger.debug('Port mouse down', portId, e);
|
|
9132
|
+
//logger.debug('Port mouse down', portId, e);
|
|
9123
9133
|
var port = portsRef.current.find(function (p) { return p.id === portId; });
|
|
9124
9134
|
if (!port)
|
|
9125
9135
|
return;
|
|
@@ -9325,14 +9335,6 @@ var Element = forwardRef(function (props, forwardedRef) {
|
|
|
9325
9335
|
// }
|
|
9326
9336
|
// return element;
|
|
9327
9337
|
// }
|
|
9328
|
-
//Re-render port again after rendered to automation rotate port
|
|
9329
|
-
//Because elementRef.current equals null in first render so automation rotate port is incorrect.
|
|
9330
|
-
//TODO: check if this is still needed -> Still needed
|
|
9331
|
-
// useLayoutEffect(() => {
|
|
9332
|
-
// if (elementRef.current) {
|
|
9333
|
-
// handlePortsState(portsRef.current);
|
|
9334
|
-
// }
|
|
9335
|
-
// }, [handlePortsState])
|
|
9336
9338
|
//cache render ports
|
|
9337
9339
|
var renderedPorts = useMemo(function () {
|
|
9338
9340
|
return ports === null || ports === void 0 ? void 0 : ports.map(function (p, index) {
|
|
@@ -9357,7 +9359,7 @@ var Element = forwardRef(function (props, forwardedRef) {
|
|
|
9357
9359
|
});
|
|
9358
9360
|
}, [id, texts, container, elementAbsPosition, handleTextChanged]);
|
|
9359
9361
|
//log element render
|
|
9360
|
-
logger.debug('Rendering Element', id, position.x, position.y, size.width, size.height, cssClass, portPlaceholderShape, children, container, getParentAbsolutePosition(), textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName, texts, ports, portSlideRailSVGClassName, portMoveableAreas, portDirection, defaultPortSize);
|
|
9362
|
+
//logger.debug('Rendering Element', id, position.x, position.y, size.width, size.height, cssClass, portPlaceholderShape, children, container, getParentAbsolutePosition(), textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName, texts, ports, portSlideRailSVGClassName, portMoveableAreas, portDirection, defaultPortSize);
|
|
9361
9363
|
return (React.createElement(ElementWrapper, { key: "ElementWrapper", ref: elementRef, x: position.x, y: position.y, cssClass: cssClass, onClick: function (e) { return onClick ? onClick(id, e, elementRef.current) : true; }, onMouseMove: handleElementMouseMove, onMouseLeave: handleElementMouseLeave, onMouseDown: handleElementMouseDown, onMouseUp: handleElementMouseUp, onContextMenu: function (e) { return onContextMenu ? onContextMenu(id, e, elementRef.current) : true; } }, renderShape === null || renderShape === void 0 ? void 0 :
|
|
9362
9364
|
renderShape(props),
|
|
9363
9365
|
!!container && !!beingSelected &&
|