This is an automated email from the ASF dual-hosted git repository.
tiagobento pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-kie-tools.git
The following commit(s) were added to refs/heads/main by this push:
new 64b62d51b12 kie-issues #882: On the DMN Editor, going back to the
diagram after editing a Boxed Expression should render the diagram at the
position it was before entering the BEE. (#2494)
64b62d51b12 is described below
commit 64b62d51b126d88d77ee359d77f573626dc808d9
Author: Daniel José dos Santos <[email protected]>
AuthorDate: Tue Jul 30 16:58:31 2024 -0300
kie-issues #882: On the DMN Editor, going back to the diagram after editing
a Boxed Expression should render the diagram at the position it was before
entering the BEE. (#2494)
Co-authored-by: Thiago Lugli <[email protected]>
Co-authored-by: Tiago Bento <[email protected]>
---
packages/dmn-editor/src/diagram/Diagram.tsx | 40 ++++++++---
packages/dmn-editor/src/store/Store.ts | 10 ++-
.../dmn-editor/tests-e2e/__fixtures__/diagram.ts | 19 ++++++
.../Google-Chrome/fit-to-view-diagram.png | Bin 0 -> 47748 bytes
.../keep-view-settings-after-swap-tabs.png | Bin 0 -> 50131 bytes
.../Google-Chrome/zoom-in-diagram.png | Bin 0 -> 32272 bytes
.../Google-Chrome/zoom-out-diagram.png | Bin 0 -> 37454 bytes
.../chromium/fit-to-view-diagram.png | Bin 0 -> 46110 bytes
.../keep-view-settings-after-swap-tabs.png | Bin 0 -> 61173 bytes
.../__screenshots__/chromium/zoom-in-diagram.png | Bin 0 -> 32270 bytes
.../__screenshots__/chromium/zoom-out-diagram.png | Bin 0 -> 37456 bytes
.../__screenshots__/webkit/fit-to-view-diagram.png | Bin 0 -> 34283 bytes
.../webkit/keep-view-settings-after-swap-tabs.png | Bin 0 -> 62519 bytes
.../__screenshots__/webkit/zoom-in-diagram.png | Bin 0 -> 35755 bytes
.../__screenshots__/webkit/zoom-out-diagram.png | Bin 0 -> 43165 bytes
packages/dmn-editor/tests-e2e/zoomDiagram.spec.ts | 75 +++++++++++++++++++++
16 files changed, 132 insertions(+), 12 deletions(-)
diff --git a/packages/dmn-editor/src/diagram/Diagram.tsx
b/packages/dmn-editor/src/diagram/Diagram.tsx
index 2081dbb94bd..5a132532d71 100644
--- a/packages/dmn-editor/src/diagram/Diagram.tsx
+++ b/packages/dmn-editor/src/diagram/Diagram.tsx
@@ -18,15 +18,15 @@
*/
import * as RF from "reactflow";
+import { useOnViewportChange, Viewport } from "reactflow";
import * as React from "react";
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState }
from "react";
-import { DmnBuiltInDataType, generateUuid } from
"@kie-tools/boxed-expression-component/dist/api";
+import { generateUuid } from "@kie-tools/boxed-expression-component/dist/api";
import {
DC__Bounds,
DC__Dimension,
DMN15__tDecisionService,
DMN15__tDefinitions,
- DMNDI15__DMNDiagram,
} from "@kie-tools/dmn-marshaller/dist/schemas/dmn-1_5/ts-gen/types";
import { buildXmlQName } from "@kie-tools/xml-parser-ts/dist/qNames";
import { Button, ButtonVariant } from
"@patternfly/react-core/dist/js/components/Button";
@@ -62,8 +62,8 @@ import { addEdge } from "../mutations/addEdge";
import { addShape } from "../mutations/addShape";
import { addStandaloneNode } from "../mutations/addStandaloneNode";
import { deleteDecisionFromDecisionService } from
"../mutations/deleteDecisionFromDecisionService";
-import { EdgeDeletionMode, deleteEdge } from "../mutations/deleteEdge";
-import { NodeDeletionMode, deleteNode } from "../mutations/deleteNode";
+import { deleteEdge, EdgeDeletionMode } from "../mutations/deleteEdge";
+import { deleteNode, NodeDeletionMode } from "../mutations/deleteNode";
import { repositionNode } from "../mutations/repositionNode";
import { resizeNode } from "../mutations/resizeNode";
import { updateExpression } from "../mutations/updateExpression";
@@ -72,14 +72,13 @@ import { DiagramLhsPanel, SnapGrid, State } from
"../store/Store";
import { useDmnEditorStore, useDmnEditorStoreApi } from
"../store/StoreContext";
import { Unpacked } from "../tsExt/tsExt";
import { buildXmlHref, parseXmlHref } from "../xml/xmlHrefs";
-import { getXmlNamespaceDeclarationName } from
"../xml/xmlNamespaceDeclarations";
import { DiagramContainerContextProvider } from "./DiagramContainerContext";
import { MIME_TYPE_FOR_DMN_EDITOR_DRG_NODE } from "./DrgNodesPanel";
import { MIME_TYPE_FOR_DMN_EDITOR_NEW_NODE_FROM_PALETTE, Palette } from
"./Palette";
import { offsetShapePosition, snapShapeDimensions, snapShapePosition } from
"./SnapGrid";
import { ConnectionLine } from "./connections/ConnectionLine";
import { PositionalNodeHandleId } from "./connections/PositionalNodeHandles";
-import { EdgeType, NodeType, containment, getDefaultEdgeTypeBetween } from
"./connections/graphStructure";
+import { containment, EdgeType, getDefaultEdgeTypeBetween, NodeType } from
"./connections/graphStructure";
import { checkIsValidConnection } from "./connections/isValidConnection";
import { EdgeMarkers } from "./edges/EdgeMarkers";
import { EDGE_TYPES } from "./edges/EdgeTypes";
@@ -92,8 +91,8 @@ import {
} from "./edges/Edges";
import { buildHierarchy } from "./graph/graph";
import {
- getDmnBoundsCenterPoint,
getContainmentRelationship,
+ getDmnBoundsCenterPoint,
getHandlePosition,
getNodeTypeFromDmnObject,
} from "./maths/DmnMaths";
@@ -115,16 +114,16 @@ import { xmlHrefToQName } from "../xml/xmlHrefToQName";
import {
addAutoGeneratedDecisionServiceToDrd,
addConflictingDecisionServiceToDrd,
- StrategyForAddingDecisionServiceToDrd,
addExistingDecisionServiceToDrd,
- getStrategyToAddExistingDecisionServiceToDrd,
getDecisionServicePropertiesRelativeToThisDmn,
+ getStrategyToAddExistingDecisionServiceToDrd,
+ StrategyForAddingDecisionServiceToDrd,
} from "../mutations/addExistingDecisionServiceToDrd";
import { updateExpressionWidths } from "../mutations/updateExpressionWidths";
import { DiagramCommands } from "./DiagramCommands";
import { getAutoLayoutedInfo } from "../autolayout/autoLayoutInfo";
import { autoGenerateDrd } from "../normalization/autoGenerateDrd";
-import { Normalized, normalize } from "../normalization/normalize";
+import { normalize, Normalized } from "../normalization/normalize";
import OptimizeIcon from "@patternfly/react-icons/dist/js/icons/optimize-icon";
import { applyAutoLayoutToDrd } from "../mutations/applyAutoLayoutToDrd";
@@ -178,6 +177,8 @@ export const Diagram = React.forwardRef<DiagramRef, {
container: React.RefObject
RF.ReactFlowInstance<DmnDiagramNodeData, DmnDiagramEdgeData> | undefined
>(undefined);
+ const viewport = useDmnEditorStore((s) => s.diagram.viewport);
+
// Refs
React.useImperativeHandle(
ref,
@@ -1296,7 +1297,7 @@ export const Diagram = React.forwardRef<DiagramRef, {
container: React.RefObject
edgeTypes={edgeTypes}
snapToGrid={true}
snapGrid={rfSnapGrid}
- defaultViewport={DEFAULT_VIEWPORT}
+ defaultViewport={viewport}
fitView={false}
fitViewOptions={FIT_VIEW_OPTIONS}
attributionPosition={"bottom-right"}
@@ -1315,6 +1316,7 @@ export const Diagram = React.forwardRef<DiagramRef, {
container: React.RefObject
{!isFirefox && <RF.Background />}
<RF.Controls fitViewOptions={FIT_VIEW_OPTIONS}
position={"bottom-right"} />
<SetConnectionToReactFlowStore />
+ <ViewportWatcher />
</RF.ReactFlow>
</DiagramContainerContextProvider>
</>
@@ -1610,6 +1612,22 @@ function DmnDiagramEmptyState({
);
}
+export function ViewportWatcher() {
+ const dmnEditorStoreApi = useDmnEditorStoreApi();
+ useOnViewportChange({
+ onChange: (viewport: Viewport) => {
+ dmnEditorStoreApi.setState((state) => {
+ state.diagram.viewport = {
+ x: viewport.x,
+ y: viewport.y,
+ zoom: viewport.zoom,
+ };
+ });
+ },
+ });
+ return <></>;
+}
+
export function SetConnectionToReactFlowStore(props: {}) {
const ongoingConnection = useDmnEditorStore((s) =>
s.diagram.ongoingConnection);
const rfStoreApi = RF.useStoreApi();
diff --git a/packages/dmn-editor/src/store/Store.ts
b/packages/dmn-editor/src/store/Store.ts
index 21f04b3bf74..4b89906cc84 100644
--- a/packages/dmn-editor/src/store/Store.ts
+++ b/packages/dmn-editor/src/store/Store.ts
@@ -25,7 +25,7 @@ import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
import { ExternalModelsIndex } from "../DmnEditor";
import { DmnDiagramNodeData } from "../diagram/nodes/Nodes";
-import { Normalized, normalize } from "../normalization/normalize";
+import { normalize, Normalized } from "../normalization/normalize";
import { ComputedStateCache } from "./ComputedStateCache";
import { computeAllFeelVariableUniqueNames } from
"./computed/computeAllFeelVariableUniqueNames";
import { computeDataTypes } from "./computed/computeDataTypes";
@@ -34,6 +34,7 @@ import { computeExternalModelsByType } from
"./computed/computeExternalModelsByT
import { computeImportsByNamespace } from
"./computed/computeImportsByNamespace";
import { computeIndexedDrd } from "./computed/computeIndexes";
import { computeIsDropTargetNodeValidForSelection } from
"./computed/computeIsDropTargetNodeValidForSelection";
+import { DEFAULT_VIEWPORT } from "../diagram/Diagram";
enableMapSet(); // Necessary because `Computed` has a lot of Maps and Sets.
@@ -42,6 +43,7 @@ export interface DmnEditorDiagramNodeStatus {
dragging: boolean;
resizing: boolean;
}
+
export interface DmnEditorDiagramEdgeStatus {
selected: boolean;
draggingWaypoint: boolean;
@@ -117,6 +119,11 @@ export interface State {
draggingWaypoints: Array<string>;
movingDividerLines: Array<string>;
isEditingStyle: boolean;
+ viewport: {
+ x: number;
+ y: number;
+ zoom: number;
+ };
};
}
@@ -223,6 +230,7 @@ export const defaultStaticState = (): Omit<State, "dmn" |
"dispatch" | "computed
draggingWaypoints: [],
movingDividerLines: [],
isEditingStyle: false,
+ viewport: DEFAULT_VIEWPORT,
},
});
diff --git a/packages/dmn-editor/tests-e2e/__fixtures__/diagram.ts
b/packages/dmn-editor/tests-e2e/__fixtures__/diagram.ts
index 7d633f6795c..1a807f4ac5a 100644
--- a/packages/dmn-editor/tests-e2e/__fixtures__/diagram.ts
+++ b/packages/dmn-editor/tests-e2e/__fixtures__/diagram.ts
@@ -51,4 +51,23 @@ export class Diagram {
await this.page.getByLabel("Tweak the shape of the input data
node").getByText("Alternative").click();
await this.get().getByTitle("Select or edit DRD").click();
}
+
+ public async zoomIn(args: { clicks: number }) {
+ await this.get().getByTitle("zoom in").click({ clickCount: args.clicks });
+ }
+
+ public async zoomOut(args: { clicks: number }) {
+ await this.get().getByLabel("zoom out").click({ clickCount: args.clicks });
+ }
+
+ public async fitView() {
+ await this.get().getByLabel("fit view").click();
+ }
+
+ public async pan(args: { startPosition: { x: number; y: number };
endPosition: { x: number; y: number } }) {
+ await this.page.mouse.move(args.startPosition.x, args.startPosition.y);
+ await this.page.mouse.down({ button: "middle" });
+ await this.page.mouse.move(args.endPosition.x, args.endPosition.y);
+ await this.page.mouse.up({ button: "middle" });
+ }
}
diff --git
a/packages/dmn-editor/tests-e2e/__screenshots__/Google-Chrome/fit-to-view-diagram.png
b/packages/dmn-editor/tests-e2e/__screenshots__/Google-Chrome/fit-to-view-diagram.png
new file mode 100644
index 00000000000..5357bb6c6e9
Binary files /dev/null and
b/packages/dmn-editor/tests-e2e/__screenshots__/Google-Chrome/fit-to-view-diagram.png
differ
diff --git
a/packages/dmn-editor/tests-e2e/__screenshots__/Google-Chrome/keep-view-settings-after-swap-tabs.png
b/packages/dmn-editor/tests-e2e/__screenshots__/Google-Chrome/keep-view-settings-after-swap-tabs.png
new file mode 100644
index 00000000000..258f807277d
Binary files /dev/null and
b/packages/dmn-editor/tests-e2e/__screenshots__/Google-Chrome/keep-view-settings-after-swap-tabs.png
differ
diff --git
a/packages/dmn-editor/tests-e2e/__screenshots__/Google-Chrome/zoom-in-diagram.png
b/packages/dmn-editor/tests-e2e/__screenshots__/Google-Chrome/zoom-in-diagram.png
new file mode 100644
index 00000000000..029e5a6af05
Binary files /dev/null and
b/packages/dmn-editor/tests-e2e/__screenshots__/Google-Chrome/zoom-in-diagram.png
differ
diff --git
a/packages/dmn-editor/tests-e2e/__screenshots__/Google-Chrome/zoom-out-diagram.png
b/packages/dmn-editor/tests-e2e/__screenshots__/Google-Chrome/zoom-out-diagram.png
new file mode 100644
index 00000000000..d1f4a2afd89
Binary files /dev/null and
b/packages/dmn-editor/tests-e2e/__screenshots__/Google-Chrome/zoom-out-diagram.png
differ
diff --git
a/packages/dmn-editor/tests-e2e/__screenshots__/chromium/fit-to-view-diagram.png
b/packages/dmn-editor/tests-e2e/__screenshots__/chromium/fit-to-view-diagram.png
new file mode 100644
index 00000000000..ec18ef6e1ce
Binary files /dev/null and
b/packages/dmn-editor/tests-e2e/__screenshots__/chromium/fit-to-view-diagram.png
differ
diff --git
a/packages/dmn-editor/tests-e2e/__screenshots__/chromium/keep-view-settings-after-swap-tabs.png
b/packages/dmn-editor/tests-e2e/__screenshots__/chromium/keep-view-settings-after-swap-tabs.png
new file mode 100644
index 00000000000..9a42976a6ff
Binary files /dev/null and
b/packages/dmn-editor/tests-e2e/__screenshots__/chromium/keep-view-settings-after-swap-tabs.png
differ
diff --git
a/packages/dmn-editor/tests-e2e/__screenshots__/chromium/zoom-in-diagram.png
b/packages/dmn-editor/tests-e2e/__screenshots__/chromium/zoom-in-diagram.png
new file mode 100644
index 00000000000..e6acdf3f168
Binary files /dev/null and
b/packages/dmn-editor/tests-e2e/__screenshots__/chromium/zoom-in-diagram.png
differ
diff --git
a/packages/dmn-editor/tests-e2e/__screenshots__/chromium/zoom-out-diagram.png
b/packages/dmn-editor/tests-e2e/__screenshots__/chromium/zoom-out-diagram.png
new file mode 100644
index 00000000000..81e386c7279
Binary files /dev/null and
b/packages/dmn-editor/tests-e2e/__screenshots__/chromium/zoom-out-diagram.png
differ
diff --git
a/packages/dmn-editor/tests-e2e/__screenshots__/webkit/fit-to-view-diagram.png
b/packages/dmn-editor/tests-e2e/__screenshots__/webkit/fit-to-view-diagram.png
new file mode 100644
index 00000000000..68c7dbb13b0
Binary files /dev/null and
b/packages/dmn-editor/tests-e2e/__screenshots__/webkit/fit-to-view-diagram.png
differ
diff --git
a/packages/dmn-editor/tests-e2e/__screenshots__/webkit/keep-view-settings-after-swap-tabs.png
b/packages/dmn-editor/tests-e2e/__screenshots__/webkit/keep-view-settings-after-swap-tabs.png
new file mode 100644
index 00000000000..338c83d31b3
Binary files /dev/null and
b/packages/dmn-editor/tests-e2e/__screenshots__/webkit/keep-view-settings-after-swap-tabs.png
differ
diff --git
a/packages/dmn-editor/tests-e2e/__screenshots__/webkit/zoom-in-diagram.png
b/packages/dmn-editor/tests-e2e/__screenshots__/webkit/zoom-in-diagram.png
new file mode 100644
index 00000000000..5f0afda21b1
Binary files /dev/null and
b/packages/dmn-editor/tests-e2e/__screenshots__/webkit/zoom-in-diagram.png
differ
diff --git
a/packages/dmn-editor/tests-e2e/__screenshots__/webkit/zoom-out-diagram.png
b/packages/dmn-editor/tests-e2e/__screenshots__/webkit/zoom-out-diagram.png
new file mode 100644
index 00000000000..30674e46d52
Binary files /dev/null and
b/packages/dmn-editor/tests-e2e/__screenshots__/webkit/zoom-out-diagram.png
differ
diff --git a/packages/dmn-editor/tests-e2e/zoomDiagram.spec.ts
b/packages/dmn-editor/tests-e2e/zoomDiagram.spec.ts
new file mode 100644
index 00000000000..37fb5f01928
--- /dev/null
+++ b/packages/dmn-editor/tests-e2e/zoomDiagram.spec.ts
@@ -0,0 +1,75 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { expect, test } from "./__fixtures__/base";
+import { NodeType } from "./__fixtures__/nodes";
+import { TabName } from "./__fixtures__/editor";
+
+test.beforeEach(async ({ editor }) => {
+ await editor.open();
+});
+
+test.describe("Zoom and Panning Diagram", () => {
+ test("should zoom in diagram", async ({ nodes, palette, diagram,
multipleNodesPropertiesPanel }) => {
+ await palette.dragNewNode({ type: NodeType.DECISION, targetPosition: { x:
100, y: 10 } });
+ await diagram.resetFocus();
+ await palette.dragNewNode({ type: NodeType.DECISION, targetPosition: { x:
100, y: 110 } });
+ await diagram.resetFocus();
+ await palette.dragNewNode({ type: NodeType.DECISION, targetPosition: { x:
100, y: 210 } });
+ await diagram.zoomIn({ clicks: 1 });
+ await expect(diagram.get()).toHaveScreenshot("zoom-in-diagram.png");
+ });
+
+ test("should zoom out diagram", async ({ nodes, palette, diagram,
multipleNodesPropertiesPanel }) => {
+ await palette.dragNewNode({ type: NodeType.DECISION, targetPosition: { x:
100, y: 10 } });
+ await diagram.resetFocus();
+ await palette.dragNewNode({ type: NodeType.DECISION, targetPosition: { x:
100, y: 110 } });
+ await diagram.resetFocus();
+ await palette.dragNewNode({ type: NodeType.DECISION, targetPosition: { x:
100, y: 210 } });
+ await diagram.zoomOut({ clicks: 2 });
+ await expect(diagram.get()).toHaveScreenshot("zoom-out-diagram.png");
+ });
+
+ test("should fit to view diagram", async ({ nodes, palette, diagram,
multipleNodesPropertiesPanel }) => {
+ await palette.dragNewNode({ type: NodeType.DECISION, targetPosition: { x:
10, y: 10 } });
+ await diagram.resetFocus();
+ await palette.dragNewNode({ type: NodeType.DECISION, targetPosition: { x:
400, y: 400 } });
+ await diagram.resetFocus();
+ await palette.dragNewNode({ type: NodeType.DECISION, targetPosition: { x:
200, y: 200 } });
+ await diagram.zoomIn({ clicks: 2 });
+ await diagram.fitView();
+ await expect(diagram.get()).toHaveScreenshot("fit-to-view-diagram.png");
+ });
+
+ test("should keep view settings after swap tabs", async ({ palette, diagram,
page, editor }) => {
+ await palette.dragNewNode({ type: NodeType.DECISION, targetPosition: { x:
100, y: 100 } });
+ await diagram.resetFocus();
+ await palette.dragNewNode({ type: NodeType.DECISION, targetPosition: { x:
200, y: 200 } });
+ await diagram.resetFocus();
+ await palette.dragNewNode({ type: NodeType.DECISION, targetPosition: { x:
200, y: 300 } });
+ await diagram.zoomOut({ clicks: 3 });
+
+ await diagram.pan({ startPosition: { x: 500, y: 500 }, endPosition: { x:
300, y: 300 } });
+
+ await editor.changeTab({ tab: TabName.DATA_TYPES });
+ await editor.changeTab({ tab: TabName.EDITOR });
+
+ await
expect(diagram.get()).toHaveScreenshot("keep-view-settings-after-swap-tabs.png");
+ });
+});
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
