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 17e326b384a kie-issues#1074 & kie-issues#1075: Update 'Shape' part of
the properties panel (#2254)
17e326b384a is described below
commit 17e326b384acb1129716c295523bdc84206f0440
Author: Jozef Marko <[email protected]>
AuthorDate: Sat Apr 27 02:13:34 2024 +0200
kie-issues#1074 & kie-issues#1075: Update 'Shape' part of the properties
panel (#2254)
Co-authored-by: Luiz João Motta <[email protected]>
---
.../src/propertiesPanel/ShapeOptions.tsx | 196 ++++++++++++++-------
.../propertiesPanel/bkmPropertiesPanel.ts | 4 +-
.../decisionServicePropertiesPanel.ts | 4 +-
.../propertiesPanel/groupPropertiesPanel.ts | 4 +-
.../propertiesPanel/inputDataPropertiesPanel.ts | 4 +-
.../multipleNodesPropertiesPanel.ts | 2 +-
.../Google-Chrome/change-multiple-nodes-shape.png | Bin 0 -> 37637 bytes
.../chromium/change-multiple-nodes-shape.png | Bin 0 -> 37664 bytes
.../webkit/change-multiple-nodes-shape.png | Bin 0 -> 33099 bytes
.../e2e/changeMultipleNodesProperties.spec.ts | 41 +++++
.../tests/e2e/drdArtifacts/resizeGroup.spec.ts | 5 +-
.../e2e/drdArtifacts/resizeTextAnnotation.spec.ts | 2 -
.../tests/e2e/drgElements/resizeBkm.spec.ts | 2 -
.../tests/e2e/drgElements/resizeDecision.spec.ts | 2 -
.../e2e/drgElements/resizeDecisionService.spec.ts | 2 -
.../tests/e2e/drgElements/resizeInputData.spec.ts | 2 -
.../e2e/drgElements/resizeKnowledgeSource.spec.ts | 2 -
17 files changed, 189 insertions(+), 83 deletions(-)
diff --git a/packages/dmn-editor/src/propertiesPanel/ShapeOptions.tsx
b/packages/dmn-editor/src/propertiesPanel/ShapeOptions.tsx
index 35e8dcfee4a..6353afeedcc 100644
--- a/packages/dmn-editor/src/propertiesPanel/ShapeOptions.tsx
+++ b/packages/dmn-editor/src/propertiesPanel/ShapeOptions.tsx
@@ -18,7 +18,7 @@
*/
import * as React from "react";
-import { useState, useMemo, useCallback, useEffect } from "react";
+import { useState, useMemo, useCallback, useEffect, useRef } from "react";
import { FormGroup, FormSection } from
"@patternfly/react-core/dist/js/components/Form";
import { TextInput } from
"@patternfly/react-core/dist/js/components/TextInput";
import { CubeIcon } from "@patternfly/react-icons/dist/js/icons/cube-icon";
@@ -34,6 +34,11 @@ import UndoAltIcon from
"@patternfly/react-icons/dist/js/icons/undo-alt-icon";
import { ColorPicker } from "./ColorPicker";
import { ToggleGroup, ToggleGroupItem } from
"@patternfly/react-core/dist/js/components/ToggleGroup";
import "./ShapeOptions.css";
+import { useExternalModels } from
"../includedModels/DmnEditorDependenciesContext";
+import { MIN_NODE_SIZES } from "../diagram/nodes/DefaultSizes";
+import { NodeType } from "../diagram/connections/graphStructure";
+import { Button, ButtonVariant } from
"@patternfly/react-core/dist/js/components/Button";
+import { DC__Dimension } from
"@kie-tools/dmn-marshaller/dist/schemas/dmn-1_2/ts-gen/types";
const DEFAULT_FILL_COLOR = { "@_blue": 255, "@_green": 255, "@_red": 255 };
const DEFAULT_STROKE_COLOR = { "@_blue": 0, "@_green": 0, "@_red": 0 };
@@ -50,10 +55,12 @@ export function ShapeOptions({
isPositioningEnabled: boolean;
}) {
const dmnEditorStoreApi = useDmnEditorStoreApi();
+ const { externalModelsByNamespace } = useExternalModels();
const shapes = useDmnEditorStore((s) =>
nodeIds.map((nodeId) =>
s.computed(s).indexedDrd().dmnShapesByHref.get(nodeId))
);
+ const nodesById = useDmnEditorStore((s) =>
s.computed(s).getDiagramData(externalModelsByNamespace).nodesById);
const shapeStyles = useMemo(() => shapes.map((shape) =>
shape?.["di:Style"]), [shapes]);
// For when a single node is selected.
@@ -63,6 +70,26 @@ export function ShapeOptions({
const boundPositionX = useMemo(() => +(shapeBound?.["@_x"]?.toFixed(2) ??
""), [shapeBound]);
const boundPositionY = useMemo(() => +(shapeBound?.["@_y"]?.toFixed(2) ??
""), [shapeBound]);
+ const [width, setWidth] = useState<number>(boundWidth);
+ const [height, setHeight] = useState<number>(boundHeight);
+ /**
+ * The `setBounds` method uses the `nodeId` to update a specific node.
+ * Filling the `TextField` and changing the `nodeId` will cause the `onBlur`
+ * method to be called with this new `nodeId`. This reference keep the
+ * old `nodeId` saved, so the `setBounds` can be update the correct node.
+ */
+ const previousNodeId = useRef(nodeIds[0]);
+
+ useEffect(() => {
+ setWidth(boundWidth);
+ previousNodeId.current = nodeIds[0];
+ }, [boundWidth, nodeIds]);
+
+ useEffect(() => {
+ setHeight(boundHeight);
+ previousNodeId.current = nodeIds[0];
+ }, [boundHeight, nodeIds]);
+
const fillColor = useMemo(() => {
const b = (shapeStyles[0]?.["dmndi:FillColor"]?.["@_blue"] ??
DEFAULT_FILL_COLOR["@_red"]).toString(16);
const g = (shapeStyles[0]?.["dmndi:FillColor"]?.["@_green"] ??
DEFAULT_FILL_COLOR["@_green"]).toString(16);
@@ -80,13 +107,13 @@ export function ShapeOptions({
const [isShapeSectionExpanded, setShapeSectionExpanded] =
useState<boolean>(startExpanded);
const setBounds = useCallback(
- (callback: (bounds: DC__Bounds, state: State) => void) => {
+ (callback: (bounds: DC__Bounds, state: State) => void, nodeId: string) => {
dmnEditorStoreApi.setState((s) => {
const { diagramElements } = addOrGetDrd({ definitions:
s.dmn.model.definitions, drdIndex: s.diagram.drdIndex });
- const index = nodeIds.map((nodeId) =>
s.computed(s).indexedDrd().dmnShapesByHref.get(nodeId))[0]?.index ?? -1;
+ const index =
s.computed(s).indexedDrd()?.dmnShapesByHref?.get(nodeId)?.index ?? -1;
if (index < 0) {
- throw new Error(`DMN Shape for '${nodeIds[0]}' does not exist.`);
+ throw new Error(`DMN Shape for '${nodeId}' does not exist.`);
}
const shape = diagramElements?.[index];
@@ -100,61 +127,103 @@ export function ShapeOptions({
callback(shape["dc:Bounds"], s);
});
},
- [dmnEditorStoreApi, nodeIds]
+ [dmnEditorStoreApi]
);
- const onChangeWidth = useCallback(
- (newWidth: string) => {
- setBounds((bounds) => {
- bounds["@_width"] = +parseFloat(newWidth).toFixed(2);
- });
+ const onChangeWidth = useCallback((newWidth: string) => {
+ setWidth(+newWidth);
+ }, []);
+
+ const onBlurWidth = useCallback(
+ (event) => {
+ setBounds((bounds, state) => {
+ const node = nodesById.get(previousNodeId.current);
+ const minNodeSize = MIN_NODE_SIZES[node?.type as NodeType]({
+ snapGrid: state.diagram.snapGrid,
+ isAlternativeInputDataShape:
state.computed(state).isAlternativeInputDataShape(),
+ });
+
+ if (parseInt(event.target.value) < minNodeSize["@_width"]) {
+ bounds["@_width"] = minNodeSize["@_width"];
+ setWidth(minNodeSize["@_width"]);
+ } else {
+ bounds["@_width"] = parseInt(event.target.value);
+ }
+ }, previousNodeId.current);
},
- [setBounds]
+ [nodesById, setBounds]
);
- const onChangeHeight = useCallback(
- (newHeight: string) => {
- setBounds((bounds) => {
- bounds["@_height"] = +parseFloat(newHeight).toFixed(2);
- });
+ const onChangeHeight = useCallback((newHeight: string) => {
+ setHeight(+newHeight);
+ }, []);
+
+ const onBlurHeight = useCallback(
+ (event) => {
+ setBounds((bounds, state) => {
+ const node = nodesById.get(previousNodeId.current);
+ const minNodeSize = MIN_NODE_SIZES[node?.type as NodeType]({
+ snapGrid: state.diagram.snapGrid,
+ isAlternativeInputDataShape:
state.computed(state).isAlternativeInputDataShape(),
+ });
+
+ if (parseInt(event.target.value) < minNodeSize["@_height"]) {
+ bounds["@_height"] = minNodeSize["@_height"];
+ setHeight(minNodeSize["@_height"]);
+ } else {
+ bounds["@_height"] = parseInt(event.target.value);
+ }
+ }, previousNodeId.current);
},
- [setBounds]
+ [nodesById, setBounds]
);
const onChangePositionX = useCallback(
(newX: string) => {
setBounds((bounds) => {
bounds["@_x"] = +parseFloat(newX).toFixed(2);
- });
+ }, nodeIds[0]);
},
- [setBounds]
+ [nodeIds, setBounds]
);
const onChangePositionY = useCallback(
(newY: string) => {
setBounds((bounds) => {
bounds["@_y"] = +parseFloat(newY).toFixed(2);
- });
+ }, nodeIds[0]);
},
- [setBounds]
+ [nodeIds, setBounds]
);
const setShapeStyles = useCallback(
- (callback: (shape: DMNDI15__DMNShape[], state: State) => void) => {
+ (
+ callback: (
+ shapesWithMinNodeSize: { shape: DMNDI15__DMNShape; minNodeSize:
DC__Dimension }[],
+ state: State
+ ) => void
+ ) => {
dmnEditorStoreApi.setState((s) => {
const { diagramElements } = addOrGetDrd({ definitions:
s.dmn.model.definitions, drdIndex: s.diagram.drdIndex });
- const shapes = nodeIds.map((nodeId) => {
+ const shapesWithMinNodeSize = nodeIds.map((nodeId) => {
const shape = s.computed(s).indexedDrd().dmnShapesByHref.get(nodeId);
+ const node =
s.computed(s).getDiagramData(externalModelsByNamespace).nodesById.get(nodeId);
+
+ const minNodeSize = MIN_NODE_SIZES[node?.type as NodeType]({
+ snapGrid: s.diagram.snapGrid,
+ isAlternativeInputDataShape:
s.computed(s).isAlternativeInputDataShape(),
+ });
+
if (!shape) {
throw new Error(`DMN Shape for '${nodeId}' does not exist.`);
}
- return diagramElements[shape.index];
+ return { shape: diagramElements[shape.index], minNodeSize };
});
let i = 0;
- for (const shape of shapes) {
+ for (const { shape } of shapesWithMinNodeSize) {
if (shape.__$$element !== "dmndi:DMNShape") {
throw new Error(`DMN Element with index ${i++} is not a
DMNShape.`);
}
@@ -162,10 +231,10 @@ export function ShapeOptions({
shape["di:Style"] ??= { __$$element: "dmndi:DMNStyle" };
}
- callback(shapes, s);
+ callback(shapesWithMinNodeSize, s);
});
},
- [dmnEditorStoreApi, nodeIds]
+ [dmnEditorStoreApi, externalModelsByNamespace, nodeIds]
);
const [temporaryStrokeColor, setTemporaryStrokeColor] = useState<string |
undefined>();
@@ -187,10 +256,10 @@ export function ShapeOptions({
setTemporaryStrokeColor(undefined);
- setShapeStyles((shapes, state) => {
- shapes.forEach((shape) => {
+ setShapeStyles((shapesWithMinNodeSize, state) => {
+ shapesWithMinNodeSize.forEach(({ shape }) => {
state.diagram.isEditingStyle = false;
- shape!["di:Style"]!["dmndi:StrokeColor"] ??= DEFAULT_STROKE_COLOR;
+ shape!["di:Style"]!["dmndi:StrokeColor"] ??= {
...DEFAULT_STROKE_COLOR };
shape!["di:Style"]!["dmndi:StrokeColor"]["@_red"] =
parseInt(temporaryStrokeColor.slice(0, 2), 16);
shape!["di:Style"]!["dmndi:StrokeColor"]["@_green"] =
parseInt(temporaryStrokeColor.slice(2, 4), 16);
shape!["di:Style"]!["dmndi:StrokeColor"]["@_blue"] =
parseInt(temporaryStrokeColor.slice(4, 6), 16);
@@ -222,10 +291,10 @@ export function ShapeOptions({
setTemporaryFillColor(undefined);
- setShapeStyles((shapes, state) => {
- shapes.forEach((shape) => {
+ setShapeStyles((shapesWithMinNodeSize, state) => {
+ shapesWithMinNodeSize.forEach(({ shape }) => {
state.diagram.isEditingStyle = false;
- shape!["di:Style"]!["dmndi:FillColor"] ??= DEFAULT_FILL_COLOR;
+ shape!["di:Style"]!["dmndi:FillColor"] ??= { ...DEFAULT_FILL_COLOR };
shape!["di:Style"]!["dmndi:FillColor"]["@_red"] =
parseInt(temporaryFillColor.slice(0, 2), 16);
shape!["di:Style"]!["dmndi:FillColor"]["@_green"] =
parseInt(temporaryFillColor.slice(2, 4), 16);
shape!["di:Style"]!["dmndi:FillColor"]["@_blue"] =
parseInt(temporaryFillColor.slice(4, 6), 16);
@@ -239,17 +308,24 @@ export function ShapeOptions({
}, [setShapeStyles, temporaryFillColor]);
const onReset = useCallback(() => {
- setShapeStyles((shapes) => {
- shapes.forEach((shape) => {
- shape!["di:Style"]!["dmndi:FillColor"] ??= DEFAULT_FILL_COLOR;
- shape!["di:Style"]!["dmndi:FillColor"]["@_red"] =
DEFAULT_FILL_COLOR["@_red"];
- shape!["di:Style"]!["dmndi:FillColor"]["@_green"] =
DEFAULT_FILL_COLOR["@_green"];
- shape!["di:Style"]!["dmndi:FillColor"]["@_blue"] =
DEFAULT_FILL_COLOR["@_blue"];
-
- shape!["di:Style"]!["dmndi:StrokeColor"] ??= DEFAULT_STROKE_COLOR;
- shape!["di:Style"]!["dmndi:StrokeColor"]["@_red"] =
DEFAULT_STROKE_COLOR["@_red"];
- shape!["di:Style"]!["dmndi:StrokeColor"]["@_green"] =
DEFAULT_STROKE_COLOR["@_green"];
- shape!["di:Style"]!["dmndi:StrokeColor"]["@_blue"] =
DEFAULT_STROKE_COLOR["@_blue"];
+ setShapeStyles((shapeWithNodes) => {
+ shapeWithNodes.forEach(({ shape, minNodeSize }) => {
+ shape["di:Style"] ??= {
+ __$$element: "dmndi:DMNStyle",
+ "dmndi:FillColor": { ...DEFAULT_FILL_COLOR },
+ "dmndi:StrokeColor": { ...DEFAULT_STROKE_COLOR },
+ };
+ shape["di:Style"]["dmndi:FillColor"] = { ...DEFAULT_FILL_COLOR };
+ shape["di:Style"]["dmndi:StrokeColor"] = { ...DEFAULT_STROKE_COLOR };
+
+ shape["dc:Bounds"] ??= {
+ "@_width": minNodeSize["@_width"],
+ "@_height": minNodeSize["@_width"],
+ "@_x": 0,
+ "@_y": 0,
+ };
+ shape["dc:Bounds"]["@_width"] = minNodeSize["@_width"];
+ shape["dc:Bounds"]["@_height"] = minNodeSize["@_height"];
});
});
}, [setShapeStyles]);
@@ -266,9 +342,19 @@ export function ShapeOptions({
isSectionExpanded={isShapeSectionExpanded}
toogleSectionExpanded={() => setShapeSectionExpanded((prev) => !prev)}
title={"Shape"}
+ action={
+ <Button
+ variant={ButtonVariant.plain}
+ onClick={onReset}
+ style={{ paddingBottom: 0, paddingTop: 0 }}
+ title={"Reset shape"}
+ >
+ <UndoAltIcon />
+ </Button>
+ }
/>
{isShapeSectionExpanded && (
- <FormSection style={{ paddingLeft: "20px", marginTop: "0px" }}>
+ <FormSection style={{ paddingLeft: "20px", marginTop: "0px",
marginBottom: "16px" }}>
<FormGroup label={"Style"}>
<ToggleGroup>
<Tooltip content={"Fill color"}>
@@ -349,10 +435,11 @@ export function ShapeOptions({
data-testid={"kie-tools--dmn-editor--properties-panel-node-shape-width-input"}
type={"number"}
isDisabled={isDimensioningEnabled ? false : true}
- value={isDimensioningEnabled ? boundWidth : undefined}
+ value={isDimensioningEnabled ? width : undefined}
placeholder={isDimensioningEnabled ? "Enter a
value..." : undefined}
+ onBlur={onBlurWidth}
onChange={onChangeWidth}
- style={{ maxWidth: "80px", minWidth: "60px", border:
"none", backgroundColor: "transparent" }}
+ style={{ border: "none", backgroundColor:
"transparent" }}
/>
<div>
<ArrowsAltHIcon aria-label={"Width"} />
@@ -375,10 +462,11 @@ export function ShapeOptions({
data-testid={"kie-tools--dmn-editor--properties-panel-node-shape-height-input"}
type={"number"}
isDisabled={isDimensioningEnabled ? false : true}
- value={isDimensioningEnabled ? boundHeight : undefined}
+ value={isDimensioningEnabled ? height : undefined}
placeholder={isDimensioningEnabled ? "Enter a
value..." : undefined}
+ onBlur={onBlurHeight}
onChange={onChangeHeight}
- style={{ maxWidth: "80px", minWidth: "60px", border:
"none", backgroundColor: "transparent" }}
+ style={{ border: "none", backgroundColor:
"transparent" }}
/>
<div>
<ArrowsAltVIcon aria-label={"Height"} />
@@ -389,16 +477,6 @@ export function ShapeOptions({
buttonId={"shape-style-toggle-group-bound-height"}
/>
</Tooltip>
- <Tooltip content={"Reset shape"}>
- <ToggleGroupItem
- title={"Reset shape"}
- onClick={onReset}
- className={"kie-dmn-editor--shape-options-toggle-button"}
- text={<UndoAltIcon />}
- key={"reset"}
- buttonId={"shape-style-toggle-group-reset"}
- />
- </Tooltip>
</ToggleGroup>
</FormGroup>
{isPositioningEnabled && (
diff --git
a/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/bkmPropertiesPanel.ts
b/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/bkmPropertiesPanel.ts
index f3d5d96fe09..eba7a26fd69 100644
---
a/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/bkmPropertiesPanel.ts
+++
b/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/bkmPropertiesPanel.ts
@@ -40,9 +40,9 @@ export class BkmPropertiesPanel extends PropertiesPanelBase {
super(diagram, page);
this.nameProperties = new NameProperties(this.panel(), page);
this.dataTypeProperties = new DataTypeProperties(this.panel(), page);
- this.descriptionProperties = new DescriptionProperties(this.panel(),
diagram);
+ this.descriptionProperties = new DescriptionProperties(this.panel());
this.documentationProperties = new DocumentationProperties(this.panel(),
page);
- this.fontProperties = new FontProperties(this.panel(), diagram);
+ this.fontProperties = new FontProperties(this.panel());
this.shapeProperties = new ShapeProperties(this.panel());
}
diff --git
a/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/decisionServicePropertiesPanel.ts
b/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/decisionServicePropertiesPanel.ts
index 10664787a70..e760bc2c8fb 100644
---
a/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/decisionServicePropertiesPanel.ts
+++
b/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/decisionServicePropertiesPanel.ts
@@ -40,9 +40,9 @@ export class DecisionServicePropertiesPanel extends
PropertiesPanelBase {
super(diagram, page);
this.nameProperties = new NameProperties(this.panel(), page);
this.dataTypeProperties = new DataTypeProperties(this.panel(), page);
- this.descriptionProperties = new DescriptionProperties(this.panel(),
diagram);
+ this.descriptionProperties = new DescriptionProperties(this.panel());
this.documentationProperties = new DocumentationProperties(this.panel(),
page);
- this.fontProperties = new FontProperties(this.panel(), diagram);
+ this.fontProperties = new FontProperties(this.panel());
this.shapeProperties = new ShapeProperties(this.panel());
}
diff --git
a/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/groupPropertiesPanel.ts
b/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/groupPropertiesPanel.ts
index d3e8ee67a88..44ed3fa74c6 100644
---
a/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/groupPropertiesPanel.ts
+++
b/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/groupPropertiesPanel.ts
@@ -34,8 +34,8 @@ export class GroupPropertiesPanel extends PropertiesPanelBase
{
constructor(public diagram: Diagram, public page: Page) {
super(diagram, page);
this.nameProperties = new NameProperties(this.panel(), page);
- this.descriptionProperties = new DescriptionProperties(this.panel(),
diagram);
- this.fontProperties = new FontProperties(this.panel(), diagram);
+ this.descriptionProperties = new DescriptionProperties(this.panel());
+ this.fontProperties = new FontProperties(this.panel());
this.shapeProperties = new ShapeProperties(this.panel());
}
diff --git
a/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/inputDataPropertiesPanel.ts
b/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/inputDataPropertiesPanel.ts
index c53c3aeb4dd..06f5a278ffb 100644
---
a/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/inputDataPropertiesPanel.ts
+++
b/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/inputDataPropertiesPanel.ts
@@ -40,9 +40,9 @@ export class InputDataPropertiesPanel extends
PropertiesPanelBase {
super(diagram, page);
this.nameProperties = new NameProperties(this.panel(), page);
this.dataTypeProperties = new DataTypeProperties(this.panel(), page);
- this.descriptionProperties = new DescriptionProperties(this.panel(),
diagram);
+ this.descriptionProperties = new DescriptionProperties(this.panel());
this.documentationProperties = new DocumentationProperties(this.panel(),
page);
- this.fontProperties = new FontProperties(this.panel(), diagram);
+ this.fontProperties = new FontProperties(this.panel());
this.shapeProperties = new ShapeProperties(this.panel());
}
diff --git
a/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/multipleNodesPropertiesPanel.ts
b/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/multipleNodesPropertiesPanel.ts
index abf56f641d4..2f8816040c8 100644
---
a/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/multipleNodesPropertiesPanel.ts
+++
b/packages/dmn-editor/tests/e2e/__fixtures__/propertiesPanel/multipleNodesPropertiesPanel.ts
@@ -29,7 +29,7 @@ export class MultipleNodesPropertiesPanel extends
PropertiesPanelBase {
constructor(public diagram: Diagram, public page: Page) {
super(diagram, page);
- this.fontProperties = new FontProperties(this.panel(), diagram);
+ this.fontProperties = new FontProperties(this.panel());
this.shapeProperties = new ShapeProperties(this.panel());
}
diff --git
a/packages/dmn-editor/tests/e2e/__screenshots__/Google-Chrome/change-multiple-nodes-shape.png
b/packages/dmn-editor/tests/e2e/__screenshots__/Google-Chrome/change-multiple-nodes-shape.png
new file mode 100644
index 00000000000..c052f944118
Binary files /dev/null and
b/packages/dmn-editor/tests/e2e/__screenshots__/Google-Chrome/change-multiple-nodes-shape.png
differ
diff --git
a/packages/dmn-editor/tests/e2e/__screenshots__/chromium/change-multiple-nodes-shape.png
b/packages/dmn-editor/tests/e2e/__screenshots__/chromium/change-multiple-nodes-shape.png
new file mode 100644
index 00000000000..89de4527746
Binary files /dev/null and
b/packages/dmn-editor/tests/e2e/__screenshots__/chromium/change-multiple-nodes-shape.png
differ
diff --git
a/packages/dmn-editor/tests/e2e/__screenshots__/webkit/change-multiple-nodes-shape.png
b/packages/dmn-editor/tests/e2e/__screenshots__/webkit/change-multiple-nodes-shape.png
new file mode 100644
index 00000000000..edeff3d434c
Binary files /dev/null and
b/packages/dmn-editor/tests/e2e/__screenshots__/webkit/change-multiple-nodes-shape.png
differ
diff --git
a/packages/dmn-editor/tests/e2e/changeMultipleNodesProperties.spec.ts
b/packages/dmn-editor/tests/e2e/changeMultipleNodesProperties.spec.ts
index 4bae371c624..3ff730d0938 100644
--- a/packages/dmn-editor/tests/e2e/changeMultipleNodesProperties.spec.ts
+++ b/packages/dmn-editor/tests/e2e/changeMultipleNodesProperties.spec.ts
@@ -45,4 +45,45 @@ test.describe("Change Properties - Multiple Nodes", () => {
await
expect(diagram.get()).toHaveScreenshot("change-multiple-nodes-font.png");
});
+
+ test("should reset multiple nodes shape", async ({ nodes, palette, diagram,
multipleNodesPropertiesPanel }) => {
+ await palette.dragNewNode({ type: NodeType.INPUT_DATA, targetPosition: {
x: 100, y: 100 } });
+ await nodes.resize({ nodeName: DefaultNodeName.INPUT_DATA, xOffset: 50,
yOffset: 50 });
+ await diagram.resetFocus();
+ await palette.dragNewNode({ type: NodeType.DECISION, targetPosition: { x:
400, y: 100 } });
+ await nodes.resize({ nodeName: DefaultNodeName.DECISION, xOffset: 50,
yOffset: 50 });
+ await diagram.resetFocus();
+
+ await multipleNodesPropertiesPanel.open();
+ await nodes.selectMultiple({ names: [DefaultNodeName.INPUT_DATA,
DefaultNodeName.DECISION] });
+ await multipleNodesPropertiesPanel.resetShape();
+
+ await
expect(diagram.get()).toHaveScreenshot("change-multiple-nodes-shape.png");
+ });
+
+ test("should update shape properties when switching between nodes", async ({
+ nodes,
+ palette,
+ diagram,
+ inputDataPropertiesPanel,
+ decisionPropertiesPanel,
+ }) => {
+ await palette.dragNewNode({ type: NodeType.INPUT_DATA, targetPosition: {
x: 100, y: 100 } });
+ await nodes.resize({ nodeName: DefaultNodeName.INPUT_DATA, xOffset: 50,
yOffset: 50 });
+ await diagram.resetFocus();
+ await palette.dragNewNode({ type: NodeType.DECISION, targetPosition: { x:
400, y: 100 } });
+ await nodes.resize({ nodeName: DefaultNodeName.DECISION, xOffset: 100,
yOffset: 100 });
+ await diagram.resetFocus();
+
+ await inputDataPropertiesPanel.open();
+ await nodes.select({ name: DefaultNodeName.INPUT_DATA });
+ const { width: inputDataWidth, height: inputDataHeight } = await
inputDataPropertiesPanel.getShape();
+ expect(inputDataWidth).toEqual("200");
+ expect(inputDataHeight).toEqual("120");
+
+ await nodes.select({ name: DefaultNodeName.DECISION });
+ const { width: decisionWidth, height: decisionHeight } = await
decisionPropertiesPanel.getShape();
+ expect(decisionWidth).toEqual("260");
+ expect(decisionHeight).toEqual("180");
+ });
});
diff --git a/packages/dmn-editor/tests/e2e/drdArtifacts/resizeGroup.spec.ts
b/packages/dmn-editor/tests/e2e/drdArtifacts/resizeGroup.spec.ts
index 75b0a108a08..2db5b779f85 100644
--- a/packages/dmn-editor/tests/e2e/drdArtifacts/resizeGroup.spec.ts
+++ b/packages/dmn-editor/tests/e2e/drdArtifacts/resizeGroup.spec.ts
@@ -183,7 +183,6 @@ test.describe("Resize node - Group", () => {
type: TestAnnotations.REGRESSION,
description:
"https://github.com/apache/incubator-kie-issues/issues/1074";,
});
- test.skip(true,
"https://github.com/apache/incubator-kie-issues/issues/1074";);
await groupPropertiesPanel.open();
await nodes.select({ name: DefaultNodeName.GROUP, position:
NodePosition.TOP });
await groupPropertiesPanel.setShape({ width: "100", height: "100" });
@@ -196,17 +195,17 @@ test.describe("Resize node - Group", () => {
expect(width).toEqual("280");
});
- test("should reset Group node size", async ({ nodes, groupPropertiesPanel
}) => {
+ test("should reset Group node size", async ({ diagram, nodes,
groupPropertiesPanel }) => {
test.info().annotations.push({
type: TestAnnotations.REGRESSION,
description:
"https://github.com/apache/incubator-kie-issues/issues/1075";,
});
- test.skip(true,
"https://github.com/apache/incubator-kie-issues/issues/1075";);
await groupPropertiesPanel.open();
await nodes.select({ name: DefaultNodeName.GROUP, position:
NodePosition.TOP });
await groupPropertiesPanel.setShape({ width: "325", height: "325" });
await groupPropertiesPanel.resetShape();
+ await diagram.resetFocus();
await nodes.select({ name: DefaultNodeName.GROUP, position:
NodePosition.TOP });
const { width, height } = await groupPropertiesPanel.getShape();
diff --git
a/packages/dmn-editor/tests/e2e/drdArtifacts/resizeTextAnnotation.spec.ts
b/packages/dmn-editor/tests/e2e/drdArtifacts/resizeTextAnnotation.spec.ts
index 138b8fcaa4f..4ce89792bc3 100644
--- a/packages/dmn-editor/tests/e2e/drdArtifacts/resizeTextAnnotation.spec.ts
+++ b/packages/dmn-editor/tests/e2e/drdArtifacts/resizeTextAnnotation.spec.ts
@@ -277,7 +277,6 @@ test.describe("Resize node - Text Annotation", () => {
type: TestAnnotations.REGRESSION,
description:
"https://github.com/apache/incubator-kie-issues/issues/1074";,
});
- test.skip(true,
"https://github.com/apache/incubator-kie-issues/issues/1074";);
await textAnnotationPropertiesPanel.open();
await nodes.select({ name: DefaultNodeName.TEXT_ANNOTATION, position:
NodePosition.TOP });
await textAnnotationPropertiesPanel.setShape({ width: "50", height: "50"
});
@@ -295,7 +294,6 @@ test.describe("Resize node - Text Annotation", () => {
type: TestAnnotations.REGRESSION,
description:
"https://github.com/apache/incubator-kie-issues/issues/1075";,
});
- test.skip(true,
"https://github.com/apache/incubator-kie-issues/issues/1075";);
await textAnnotationPropertiesPanel.open();
await nodes.select({ name: DefaultNodeName.TEXT_ANNOTATION, position:
NodePosition.TOP });
await textAnnotationPropertiesPanel.setShape({ width: "300", height:
"300" });
diff --git a/packages/dmn-editor/tests/e2e/drgElements/resizeBkm.spec.ts
b/packages/dmn-editor/tests/e2e/drgElements/resizeBkm.spec.ts
index b36fb0669dc..fabaad49447 100644
--- a/packages/dmn-editor/tests/e2e/drgElements/resizeBkm.spec.ts
+++ b/packages/dmn-editor/tests/e2e/drgElements/resizeBkm.spec.ts
@@ -185,7 +185,6 @@ test.describe("Resize node - BKM", () => {
type: TestAnnotations.REGRESSION,
description:
"https://github.com/apache/incubator-kie-issues/issues/1074";,
});
- test.skip(true,
"https://github.com/apache/incubator-kie-issues/issues/1074";);
await bkmPropertiesPanel.open();
await nodes.select({ name: DefaultNodeName.BKM });
await bkmPropertiesPanel.setShape({ width: "50", height: "50" });
@@ -203,7 +202,6 @@ test.describe("Resize node - BKM", () => {
type: TestAnnotations.REGRESSION,
description:
"https://github.com/apache/incubator-kie-issues/issues/1075";,
});
- test.skip(true,
"https://github.com/apache/incubator-kie-issues/issues/1075";);
await bkmPropertiesPanel.open();
await nodes.select({ name: DefaultNodeName.BKM });
await bkmPropertiesPanel.setShape({ width: "300", height: "300" });
diff --git a/packages/dmn-editor/tests/e2e/drgElements/resizeDecision.spec.ts
b/packages/dmn-editor/tests/e2e/drgElements/resizeDecision.spec.ts
index aba78ff6062..ece747147f4 100644
--- a/packages/dmn-editor/tests/e2e/drgElements/resizeDecision.spec.ts
+++ b/packages/dmn-editor/tests/e2e/drgElements/resizeDecision.spec.ts
@@ -187,7 +187,6 @@ test.describe("Resize node - Decision", () => {
type: TestAnnotations.REGRESSION,
description:
"https://github.com/apache/incubator-kie-issues/issues/1074";,
});
- test.skip(true,
"https://github.com/apache/incubator-kie-issues/issues/1074";);
await decisionPropertiesPanel.open();
await nodes.select({ name: DefaultNodeName.DECISION });
await decisionPropertiesPanel.setShape({ width: "50", height: "50" });
@@ -205,7 +204,6 @@ test.describe("Resize node - Decision", () => {
type: TestAnnotations.REGRESSION,
description:
"https://github.com/apache/incubator-kie-issues/issues/1075";,
});
- test.skip(true,
"https://github.com/apache/incubator-kie-issues/issues/1075";);
await decisionPropertiesPanel.open();
await nodes.select({ name: DefaultNodeName.DECISION });
await decisionPropertiesPanel.setShape({ width: "300", height: "300" });
diff --git
a/packages/dmn-editor/tests/e2e/drgElements/resizeDecisionService.spec.ts
b/packages/dmn-editor/tests/e2e/drgElements/resizeDecisionService.spec.ts
index 7a8af54ea86..c1e3dd2e4bf 100644
--- a/packages/dmn-editor/tests/e2e/drgElements/resizeDecisionService.spec.ts
+++ b/packages/dmn-editor/tests/e2e/drgElements/resizeDecisionService.spec.ts
@@ -275,7 +275,6 @@ test.describe("Resize node - Decision Service", () => {
type: TestAnnotations.REGRESSION,
description:
"https://github.com/apache/incubator-kie-issues/issues/1074";,
});
- test.skip(true,
"https://github.com/apache/incubator-kie-issues/issues/1074";);
await decisionServicePropertiesPanel.open();
await nodes.select({ name: DefaultNodeName.DECISION_SERVICE, position:
NodePosition.TOP });
await decisionServicePropertiesPanel.setShape({ width: "50", height:
"50" });
@@ -293,7 +292,6 @@ test.describe("Resize node - Decision Service", () => {
type: TestAnnotations.REGRESSION,
description:
"https://github.com/apache/incubator-kie-issues/issues/1075";,
});
- test.skip(true,
"https://github.com/apache/incubator-kie-issues/issues/1075";);
await decisionServicePropertiesPanel.open();
await nodes.select({ name: DefaultNodeName.DECISION_SERVICE, position:
NodePosition.TOP });
await decisionServicePropertiesPanel.setShape({ width: "300", height:
"300" });
diff --git a/packages/dmn-editor/tests/e2e/drgElements/resizeInputData.spec.ts
b/packages/dmn-editor/tests/e2e/drgElements/resizeInputData.spec.ts
index db11996e358..ecaba01d3d5 100644
--- a/packages/dmn-editor/tests/e2e/drgElements/resizeInputData.spec.ts
+++ b/packages/dmn-editor/tests/e2e/drgElements/resizeInputData.spec.ts
@@ -189,7 +189,6 @@ test.describe("Resize node - Input Data", () => {
type: TestAnnotations.REGRESSION,
description:
"https://github.com/apache/incubator-kie-issues/issues/1074";,
});
- test.skip(true,
"https://github.com/apache/incubator-kie-issues/issues/1074";);
await inputDataPropertiesPanel.open();
await nodes.select({ name: DefaultNodeName.INPUT_DATA });
await inputDataPropertiesPanel.setShape({ width: "50", height: "50" });
@@ -207,7 +206,6 @@ test.describe("Resize node - Input Data", () => {
type: TestAnnotations.REGRESSION,
description:
"https://github.com/apache/incubator-kie-issues/issues/1075";,
});
- test.skip(true,
"https://github.com/apache/incubator-kie-issues/issues/1075";);
await inputDataPropertiesPanel.open();
await nodes.select({ name: DefaultNodeName.INPUT_DATA });
await inputDataPropertiesPanel.setShape({ width: "300", height: "300" });
diff --git
a/packages/dmn-editor/tests/e2e/drgElements/resizeKnowledgeSource.spec.ts
b/packages/dmn-editor/tests/e2e/drgElements/resizeKnowledgeSource.spec.ts
index b67b6e6fb9e..73c49eb8425 100644
--- a/packages/dmn-editor/tests/e2e/drgElements/resizeKnowledgeSource.spec.ts
+++ b/packages/dmn-editor/tests/e2e/drgElements/resizeKnowledgeSource.spec.ts
@@ -202,7 +202,6 @@ test.describe("Resize node - Knowledge Source", () => {
type: TestAnnotations.REGRESSION,
description:
"https://github.com/apache/incubator-kie-issues/issues/1074";,
});
- test.skip(true,
"https://github.com/apache/incubator-kie-issues/issues/1074";);
await knowledgeSourcePropertiesPanel.open();
await nodes.select({ name: DefaultNodeName.KNOWLEDGE_SOURCE });
await knowledgeSourcePropertiesPanel.setShape({ width: "50", height:
"50" });
@@ -220,7 +219,6 @@ test.describe("Resize node - Knowledge Source", () => {
type: TestAnnotations.REGRESSION,
description:
"https://github.com/apache/incubator-kie-issues/issues/1075";,
});
- test.skip(true,
"https://github.com/apache/incubator-kie-issues/issues/1075";);
await knowledgeSourcePropertiesPanel.open();
await nodes.select({ name: DefaultNodeName.KNOWLEDGE_SOURCE });
await knowledgeSourcePropertiesPanel.setShape({ width: "300", height:
"300" });
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
