orcasvn-react-diagrams 0.1.73 → 0.1.74
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 +108 -110
- package/dist/esm/index.js +108 -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,27 @@ 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
|
+
//newPortState.hasNormalizedPosition = true;
|
|
8910
|
+
//}
|
|
8912
8911
|
return newPortState;
|
|
8913
8912
|
});
|
|
8913
|
+
portsRef.current = newState;
|
|
8914
8914
|
return newState;
|
|
8915
8915
|
});
|
|
8916
8916
|
}, [normalizePortPosition]);
|
|
8917
|
+
// useLayoutEffect(() => {
|
|
8918
|
+
// if (!hasNormalizedPortPositions.current && elementRef.current) {
|
|
8919
|
+
// handlePortsState(portsRef.current);
|
|
8920
|
+
// hasNormalizedPortPositions.current = true;
|
|
8921
|
+
// }
|
|
8922
|
+
// });
|
|
8917
8923
|
var getParentAbsolutePosition = React.useCallback(function () {
|
|
8918
8924
|
return props.element.parentElement ? getAbsolutePosition(props.element.parentElement) : undefined;
|
|
8919
8925
|
}, [props.element.parentElement]);
|
|
@@ -8992,29 +8998,29 @@ var Element = React.forwardRef(function (props, forwardedRef) {
|
|
|
8992
8998
|
eventListener.off();
|
|
8993
8999
|
};
|
|
8994
9000
|
}, [_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])
|
|
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])
|
|
9018
9024
|
//list to port added
|
|
9019
9025
|
React.useEffect(function () {
|
|
9020
9026
|
var _a, _b;
|
|
@@ -9075,7 +9081,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
|
|
|
9075
9081
|
}, [_paperEventEmitterContext]);
|
|
9076
9082
|
var handleSelectedPort = React.useCallback(function (portId, e) {
|
|
9077
9083
|
e.stopPropagation();
|
|
9078
|
-
logger.debug('Port selected', portId, e);
|
|
9084
|
+
//logger.debug('Port selected', portId, e);
|
|
9079
9085
|
var port = ports.find(function (p) { return p.id === portId; });
|
|
9080
9086
|
if (!port)
|
|
9081
9087
|
return;
|
|
@@ -9123,7 +9129,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
|
|
|
9123
9129
|
var handlePortMouseDown = React.useCallback(function (portId, e) {
|
|
9124
9130
|
e.stopPropagation();
|
|
9125
9131
|
//log debugger
|
|
9126
|
-
logger.debug('Port mouse down', portId, e);
|
|
9132
|
+
//logger.debug('Port mouse down', portId, e);
|
|
9127
9133
|
var port = portsRef.current.find(function (p) { return p.id === portId; });
|
|
9128
9134
|
if (!port)
|
|
9129
9135
|
return;
|
|
@@ -9329,14 +9335,6 @@ var Element = React.forwardRef(function (props, forwardedRef) {
|
|
|
9329
9335
|
// }
|
|
9330
9336
|
// return element;
|
|
9331
9337
|
// }
|
|
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
9338
|
//cache render ports
|
|
9341
9339
|
var renderedPorts = React.useMemo(function () {
|
|
9342
9340
|
return ports === null || ports === void 0 ? void 0 : ports.map(function (p, index) {
|
|
@@ -9361,7 +9359,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
|
|
|
9361
9359
|
});
|
|
9362
9360
|
}, [id, texts, container, elementAbsPosition, handleTextChanged]);
|
|
9363
9361
|
//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);
|
|
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);
|
|
9365
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 :
|
|
9366
9364
|
renderShape(props),
|
|
9367
9365
|
!!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,27 @@ 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
|
+
//newPortState.hasNormalizedPosition = true;
|
|
8906
|
+
//}
|
|
8908
8907
|
return newPortState;
|
|
8909
8908
|
});
|
|
8909
|
+
portsRef.current = newState;
|
|
8910
8910
|
return newState;
|
|
8911
8911
|
});
|
|
8912
8912
|
}, [normalizePortPosition]);
|
|
8913
|
+
// useLayoutEffect(() => {
|
|
8914
|
+
// if (!hasNormalizedPortPositions.current && elementRef.current) {
|
|
8915
|
+
// handlePortsState(portsRef.current);
|
|
8916
|
+
// hasNormalizedPortPositions.current = true;
|
|
8917
|
+
// }
|
|
8918
|
+
// });
|
|
8913
8919
|
var getParentAbsolutePosition = useCallback(function () {
|
|
8914
8920
|
return props.element.parentElement ? getAbsolutePosition(props.element.parentElement) : undefined;
|
|
8915
8921
|
}, [props.element.parentElement]);
|
|
@@ -8988,29 +8994,29 @@ var Element = forwardRef(function (props, forwardedRef) {
|
|
|
8988
8994
|
eventListener.off();
|
|
8989
8995
|
};
|
|
8990
8996
|
}, [_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])
|
|
8997
|
+
// useEffect(() => {
|
|
8998
|
+
// //listen element resize to update position of the ports by element size.
|
|
8999
|
+
// const eleResizeListener = _paperEventEmitterContext.onElementResized(id, () => {
|
|
9000
|
+
// //let isChanged = false;
|
|
9001
|
+
// const newPorts = portsRef.current.map(port => {
|
|
9002
|
+
// const newPosition = normalizePortPosition({ x: port.position.x, y: port.position.y })
|
|
9003
|
+
// //Check port moved
|
|
9004
|
+
// if (port.position.x !== newPosition.x || port.position.y !== newPosition.y) {
|
|
9005
|
+
// //isChanged = true;
|
|
9006
|
+
// _paperEventEmitterContext.emitPortMoved(port, id, port.position, newPosition)
|
|
9007
|
+
// }
|
|
9008
|
+
// port.position = newPosition;
|
|
9009
|
+
// return port;
|
|
9010
|
+
// })
|
|
9011
|
+
// handlePortsState(newPorts);
|
|
9012
|
+
// // if (isChanged) {
|
|
9013
|
+
// // onPortsChanged?.(newPorts, id);
|
|
9014
|
+
// // }
|
|
9015
|
+
// })
|
|
9016
|
+
// return () => {
|
|
9017
|
+
// eleResizeListener.off();
|
|
9018
|
+
// }
|
|
9019
|
+
// }, [_paperEventEmitterContext, id, normalizePortPosition, size, portMoveableAreas, portSlideRailSVGClassName, handlePortsState, props.element.ports])
|
|
9014
9020
|
//list to port added
|
|
9015
9021
|
useEffect(function () {
|
|
9016
9022
|
var _a, _b;
|
|
@@ -9071,7 +9077,7 @@ var Element = forwardRef(function (props, forwardedRef) {
|
|
|
9071
9077
|
}, [_paperEventEmitterContext]);
|
|
9072
9078
|
var handleSelectedPort = useCallback(function (portId, e) {
|
|
9073
9079
|
e.stopPropagation();
|
|
9074
|
-
logger.debug('Port selected', portId, e);
|
|
9080
|
+
//logger.debug('Port selected', portId, e);
|
|
9075
9081
|
var port = ports.find(function (p) { return p.id === portId; });
|
|
9076
9082
|
if (!port)
|
|
9077
9083
|
return;
|
|
@@ -9119,7 +9125,7 @@ var Element = forwardRef(function (props, forwardedRef) {
|
|
|
9119
9125
|
var handlePortMouseDown = useCallback(function (portId, e) {
|
|
9120
9126
|
e.stopPropagation();
|
|
9121
9127
|
//log debugger
|
|
9122
|
-
logger.debug('Port mouse down', portId, e);
|
|
9128
|
+
//logger.debug('Port mouse down', portId, e);
|
|
9123
9129
|
var port = portsRef.current.find(function (p) { return p.id === portId; });
|
|
9124
9130
|
if (!port)
|
|
9125
9131
|
return;
|
|
@@ -9325,14 +9331,6 @@ var Element = forwardRef(function (props, forwardedRef) {
|
|
|
9325
9331
|
// }
|
|
9326
9332
|
// return element;
|
|
9327
9333
|
// }
|
|
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
9334
|
//cache render ports
|
|
9337
9335
|
var renderedPorts = useMemo(function () {
|
|
9338
9336
|
return ports === null || ports === void 0 ? void 0 : ports.map(function (p, index) {
|
|
@@ -9357,7 +9355,7 @@ var Element = forwardRef(function (props, forwardedRef) {
|
|
|
9357
9355
|
});
|
|
9358
9356
|
}, [id, texts, container, elementAbsPosition, handleTextChanged]);
|
|
9359
9357
|
//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);
|
|
9358
|
+
//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
9359
|
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
9360
|
renderShape(props),
|
|
9363
9361
|
!!container && !!beingSelected &&
|