@foblex/flow 12.7.0 → 12.7.1
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/README.md +23 -18
- package/bundles/foblex-flow.umd.js +81 -51
- package/bundles/foblex-flow.umd.js.map +1 -1
- package/esm2015/f-connection/common/f-connection-text/f-connection-text-path.directive.js +2 -2
- package/esm2015/f-draggable/node/connection-base-drag-handler.js +14 -3
- package/esm2015/f-draggable/node/create-move-nodes-drag-model-from-selection/create-move-nodes-drag-model-from-selection.execution.js +8 -4
- package/esm2015/f-draggable/node/create-move-nodes-drag-model-from-selection/create-move-nodes-drag-model-from-selection.request.js +4 -1
- package/esm2015/f-draggable/node/node-move-preparation/node-move-preparation.execution.js +17 -7
- package/esm2015/f-draggable/single-select/single-select.execution.js +4 -1
- package/esm2015/f-zoom/f-zoom-base.js +39 -39
- package/f-draggable/node/connection-base-drag-handler.d.ts +1 -0
- package/f-draggable/node/create-move-nodes-drag-model-from-selection/create-move-nodes-drag-model-from-selection.request.d.ts +3 -0
- package/fesm2015/foblex-flow.js +81 -50
- package/fesm2015/foblex-flow.js.map +1 -1
- package/package.json +1 -1
package/fesm2015/foblex-flow.js
CHANGED
|
@@ -2719,7 +2719,7 @@ class FConnectionTextPathDirective {
|
|
|
2719
2719
|
getSymbolWidth(name) {
|
|
2720
2720
|
const text = name || 'connection';
|
|
2721
2721
|
const { fontFamily, fontSize } = this.getFontStyles(this.hostElement);
|
|
2722
|
-
this.fontSize = fontSize;
|
|
2722
|
+
this.fontSize = fontSize || '12px';
|
|
2723
2723
|
const canvas = this.fBrowser.document.createElement('canvas');
|
|
2724
2724
|
let context;
|
|
2725
2725
|
try {
|
|
@@ -3933,10 +3933,21 @@ class ConnectionBaseDragHandler {
|
|
|
3933
3933
|
this.fInputWithRect = this.fMediator.send(new GetConnectorWithRectRequest(this.getInput()));
|
|
3934
3934
|
}
|
|
3935
3935
|
getOutput() {
|
|
3936
|
-
|
|
3936
|
+
const result = this.fComponentsStore.fOutputs.find((x) => x.id === this.connection.fOutputId);
|
|
3937
|
+
if (!result) {
|
|
3938
|
+
throw new Error(this.connectorNotFoundPrefix(`fOutput with id ${this.connection.fOutputId} not found`));
|
|
3939
|
+
}
|
|
3940
|
+
return result;
|
|
3937
3941
|
}
|
|
3938
3942
|
getInput() {
|
|
3939
|
-
|
|
3943
|
+
const result = this.fComponentsStore.fInputs.find((x) => x.id === this.connection.fInputId);
|
|
3944
|
+
if (!result) {
|
|
3945
|
+
throw new Error(this.connectorNotFoundPrefix(`fInput with id ${this.connection.fInputId} not found`));
|
|
3946
|
+
}
|
|
3947
|
+
return result;
|
|
3948
|
+
}
|
|
3949
|
+
connectorNotFoundPrefix(message) {
|
|
3950
|
+
return `ConnectionDragHandler Error: Connection From (fOutput)${this.connection.fOutputId} To (fInput)${this.connection.fInputId}. ${message}. Please ensure that all f-connections are associated with existing connectors`;
|
|
3940
3951
|
}
|
|
3941
3952
|
getDifference(difference, restrictions) {
|
|
3942
3953
|
return {
|
|
@@ -4172,6 +4183,9 @@ const DEFAULT_RESTRICTIONS = {
|
|
|
4172
4183
|
};
|
|
4173
4184
|
|
|
4174
4185
|
class CreateMoveNodesDragModelFromSelectionRequest {
|
|
4186
|
+
constructor(nodeWithDisabledSelection) {
|
|
4187
|
+
this.nodeWithDisabledSelection = nodeWithDisabledSelection;
|
|
4188
|
+
}
|
|
4175
4189
|
}
|
|
4176
4190
|
|
|
4177
4191
|
class NodeDragHandler {
|
|
@@ -4226,13 +4240,17 @@ let CreateMoveNodesDragModelFromSelectionExecution = class CreateMoveNodesDragMo
|
|
|
4226
4240
|
this.fMediator = fMediator;
|
|
4227
4241
|
}
|
|
4228
4242
|
handle(request) {
|
|
4229
|
-
const itemsToDrag = this.getNodesWithRestrictions(this.getSelectedNodes());
|
|
4243
|
+
const itemsToDrag = this.getNodesWithRestrictions(this.getSelectedNodes(request.nodeWithDisabledSelection));
|
|
4230
4244
|
return this.getDragHandlersWithConnections(this.getDragHandlersFromNodes(itemsToDrag), this.getAllOutputIds(itemsToDrag), this.getAllInputIds(itemsToDrag));
|
|
4231
4245
|
}
|
|
4232
|
-
getSelectedNodes() {
|
|
4233
|
-
|
|
4246
|
+
getSelectedNodes(nodeWithDisabledSelection) {
|
|
4247
|
+
const result = this.fDraggableDataContext.selectedItems
|
|
4234
4248
|
.map((x) => this.fComponentsStore.findNode(x.hostElement))
|
|
4235
4249
|
.filter((x) => !!x);
|
|
4250
|
+
if (nodeWithDisabledSelection) {
|
|
4251
|
+
result.push(nodeWithDisabledSelection);
|
|
4252
|
+
}
|
|
4253
|
+
return result;
|
|
4236
4254
|
}
|
|
4237
4255
|
getNodesWithRestrictions(selectedNodes) {
|
|
4238
4256
|
const result = [];
|
|
@@ -4313,22 +4331,32 @@ let NodeMovePreparationExecution = class NodeMovePreparationExecution {
|
|
|
4313
4331
|
return this.fComponentsStore.fFlow.hostElement;
|
|
4314
4332
|
}
|
|
4315
4333
|
handle(request) {
|
|
4316
|
-
this.
|
|
4317
|
-
|
|
4334
|
+
const node = this.getNode(request.event.targetElement);
|
|
4335
|
+
if (!node) {
|
|
4336
|
+
throw new Error('Node not found');
|
|
4337
|
+
}
|
|
4338
|
+
let itemsToDrag = [];
|
|
4339
|
+
if (!node.fSelectionDisabled) {
|
|
4340
|
+
this.selectAndUpdateNodeLayer(node);
|
|
4341
|
+
itemsToDrag = this.createDragModelFromSelection();
|
|
4342
|
+
}
|
|
4343
|
+
else {
|
|
4344
|
+
itemsToDrag = this.createDragModelFromSelection(node);
|
|
4345
|
+
}
|
|
4318
4346
|
this.initializeLineAlignment(this.filterNodesFromDraggableItems(itemsToDrag));
|
|
4319
4347
|
this.fDraggableDataContext.onPointerDownScale = this.transform.scale;
|
|
4320
4348
|
this.fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
|
|
4321
4349
|
.elementTransform(this.flowHost).div(this.transform.scale);
|
|
4322
4350
|
this.fDraggableDataContext.draggableItems = itemsToDrag;
|
|
4323
4351
|
}
|
|
4324
|
-
selectAndUpdateNodeLayer(
|
|
4325
|
-
this.fMediator.send(new SelectAndUpdateNodeLayerRequest(
|
|
4352
|
+
selectAndUpdateNodeLayer(node) {
|
|
4353
|
+
this.fMediator.send(new SelectAndUpdateNodeLayerRequest(node));
|
|
4326
4354
|
}
|
|
4327
4355
|
getNode(targetElement) {
|
|
4328
4356
|
return this.fComponentsStore.findNode(targetElement);
|
|
4329
4357
|
}
|
|
4330
|
-
createDragModelFromSelection() {
|
|
4331
|
-
return this.fMediator.send(new CreateMoveNodesDragModelFromSelectionRequest());
|
|
4358
|
+
createDragModelFromSelection(nodeWithDisabledSelection) {
|
|
4359
|
+
return this.fMediator.send(new CreateMoveNodesDragModelFromSelectionRequest(nodeWithDisabledSelection));
|
|
4332
4360
|
}
|
|
4333
4361
|
initializeLineAlignment(nodesToDrag) {
|
|
4334
4362
|
var _a;
|
|
@@ -4927,6 +4955,9 @@ let SingleSelectExecution = class SingleSelectExecution {
|
|
|
4927
4955
|
this.clearSelection();
|
|
4928
4956
|
this.selectItem(item);
|
|
4929
4957
|
}
|
|
4958
|
+
else if (item.fSelectionDisabled) {
|
|
4959
|
+
this.clearSelection();
|
|
4960
|
+
}
|
|
4930
4961
|
}
|
|
4931
4962
|
else {
|
|
4932
4963
|
this.clearSelection();
|
|
@@ -7867,6 +7898,40 @@ class FZoomBase {
|
|
|
7867
7898
|
this.fComponentsStore = fComponentsStore;
|
|
7868
7899
|
this.isEnabled = false;
|
|
7869
7900
|
this.listeners = EventExtensions.emptyListener();
|
|
7901
|
+
this.onWheel = (event) => {
|
|
7902
|
+
var _a;
|
|
7903
|
+
event.preventDefault();
|
|
7904
|
+
const targetElement = event.target;
|
|
7905
|
+
if (((_a = this.fComponentsStore.fDraggable) === null || _a === void 0 ? void 0 : _a.isDragStarted) || (targetElement === null || targetElement === void 0 ? void 0 : targetElement.closest('[fLockedContext]'))) {
|
|
7906
|
+
return;
|
|
7907
|
+
}
|
|
7908
|
+
let result = this.getScale();
|
|
7909
|
+
const direction = event.deltaY > 0 ? -1 : 1;
|
|
7910
|
+
const step = this.step;
|
|
7911
|
+
result = result + step * direction;
|
|
7912
|
+
result = Math.max(this.minimum, Math.min(result, this.maximum));
|
|
7913
|
+
const pointerPositionInFlow = new Point(event.clientX, event.clientY).elementTransform(this.flowHost);
|
|
7914
|
+
this.fCanvas.setZoom(result, pointerPositionInFlow);
|
|
7915
|
+
this.fCanvas.redraw();
|
|
7916
|
+
this.fCanvas.emitCanvasChangeEvent();
|
|
7917
|
+
};
|
|
7918
|
+
this.onDoubleClick = (event) => {
|
|
7919
|
+
var _a;
|
|
7920
|
+
event.preventDefault();
|
|
7921
|
+
const targetElement = event.target;
|
|
7922
|
+
if (((_a = this.fComponentsStore.fDraggable) === null || _a === void 0 ? void 0 : _a.isDragStarted) || isNode(targetElement) || (targetElement === null || targetElement === void 0 ? void 0 : targetElement.closest('[fLockedContext]'))) {
|
|
7923
|
+
return;
|
|
7924
|
+
}
|
|
7925
|
+
let result = this.getScale();
|
|
7926
|
+
const direction = 1;
|
|
7927
|
+
const step = this.dblClickStep;
|
|
7928
|
+
result = result + step * direction;
|
|
7929
|
+
result = Math.max(this.minimum, Math.min(result, this.maximum));
|
|
7930
|
+
const pointerPositionInFlow = new Point(event.clientX, event.clientY).elementTransform(this.flowHost);
|
|
7931
|
+
this.fCanvas.setZoom(result, pointerPositionInFlow);
|
|
7932
|
+
this.fCanvas.redrawWithAnimation();
|
|
7933
|
+
this.fCanvas.emitCanvasChangeEvent();
|
|
7934
|
+
};
|
|
7870
7935
|
}
|
|
7871
7936
|
get flowHost() {
|
|
7872
7937
|
return this.fComponentsStore.flowHost;
|
|
@@ -7887,50 +7952,16 @@ class FZoomBase {
|
|
|
7887
7952
|
if (!this.flowHost) {
|
|
7888
7953
|
return;
|
|
7889
7954
|
}
|
|
7890
|
-
this.flowHost.addEventListener('wheel', this.onWheel
|
|
7891
|
-
this.flowHost.addEventListener('dblclick', this.onDoubleClick
|
|
7955
|
+
this.flowHost.addEventListener('wheel', this.onWheel);
|
|
7956
|
+
this.flowHost.addEventListener('dblclick', this.onDoubleClick);
|
|
7892
7957
|
this.listeners = () => {
|
|
7893
|
-
this.flowHost.removeEventListener('wheel', this.onWheel
|
|
7894
|
-
this.flowHost.removeEventListener('dblclick', this.onDoubleClick
|
|
7958
|
+
this.flowHost.removeEventListener('wheel', this.onWheel);
|
|
7959
|
+
this.flowHost.removeEventListener('dblclick', this.onDoubleClick);
|
|
7895
7960
|
};
|
|
7896
7961
|
}
|
|
7897
7962
|
getScale() {
|
|
7898
7963
|
return this.fCanvas.transform.scale || 1;
|
|
7899
7964
|
}
|
|
7900
|
-
onWheel(event) {
|
|
7901
|
-
var _a;
|
|
7902
|
-
event.preventDefault();
|
|
7903
|
-
const targetElement = event.target;
|
|
7904
|
-
if (((_a = this.fComponentsStore.fDraggable) === null || _a === void 0 ? void 0 : _a.isDragStarted) || (targetElement === null || targetElement === void 0 ? void 0 : targetElement.closest('[fLockedContext]'))) {
|
|
7905
|
-
return;
|
|
7906
|
-
}
|
|
7907
|
-
let result = this.getScale();
|
|
7908
|
-
const direction = event.deltaY > 0 ? -1 : 1;
|
|
7909
|
-
const step = this.step;
|
|
7910
|
-
result = result + step * direction;
|
|
7911
|
-
result = Math.max(this.minimum, Math.min(result, this.maximum));
|
|
7912
|
-
const pointerPositionInFlow = new Point(event.clientX, event.clientY).elementTransform(this.flowHost);
|
|
7913
|
-
this.fCanvas.setZoom(result, pointerPositionInFlow);
|
|
7914
|
-
this.fCanvas.redraw();
|
|
7915
|
-
this.fCanvas.emitCanvasChangeEvent();
|
|
7916
|
-
}
|
|
7917
|
-
onDoubleClick(event) {
|
|
7918
|
-
var _a;
|
|
7919
|
-
event.preventDefault();
|
|
7920
|
-
const targetElement = event.target;
|
|
7921
|
-
if (((_a = this.fComponentsStore.fDraggable) === null || _a === void 0 ? void 0 : _a.isDragStarted) || isNode(targetElement) || (targetElement === null || targetElement === void 0 ? void 0 : targetElement.closest('[fLockedContext]'))) {
|
|
7922
|
-
return;
|
|
7923
|
-
}
|
|
7924
|
-
let result = this.getScale();
|
|
7925
|
-
const direction = 1;
|
|
7926
|
-
const step = this.dblClickStep;
|
|
7927
|
-
result = result + step * direction;
|
|
7928
|
-
result = Math.max(this.minimum, Math.min(result, this.maximum));
|
|
7929
|
-
const pointerPositionInFlow = new Point(event.clientX, event.clientY).elementTransform(this.flowHost);
|
|
7930
|
-
this.fCanvas.setZoom(result, pointerPositionInFlow);
|
|
7931
|
-
this.fCanvas.redrawWithAnimation();
|
|
7932
|
-
this.fCanvas.emitCanvasChangeEvent();
|
|
7933
|
-
}
|
|
7934
7965
|
onZoomToCenter(deltaY, position) {
|
|
7935
7966
|
const preventDefault = () => {
|
|
7936
7967
|
};
|